yazrkisvs3vvvsv33svrhetrjsvyvsvvyjsvsvs
tavsuysvssvvjvvyjyjkvsvqd
qfogsvvsvsegjdgdfgdskhgdksvqsvshdqsd
<!-- ===== SEO ===== -->
<div class="page" id="page-seo">
  <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" onclick="saveCtx('seo')">Guardar contexto</button>
      <button class="ctx-save" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onchange="loadGSCData(currentClient,this.value)" 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 onclick="seoDeviceFilter('all')" id="gsc-dev-all" class="db active" style="font-size:11px;padding:3px 8px">Todos</button>
          <button onclick="seoDeviceFilter('mobile')" id="gsc-dev-mobile" class="db" style="font-size:11px;padding:3px 8px">📱</button>
          <button onclick="seoDeviceFilter('desktop')" id="gsc-dev-desktop" class="db" style="font-size:11px;padding:3px 8px">🖥</button>
        </div>
      </div>
      <button onclick="loadGSCData(currentClient,document.getElementById('gsc-period-sel').value,true)" 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" onclick="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>

    <!-- 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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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>

    <!-- 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" onclick="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" onclick="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" onclick="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 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" onclick="loadSitemapList()">↻ Actualizar</button>
          <button onclick="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" onclick="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" onclick="seoTool('seo-sitemap','🗺️ Sitemap XML')">🗺️ Generar sitemap XML</button>
        <button class="db" onclick="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" onclick="setCWVStrategy('mobile')" class="db active">📱 Móvil</button>
          <button id="cwv-btn-desktop" onclick="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" onclick="runPageSpeed(document.getElementById('cwv-btn-mobile').classList.contains('active')?'mobile':'desktop')">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" onclick="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">
        <div class="ctit">📈 Historial Core Web Vitals</div>
        <div style="font-size:11px;color:var(--m)" data-tip="Cada análisis se guarda automáticamente. Permite ver si las mejoras implementadas tuvieron efecto.">Evolución del score en el tiempo</div>
      </div>
      <div id="cwv-history-list"><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" onclick="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" onclick="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" onclick="runSchemaAdvanced()">Generar Schema completo →</button>
      </div>
      <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px">
        <button class="db" onclick="seoQuickSchema('faq')" data-tip="FAQ Schema: Muestra preguntas/respuestas directamente en los resultados de Google">❓ FAQ Schema</button>
        <button class="db" onclick="seoQuickSchema('local')" data-tip="LocalBusiness: Dirección, teléfono, horarios y mapa en resultados locales">📍 LocalBusiness</button>
        <button class="db" onclick="seoQuickSchema('breadcrumb')" data-tip="BreadcrumbList: Muestra la ruta de navegación en los resultados (Inicio > Categoría > Página)">🗺 BreadcrumbList</button>
        <button class="db" onclick="seoQuickSchema('product')" data-tip="Product: Precio, disponibilidad y estrellas de productos en Google Shopping">🛍 Product</button>
        <button class="db" onclick="seoQuickSchema('review')" data-tip="Review/Rating: Estrellas de valoración en los resultados de búsqueda">⭐ Review / Rating</button>
        <button class="db" onclick="seoQuickSchema('article')" data-tip="Article: Para artículos de blog — mejora indexación y puede aparecer en Google News">📰 Article</button>
        <button class="db" onclick="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" onclick="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">

    <!-- 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 onclick="runSEOArticle()" class="avi-send" style="padding:9px 22px;font-size:13px">✦ Generar artículo</button>
        <button class="db" onclick="runContentCalendar()">📅 Plan 30 días desde GSC</button>
        <button class="db" onclick="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">
            <button onclick="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 onclick="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>
          </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 -->