feat: interfaz clara unificada en Centro de Mando

Shell con nav agrupada y activa, PageHeader común, tipografía y tokens.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/app/dashboard/activos/page.tsx

@@ -3,6 +3,7 @@ import { createClient } from '@/lib/supabase/server';
 import { redirect } from 'next/navigation';
 import { resolveActiveTenant } from '@/lib/tenant-context';
 import AssetsLibrary from '@/components/AssetsLibrary';
+import { EmptyState, PageHeader } from '@/components/ui';
 
 export const dynamic = 'force-dynamic';
 
@@ -18,18 +19,15 @@ export default async function ActivosPage() {
   if (ctx.portfolioWide) {
     return (
       <div className="space-y-6">
-        <div>
-          <h2 className="text-2xl font-bold tracking-tight text-white">
-            Biblioteca de activos
-          </h2>
-          <p className="text-sm text-gray-400 mt-1">
-            Selecciona un cliente en Contexto para subir o consultar archivos
-            validados.
-          </p>
-        </div>
-        <p className="text-sm text-gray-500 border border-gray-800 rounded-xl p-6 bg-[#111827]">
-          Vista global: elige el tenant arriba y vuelve aquí.
-        </p>
+        <PageHeader
+          eyebrow="Contenido"
+          title="Activos"
+          description="Biblioteca de archivos validados por cliente."
+        />
+        <EmptyState
+          title="Elige un cliente"
+          description="Selecciona un tenant en Contexto para subir o consultar archivos."
+        />
       </div>
     );
   }

src/app/dashboard/agencia/page.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Building2, DollarSign, Users, TrendingUp, Layers } from 'lucide-react';
+import { Building2, DollarSign, Users, TrendingUp } from 'lucide-react';
 import ClientManagement from '@/components/ClientManagement';
 import AgencyPortfolioBoard from '@/components/AgencyPortfolioBoard';
 import { createClient } from '@/lib/supabase/server';
 import { redirect } from 'next/navigation';
+import { PageHeader } from '@/components/ui';
 
 export const revalidate = 0;
 
