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>