
<!-- ===== GOOGLE ADS ===== -->
<?php if(_nav('google')): ?>
<div class="page" id="page-google">
<?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, 'google', [
    'label'     => 'Google Ads',
    'icon'      => '◎',
    'color'     => '#4285f4',
    'card_id'   => 'google',
    'required'  => ['customer_id'],
    'action'    => 'form',
    'fields'    => [
        ['key'=>'customer_id','label'=>'Customer ID','placeholder'=>'123-456-7890','required'=>true,'hint'=>'En Google Ads → Herramientas → Centro de cuentas'],
        ['key'=>'mcc_id','label'=>'MCC ID (si aplica)','placeholder'=>'987-654-3210','hint'=>'ID de la cuenta administradora (opcional)'],
    ],
]);?>

  <div class="ph">
    <div><div class="pt">Google Ads</div><div class="ps">Search · Display · Shopping · Partner Premier</div></div>
    <button data-click="openGCWizard" style="display:flex;align-items:center;gap:7px;padding:10px 20px;border-radius:9px;background:var(--red);border:none;color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--fh);letter-spacing:.2px;white-space:nowrap">✦ Nueva Campaña</button>
  </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 negocio, objetivos de conversión y mercado para que AVI optimice keywords y anuncios</div></div>
    </div>
    <textarea class="ctx-ta" id="google-ctx" placeholder="Ejemplo: Software hotelero para hoteles boutique en Colombia. Objetivo: demos y contactos comerciales. Principales competidores: Opera PMS, Sirev. Ciudades clave: Medellín, Bogotá, Cartagena. Ticket promedio: $2M COP/año..."></textarea>
    <div style="display:flex;align-items:center">
      <button class="ctx-save" data-click="saveCtx|google">Guardar contexto</button>
      <button class="ctx-save" data-click="clearCtx|google" style="background:var(--bg3);border:1px solid var(--br2);color:var(--m);margin-left:6px">Limpiar</button>
      <span class="ctx-saved" id="ctx-saved-google">✓ Guardado</span>
    </div>
  </div>

  <!-- Panel Customer ID por cliente (solo admin) -->
  <?php if($isAdmin): ?>
  <div id="g-customer-panel" style="background:var(--bg2);border:1px solid var(--br);border-radius:10px;padding:12px 18px;margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap">
    <div style="font-size:12px;color:var(--m);white-space:nowrap">Customer ID:</div>
    <input type="text" id="g-customer-id-input" placeholder="123-456-7890" style="flex:1;min-width:140px;max-width:180px;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--t)">
    <button data-click="saveGoogleCustomerId" style="padding:6px 14px;border-radius:6px;font-size:12px;background:var(--g);border:none;color:#000;cursor:pointer;font-family:var(--fb);font-weight:600">Guardar</button>
    <div id="g-customer-status" style="font-size:12px;color:var(--m)"></div>
    <div id="g-billing-alert" style="display:none;margin-left:auto;padding:5px 12px;border-radius:6px;background:rgba(248,113,113,.15);border:1px solid rgba(248,113,113,.3);font-size:12px;color:#f87171;cursor:pointer" data-click="_scGTabBilling">⚠ Problema de pago</div>
    <div id="g-conv-badge" style="display:none;padding:4px 11px;border-radius:10px;font-size:11px;font-weight:600;cursor:pointer" title="Conversiones activas en Google Ads" data-click="_scGTabCampaigns"></div>
  </div>
  <?php endif ?>

  <div id="g-error-msg" style="display:none;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);border-radius:8px;padding:12px 16px;margin-bottom:14px;font-size:12px;color:#f87171"></div>

  <!-- Sub-tabs Google Ads -->
  <div style="display:flex;gap:2px;margin-bottom:16px;flex-wrap:wrap;border-bottom:1px solid var(--br);padding-bottom:0">
    <button class="g-tab active" data-tab="overview"      data-click="switchGTab|overview|__el"      style="padding:8px 14px;font-size:12px;background:none;border:none;border-bottom:2px solid var(--red);color:var(--t);cursor:pointer;font-family:var(--fb)">Resumen</button>
    <button class="g-tab"        data-tab="campaigns"     data-click="switchGTab|campaigns|__el"     style="padding:8px 14px;font-size:12px;background:none;border:none;border-bottom:2px solid transparent;color:var(--m);cursor:pointer;font-family:var(--fb)">Campañas</button>
    <button class="g-tab"        data-tab="adgroups"      data-click="switchGTab|adgroups|__el"      style="padding:8px 14px;font-size:12px;background:none;border:none;border-bottom:2px solid transparent;color:var(--m);cursor:pointer;font-family:var(--fb)">Grupos</button>
    <button class="g-tab"        data-tab="ads"           data-click="switchGTab|ads|__el"           style="padding:8px 14px;font-size:12px;background:none;border:none;border-bottom:2px solid transparent;color:var(--m);cursor:pointer;font-family:var(--fb)">Anuncios</button>
    <button class="g-tab"        data-tab="keywords"      data-click="switchGTab|keywords|__el"      style="padding:8px 14px;font-size:12px;background:none;border:none;border-bottom:2px solid transparent;color:var(--m);cursor:pointer;font-family:var(--fb)">Keywords</button>
    <button class="g-tab"        data-tab="search_terms"  data-click="switchGTab|search_terms|__el"  style="padding:8px 14px;font-size:12px;background:none;border:none;border-bottom:2px solid transparent;color:var(--m);cursor:pointer;font-family:var(--fb)">Términos</button>
    <button class="g-tab"        data-tab="ai_negatives"  data-click="switchGTab|ai_negatives|__el"  style="padding:8px 14px;font-size:12px;background:none;border:none;border-bottom:2px solid transparent;color:var(--m);cursor:pointer;font-family:var(--fb)">Negativos IA <span id="g-daily-badge" style="display:none;background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 6px;margin-left:3px;vertical-align:middle">0</span></button>
    <button class="g-tab"        data-tab="auction"       data-click="switchGTab|auction|__el"       style="padding:8px 14px;font-size:12px;background:none;border:none;border-bottom:2px solid transparent;color:var(--m);cursor:pointer;font-family:var(--fb)">Competencia</button>
    <button class="g-tab"        data-tab="segments"      data-click="switchGTab|segments|__el"      style="padding:8px 14px;font-size:12px;background:none;border:none;border-bottom:2px solid transparent;color:var(--m);cursor:pointer;font-family:var(--fb)">Segmentos</button>
    <button class="g-tab"        data-tab="billing"       data-click="switchGTab|billing|__el"       style="padding:8px 14px;font-size:12px;background:none;border:none;border-bottom:2px solid transparent;color:var(--m);cursor:pointer;font-family:var(--fb)">Facturación</button>
    <button class="g-tab"        data-tab="ai_tools"      data-click="switchGTab|ai_tools|__el"      style="padding:8px 14px;font-size:12px;background:none;border:none;border-bottom:2px solid transparent;color:var(--m);cursor:pointer;font-family:var(--fb)">Herramientas IA</button>
    <div style="margin-left:auto;display:flex;gap:6px;align-items:center;padding-bottom:6px;flex-wrap:wrap">
      <button data-click="switchGPeriod|7d"  id="gp-7d"  class="stag" style="padding:4px 10px;font-size:11px">7d</button>
      <button data-click="switchGPeriod|14d" id="gp-14d" class="stag" style="padding:4px 10px;font-size:11px">14d</button>
      <button data-click="switchGPeriod|30d" id="gp-30d" class="stag active" style="padding:4px 10px;font-size:11px">30d</button>
      <button data-click="switchGPeriod|60d" id="gp-60d" class="stag" style="padding:4px 10px;font-size:11px">60d</button>
      <button data-click="switchGPeriod|90d" id="gp-90d" class="stag" style="padding:4px 10px;font-size:11px">90d</button>
      <div style="display:flex;gap:4px;align-items:center;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:3px 8px">
        <input type="date" id="gp-from" data-change="switchGCustom" style="background:none;border:none;font-size:11px;color:var(--t);font-family:var(--fb);outline:none;width:108px">
        <span style="font-size:11px;color:var(--m)">→</span>
        <input type="date" id="gp-to"   data-change="switchGCustom" style="background:none;border:none;font-size:11px;color:var(--t);font-family:var(--fb);outline:none;width:108px">
      </div>
      <select id="g-status-filter" data-change="reloadGTab" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:3px 8px;font-size:11px;color:var(--t);font-family:var(--fb);cursor:pointer">
        <option value="all">Todas</option>
        <option value="active">Solo activas</option>
        <option value="paused">Solo pausadas</option>
      </select>
      <button data-click="reloadGTab" style="padding:4px 10px;font-size:11px;background:none;border:1px solid var(--br2);border-radius:6px;color:var(--m);cursor:pointer">↻</button>
    </div>
  </div>

  <!-- TAB: RESUMEN ─────────────────────────────────────────────────────────── -->
  <div id="gtab-overview" class="g-panel">
    <div class="metrics" style="margin-bottom:14px">
      <div class="metric"><div class="ml" data-tip="Gasto total en Google Ads en el período seleccionado (Search, Display, PMax, Video)"><div class="md" style="background:var(--red)"></div>Inversión</div><div class="mv" id="g-m-spend">—</div><div class="mdelta" id="g-m-spend-d"></div></div>
      <div class="metric"><div class="ml" data-tip="Acciones completadas: compras, formularios, llamadas, etc. Configuradas como metas de conversión en Google Ads"><div class="md" style="background:var(--g)"></div>Conversiones</div><div class="mv" id="g-m-conv">—</div><div class="mdelta" id="g-m-conv-d"></div></div>
      <div class="metric"><div class="ml" data-tip="CPA — Costo por Adquisición: inversión total dividida entre conversiones. Menor es mejor"><div class="md" style="background:var(--y)"></div>Costo/conv.</div><div class="mv" id="g-m-cpa">—</div><div class="mdelta" id="g-m-cpa-d"></div></div>
      <div class="metric"><div class="ml" data-tip="Return on Ad Spend: valor de conversiones / inversión. ROAS 4× = $4 de ingresos por cada $1 invertido. &gt;3 es rentable"><div class="md" style="background:var(--b)"></div>ROAS</div><div class="mv" id="g-m-roas">—</div><div class="mdelta" id="g-m-roas-d"></div></div>
    </div>
    <!-- SEMÁFORO DE OPTIMIZACIÓN -->
    <div id="g-optim-panel" style="display:none;margin-bottom:14px">
      <div style="font-size:11px;color:var(--m);text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px;font-weight:600">Indicadores clave · Semáforo de optimización</div>
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px" id="g-optim-grid"></div>
    </div>

    <!-- WIDGETS: Budget Pacing + Geo Top 5 -->
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:14px">
      <!-- Budget Pacing -->
      <div class="card" id="g-pacing-card" style="display:none;padding:16px 18px">
        <div class="chd" style="margin-bottom:12px">
          <div class="ctit">💰 Pacing de presupuesto</div>
          <span id="g-pacing-badge" style="font-size:11px;padding:2px 9px;border-radius:10px;font-weight:600"></span>
        </div>
        <div id="g-pacing-content"></div>
      </div>
      <!-- Geographic Top 5 -->
      <div class="card" id="g-geo-card" style="display:none;padding:16px 18px">
        <div class="chd" style="margin-bottom:12px">
          <div class="ctit">🌎 Top ubicaciones</div>
          <span style="font-size:11px;color:var(--m)">por conversiones</span>
        </div>
        <div id="g-geo-content"><div style="font-size:12px;color:var(--m);text-align:center;padding:12px">Cargando...</div></div>
      </div>
    </div>

    <div class="card" id="g-campaigns-card" style="display:none">
      <div class="chd"><div class="ctit">Top campañas</div><span id="g-period-label" style="font-size:11px;color:var(--m)">Últimos 30 días</span></div>
      <div id="g-campaigns-table" style="overflow-x:auto"></div>
    </div>
  </div>

  <!-- TAB: CAMPAÑAS ────────────────────────────────────────────────────────── -->
  <!-- TAB: GRUPOS DE ANUNCIOS ──────────────────────────────────────────────── -->
  <div id="gtab-adgroups" class="g-panel" style="display:none">
    <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap">
      <select id="g-ag-camp-filter" data-change="loadGAdGroups" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--t);font-family:var(--fb)"><option value="">Todas las campañas</option></select>
    </div>
    <div id="g-ag-loading" style="color:var(--m);font-size:13px;padding:20px 0">Cargando grupos…</div>
    <div id="g-ag-content" style="overflow-x:auto"></div>
  </div>

  <!-- TAB: ANUNCIOS ────────────────────────────────────────────────────────── -->
  <div id="gtab-ads" class="g-panel" style="display:none">
    <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap">
      <select id="g-ads-camp-filter" data-change="loadGAds" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--t);font-family:var(--fb)"><option value="">Todas las campañas</option></select>
    </div>
    <div id="g-ads-loading" style="color:var(--m);font-size:13px;padding:20px 0">Cargando anuncios…</div>
    <div id="g-ads-content"></div>
  </div>

  <!-- TAB: CAMPAÑAS ─────────────────────────────────────────────────────────── -->
  <div id="gtab-campaigns" class="g-panel" style="display:none">
    <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap">
      <div style="font-size:11px;color:var(--m);font-weight:600;text-transform:uppercase;letter-spacing:.5px">Tipo:</div>
      <button class="stag active" id="g-type-all"   data-click="filterGCampType|all|__el"   style="padding:3px 10px;font-size:11px">Todas</button>
      <button class="stag"        id="g-type-search" data-click="filterGCampType|SEARCH|__el" style="padding:3px 10px;font-size:11px">Search</button>
      <button class="stag"        id="g-type-pmax"   data-click="filterGCampType|PERFORMANCE_MAX|__el" style="padding:3px 10px;font-size:11px">PMax</button>
      <button class="stag"        id="g-type-display" data-click="filterGCampType|DISPLAY|__el" style="padding:3px 10px;font-size:11px">Display</button>
      <button class="stag"        id="g-type-video"  data-click="filterGCampType|VIDEO|__el"  style="padding:3px 10px;font-size:11px">Video</button>
      <span id="g-camps-pmax-note" style="display:none;font-size:11px;color:var(--p);background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);border-radius:6px;padding:3px 9px">PMax — optimización automática por Google: sin keywords, sin grupos. Foco en conv. y valor.</span>
    </div>
    <div id="g-camps-loading" style="color:var(--m);font-size:13px;padding:20px 0">Cargando campañas…</div>
    <div id="g-camps-content" style="overflow-x:auto"></div>
    <div style="margin-top:14px"><button data-click="analyzeSection|g-campaigns|avi-g-campaigns" class="btn-avi-analyze">✦ Analizar campañas con AVI</button><div class="avi-resp" id="avi-g-campaigns" style="display:none;margin-top:10px"></div></div>
  </div>

  <!-- TAB: KEYWORDS ────────────────────────────────────────────────────────── -->
  <div id="gtab-keywords" class="g-panel" style="display:none">
    <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap">
      <select id="g-kw-camp-filter" data-change="loadGKeywords" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--t);font-family:var(--fb)"><option value="">Todas las campañas</option></select>
      <input type="text" id="g-kw-search" placeholder="Filtrar keyword…" data-input="filterGKeywords" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--t);width:180px">
      <select id="g-kw-qs-filter" data-change="filterGKeywords" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--t);font-family:var(--fb)">
        <option value="all">Todos los QS</option>
        <option value="low">⚠ QS bajo (≤5)</option>
        <option value="ok">✓ QS bueno (6-7)</option>
        <option value="top">★ QS excelente (8-10)</option>
        <option value="no_conv">Sin conversiones</option>
      </select>
      <span id="g-kw-count" style="font-size:11px;color:var(--m);margin-left:4px"></span>
    </div>
    <div id="g-kw-loading" style="color:var(--m);font-size:13px;padding:20px 0">Cargando keywords…</div>
    <div id="g-kw-content" style="overflow-x:auto"></div>

    <!-- Panel Recomendaciones QS -->
    <div id="g-qs-recs" style="display:none;margin-top:18px">
      <div style="font-size:13px;font-weight:700;color:var(--t);margin-bottom:10px;display:flex;align-items:center;gap:8px">
        <span style="background:rgba(248,113,113,.15);border:1px solid rgba(248,113,113,.3);border-radius:6px;padding:2px 10px;font-size:11px;color:#f87171;font-weight:700" id="g-qs-recs-count"></span>
        Recomendaciones Quality Score
      </div>
      <div id="g-qs-recs-list" style="display:flex;flex-direction:column;gap:8px"></div>
      <div style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap">
        <button data-click="analyzeQSWithAVI" class="btn-avi-analyze">✦ Analizar QS bajo con AVI</button>
        <button data-click="analyzeSection|g-keywords|avi-g-keywords" style="padding:7px 14px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);border-radius:7px;font-size:12px;cursor:pointer;font-family:var(--fb)">Análisis completo keywords</button>
      </div>
      <div class="avi-resp" id="avi-g-keywords" style="display:none;margin-top:10px"></div>
    </div>

    <!-- Botón AVI cuando no hay keywords QS bajo -->
    <div id="g-kw-avi-fallback" style="margin-top:14px">
      <button data-click="analyzeSection|g-keywords|avi-g-keywords-fb" class="btn-avi-analyze">✦ Analizar keywords con AVI</button>
      <div class="avi-resp" id="avi-g-keywords-fb" style="display:none;margin-top:10px"></div>
    </div>
  </div>

  <!-- Modal negativa desde keyword -->
  <div id="kw-neg-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;align-items:center;justify-content:center">
    <div style="background:var(--bg2);border:1px solid var(--br2);border-radius:12px;padding:24px 28px;min-width:340px;max-width:460px;box-shadow:0 8px 32px rgba(0,0,0,.3)">
      <div style="font-size:15px;font-weight:700;color:var(--t);margin-bottom:6px">⊘ Agregar como negativa</div>
      <div style="font-size:12px;color:var(--m);margin-bottom:16px">Se agregará a <strong>todas las campañas activas</strong> de la cuenta</div>
      <div style="background:var(--bg3);border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px;font-weight:600;color:var(--t)" id="kw-neg-kw-display"></div>
      <label style="font-size:12px;color:var(--m);display:block;margin-bottom:6px">Tipo de concordancia negativa</label>
      <select id="kw-neg-match" style="width:100%;background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:8px 10px;font-size:13px;color:var(--t);font-family:var(--fb);margin-bottom:16px">
        <option value="exact">Exacta — [keyword] · solo bloquea ese término exacto</option>
        <option value="phrase">Frase — "keyword" · bloquea búsquedas que contienen la frase</option>
        <option value="broad">Amplia — keyword · bloquea variaciones y sinónimos</option>
      </select>
      <label style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--m);margin-bottom:18px;cursor:pointer">
        <input type="checkbox" id="kw-neg-ctx" checked style="accent-color:var(--red)">
        Guardar también en lista de negativos permanentes del contexto
      </label>
      <div style="display:flex;gap:10px">
        <button data-click="confirmKwNegative" style="flex:1;padding:9px;background:var(--red);color:#fff;border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer">Aplicar negativa</button>
        <button data-click="closeKwNegModal" style="padding:9px 16px;background:var(--bg3);color:var(--t);border:1px solid var(--br2);border-radius:7px;font-size:13px;cursor:pointer">Cancelar</button>
      </div>
      <div id="kw-neg-result" style="margin-top:12px;font-size:12px;display:none"></div>
    </div>
  </div>

  <!-- TAB: TÉRMINOS DE BÚSQUEDA ────────────────────────────────────────────── -->
  <div id="gtab-search_terms" class="g-panel" style="display:none">
    <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap">
      <input type="text" id="g-st-search" placeholder="Filtrar término…" data-input="filterGSearchTerms" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--t);width:200px">
      <select id="g-st-filter" data-change="filterGSearchTerms" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--t);font-family:var(--fb)">
        <option value="all">Todos</option><option value="no_conv">Sin conversiones</option><option value="conv">Con conversiones</option>
      </select>
    </div>
    <div id="g-st-loading" style="color:var(--m);font-size:13px;padding:20px 0">Cargando términos…</div>
    <div id="g-st-content" style="overflow-x:auto"></div>
    <div style="margin-top:14px"><button data-click="analyzeSection|g-terms|avi-g-terms" class="btn-avi-analyze">✦ Analizar términos con AVI</button><div class="avi-resp" id="avi-g-terms" style="display:none;margin-top:10px"></div></div>
  </div>

  <!-- TAB: NEGATIVOS IA ────────────────────────────────────────────────────── -->
  <div id="gtab-ai_negatives" class="g-panel" style="display:none">

    <!-- Revisión diaria -->
    <div class="card" style="margin-bottom:14px;border-left:3px solid var(--red)">
      <div class="chd">
        <div class="ctit">Revisión diaria — Ayer</div>
        <span id="g-daily-date" style="font-size:11px;color:var(--m)"></span>
      </div>
      <div id="g-daily-loading" style="display:none;font-size:12px;color:var(--m);padding:6px 0">Analizando términos de ayer con IA…</div>
      <div id="g-daily-error" style="display:none;background:rgba(232,39,42,.08);border:1px solid rgba(232,39,42,.25);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--red);margin-bottom:6px">
        <span id="g-daily-error-msg"></span>
        <button data-click="_scDailyReset" style="margin-left:10px;padding:3px 10px;border-radius:5px;background:none;border:1px solid rgba(232,39,42,.4);color:var(--red);cursor:pointer;font-family:var(--fb);font-size:11px">Reintentar</button>
      </div>
      <div id="g-daily-content" style="display:none">
        <div id="g-daily-summary" style="background:rgba(232,39,42,.07);border:1px solid rgba(232,39,42,.18);border-radius:8px;padding:12px 16px;font-size:12px;color:var(--t);margin-bottom:12px;line-height:1.65"></div>
        <div id="g-daily-neg-section" style="display:none;margin-bottom:14px">
          <div style="font-size:12px;font-weight:700;color:var(--red);margin-bottom:8px">Sugeridas como negativas</div>
          <div id="g-daily-neg-chips" style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px"></div>
          <button data-click="applyDailyNegatives" style="padding:7px 18px;border-radius:7px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb);font-size:12px;font-weight:600">Añadir seleccionadas a negativos</button>
          <span id="g-daily-apply-info" style="font-size:11px;color:var(--m);margin-left:10px"></span>
        </div>
        <div id="g-daily-keep-section" style="display:none">
          <div style="font-size:12px;font-weight:700;color:var(--g);margin-bottom:8px">Conservar (relevantes)</div>
          <div id="g-daily-keep-chips" style="display:flex;flex-wrap:wrap;gap:6px"></div>
        </div>
      </div>
      <div id="g-daily-empty" style="display:none;font-size:12px;color:var(--m);padding:4px 0">Sin términos de búsqueda registrados para ayer.</div>
    </div>

    <!-- Nivel de confianza / modo automático -->
    <div class="card" style="margin-bottom:14px">
      <div class="chd">
        <div class="ctit" data-tip="El SuperCerebro aprende de tus aprobaciones. A las 30 aprobaciones puede aplicar negativos automáticamente sin revisión humana">Nivel de confianza del SuperCerebro</div>
        <span id="g-trust-badge" data-tip="Aprendiendo: &lt;30 aprobaciones. Listo: 30+ aprobaciones. Automático: modo auto activo" style="font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:rgba(234,179,8,.15);color:var(--y)">Aprendiendo</span>
      </div>
      <div style="display:flex;gap:20px;align-items:center;flex-wrap:wrap">
        <div style="flex:1;min-width:180px">
          <div style="display:flex;justify-content:space-between;margin-bottom:6px">
            <span id="g-trust-count" data-tip="Número de negativos aprobados manualmente. A las 30 se desbloquea el modo automático" style="font-size:12px;color:var(--m)">0 / 30 aprobaciones</span>
            <span id="g-trust-pct" data-tip="Porcentaje de avance hacia el modo automático (30 aprobaciones = 100%)" style="font-size:12px;color:var(--m)">0%</span>
          </div>
          <div style="background:var(--bg3);border-radius:4px;height:7px">
            <div id="g-trust-bar" style="background:var(--g);border-radius:4px;height:7px;width:0%;transition:width .6s"></div>
          </div>
          <div id="g-trust-last" style="font-size:11px;color:var(--m);margin-top:7px"></div>
        </div>
        <div style="display:flex;flex-direction:column;gap:6px;align-items:flex-end">
          <button id="g-trust-toggle-btn" data-click="toggleAutoMode" style="padding:7px 16px;border-radius:8px;background:rgba(74,158,248,.15);border:1px solid rgba(74,158,248,.3);color:var(--b);cursor:pointer;font-family:var(--fb);font-size:12px;font-weight:600">Activar modo automático</button>
          <span id="g-trust-auto-info" style="font-size:11px;color:var(--m);display:none"></span>
        </div>
      </div>
    </div>

    <!-- Términos del período -->
    <div class="card" style="margin-bottom:14px">
      <div class="chd">
        <div class="ctit">Términos del período</div>
        <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
          <select id="g-terms-filter" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:3px 8px;font-size:11px;color:var(--t);font-family:var(--fb)">
            <option value="no_conv">Sin conversión</option>
            <option value="with_conv">Con conversiones</option>
            <option value="all">Todos los términos</option>
          </select>
          <button data-click="loadPeriodTerms" style="padding:5px 14px;border-radius:6px;background:rgba(232,39,42,.15);border:1px solid rgba(232,39,42,.3);color:var(--red);cursor:pointer;font-family:var(--fb);font-size:12px">Ver términos</button>
        </div>
      </div>
      <div style="font-size:11px;color:var(--m);margin-bottom:8px">Términos reales que activaron tus anuncios en el período seleccionado. Márcalos para añadirlos como negativos.</div>
      <div id="g-terms-loading" style="display:none;font-size:12px;color:var(--m);padding:8px 0">Cargando términos…</div>
      <div id="g-terms-content"></div>
      <div id="g-terms-actions" style="display:none;margin-top:10px;display:none">
        <button data-click="applyTermsAsNegatives" style="padding:7px 16px;border-radius:7px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb);font-size:12px;font-weight:600">Añadir seleccionados como negativos</button>
        <span id="g-terms-count" style="font-size:11px;color:var(--m);margin-left:8px"></span>
      </div>
    </div>

    <!-- Negativos actuales en la cuenta -->
    <div class="card" style="margin-bottom:14px">
      <div class="chd">
        <div class="ctit">Negativos actuales en Google Ads</div>
        <button data-click="loadAccountNegatives" style="padding:5px 14px;border-radius:6px;background:rgba(74,158,248,.15);border:1px solid rgba(74,158,248,.3);color:var(--b);cursor:pointer;font-family:var(--fb);font-size:12px">Ver lista</button>
      </div>
      <div id="g-acct-neg-loading" style="display:none;font-size:12px;color:var(--m);padding:8px 0">Cargando negativos de la cuenta…</div>
      <div id="g-acct-neg-content" style="font-size:12px;color:var(--m)">Haz clic en "Ver lista" para cargar las palabras negativas ya aplicadas en esta cuenta.</div>
    </div>

    <!-- Contexto de negativos -->
    <div class="card" style="margin-bottom:14px">
      <div class="chd"><div class="ctit">Contexto de palabras clave negativas</div><span id="g-neg-ctx-saved" style="font-size:11px;color:var(--g);display:none">✓ Guardado</span></div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px">
        <div>
          <div style="font-size:12px;font-weight:600;margin-bottom:6px;color:var(--t)">Palabras SIEMPRE negativas</div>
          <div style="font-size:11px;color:var(--m);margin-bottom:6px">Una por línea. El IA nunca las sugerirá ni las incluirá en análisis.</div>
          <textarea id="g-neg-permanent" rows="6" placeholder="gratis&#10;cómo hacer&#10;tutorial&#10;empleo&#10;trabajo" style="width:100%;background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px;font-size:12px;color:var(--t);font-family:var(--fb);resize:vertical;box-sizing:border-box"></textarea>
        </div>
        <div>
          <div style="font-size:12px;font-weight:600;margin-bottom:6px;color:var(--t)">Filtros de revisión diaria</div>
          <div style="font-size:11px;color:var(--m);margin-bottom:6px">Términos que monitoreas a diario. El IA los considerará al clasificar dudosos.</div>
          <textarea id="g-neg-daily" rows="6" placeholder="precio&#10;económico&#10;barato&#10;opiniones" style="width:100%;background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px;font-size:12px;color:var(--t);font-family:var(--fb);resize:vertical;box-sizing:border-box"></textarea>
        </div>
      </div>
      <button data-click="saveNegContext" style="padding:7px 18px;border-radius:7px;background:var(--g);border:none;color:#000;cursor:pointer;font-family:var(--fb);font-size:12px;font-weight:600">Guardar contexto</button>
    </div>

    <!-- Acción de análisis -->
    <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap">
      <button data-click="loadGAINegatives" style="padding:9px 20px;border-radius:8px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb);font-size:13px;font-weight:600">✦ Analizar con SuperCerebro</button>
      <span style="font-size:12px;color:var(--m)">Analiza los últimos <strong id="g-neg-period-lbl">30 días</strong> de términos sin conversión</span>
    </div>
    <div id="g-neg-loading" style="display:none;color:var(--m);font-size:13px;padding:10px 0">Analizando términos de búsqueda con IA…</div>

    <!-- Resultados: sección AUTO -->
    <div id="g-neg-content">
      <div id="g-neg-auto" style="display:none;margin-bottom:20px">
        <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px">
          <div>
            <div style="font-size:13px;font-weight:700;color:var(--red)">🚫 SuperCerebro aplicará directamente</div>
            <div style="font-size:11px;color:var(--m);margin-top:3px">Términos con intención incorrecta confirmada. Se agregarán a nivel de cuenta.</div>
          </div>
          <button id="g-neg-apply-auto-btn" data-click="applyAutoNegatives" style="padding:8px 18px;border-radius:8px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb);font-size:12px;font-weight:600">Aplicar todos a Google Ads</button>
        </div>
        <div id="g-neg-auto-list"></div>
      </div>

      <!-- Resultados: sección REVIEW con checkboxes -->
      <div id="g-neg-review" style="display:none">
        <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px">
          <div>
            <div style="font-size:13px;font-weight:700;color:var(--y)">👁 Revisar manualmente</div>
            <div style="font-size:11px;color:var(--m);margin-top:3px">Estos términos generan duda. Selecciona los que quieres aplicar.</div>
          </div>
          <button data-click="applySelectedNegatives" style="padding:8px 18px;border-radius:8px;background:var(--y);border:none;color:#000;cursor:pointer;font-family:var(--fb);font-size:12px;font-weight:600">Aplicar seleccionados</button>
        </div>
        <div id="g-neg-review-list"></div>
      </div>
    </div>
  </div>

  <!-- TAB: COMPETENCIA ─────────────────────────────────────────────────────── -->
  <div id="gtab-auction" class="g-panel" style="display:none">
    <div style="margin-bottom:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap">
      <select id="g-auction-camp" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--t);font-family:var(--fb)"><option value="">Todas las campañas</option></select>
      <button data-click="loadGAuction" style="padding:6px 14px;border-radius:6px;font-size:12px;background:rgba(74,158,248,.15);border:1px solid rgba(74,158,248,.3);color:var(--b);cursor:pointer;font-family:var(--fb)">Ver Impression Share</button>
    </div>
    <div id="g-auction-loading" style="color:var(--m);font-size:13px;padding:20px 0"></div>
    <div id="g-auction-content" style="overflow-x:auto"></div>
    <!-- AVI análisis estratégico de competencia -->
    <div class="avi" style="margin-top:16px">
      <div class="avi-hd"><div class="avi-orb">✦</div><div><div class="avi-name">AVI · Estrategia vs competidores</div><div class="avi-sub">Análisis y recomendaciones de puja basadas en datos reales</div></div></div>
      <div class="avi-row">
        <input class="avi-in" id="g-comp-q" placeholder="¿Qué quieres analizar de la competencia?" onkeydown="if(event.key==='Enter')askAVI('g-comp')">
        <button class="avi-send" data-click="askAVI|g-comp">Analizar</button>
      </div>
      <div class="avi-resp" id="avi-resp-g-comp"></div>
    </div>
  </div>

  <!-- TAB: SEGMENTOS ───────────────────────────────────────────────────────── -->
  <div id="gtab-segments" class="g-panel" style="display:none">
    <div style="display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap">
      <button class="g-seg-btn active" data-seg="device"   data-click="switchGSeg|device|__el"   style="padding:7px 16px;border-radius:7px;font-size:12px;background:rgba(232,39,42,.15);border:1px solid rgba(232,39,42,.3);color:var(--red);cursor:pointer;font-family:var(--fb)">📱 Dispositivos</button>
      <button class="g-seg-btn"        data-seg="location" data-click="switchGSeg|location|__el" style="padding:7px 16px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">📍 Ubicaciones</button>
      <button class="g-seg-btn"        data-seg="age"      data-click="switchGSeg|age|__el"      style="padding:7px 16px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">👥 Edades</button>
    </div>
    <div id="g-seg-loading" style="color:var(--m);font-size:13px;padding:20px 0;display:none">Cargando segmentos…</div>
    <div id="g-seg-content" style="overflow-x:auto"></div>
    <div style="margin-top:14px"><button data-click="analyzeSection|g-segments|avi-g-segments" class="btn-avi-analyze">✦ Analizar segmentos con AVI</button><div class="avi-resp" id="avi-g-segments" style="display:none;margin-top:10px"></div></div>
  </div>

  <!-- TAB: FACTURACIÓN ─────────────────────────────────────────────────────── -->
  <div id="gtab-billing" class="g-panel" style="display:none">
    <div id="g-billing-loading" style="color:var(--m);font-size:13px;padding:20px 0">Verificando estado de facturación…</div>
    <div id="g-billing-content"></div>
  </div>

  <!-- TAB: HERRAMIENTAS IA ──────────────────────────────────────────────────── -->
  <div id="gtab-ai_tools" class="g-panel" style="display:none">
    <!-- Keywords IA -->
    <div class="card" style="margin-bottom:14px">
      <div class="chd"><div class="ctit" style="color:#f87171">🔍 Investigación de keywords con IA</div></div>
      <div class="seg-grid" style="margin-bottom:12px">
        <div class="seg-field"><div class="seg-label">Producto o servicio</div><input class="seg-input" id="kw-product" placeholder="Ej: software hotelero, clínica dental…"></div>
        <div class="seg-field"><div class="seg-label">Ubicación objetivo</div><input class="seg-input" id="kw-location" placeholder="Ej: Medellín, Colombia…"></div>
        <div class="seg-field"><div class="seg-label">Idioma</div><div class="seg-tags"><div class="stag active" data-click="toggleSeg|__el">Español</div><div class="stag" data-click="toggleSeg|__el">Inglés</div></div></div>
        <div class="seg-field"><div class="seg-label">Intención</div><div class="seg-tags"><div class="stag" data-click="toggleSeg|__el">Transaccional</div><div class="stag" data-click="toggleSeg|__el">Informacional</div><div class="stag active" data-click="toggleSeg|__el">Todas</div></div></div>
      </div>
      <div style="display:flex;gap:8px;flex-wrap:wrap">
        <button class="oc-btn" style="width:auto;padding:7px 14px" data-click="generateKeywords|research">🔍 Investigar keywords</button>
        <button class="oc-btn" style="width:auto;padding:7px 14px" data-click="generateKeywords|longtail">📋 Cola larga</button>
        <button class="oc-btn" style="width:auto;padding:7px 14px" data-click="generateKeywords|negative">🚫 Negativas</button>
        <button class="oc-btn" style="width:auto;padding:7px 14px" data-click="generateKeywords|groups">📁 Ad Groups</button>
      </div>
      <div class="avi-resp" id="kw-resp" style="margin-top:10px"></div>
    </div>
    <!-- Presupuesto IA -->
    <div class="card" style="margin-bottom:14px">
      <div class="chd"><div class="ctit" style="color:#f87171">💰 Estrategia de presupuesto y ubicaciones</div></div>
      <div class="seg-grid">
        <div class="seg-field"><div class="seg-label">Presupuesto mensual</div><input class="budget-input" id="g-budget" placeholder="Ej: 2000000 COP"></div>
        <div class="seg-field"><div class="seg-label">Tipo de campaña</div><div class="seg-tags"><div class="stag active" data-click="toggleSeg|__el">Search</div><div class="stag" data-click="toggleSeg|__el">Display</div><div class="stag" data-click="toggleSeg|__el">PMax</div></div></div>
      </div>
      <button class="oc-btn" style="width:auto;padding:7px 14px;margin-top:10px" data-click="analyzeBudget">Analizar con AVI</button>
      <div class="avi-resp" id="budget-resp" style="margin-top:10px"></div>
    </div>
    <!-- Creador RSA -->
    <div class="card">
      <div class="chd"><div class="ctit" style="color:#f87171">✍️ Creador de anuncios RSA</div><span style="font-size:11px;color:var(--m)">Anuncios de búsqueda responsivos</span></div>
      <div class="avi-row" style="margin-bottom:10px">
        <input class="avi-in" id="rsa-q" placeholder="Describe el producto/servicio y keyword principal…" onkeydown="if(event.key==='Enter')generateRSA()">
        <button class="avi-send" data-click="generateRSA">Crear</button>
      </div>
      <div id="rsa-preview" style="display:none"><div class="rsa-card"><div class="rsa-url" id="rsa-url">https://tudominio.com</div><div class="rsa-title" id="rsa-title">Tus titulares · Optimizados por Google · Hasta 15 opciones</div><div class="rsa-desc" id="rsa-desc">Las descripciones aparecerán aquí.</div></div></div>
      <div class="avi-resp" id="rsa-resp"></div>
    </div>
  </div>


</div>
<?php endif ?>
