
<!-- ===== SITIOS WEB ===== -->
<?php if(_nav('web')): ?>
<div class="page" id="page-web">
  <div class="ph"><div><div class="pt">Sitios Web</div><div class="ps">WordPress · Shopify · Propuestas de diseño</div></div></div>

  <!-- TABS SITIOS WEB -->
  <div style="display:flex;gap:0;border-bottom:1px solid var(--br);margin-bottom:4px;flex-wrap:wrap">
    <button class="web-tab active" data-click="switchWebTab|general|__el" style="padding:9px 16px;font-size:12px;color:var(--t);background:none;border:none;border-bottom:2px solid var(--red);cursor:pointer;font-family:var(--fb)">General</button>
    <button class="web-tab" data-click="switchWebTab|wordpress|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb)">🔷 WordPress</button>
    <button class="web-tab" data-click="switchWebTab|shopify|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb)">🛍 Shopify</button>
    <button class="web-tab" data-click="switchWebTab|propuestas|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb)">Propuestas de diseño</button>
    <button class="web-tab" data-click="switchWebTab|competencia|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb)">🔍 Análisis competencia</button>
  </div>

  <!-- TAB GENERAL -->
  <div class="web-panel active" id="wpanel-general">

    <!-- Aviso sin cliente -->
    <div id="web-no-client" style="display:none;text-align:center;padding:40px 20px;color:var(--m);font-size:13px">
      Selecciona un cliente para ver los datos del sitio.
    </div>

    <!-- Infraestructura: Uptime · SSL · PageSpeed -->
    <div id="web-infra-wrap">
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:14px">

        <!-- Uptime card -->
        <div class="card" id="web-uptime-card" style="padding:16px 18px">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
            <div style="font-size:12px;font-weight:700;color:var(--t)">🟢 Uptime</div>
            <button data-click="loadWebUptime|true" style="background:none;border:none;color:var(--m);font-size:12px;cursor:pointer" title="Actualizar">↻</button>
          </div>
          <div id="web-uptime-content">
            <div style="font-size:12px;color:var(--m)">Selecciona un cliente</div>
          </div>
        </div>

        <!-- SSL card -->
        <div class="card" id="web-ssl-card" style="padding:16px 18px">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
            <div style="font-size:12px;font-weight:700;color:var(--t)">🔒 Certificado SSL</div>
            <button data-click="loadWebSSL|true" style="background:none;border:none;color:var(--m);font-size:12px;cursor:pointer" title="Actualizar">↻</button>
          </div>
          <div id="web-ssl-content">
            <div style="font-size:12px;color:var(--m)">Selecciona un cliente</div>
          </div>
        </div>

        <!-- PageSpeed card -->
        <div class="card" id="web-ps-card" style="padding:16px 18px">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
            <div style="font-size:12px;font-weight:700;color:var(--t)">⚡ PageSpeed</div>
            <button data-click="loadWebPageSpeed|true" style="background:none;border:none;color:var(--m);font-size:12px;cursor:pointer" title="Reanalizar">↻</button>
          </div>
          <div id="web-ps-content">
            <div style="font-size:12px;color:var(--m)">Selecciona un cliente</div>
          </div>
        </div>

      </div>
    </div>

    <!-- AVI análisis de sitio -->
    <div class="avi">
      <div class="avi-hd">
        <div class="avi-orb">✦</div>
        <div><div class="avi-name">AVI · Análisis de rendimiento web</div><div class="avi-sub">Uptime · SSL · PageSpeed · WordPress · Shopify</div></div>
      </div>
      <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px">
        <button class="db" data-click="webAVIquick|Analiza el rendimiento completo del sitio del cliente usando los datos de uptime, SSL y PageSpeed disponibles. Dame un diagnóstico y las 3 acciones más urgentes.">📊 Diagnóstico completo</button>
        <button class="db" data-click="webAVIquick|El sitio tiene estos datos de PageSpeed. Dame un plan concreto para mejorar el score de performance: qué archivos optimizar, plugins recomendados para WordPress, y orden de prioridad.">⚡ Mejorar velocidad</button>
        <button class="db" data-click="webAVIquick|Revisa el estado del SSL y uptime. ¿Hay riesgos de seguridad o disponibilidad? Dame recomendaciones concretas.">🔒 Revisar seguridad</button>
      </div>
      <div class="avi-row">
        <input class="avi-in" id="web-q" placeholder="Ej: ¿cómo mejorar la velocidad del sitio? ¿el SSL vence pronto?" onkeydown="if(event.key==='Enter')askAVI('web')">
        <button class="avi-send" data-click="askAVI|web">Enviar</button>
      </div>
      <div class="avi-resp" id="avi-resp-web"></div>
    </div>
  </div>

  <!-- TAB WORDPRESS -->
  <div class="web-panel" id="wpanel-wordpress" style="display:none">

    <!-- Aviso sin credenciales -->
    <div id="wp-no-creds" style="display:none;background:rgba(245,197,67,.08);border:1px solid rgba(245,197,67,.25);border-radius:8px;padding:12px 16px;font-size:13px;color:var(--y);margin-bottom:14px">
      ⚠ Configura las credenciales de WordPress en este cliente (⚙ APIs → WordPress) para ver datos reales.
    </div>

    <!-- Overview: nombre del sitio, versión, tema -->
    <div id="wp-overview-card" class="card" style="margin-bottom:14px">
      <div class="chd">
        <div class="ctit">🔷 Información del sitio</div>
        <button data-click="loadWPData|__client|true" style="padding:4px 10px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">↻ Actualizar</button>
      </div>
      <div id="wp-overview-content">
        <div style="font-size:12px;color:var(--m);text-align:center;padding:20px">Selecciona un cliente con WordPress configurado.</div>
      </div>
    </div>

    <!-- Últimos posts -->
    <div class="card" style="margin-bottom:14px">
      <div class="chd">
        <div class="ctit">📝 Últimas publicaciones</div>
        <span id="wp-posts-count" style="font-size:11px;color:var(--m)"></span>
      </div>
      <div id="wp-posts-content">
        <div style="font-size:12px;color:var(--m);text-align:center;padding:20px">Cargando posts...</div>
      </div>
    </div>

    <!-- Plugins -->
    <div class="card" style="margin-bottom:14px">
      <div class="chd">
        <div class="ctit">🧩 Plugins instalados</div>
        <div style="display:flex;gap:6px;align-items:center">
          <span id="wp-plugins-badge" style="display:none;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px"></span>
          <button data-click="loadWPPlugins|__client" style="padding:4px 10px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">Cargar plugins</button>
        </div>
      </div>
      <div id="wp-plugins-content">
        <div style="font-size:12px;color:var(--m);text-align:center;padding:16px">Clic en "Cargar plugins" para ver el estado de los plugins (requiere Application Password de admin).</div>
      </div>
    </div>

    <!-- AVI WordPress -->
    <div class="card">
      <div class="chd"><div class="ctit" style="color:var(--p)">✦ AVI — Análisis WordPress</div></div>
      <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px">
        <button class="db" data-click="webAVIquick|Analiza los plugins instalados en WordPress. ¿Cuáles generan conflictos de rendimiento? ¿Cuáles deberían actualizarse urgentemente? ¿Hay plugins redundantes?|avi-wp-resp">🧩 Analizar plugins</button>
        <button class="db" data-click="webAVIquick|Con los posts recientes del sitio WordPress, dame recomendaciones de SEO on-page: títulos, meta descriptions, estructura de contenido y enlazado interno.|avi-wp-resp">📝 SEO on-page</button>
        <button class="db" data-click="webAVIquick|¿Qué configuraciones de WordPress son esenciales para seguridad? Revisa si hay señales de vulnerabilidad basándote en los datos del sitio.|avi-wp-resp">🔒 Seguridad WP</button>
      </div>
      <div class="avi-resp" id="avi-wp-resp" style="display:none"></div>
    </div>

  </div>

  <!-- TAB PROPUESTAS DE DISEÑO -->
  <div class="web-panel" id="wpanel-propuestas" style="display:none">

    <!-- Lista de propuestas existentes -->
    <div id="proposals-list-card" class="card" style="margin-bottom:12px">
      <div class="chd">
        <div class="ctit">Propuestas de diseño</div>
        <button data-click="showProposalForm" style="padding:5px 12px;border-radius:6px;font-size:12px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">+ Nueva propuesta</button>
      </div>
      <div id="proposals-list">
        <div style="text-align:center;color:var(--m);padding:20px;font-size:13px">Selecciona un cliente para ver sus propuestas</div>
      </div>
    </div>

    <!-- Formulario nueva propuesta -->
    <div id="proposal-form" style="display:none">
      <div class="card">
        <div class="chd">
          <div class="ctit" style="color:var(--red)">Nueva propuesta de diseño</div>
          <button data-click="hideProposalForm" style="background:none;border:none;color:var(--m);cursor:pointer;font-size:18px">×</button>
        </div>
        <input type="hidden" id="prop-id" value="">

        <!-- NOMBRE -->
        <div class="mf" style="margin-bottom:14px">
          <label>Nombre del proyecto *</label>
          <input type="text" id="prop-name" placeholder="Ej: Panama Air Adventures — Web corporativa" 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%">
        </div>

        <!-- BRIEF -->
        <div class="mf" style="margin-bottom:14px">
          <label>Brief del proyecto</label>
          <div style="display:flex;gap:6px;margin-bottom:8px">
            <button data-click="setBriefMode|upload" id="brief-mode-upload" style="padding:5px 12px;border-radius:6px;font-size:11px;background:var(--rl);border:1px solid var(--rb);color:var(--red);cursor:pointer;font-family:var(--fb)">📎 Subir archivo</button>
            <button data-click="setBriefMode|write" id="brief-mode-write" style="padding:5px 12px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">✏ Escribir</button>
          </div>
          <div id="brief-upload-area">
            <div style="display:flex;align-items:center;gap:10px;padding:12px;background:var(--bg3);border:1px solid var(--br2);border-radius:8px">
              <label for="brief-file" style="padding:7px 14px;border-radius:6px;font-size:12px;background:var(--red);color:#fff;cursor:pointer;font-family:var(--fb);white-space:nowrap">📎 Seleccionar archivo</label>
              <input type="file" id="brief-file" name="brief_file" accept=".docx,.pdf,.txt" style="display:none" data-change="uploadBriefFile|__el">
              <span id="brief-filename" style="font-size:12px;color:var(--m)">Sin archivo seleccionado</span>
            </div>
            <div style="font-size:11px;color:var(--m);margin-top:4px">Formatos: .docx, .pdf, .txt</div>
            <div id="brief-file-status" style="font-size:12px;margin-top:6px;color:var(--m)"></div>
          </div>
          <div id="brief-write-area" style="display:none">
            <textarea id="prop-brief" style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;resize:vertical;min-height:120px;width:100%" placeholder="Describe el negocio, servicios, público objetivo, tono, lo que quiere lograr..."></textarea>
          </div>
          <textarea id="prop-brief-hidden" style="display:none"></textarea>
        </div>

        <!-- ESTRUCTURA -->
        <div class="mf" style="margin-bottom:14px">
          <label>Estructura del homepage (secciones en orden)</label>
          <textarea id="prop-structure" style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;resize:vertical;min-height:80px;width:100%" placeholder="Hero con video → Servicios → Quiénes somos → Testimonios → Contacto → Footer"></textarea>
        </div>

        <!-- OBJETIVO + INTEGRACIONES -->
        <div class="g2" style="margin-bottom:14px">
          <div class="mf">
            <label>Objetivo principal del sitio</label>
            <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px" id="goal-tags">
              <div class="stag" data-click="toggleSeg|__el">Generar leads</div>
              <div class="stag" data-click="toggleSeg|__el">Vender online</div>
              <div class="stag" data-click="toggleSeg|__el">Mostrar servicios</div>
              <div class="stag" data-click="toggleSeg|__el">Reservas</div>
              <div class="stag" data-click="toggleSeg|__el">Reconocimiento</div>
              <div class="stag" data-click="toggleSeg|__el">Portafolio</div>
            </div>
            <input type="text" id="prop-goal" 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%" placeholder="Describe el objetivo principal...">
          </div>
          <div class="mf">
            <label>Integraciones necesarias</label>
            <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px" id="integration-tags">
              <div class="stag" data-click="toggleSeg|__el">WhatsApp</div>
              <div class="stag" data-click="toggleSeg|__el">Reservas online</div>
              <div class="stag" data-click="toggleSeg|__el">Pagos online</div>
              <div class="stag" data-click="toggleSeg|__el">Google Maps</div>
              <div class="stag" data-click="toggleSeg|__el">Reseñas Google</div>
              <div class="stag" data-click="toggleSeg|__el">Chat en vivo</div>
              <div class="stag" data-click="toggleSeg|__el">Formulario</div>
              <div class="stag" data-click="toggleSeg|__el">Seguimiento vuelo</div>
            </div>
          </div>
        </div>

        <!-- REPLICAR SITIO -->
        <div class="mf" style="margin-bottom:14px">
          <label>Replicar sitio <span style="font-weight:400;color:var(--m)">(URL del sitio a copiar — Claude analiza su estructura real)</span></label>
          <input type="url" id="prop-replicate" style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%" placeholder="https://competidor.com">
          <div style="font-size:11px;color:var(--m);margin-top:5px">El servidor descarga la página, extrae su contenido y se lo pasa a Claude para replicar la estructura y flujo.</div>
        </div>

        <!-- REFERENTES -->
        <div class="mf" style="margin-bottom:14px">
          <label>Sitios de referencia (uno por línea)</label>
          <textarea id="prop-refs" style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;resize:vertical;min-height:70px;width:100%" placeholder="https://heliny.com/&#10;https://volarcolombia.com/"></textarea>
        </div>

        <!-- LOGO + COLORES -->
        <div class="g2" style="margin-bottom:14px">
          <div>
            <div class="mf">
              <label>Logo del cliente</label>
              <input type="file" id="prop-logo" accept=".jpg,.jpeg,.png,.svg,.webp" style="font-size:12px;color:var(--m)" data-change="uploadLogoFile|__el">
              <div id="logo-preview" style="margin-top:6px;display:flex;align-items:center;gap:8px"></div>
            </div>
            <div class="mf" style="margin-top:10px">
              <label>Manual de marca (PDF) — opcional</label>
              <input type="file" id="prop-manual" accept=".pdf" style="font-size:12px;color:var(--m)" data-change="uploadManualFile|__el">
              <div id="manual-status" style="font-size:11px;color:var(--m);margin-top:4px"></div>
            </div>
          </div>
          <div class="mf">
            <label>Colores de marca</label>
            <div id="colors-auto" style="display:none;margin-bottom:8px">
              <div style="font-size:11px;color:var(--g);margin-bottom:6px">✓ Colores extraídos del logo</div>
              <div id="colors-swatches" style="display:flex;gap:6px;flex-wrap:wrap"></div>
            </div>
            <div id="colors-manual">
              <div style="font-size:11px;color:var(--m);margin-bottom:6px">Selecciona los colores de marca:</div>
              <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px">
                <input type="color" id="color1" value="#1a1a2e" style="width:36px;height:36px;border:none;border-radius:6px;cursor:pointer" data-change="updateColors">
                <input type="color" id="color2" value="#E8272A" style="width:36px;height:36px;border:none;border-radius:6px;cursor:pointer" data-change="updateColors">
                <input type="color" id="color3" value="#f0f0f0" style="width:36px;height:36px;border:none;border-radius:6px;cursor:pointer" data-change="updateColors">
                <input type="color" id="color4" value="#22c97a" style="width:36px;height:36px;border:none;border-radius:6px;cursor:pointer" data-change="updateColors">
              </div>
            </div>
            <input type="text" id="prop-colors" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:7px 11px;font-size:12px;color:var(--t);font-family:var(--fb);outline:none;width:100%" placeholder="Se llenarán al subir el logo">
            <input type="hidden" id="prop-fonts">
          </div>
        </div>

        <!-- ANÁLISIS DE COMPETENCIA -->
        <div style="background:rgba(34,201,122,.06);border:1px solid rgba(34,201,122,.2);border-radius:10px;padding:14px 16px;margin-bottom:14px">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
            <div style="font-family:var(--fh);font-size:13px;font-weight:600;color:var(--g)">🔍 Contexto para análisis de competencia</div>
            <button data-click="findCompetitors" style="padding:5px 12px;border-radius:6px;font-size:11px;background:rgba(34,201,122,.15);border:1px solid rgba(34,201,122,.3);color:var(--g);cursor:pointer;font-family:var(--fb)">Buscar competidores auto</button>
          </div>
          <div style="font-size:11px;color:var(--m);margin-bottom:12px">Esta info alimenta el análisis estratégico de AVI — solo para asesoría DIMARK, no afecta el diseño.</div>
          <div class="g2" style="margin-bottom:10px">
            <div class="mf">
              <label>Diferencial del negocio</label>
              <input type="text" id="comp-diferencial" 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%" placeholder="Ej: Únicos con helicóptero VIP en Panamá, 10 años de experiencia">
            </div>
            <div class="mf">
              <label>Propuesta de valor</label>
              <input type="text" id="comp-valor" 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%" placeholder="Ej: La experiencia aérea más segura y exclusiva de Centroamérica">
            </div>
            <div class="mf">
              <label>Público objetivo</label>
              <input type="text" id="comp-publico" 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%" placeholder="Ej: Turistas 35-60 años, NSE alto, viajeros de aventura premium">
            </div>
            <div class="mf">
              <label>Ubicación de clientes</label>
              <input type="text" id="comp-ubicacion" 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%" placeholder="Ej: Turistas USA, Canadá, Europa — locales Ciudad de Panamá">
            </div>
          </div>
          <div class="mf" style="margin-bottom:10px">
            <label>URLs de competidores (uno por línea)</label>
            <textarea id="prop-competitors-urls" style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--t);font-family:var(--fb);outline:none;resize:vertical;min-height:60px;width:100%" placeholder="https://competidor1.com&#10;https://competidor2.com"></textarea>
          </div>
          <div id="comp-analysis-wrap" style="display:none">
            <button data-click="analyzeCompetitors" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--g);border:none;color:#000;cursor:pointer;font-family:var(--fb);font-weight:600;margin-bottom:8px">Analizar con AVI →</button>
            <div id="comp-analysis-result" style="background:var(--bg3);border-radius:8px;padding:12px;font-size:12px;color:var(--m);line-height:1.6;display:none;max-height:200px;overflow-y:auto"></div>
          </div>
          <div id="comp-status" style="font-size:12px;color:var(--m)"></div>
        </div>

        <!-- NOTAS ADICIONALES -->
        <div class="mf" style="margin-bottom:14px">
          <label>Notas adicionales</label>
          <textarea id="prop-notes" style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;resize:vertical;min-height:60px;width:100%" placeholder="Cualquier detalle adicional importante para el diseño..."></textarea>
        </div>

        <div style="display:flex;gap:8px;justify-content:flex-end">
          <button data-click="saveProposal" style="padding:8px 16px;border-radius:7px;font-size:13px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Guardar borrador</button>
          <button data-click="saveAndGenerate" style="padding:8px 20px;border-radius:7px;font-size:13px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Guardar y generar →</button>
        </div>
        <div id="prop-form-msg" style="font-size:12px;margin-top:8px;text-align:center"></div>
      </div>
    </div>

    <!-- Área de propuestas generadas -->
    <div id="proposals-preview" style="display:none">
      <div class="card">
        <div class="chd">
          <div style="display:flex;align-items:center;gap:10px">
            <button data-click="backToProposalsList" style="padding:5px 10px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">← Volver</button>
            <div class="ctit" id="proposals-preview-title">Propuestas generadas</div>
          </div>
          <div style="display:flex;gap:6px">
            <button id="btn-send-client" data-click="sendToClient" style="padding:5px 12px;border-radius:6px;font-size:12px;background:rgba(74,158,248,.15);border:1px solid rgba(74,158,248,.3);color:#4a9ef8;cursor:pointer;font-family:var(--fb)">📤 Enviar al cliente</button>
            <button data-click="downloadProposalPDF" style="padding:5px 12px;border-radius:6px;font-size:12px;background:rgba(232,39,42,.15);border:1px solid rgba(232,39,42,.3);color:var(--red);cursor:pointer;font-family:var(--fb)">📄 Exportar PDF</button>
          </div>
        </div>
        <!-- Panel de votación y comentarios del cliente -->
        <div id="vote-panel" style="display:none;background:var(--bg3);border:1px solid var(--br2);border-radius:10px;padding:16px;margin-bottom:12px">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
            <div style="font-family:var(--fh);font-size:13px;font-weight:600">Respuesta del cliente</div>
            <div id="vote-status-badge" style="font-size:11px;padding:2px 8px;border-radius:10px"></div>
          </div>
          <div id="vote-details" style="font-size:13px;color:var(--m)"></div>
          <div id="comments-panel-admin" style="margin-top:12px"></div>
        </div>

        <!-- Panel versión final del cliente -->
        <div id="final-version-panel" style="display:none;background:rgba(155,127,244,.07);border:1px solid rgba(155,127,244,.25);border-radius:10px;padding:16px;margin-bottom:12px">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
            <div>
              <div style="font-family:var(--fh);font-size:13px;font-weight:600;color:var(--p)">Versión Final generada por el cliente</div>
              <div id="final-version-meta" style="font-size:11px;color:var(--m);margin-top:3px"></div>
            </div>
            <div style="display:flex;gap:6px;flex-wrap:wrap">
              <button data-click="openFinalFull" style="padding:5px 12px;border-radius:6px;font-size:12px;background:rgba(155,127,244,.15);border:1px solid rgba(155,127,244,.3);color:var(--p);cursor:pointer;font-family:var(--fb)">↗ Ver completa</button>
              <button data-click="downloadFinalHTML" style="padding:5px 10px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">↓ HTML</button>
              <button data-click="openWPGenModal" style="padding:5px 12px;border-radius:6px;font-size:12px;background:rgba(232,39,42,.12);border:1px solid rgba(232,39,42,.3);color:var(--red);cursor:pointer;font-family:var(--fb);font-weight:600">🎨 Generar tema WP</button>
            </div>
          </div>
          <div id="final-preview-wrap" style="height:340px;background:#f5f5f5;border-radius:8px;overflow:hidden;position:relative">
            <div style="display:flex;align-items:center;justify-content:center;height:100%;gap:8px;flex-direction:column">
              <div style="width:20px;height:20px;border:3px solid #ccc;border-top-color:var(--p);border-radius:50%;animation:spin .8s linear infinite"></div>
              <div style="font-size:12px;color:#999">Cargando versión final...</div>
            </div>
          </div>
        </div>

        <!-- Guía de instalación manual -->
        <div style="background:var(--bg2);border:1px solid var(--br2);border-radius:10px;padding:16px;margin-bottom:12px">
          <div style="font-size:12px;font-weight:700;color:var(--t);margin-bottom:14px;letter-spacing:.3px">📦 ¿Cómo subir el sitio al servidor del cliente?</div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">

            <!-- WordPress -->
            <div style="background:rgba(255,255,255,.03);border:1px solid var(--br2);border-radius:8px;padding:14px">
              <div style="font-size:12px;font-weight:700;color:var(--t);margin-bottom:12px;display:flex;align-items:center;gap:6px">
                <span style="background:rgba(155,127,244,.2);border-radius:5px;padding:2px 7px;font-size:11px;color:var(--p)">WordPress</span>
              </div>
              <div style="display:flex;flex-direction:column;gap:9px">
                <div style="display:flex;gap:8px;align-items:flex-start">
                  <span style="min-width:18px;height:18px;border-radius:50%;background:rgba(155,127,244,.3);color:var(--p);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center">1</span>
                  <span style="font-size:11px;color:var(--m);line-height:1.6">Click <strong style="color:var(--t)">🎨 Generar tema WP</strong> y descarga el ZIP generado</span>
                </div>
                <div style="display:flex;gap:8px;align-items:flex-start">
                  <span style="min-width:18px;height:18px;border-radius:50%;background:rgba(155,127,244,.3);color:var(--p);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center">2</span>
                  <span style="font-size:11px;color:var(--m);line-height:1.6">WP Admin → <strong style="color:var(--t)">Apariencia → Temas → Añadir nuevo → Subir tema</strong> → selecciona el ZIP → <strong style="color:var(--t)">Instalar ahora → Activar</strong></span>
                </div>
                <div style="display:flex;gap:8px;align-items:flex-start">
                  <span style="min-width:18px;height:18px;border-radius:50%;background:rgba(155,127,244,.3);color:var(--p);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center">3</span>
                  <span style="font-size:11px;color:var(--m);line-height:1.6"><strong style="color:var(--t)">Ajustes → Lectura</strong> → Una página estática → selecciona la página del home como Portada</span>
                </div>
                <div style="display:flex;gap:8px;align-items:flex-start">
                  <span style="min-width:18px;height:18px;border-radius:50%;background:rgba(245,197,67,.3);color:var(--y);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center">4</span>
                  <span style="font-size:11px;color:var(--m);line-height:1.6">⚠ Abre esa página y <strong style="color:var(--t)">elimina todo el contenido anterior</strong> (Elementor/Gutenberg) — el tema ya lleva el diseño</span>
                </div>
                <div style="display:flex;gap:8px;align-items:flex-start">
                  <span style="min-width:18px;height:18px;border-radius:50%;background:rgba(155,127,244,.3);color:var(--p);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center">5</span>
                  <span style="font-size:11px;color:var(--m);line-height:1.6">Purgar caché: <strong style="color:var(--t)">LiteSpeed → Purgar todo</strong> / <strong style="color:var(--t)">WP Rocket → Borrar caché</strong> / Ctrl+Shift+R</span>
                </div>
                <div style="display:flex;gap:8px;align-items:flex-start">
                  <span style="min-width:18px;height:18px;border-radius:50%;background:rgba(155,127,244,.3);color:var(--p);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center">6</span>
                  <span style="font-size:11px;color:var(--m);line-height:1.6">Personalizar textos, colores y logo en <strong style="color:var(--t)">Apariencia → Personalizar</strong></span>
                </div>
              </div>
              <div style="margin-top:12px;padding-top:10px;border-top:1px solid var(--br2);font-size:10px;color:var(--m);line-height:1.8">
                <strong style="color:var(--red)">Error al subir ZIP</strong>: cPanel → PHP → <em>upload_max_filesize</em> → 32M &nbsp;|&nbsp;
                <strong style="color:var(--red)">Wordfence</strong>: agrega IP <code style="background:var(--bg3);padding:0 3px;border-radius:3px">144.217.252.229</code> a lista blanca
              </div>
            </div>

            <!-- Shopify -->
            <div style="background:rgba(255,255,255,.03);border:1px solid var(--br2);border-radius:8px;padding:14px">
              <div style="font-size:12px;font-weight:700;color:var(--t);margin-bottom:12px;display:flex;align-items:center;gap:6px">
                <span style="background:rgba(34,201,122,.15);border-radius:5px;padding:2px 7px;font-size:11px;color:var(--g)">Shopify</span>
              </div>
              <div style="display:flex;flex-direction:column;gap:9px">
                <div style="display:flex;gap:8px;align-items:flex-start">
                  <span style="min-width:18px;height:18px;border-radius:50%;background:rgba(34,201,122,.2);color:var(--g);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center">1</span>
                  <span style="font-size:11px;color:var(--m);line-height:1.6">Click <strong style="color:var(--t)">↓ HTML</strong> y guarda el archivo en tu computador</span>
                </div>
                <div style="display:flex;gap:8px;align-items:flex-start">
                  <span style="min-width:18px;height:18px;border-radius:50%;background:rgba(34,201,122,.2);color:var(--g);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center">2</span>
                  <span style="font-size:11px;color:var(--m);line-height:1.6">Admin Shopify → <strong style="color:var(--t)">Tienda en línea → Temas → ··· → Editar código</strong></span>
                </div>
                <div style="display:flex;gap:8px;align-items:flex-start">
                  <span style="min-width:18px;height:18px;border-radius:50%;background:rgba(34,201,122,.2);color:var(--g);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center">3</span>
                  <span style="font-size:11px;color:var(--m);line-height:1.6">En la columna izquierda abre <code style="background:var(--bg3);padding:0 3px;border-radius:3px">templates/index.json</code> o <code style="background:var(--bg3);padding:0 3px;border-radius:3px">layout/theme.liquid</code></span>
                </div>
                <div style="display:flex;gap:8px;align-items:flex-start">
                  <span style="min-width:18px;height:18px;border-radius:50%;background:rgba(34,201,122,.2);color:var(--g);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center">4</span>
                  <span style="font-size:11px;color:var(--m);line-height:1.6">Reemplaza todo el contenido por el HTML generado → click <strong style="color:var(--t)">Guardar</strong></span>
                </div>
                <div style="display:flex;gap:8px;align-items:flex-start">
                  <span style="min-width:18px;height:18px;border-radius:50%;background:rgba(34,201,122,.2);color:var(--g);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center">5</span>
                  <span style="font-size:11px;color:var(--m);line-height:1.6">Verifica la tienda en vivo → ajusta textos e imágenes directamente en el editor de secciones</span>
                </div>
              </div>
              <div style="margin-top:12px;padding-top:10px;border-top:1px solid var(--br2);font-size:10px;color:var(--m);line-height:1.8">
                <strong style="color:var(--red)">Liquid incompleto</strong>: asegúrate de no borrar las variables <code style="background:var(--bg3);padding:0 3px;border-radius:3px">{% ... %}</code> propias del tema activo &nbsp;|&nbsp;
                <strong style="color:var(--red)">Diseño roto</strong>: las imágenes deben subirse a <strong style="color:var(--t)">Contenido → Archivos</strong> y actualizar las URLs
              </div>
            </div>

          </div>

          <!-- Botón solicitar apoyo -->
          <div style="margin-top:14px;padding-top:14px;border-top:1px solid var(--br2);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px">
            <div style="font-size:11px;color:var(--m)">¿Necesitas que lo hagamos nosotros? Nuestros expertos lo instalan en menos de 24h.</div>
            <button data-click="solicitarApoyoWP" style="padding:7px 16px;border-radius:7px;font-size:12px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb);font-weight:600;white-space:nowrap">🛠 Solicitar apoyo técnico</button>
          </div>
        </div>

        <div id="client-link-wrap" style="display:none;background:rgba(34,201,122,.08);border:1px solid rgba(34,201,122,.2);border-radius:8px;padding:12px;margin-bottom:12px;font-size:13px">
          <div style="color:var(--g);margin-bottom:6px;font-weight:500">✓ Link generado para el cliente:</div>
          <div style="display:flex;gap:8px;align-items:center">
            <input id="client-link" readonly style="flex:1;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--t);font-family:var(--fb)">
            <button data-click="copyLink" style="padding:6px 12px;border-radius:6px;font-size:12px;background:var(--g);border:none;color:#000;cursor:pointer;font-family:var(--fb);font-weight:500">Copiar</button>
            <a id="client-link-open" href="#" target="_blank" style="padding:6px 12px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);text-decoration:none">↗ Abrir</a>
          </div>
        </div>

        <!-- Previews de las 3 propuestas -->
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px" id="previews-grid">
        </div>
      </div>
    </div>
  </div><!-- /wpanel-propuestas -->

  <!-- MODAL: Generar tema WordPress -->
  <div id="wpgen-modal" data-closeifback="closeWPGenModal" style="display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.75);align-items:center;justify-content:center">
    <div style="background:var(--bg2);border:1px solid var(--br2);border-radius:14px;padding:24px;max-width:500px;width:calc(100% - 32px);box-sizing:border-box;max-height:90vh;overflow-y:auto">

      <!-- Header -->
      <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px">
        <div>
          <div style="font-family:var(--fh);font-size:16px;font-weight:700">🎨 Generar tema WordPress</div>
          <div style="font-size:12px;color:var(--m);margin-top:3px">Diseño aprobado → tema instalable en <2 min</div>
        </div>
        <button data-click="closeWPGenModal" style="background:none;border:none;color:var(--m);font-size:20px;cursor:pointer;padding:0 4px;line-height:1;flex-shrink:0">×</button>
      </div>

      <!-- Paso 1: Listo para generar -->
      <div id="wpgen-step-ready">
        <div style="background:var(--bg3);border:1px solid var(--br2);border-radius:10px;padding:14px;margin-bottom:14px">
          <div style="font-size:11px;color:var(--m);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px">Propuesta</div>
          <div style="font-size:14px;font-weight:600;color:var(--t)" id="wpgen-prop-name">—</div>
        </div>
        <div style="background:rgba(34,201,122,.07);border:1px solid rgba(34,201,122,.2);border-radius:10px;padding:14px;margin-bottom:18px;font-size:12px;color:var(--m);line-height:1.8">
          El generador produce automáticamente:<br>
          <span style="color:var(--t)">• Template-parts</span> para cada sección del diseño<br>
          <span style="color:var(--t)">• Customizer</span> para editar textos, precios y contacto<br>
          <span style="color:var(--t)">• Schema.org + SEO</span> con soporte Yoast<br>
          <span style="color:var(--t)">• Lottie lazy-load</span> y JS minimalista<br>
          <span style="color:var(--t)">• ZIP</span> listo para Apariencia → Temas → Subir
        </div>
        <button data-click="runWPThemeGeneration" style="width:100%;padding:13px;border-radius:8px;background:var(--red);border:none;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--fb)">Generar tema WordPress →</button>
      </div>

      <!-- Paso 2: Generando -->
      <div id="wpgen-step-loading" style="display:none;text-align:center;padding:30px 0">
        <div style="width:36px;height:36px;border:3px solid var(--br2);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px"></div>
        <div style="font-size:14px;font-weight:600;color:var(--t)">Generando tema...</div>
        <div style="font-size:12px;color:var(--m);margin-top:6px">Extrayendo CSS · JS · secciones · Lottie · Customizer</div>
      </div>

      <!-- Paso 3: Éxito -->
      <div id="wpgen-step-done" style="display:none">
        <div style="background:rgba(34,201,122,.1);border:1px solid rgba(34,201,122,.3);border-radius:10px;padding:18px;margin-bottom:16px;text-align:center">
          <div style="font-size:28px;margin-bottom:6px">✓</div>
          <div style="font-size:15px;font-weight:700;color:var(--g)">Tema generado</div>
          <div style="font-size:12px;color:var(--m);margin-top:4px" id="wpgen-stats"></div>
        </div>
        <a id="wpgen-download-btn" href="#" download style="display:block;text-align:center;padding:12px;border-radius:8px;background:var(--red);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--fb);text-decoration:none;margin-bottom:14px;box-sizing:border-box">↓ Descargar ZIP del tema</a>
        <div style="font-size:12px;font-weight:700;color:var(--t);margin-bottom:10px;letter-spacing:.3px">📋 Pasos de instalación</div>

        <!-- Paso 1 -->
        <div style="display:flex;gap:10px;margin-bottom:10px;align-items:flex-start">
          <div style="min-width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center">1</div>
          <div style="flex:1">
            <div style="font-size:12px;font-weight:600;color:var(--t);margin-bottom:2px">Subir el tema</div>
            <div style="font-size:11px;color:var(--m);line-height:1.7">WP Admin → <strong style="color:var(--t)">Apariencia → Temas → Añadir nuevo → Subir tema</strong> → selecciona el ZIP → click <strong style="color:var(--t)">Instalar ahora</strong></div>
          </div>
        </div>

        <!-- Paso 2 -->
        <div style="display:flex;gap:10px;margin-bottom:10px;align-items:flex-start">
          <div style="min-width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center">2</div>
          <div style="flex:1">
            <div style="font-size:12px;font-weight:600;color:var(--t);margin-bottom:2px">Activar el tema</div>
            <div style="font-size:11px;color:var(--m);line-height:1.7">Una vez instalado aparece el botón <strong style="color:var(--t)">Activar</strong> — haz click en él. El sitio ya usa tu nuevo diseño.</div>
          </div>
        </div>

        <!-- Paso 3 -->
        <div style="display:flex;gap:10px;margin-bottom:10px;align-items:flex-start">
          <div style="min-width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center">3</div>
          <div style="flex:1">
            <div style="font-size:12px;font-weight:600;color:var(--t);margin-bottom:2px">Configurar página de inicio</div>
            <div style="font-size:11px;color:var(--m);line-height:1.7"><strong style="color:var(--t)">Ajustes → Lectura</strong> → elige <em>Una página estática</em> → en <em>Portada</em> selecciona la página que corresponde al home (normalmente se llama igual que el sitio o "Home").</div>
          </div>
        </div>

        <!-- Paso 4 -->
        <div style="display:flex;gap:10px;margin-bottom:10px;align-items:flex-start">
          <div style="min-width:24px;height:24px;border-radius:50%;background:rgba(245,197,67,.9);color:#000;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center">4</div>
          <div style="flex:1">
            <div style="font-size:12px;font-weight:600;color:var(--t);margin-bottom:2px">⚠ Limpiar contenido anterior</div>
            <div style="font-size:11px;color:var(--m);line-height:1.7">Abre esa página con Elementor o Gutenberg y <strong style="color:var(--t)">elimina todo el contenido previo</strong>. El tema ya incluye el diseño completo — el contenido viejo puede superponerse.</div>
          </div>
        </div>

        <!-- Paso 5 -->
        <div style="display:flex;gap:10px;margin-bottom:10px;align-items:flex-start">
          <div style="min-width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center">5</div>
          <div style="flex:1">
            <div style="font-size:12px;font-weight:600;color:var(--t);margin-bottom:2px">Purgar caché</div>
            <div style="font-size:11px;color:var(--m);line-height:1.7">Si el sitio usa LiteSpeed Cache: <strong style="color:var(--t)">LiteSpeed → Toolbox → Purgar todo</strong>. Con WP Rocket: <strong style="color:var(--t)">WP Rocket → Borrar caché</strong>. Sin plugin de caché: simplemente recarga con Ctrl+Shift+R.</div>
          </div>
        </div>

        <!-- Paso 6 -->
        <div style="display:flex;gap:10px;margin-bottom:14px;align-items:flex-start">
          <div style="min-width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center">6</div>
          <div style="flex:1">
            <div style="font-size:12px;font-weight:600;color:var(--t);margin-bottom:2px">Personalizar textos e imágenes</div>
            <div style="font-size:11px;color:var(--m);line-height:1.7"><strong style="color:var(--t)">Apariencia → Personalizar</strong> para cambiar colores, logo y textos globales. Para contenido específico de secciones, edita directamente en el editor de páginas.</div>
          </div>
        </div>

        <!-- Problemas comunes -->
        <div style="background:rgba(232,39,42,.06);border:1px solid rgba(232,39,42,.2);border-radius:8px;padding:12px">
          <div style="font-size:11px;font-weight:700;color:var(--red);margin-bottom:8px">⚠ Problemas frecuentes</div>
          <div style="font-size:11px;color:var(--m);line-height:1.9">
            <strong style="color:var(--t)">Error al subir el ZIP</strong> — el hosting limita el tamaño de subida. En cPanel → PHP → <em>upload_max_filesize</em> aumentar a 32M.<br>
            <strong style="color:var(--t)">Wordfence bloquea la instalación</strong> — agrega la IP <code style="background:var(--bg3);padding:1px 4px;border-radius:3px">144.217.252.229</code> a la lista blanca de Wordfence.<br>
            <strong style="color:var(--t)">El sitio se ve en blanco</strong> — activa el modo debug: en <code style="background:var(--bg3);padding:1px 4px;border-radius:3px">wp-config.php</code> cambia <em>WP_DEBUG</em> a <em>true</em> para ver el error exacto.<br>
            <strong style="color:var(--t)">El diseño no se aplica al home</strong> — verifica el paso 3 (Ajustes → Lectura) y que la página seleccionada no esté en borrador.
          </div>
        </div>
      </div>

      <!-- Paso 4: Error -->
      <div id="wpgen-step-error" style="display:none">
        <div style="background:rgba(232,39,42,.08);border:1px solid rgba(232,39,42,.25);border-radius:10px;padding:16px;margin-bottom:16px;text-align:center">
          <div style="font-size:14px;font-weight:700;color:var(--red);margin-bottom:6px">Error generando tema</div>
          <div style="font-size:12px;color:var(--m)" id="wpgen-error-msg"></div>
        </div>
        <button data-click="wpgenReset" style="width:100%;padding:10px;border-radius:8px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);font-size:13px;cursor:pointer;font-family:var(--fb)">Intentar de nuevo</button>
      </div>

    </div>
  </div>

  <!-- TAB COMPETENCIA -->
  <div class="web-panel" id="wpanel-competencia" style="display:none">
    <div class="card" style="margin-bottom:12px">
      <div class="chd">
        <div class="ctit" style="color:var(--g)">🔍 Análisis de competencia web</div>
        <button data-click="runCompAnalysis" style="padding:5px 14px;border-radius:6px;font-size:12px;background:var(--g);border:none;color:#000;cursor:pointer;font-family:var(--fb);font-weight:600">Analizar con AVI →</button>
      </div>
      <div style="font-size:12px;color:var(--m);margin-bottom:14px">Análisis estratégico para asesoría DIMARK — incluye DOFA, benchmarking y recomendaciones.</div>

      <!-- Contexto del negocio -->
      <div style="background:rgba(155,127,244,.06);border:1px solid rgba(155,127,244,.2);border-radius:10px;padding:14px;margin-bottom:14px">
        <div style="font-family:var(--fh);font-size:13px;font-weight:600;color:var(--p);margin-bottom:12px">Contexto del negocio</div>
        <div class="g2" style="margin-bottom:10px">
          <div class="mf">
            <label>Diferencial del negocio</label>
            <input type="text" id="ca-diferencial" 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%" placeholder="¿Qué lo hace único?">
          </div>
          <div class="mf">
            <label>Propuesta de valor</label>
            <input type="text" id="ca-valor" 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%" placeholder="¿Qué promete al cliente?">
          </div>
          <div class="mf">
            <label>Público objetivo</label>
            <input type="text" id="ca-publico" 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%" placeholder="¿A quién le vende?">
          </div>
          <div class="mf">
            <label>Ubicación de clientes</label>
            <input type="text" id="ca-ubicacion" 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%" placeholder="¿Dónde están sus clientes?">
          </div>
        </div>
        <div class="mf">
          <label>URL del negocio</label>
          <input type="text" id="ca-url" 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%" placeholder="https://sudominio.com">
        </div>
      </div>

      <!-- Competidores -->
      <div style="background:rgba(34,201,122,.06);border:1px solid rgba(34,201,122,.2);border-radius:10px;padding:14px;margin-bottom:14px">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
          <div style="display:flex;align-items:center;gap:8px">
            <div style="font-family:var(--fh);font-size:13px;font-weight:600;color:var(--g)">Competidores</div>
            <span id="ca-saved-badge" style="display:none;font-size:10px;padding:2px 8px;border-radius:10px;background:rgba(34,201,122,.2);color:var(--g);font-weight:600">💾 Guardado</span>
          </div>
          <div style="display:flex;gap:6px">
            <button data-click="findCompetitorsCA" style="padding:5px 12px;border-radius:6px;font-size:11px;background:rgba(34,201,122,.15);border:1px solid rgba(34,201,122,.3);color:var(--g);cursor:pointer;font-family:var(--fb)">Buscar auto</button>
            <button data-click="saveCACompetitors" style="padding:5px 12px;border-radius:6px;font-size:11px;background:var(--g);border:none;color:#000;cursor:pointer;font-family:var(--fb);font-weight:600">💾 Guardar lista</button>
          </div>
        </div>
        <textarea id="ca-competitors" style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--t);font-family:var(--fb);outline:none;resize:vertical;min-height:80px;width:100%" placeholder="URLs de competidores (uno por línea)&#10;https://competidor1.com&#10;https://competidor2.com"></textarea>
        <!-- Monitor automático -->
        <div style="display:flex;align-items:center;justify-content:space-between;margin-top:10px">
          <div id="ca-find-status" style="font-size:12px;color:var(--m)"></div>
          <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--m)">
            <input type="checkbox" id="ca-auto-monitor" checked style="cursor:pointer">
            Monitoreo automático semanal
          </label>
        </div>
        <div id="ca-saved-info" style="display:none;margin-top:6px;font-size:11px;color:var(--m)"></div>
      </div>

      <!-- Tipo de análisis -->
      <div style="margin-bottom:14px">
        <div style="font-size:11px;color:var(--m);text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px">Tipo de análisis</div>
        <div style="display:flex;gap:6px;flex-wrap:wrap" id="ca-type-tags">
          <div class="stag active" data-click="toggleSeg|__el">DOFA completo</div>
          <div class="stag" data-click="toggleSeg|__el">Benchmarking web</div>
          <div class="stag" data-click="toggleSeg|__el">Análisis SEO</div>
          <div class="stag" data-click="toggleSeg|__el">UX/UI comparativo</div>
          <div class="stag" data-click="toggleSeg|__el">Estrategia de contenido</div>
          <div class="stag" data-click="toggleSeg|__el">Recomendaciones rápidas</div>
        </div>
      </div>

      <!-- Resultado del análisis -->
      <div id="ca-result-wrap" style="display:none">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
          <div style="font-family:var(--fh);font-size:13px;font-weight:600">Análisis AVI</div>
          <div style="display:flex;gap:6px">
            <button data-click="copyCAResult" style="padding:4px 10px;border-radius:5px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">Copiar</button>
            <?php if($isAdmin): ?>
            <button data-click="shareCAResult" style="padding:4px 10px;border-radius:5px;font-size:11px;background:rgba(74,158,248,.1);border:1px solid rgba(74,158,248,.2);color:var(--b);cursor:pointer;font-family:var(--fb)">Compartir con cliente</button>
            <?php endif ?>
          </div>
        </div>
        <!-- Vista Admin: completa -->
        <?php if($isAdmin): ?>
        <div id="ca-result-admin" style="background:var(--bg3);border:1px solid var(--br2);border-radius:10px;padding:16px;font-size:13px;color:var(--t);line-height:1.7;white-space:pre-wrap;max-height:500px;overflow-y:auto"></div>
        <?php else: ?>
        <!-- Vista Cliente: resumen -->
        <div id="ca-result-client" style="background:var(--bg3);border:1px solid var(--br2);border-radius:10px;padding:16px;font-size:13px;color:var(--t);line-height:1.7"></div>
        <?php endif ?>
      </div>

      <div id="ca-status" style="font-size:12px;color:var(--m);margin-top:8px;text-align:center"></div>
    </div>

    <!-- Historial de análisis anteriores -->
    <div class="card" id="ca-history-card" style="display:none">
      <div class="chd">
        <div class="ctit" style="color:var(--m)">📋 Historial de análisis</div>
        <div style="display:flex;align-items:center;gap:8px">
          <span id="ca-history-count" style="font-size:11px;color:var(--m)"></span>
          <span id="ca-monitor-badge" style="display:none;font-size:10px;padding:2px 8px;border-radius:10px;background:rgba(74,158,248,.15);color:var(--b);font-weight:600">🔄 Monitor activo</span>
        </div>
      </div>
      <div id="ca-history-list"></div>
    </div>

    <!-- AVI: Estrategia desde competencia -->
    <div class="card">
      <div class="chd">
        <div class="ctit">✦ AVI — Estrategia desde competencia</div>
        <div style="font-size:11px;color:var(--m)">AVI analiza los datos reales y crea un plan de acción ejecutable</div>
      </div>
      <button data-click="aviCompetenceStrategy" style="width:100%;padding:11px;border-radius:8px;background:var(--rl);border:1px solid var(--rb);color:var(--red);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--fb);margin-bottom:10px">
        🧠 Crear estrategia con AVI
      </button>
      <div id="ca-avi-strategy-resp" style="display:none"></div>
    </div>
  </div>

  <!-- TAB SHOPIFY -->
  <div class="web-panel" id="wpanel-shopify" style="display:none">

    <div id="shopify-no-creds" style="display:none;background:rgba(245,197,67,.08);border:1px solid rgba(245,197,67,.25);border-radius:8px;padding:12px 16px;font-size:13px;color:var(--y);margin-bottom:14px">
      ⚠ Configura las credenciales de Shopify en este cliente (Clientes → credenciales) para ver datos reales.
    </div>

    <div class="metrics" style="margin-bottom:14px">
      <div class="metric"><div class="ml" data-tip="Ingresos brutos de la tienda Shopify en los últimos 30 días. Debajo aparece el ticket promedio por orden"><div class="md" style="background:#96bf4d"></div>Ingresos 30d</div><div class="mv" id="sh-revenue">—</div><div class="mdelta" id="sh-aov" style="color:var(--m);font-size:11px">ticket medio</div></div>
      <div class="metric"><div class="ml" data-tip="Órdenes recibidas en los últimos 30 días. Debajo aparece cuántas están completadas (fulfillment)"><div class="md" style="background:var(--g)"></div>Órdenes</div><div class="mv" id="sh-orders">—</div><div class="mdelta" id="sh-fulfilled" style="color:var(--m);font-size:11px">completadas</div></div>
      <div class="metric"><div class="ml" data-tip="Productos activos publicados en la tienda. Debajo aparece el número de clientes únicos"><div class="md" style="background:var(--b)"></div>Productos</div><div class="mv" id="sh-products">—</div><div class="mdelta" id="sh-customers" style="color:var(--m);font-size:11px">clientes</div></div>
      <div class="metric"><div class="ml" data-tip="Órdenes en estado pendiente que requieren acción. Debajo aparece las canceladas en el período"><div class="md" style="background:var(--y)"></div>Pendientes</div><div class="mv" id="sh-pending">—</div><div class="mdelta" id="sh-cancelled" style="color:var(--m);font-size:11px">canceladas</div></div>
    </div>

    <!-- Fulfillment semáforo -->
    <div id="sh-semaforo-wrap" style="display:none;margin-bottom:14px">
      <div style="display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--br);border-radius:8px;padding:10px 14px">
        <div id="sh-semaforo-dot" style="width:12px;height:12px;border-radius:50%;flex-shrink:0;background:var(--m)"></div>
        <div style="flex:1">
          <div style="font-size:11px;color:var(--m)">Tasa de fulfillment (30d)</div>
          <div style="font-size:14px;font-weight:700;color:var(--t)" id="sh-fulfillment-pct">—</div>
        </div>
        <div id="sh-semaforo-label" style="font-size:11px;padding:3px 10px;border-radius:10px;font-weight:500"></div>
        <div style="font-size:10px;color:var(--m)">Benchmark: &lt;60% rojo · 60-80% amarillo · &gt;80% verde</div>
      </div>
    </div>

    <div class="g2">
      <div class="card">
        <div class="chd"><div class="ctit">Órdenes recientes</div><span id="sh-shop-name" style="font-size:11px;color:var(--m)"></span></div>
        <div class="srow" style="font-size:10px;color:var(--m);padding-bottom:5px;border-bottom:1px solid var(--br)">
          <div style="width:55px">Orden</div><div style="flex:1">Fecha</div><div style="min-width:64px;text-align:right">Total</div><div style="min-width:70px;text-align:right">Estado</div>
        </div>
        <div id="sh-orders-list"><div style="text-align:center;color:var(--m);padding:20px;font-size:12px">Selecciona un cliente con Shopify</div></div>
      </div>
      <div class="card">
        <div class="chd"><div class="ctit">Stock bajo</div><span style="font-size:11px;color:var(--y)">≤ 5 unidades</span></div>
        <div id="sh-lowstock-list"><div style="text-align:center;color:var(--m);padding:20px;font-size:12px">Sin alertas</div></div>
      </div>
    </div>

    <div class="g2" style="margin-top:12px">
      <div class="card">
        <div class="chd"><div class="ctit">Top 5 productos</div><span style="font-size:11px;color:var(--m)">por ingresos 30d</span></div>
        <div id="sh-top-products"><div style="text-align:center;color:var(--m);padding:20px;font-size:12px">Sin datos</div></div>
      </div>
      <div class="card">
        <div class="chd"><div class="ctit">Carritos abandonados</div><span id="sh-abandoned-badge" style="font-size:11px;color:var(--y)">30d</span></div>
        <div id="sh-abandoned-list"><div style="text-align:center;color:var(--m);padding:20px;font-size:12px">Sin datos</div></div>
      </div>
    </div>

    <div style="margin-top:12px">
      <button data-click="loadShopifyData|__client|true" style="padding:6px 14px;border-radius:6px;font-size:12px;background:rgba(150,191,77,.15);border:1px solid rgba(150,191,77,.3);color:#96bf4d;cursor:pointer;font-family:var(--fb)">↻ Actualizar datos</button>
    </div>
  </div>

</div>
<?php endif ?>
