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/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>
+  );
+}