
<!-- ===== ACTIVOS DE MARCA ===== -->
<?php if($isAdmin): ?>
<div class="page" id="page-marca">
  <div class="ph"><div><div class="pt">Activos de Marca</div><div class="ps">Logo · Colores · Fuentes · Referencias visuales · Disponible en todas las secciones</div></div></div>

  <div id="marca-no-client" class="card" style="text-align:center;padding:32px">
    <div style="font-size:32px;margin-bottom:10px">🏢</div>
    <div style="font-size:14px;color:var(--m)">Selecciona un cliente para gestionar sus activos de marca</div>
  </div>

  <div id="marca-content" style="display:none">

    <!-- LOGO -->
    <div class="card">
      <div class="chd"><div class="ctit">Logo</div><div style="font-size:11px;color:var(--m)">AVI usa el logo para extraer colores exactos y estilo de marca</div></div>
      <div style="display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap">
        <div id="marca-logo-preview" style="width:120px;height:120px;border:2px dashed var(--br2);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;overflow:hidden;transition:border-color .2s" onclick="document.getElementById('marca-logo-input').click()" onmouseover="this.style.borderColor='var(--red)'" onmouseout="this.style.borderColor='var(--br2)'">
          <span id="marca-logo-placeholder" style="font-size:11px;color:var(--m);text-align:center;padding:8px">📎 Subir logo</span>
          <img id="marca-logo-img" style="display:none;width:100%;height:100%;object-fit:contain;padding:8px">
        </div>
        <input type="file" id="marca-logo-input" accept="image/png,image/jpeg,image/jpg,image/svg+xml,image/webp" style="display:none" onchange="uploadBrandAsset('logo',this)">
        <div style="flex:1;min-width:160px">
          <div style="font-size:12px;color:var(--m);margin-bottom:8px">PNG con fondo transparente recomendado (máx 5MB)</div>
          <div style="display:flex;gap:8px;flex-wrap:wrap">
            <button onclick="document.getElementById('marca-logo-input').click()" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Subir logo</button>
            <button id="marca-logo-del" onclick="deleteBrandAsset('logo')" style="display:none;padding:6px 12px;border-radius:6px;font-size:12px;background:var(--rl);border:1px solid var(--rb);color:var(--red);cursor:pointer;font-family:var(--fb)">Eliminar</button>
          </div>
          <div id="marca-logo-status" style="font-size:11px;color:var(--g);margin-top:6px"></div>
        </div>
      </div>
    </div>

    <!-- MANUAL DE MARCA -->
    <div class="card">
      <div class="chd"><div class="ctit">Manual de Marca</div><div style="font-size:11px;color:var(--m)">PDF — Claude extrae colores HEX y tipografías automáticamente</div></div>
      <div style="display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap">
        <div id="marca-manual-preview" onclick="document.getElementById('marca-manual-input').click()" onmouseover="this.style.borderColor='var(--red)'" onmouseout="this.style.borderColor='var(--br2)'" style="width:90px;height:110px;border:2px dashed var(--br2);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;background:var(--bg3);transition:border-color .2s">
          <div style="font-size:26px;margin-bottom:4px">📄</div>
          <div id="marca-manual-placeholder" style="font-size:10px;color:var(--m);text-align:center;padding:0 6px">Subir PDF</div>
          <div id="marca-manual-name" style="display:none;font-size:10px;color:var(--g);text-align:center;padding:0 6px;word-break:break-all">manual.pdf</div>
        </div>
        <input type="file" id="marca-manual-input" accept="application/pdf" style="display:none" onchange="uploadBrandManual(this)">
        <div style="flex:1;min-width:160px">
          <div style="font-size:12px;color:var(--m);margin-bottom:10px">Sube el PDF del manual de marca del cliente. Claude analizará el documento y rellenará automáticamente los colores HEX y tipografías.</div>
          <div style="display:flex;gap:8px;flex-wrap:wrap">
            <button onclick="document.getElementById('marca-manual-input').click()" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Subir manual</button>
            <button id="marca-manual-extract-btn" onclick="extractBrandManual()" style="display:none;padding:6px 14px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">✦ Analizar manual</button>
            <button id="marca-manual-del" onclick="deleteBrandManual()" style="display:none;padding:6px 12px;border-radius:6px;font-size:12px;background:var(--rl);border:1px solid var(--rb);color:var(--red);cursor:pointer;font-family:var(--fb)">Eliminar</button>
          </div>
          <div id="marca-manual-status" style="font-size:11px;margin-top:8px"></div>
        </div>
      </div>
    </div>

    <!-- COLORES Y FUENTES -->
    <div class="g2">
      <div class="card">
        <div class="chd"><div class="ctit">Colores de Marca</div></div>
        <div style="font-size:12px;color:var(--m);margin-bottom:10px">Códigos HEX separados por coma</div>
        <input type="text" id="marca-colors" placeholder="Ej: #E8293B, #1A1A2E, #FFFFFF, #F5F5F5" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%;margin-bottom:8px" oninput="renderColorSwatches()">
        <div style="display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap">
          <button id="marca-extract-logo-btn" onclick="extractLogoColors()" style="padding:5px 12px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">✦ Extraer del logo</button>
          <span id="marca-extract-status" style="font-size:11px;color:var(--m)"></span>
        </div>
        <div id="marca-color-swatches" style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px"></div>
        <button onclick="saveBrandMeta()" style="padding:6px 16px;border-radius:6px;font-size:12px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Guardar colores</button>
        <span id="marca-meta-saved" style="font-size:11px;color:var(--g);margin-left:8px;display:none">✓ Guardado</span>
      </div>
      <div class="card">
        <div class="chd"><div class="ctit">Tipografía</div></div>
        <div style="font-size:12px;color:var(--m);margin-bottom:10px">Nombres de fuentes que usa la marca</div>
        <input type="text" id="marca-fonts" placeholder="Ej: Montserrat Bold para títulos, Open Sans para cuerpo" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%;margin-bottom:12px">
        <button onclick="saveBrandMeta()" style="padding:6px 16px;border-radius:6px;font-size:12px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Guardar tipografía</button>
      </div>
    </div>

    <!-- IDENTIDAD DE MARCA -->
    <div class="card">
      <div class="chd">
        <div><div class="ctit">Identidad de Marca</div><div style="font-size:11px;color:var(--m)">Personalidad, tono, elementos, fotografía y público — AVI usa esto en todas las secciones</div></div>
      </div>
      <textarea id="marca-description" placeholder="Se rellena automáticamente al analizar el manual de marca. También puedes escribirlo manualmente.&#10;&#10;Ejemplo:&#10;Valores: innovación, cercanía, confianza&#10;Tono de voz: directo y profesional, evita tecnicismos&#10;Público objetivo: empresarios 30-55 años, nivel medio-alto&#10;Elementos gráficos: líneas geométricas, iconografía minimalista&#10;Fotografía: lifestyle natural, iluminación cálida, personas reales&#10;Marca aspiracional pero accesible que transmite expertise y resultados." style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--t);font-family:var(--fb);outline:none;width:100%;min-height:140px;resize:vertical;line-height:1.6;margin-bottom:10px"></textarea>
      <div style="display:flex;align-items:center;gap:10px">
        <button onclick="saveBrandMeta()" style="padding:6px 16px;border-radius:6px;font-size:12px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Guardar identidad</button>
        <span id="marca-desc-saved" style="font-size:11px;color:var(--g);display:none">✓ Guardado</span>
        <span style="font-size:11px;color:var(--m)">Se inyecta automáticamente en todos los prompts de AVI</span>
      </div>
    </div>

    <!-- REFERENCIAS VISUALES -->
    <div class="card">
      <div class="chd"><div class="ctit">Referencias visuales de marca</div><div style="font-size:11px;color:var(--m)">Piezas existentes del cliente que definen su estilo — AVI las usa en Imágenes IA</div></div>
      <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px">
        <?php for($s=1;$s<=4;$s++): ?>
        <div>
          <div id="marca-style-<?=$s?>-wrap" onclick="document.getElementById('marca-style-<?=$s?>-input').click()" style="aspect-ratio:1;border:2px dashed var(--br2);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:border-color .2s;background:var(--bg3)" onmouseover="this.style.borderColor='var(--red)'" onmouseout="this.style.borderColor='var(--br2)'">
            <span id="marca-style-<?=$s?>-ph" style="font-size:11px;color:var(--m);text-align:center;padding:8px">+ Referencia <?=$s?></span>
            <img id="marca-style-<?=$s?>-img" style="display:none;width:100%;height:100%;object-fit:cover">
          </div>
          <input type="file" id="marca-style-<?=$s?>-input" accept="image/*" style="display:none" onchange="uploadBrandAsset('style_<?=$s?>',this,<?=$s?>)">
          <button id="marca-style-<?=$s?>-del" onclick="deleteBrandAsset('style_<?=$s?>')" style="display:none;width:100%;margin-top:4px;padding:4px 8px;border-radius:5px;font-size:11px;background:var(--rl);border:1px solid var(--rb);color:var(--red);cursor:pointer;font-family:var(--fb)">Eliminar</button>
        </div>
        <?php endfor ?>
      </div>
      <div style="font-size:11px;color:var(--m);margin-top:10px">Sube hasta 4 imágenes: piezas publicitarias, fotos de marca, packaging, capturas de redes sociales</div>
    </div>

    <!-- USO EN SECCIONES -->
    <div class="card">
      <div class="chd"><div class="ctit">✦ Cómo AVI usa estos activos</div></div>
      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:12px">
        <div style="padding:10px 12px;background:var(--bg3);border-radius:8px"><div style="color:var(--red);font-weight:600;margin-bottom:4px">Imágenes IA</div>Incluye logo y referencias en cada prompt generado. Extrae paleta exacta para coherencia visual.</div>
        <div style="padding:10px 12px;background:var(--bg3);border-radius:8px"><div style="color:var(--red);font-weight:600;margin-bottom:4px">Meta Ads</div>AVI genera copies y creatividades alineadas con los colores y tono de marca definidos.</div>
        <div style="padding:10px 12px;background:var(--bg3);border-radius:8px"><div style="color:var(--red);font-weight:600;margin-bottom:4px">Videos</div>AVI sugiere colores de subtítulos, overlays y estilo visual consistente con la identidad de marca.</div>
      </div>
    </div>

  </div>
</div>
<?php endif ?>
