// ── CREACIÓN AV PUBLICITARIA con IA ─────────────────

function AVPublicitaria() {
  const { useState } = React;

  const [formato,    setFormato]   = useState('instagram_post');
  const [concepto,   setConcepto]  = useState('');
  const [estilo,     setEstilo]    = useState('elegante');
  const [loading,    setLoading]   = useState(false);
  const [resultado,  setResultado] = useState(null);
  const [error,      setError]     = useState('');
  const [activeTab,  setActiveTab] = useState('prompt');
  const [historial,  setHistorial] = useState(() => lsGet('av_hist', []));
  const [viendoHist, setViendoHist]= useState(null);
  const [copiado,    setCopiado]   = useState('');

  const FORMATOS = [
    { id:'instagram_post',  label:'Instagram Post',   dims:'1080×1080px', icon:'📸', ratio:'1:1', grupo:'Redes' },
    { id:'instagram_story', label:'Instagram Story',  dims:'1080×1920px', icon:'📱', ratio:'9:16', grupo:'Redes' },
    { id:'facebook_banner', label:'Facebook Banner',  dims:'1200×628px',  icon:'🖥', ratio:'16:9', grupo:'Redes' },
    { id:'whatsapp_estado', label:'WhatsApp Estado',  dims:'1080×1920px', icon:'💬', ratio:'9:16', grupo:'Redes' },
    { id:'tv_local',        label:'TV en Local',      dims:'1920×1080px', icon:'📺', ratio:'16:9', grupo:'Local' },
    { id:'vitrina_banner',  label:'Banner Vitrina',   dims:'600×900px',   icon:'🪟', ratio:'2:3',  grupo:'Local' },
    { id:'tarjeta_regalo',  label:'Tarjeta Regalo',   dims:'85×55mm',     icon:'🎁', ratio:'CR80', grupo:'Papelería' },
    { id:'tarjeta_negocio', label:'Tarjeta Negocio',  dims:'90×50mm',     icon:'💼', ratio:'CR80', grupo:'Papelería' },
    { id:'flyer_a5',        label:'Flyer A5',         dims:'148×210mm',   icon:'📄', ratio:'A5',   grupo:'Impresión' },
    { id:'afiche_a4',       label:'Afiche A4',        dims:'210×297mm',   icon:'🗒', ratio:'A4',   grupo:'Impresión' },
    { id:'voucher_regalo',  label:'Voucher Regalo',   dims:'200×100mm',   icon:'🎫', ratio:'2:1',  grupo:'Papelería' },
    { id:'envelope_sobre',  label:'Sobre/Packaging',  dims:'Personalizado',icon:'📦',ratio:'—',   grupo:'Papelería' },
  ];

  const ESTILOS = [
    { id:'elegante',   label:'✦ Elegante',  desc:'Negro/dorado, minimalista premium' },
    { id:'moderno',    label:'◈ Moderno',   desc:'Limpio, tipografía grande, blanco' },
    { id:'romantico',  label:'♡ Romántico', desc:'Colores suaves, floral, delicado' },
    { id:'vibrante',   label:'⬛ Vibrante',  desc:'Contrastes fuertes, colores vivos' },
    { id:'artesanal',  label:'✒ Artesanal', desc:'Texturas, tierra, calidez orgánica' },
    { id:'lujo',       label:'◆ Lujo',      desc:'Oscuro, metálico, exclusivo' },
  ];

  const formatoInfo = FORMATOS.find(f => f.id === formato) || FORMATOS[0];
  const estiloInfo  = ESTILOS.find(e => e.id === estilo)  || ESTILOS[0];

  async function generarContenido() {
    if (!concepto.trim()) return;
    setLoading(true); setError(''); setResultado(null);
    try {
      const prompt = `Eres un director creativo experto en publicidad de joyería de lujo chilena.
Crea el contenido completo para una pieza publicitaria de Navarro Joyería Fina (Santa Cruz, Colchagua).

FORMATO: ${formatoInfo.label} (${formatoInfo.dims})
ESTILO: ${estiloInfo.label} — ${estiloInfo.desc}
CONCEPTO/PRODUCTO: ${concepto}

Responde SOLO con este JSON:
{
  "titulo_creativo": "Titular principal de la pieza (máx 6 palabras, impactante)",
  "subtitulo": "Subtítulo complementario (máx 10 palabras)",
  "cuerpo_texto": "Texto del cuerpo si aplica (máx 25 palabras)",
  "llamado_accion": "CTA específico para este formato",
  "paleta_colores": {
    "primario": "#hexcolor (color dominante)",
    "secundario": "#hexcolor",
    "acento": "#hexcolor",
    "texto": "#hexcolor",
    "fondo": "#hexcolor"
  },
  "descripcion_visual": "Descripción detallada de cómo debe verse la imagen (para el diseñador o generador de imágenes IA). 3-4 oraciones muy específicas.",
  "prompt_ia_imagen": "Prompt en inglés para Midjourney/DALL-E/Stable Diffusion. Ultra detallado, estilo fotográfico, lighting, composición. 60-80 palabras.",
  "prompt_ia_video": "Prompt para Sora/Runway para versión video (si aplica). 40-50 palabras.",
  "tipografia_sugerida": { "titulo": "Nombre fuente título", "cuerpo": "Nombre fuente cuerpo" },
  "elementos_graficos": ["Elemento 1 (ej: marco dorado fino)", "Elemento 2", "Elemento 3"],
  "hashtags": ["#hashtag1", "#hashtag2", "#hashtag3", "#hashtag4", "#hashtag5"],
  "pie_pagina": "Texto pie de página: dirección, web, teléfono, etc."
}`;
      const resp = await window.claude.complete(prompt);
      const match = resp.match(/\{[\s\S]*\}/);
      if (match) {
        const data = JSON.parse(match[0]);
        setResultado(data);
        const entrada = { id:Date.now(), fecha:hoy(), formato, estilo, concepto, ...data };
        const nuevo = [entrada, ...historial].slice(0, 20);
        setHistorial(nuevo); lsSet('av_hist', nuevo);
      } else { setError('Error al parsear respuesta.'); }
    } catch(e) { setError('Error al generar. Intenta de nuevo.'); }
    setLoading(false);
  }

  function copiar(txt, key) {
    navigator.clipboard.writeText(txt).catch(() => {});
    setCopiado(key); setTimeout(() => setCopiado(''), 2000);
  }

  const act = viendoHist || resultado;

  // Agrupar formatos
  const grupos = [...new Set(FORMATOS.map(f => f.grupo))];

  return (
    <div style={{ display:'flex', height:'100%', overflow:'hidden' }}>

      {/* ── Col izquierda ── */}
      <div style={avStyles.leftCol}>
        <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'19px', fontWeight:600, color:'var(--cream)', marginBottom:'4px' }}>
          AV Publicitaria
        </div>
        <div style={{ color:'var(--cream-3)', fontSize:'11px', marginBottom:'16px' }}>
          IA genera prompts, paleta, copy y guías visuales para cada formato
        </div>

        {/* Concepto */}
        <div style={{ marginBottom:'14px' }}>
          <div style={avStyles.label}>Concepto / Producto / Campaña</div>
          <textarea
            rows={3} value={concepto} onChange={e => setConcepto(e.target.value)}
            placeholder="Ej: Argollas de matrimonio oro 18K, campaña San Valentín, oferta 15% off..."
            style={{ ...calcStyles2.input, resize:'vertical', lineHeight:'1.5' }}
          />
        </div>

        {/* Estilo */}
        <div style={{ marginBottom:'14px' }}>
          <div style={avStyles.label}>Estilo Visual</div>
          <div style={{ display:'flex', flexDirection:'column', gap:'4px' }}>
            {ESTILOS.map(e => (
              <button key={e.id} onClick={() => setEstilo(e.id)}
                style={{ ...avStyles.estiloBtn, ...(estilo===e.id ? avStyles.estiloBtnAct : {}) }}>
                <span style={{ fontSize:'12px', fontWeight:600, color:'var(--cream)' }}>{e.label}</span>
                <span style={{ fontSize:'10px', color:'var(--cream-3)' }}>{e.desc}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Formato */}
        <div style={{ marginBottom:'14px' }}>
          <div style={avStyles.label}>Formato</div>
          {grupos.map(g => (
            <div key={g} style={{ marginBottom:'6px' }}>
              <div style={{ fontSize:'9px', color:'var(--cream-3)', fontWeight:600, letterSpacing:'0.5px', marginBottom:'3px' }}>{g.toUpperCase()}</div>
              <div style={{ display:'flex', flexWrap:'wrap', gap:'3px' }}>
                {FORMATOS.filter(f => f.grupo===g).map(f => (
                  <button key={f.id} onClick={() => setFormato(f.id)}
                    style={{ ...calcStyles2.chip, fontSize:'10px', padding:'4px 8px', ...(formato===f.id ? calcStyles2.chipAct : {}) }}>
                    {f.icon} {f.label}
                  </button>
                ))}
              </div>
            </div>
          ))}
          <div style={{ marginTop:'6px', padding:'6px 10px', background:'var(--surface)', borderRadius:'6px', fontSize:'10px', color:'var(--cream-2)' }}>
            📐 {formatoInfo.dims} · Ratio {formatoInfo.ratio}
          </div>
        </div>

        <button onClick={generarContenido} disabled={loading || !concepto.trim()}
          style={{ ...posStyles.cobrarBtn, width:'100%', opacity: (!concepto.trim()||loading)?0.5:1 }}>
          {loading ? '⏳ Creando contenido…' : '✦ Generar con IA'}
        </button>

        {error && <div style={{ marginTop:'8px', color:'#e74c3c', fontSize:'11px', textAlign:'center' }}>{error}</div>}

        {/* Historial */}
        {historial.length > 0 && (
          <div style={{ marginTop:'16px' }}>
            <div style={avStyles.label}>Recientes</div>
            {historial.slice(0,6).map(h => (
              <div key={h.id} onClick={() => { setViendoHist(h); setResultado(null); }}
                style={{ ...avStyles.histRow, cursor:'pointer' }}>
                <div style={{ color:'var(--cream)', fontSize:'10px', fontWeight:600, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{h.titulo_creativo}</div>
                <div style={{ color:'var(--cream-3)', fontSize:'9px' }}>{h.fecha} · {FORMATOS.find(f=>f.id===h.formato)?.label}</div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* ── Col derecha: resultado ── */}
      <div style={{ flex:1, overflow:'hidden', display:'flex', flexDirection:'column' }}>
        {!act && !loading && (
          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', height:'100%', color:'var(--cream-3)', gap:'12px' }}>
            <div style={{ fontSize:'44px', opacity:0.25 }}>🎨</div>
            <div style={{ fontSize:'13px', textAlign:'center', maxWidth:'300px', lineHeight:'1.7' }}>
              Describe tu campaña, elige formato y estilo.<br/>
              <span style={{ fontSize:'11px' }}>La IA generará prompts para Midjourney/DALL-E, paleta de colores, tipografía y copy listo para usar.</span>
            </div>
          </div>
        )}
        {loading && (
          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', height:'100%', gap:'16px' }}>
            <div style={{ fontSize:'36px', animation:'pulse 1.5s infinite' }}>✦</div>
            <div style={{ color:'var(--cream)', fontSize:'13px' }}>Creando contenido publicitario…</div>
            <div style={{ color:'var(--cream-3)', fontSize:'11px', textAlign:'center' }}>
              Generando prompts de imagen, paleta de color,<br/>tipografía y copy para {formatoInfo.label}
            </div>
          </div>
        )}

        {act && !loading && (
          <div style={{ overflowY:'auto', height:'100%', padding:'18px' }} className="fade-in">

            {/* Preview simulado del formato */}
            <div style={{ display:'flex', gap:'14px', marginBottom:'14px' }}>
              <AVPreview data={act} formato={formatoInfo} />
              <div style={{ flex:1, display:'flex', flexDirection:'column', gap:'8px' }}>
                <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'22px', fontWeight:600, color:'var(--cream)' }}>
                  {act.titulo_creativo}
                </div>
                <div style={{ color:'var(--cream-2)', fontSize:'13px' }}>{act.subtitulo}</div>
                {act.cuerpo_texto && <div style={{ color:'var(--cream-3)', fontSize:'11px', lineHeight:'1.7' }}>{act.cuerpo_texto}</div>}
                <div style={{ padding:'6px 12px', background:'var(--gold-dim)', border:'1px solid var(--gold)', borderRadius:'6px', fontSize:'12px', color:'var(--gold)', fontWeight:600, display:'inline-block' }}>
                  {act.llamado_accion}
                </div>
              </div>
            </div>

            {/* Tabs */}
            <div style={{ display:'flex', gap:'4px', marginBottom:'14px', borderBottom:'1px solid var(--border)', paddingBottom:'0' }}>
              {[
                { id:'prompt', label:'🖼 Prompt Imagen' },
                { id:'video',  label:'🎬 Prompt Video' },
                { id:'paleta', label:'🎨 Paleta' },
                { id:'copy',   label:'✍ Copy' },
                { id:'guia',   label:'📐 Guía visual' },
              ].map(t => (
                <button key={t.id} onClick={() => setActiveTab(t.id)}
                  style={{ padding:'7px 12px', background:'none', border:'none', borderBottom: activeTab===t.id?'2px solid var(--gold)':'2px solid transparent', color: activeTab===t.id?'var(--cream)':'var(--cream-3)', cursor:'pointer', fontSize:'11px', fontFamily:'Inter,sans-serif', marginBottom:'-1px' }}>
                  {t.label}
                </button>
              ))}
            </div>

            {activeTab==='prompt' && (
              <div className="fade-in">
                <div style={avStyles.card}>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'10px' }}>
                    <div style={avStyles.cardTitle}>Prompt para IA Generadora de Imágenes</div>
                    <button onClick={() => copiar(act.prompt_ia_imagen, 'prompt')} style={{ ...invStyles.btnEdit, fontSize:'10px' }}>
                      {copiado==='prompt' ? '✓ Copiado' : '⧉ Copiar'}
                    </button>
                  </div>
                  <div style={{ background:'var(--surface)', borderRadius:'8px', padding:'14px', fontSize:'12px', color:'var(--cream-2)', lineHeight:'1.8', fontFamily:'monospace' }}>
                    {act.prompt_ia_imagen}
                  </div>
                  <div style={{ marginTop:'10px', display:'flex', gap:'6px', flexWrap:'wrap' }}>
                    {['Midjourney', 'DALL-E 3', 'Stable Diffusion', 'Adobe Firefly', 'Ideogram'].map(tool => (
                      <span key={tool} style={{ padding:'3px 8px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'20px', fontSize:'10px', color:'var(--cream-3)' }}>{tool}</span>
                    ))}
                  </div>
                </div>
                <div style={{ ...avStyles.card, marginTop:'10px' }}>
                  <div style={avStyles.cardTitle}>Descripción Visual (para diseñador)</div>
                  <div style={{ fontSize:'11px', color:'var(--cream-2)', lineHeight:'1.8' }}>{act.descripcion_visual}</div>
                </div>
              </div>
            )}

            {activeTab==='video' && (
              <div className="fade-in">
                <div style={avStyles.card}>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'10px' }}>
                    <div style={avStyles.cardTitle}>Prompt para Video IA (Sora / Runway / Kling)</div>
                    <button onClick={() => copiar(act.prompt_ia_video||'', 'video')} style={{ ...invStyles.btnEdit, fontSize:'10px' }}>
                      {copiado==='video' ? '✓' : '⧉ Copiar'}
                    </button>
                  </div>
                  <div style={{ background:'var(--surface)', borderRadius:'8px', padding:'14px', fontSize:'12px', color:'var(--cream-2)', lineHeight:'1.8', fontFamily:'monospace' }}>
                    {act.prompt_ia_video || '(No aplica para este formato)'}
                  </div>
                </div>
              </div>
            )}

            {activeTab==='paleta' && (
              <div className="fade-in" style={avStyles.card}>
                <div style={avStyles.cardTitle}>Paleta de Colores</div>
                <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:'8px', marginBottom:'12px' }}>
                  {act.paleta_colores && Object.entries(act.paleta_colores).map(([k,v]) => (
                    <div key={k} onClick={() => copiar(v, 'color_'+k)}
                      style={{ cursor:'pointer', textAlign:'center' }}>
                      <div style={{ width:'100%', paddingTop:'100%', borderRadius:'8px', background: typeof v==='string' && v.startsWith('#') ? v : '#888', border:'1px solid var(--border)', marginBottom:'5px', position:'relative' }}>
                        {copiado==='color_'+k && <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontWeight:700, fontSize:'16px' }}>✓</div>}
                      </div>
                      <div style={{ fontSize:'9px', color:'var(--cream-3)', textTransform:'capitalize' }}>{k}</div>
                      <div style={{ fontSize:'9px', color:'var(--cream)', fontFamily:'monospace' }}>{typeof v==='string'?v:''}</div>
                    </div>
                  ))}
                </div>
                <div style={avStyles.cardTitle}>Tipografía Sugerida</div>
                {act.tipografia_sugerida && Object.entries(act.tipografia_sugerida).map(([k,v]) => (
                  <div key={k} style={{ display:'flex', justifyContent:'space-between', padding:'5px 0', borderBottom:'1px solid var(--border)', fontSize:'12px' }}>
                    <span style={{ color:'var(--cream-3)', textTransform:'capitalize' }}>{k}</span>
                    <span style={{ color:'var(--cream)', fontWeight:600 }}>{v}</span>
                  </div>
                ))}
              </div>
            )}

            {activeTab==='copy' && (
              <div className="fade-in" style={{ display:'flex', flexDirection:'column', gap:'10px' }}>
                <div style={avStyles.card}>
                  <div style={avStyles.cardTitle}>Elementos de Copy</div>
                  {[
                    { l:'Título', v:act.titulo_creativo },
                    { l:'Subtítulo', v:act.subtitulo },
                    { l:'Cuerpo', v:act.cuerpo_texto },
                    { l:'CTA', v:act.llamado_accion },
                    { l:'Pie de página', v:act.pie_pagina },
                  ].filter(r => r.v).map(r => (
                    <div key={r.l} style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', padding:'7px 0', borderBottom:'1px solid var(--border)', gap:'8px' }}>
                      <span style={{ color:'var(--cream-3)', fontSize:'10px', minWidth:'70px', paddingTop:'1px' }}>{r.l}</span>
                      <span style={{ color:'var(--cream)', fontSize:'11px', flex:1, lineHeight:'1.5' }}>{r.v}</span>
                      <button onClick={() => copiar(r.v, 'copy_'+r.l)} style={{ background:'none', border:'none', color: copiado==='copy_'+r.l?'var(--gold)':'var(--cream-3)', cursor:'pointer', fontSize:'11px', flexShrink:0 }}>⧉</button>
                    </div>
                  ))}
                </div>
                {act.hashtags?.length > 0 && (
                  <div style={avStyles.card}>
                    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'8px' }}>
                      <div style={avStyles.cardTitle}>Hashtags</div>
                      <button onClick={() => copiar(act.hashtags.join(' '), 'hashtags')} style={{ ...invStyles.btnEdit, fontSize:'10px' }}>
                        {copiado==='hashtags' ? '✓' : '⧉ Copiar todos'}
                      </button>
                    </div>
                    <div style={{ display:'flex', flexWrap:'wrap', gap:'5px' }}>
                      {act.hashtags.map((h,i) => (
                        <span key={i} onClick={() => copiar(h, 'ht'+i)}
                          style={{ padding:'4px 10px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'20px', fontSize:'11px', color: copiado==='ht'+i?'var(--gold)':'var(--cream-2)', cursor:'pointer' }}>
                          {h}
                        </span>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            )}

            {activeTab==='guia' && (
              <div className="fade-in" style={avStyles.card}>
                <div style={avStyles.cardTitle}>Elementos Gráficos y Guía de Diseño</div>
                {(act.elementos_graficos||[]).map((el,i) => (
                  <div key={i} style={{ display:'flex', gap:'8px', padding:'7px 0', borderBottom:'1px solid var(--border)' }}>
                    <span style={{ color:'var(--gold)', fontSize:'12px', flexShrink:0 }}>#{i+1}</span>
                    <span style={{ color:'var(--cream-2)', fontSize:'11px', lineHeight:'1.5' }}>{el}</span>
                  </div>
                ))}
                <div style={{ marginTop:'14px', background:'var(--surface)', borderRadius:'8px', padding:'12px' }}>
                  <div style={{ fontSize:'10px', color:'var(--gold)', fontWeight:600, marginBottom:'6px' }}>📐 DIMENSIONES</div>
                  <div style={{ fontSize:'12px', color:'var(--cream)' }}>{formatoInfo.label}: <strong>{formatoInfo.dims}</strong></div>
                  <div style={{ fontSize:'11px', color:'var(--cream-3)', marginTop:'4px' }}>Ratio: {formatoInfo.ratio} · Grupo: {formatoInfo.grupo}</div>
                </div>
              </div>
            )}

            <div style={{ marginTop:'12px', display:'flex', gap:'8px' }}>
              <button onClick={() => { setResultado(null); setViendoHist(null); setConcepto(''); }}
                style={{ ...invStyles.btnEdit, flex:1, padding:'9px', textAlign:'center' }}>
                ← Nueva pieza
              </button>
              <button onClick={() => {
                const todo = `${act.titulo_creativo}\n${act.subtitulo}\n\n${act.cuerpo_texto||''}\n\n${act.llamado_accion}\n\n--- PROMPT IMAGEN ---\n${act.prompt_ia_imagen}\n\n--- PROMPT VIDEO ---\n${act.prompt_ia_video||''}\n\n--- HASHTAGS ---\n${(act.hashtags||[]).join(' ')}`;
                copiar(todo, 'all');
              }} style={{ ...posStyles.cobrarBtn, margin:0, flex:1, fontSize:'12px' }}>
                {copiado==='all' ? '✓ Copiado' : '⧉ Exportar todo'}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function AVPreview({ data, formato }) {
  const pal = data.paleta_colores || {};
  const w = formato.ratio==='1:1'?120 : formato.ratio==='9:16'?68 : formato.ratio==='16:9'?160 : 90;
  const h = formato.ratio==='1:1'?120 : formato.ratio==='9:16'?120 : formato.ratio==='16:9'?90  : 110;
  return (
    <div style={{
      width:`${w}px`, height:`${h}px`, flexShrink:0,
      borderRadius:'8px', overflow:'hidden', border:'1px solid var(--border)',
      background: (pal.fondo && pal.fondo.startsWith('#')) ? pal.fondo : 'var(--surface)',
      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
      padding:'8px', textAlign:'center', position:'relative',
    }}>
      <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'10px', fontWeight:600,
        color: (pal.texto && pal.texto.startsWith('#')) ? pal.texto : 'var(--cream)',
        lineHeight:'1.3', marginBottom:'4px', overflow:'hidden' }}>
        {data.titulo_creativo?.slice(0,30)}
      </div>
      <div style={{ width:'30px', height:'1px', background: (pal.acento && pal.acento.startsWith('#')) ? pal.acento : 'var(--gold)', marginBottom:'4px' }}/>
      <div style={{ fontSize:'7px', color: (pal.secundario && pal.secundario.startsWith('#')) ? pal.secundario : 'var(--cream-3)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', maxWidth:'100%' }}>
        {data.subtitulo?.slice(0,28)}
      </div>
      <div style={{ position:'absolute', bottom:'4px', right:'4px', fontSize:'7px', color: (pal.acento && pal.acento.startsWith('#')) ? pal.acento : 'var(--gold)', opacity:0.7 }}>✦</div>
    </div>
  );
}

const avStyles = {
  leftCol: { width:'290px', flexShrink:0, overflowY:'auto', padding:'16px', borderRight:'1px solid var(--border)', display:'flex', flexDirection:'column', gap:'2px' },
  label: { fontSize:'10px', color:'var(--cream-3)', fontWeight:600, letterSpacing:'0.5px', textTransform:'uppercase', marginBottom:'6px' },
  estiloBtn: { display:'flex', flexDirection:'column', padding:'7px 10px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'6px', cursor:'pointer', fontFamily:'Inter,sans-serif', textAlign:'left', transition:'all 0.1s' },
  estiloBtnAct: { border:'1px solid var(--gold)', background:'var(--gold-dim)' },
  histRow: { padding:'6px 8px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'5px', marginBottom:'3px' },
  card: { background:'var(--bg-card)', border:'1px solid var(--border)', borderRadius:'10px', padding:'14px' },
  cardTitle: { fontFamily:'Cormorant Garamond,serif', fontSize:'14px', fontWeight:600, color:'var(--cream)', marginBottom:'10px', paddingBottom:'6px', borderBottom:'1px solid var(--border)' },
};

Object.assign(window, { AVPublicitaria });