fix: aplicar layout Estilo/Brief a Zona de marca tras rebase

Nav lateral numerada + panel editable como creatividades; Auto-rellenar;
parse brandbook robusto para que app.4ventures.es muestre el kit.

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

src/components/BrandZone.tsx

@@ -18,19 +18,27 @@ import {
   X,
   Check,
   Rss,
+  Building2,
+  MessageSquareText,
+  Users,
+  Package,
+  Layers,
+  Share2,
+  Megaphone,
+  Linkedin,
+  FileText,
+  ShieldCheck,
+  LayoutDashboard,
 } from 'lucide-react';
 import type { BlogAnalysisResult } from '@/lib/blog-analyzer';
 import type { B2BAnalysisResult } from '@/lib/b2b-analyzer';
-import { PageHeader, Surface, SectionTitle, SegmentedControl } from '@/components/ui';
 import {
   ASSET_KIND_LABELS,
-  BRANDBOOK_SECTIONS,
   emptyBrandbook,
   linesToList,
   listToLines,
   newId,
   normalizeHex,
-  primaryLogo,
   type BrandAssetKind,
   type Brandbook,
   type BrandbookSectionId,
@@ -43,6 +51,29 @@ import {
 import GoogleFontsGallery from '@/components/GoogleFontsGallery';
 import BrandOverview from '@/components/BrandOverview';
 
+type NavId = BrandbookSectionId | 'overview';
+
+const NAV_SECTIONS: {
+  id: NavId;
+  label: string;
+  subtitle: string;
+  icon: React.ComponentType<{ className?: string }>;
+}[] = [
+  { id: 'overview', label: '0. Brand Overview', subtitle: 'Resumen visual del kit', icon: LayoutDashboard },
+  { id: 'identidad', label: '1. Identidad', subtitle: 'Pitch, promesa, posicionamiento', icon: Building2 },
+  { id: 'voz', label: '2. Voz y tono', subtitle: 'Personalidad, do/don’t, ejemplos', icon: MessageSquareText },
+  { id: 'visual', label: '3. Visual', subtitle: 'Logo, colores, tipografías, kit', icon: Palette },
+  { id: 'audiencia', label: '4. Audiencia', subtitle: 'ICP, personas B2B/B2C', icon: Users },
+  { id: 'oferta', label: '5. Oferta', subtitle: 'VP, productos, prueba social', icon: Package },
+  { id: 'pilares', label: '6. Pilares de contenido', subtitle: 'Series, matriz, tabúes', icon: Layers },
+  { id: 'canales', label: '7. Canales', subtitle: 'Handles, roles, cadencia', icon: Share2 },
+  { id: 'ads', label: '8. Anuncios', subtitle: 'USPs, hooks, CTAs, ángulos', icon: Megaphone },
+  { id: 'b2b', label: '9. LinkedIn B2B', subtitle: 'Temas, formatos, ABM', icon: Linkedin },
+  { id: 'blog', label: '10. Blog corporativo', subtitle: 'SEO, clusters, CTAs', icon: FileText },
+  { id: 'compliance', label: '11. Compliance', subtitle: 'Claims, disclaimers, límites', icon: ShieldCheck },
+  { id: 'fuentes', label: '12. Fuentes', subtitle: 'Docs, excerpts, notas', icon: BookOpen },
+];
+
 function Field({
   label,
   hint,
@@ -55,20 +86,18 @@ function Field({
   className?: string;
 }) {
   return (
-    <label className={`block space-y-1 ${className}`}>
-      <span className="text-xs font-semibold text-gray-800">{label}</span>
+    <div className={`block ${className}`}>
+      <label className="block text-xs font-bold text-gray-700 mb-1">{label}</label>
       {hint ? (
-        <span className="block text-[11px] text-gray-500 leading-snug">
-          {hint}
-        </span>
+        <p className="text-[11px] text-gray-500 leading-snug mb-1.5">{hint}</p>
       ) : null}
       {children}
-    </label>
+    </div>
   );
 }
 
 const inputCls =
-  'w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-200';
+  'w-full rounded-xl border border-gray-300 bg-white px-3 py-2 text-xs text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-200';
 const areaCls = `${inputCls} min-h-[88px] resize-y`;
 const selectCls = inputCls;
 
@@ -113,13 +142,13 @@ export default function BrandZone({
   tenantLabel: string;
   tenantSlug?: string;
 }) {
-  const [viewMode, setViewMode] = useState<'overview' | 'edit'>('overview');
-  const [section, setSection] = useState<BrandbookSectionId>('identidad');
+  const [section, setSection] = useState<NavId>('overview');
   const [book, setBook] = useState<Brandbook>(() => emptyBrandbook(tenantLabel));
   const [slug, setSlug] = useState('');
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [seeding, setSeeding] = useState(false);
+  const [enriching, setEnriching] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [kitUploading, setKitUploading] = useState(false);
   const [err, setErr] = useState<string | null>(null);
@@ -488,256 +517,170 @@ export default function BrandZone({
     });
   }
 
-  const logo = primaryLogo(book);
-  const secMeta = BRANDBOOK_SECTIONS.find((s) => s.id === section);
+  async function enrichFromSources() {
+    setEnriching(true);
+    setErr(null);
+    setOkMsg(null);
+    try {
+      const r = await fetch('/api/brandbook/enrich', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(tenantId ? { tenant_id: tenantId } : {}),
+      });
+      const j = await r.json();
+      if (!r.ok) throw new Error(j.error || 'No se pudo auto-rellenar');
+      await load();
+      const res = j.result;
+      setOkMsg(
+        res
+          ? `Auto-relleno: ${res.completenessBefore}%→${res.completenessAfter}% · fuentes: ${(res.sources || []).join(', ')}`
+          : 'Marca actualizada desde fuentes conectadas'
+      );
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : 'Error al auto-rellenar');
+    } finally {
+      setEnriching(false);
+    }
+  }
+
+  const secMeta = NAV_SECTIONS.find((s) => s.id === section);
 
   if (loading) {
     return (
-      <div className="flex items-center gap-2 text-sm text-gray-500 py-12">
-        <Loader2 className="w-4 h-4 animate-spin" />
-        Cargando zona de marca…
+      <div className="flex items-center justify-center rounded-2xl border border-gray-200 bg-white p-12 text-sm text-gray-500">
+        <Loader2 className="mr-2 h-4 w-4 animate-spin text-brand-600" />
+        Cargando zona de marca de {tenantLabel}…
       </div>
     );
   }
 
   return (
     <div className="space-y-6">
-      <PageHeader
-        eyebrow="Marca"
-        title="Zona de marca"
-        description={`${tenantLabel}${slug ? ` · ${slug}` : ''} · Brand Overview + kit editable para ads, calendarios, LinkedIn y blog.`}
-        actions={
-          <div className="flex flex-wrap gap-2">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between rounded-2xl border border-brand-200 bg-brand-50/50 p-4">
+        <div className="flex items-start gap-3 min-w-0">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-600 text-white shadow-xs">
+            <Building2 className="h-5 w-5" />
+          </div>
+          <div className="min-w-0">
+            <h2 className="text-base font-bold text-gray-900 truncate">
+              Zona de marca · {book.brand_name || tenantLabel}
+            </h2>
+            <p className="text-xs text-gray-600 mt-0.5">
+              ADN, voz, visual, audiencias y copy de ads/RRSS · mismo layout que Estilo y Brief
+              {slug ? <span className="text-gray-400"> · {slug}</span> : null}
+            </p>
+            <div className="mt-2 flex flex-wrap items-center gap-2">
+              <span className="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-800">
+                Completitud {score}%
+              </span>
+              {missing.length ? (
+                <span className="text-[11px] text-amber-700">
+                  Falta: {missing.slice(0, 2).join(' · ')}
+                </span>
+              ) : (
+                <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-emerald-700">
+                  <CheckCircle2 className="w-3.5 h-3.5" /> Kit sólido
+                </span>
+              )}
+              {book.colors.slice(0, 5).map((c) => (
+                <span
+                  key={c.id}
+                  title={`${c.name} ${c.hex}`}
+                  className="h-4 w-4 rounded-full border border-black/10"
+                  style={{ background: c.hex }}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-wrap items-center gap-2 shrink-0">
+          {okMsg ? (
+            <span className="inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-700 bg-emerald-50 border border-emerald-200 px-3 py-1.5 rounded-xl">
+              <CheckCircle2 className="w-4 h-4" />
+              {okMsg}
+            </span>
+          ) : null}
+          <button
+            type="button"
+            onClick={() => void enrichFromSources()}
+            disabled={enriching}
+            className="inline-flex items-center gap-1.5 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2.5 text-xs font-bold text-emerald-900 hover:bg-emerald-100 disabled:opacity-50"
+          >
+            {enriching ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Sparkles className="w-3.5 h-3.5" />}
+            Auto-rellenar
+          </button>
           <button
             type="button"
             onClick={() => void seed()}
             disabled={seeding}
-              className="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-800 hover:bg-gray-50 disabled:opacity-50"
+            className="inline-flex items-center gap-1.5 rounded-xl border border-gray-200 bg-white px-3 py-2.5 text-xs font-bold text-gray-800 hover:bg-gray-50 disabled:opacity-50"
           >
-              {seeding ? (
-                <Loader2 className="w-3.5 h-3.5 animate-spin" />
-              ) : (
-                <Sparkles className="w-3.5 h-3.5 text-amber-500" />
-              )}
-              {exists ? 'Resembrar base experta' : 'Crear base experta'}
+            {seeding ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Sparkles className="w-3.5 h-3.5 text-amber-500" />}
+            {exists ? 'Resembrar' : 'Base experta'}
           </button>
           <button
             type="button"
             onClick={() => void save()}
             disabled={saving}
-              className="inline-flex items-center gap-1.5 rounded-lg bg-brand-600 px-3 py-2 text-xs font-semibold text-white hover:bg-brand-700 disabled:opacity-50"
+            className="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2.5 text-xs font-bold text-white shadow-sm hover:bg-brand-700 disabled:opacity-50"
           >
-              {saving ? (
-                <Loader2 className="w-3.5 h-3.5 animate-spin" />
-              ) : (
-                <Save className="w-3.5 h-3.5" />
-              )}
-              Guardar brand kit
+            {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+            {saving ? 'Guardando…' : 'Guardar brand kit'}
           </button>
         </div>
-        }
-      />
-
-      <SegmentedControl
-        value={viewMode}
-        onChange={setViewMode}
-        options={[
-          { id: 'overview', label: 'Brand Overview' },
-          { id: 'edit', label: 'Detalles del kit' },
-        ]}
-      />
+      </div>
 
       {err ? (
-        <p className="text-sm text-red-600 bg-red-50 border border-red-100 rounded-lg px-3 py-2">
+        <div className="rounded-xl border border-red-200 bg-red-50 p-3.5 text-xs font-medium text-red-700">
           {err}
-        </p>
-      ) : null}
-      {okMsg ? (
-        <p className="text-sm text-emerald-700 bg-emerald-50 border border-emerald-100 rounded-lg px-3 py-2">
-          {okMsg}
-        </p>
+        </div>
       ) : null}
 
-      {viewMode === 'overview' ? (
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
+        <div className="lg:col-span-3 space-y-1.5 rounded-2xl border border-gray-200 bg-white p-2.5 shadow-xs max-h-[70vh] overflow-y-auto">
+          {NAV_SECTIONS.map((sec) => {
+            const Icon = sec.icon;
+            const active = section === sec.id;
+            return (
+              <button
+                key={sec.id}
+                type="button"
+                onClick={() => setSection(sec.id)}
+                className={`w-full flex items-start gap-2.5 rounded-xl px-3 py-2.5 text-left transition-all ${
+                  active ? 'bg-brand-600 text-white shadow-xs' : 'text-gray-700 hover:bg-gray-50'
+                }`}
+              >
+                <Icon className={`w-4 h-4 mt-0.5 shrink-0 ${active ? 'text-white' : 'text-brand-600'}`} />
+                <div className="min-w-0">
+                  <div className="text-xs font-bold leading-tight">{sec.label}</div>
+                  <div className={`text-[10px] mt-0.5 leading-snug line-clamp-1 ${active ? 'text-brand-100' : 'text-gray-400'}`}>
+                    {sec.subtitle}
+                  </div>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="lg:col-span-9 rounded-2xl border border-gray-200 bg-white p-6 shadow-xs space-y-6">
+          {section !== 'overview' ? (
+            <div>
+              <h3 className="text-base font-bold text-gray-900">{secMeta?.label}</h3>
+              <p className="text-xs text-gray-500 mt-0.5">{secMeta?.subtitle}</p>
+            </div>
+          ) : null}
+
+          {section === 'overview' && (
             <BrandOverview
               book={book}
               tenantLabel={tenantLabel}
               score={score}
               missing={missing}
-          onContinueEdit={() => setViewMode('edit')}
-          onEditSection={(id) => {
-            setSection(id);
-            setViewMode('edit');
-          }}
+              embedded
+              onContinueEdit={() => setSection('identidad')}
+              onEditSection={(id) => setSection(id)}
             />
-      ) : null}
-
-      {viewMode === 'edit' ? (
-        <>
-      {/* Identity strip */}
-      <Surface className="!p-4">
-        <div className="flex flex-col sm:flex-row gap-4 items-start">
-          <div className="w-28 shrink-0">
-            {logo ? (
-              <KitThumb assetFileId={logo.asset_file_id} alt={logo.label} />
-            ) : (
-              <div className="h-20 rounded-lg border border-dashed border-gray-300 bg-gray-50 flex flex-col items-center justify-center text-[10px] text-gray-500 gap-1">
-                <ImageIcon className="w-4 h-4" />
-                Sin logo
-              </div>
           )}
-          </div>
-          <div className="flex-1 min-w-0 space-y-2">
-            <p className="text-lg font-semibold text-gray-900 truncate">
-              {book.brand_name || tenantLabel}
-            </p>
-            <p className="text-sm text-gray-600">
-              {book.tagline || book.elevator_pitch || 'Sin tagline todavía'}
-            </p>
-            <div className="flex flex-wrap gap-1.5">
-              {book.colors.slice(0, 8).map((c) => (
-                <span
-                  key={c.id}
-                  title={`${c.name} ${c.hex}`}
-                  className="inline-flex items-center gap-1 rounded-full border border-gray-200 px-2 py-0.5 text-[10px] text-gray-700"
-                >
-                  <span
-                    className="w-3 h-3 rounded-full border border-black/10"
-                    style={{ background: c.hex }}
-                  />
-                  {c.hex}
-                </span>
-              ))}
-              {book.fonts_kit.slice(0, 3).map((f) => (
-                <span
-                  key={f.id}
-                  className="inline-flex items-center gap-1 rounded-full border border-gray-200 px-2 py-0.5 text-[10px] text-gray-700"
-                >
-                  <Type className="w-3 h-3" />
-                  {f.family}
-                </span>
-              ))}
-            </div>
-          </div>
-          <div className="sm:w-40 shrink-0">
-            <p className="text-[10px] font-semibold uppercase tracking-wider text-gray-500">
-              Completitud
-            </p>
-            <p className="text-2xl font-semibold text-gray-900 mt-0.5">{score}%</p>
-            <div className="mt-2 h-1.5 rounded-full bg-gray-100 overflow-hidden">
-              <div
-                className="h-full bg-brand-500 transition-all"
-                style={{ width: `${score}%` }}
-              />
-            </div>
-            {missing.length ? (
-              <p className="text-[10px] text-amber-700 mt-2 leading-snug">
-                Falta: {missing.slice(0, 3).join(' · ')}
-              </p>
-            ) : (
-              <p className="text-[10px] text-emerald-700 mt-2 inline-flex items-center gap-1">
-                <CheckCircle2 className="w-3 h-3" /> Kit sólido
-              </p>
-            )}
-          </div>
-        </div>
-      </Surface>
-
-      {/* Quick upload bar */}
-      <Surface className="!p-3">
-        <div className="flex flex-col md:flex-row md:items-end gap-3">
-          <div className="flex items-center gap-2 text-xs font-semibold text-gray-800 shrink-0">
-            <Upload className="w-4 h-4 text-rose-500" />
-            Añadir al kit
-          </div>
-          <Field label="Tipo" className="md:w-36">
-            <select
-              className={selectCls}
-              value={kitKind}
-              onChange={(e) => {
-                const k = e.target.value as BrandAssetKind;
-                setKitKind(k);
-                setKitRole(
-                  k === 'logo'
-                    ? 'primary'
-                    : k === 'font'
-                      ? 'body'
-                      : k === 'image'
-                        ? 'moodboard'
-                        : 'asset'
-                );
-              }}
-            >
-              {Object.entries(ASSET_KIND_LABELS).map(([k, v]) => (
-                <option key={k} value={k}>
-                  {v}
-                </option>
-              ))}
-            </select>
-          </Field>
-          <Field label="Rol" className="md:w-40" hint="ej. primary, dark, display">
-            <input
-              className={inputCls}
-              value={kitRole}
-              onChange={(e) => setKitRole(e.target.value)}
-            />
-          </Field>
-          <label className="inline-flex items-center justify-center gap-1.5 rounded-lg bg-gray-900 px-4 py-2.5 text-xs font-semibold text-white cursor-pointer hover:bg-gray-800 disabled:opacity-50">
-            {kitUploading ? (
-              <Loader2 className="w-3.5 h-3.5 animate-spin" />
-            ) : (
-              <Plus className="w-3.5 h-3.5" />
-            )}
-            Subir archivo
-            <input
-              type="file"
-              className="hidden"
-              accept={
-                kitKind === 'logo' || kitKind === 'image' || kitKind === 'icon'
-                  ? 'image/*,.svg,.pdf'
-                  : kitKind === 'font'
-                    ? '.ttf,.otf,.woff,.woff2,.zip'
-                    : kitKind === 'video'
-                      ? 'video/*'
-                      : '*/*'
-              }
-              disabled={kitUploading}
-              onChange={(e) => {
-                const f = e.target.files?.[0];
-                if (f) void uploadKit(f);
-                e.target.value = '';
-              }}
-            />
-          </label>
-          <p className="text-[11px] text-gray-500 md:ml-auto max-w-xs">
-            Logos, tipografías, patrones, iconos, PDFs de brandbook, moodboards…
-          </p>
-        </div>
-      </Surface>
-
-      <div className="flex flex-col lg:flex-row gap-4">
-        <nav className="lg:w-56 shrink-0 flex lg:flex-col gap-1 overflow-x-auto pb-1">
-          {BRANDBOOK_SECTIONS.map((s) => (
-            <button
-              key={s.id}
-              type="button"
-              onClick={() => setSection(s.id)}
-              className={`text-left rounded-lg px-3 py-2 text-xs font-medium whitespace-nowrap transition-colors ${
-                section === s.id
-                  ? 'bg-brand-50 text-gray-900 border border-brand-200'
-                  : 'text-gray-600 border border-transparent hover:bg-gray-50'
-              }`}
-            >
-              {s.label}
-            </button>
-          ))}
-        </nav>
-
-        <Surface className="flex-1 min-w-0 space-y-4">
-          <SectionTitle
-            title={secMeta?.label || ''}
-            description={secMeta?.expert || secMeta?.hint}
-          />
 
           {section === 'identidad' && (
             <div className="grid gap-3 sm:grid-cols-2">
@@ -3003,10 +2946,8 @@ export default function BrandZone({
               )}
             </div>
           )}
-        </Surface>
         </div>
-        </>
-      ) : null}
+      </div>
     </div>
   );
 }

src/lib/brandbook.ts

@@ -1998,12 +1998,12 @@ export function brandbookToPrompt(book: Brandbook): string {
     book.icp && `ICP: ${book.icp}`,
     book.ads_usps.length && `USPs ads: ${book.ads_usps.join('; ')}`,
     book.ads_ctas.length && `CTAs: ${book.ads_ctas.join('; ')}`,
-    book.winning_hooks.length &&
-      `Hooks ads/RRSS observados: ${book.winning_hooks.slice(0, 10).join(' | ')}`,
+    (book.winning_hooks?.length || 0) > 0 &&
+      `Hooks ads/RRSS observados: ${(book.winning_hooks || []).slice(0, 10).join(' | ')}`,
     book.example_good.length &&
       `Ejemplos copy real (ads/IG/FB/LI): ${book.example_good.slice(0, 6).join(' | ')}`,
-    book.preferred_angles.length &&
-      `Ángulos campaña: ${book.preferred_angles.slice(0, 8).join(' · ')}`,
+    (book.preferred_angles?.length || 0) > 0 &&
+      `Ángulos campaña: ${(book.preferred_angles || []).slice(0, 8).join(' · ')}`,
     book.linkedin_themes.length &&
       `LinkedIn: ${book.linkedin_themes.join(', ')}`,
     book.blog_themes.length && `Blog: ${book.blog_themes.join(', ')}`,