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>

src/components/AdTrackerClient.tsx

@@ -13,6 +13,7 @@ import {
   CreativesGallery,
   CreativeZoomModal,
 } from '@/components/AdCreativesGallery';
+import { PageHeader } from '@/components/ui';
 
 type PlatformKpis = {
   spend: number;
@@ -407,30 +408,11 @@ export default function AdTrackerClient({
 
   return (
     <div className="space-y-6">
-      <div className="flex flex-wrap items-end justify-between gap-3">
-        <div>
-          <p className="text-[11px] font-bold tracking-[0.16em] uppercase text-sky-400">
-            Ad tracker · {label}
-          </p>
-          <h2 className="text-2xl md:text-3xl font-extrabold text-white mt-1">
-            {tagline || 'Meta + Google Ads'}
-          </h2>
-          <p className="text-sm text-gray-400 mt-2 max-w-2xl">
-            Resumen Meta + Google: gasto, clics, conversiones y{' '}
-            <span className="text-gray-300">preview de creatividades</span> por
-            anuncio (como en{' '}
-            <a
-              href="https://4ventures.es/adtracker/brava-dermoestetica"
-              target="_blank"
-              rel="noreferrer"
-              className="text-sky-400 hover:underline"
-            >
-              Ad Tracker Brava
-            </a>
-            ). Ventana: {range.since} → {range.until}.
-          </p>
-        </div>
-      </div>
+      <PageHeader
+        eyebrow={`Ad Tracker · ${label}`}
+        title={tagline || 'Meta + Google Ads'}
+        description={`Gasto, clics, conversiones y preview de creatividades. Ventana: ${range.since} → ${range.until}.`}
+      />
 
       {/* Period presets */}
       <div>

src/components/AssetsLibrary.tsx

@@ -12,6 +12,7 @@ import {
   Trash2,
   Upload,
 } from 'lucide-react';
+import { PageHeader } from '@/components/ui';
 
 type Asset = {
   id: string;
@@ -218,16 +219,11 @@ export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string })
 
   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 max-w-2xl">
-          Archivo oficial de <strong className="text-gray-300">{tenantLabel}</strong>.
-          Subidas al portal se copian a la carpeta Drive del cliente si está
-          enlazada.
-        </p>
-      </div>
+      <PageHeader
+        eyebrow="Contenido"
+        title="Activos"
+        description={`Archivo oficial de ${tenantLabel}. Subidas al portal se copian a Drive si está enlazado.`}
+      />
 
       <div className="flex gap-2">
         <button

src/components/CreativesPipeline.tsx

@@ -15,6 +15,7 @@ import CreativePlacementPreview, {
   PLACEMENT_OPTIONS,
   type CreativePreviewData,
 } from '@/components/CreativePlacementPreview';
+import { PageHeader } from '@/components/ui';
 
 export type Creative = CreativePreviewData & {
   id: string;
@@ -231,28 +232,20 @@ export default function CreativesPipeline() {
 
   return (
     <div className="space-y-6">
-      <div className="flex flex-wrap items-end justify-between gap-3">
-        <div>
-          <p className="text-[11px] font-bold tracking-[0.16em] uppercase text-violet-400">
-            Pipeline creatividades
-          </p>
-          <h2 className="text-2xl font-bold tracking-tight text-white mt-1">
-            Preview como en Ad Tracker
-          </h2>
-          <p className="text-sm text-gray-400 mt-1 max-w-2xl">
-            Cada pieza muestra cómo se verá en Meta/Google Ads o en RRSS
-            (feed, Stories, LinkedIn) antes de aprobar. Cliente en contexto
-            arriba.
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={() => setShowForm((v) => !v)}
-          className="inline-flex items-center gap-2 rounded-xl bg-brand-500/90 hover:bg-brand-500 px-4 py-2.5 text-sm font-semibold text-white"
-        >
-          <Plus className="w-4 h-4" /> Nueva pieza
-        </button>
-      </div>
+      <PageHeader
+        eyebrow="Contenido"
+        title="Pipeline"
+        description="Preview de piezas en Meta/Google Ads o RRSS antes de aprobar."
+        actions={
+          <button
+            type="button"
+            onClick={() => setShowForm((v) => !v)}
+            className="inline-flex items-center gap-2 rounded-xl bg-brand-500/90 hover:bg-brand-500 px-4 py-2.5 text-sm font-semibold text-white"
+          >
+            <Plus className="w-4 h-4" /> Nueva pieza
+          </button>
+        }
+      />
 
       {warning && (
         <p className="text-xs text-amber-400/90 border border-amber-500/20 rounded-lg px-3 py-2">

src/components/CrmDashboard.tsx

@@ -25,6 +25,7 @@ import {
   formatNum,
   resolveKpiDayRange,
 } from '@/lib/metrics';
+import { PageHeader } from '@/components/ui';
 
 type RangeKey = KpiRangeKey;
 
@@ -95,44 +96,39 @@ export default function CrmDashboard({
 
   return (
     <div className="space-y-8">
-      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-3">
-        <div>
-          <h2 className="text-2xl font-bold tracking-tight text-white">
-            CRM · Clientify
-          </h2>
-          <p className="text-sm text-gray-400 mt-1">
-            {label}
-            {portfolioWide ? ' · portafolio' : ' · zoom cliente'}. Funnel y % a
-            cliente (ganado) por canal · {rangeHint}.
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <CalendarRange className="w-4 h-4 text-gray-500" />
-          <div className="flex gap-1 rounded-lg border border-gray-800 p-0.5 bg-black/20">
-            {(
-              [
-                ['7d', '7d'],
-                ['30d', '30d'],
-                ['month', 'Mes'],
-                ['all', 'Todo'],
-              ] as [RangeKey, string][]
-            ).map(([k, lbl]) => (
-              <button
-                key={k}
-                type="button"
-                onClick={() => setRange(k)}
-                className={`px-2.5 py-1 text-xs rounded-md ${
-                  range === k
-                    ? 'bg-brand-500/20 text-brand-300'
-                    : 'text-gray-400 hover:text-white'
-                }`}
-              >
-                {lbl}
-              </button>
-            ))}
+      <PageHeader
+        eyebrow="Rendimiento"
+        title="CRM"
+        description={`${label}${portfolioWide ? ' · portafolio' : ''}. Funnel y % a cliente por canal · ${rangeHint}.`}
+        actions={
+          <div className="flex items-center gap-2">
+            <CalendarRange className="w-4 h-4 text-gray-500" />
+            <div className="flex gap-1 rounded-lg border border-white/[0.08] p-0.5 bg-black/20">
+              {(
+                [
+                  ['7d', '7d'],
+                  ['30d', '30d'],
+                  ['month', 'Mes'],
+                  ['all', 'Todo'],
+                ] as [RangeKey, string][]
+              ).map(([k, lbl]) => (
+                <button
+                  key={k}
+                  type="button"
+                  onClick={() => setRange(k)}
+                  className={`px-2.5 py-1 text-xs rounded-md ${
+                    range === k
+                      ? 'bg-brand-500/20 text-brand-300'
+                      : 'text-gray-400 hover:text-white'
+                  }`}
+                >
+                  {lbl}
+                </button>
+              ))}
+            </div>
           </div>
-        </div>
-      </div>
+        }
+      />
 
       {!crmLeads.length ? (
         <p className="text-sm text-amber-400/90 border border-amber-500/20 rounded-lg px-4 py-3">

src/components/DashboardShell.tsx

@@ -0,0 +1,278 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  BarChart3,
+  Target,
+  FolderGit2,
+  Bot,
+  ShieldCheck,
+  Layers,
+  LogOut,
+  UserCheck,
+  CalendarDays,
+  Radio,
+  Megaphone,
+  Contact,
+  Menu,
+  X,
+  Images,
+} from 'lucide-react';
+import TenantSwitcher from '@/components/TenantSwitcher';
+
+type NavItem = {
+  href: string;
+  label: string;
+  hint?: string;
+  icon: React.ComponentType<{ className?: string }>;
+};
+
+type NavGroup = {
+  title: string;
+  items: NavItem[];
+};
+
+const CLIENT_GROUPS: NavGroup[] = [
+  {
+    title: 'Rendimiento',
+    items: [
+      { href: '/dashboard/kpis', label: 'Métricas', hint: 'KPIs y canales', icon: BarChart3 },
+      { href: '/dashboard/crm', label: 'CRM', hint: 'Leads y clientes', icon: Contact },
+      { href: '/dashboard/seguimiento', label: 'Seguimiento', hint: 'Estado operativo', icon: Radio },
+      { href: '/dashboard/ad-tracker', label: 'Ad Tracker', hint: 'Creatividades y ads', icon: Megaphone },
+    ],
+  },
+  {
+    title: 'Contenido',
+    items: [
+      { href: '/dashboard/estrategia', label: 'Objetivos', hint: 'Plan del mes', icon: Target },
+      { href: '/dashboard/calendario', label: 'Calendario', hint: 'Editorial', icon: CalendarDays },
+      { href: '/dashboard/activos', label: 'Activos', hint: 'Biblioteca de archivos', icon: FolderGit2 },
+      { href: '/dashboard/creatives', label: 'Pipeline', hint: 'Creatividades', icon: Images },
+    ],
+  },
+  {
+    title: 'Herramientas',
+    items: [
+      { href: '/dashboard/asistente', label: 'Asistente', hint: 'IA financiera', icon: Bot },
+    ],
+  },
+];
+
+function isActive(pathname: string, href: string): boolean {
+  if (pathname === href) return true;
+  if (href !== '/dashboard' && pathname.startsWith(href + '/')) return true;
+  return false;
+}
+
+function NavLink({
+  item,
+  onNavigate,
+}: {
+  item: NavItem;
+  onNavigate?: () => void;
+}) {
+  const pathname = usePathname();
+  const active = isActive(pathname, item.href);
+  const Icon = item.icon;
+  return (
+    <Link
+      href={item.href}
+      onClick={onNavigate}
+      className={`group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition-colors ${
+        active
+          ? 'bg-brand-500/15 text-white border border-brand-500/30'
+          : 'text-gray-300 border border-transparent hover:bg-white/[0.04] hover:text-white'
+      }`}
+    >
+      <Icon
+        className={`w-4 h-4 shrink-0 ${
+          active ? 'text-brand-400' : 'text-gray-500 group-hover:text-gray-300'
+        }`}
+      />
+      <span className="min-w-0">
+        <span className="block font-medium leading-tight">{item.label}</span>
+        {item.hint ? (
+          <span
+            className={`block text-[10px] leading-tight mt-0.5 ${
+              active ? 'text-brand-200/70' : 'text-gray-600'
+            }`}
+          >
+            {item.hint}
+          </span>
+        ) : null}
+      </span>
+    </Link>
+  );
+}
+
+export default function DashboardShell({
+  children,
+  email,
+  company,
+  role,
+  isAgency,
+  viewName,
+  logoutAction,
+}: {
+  children: React.ReactNode;
+  email: string;
+  company: string;
+  role: string;
+  isAgency: boolean;
+  viewName?: string;
+  logoutAction: () => void | Promise<void>;
+}) {
+  const [open, setOpen] = useState(false);
+  const close = () => setOpen(false);
+
+  const groups: NavGroup[] = [
+    ...CLIENT_GROUPS,
+    ...(isAgency
+      ? [
+          {
+            title: 'Agencia',
+            items: [
+              {
+                href: '/dashboard/agencia',
+                label: 'Portafolio',
+                hint: 'Todos los clientes',
+                icon: Layers,
+              },
+            ],
+          } satisfies NavGroup,
+        ]
+      : []),
+  ];
+
+  const sidebar = (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center gap-3 px-1 py-1 mb-5">
+        <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 flex items-center justify-center font-bold text-white text-sm shadow-lg shadow-brand-500/20">
+          4V
+        </div>
+        <div className="min-w-0">
+          <p className="font-semibold text-sm tracking-wide text-white leading-tight">
+            4Ventures
+          </p>
+          <p className="text-[11px] text-gray-500 leading-tight">Centro de Mando</p>
+        </div>
+        <button
+          type="button"
+          className="ml-auto md:hidden rounded-lg p-2 text-gray-400 hover:bg-white/5"
+          onClick={close}
+          aria-label="Cerrar menú"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      <nav className="flex-1 overflow-y-auto space-y-5 pr-1">
+        {groups.map((group) => (
+          <div key={group.title}>
+            <p className="px-3 mb-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-gray-600">
+              {group.title}
+            </p>
+            <div className="space-y-1">
+              {group.items.map((item) => (
+                <NavLink key={item.href} item={item} onNavigate={close} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </nav>
+
+      <div className="pt-4 mt-4 border-t border-white/[0.06] space-y-3">
+        <div className="px-3 py-2.5 rounded-xl bg-white/[0.03] border border-white/[0.06]">
+          <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 gap-2">
+            <span className="text-[10px] text-gray-500 truncate">{company}</span>
+            <span className="text-[9px] uppercase tracking-wider font-semibold px-1.5 py-0.5 rounded bg-brand-500/15 text-brand-400 shrink-0">
+              {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-xl text-xs font-medium text-gray-400 hover:text-red-300 hover:bg-red-500/10 border border-transparent hover:border-red-500/20 transition-colors"
+          >
+            <LogOut className="w-3.5 h-3.5" />
+            Cerrar sesión
+          </button>
+        </form>
+
+        <p className="flex items-center gap-1.5 px-2 text-[10px] text-emerald-500/80">
+          <ShieldCheck className="w-3 h-3" />
+          Aislamiento RLS multi-tenant
+        </p>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex min-h-screen bg-background text-gray-100">
+      {/* Desktop sidebar */}
+      <aside className="hidden md:flex w-[260px] shrink-0 flex-col border-r border-white/[0.06] bg-sidebar p-4">
+        {sidebar}
+      </aside>
+
+      {/* Mobile drawer */}
+      {open ? (
+        <div className="fixed inset-0 z-50 md:hidden">
+          <button
+            type="button"
+            className="absolute inset-0 bg-black/70"
+            aria-label="Cerrar menú"
+            onClick={close}
+          />
+          <aside className="absolute left-0 top-0 h-full w-[280px] bg-sidebar border-r border-white/[0.08] p-4 shadow-2xl">
+            {sidebar}
+          </aside>
+        </div>
+      ) : null}
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <header className="sticky top-0 z-30 h-14 border-b border-white/[0.06] bg-sidebar/90 backdrop-blur-md px-4 md:px-6 flex items-center gap-3">
+          <button
+            type="button"
+            className="md:hidden rounded-lg p-2 text-gray-300 hover:bg-white/5"
+            onClick={() => setOpen(true)}
+            aria-label="Abrir menú"
+          >
+            <Menu className="w-5 h-5" />
+          </button>
+
+          <div className="flex min-w-0 items-center gap-2 text-sm">
+            <span className="hidden sm:inline text-gray-500 shrink-0">
+              {isAgency ? 'Cliente' : 'Portal'}
+            </span>
+            <TenantSwitcher
+              isAgency={isAgency}
+              initialName={viewName || company}
+            />
+          </div>
+
+          <div className="ml-auto hidden sm:flex items-center gap-2 text-[11px] text-gray-500">
+            <span className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.03] px-2.5 py-1">
+              <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+              Operativo
+            </span>
+          </div>
+        </header>
+
+        <main className="flex-1 overflow-y-auto">
+          <div className="mx-auto w-full max-w-7xl px-4 py-6 md:px-8 md:py-8">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

src/components/MetricsDashboard.tsx

@@ -33,6 +33,7 @@ import {
   KpiWeeklyRow,
   KpiRangeKey,
 } from '@/lib/metrics';
+import { PageHeader } from '@/components/ui';
 
 type Card = {
   key: keyof MetricTotals;
@@ -250,46 +251,39 @@ export default function MetricsDashboard({
 
   return (
     <div className="space-y-8">
-      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-3">
-        <div>
-          <h2 className="text-2xl font-bold tracking-tight text-white">
-            North Star · métricas
-          </h2>
-          <p className="text-sm text-gray-400 mt-1">
-            {label}
-            {portfolioWide
-              ? ' · portafolio'
-              : ' · zoom cliente'}
-            . Periodo {rangeHint} (mismos días calendario que Ad Tracker).
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <CalendarRange className="w-4 h-4 text-gray-500" />
-          <div className="flex gap-1 rounded-lg border border-gray-800 p-0.5 bg-black/20">
-            {(
-              [
-                ['7d', '7d'],
-                ['30d', '30d'],
-                ['month', 'Mes'],
-                ['all', 'Todo'],
-              ] as [RangeKey, string][]
-            ).map(([k, lbl]) => (
-              <button
-                key={k}
-                type="button"
-                onClick={() => setRange(k)}
-                className={`px-2.5 py-1 text-xs rounded-md ${
-                  range === k
-                    ? 'bg-brand-500/20 text-brand-300'
-                    : 'text-gray-400 hover:text-white'
-                }`}
-              >
-                {lbl}
-              </button>
-            ))}
+      <PageHeader
+        eyebrow="Rendimiento"
+        title="Métricas"
+        description={`${label}${portfolioWide ? ' · portafolio' : ''}. Periodo ${rangeHint} (mismos días calendario que Ad Tracker).`}
+        actions={
+          <div className="flex items-center gap-2">
+            <CalendarRange className="w-4 h-4 text-gray-500" />
+            <div className="flex gap-1 rounded-lg border border-white/[0.08] p-0.5 bg-black/20">
+              {(
+                [
+                  ['7d', '7d'],
+                  ['30d', '30d'],
+                  ['month', 'Mes'],
+                  ['all', 'Todo'],
+                ] as [RangeKey, string][]
+              ).map(([k, lbl]) => (
+                <button
+                  key={k}
+                  type="button"
+                  onClick={() => setRange(k)}
+                  className={`px-2.5 py-1 text-xs rounded-md ${
+                    range === k
+                      ? 'bg-brand-500/20 text-brand-300'
+                      : 'text-gray-400 hover:text-white'
+                  }`}
+                >
+                  {lbl}
+                </button>
+              ))}
+            </div>
           </div>
-        </div>
-      </div>
+        }
+      />
 
       {sparse && (
         <p className="text-xs text-amber-400/90 border border-amber-500/20 rounded-lg px-3 py-2">

src/components/SeguimientoBoard.tsx

@@ -24,6 +24,7 @@ import {
   sumDaily,
   sumWeekly,
 } from '@/lib/metrics';
+import { PageHeader } from '@/components/ui';
 import {
   AD_TRACKER_PRESETS,
   RangePreset,
@@ -442,23 +443,14 @@ export default function SeguimientoBoard() {
 
   return (
     <div className="space-y-8">
-      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-3">
-        <div>
-          <p className="text-[11px] font-bold tracking-[0.16em] uppercase text-sky-400">
-            Seguimiento
-          </p>
-          <h2 className="text-2xl font-bold tracking-tight text-white mt-1">
-            Evolución de métricas
-          </h2>
-          <p className="text-sm text-gray-400 mt-1">
-            {data.label} · mismas KPIs que Métricas, filtrables por periodo +
-            notas del equipo
-          </p>
-        </div>
-      </div>
+      <PageHeader
+        eyebrow="Rendimiento"
+        title="Seguimiento"
+        description={`${data.label} · mismas KPIs que Métricas, filtrables por periodo + notas del equipo`}
+      />
 
       {/* Date selector */}
-      <section className="rounded-2xl border border-gray-800 bg-[#111827] p-4 space-y-3">
+      <section className="rounded-2xl border border-white/[0.06] bg-card/80 p-4 space-y-3">
         <div className="flex items-center gap-2 text-xs text-gray-400">
           <CalendarRange className="w-3.5 h-3.5 text-sky-400" />
           Periodo

src/components/ui.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+/** Título de página unificado para todo el Centro de Mando. */
+export function PageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+}: {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+}) {
+  return (
+    <div className="mb-6 md:mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+      <div className="min-w-0 space-y-1.5">
+        {eyebrow ? (
+          <p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-brand-400/90">
+            {eyebrow}
+          </p>
+        ) : null}
+        <h1 className="text-2xl md:text-3xl font-semibold tracking-tight text-white text-balance">
+          {title}
+        </h1>
+        {description ? (
+          <p className="text-sm text-gray-400 max-w-2xl leading-relaxed">
+            {description}
+          </p>
+        ) : null}
+      </div>
+      {actions ? (
+        <div className="flex flex-wrap items-center gap-2 shrink-0">{actions}</div>
+      ) : null}
+    </div>
+  );
+}
+
+/** Superficie de contenido estándar (sustituye cards sueltas inconsistentes). */
+export function Surface({
+  children,
+  className = '',
+  padded = true,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  padded?: boolean;
+}) {
+  return (
+    <div
+      className={`rounded-2xl border border-white/[0.06] bg-card/80 ${
+        padded ? 'p-4 md:p-5' : ''
+      } ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function SectionTitle({
+  title,
+  description,
+}: {
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div className="mb-3">
+      <h2 className="text-base font-semibold text-white">{title}</h2>
+      {description ? (
+        <p className="text-xs text-gray-500 mt-0.5">{description}</p>
+      ) : null}
+    </div>
+  );
+}
+
+/** Estado vacío / aviso de contexto reutilizable. */
+export function EmptyState({
+  title,
+  description,
+}: {
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div className="rounded-2xl border border-dashed border-white/[0.1] bg-white/[0.02] px-6 py-10 text-center">
+      <p className="text-sm font-medium text-gray-200">{title}</p>
+      {description ? (
+        <p className="text-xs text-gray-500 mt-1.5 max-w-md mx-auto leading-relaxed">
+          {description}
+        </p>
+      ) : null}
+    </div>
+  );
+}