@@ -71,16 +72,11 @@ export default async function AgencyPage() {
 
   return (
     <div className="space-y-8">
-      <div>
-        <div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-md bg-brand-950/60 border border-brand-800/40 text-brand-400 text-xs font-semibold uppercase tracking-wider mb-2">
-          <Layers className="w-3.5 h-3.5" /> Vista Global de Agencia (Cross-Tenant)
-        </div>
-        <h2 className="text-2xl font-bold tracking-tight text-white">Centro de Mando 4Ventures</h2>
-        <p className="text-sm text-gray-400 mt-1">
-          Portafolio multi-cliente · control de conexiones (Meta, Google, Drive,
-          Clientify…) · seguir/archivar clientes · modo superadmin.
-        </p>
-      </div>
+      <PageHeader
+        eyebrow="Agencia"
+        title="Portafolio"
+        description="Clientes, conexiones (Meta, Google, Drive, Clientify…) y seguimiento operativo."
+      />
 
       <AgencyPortfolioBoard />
 

src/app/dashboard/calendario/page.tsx

@@ -10,6 +10,7 @@ import PublishRrssButton from './PublishRrssButton';
 import RrssArchiveYear from '@/components/RrssArchiveYear';
 import octPlan from '@/data/rrss-octubre-2026.json';
 import { Instagram, Linkedin, CalendarDays } from 'lucide-react';
+import { PageHeader } from '@/components/ui';
 
 export const dynamic = 'force-dynamic';
 
@@ -167,14 +168,11 @@ export default async function CalendarioPage({
 
   return (
     <div className="space-y-6">
-      <div>
-        <div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-md bg-brand-950/60 border border-brand-800/40 text-brand-400 text-xs font-semibold uppercase tracking-wider mb-2">
-          <CalendarDays className="w-3.5 h-3.5" /> RRSS
-        </div>
-        <h2 className="text-2xl font-bold text-white">
-          Calendario editorial — {ctx.label}
-        </h2>
-      </div>
+      <PageHeader
+        eyebrow="Contenido"
+        title="Calendario editorial"
+        description={ctx.label}
+      />
       <CalendarClient
         initialPosts={legacy as never[]}
         calendarTitle={calendarDocs[0]?.title || 'Calendario'}

src/app/dashboard/estrategia/page.tsx

@@ -6,6 +6,7 @@ import { redirect } from 'next/navigation';
 import { resolveActiveTenant, restGet } from '@/lib/tenant-context';
 import { isAgencyRole, userRole } from '@/lib/agency';
 import { AdDailyRow } from '@/lib/metrics';
+import { EmptyState, PageHeader } from '@/components/ui';
 
 export const dynamic = 'force-dynamic';
 
@@ -180,19 +181,17 @@ export default async function EstrategiaPage() {
 
   return (
     <div className="space-y-8">
-      <div>
-        <h2 className="text-2xl font-bold tracking-tight text-white">
-          Objetivos del mes
-        </h2>
-        <p className="text-sm text-gray-400 mt-1">{ctx.label}</p>
-        <p className="text-xs text-gray-500 mt-2 max-w-2xl">{sourceNote}</p>
-      </div>
+      <PageHeader
+        eyebrow="Contenido"
+        title="Objetivos del mes"
+        description={`${ctx.label}${sourceNote ? ` · ${sourceNote}` : ''}`}
+      />
 
       {ctx.portfolioWide ? (
-        <p className="text-sm text-gray-500 border border-gray-800 rounded-xl p-6 bg-[#111827]">
-          Elige un cliente arriba (Contexto) para ver presupuesto y consecución
-          de objetivos de ese tenant.
-        </p>
+        <EmptyState
+          title="Elige un cliente"
+          description="Selecciona un tenant en Contexto para ver presupuesto y consecución de objetivos."
+        />
       ) : (
         <div className="grid gap-4 lg:grid-cols-2">
           {/* Presupuesto */}

src/app/dashboard/layout.tsx

@@ -1,24 +1,9 @@
 import React from 'react';
-import Link from 'next/link';
-import { 
-  BarChart3, 
-  Target, 
-  FolderGit2, 
-  Bot, 
-  ShieldCheck,
-  Layers,
-  LogOut,
-  UserCheck,
-  CalendarDays,
-  Radio,
-  Megaphone,
-  Contact
-} from 'lucide-react';
 import { createClient } from '@/lib/supabase/server';
 import { logoutAction } from '@/app/auth/actions';
-import TenantSwitcher from '@/components/TenantSwitcher';
 import { cookies } from 'next/headers';
 import { VIEW_TENANT_NAME_COOKIE } from '@/lib/agency';
+import DashboardShell from '@/components/DashboardShell';
 
 export default async function DashboardLayout({
   children,
@@ -26,9 +11,12 @@ export default async function DashboardLayout({
   children: React.ReactNode;
 }) {
   const supabase = await createClient();
-  const { data: { user } } = await supabase.auth.getUser();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
 
-  const role = user?.user_metadata?.role || user?.app_metadata?.role || 'client';
+  const role =
+    user?.user_metadata?.role || user?.app_metadata?.role || 'client';
   const company = user?.user_metadata?.company || '4Ventures Central';
   const email = user?.email || 'usuario@4ventures.es';
   const isAgency = role === 'admin' || role === 'team';
@@ -36,156 +24,15 @@ export default async function DashboardLayout({
   const viewName = cookieStore.get(VIEW_TENANT_NAME_COOKIE)?.value;
 
   return (
-    <div className="flex min-h-screen bg-[#0B0F19]">
-      {/* Sidebar */}
-      <aside className="w-64 border-r border-gray-800 bg-[#0D121F] flex flex-col justify-between p-4 shrink-0">
-        <div>
-          <div className="flex items-center gap-3 px-2 py-4 border-b border-gray-800/80 mb-6">
-            <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-brand-500 to-amber-600 flex items-center justify-center font-bold text-white shadow-lg shadow-brand-500/20">
-              4V
-            </div>
-            <div>
-              <h1 className="font-bold text-sm tracking-wide text-white">4VENTURES</h1>
-              <p className="text-xs text-gray-400 font-medium">Centro de Mando</p>
-            </div>
-          </div>
-
-          <nav className="space-y-1.5">
-            <Link
-              href="/dashboard/kpis"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-200 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <BarChart3 className="w-4 h-4 text-brand-500" />
-              Métricas
-            </Link>
-            <Link
-              href="/dashboard/crm"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <Contact className="w-4 h-4 text-teal-400" />
-              CRM
-            </Link>
-            <Link
-              href="/dashboard/seguimiento"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <Radio className="w-4 h-4 text-sky-400" />
-              Seguimiento
-            </Link>
-            <Link
-              href="/dashboard/estrategia"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <Target className="w-4 h-4 text-emerald-400" />
-              Objetivos del Mes
-            </Link>
-            <Link
-              href="/dashboard/calendario"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <CalendarDays className="w-4 h-4 text-pink-400" />
-              Calendario Editorial
-            </Link>
-            <Link
-              href="/dashboard/ad-tracker"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <Megaphone className="w-4 h-4 text-violet-400" />
-              Ad Tracker
-            </Link>
-            <Link
-              href="/dashboard/activos"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <FolderGit2 className="w-4 h-4 text-blue-400" />
-              Biblioteca de Activos
-            </Link>
-            <Link
-              href="/dashboard/creatives"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <FolderGit2 className="w-4 h-4 text-orange-400" />
-              Pipeline creatividades
-            </Link>
-            <Link
-              href="/dashboard/asistente"
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-            >
-              <Bot className="w-4 h-4 text-purple-400" />
-              Asistente IA Financiero
-            </Link>
-
-            {isAgency && (
-              <div className="pt-4 mt-4 border-t border-gray-800/60">
-                <span className="px-3 text-[10px] font-bold uppercase tracking-wider text-gray-400">Agencia OS</span>
-                <Link
-                  href="/dashboard/agencia"
-                  className="flex items-center gap-3 px-3 py-2.5 mt-1 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
-                >
-                  <Layers className="w-4 h-4 text-amber-400" />
-                  Portafolio Agencia
-                </Link>
-              </div>
-            )}
-          </nav>
-        </div>
-
-        {/* Sidebar Footer with User Info & Logout */}
-        <div className="pt-4 border-t border-gray-800/80 space-y-3">
-          <div className="px-2 py-2 rounded-xl bg-gray-900/60 border border-gray-800/80">
-            <div className="flex items-center gap-2 mb-1">
-              <UserCheck className="w-3.5 h-3.5 text-brand-400 shrink-0" />
-              <p className="text-xs font-medium text-white truncate">{email}</p>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-[10px] text-gray-400 capitalize">{company}</span>
-              <span className="text-[9px] uppercase tracking-wider font-semibold px-1.5 py-0.5 rounded bg-brand-500/20 text-brand-400">
-                {role}
-              </span>
-            </div>
-          </div>
-
-          <form action={logoutAction}>
-            <button
-              type="submit"
-              className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-gray-400 hover:text-red-400 hover:bg-red-500/10 border border-transparent hover:border-red-500/20 transition-all cursor-pointer"
-            >
-              <LogOut className="w-3.5 h-3.5" />
-              Cerrar Sesión
-            </button>
-          </form>
-
-          <div className="flex items-center justify-between px-2 pt-1 text-[11px] text-gray-500">
-            <span className="flex items-center gap-1 text-emerald-400">
-              <ShieldCheck className="w-3 h-3" /> RLS Activo
-            </span>
-            <span>VPS Hostinger</span>
-          </div>
-        </div>
-      </aside>
-
-      {/* Main Content Area */}
-      <div className="flex-1 flex flex-col min-w-0">
-        <header className="h-16 border-b border-gray-800 bg-[#0D121F]/50 backdrop-blur px-8 flex items-center justify-between">
-          <div className="flex items-center gap-2 text-sm text-gray-400">
-            <span>{isAgency ? 'Contexto:' : 'Cliente / Portal:'}</span>
-            <TenantSwitcher
-              isAgency={isAgency}
-              initialName={viewName || company}
-            />
-          </div>
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-2 text-xs bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2.5 py-1 rounded-full">
-              <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
-              Sync Meta Ads · warehouse
-            </div>
-          </div>
-        </header>
-
-        <main className="flex-1 p-8 overflow-y-auto max-w-7xl mx-auto w-full">
-          {children}
-        </main>
-      </div>
-    </div>
+    <DashboardShell
+      email={email}
+      company={company}
+      role={role}
+      isAgency={isAgency}
+      viewName={viewName}
+      logoutAction={logoutAction}
+    >
+      {children}
+    </DashboardShell>
   );
 }

src/app/globals.css

@@ -3,13 +3,43 @@
 @tailwind utilities;
 
 :root {
-  --background: #0B0F19;
-  --foreground: #F3F4F6;
-  --border: #1F2937;
+  --background: #0b0f19;
+  --foreground: #f3f4f6;
+  --card: #111827;
+  --sidebar: #0d121f;
+  --border: rgba(255, 255, 255, 0.06);
+  --brand: #e58a3c;
+  --muted: #9ca3af;
+}
+
+html {
+  color-scheme: dark;
 }
 
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
+  background-image:
+    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(229, 138, 60, 0.12), transparent 55%),
+    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(56, 189, 248, 0.06), transparent 50%);
+  background-attachment: fixed;
+  min-height: 100vh;
+}
+
+/* Scrollbars sobrios */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #1f2937 transparent;
+}
+
+::selection {
+  background: rgba(229, 138, 60, 0.35);
+  color: #fff;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
 }

src/app/layout.tsx

@@ -1,13 +1,21 @@
 import type { Metadata } from 'next';
+import { Source_Sans_3 } from 'next/font/google';
 import './globals.css';
 
+const sans = Source_Sans_3({
+  subsets: ['latin'],
+  variable: '--font-sans',
+  display: 'swap',
+});
+
 export const metadata: Metadata = {
   title: '4Ventures — Centro de Mando del Cliente',
-  description: 'Portal ejecutivo y analítica de crecimiento impulsado por IA para 4Ventures',
+  description:
+    'Portal ejecutivo y analítica de crecimiento impulsado por IA para 4Ventures',
   icons: {
     icon: [
       { url: '/favicon.png', type: 'image/png' },
-      { url: '/favicon.ico' }
+      { url: '/favicon.ico' },
     ],
     apple: '/favicon.png',
   },
@@ -19,8 +27,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="es" className="dark">
-      <body className="bg-[#0B0F19] text-gray-100 min-h-screen antialiased">
+    <html lang="es" className={`dark ${sans.variable}`}>
+      <body className={`${sans.className} bg-background text-gray-100 min-h-screen antialiased`}>
         {children}
       </body>
     </html>

src/app/login/page.tsx

@@ -152,15 +152,13 @@ export default function LoginPage() {
         </Suspense>
 
         {/* Security Footer */}
-        <div className="mt-8 flex items-center justify-center gap-4 text-[11px] text-gray-400">
+        <div className="mt-8 flex items-center justify-center gap-4 text-[11px] text-gray-500">
           <div className="flex items-center gap-1.5">
             <ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
-            <span>Aislamiento RLS Multi-Tenant</span>
+            <span>Aislamiento RLS multi-tenant</span>
           </div>
-          <span>•</span>
-          <span>Cifrado TLS v1.3</span>
-          <span>•</span>
-          <span>Dokploy VPS</span>
+          <span>·</span>
+          <span>TLS 1.3</span>
         </div>
       </div>
     </div>