<!-- ===== SEO ===== -->
<div class="page" id="page-seo">
<?php
if(!function_exists("dm_render_connection_card")) require_once __DIR__ . "/../helpers/connection_card.php";
$_cc_id = (int)($defaultClient !== "all" ? $defaultClient : 0);
if ($_cc_id > 0)
dm_render_connection_card($_cc_id, 'gsc', [
    'label'     => 'Google Search Console',
    'icon'      => '◐',
    'color'     => '#34a853',
    'card_id'   => 'gsc',
    'required'  => ['domain','refresh_token'],
    'action'    => 'oauth',
    'oauth_url' => '/supercerebro/api/google-auth.php?scope=gsc',
    'fields'    => [],
]);?>

  <div class="ph"><div><div class="pt">SEO</div><div class="ps">Google Search Console · Core Web Vitals · Sitemaps · Contenido</div></div></div>

  <!-- CONTEXTO -->
  <div class="ctx-block">
    <div class="ctx-hd">
      <div class="ctx-icon">🧠</div>
      <div><div class="ctx-title">Contexto del negocio</div><div class="ctx-sub">Define el sitio, keywords objetivo y audiencia para optimizar el contenido SEO</div></div>
    </div>
    <textarea class="ctx-ta" id="seo-ctx" placeholder="Ejemplo: Clínica dental en Medellín. Keywords: implantes dentales, ortodoncia invisible. URL: sanadent.com. CMS: WordPress. Público: adultos 25-55 años..."></textarea>
    <div style="display:flex;align-items:center">
      <button class="ctx-save" data-click="saveCtx|seo">Guardar contexto</button>
      <button class="ctx-save" data-click="clearCtx|seo" style="background:var(--bg3);border:1px solid var(--br2);color:var(--m);margin-left:6px">Limpiar</button>
      <span class="ctx-saved" id="ctx-saved-seo">✓ Guardado</span>
    </div>
  </div>

  <!-- TABS SEO -->
  <div style="display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap;border-bottom:1px solid var(--br);padding-bottom:0">
    <button class="seo-tab active" data-click="switchSEOTab|rendimiento" id="seo-tab-rendimiento" style="padding:8px 14px;font-size:12px;font-weight:600;border:none;background:none;cursor:pointer;color:var(--t);border-bottom:2px solid var(--red);font-family:var(--fb)">📊 Rendimiento</button>
    <button class="seo-tab" data-click="switchSEOTab|oportunidades" id="seo-tab-oportunidades" style="padding:8px 14px;font-size:12px;font-weight:600;border:none;background:none;cursor:pointer;color:var(--m);border-bottom:2px solid transparent;font-family:var(--fb)">🎯 Oportunidades</button>
    <button class="seo-tab" data-click="switchSEOTab|cobertura" id="seo-tab-cobertura" style="padding:8px 14px;font-size:12px;font-weight:600;border:none;background:none;cursor:pointer;color:var(--m);border-bottom:2px solid transparent;font-family:var(--fb)">📋 Cobertura</button>
    <button class="seo-tab" data-click="switchSEOTab|sitemaps" id="seo-tab-sitemaps" style="padding:8px 14px;font-size:12px;font-weight:600;border:none;background:none;cursor:pointer;color:var(--m);border-bottom:2px solid transparent;font-family:var(--fb)">🗺️ Sitemaps</button>
    <button class="seo-tab" data-click="switchSEOTab|cwv" id="seo-tab-cwv" style="padding:8px 14px;font-size:12px;font-weight:600;border:none;background:none;cursor:pointer;color:var(--m);border-bottom:2px solid transparent;font-family:var(--fb)">⚡ Core Web Vitals</button>
    <button class="seo-tab" data-click="switchSEOTab|schema" id="seo-tab-schema" style="padding:8px 14px;font-size:12px;font-weight:600;border:none;background:none;cursor:pointer;color:var(--m);border-bottom:2px solid transparent;font-family:var(--fb)">🏷️ Schema</button>
    <button class="seo-tab" data-click="switchSEOTab|contenido" id="seo-tab-contenido" style="padding:8px 14px;font-size:12px;font-weight:600;border:none;background:none;cursor:pointer;color:var(--m);border-bottom:2px solid transparent;font-family:var(--fb)">✍️ Contenido</button>
  </div>

  <!-- ══════════════════════════════════════════════════════ -->
  <!-- TAB 1: RENDIMIENTO -->
  <!-- ══════════════════════════════════════════════════════ -->
  <div id="seo-panel-rendimiento">

    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px">
      <div style="display:flex;gap:6px;align-items:center">
        <select id="gsc-period-sel" data-change="_scLoadWithClientVal|loadGSCData|__el" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:5px 10px;font-size:12px;color:var(--t);font-family:var(--fb)">
          <option value="7d">7 días</option>
          <option value="30d" selected>30 días</option>
          <option value="90d">90 días</option>
        </select>
        <!-- Device filter -->
        <div style="display:flex;gap:2px;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:2px">
          <button data-click="seoDeviceFilter|all" id="gsc-dev-all" class="db active" style="font-size:11px;padding:3px 8px">Todos</button>
          <button data-click="seoDeviceFilter|mobile" id="gsc-dev-mobile" class="db" style="font-size:11px;padding:3px 8px">📱</button>
          <button data-click="seoDeviceFilter|desktop" id="gsc-dev-desktop" class="db" style="font-size:11px;padding:3px 8px">🖥</button>
        </div>
      </div>
      <button data-click="_scLoadGSCWithSel" style="padding:5px 10px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">↻ Actualizar</button>
    </div>

    <div id="gsc-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 el dominio de Google Search Console en este cliente (Clientes → pestaña Search Console).
    </div>

    <!-- Métricas row 1: principales -->
    <div class="metrics" style="margin-bottom:8px">
      <div class="metric">
        <div class="ml" data-tip="Keywords donde apareces en posición 1-3 de Google. Son las más valiosas — capturan +30% de clics. Objetivo: aumentar este número cada mes."><div class="md" style="background:var(--g)"></div>TOP 3</div>
        <div class="mv" id="gsc-top3">—</div>
        <div class="mdelta" id="gsc-top3-d" style="color:var(--m);font-size:11px">keywords</div>
      </div>
      <div class="metric">
        <div class="ml" data-tip="Keywords en la primera página de Google (posiciones 1-10). El 95% de usuarios no pasa de la primera página. Objetivo: mover keywords de TOP 10 al TOP 3."><div class="md" style="background:var(--b)"></div>TOP 10</div>
        <div class="mv" id="gsc-top10">—</div>
        <div class="mdelta" id="gsc-top10-d" style="color:var(--m);font-size:11px">keywords</div>
      </div>
      <div class="metric">
        <div class="ml" data-tip="Clics orgánicos totales desde Google Search en el período. Cada clic es una visita real gratuita. Delta muestra cambio vs período anterior."><div class="md" style="background:var(--y)"></div>Clics</div>
        <div class="mv" id="gsc-clicks">—</div>
        <div class="mdelta" id="gsc-clicks-delta" style="font-size:11px">vs anterior</div>
      </div>
      <div class="metric">
        <div class="ml" data-tip="Veces que tu sitio apareció en resultados de Google (aunque no hagan clic). Alta = buena presencia. Si impresiones suben pero clics no, el problema es el título/descripción."><div class="md" style="background:var(--p)"></div>Impresiones</div>
        <div class="mv" id="gsc-imp-main">—</div>
        <div class="mdelta" id="gsc-imp-delta" style="font-size:11px">vs anterior</div>
      </div>
      <div class="metric">
        <div class="ml" data-tip="Click-Through Rate: % de veces que alguien hizo clic al ver tu sitio. Benchmark SEO: 2-5% es normal, >5% excelente. Si es bajo, mejora el meta title y description."><div class="md" style="background:var(--red)"></div>CTR</div>
        <div class="mv" id="gsc-ctr-main">—</div>
        <div class="mdelta" id="gsc-ctr-delta" style="font-size:11px">vs anterior</div>
      </div>
      <div class="metric">
        <div class="ml" data-tip="Posición promedio en Google. Menor número = mejor. <3 = excelente, 4-10 = primera página, >10 = segunda página o más. Delta positivo = mejoró posición."><div class="md" style="background:var(--y)"></div>Posición</div>
        <div class="mv" id="gsc-pos">—</div>
        <div class="mdelta" id="gsc-pos-delta" style="font-size:11px">vs anterior</div>
      </div>
    </div>

    <!-- Dispositivos -->
    <div id="gsc-devices-row" style="display:none;margin-bottom:14px;background:var(--bg2);border-radius:10px;padding:10px 14px">
      <div style="font-size:10px;color:var(--m);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px">Desglose por dispositivo</div>
      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px" id="gsc-devices-grid"></div>
    </div>

    <!-- Países -->
    <div id="gsc-countries-row" style="display:none;margin-bottom:14px;background:var(--bg2);border-radius:10px;padding:10px 14px">
      <div style="font-size:10px;color:var(--m);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px">Top países por clics</div>
      <div id="gsc-countries-list" style="display:flex;flex-direction:column;gap:4px"></div>
    </div>

    <div class="g2">
      <!-- Keywords -->
      <div class="card">
        <div class="chd">
          <div class="ctit">Top keywords <span style="font-size:11px;color:var(--m)" id="gsc-kw-sub"></span></div>
          <button class="cact" data-click="exportGSCKeywords">Exportar →</button>
        </div>
        <div class="srow" style="font-size:10px;color:var(--m);padding-bottom:5px;border-bottom:1px solid var(--br)">
          <div style="width:36px" data-tip="Posición promedio en Google. <3 excelente (verde), 4-10 primera página (azul), >10 segunda página+">Pos.</div>
          <div style="flex:1" data-tip="Término de búsqueda orgánica desde Google Search Console">Keyword</div>
          <div style="min-width:52px;text-align:right" data-tip="Clics reales en el período seleccionado">Clics</div>
          <div style="min-width:56px;text-align:right" data-tip="Impresiones: cuántas veces apareció en resultados">Imp.</div>
          <div style="min-width:42px;text-align:right" data-tip="CTR: % de impresiones que resultaron en clics. >5% = muy bueno">CTR</div>
        </div>
        <div id="gsc-keywords-list"><div style="text-align:center;color:var(--m);padding:20px;font-size:12px">Selecciona un cliente con GSC configurado</div></div>
      </div>
      <!-- Chart -->
      <div class="card">
        <div class="chd"><div class="ctit">Tráfico orgánico</div><span id="gsc-trend-sub" style="font-size:11px;color:var(--m)"></span></div>
        <div class="cw"><canvas id="chartSEO"></canvas></div>
      </div>
    </div>

    <!-- Top páginas -->
    <div class="card" style="margin-top:14px">
      <div class="chd"><div class="ctit">Top páginas <span style="font-size:11px;color:var(--m)" id="gsc-pages-sub"></span></div></div>
      <div class="srow" style="font-size:10px;color:var(--m);padding-bottom:5px;border-bottom:1px solid var(--br)">
        <div style="flex:1" data-tip="URL de la página que recibe tráfico orgánico">Página</div>
        <div style="min-width:56px;text-align:right" data-tip="Clics orgánicos totales a esta URL">Clics</div>
        <div style="min-width:60px;text-align:right" data-tip="Impresiones en Google Search">Imp.</div>
        <div style="min-width:42px;text-align:right" data-tip="CTR de esta página. Bajo CTR = mejorar meta title/description">CTR</div>
        <div style="min-width:44px;text-align:right" data-tip="Posición promedio de esta URL en Google">Pos.</div>
      </div>
      <div id="gsc-pages-list"><div style="text-align:center;color:var(--m);padding:20px;font-size:12px">Cargando páginas...</div></div>
    </div>

    <!-- Rank tracking chart -->
    <div class="card" style="margin-top:14px" id="rank-history-card">
      <div class="chd">
        <div>
          <div class="ctit">📈 Historial posición promedio</div>
          <div style="font-size:11px;color:var(--m);margin-top:2px" data-tip="Posición promedio diaria registrada por el cron. Menor valor = mejor. El cron corre a las 2AM cada día.">Evolución diaria — menor valor es mejor posición</div>
        </div>
        <div style="display:flex;gap:4px">
          <button data-click="loadRankHistory|30d" id="rh-btn-30" class="db active">30d</button>
          <button data-click="loadRankHistory|60d" id="rh-btn-60" class="db">60d</button>
          <button data-click="loadRankHistory|90d" id="rh-btn-90" class="db">90d</button>
        </div>
      </div>
      <div id="rank-history-loading" style="text-align:center;color:var(--m);padding:20px;font-size:12px">Cargando historial de posiciones...</div>
      <div id="rank-history-empty" style="display:none;text-align:center;color:var(--m);padding:20px;font-size:12px">Sin historial aún. El cron registra datos diariamente a las 2AM.</div>
      <div id="rank-history-wrap" style="display:none;position:relative;height:180px"><canvas id="chartRankPos"></canvas></div>
    </div>

    <!-- AVI SEO -->
    <div id="avi-seo-panel" class="avi" style="display:none;flex-direction:column;gap:10px;margin-top:14px">
      <div class="avi-hd">
        <div class="avi-orb">✦</div>
        <div>
          <div class="avi-name">AVI Agente · SEO</div>
          <div class="avi-sub" id="avi-seo-sub">Análisis profundo con datos reales de Google Search Console</div>
        </div>
      </div>
      <div style="display:flex;gap:6px;flex-wrap:wrap">
        <button class="db" data-click="aviAgentSEOQuick|Analiza mis datos de GSC. ¿Qué keywords están en posiciones 4-10 con muchas impresiones pero bajo CTR? Dame las 5 oportunidades más rápidas de subir al TOP 3.">🎯 Oportunidades rápidas</button>
        <button class="db" data-click="aviAgentSEOQuick|¿Qué keywords importantes han caído más de 2 posiciones? Identifica cuáles están en riesgo y dame un plan concreto de recuperación por keyword.">📉 Keywords en riesgo</button>
        <button class="db" data-click="aviAgentSEOQuick|Basándote en los datos de GSC, dame las 5 acciones de SEO on-page más importantes para mejorar posiciones. Sé específico: páginas, meta tags, estructura de contenido.">⚡ Plan on-page</button>
        <button class="db" data-click="aviAgentSEOQuick|¿Cuáles son las keywords con mejor CTR pero pocas impresiones? ¿Cómo puedo escalar el tráfico? Dame un plan de contenido para los próximos 30 días.">📝 Plan de contenido</button>
        <button class="db" data-click="aviAgentSEOQuick|Dame un diagnóstico completo del SEO: fortalezas, debilidades, palabras clave que más generan clics vs impresiones, CTR promedio vs benchmark, y las 3 acciones prioritarias.">📊 Diagnóstico completo</button>
      </div>
      <div class="avi-row">
        <input class="avi-in" id="avi-seo-q" placeholder="Ej: ¿qué keywords debo optimizar primero? ¿cómo mejorar el CTR?" onkeydown="if(event.key==='Enter')aviAgentSEOSend()">
        <button class="avi-send" data-click="aviAgentSEOSend">Analizar →</button>
      </div>
      <div class="avi-resp" id="avi-agent-resp-seo" style="display:none;white-space:normal"></div>
    </div>
  </div><!-- /seo-panel-rendimiento -->

  <!-- ══════════════════════════════════════════════════════ -->
  <!-- TAB 2: OPORTUNIDADES -->
  <!-- ══════════════════════════════════════════════════════ -->
  <div id="seo-panel-oportunidades" style="display:none">
    <div id="gsc-opps-loading" style="text-align:center;color:var(--m);padding:30px;font-size:12px">Carga los datos de Rendimiento primero para ver oportunidades.</div>

    <!-- Quick wins -->
    <div class="card" id="gsc-qw-card" style="display:none">
      <div class="chd">
        <div>
          <div class="ctit" style="color:var(--g)">🎯 Quick Wins — Posición 4-20</div>
          <div style="font-size:11px;color:var(--m);margin-top:2px">Keywords casi en primera página. Con ajustes de contenido y on-page pueden subir al TOP 3 rápido.</div>
        </div>
      </div>
      <div class="srow" style="font-size:10px;color:var(--m);padding-bottom:5px;border-bottom:1px solid var(--br)">
        <div style="width:44px" data-tip="Posición actual. Objetivo: llevarla al TOP 3">Pos.</div>
        <div style="flex:1">Keyword</div>
        <div style="min-width:60px;text-align:right" data-tip="Impresiones — cuántas personas la ven. Más impresiones = más oportunidad">Imp.</div>
        <div style="min-width:42px;text-align:right" data-tip="Clics actuales que se están perdiendo">Clics</div>
        <div style="min-width:42px;text-align:right" data-tip="CTR actual — si está bajo, el título no atrae">CTR</div>
      </div>
      <div id="gsc-quick-wins-list"></div>
    </div>

    <!-- CTR bajas -->
    <div class="card" style="margin-top:14px;display:none" id="gsc-lowctr-card">
      <div class="chd">
        <div>
          <div class="ctit" style="color:var(--y)">📢 CTR Bajo — Títulos sin impacto</div>
          <div style="font-size:11px;color:var(--m);margin-top:2px">Estas keywords generan muchas impresiones pero poca gente hace clic. El problema es el meta title o description — mejóralos con AVI.</div>
        </div>
      </div>
      <div class="srow" style="font-size:10px;color:var(--m);padding-bottom:5px;border-bottom:1px solid var(--br)">
        <div style="width:44px">Pos.</div>
        <div style="flex:1">Keyword</div>
        <div style="min-width:60px;text-align:right" data-tip="Impresiones — potencial de tráfico perdido">Imp.</div>
        <div style="min-width:42px;text-align:right" data-tip="CTR actual — debería ser >3% para estar en primera página">CTR</div>
        <div style="min-width:60px;text-align:right" data-tip="Clics estimados si el CTR subiera a 5%">Pot. clics</div>
      </div>
      <div id="gsc-low-ctr-list"></div>
    </div>

    <!-- Sin clics -->
    <div class="card" style="margin-top:14px;display:none" id="gsc-noclicks-card">
      <div class="chd">
        <div>
          <div class="ctit" style="color:var(--red)">👻 Sin clics — Visibilidad sin tráfico</div>
          <div style="font-size:11px;color:var(--m);margin-top:2px">Apareces en Google pero nadie entra. Pueden ser featured snippets o títulos no descriptivos.</div>
        </div>
      </div>
      <div class="srow" style="font-size:10px;color:var(--m);padding-bottom:5px;border-bottom:1px solid var(--br)">
        <div style="width:44px">Pos.</div>
        <div style="flex:1">Keyword</div>
        <div style="min-width:60px;text-align:right">Imp.</div>
        <div style="min-width:42px;text-align:right">Clics</div>
      </div>
      <div id="gsc-no-clicks-list"></div>
    </div>

    <!-- Keyword gap vs competencia -->
    <div class="card" style="margin-top:14px">
      <div class="chd">
        <div>
          <div class="ctit" style="color:var(--b)">🔍 Keyword gap vs competencia</div>
          <div style="font-size:11px;color:var(--m);margin-top:2px">Descubre keywords que tiene el competidor y tú no. AVI analiza tu perfil GSC vs el dominio rival.</div>
        </div>
      </div>
      <div class="avi-row" style="margin-bottom:10px">
        <input class="avi-in" id="kw-gap-competitor" placeholder="Dominio del competidor (ej: competidor.com)">
        <button class="avi-send" data-click="runKeywordGap">✦ Analizar gap →</button>
      </div>
      <div class="avi-resp" id="kw-gap-resp" style="display:none"></div>
    </div>

    <!-- AVI oportunidades -->
    <div class="card" style="margin-top:14px">
      <div class="chd"><div class="ctit" style="color:var(--p)">✦ AVI — Plan de acción por oportunidades</div></div>
      <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px">
        <button class="db" data-click="aviAgentSEOQuick|Analiza las keywords en posición 4-20 de GSC. Para cada una dame: acción específica on-page, qué cambiar en el título/descripción, y si necesita más contenido. Prioriza las 5 más importantes.|avi-opps-resp">✦ Optimizar Quick Wins</button>
        <button class="db" data-click="aviAgentSEOQuick|Las keywords con CTR bajo pero muchas impresiones necesitan mejores meta titles. Dame 5 propuestas de nuevos meta titles optimizados para CTR, usando los datos reales de GSC.|avi-opps-resp">📢 Mejorar CTR</button>
        <button class="db" data-click="aviAgentSEOQuick|Basándote en las keywords sin clics de GSC, ¿cuáles son featured snippets o tienen intención informacional? Dame un plan para convertir esas impresiones en tráfico real.|avi-opps-resp">👻 Convertir impresiones</button>
      </div>
      <div class="avi-resp" id="avi-opps-resp" style="display:none"></div>
    </div>
  </div><!-- /seo-panel-oportunidades -->

  <!-- ══════════════════════════════════════════════════════ -->
  <!-- TAB: COBERTURA GSC -->
  <!-- ══════════════════════════════════════════════════════ -->
  <div id="seo-panel-cobertura" style="display:none">

    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
      <div style="font-size:13px;font-weight:600">Estado de indexación</div>
      <button data-click="loadGSCCobertura|true" 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)">↻ Actualizar</button>
    </div>

    <div id="cob-loading" style="text-align:center;color:var(--m);padding:30px;font-size:12px">Cargando cobertura GSC...</div>
    <div id="cob-error" style="display:none;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);border-radius:8px;padding:12px 16px;font-size:13px;color:#f87171;margin-bottom:14px"></div>

    <div id="cob-data" style="display:none">
      <!-- Cards métricas -->
      <div class="metrics" style="grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px">
        <div class="metric">
          <div class="ml"><div class="md" style="background:var(--b)"></div>Enviadas</div>
          <div class="mv" id="cob-submitted">—</div>
          <div style="font-size:11px;color:var(--m)">URLs en sitemap</div>
        </div>
        <div class="metric">
          <div class="ml"><div class="md" style="background:var(--g)"></div>Indexadas</div>
          <div class="mv" id="cob-indexed">—</div>
          <div style="font-size:11px;color:var(--m)">En Google</div>
        </div>
        <div class="metric">
          <div class="ml"><div class="md" style="background:var(--y)"></div>No indexadas</div>
          <div class="mv" id="cob-not-indexed">—</div>
          <div style="font-size:11px;color:var(--m)">Pendientes</div>
        </div>
        <div class="metric">
          <div class="ml"><div class="md" style="background:var(--red)"></div>Errores</div>
          <div class="mv" id="cob-errors">—</div>
          <div style="font-size:11px;color:var(--m)">En sitemaps</div>
        </div>
      </div>

      <!-- Barra de progreso indexación -->
      <div class="card" style="margin-bottom:14px">
        <div style="font-size:11px;color:var(--m);margin-bottom:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px">Cobertura de indexación</div>
        <div style="background:var(--bg2);border-radius:6px;height:10px;overflow:hidden;margin-bottom:6px">
          <div id="cob-progress-bar" style="height:100%;background:var(--g);border-radius:6px;transition:width .5s;width:0%"></div>
        </div>
        <div id="cob-progress-label" style="font-size:12px;color:var(--m)">Calculando...</div>
      </div>

      <!-- Tabla de sitemaps -->
      <div class="card">
        <div class="chd"><div class="ctit">Detalle por sitemap</div></div>
        <div style="overflow-x:auto">
          <table class="tbl" style="width:100%">
            <thead><tr>
              <th>Sitemap</th><th>Enviadas</th><th>Indexadas</th><th>No indexadas</th><th>Errores</th><th>Última revisión</th>
            </tr></thead>
            <tbody id="cob-sitemaps-body"></tbody>
          </table>
        </div>
      </div>

      <!-- AVI análisis cobertura -->
      <div class="card" style="margin-top:14px">
        <div class="chd"><div class="ctit" style="color:var(--p)">✦ AVI — Diagnóstico de cobertura</div></div>
        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px">
          <button class="db" data-click="aviAgentSEOQuick|Analiza la cobertura de indexación GSC: tenemos páginas enviadas en sitemap pero no indexadas. ¿Cuáles son las razones más comunes y cómo resolverlas? Dame un plan de acción concreto.|avi-cob-resp">✦ Diagnosticar no indexadas</button>
          <button class="db" data-click="aviAgentSEOQuick|¿Cómo mejorar la tasa de indexación en Google? Dame estrategias concretas: estructura de links internos, velocidad de crawl, calidad de contenido y uso correcto del sitemap.|avi-cob-resp">📈 Mejorar indexación</button>
        </div>
        <div class="avi-resp" id="avi-cob-resp" style="display:none"></div>
      </div>
    </div>
  </div><!-- /seo-panel-cobertura -->

  <!-- ══════════════════════════════════════════════════════ -->
  <!-- TAB 3: SITEMAPS -->
  <!-- ══════════════════════════════════════════════════════ -->
  <div id="seo-panel-sitemaps" style="display:none">

    <!-- Sitemaps en GSC -->
    <div class="card">
      <div class="chd">
        <div>
          <div class="ctit">🗺️ Sitemaps en Google Search Console</div>
          <div style="font-size:11px;color:var(--m);margin-top:2px" data-tip="Los sitemaps le dicen a Google qué páginas indexar. Un sitemap actualizado acelera la indexación de nuevo contenido.">Sitemaps registrados y su estado de indexación</div>
        </div>
        <div style="display:flex;gap:6px">
          <button class="cact" data-click="loadSitemapList">↻ Actualizar</button>
          <button data-click="submitSitemap" style="padding:5px 12px;border-radius:6px;font-size:12px;background:rgba(34,201,122,.12);border:1px solid rgba(34,201,122,.25);color:var(--g);cursor:pointer;font-family:var(--fb);font-weight:600">📤 Enviar a Google</button>
        </div>
      </div>
      <div id="sitemap-gsc-list"><div style="text-align:center;color:var(--m);padding:20px;font-size:12px">Clic en "Actualizar" para cargar los sitemaps</div></div>
    </div>

    <!-- URLs del sitemap -->
    <div class="card" style="margin-top:14px">
      <div class="chd">
        <div>
          <div class="ctit">📄 URLs en sitemap.xml</div>
          <div style="font-size:11px;color:var(--m);margin-top:2px">Páginas declaradas en el sitemap del sitio</div>
        </div>
        <button class="cact" data-click="loadSitemapUrls">Leer sitemap.xml</button>
      </div>
      <div id="sitemap-urls-list"><div style="text-align:center;color:var(--m);padding:20px;font-size:12px">Clic en "Leer sitemap.xml" para ver las URLs</div></div>
    </div>

    <!-- AVI Sitemaps -->
    <div class="card" style="margin-top:14px">
      <div class="chd"><div class="ctit" style="color:var(--p)">✦ AVI — Optimización de sitemap</div></div>
      <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px">
        <button class="db" data-click="seoTool|seo-sitemap|🗺️ Sitemap XML">🗺️ Generar sitemap XML</button>
        <button class="db" data-click="aviAgentSEOQuick|Analiza la estructura del sitemap y dame recomendaciones: ¿qué páginas deberían estar y no están? ¿Hay páginas que no deberían estar en el sitemap? ¿Cómo mejorar la prioridad y changefreq?|sitemap-avi-resp">✦ Auditar estructura</button>
      </div>
      <div class="avi-resp" id="sitemap-avi-resp" style="display:none"></div>
    </div>
  </div><!-- /seo-panel-sitemaps -->

  <!-- ══════════════════════════════════════════════════════ -->
  <!-- TAB 4: CORE WEB VITALS -->
  <!-- ══════════════════════════════════════════════════════ -->
  <div id="seo-panel-cwv" style="display:none">
    <div class="card">
      <div class="chd">
        <div class="ctit" style="color:var(--g)">⚡ Core Web Vitals</div>
        <div style="display:flex;gap:6px">
          <button id="cwv-btn-mobile" data-click="setCWVStrategy|mobile" class="db active">📱 Móvil</button>
          <button id="cwv-btn-desktop" data-click="setCWVStrategy|desktop" class="db">🖥 Escritorio</button>
        </div>
      </div>
      <div style="margin-bottom:12px;display:flex;gap:8px;align-items:center">
        <input id="cwv-url" class="avi-in" style="flex:1" placeholder="https://tucliente.com">
        <button class="avi-send" data-click="_scRunPageSpeedAuto">Analizar →</button>
      </div>

      <div id="cwv-loading" style="display:none;font-size:12px;color:var(--m);padding:12px 0;text-align:center">⚡ Analizando velocidad… puede tomar 15-30 segundos</div>
      <div id="cwv-error" style="display:none;font-size:12px;color:var(--red);padding:8px 0"></div>

      <div id="cwv-result" style="display:none">
        <!-- Score + field data banner -->
        <div style="display:flex;gap:12px;align-items:stretch;margin-bottom:14px;flex-wrap:wrap">
          <!-- Score circle -->
          <div style="background:var(--bg2);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:16px;flex:1;min-width:200px">
            <div style="text-align:center;flex-shrink:0">
              <div id="cwv-score-circle" style="width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;border:5px solid">—</div>
              <div style="font-size:10px;color:var(--m);margin-top:5px">Performance</div>
            </div>
            <div>
              <div style="font-size:11px;color:var(--m);margin-bottom:4px" data-tip="Puntuación de 0-100 calculada por Lighthouse. >90 verde, 50-89 naranja, <50 rojo.">Score Lighthouse (lab)</div>
              <div id="cwv-score-label" style="font-size:13px;font-weight:700;color:var(--g)"></div>
              <div id="cwv-strategy-label" style="font-size:11px;color:var(--m);margin-top:2px"></div>
            </div>
          </div>
          <!-- Field data (CrUX) -->
          <div id="cwv-field-banner" style="background:var(--bg2);border-radius:12px;padding:14px 18px;flex:1;min-width:200px;display:none">
            <div style="font-size:10px;color:var(--m);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px" data-tip="Datos reales de usuarios de Chrome (CrUX). Más fiable que Lighthouse porque mide experiencia real, no simulada.">📡 Datos de campo reales (CrUX)</div>
            <div id="cwv-field-overall" style="font-size:13px;font-weight:700;margin-bottom:8px"></div>
            <div id="cwv-field-metrics" style="display:grid;grid-template-columns:1fr 1fr;gap:6px"></div>
          </div>
        </div>

        <!-- Métricas Lab (grid) -->
        <div style="font-size:10px;color:var(--m);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px">Métricas de laboratorio (Lighthouse)</div>
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-bottom:16px" id="cwv-metrics-grid"></div>

        <!-- Oportunidades -->
        <div id="cwv-opps" style="display:none;margin-bottom:14px">
          <div style="font-size:10px;font-weight:700;color:var(--m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px" data-tip="Acciones concretas que mejorarían el score. Ordenadas por impacto — la primera es la más importante.">Oportunidades de mejora (ordenadas por impacto)</div>
          <div id="cwv-opps-list" style="display:flex;flex-direction:column;gap:6px"></div>
        </div>

        <!-- Diagnósticos -->
        <div id="cwv-diags" style="display:none">
          <div style="font-size:10px;font-weight:700;color:var(--m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px">Diagnósticos adicionales</div>
          <div id="cwv-diags-list" style="display:flex;flex-direction:column;gap:4px"></div>
        </div>

        <!-- AVI análisis CWV -->
        <div style="margin-top:14px;border-top:1px solid var(--br);padding-top:12px">
          <button class="db" data-click="aviAgentSEOQuick|Analiza estos Core Web Vitals y dame un plan de acción concreto para mejorar el score de performance. Incluye: qué archivos optimizar, qué plugins/técnicas usar en WordPress, y en qué orden hacerlo para mayor impacto.|avi-cwv-resp">✦ AVI: Plan de mejora CWV</button>
          <div class="avi-resp" id="avi-cwv-resp" style="display:none;margin-top:10px"></div>
        </div>
      </div>
    </div>

    <!-- Historial CWV -->
    <div class="card" style="margin-top:14px">
      <div class="chd" style="flex-wrap:wrap;gap:8px">
        <div>
          <div class="ctit">📈 Historial Core Web Vitals</div>
          <div style="font-size:11px;color:var(--m)">Evolución del score en el tiempo — se guarda automáticamente en cada análisis</div>
        </div>
        <div style="display:flex;gap:6px;align-items:center">
          <button id="cwv-hist-mob" data-click="setCWVHistStrategy|mobile" class="db active" style="font-size:11px;padding:4px 10px">📱 Móvil</button>
          <button id="cwv-hist-dsk" data-click="setCWVHistStrategy|desktop" class="db" style="font-size:11px;padding:4px 10px">🖥 Escritorio</button>
        </div>
      </div>
      <!-- Chart -->
      <div id="cwv-chart-wrap" style="position:relative;height:200px;margin-bottom:14px;display:none">
        <canvas id="chartCWV"></canvas>
      </div>
      <div id="cwv-chart-empty" style="display:none;text-align:center;color:var(--m);padding:20px;font-size:12px">Sin historial para esta URL. Ejecuta más análisis para ver la evolución.</div>
      <!-- Table -->
      <div id="cwv-history-list" style="overflow-x:auto"><div style="text-align:center;color:var(--m);padding:20px;font-size:12px">Ejecuta un análisis para ver el historial</div></div>
    </div>
  </div><!-- /seo-panel-cwv -->

  <!-- ══════════════════════════════════════════════════════ -->
  <!-- TAB 5: SCHEMA -->
  <!-- ══════════════════════════════════════════════════════ -->
  <div id="seo-panel-schema" style="display:none">

    <!-- Herramientas SEO -->
    <div class="card">
      <div class="chd"><div class="ctit" style="color:var(--g)">⚡ Herramientas SEO</div></div>
      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px">
        <?php
        $seoTools=[
          ['🔍','Auditoría completa','Meta tags, velocidad, estructura, backlinks','seo-audit'],
          ['🤖','Optimizar robots.txt','Genera robots.txt optimizado para tu CMS','seo-robots'],
          ['🧱','Bloques de contenido','FAQs, comparativas, tablas, fragmentos destacados','seo-content'],
        ];
        foreach($seoTools as $t): ?>
        <div class="fmt-card" data-click="seoTool|<?= $t[3] ?>|<?= $t[0].' '.$t[1] ?>">
          <div class="fmt-name"><?= $t[0].' '.$t[1] ?></div>
          <div class="fmt-specs"><?= $t[2] ?></div>
        </div>
        <?php endforeach ?>
      </div>
      <div class="avi-row">
        <input class="avi-in" id="seo-tool-q" placeholder="URL del sitio, keyword objetivo, detalles adicionales...">
        <button class="avi-send" id="seo-tool-btn" data-click="runSEOTool" style="display:none">Ejecutar</button>
      </div>
      <div class="avi-resp" id="seo-tool-resp"></div>
    </div>

    <!-- SCHEMA AVANZADO -->
    <div class="card" style="margin-top:14px">
      <div class="chd">
        <div>
          <div class="ctit" style="color:var(--b)">📊 Datos estructurados (Schema.org)</div>
          <div style="font-size:11px;color:var(--m);margin-top:2px" data-tip="Schema.org ayuda a Google a entender el contenido de tu sitio y puede habilitar rich results (estrellas, precios, FAQs) en los resultados de búsqueda, aumentando el CTR hasta 30%.">Genera schema JSON-LD para rich results en Google — mejora CTR hasta 30%</div>
        </div>
      </div>
      <div class="avi-row" style="flex-wrap:wrap;gap:6px;margin-bottom:10px">
        <input class="avi-in" id="schema-url" placeholder="URL del sitio (ej: https://cliente.com)">
        <select id="schema-type" style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:9px 10px;font-size:12px;color:var(--t);font-family:var(--fb)">
          <option value="auto">Auto-detectar tipo</option>
          <option value="local">Negocio local</option>
          <option value="ecommerce">E-commerce</option>
          <option value="services">Servicios</option>
          <option value="blog">Blog / Revista</option>
          <option value="medical">Salud / Clínica</option>
          <option value="restaurant">Restaurante</option>
        </select>
        <button class="avi-send" data-click="runSchemaAdvanced">Generar Schema completo →</button>
      </div>
      <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px">
        <button class="db" data-click="seoQuickSchema|faq" data-tip="FAQ Schema: Muestra preguntas/respuestas directamente en los resultados de Google">❓ FAQ Schema</button>
        <button class="db" data-click="seoQuickSchema|local" data-tip="LocalBusiness: Dirección, teléfono, horarios y mapa en resultados locales">📍 LocalBusiness</button>
        <button class="db" data-click="seoQuickSchema|breadcrumb" data-tip="BreadcrumbList: Muestra la ruta de navegación en los resultados (Inicio > Categoría > Página)">🗺 BreadcrumbList</button>
        <button class="db" data-click="seoQuickSchema|product" data-tip="Product: Precio, disponibilidad y estrellas de productos en Google Shopping">🛍 Product</button>
        <button class="db" data-click="seoQuickSchema|review" data-tip="Review/Rating: Estrellas de valoración en los resultados de búsqueda">⭐ Review / Rating</button>
        <button class="db" data-click="seoQuickSchema|article" data-tip="Article: Para artículos de blog — mejora indexación y puede aparecer en Google News">📰 Article</button>
        <button class="db" data-click="seoQuickSchema|organization" data-tip="Organization: Información de la empresa, logo y redes sociales en el Knowledge Panel">🏢 Organization</button>
      </div>
      <div class="avi-resp" id="schema-adv-resp" style="position:relative"></div>
    </div>

    <!-- robots.txt -->
    <div class="card" style="margin-top:14px">
      <div class="chd">
        <div>
          <div class="ctit">🤖 Optimizar robots.txt</div>
          <div style="font-size:11px;color:var(--m);margin-top:2px" data-tip="robots.txt controla qué partes del sitio puede rastrear Google. Un robots.txt mal configurado puede bloquear páginas importantes o permitir que Google indexe contenido sin valor SEO.">Genera robots.txt optimizado para tu CMS — bloquea páginas sin valor SEO</div>
        </div>
      </div>
      <div class="avi-row" style="flex-wrap:wrap;gap:6px">
        <input class="avi-in" id="robots-url" placeholder="URL del sitio (ej: https://cliente.com)">
        <select id="robots-cms" style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:9px 10px;font-size:12px;color:var(--t);font-family:var(--fb)">
          <option value="wordpress">WordPress</option>
          <option value="shopify">Shopify</option>
          <option value="woocommerce">WooCommerce</option>
          <option value="prestashop">PrestaShop</option>
          <option value="custom">Personalizado / Otro</option>
        </select>
        <button class="avi-send" data-click="runRobotsOptimizer">Generar robots.txt →</button>
      </div>
      <div class="avi-resp" id="robots-resp" style="position:relative"></div>
    </div>
  </div><!-- /seo-panel-schema -->

  <!-- ══════════════════════════════════════════════════════ -->
  <!-- TAB 6: CONTENIDO -->
  <!-- ══════════════════════════════════════════════════════ -->
  <div id="seo-panel-contenido" style="display:none">

    <!-- Conexión WordPress -->
    <div class="card" style="margin-bottom:14px" id="wp-connect-card">
      <div class="chd">
        <div>
          <div class="ctit">🌐 WordPress — Publicación directa</div>
          <div style="font-size:11px;color:var(--m);margin-top:2px">Conecta WordPress para publicar artículos como borradores con un clic</div>
        </div>
        <div id="wp-status-badge" style="font-size:11px;padding:3px 10px;border-radius:10px;background:rgba(250,204,21,.1);border:1px solid rgba(250,204,21,.25);color:var(--y)">Sin configurar</div>
      </div>
      <div id="wp-connect-form" style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px">
        <div><div style="font-size:11px;color:var(--m);margin-bottom:4px">URL del sitio</div><input type="text" id="wp-url-seo" placeholder="https://cliente.com" class="ctx-ta" style="height:34px;padding:6px 10px;font-size:12px"></div>
        <div><div style="font-size:11px;color:var(--m);margin-bottom:4px">Usuario WordPress</div><input type="text" id="wp-user-seo" placeholder="admin" class="ctx-ta" style="height:34px;padding:6px 10px;font-size:12px"></div>
        <div style="grid-column:1/-1"><div style="font-size:11px;color:var(--m);margin-bottom:4px">Application Password <span style="opacity:.6">(WP Admin → Usuarios → Tu perfil → Application Passwords)</span></div><input type="password" id="wp-pass-seo" placeholder="xxxx xxxx xxxx xxxx xxxx xxxx" class="ctx-ta" style="height:34px;padding:6px 10px;font-size:12px"></div>
      </div>
      <div style="display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap">
        <button data-click="saveWPCredsSEO" style="padding:6px 16px;border-radius:7px;background:var(--g);border:none;color:#000;cursor:pointer;font-family:var(--fb);font-size:12px;font-weight:600">Guardar conexión</button>
        <button id="wp-test-btn" data-click="testWPConnection" style="padding:6px 14px;border-radius:7px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb);font-size:12px">Probar conexión</button>
        <span id="wp-save-status-seo" style="font-size:12px;color:var(--m)"></span>
      </div>
    </div>

    <!-- Conexión Shopify -->
    <div class="card" style="margin-bottom:14px" id="shopify-connect-card">
      <div class="chd">
        <div>
          <div class="ctit">🛍 Shopify — Publicación directa</div>
          <div style="font-size:11px;color:var(--m);margin-top:2px">Conecta Shopify para publicar artículos del blog con un clic</div>
        </div>
        <div id="shopify-status-badge" style="font-size:11px;padding:3px 10px;border-radius:10px;background:rgba(250,204,21,.1);border:1px solid rgba(250,204,21,.25);color:var(--y)">Sin configurar</div>
      </div>
      <div id="shopify-connect-form" style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px">
        <div><div style="font-size:11px;color:var(--m);margin-bottom:4px">Dominio de la tienda</div><input type="text" id="shopify-domain-seo" placeholder="mitienda.myshopify.com" class="ctx-ta" style="height:34px;padding:6px 10px;font-size:12px"></div>
        <div><div style="font-size:11px;color:var(--m);margin-bottom:4px">Admin API Access Token</div><input type="password" id="shopify-token-seo" placeholder="shpat_..." class="ctx-ta" style="height:34px;padding:6px 10px;font-size:12px"></div>
      </div>
      <div style="display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap">
        <button data-click="saveShopifyCredsSEO" style="padding:6px 16px;border-radius:7px;background:#96bf4d;border:none;color:#fff;cursor:pointer;font-family:var(--fb);font-size:12px;font-weight:600">Guardar conexión</button>
        <button id="shopify-test-btn" data-click="testShopifyConnection" style="padding:6px 14px;border-radius:7px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb);font-size:12px">Probar conexión</button>
        <span id="shopify-save-status-seo" style="font-size:12px;color:var(--m)"></span>
      </div>
    </div>

    <!-- Generador de artículos SEO -->
    <div class="card">
      <div class="chd">
        <div>
          <div class="ctit">📝 Generador de Artículos SEO</div>
          <div style="font-size:11px;color:var(--m);margin-top:2px">Artículos completos con H1, H2s, meta title, meta description, slug y FAQs — listos para publicar</div>
        </div>
        <span id="art-gsc-badge" style="font-size:11px;color:var(--g);display:none;font-weight:600">🔍 Usando keywords reales GSC</span>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px">
        <div>
          <div style="font-size:11px;color:var(--m);margin-bottom:4px" data-tip="Keyword principal que debe aparecer en H1, URL, meta title y primeros párrafos">Keyword principal *</div>
          <input id="art-keyword" class="ctx-ta" style="height:36px;padding:8px 10px" placeholder="Ej: clínica dental Medellín">
        </div>
        <div>
          <div style="font-size:11px;color:var(--m);margin-bottom:4px" data-tip="El tipo define la estructura del artículo — informativo tiene definiciones y explicaciones, landing se enfoca en conversión">Tipo de contenido</div>
          <select id="art-type" style="width:100%;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:8px 10px;font-size:12px;color:var(--t);font-family:var(--fb)">
            <option value="article">Artículo informativo</option>
            <option value="landing">Landing page / Copy de venta</option>
            <option value="faq">Preguntas frecuentes (FAQ)</option>
            <option value="comparison">Comparativa / Top N</option>
            <option value="guide">Guía completa / Tutorial</option>
            <option value="local">Contenido local SEO</option>
          </select>
        </div>
        <div>
          <div style="font-size:11px;color:var(--m);margin-bottom:4px" data-tip="El tono debe coincidir con la marca del cliente — profesional para B2B, amigable para consumidores">Tono</div>
          <select id="art-tone" style="width:100%;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:8px 10px;font-size:12px;color:var(--t);font-family:var(--fb)">
            <option value="professional">Profesional</option>
            <option value="friendly">Amigable / Cercano</option>
            <option value="persuasive">Persuasivo / Ventas</option>
            <option value="educational">Educativo / Experto</option>
          </select>
        </div>
        <div>
          <div style="font-size:11px;color:var(--m);margin-bottom:4px" data-tip="Google prefiere artículos de 1000+ palabras para topics competitivos. Artículos pilar de 2000+ palabras capturan más keywords long-tail.">Extensión</div>
          <select id="art-words" style="width:100%;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:8px 10px;font-size:12px;color:var(--t);font-family:var(--fb)">
            <option value="600">600 palabras (corto)</option>
            <option value="800" selected>800 palabras (estándar)</option>
            <option value="1200">1,200 palabras (largo)</option>
            <option value="2000">2,000 palabras (artículo pilar)</option>
          </select>
        </div>
      </div>
      <div style="margin-bottom:10px">
        <div style="font-size:11px;color:var(--m);margin-bottom:4px">Instrucciones adicionales</div>
        <textarea id="art-extra" class="ctx-ta" style="height:52px" placeholder="Ej: Mencionar precios. Incluir sección de tecnología. Agregar llamada a la acción para agendar cita."></textarea>
      </div>
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap">
        <button id="btn-gen-article" data-click="runSEOArticle" class="avi-send" style="padding:9px 22px;font-size:13px">✦ Generar artículo</button>
        <button class="db" data-click="runContentCalendar">📅 Plan 30 días desde GSC</button>
        <button class="db" data-click="runContentIdeas">💡 Ideas de contenido</button>
      </div>
      <div id="seo-article-resp" style="display:none">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
          <div style="font-size:11px;color:var(--m);font-weight:700;text-transform:uppercase;letter-spacing:.5px">Artículo generado</div>
          <div style="display:flex;gap:6px;flex-wrap:wrap">
            <button data-click="copySEOArticle" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:4px 10px;font-size:11px;color:var(--t);cursor:pointer;font-family:var(--fb)">📋 Copiar</button>
            <button data-click="downloadSEOArticle" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:4px 10px;font-size:11px;color:var(--t);cursor:pointer;font-family:var(--fb)">⬇ Descargar .md</button>
            <select id="wp-fmt-sel" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:3px 7px;font-size:11px;color:var(--m);font-family:var(--fb)" title="Formato de publicación">
              <option value="gutenberg">Bloques Gutenberg ✓</option>
              <option value="html">HTML clásico</option>
            </select>
            <button data-click="toggleWPPublishOpts" id="wp-opts-toggle" style="background:rgba(52,152,219,.08);border:1px solid rgba(52,152,219,.25);border-radius:6px;padding:4px 10px;font-size:11px;color:#3498db;cursor:pointer;font-family:var(--fb)">⚙ Opciones WP</button>
            <button id="wp-publish-btn" data-click="publishToWordPress" style="background:rgba(52,152,219,.12);border:1px solid rgba(52,152,219,.35);border-radius:6px;padding:4px 10px;font-size:11px;color:#3498db;cursor:pointer;font-family:var(--fb);font-weight:600">📤 Publicar en WordPress</button>
            <button data-click="toggleShopifyPublishOpts" id="shopify-opts-toggle" style="background:rgba(150,191,77,.08);border:1px solid rgba(150,191,77,.25);border-radius:6px;padding:4px 10px;font-size:11px;color:#96bf4d;cursor:pointer;font-family:var(--fb)">⚙ Opciones Shopify</button>
            <button id="shopify-publish-btn" data-click="publishToShopify" style="background:rgba(150,191,77,.12);border:1px solid rgba(150,191,77,.35);border-radius:6px;padding:4px 10px;font-size:11px;color:#96bf4d;cursor:pointer;font-family:var(--fb);font-weight:600">🛍 Publicar en Shopify</button>
          </div>
        </div>
        <!-- Panel opciones de publicación WP (oculto por defecto) -->
        <div id="wp-publish-opts" style="display:none;background:rgba(52,152,219,.06);border:1px solid rgba(52,152,219,.2);border-radius:8px;padding:12px;margin-bottom:10px">
          <div style="font-size:11px;font-weight:700;color:#3498db;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px">Opciones de publicación</div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
            <div>
              <label style="font-size:11px;color:var(--m);display:block;margin-bottom:3px">Slug URL <span style="color:var(--m);font-weight:400">(opcional)</span></label>
              <input id="wp-slug" type="text" placeholder="mi-articulo-seo" style="width:100%;box-sizing:border-box;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:5px 8px;font-size:12px;color:var(--t);font-family:var(--fb)">
            </div>
            <div>
              <label style="font-size:11px;color:var(--m);display:block;margin-bottom:3px">Categoría <span style="color:var(--m);font-weight:400">(opcional, crea si no existe)</span></label>
              <input id="wp-category" type="text" placeholder="SEO, Marketing..." style="width:100%;box-sizing:border-box;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:5px 8px;font-size:12px;color:var(--t);font-family:var(--fb)">
            </div>
            <div>
              <label style="font-size:11px;color:var(--m);display:block;margin-bottom:3px">Tags <span style="color:var(--m);font-weight:400">(separados por coma)</span></label>
              <input id="wp-tags" type="text" placeholder="seo, google, posicionamiento" style="width:100%;box-sizing:border-box;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:5px 8px;font-size:12px;color:var(--t);font-family:var(--fb)">
            </div>
            <div>
              <label style="font-size:11px;color:var(--m);display:block;margin-bottom:3px">Estado</label>
              <div style="display:flex;gap:6px;margin-top:4px">
                <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:12px;color:var(--t)">
                  <input type="radio" name="wp-status" value="draft" checked style="accent-color:#3498db"> Borrador
                </label>
                <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:12px;color:var(--t)">
                  <input type="radio" name="wp-status" value="publish" style="accent-color:#3498db"> Publicar ahora
                </label>
              </div>
            </div>
          </div>
        </div>
        <!-- Panel opciones de publicación Shopify (oculto por defecto) -->
        <div id="shopify-publish-opts" style="display:none;background:rgba(150,191,77,.06);border:1px solid rgba(150,191,77,.2);border-radius:8px;padding:12px;margin-bottom:10px">
          <div style="font-size:11px;font-weight:700;color:#96bf4d;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px">Opciones de publicación Shopify</div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
            <div>
              <label style="font-size:11px;color:var(--m);display:block;margin-bottom:3px">Blog de destino</label>
              <select id="shopify-blog-sel" style="width:100%;box-sizing:border-box;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:5px 8px;font-size:12px;color:var(--t);font-family:var(--fb)">
                <option value="">Cargando blogs...</option>
              </select>
            </div>
            <div>
              <label style="font-size:11px;color:var(--m);display:block;margin-bottom:3px">Handle (slug URL) <span style="font-weight:400;opacity:.7">(opcional)</span></label>
              <input id="shopify-handle" type="text" placeholder="mi-articulo-seo" style="width:100%;box-sizing:border-box;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:5px 8px;font-size:12px;color:var(--t);font-family:var(--fb)">
            </div>
            <div>
              <label style="font-size:11px;color:var(--m);display:block;margin-bottom:3px">Tags <span style="font-weight:400;opacity:.7">(separados por coma)</span></label>
              <input id="shopify-tags" type="text" placeholder="seo, marketing, tips" style="width:100%;box-sizing:border-box;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:5px 8px;font-size:12px;color:var(--t);font-family:var(--fb)">
            </div>
            <div>
              <label style="font-size:11px;color:var(--m);display:block;margin-bottom:3px">Estado</label>
              <div style="display:flex;gap:6px;margin-top:4px">
                <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:12px;color:var(--t)">
                  <input type="radio" name="shopify-status" value="draft" checked style="accent-color:#96bf4d"> Oculto
                </label>
                <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:12px;color:var(--t)">
                  <input type="radio" name="shopify-status" value="publish" style="accent-color:#96bf4d"> Publicar ahora
                </label>
              </div>
            </div>
          </div>
        </div>
        <div id="seo-article-rendered" class="avi-resp" style="display:block;max-height:600px;overflow-y:auto"></div>
        <div id="seo-article-kws" style="margin-top:10px;display:none">
          <div style="font-size:10px;color:var(--m);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px">Keywords GSC incorporadas</div>
          <div id="seo-article-kws-list" style="display:flex;flex-wrap:wrap;gap:4px"></div>
        </div>
      </div>
      <div class="avi-resp" id="content-auto-resp" style="position:relative"></div>
    </div>

    <!-- Próximamente: Calendario -->
    <div class="card" style="margin-top:14px;opacity:.7">
      <div class="chd">
        <div class="ctit">📅 Calendario de Contenidos</div>
        <span style="font-size:11px;background:rgba(155,127,244,.15);color:var(--p);padding:3px 8px;border-radius:4px;font-weight:600">Próximamente</span>
      </div>
      <div style="font-size:12px;color:var(--m);padding:16px 0">
        Planificación editorial visual: articulos programados por mes, estado (borrador/publicado), publicación directa en WordPress y cron automático de generación mensual.
      </div>
    </div>

  </div><!-- /seo-panel-contenido -->

</div><!-- /page-seo -->
