<!-- ===== META ADS ===== -->
<?php if(_nav('meta')): ?>
<div class="page" id="page-meta">
<?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, 'meta', [
    'label'    => 'Meta Ads',
    'icon'     => '◉',
    'color'    => '#1877f2',
    'card_id'  => 'meta',
    'required' => ['ad_account_id'],
    'action'   => 'form',
    'fields'   => [
        ['key'=>'ad_account_id','label'=>'Ad Account ID','placeholder'=>'act_123456789','required'=>true,'hint'=>'Lo encuentras en Meta Business Manager → Cuentas publicitarias'],
        ['key'=>'access_token','label'=>'Token de acceso (opcional)','placeholder'=>'EAAxxxxx...','type'=>'password','hint'=>'Déjalo vacío para usar el token del sistema'],
    ],
]);?>


  <!-- CABECERA -->
  <div class="ph">
    <div><div class="pt">Meta Ads</div><div class="ps">Facebook · Instagram · Partner Oficial</div></div>
    <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
      <select id="meta-period-sel" data-change="onMetaPeriodChange" 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="today">Hoy</option>
        <option value="yesterday">Ayer</option>
        <option value="7d">Últimos 7 días</option>
        <option value="30d" selected>Últimos 30 días</option>
        <option value="90d">Últimos 90 días</option>
        <option value="this_month">Este mes</option>
        <option value="last_month">Mes anterior</option>
        <option value="custom">Personalizado</option>
      </select>
      <select id="meta-attribution-sel" data-change="onMetaAttributionChange" title="Ventana de atribución" 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="1d_click">1d clic</option>
        <option value="7d_click" selected>7d clic</option>
        <option value="7d_click_1d_view">7d clic + 1d vista</option>
        <option value="28d_click">28d clic</option>
      </select>
      <div id="meta-date-custom" style="display:none;gap:6px;align-items:center">
        <input type="date" id="meta-date-from" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:5px 8px;font-size:12px;color:var(--t);font-family:var(--fb)">
        <span style="color:var(--m);font-size:12px">—</span>
        <input type="date" id="meta-date-to" style="background:var(--bg3);border:1px solid var(--br2);border-radius:6px;padding:5px 8px;font-size:12px;color:var(--t);font-family:var(--fb)">
        <button data-click="loadMetaData|__client|custom" style="padding:5px 10px;border-radius:6px;font-size:12px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Aplicar</button>
      </div>
      <button data-click="_scLoadMetaWithSel" 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)">↻</button>
    </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">Dale a AVI el objetivo, estrategia y tono del cliente</div></div></div>
    <textarea class="ctx-ta" id="meta-ctx" placeholder="Ej: Clínica dental en Medellín, implantes, adultos 30-55, NSE medio-alto, objetivo: leads..."></textarea>
    <div style="display:flex;align-items:center">
      <button class="ctx-save" data-click="saveCtx|meta">Guardar contexto</button>
      <button class="ctx-save" data-click="clearCtx|meta" style="background:var(--bg3);border:1px solid var(--br2);color:var(--m);margin-left:6px">Limpiar</button>
      <span class="ctx-saved" id="ctx-saved-meta">✓ Guardado</span>
    </div>
  </div>

  <!-- ALERTAS -->
  <div id="meta-alerts-wrap" style="display:none"><div id="meta-alerts-list"></div></div>

  <!-- TABS -->
  <div style="display:flex;gap:0;border-bottom:1px solid var(--br);margin-bottom:4px;overflow-x:auto">
    <button class="meta-tab active" data-click="switchMetaTab|dashboard|__el"    style="padding:9px 14px;font-size:12px;color:var(--t);background:none;border:none;border-bottom:2px solid var(--red);cursor:pointer;font-family:var(--fb);white-space:nowrap">Dashboard</button>
    <button class="meta-tab"        data-click="switchMetaTab|campanas|__el"     style="padding:9px 14px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">Campañas</button>
    <button class="meta-tab"        data-click="switchMetaTab|conjuntos|__el"    style="padding:9px 14px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">Conjuntos</button>
    <button class="meta-tab"        data-click="switchMetaTab|anuncios|__el"     style="padding:9px 14px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">Anuncios</button>
    <button class="meta-tab"        data-click="switchMetaTab|crear|__el"        style="padding:9px 14px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">+ Crear</button>
    <button class="meta-tab"        data-click="switchMetaTab|creatividades|__el" style="padding:9px 14px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">Creatividades</button>
    <button class="meta-tab"        data-click="switchMetaTab|publicos|__el"     style="padding:9px 14px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">Públicos</button>
    <button class="meta-tab"        data-click="switchMetaTab|competencia|__el"  style="padding:9px 14px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">Competencia</button>
  </div>

  <!-- ═══ TAB: DASHBOARD ═══ -->
  <div class="meta-panel active" id="mpanel-dashboard">
    <div class="metrics" id="meta-metrics" style="grid-template-columns:repeat(4,minmax(0,1fr))">
      <div class="metric"><div class="ml" data-tip="Gasto total en Meta Ads en el período"><div class="md" style="background:var(--b)"></div>Inversión</div><div class="mv" id="meta-spend">—</div><div class="mdelta" id="meta-spend-d"></div></div>
      <div class="metric"><div class="ml" data-tip="Return on Ad Spend: ingresos por cada peso invertido. ROAS 3× = $3 por cada $1"><div class="md" style="background:var(--g)"></div>ROAS</div><div class="mv" id="meta-roas">—</div><div class="mdelta" id="meta-roas-d"></div></div>
      <div class="metric"><div class="ml" data-tip="CTR: % de personas que vieron y clicaron. Frecuencia: veces promedio que vieron el anuncio — >3 puede causar fatiga"><div class="md" style="background:var(--y)"></div>CTR / Frecuencia</div><div class="mv" id="meta-ctr">—</div><div class="mdelta" id="meta-ctr-d"></div></div>
      <div class="metric"><div class="ml" data-tip="Costo por Adquisición o Lead: cuánto cuesta conseguir una conversión"><div class="md" style="background:var(--red)"></div>CPA / CPL</div><div class="mv" id="meta-cpa">—</div><div class="mdelta" id="meta-cpa-d"></div></div>
      <div class="metric"><div class="ml" data-tip="Personas únicas que vieron tu anuncio al menos una vez"><div class="md" style="background:var(--p)"></div>Alcance</div><div class="mv" id="meta-reach">—</div><div class="mdelta" id="meta-reach-d"></div></div>
      <div class="metric"><div class="ml" data-tip="Mensajes iniciados desde el anuncio en WhatsApp, Messenger o Instagram Direct"><div class="md" style="background:#22c97a"></div>Conversaciones</div><div class="mv" id="meta-convs">—</div><div class="mdelta" id="meta-convs-d"></div></div>
      <div class="metric"><div class="ml" data-tip="Costo promedio por conversión (compra, registro, llamada, etc.)"><div class="md" style="background:#f97316"></div>Costo/Conv.</div><div class="mv" id="meta-cpconv">—</div><div class="mdelta" id="meta-cpconv-d"></div></div>
      <div class="metric"><div class="ml" data-tip="Costo por Mil Impresiones: cuánto pagas por cada 1,000 veces que se muestra tu anuncio"><div class="md" style="background:var(--m)"></div>CPM</div><div class="mv" id="meta-cpm">—</div><div class="mdelta" id="meta-cpm-d"></div></div>
    </div>

    <!-- INDICADORES DE OPTIMIZACIÓN -->
    <div id="meta-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="meta-optim-grid"></div>
    </div>

    <!-- PACING + PLACEMENT -->
    <div id="meta-pacing-placement" style="display:none;margin-bottom:14px">
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
        <!-- Budget Pacing -->
        <div class="card" style="padding:14px">
          <div style="font-size:11px;font-weight:600;color:var(--m);text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px">Pacing presupuesto · Mes actual</div>
          <div id="meta-pacing-content">
            <div style="font-size:12px;color:var(--m);text-align:center;padding:8px">Cargando...</div>
          </div>
        </div>
        <!-- Placement Breakdown -->
        <div class="card" style="padding:14px">
          <div style="font-size:11px;font-weight:600;color:var(--m);text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px">Distribución por placement</div>
          <div id="meta-placement-content">
            <div style="font-size:12px;color:var(--m);text-align:center;padding:8px">Cargando...</div>
          </div>
        </div>
      </div>
    </div>

    <div class="avi" id="meta-avi-rec" style="display:none">
      <div class="avi-hd"><div class="avi-orb">✦</div><div><div class="avi-name">AVI · Recomendaciones</div><div class="avi-sub" id="meta-rec-sub">Analizando...</div></div>
        <button id="meta-rec-ia-btn" data-click="loadMetaRecommendations" style="margin-left:auto;padding:5px 12px;border-radius:7px;font-size:11px;background:var(--rl);border:1px solid var(--rb);color:var(--red);cursor:pointer;font-family:var(--fb)">✦ Análisis IA completo</button>
      </div>
      <div id="meta-rec-list"></div>
      <div id="meta-ia-recs" style="display:none;margin-top:10px"></div>
      <div class="avi-row">
        <input class="avi-in" id="meta-rec-q" placeholder="Pregunta sobre tus campañas..." onkeydown="if(event.key==='Enter')askMetaRec()">
        <button class="avi-send" data-click="askMetaRec">Preguntar</button>
      </div>
      <div class="avi-resp" id="meta-rec-resp"></div>
    </div>
  </div>

  <!-- ═══ TAB: CAMPAÑAS ═══ -->
  <div class="meta-panel" id="mpanel-campanas" style="display:none">
    <div class="card">
      <div class="chd">
        <div style="display:flex;align-items:center;gap:10px">
          <div class="ctit">Campañas <span id="meta-camps-count" style="font-size:11px;color:var(--m);font-weight:400"></span></div>
          <div style="display:flex;gap:4px">
            <button id="filter-active" data-click="filterCamps|active|__el" style="padding:3px 9px;border-radius:5px;font-size:11px;background:var(--rl);border:1px solid var(--rb);color:var(--red);cursor:pointer;font-family:var(--fb)">Activas</button>
            <button id="filter-paused" data-click="filterCamps|paused|__el" style="padding:3px 9px;border-radius:5px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">Pausadas</button>
            <button id="filter-all"    data-click="filterCamps|all|__el"    style="padding:3px 9px;border-radius:5px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">Todas</button>
          </div>
        </div>
        <span id="meta-camp-loading" style="font-size:12px;color:var(--m)"></span>
      </div>
      <div style="overflow-x:auto">
        <table class="tbl" style="min-width:940px">
          <thead><tr>
            <th>Campaña</th><th>Estado</th><th>Presup./día</th><th>Inversión</th>
            <th>Alcance</th><th>Clics</th><th>CTR%</th><th>Conv.</th><th>Costo/Conv.</th><th>Frec.</th><th>Acciones</th>
          </tr></thead>
          <tbody id="meta-camps-body">
            <tr><td colspan="11" style="text-align:center;color:var(--m);padding:20px">Selecciona un cliente</td></tr>
          </tbody>
        </table>
      </div>
      <div style="margin-top:12px"><button data-click="metaAnalyzeTab|campanas|avi-meta-camp-resp" class="btn-avi-analyze">✦ Analizar campañas con AVI</button><div class="avi-resp" id="avi-meta-camp-resp" style="display:none;margin-top:10px"></div></div>
    </div>
  </div>

  <!-- ═══ TAB: CONJUNTOS (Ad Sets) ═══ -->
  <div class="meta-panel" id="mpanel-conjuntos" style="display:none">
    <div class="card">
      <div class="chd">
        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
          <div class="ctit">Conjuntos de anuncios</div>
          <select id="meta-as-camp-filter" data-change="loadMetaAdSets" 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="">Todas las campañas</option>
          </select>
        </div>
        <button data-click="loadMetaAdSets" style="padding:4px 10px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">↻</button>
      </div>
      <div id="meta-as-loading" style="text-align:center;color:var(--m);padding:20px;font-size:13px">Cargando conjuntos...</div>
      <div id="meta-as-wrap" style="display:none;overflow-x:auto">
        <table class="tbl" style="min-width:1000px">
          <thead><tr>
            <th>Conjunto</th><th>Estado</th><th>Optimización</th><th>Presupuesto</th>
            <th>Inversión</th><th>Alcance</th><th>Clics</th>
            <th data-tip="CTR ≥1.5% excelente · 0.5-1.5% bueno · <0.5% revisar">CTR%</th>
            <th data-tip="Frecuencia: <2 óptimo · 2-3 revisar · >3 fatiga publicitaria">Frec.</th>
            <th>Conv.</th><th>CPA</th><th>Acciones</th>
          </tr></thead>
          <tbody id="meta-as-body"></tbody>
        </table>
      </div>
      <div id="meta-as-empty" style="display:none;text-align:center;color:var(--m);padding:30px;font-size:13px">Sin conjuntos en el período seleccionado.</div>
      <div style="margin-top:12px"><button data-click="metaAnalyzeTab|conjuntos|avi-meta-as-resp" class="btn-avi-analyze">✦ Analizar conjuntos con AVI</button><div class="avi-resp" id="avi-meta-as-resp" style="display:none;margin-top:10px"></div></div>
    </div>
  </div>

  <!-- ═══ TAB: ANUNCIOS ═══ -->
  <div class="meta-panel" id="mpanel-anuncios" style="display:none">
    <div class="card">
      <div class="chd">
        <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
          <div class="ctit">Anuncios</div>
          <select id="meta-ads-camp-filter" data-change="loadMetaAdsTab" 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="">Todas las campañas</option>
          </select>
          <select id="meta-ads-view" data-change="toggleMetaAdsView" 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="grid">Tarjetas</option>
            <option value="table">Tabla</option>
          </select>
        </div>
        <button data-click="loadMetaAdsTab" style="padding:4px 10px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">↻</button>
      </div>
      <div id="meta-ads-loading" style="text-align:center;color:var(--m);padding:20px;font-size:13px">Cargando anuncios...</div>
      <div id="meta-ads-grid" style="display:none;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px"></div>
      <div id="meta-ads-table-wrap" style="display:none;overflow-x:auto">
        <table class="tbl" style="min-width:900px">
          <thead><tr>
            <th style="width:60px">Creativo</th><th>Anuncio</th><th>Estado</th>
            <th>Inversión</th><th>Alcance</th><th>Clics</th><th>CTR%</th><th>Frec.</th><th>Conv.</th><th>CPA</th><th>Acciones</th>
          </tr></thead>
          <tbody id="meta-ads-table-body"></tbody>
        </table>
      </div>
      <div id="meta-ads-empty" style="display:none;text-align:center;color:var(--m);padding:30px;font-size:13px">Sin anuncios en el período seleccionado.</div>
      <div style="margin-top:12px"><button data-click="metaAnalyzeTab|anuncios|avi-meta-ads-resp" class="btn-avi-analyze">✦ Analizar anuncios con AVI</button><div class="avi-resp" id="avi-meta-ads-resp" style="display:none;margin-top:10px"></div></div>
    </div>
  </div>

  <!-- ═══ TAB: CREAR CAMPAÑA (wizard 4 pasos) ═══ -->
  <div class="meta-panel" id="mpanel-crear" style="display:none">
    <div style="display:flex;align-items:center;gap:0;margin-bottom:16px">
      <div class="wizard-step active" id="wstep-1" style="display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px 0 0 6px;background:var(--rl);border:1px solid var(--rb);font-size:12px;color:var(--red)"><span>1</span> Brief con AVI</div>
      <div class="wizard-step" id="wstep-2" style="display:flex;align-items:center;gap:6px;padding:7px 14px;background:var(--bg3);border:1px solid var(--br2);border-left:none;font-size:12px;color:var(--m)"><span>2</span> Campaña + Conjunto</div>
      <div class="wizard-step" id="wstep-3" style="display:flex;align-items:center;gap:6px;padding:7px 14px;background:var(--bg3);border:1px solid var(--br2);border-left:none;font-size:12px;color:var(--m)"><span>3</span> Anuncio</div>
      <div class="wizard-step" id="wstep-4" style="display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:0 6px 6px 0;background:var(--bg3);border:1px solid var(--br2);border-left:none;font-size:12px;color:var(--m)"><span>4</span> Confirmar</div>
    </div>

    <!-- Paso 1: Brief con AVI -->
    <div id="wizard-p1">
      <div class="avi" style="margin-bottom:12px">
        <div class="avi-hd"><div class="avi-orb">✦</div><div><div class="avi-name">AVI · Brief inteligente</div><div class="avi-sub">Responde las preguntas para que AVI diseñe la campaña ideal</div></div></div>
        <div style="display:flex;flex-direction:column;gap:8px">
          <div class="seg-field"><div class="seg-label">¿Qué quieres lograr con esta campaña?</div><input class="seg-input" id="brief-objetivo" placeholder="Ej: generar leads de personas interesadas en implantes dentales"></div>
          <div class="seg-field"><div class="seg-label">¿Cuál es el presupuesto disponible? (COP/día)</div><input class="seg-input" id="brief-presupuesto" type="number" placeholder="Ej: 50000"></div>
          <div class="seg-field"><div class="seg-label">¿A quién le quieres llegar?</div><input class="seg-input" id="brief-publico" placeholder="Ej: adultos 30-55 años, Medellín, interesados en salud dental"></div>
          <div class="seg-field"><div class="seg-label">¿Cuánto tiempo durará la campaña?</div><input class="seg-input" id="brief-duracion" placeholder="Ej: 1 mes, indefinida, hasta el 30 de mayo"></div>
          <div class="seg-field"><div class="seg-label">¿Ya tienes creativos (imágenes/videos)?</div>
            <div class="seg-tags">
              <div class="stag" data-click="toggleSeg|__el" id="brief-creativos-si">Sí tengo</div>
              <div class="stag" data-click="toggleSeg|__el" id="brief-creativos-no">Necesito crearlos</div>
            </div>
          </div>
          <div class="seg-field"><div class="seg-label">¿Competidores que consideras clave?</div><input class="seg-input" id="brief-competidores" placeholder="Ej: Clínica Odontológica X (o deja vacío y AVI los identifica)"></div>
        </div>
        <button data-click="runBriefAVI" style="margin-top:10px;padding:8px 18px;border-radius:7px;font-size:13px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Analizar con AVI →</button>
        <div class="avi-resp" id="brief-resp" style="margin-top:10px"></div>
      </div>
      <div style="display:flex;justify-content:flex-end">
        <button data-click="goWizardStep|2" style="padding:8px 18px;border-radius:7px;font-size:13px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Continuar →</button>
      </div>
    </div>

    <!-- Paso 2: Campaña + Ad Set -->
    <div id="wizard-p2" style="display:none">
      <div class="g2">
        <div class="card">
          <div class="chd"><div class="ctit" style="color:var(--red)">Campaña</div></div>
          <div class="mf"><label>Nombre</label><input type="text" id="wc-name" placeholder="Campaign_dimark_leads_mayo_2026"></div>
          <div class="mf"><label>Objetivo</label>
            <select id="wc-objective" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
              <option value="OUTCOME_LEADS">Leads</option>
              <option value="OUTCOME_SALES">Ventas</option>
              <option value="OUTCOME_TRAFFIC">Tráfico</option>
              <option value="OUTCOME_ENGAGEMENT">Interacción</option>
              <option value="OUTCOME_AWARENESS">Reconocimiento</option>
            </select>
          </div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
            <div class="mf"><label>Fecha inicio</label><input type="datetime-local" id="wc-start"></div>
            <div class="mf"><label>Fecha fin (opcional)</label><input type="datetime-local" id="wc-stop"></div>
          </div>
        </div>
        <div class="card">
          <div class="chd"><div class="ctit" style="color:var(--b)">Conjunto de anuncios</div></div>
          <div class="mf"><label>Nombre del conjunto</label><input type="text" id="was-name" placeholder="Conjunto 1 — Medellín 30-45"></div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
            <div class="mf"><label>Presupuesto diario (COP)</label><input type="number" id="was-budget" placeholder="50000"></div>
            <div class="mf"><label>Tipo</label>
              <select id="was-budget-type" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
                <option value="daily">Diario</option>
                <option value="lifetime">Total</option>
              </select>
            </div>
          </div>
          <div class="mf"><label>Objetivo de optimización</label>
            <select id="was-optimization" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
              <option value="CONVERSATIONS">Conversaciones</option>
              <option value="LEAD_GENERATION">Generación de leads</option>
              <option value="LINK_CLICKS">Clics en enlace</option>
              <option value="REACH">Alcance</option>
              <option value="IMPRESSIONS">Impresiones</option>
              <option value="LANDING_PAGE_VIEWS">Vistas de landing</option>
            </select>
          </div>
          <div class="mf"><label>Estrategia de puja</label>
            <select id="was-bid" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
              <option value="LOWEST_COST_WITHOUT_CAP">Menor costo (automático)</option>
              <option value="LOWEST_COST_WITH_BID_CAP">Límite de puja</option>
              <option value="COST_CAP">Límite de costo</option>
            </select>
          </div>
        </div>
      </div>
      <div class="card" style="margin-top:12px">
        <div class="chd"><div class="ctit" style="color:var(--b)">Segmentación del conjunto</div></div>
        <div class="seg-grid">
          <div class="seg-field"><div class="seg-label">Ubicaciones</div><input class="seg-input" id="was-location" placeholder="CO (Colombia), Medellín..."></div>
          <div class="seg-field"><div class="seg-label">Rango de edad</div>
            <div style="display:flex;gap:8px">
              <input class="seg-input" id="was-age-min" placeholder="18" style="width:70px">
              <span style="color:var(--m);align-self:center">—</span>
              <input class="seg-input" id="was-age-max" placeholder="65" style="width:70px">
            </div>
          </div>
          <div class="seg-field"><div class="seg-label">Género</div>
            <div class="seg-tags">
              <div class="stag active" data-click="toggleSeg|__el" id="was-gender-all">Todos</div>
              <div class="stag" data-click="toggleSeg|__el" id="was-gender-m">Hombres</div>
              <div class="stag" data-click="toggleSeg|__el" id="was-gender-f">Mujeres</div>
            </div>
          </div>
          <div class="seg-field"><div class="seg-label">Intereses</div><input class="seg-input" id="was-interests" placeholder="Salud dental, odontología..."></div>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;background:var(--bg3);border:1px dashed var(--br2);border-radius:8px">
        <span style="font-size:11px;color:var(--m);flex:1">Guarda esta configuración para reutilizarla en futuras campañas de este cliente</span>
        <button data-click="saveMetaAudience" style="padding:5px 14px;border-radius:6px;font-size:11px;background:none;border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb);white-space:nowrap">💾 Guardar audiencia</button>
      </div>
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
        <button data-click="goWizardStep|1" style="padding:8px 16px;border-radius:7px;font-size:13px;background:none;border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">← Atrás</button>
        <button data-click="goWizardStep|3" style="padding:8px 18px;border-radius:7px;font-size:13px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Siguiente →</button>
      </div>
    </div>

    <!-- Paso 3: Anuncio -->
    <div id="wizard-p3" style="display:none">
      <div class="g2" style="margin-bottom:12px">
        <div class="card">
          <div class="chd"><div class="ctit" style="color:var(--red)">Creativo</div></div>
          <div style="display:flex;gap:6px;margin-bottom:12px">
            <button id="ad-mode-image" data-click="switchAdMode|image" style="flex:1;padding:8px;border-radius:7px;font-size:12px;background:var(--rl);border:1px solid var(--rb);color:var(--red);cursor:pointer;font-family:var(--fb)">📷 Imagen</button>
            <button id="ad-mode-video" data-click="switchAdMode|video" style="flex:1;padding:8px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">🎬 Video</button>
            <button id="ad-mode-post"  data-click="switchAdMode|post"  style="flex:1;padding:8px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">📱 Post</button>
          </div>
          <div id="ad-panel-image">
            <div id="ad-drop-zone" data-click="_scTrigger|ad-file-input"
              style="border:2px dashed var(--br2);border-radius:10px;padding:28px 16px;text-align:center;cursor:pointer"
              ondragover="event.preventDefault();this.style.borderColor='var(--red)'"
              ondragleave="this.style.borderColor='var(--br2)'"
              ondrop="handleAdFileDrop(event)">
              <div style="font-size:24px;margin-bottom:6px">🖼</div>
              <div style="font-size:13px;color:var(--t);font-weight:600">Arrastra la imagen aquí</div>
              <div style="font-size:11px;color:var(--m);margin-top:3px">o haz clic · JPG/PNG · max 30MB</div>
              <input type="file" id="ad-file-input" accept="image/jpeg,image/png,image/gif,image/webp" style="display:none" data-change="handleAdFileSelect|__el">
            </div>
            <div id="ad-upload-preview" style="display:none;margin-top:10px">
              <img id="ad-preview-img" style="width:100%;border-radius:8px;max-height:200px;object-fit:cover" src="">
              <div style="display:flex;align-items:center;gap:8px;margin-top:6px">
                <span id="ad-upload-status" style="font-size:11px;color:var(--m)">Imagen seleccionada</span>
                <button data-click="clearAdImage" style="padding:3px 8px;font-size:11px;border-radius:5px;background:none;border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">✕</button>
              </div>
            </div>
          </div>
          <div id="ad-panel-video" style="display:none">
            <div id="ad-video-drop" data-click="_scTrigger|ad-video-input"
              style="border:2px dashed var(--br2);border-radius:10px;padding:28px 16px;text-align:center;cursor:pointer">
              <div style="font-size:24px;margin-bottom:6px">🎬</div>
              <div style="font-size:13px;color:var(--t);font-weight:600">Arrastra el video aquí</div>
              <div style="font-size:11px;color:var(--m);margin-top:3px">MP4/MOV · max 1GB</div>
              <input type="file" id="ad-video-input" accept="video/mp4,video/quicktime,video/x-msvideo,video/mpeg" style="display:none" data-change="handleAdVideoSelect|__el">
            </div>
            <div id="ad-video-preview" style="display:none;margin-top:10px">
              <video id="ad-preview-vid" controls style="width:100%;border-radius:8px;max-height:200px"></video>
              <div style="display:flex;align-items:center;gap:8px;margin-top:6px">
                <span id="ad-video-status" style="font-size:11px;color:var(--m)">Video seleccionado</span>
                <div id="ad-video-progress" style="display:none;flex:1;height:4px;background:var(--br2);border-radius:2px"><div id="ad-video-bar" style="height:100%;background:var(--red);border-radius:2px;width:0%"></div></div>
                <button data-click="clearAdVideo" style="padding:3px 8px;font-size:11px;border-radius:5px;background:none;border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">✕</button>
              </div>
            </div>
            <div style="margin-top:8px;padding:8px 10px;background:var(--bg3);border-radius:7px;font-size:11px;color:var(--m)">
              MP4 H.264 · Relación 1:1, 4:5 o 9:16 · Máx 30fps · Audio AAC
            </div>
          </div>
          <div id="ad-panel-post" style="display:none">
            <div style="display:flex;gap:6px;margin-bottom:8px;align-items:center">
              <select id="ad-page-select" data-change="_scLoadPagePostsSync" style="flex:1;background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:7px 10px;font-size:12px;color:var(--t);font-family:var(--fb);outline:none">
                <option value="">— Selecciona una página —</option>
              </select>
              <button data-click="loadMetaPages" style="padding:7px 12px;border-radius:7px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">Cargar páginas</button>
            </div>
            <div id="ad-posts-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:260px;overflow-y:auto"></div>
            <div id="ad-selected-post" style="display:none;margin-top:8px;padding:8px;background:var(--rl);border:1px solid var(--rb);border-radius:7px;font-size:12px;color:var(--red)"></div>
          </div>
        </div>
        <div class="card">
          <div class="chd"><div class="ctit" style="color:var(--b)">Copy del anuncio</div></div>
          <div class="mf"><label>Página de Facebook</label>
            <select id="ad-page-id-select" style="width:100%;background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:7px 10px;font-size:12px;color:var(--t);font-family:var(--fb);outline:none">
              <option value="">— Selecciona una página —</option>
            </select>
          </div>
          <div class="mf"><label>Nombre del anuncio</label><input type="text" id="ad-name" placeholder="Anuncio 1 — Leads Mayo"></div>
          <div class="mf"><label>Titular (máx 40 caracteres)</label><input type="text" id="ad-headline" placeholder="Implantes dentales desde $X COP" maxlength="40" data-input="_scSetText|ap-head|Tu titular irá aquí|__val"></div>
          <div class="mf"><label>Texto principal (máx 125 caracteres)</label><textarea id="ad-primary-text" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 10px;font-size:12px;color:var(--t);font-family:var(--fb);outline:none;resize:none;height:60px;width:100%" placeholder="¿Buscas mejorar tu sonrisa? Conoce nuestros tratamientos..." maxlength="125" data-input="_scSetText|ap-text|La descripción...|__val"></textarea></div>
          <div class="mf"><label>URL de destino</label><input type="url" id="ad-link-url" placeholder="https://tusitio.com/servicios"></div>
          <div class="mf"><label>CTA</label>
            <select id="ad-cta" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;width:100%">
              <option value="LEARN_MORE">Más información</option>
              <option value="CONTACT_US">Contáctenos</option>
              <option value="SHOP_NOW">Comprar ahora</option>
              <option value="SIGN_UP">Registrarse</option>
              <option value="GET_QUOTE">Obtener cotización</option>
              <option value="BOOK_TRAVEL">Reservar</option>
              <option value="SUBSCRIBE">Suscribirse</option>
              <option value="SEND_MESSAGE">Enviar mensaje</option>
            </select>
          </div>
          <!-- AVI copy helper -->
          <div style="margin-top:10px;padding:10px;background:var(--bg3);border-radius:8px;border:1px solid var(--br)">
            <div style="font-size:11px;color:var(--m);margin-bottom:6px">✦ AVI — Generar copy para este anuncio</div>
            <div class="avi-row" style="margin-bottom:0">
              <input class="avi-in" id="wizard-copy-q" placeholder="Ej: implantes dentales, adultos 40+, urgencia..." onkeydown="if(event.key==='Enter')wizardGenerateCopy()">
              <button class="avi-send" data-click="wizardGenerateCopy">Generar</button>
            </div>
            <div class="avi-resp" id="wizard-copy-resp" style="margin-top:6px"></div>
          </div>
        </div>
      </div>
      <div style="display:flex;gap:8px;justify-content:flex-end">
        <button data-click="goWizardStep|2" style="padding:8px 16px;border-radius:7px;font-size:13px;background:none;border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">← Atrás</button>
        <button data-click="goWizardStep|4" style="padding:8px 18px;border-radius:7px;font-size:13px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Revisar →</button>
      </div>
    </div>

    <!-- Paso 4: Confirmar -->
    <div id="wizard-p4" style="display:none">
      <div class="card">
        <div class="chd"><div class="ctit">Resumen antes de crear</div></div>
        <div id="wizard-summary" style="font-size:13px;line-height:1.8;color:var(--m)"></div>
        <div style="background:rgba(245,197,67,.08);border:1px solid rgba(245,197,67,.2);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--y);margin-top:12px">
          ⚠ La campaña, Conjunto y Anuncio se crearán en estado <strong>PAUSADO</strong>. Revísalos en Meta Ads Manager antes de activar.
        </div>
        <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:14px">
          <button data-click="goWizardStep|3" style="padding:8px 16px;border-radius:7px;font-size:13px;background:none;border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">← Editar</button>
          <button id="wizard-create-btn" data-click="executeWizard" style="padding:8px 20px;border-radius:7px;font-size:13px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Crear todo en Meta →</button>
        </div>
        <div id="wizard-msg" style="font-size:12px;margin-top:8px;text-align:center"></div>
      </div>
    </div>
  </div>

  <!-- ═══ TAB: CREATIVIDADES ═══ -->
  <div class="meta-panel" id="mpanel-creatividades" style="display:none">

    <!-- RANKING DE ANUNCIOS ACTIVOS -->
    <div class="card" style="margin-bottom:14px">
      <div class="chd">
        <div class="ctit">📊 Rendimiento de anuncios activos</div>
        <button data-click="loadMetaCreativeRanking" style="padding:4px 10px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">↻ Actualizar</button>
      </div>
      <div id="meta-creative-ranking" style="font-size:12px;color:var(--m);text-align:center;padding:12px">Cargando rendimiento...</div>
      <div style="margin-top:10px"><button data-click="metaAnalyzeTab|creatividades|avi-meta-creat-resp" class="btn-avi-analyze">✦ Analizar creatividades con AVI</button><div class="avi-resp" id="avi-meta-creat-resp" style="display:none;margin-top:10px"></div></div>
    </div>

    <div class="fmt-grid">
      <div class="fmt-card" data-click="selectFormat|feed"><div class="fmt-name">Feed / Imagen</div><div class="fmt-specs">1080×1080 · JPG/PNG · max 30MB</div></div>
      <div class="fmt-card" data-click="selectFormat|stories"><div class="fmt-name">Stories / Reels</div><div class="fmt-specs">1080×1920 · MP4 · max 15s/60s</div></div>
      <div class="fmt-card" data-click="selectFormat|carousel"><div class="fmt-name">Carrusel</div><div class="fmt-specs">1080×1080 · 2-10 tarjetas</div></div>
      <div class="fmt-card" data-click="selectFormat|video"><div class="fmt-name">Video Feed</div><div class="fmt-specs">1:1 o 4:5 · MP4 · max 240min</div></div>
    </div>
    <div class="fmt-detail" id="fmt-detail"></div>
    <div class="g2" style="margin-top:12px">
      <div class="avi">
        <div class="avi-hd"><div class="avi-orb">✦</div><div><div class="avi-name">AVI · Generador de copy y creatividades</div><div class="avi-sub">Titulares, descripciones, CTAs y guiones</div></div></div>
        <div class="avi-row">
          <input class="avi-in" id="meta-copy-q" placeholder="Ej: anuncio implantes dentales, adultos 40+..." onkeydown="if(event.key==='Enter')generateMetaCopy()">
          <button class="avi-send" data-click="generateMetaCopy">Generar</button>
        </div>
        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:4px">
          <button style="padding:4px 10px;border-radius:5px;font-size:11px;border:1px solid var(--br2);background:none;color:var(--m);cursor:pointer;font-family:var(--fb)" data-click="quickCopy|feed">Feed</button>
          <button style="padding:4px 10px;border-radius:5px;font-size:11px;border:1px solid var(--br2);background:none;color:var(--m);cursor:pointer;font-family:var(--fb)" data-click="quickCopy|stories">Stories</button>
          <button style="padding:4px 10px;border-radius:5px;font-size:11px;border:1px solid var(--br2);background:none;color:var(--m);cursor:pointer;font-family:var(--fb)" data-click="quickCopy|reels">Reels</button>
          <button style="padding:4px 10px;border-radius:5px;font-size:11px;border:1px solid var(--br2);background:none;color:var(--m);cursor:pointer;font-family:var(--fb)" data-click="quickCopy|carrusel">Carrusel</button>
          <button style="padding:4px 10px;border-radius:5px;font-size:11px;border:1px solid rgba(74,158,248,.3);background:rgba(74,158,248,.1);color:var(--b);cursor:pointer;font-family:var(--fb)" data-click="quickCopy|video_script">🎬 Guión video</button>
          <button style="padding:4px 10px;border-radius:5px;font-size:11px;border:1px solid rgba(34,201,122,.3);background:rgba(34,201,122,.1);color:var(--g);cursor:pointer;font-family:var(--fb)" data-click="quickCopy|lineamientos_disenador">📋 Brief diseñador</button>
        </div>
        <div class="avi-resp" id="meta-copy-resp"></div>
      </div>
      <div class="card" style="padding:14px">
        <div class="chd" style="margin-bottom:10px"><div class="ctit" style="font-size:12px">Vista previa</div></div>
        <div class="ad-preview">
          <div class="ap-label">Simulación · Feed Instagram</div>
          <div class="ap-img">📷 Sube aquí tu imagen/video</div>
          <div class="ap-body">
            <div class="ap-name"><div class="ap-sp"></div><span id="ap-brand">DIMARK · Patrocinado</span></div>
            <div class="ap-head" id="ap-head">Tu titular irá aquí</div>
            <div class="ap-text" id="ap-text">La descripción aparecerá aquí.</div>
            <div class="ap-cta" id="ap-cta">Más información</div>
          </div>
        </div>
        <div style="margin-top:10px;display:flex;flex-direction:column;gap:6px">
          <input 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);outline:none;width:100%" placeholder="Titular (máx 40 caracteres)" data-input="_scSetText|ap-head|Tu titular irá aquí|__val">
          <input 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);outline:none;width:100%" placeholder="Descripción (máx 125 caracteres)" data-input="_scSetText|ap-text|La descripción...|__val">
          <select 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);outline:none" data-change="_scSetText|ap-cta||__val">
            <option>Más información</option><option>Comprar ahora</option><option>Registrarse</option><option>Contactarnos</option><option>Ver más</option><option>Reservar</option><option>Obtener oferta</option>
          </select>
        </div>
      </div>
    </div>
    <div style="margin-top:12px"><div style="font-size:12px;color:var(--m);margin-bottom:8px;text-transform:uppercase;letter-spacing:.7px">Checklist antes de subir</div>
    <div class="checklist">
      <div class="cl-item" data-click="toggleCheck|__el"><div class="cl-check"></div><div class="cl-text">Archivo en formato correcto (JPG/PNG/MP4)</div></div>
      <div class="cl-item" data-click="toggleCheck|__el"><div class="cl-check"></div><div class="cl-text">Resolución mínima 1080px en el lado más corto</div></div>
      <div class="cl-item" data-click="toggleCheck|__el"><div class="cl-check"></div><div class="cl-text">Texto en imagen: menos del 20% del área</div></div>
      <div class="cl-item" data-click="toggleCheck|__el"><div class="cl-check"></div><div class="cl-text">Copy de titular listo (máx 40 caracteres)</div></div>
      <div class="cl-item" data-click="toggleCheck|__el"><div class="cl-check"></div><div class="cl-text">CTA definido y URL de destino verificada</div></div>
      <div class="cl-item" data-click="toggleCheck|__el"><div class="cl-check"></div><div class="cl-text">Pixel de Meta instalado en la landing</div></div>
      <div class="cl-item" data-click="toggleCheck|__el"><div class="cl-check"></div><div class="cl-text">Segmentación revisada y aprobada</div></div>
    </div></div>
  </div>

  <!-- ═══ TAB: PÚBLICOS (Segmentación avanzada) ═══ -->
  <div class="meta-panel" id="mpanel-publicos" style="display:none">
    <!-- Breakdown por dimensión -->
    <div class="card" style="margin-bottom:14px">
      <div class="chd"><div class="ctit" style="color:var(--b)">Desglose de rendimiento</div></div>
      <div style="display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap">
        <button class="meta-bd-btn" data-bd="publisher_platform" data-click="loadMetaBreakdown|publisher_platform" style="padding:6px 14px;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)">📍 Plataforma</button>
        <button class="meta-bd-btn" data-bd="device_platform"    data-click="loadMetaBreakdown|device_platform"    style="padding:6px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">📱 Dispositivo</button>
        <button class="meta-bd-btn" data-bd="age"                data-click="loadMetaBreakdown|age"                style="padding:6px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">👥 Edad</button>
        <button class="meta-bd-btn" data-bd="gender"             data-click="loadMetaBreakdown|gender"             style="padding:6px 14px;border-radius:7px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">⚧ Género</button>
      </div>
      <div id="meta-bd-content"><div style="font-size:12px;color:var(--m);padding:8px 0">Haz clic en una dimensión para ver el desglose de rendimiento.</div></div>
    </div>

    <!-- Estrategia de audiencias -->
    <div class="card" style="margin-bottom:14px">
      <div class="chd"><div class="ctit" style="color:var(--b)">Configuración de públicos</div></div>
      <div class="seg-grid">
        <div class="seg-field"><div class="seg-label">Ubicaciones</div><input class="seg-input" id="seg-location" placeholder="Medellín, Bogotá, Colombia..."></div>
        <div class="seg-field"><div class="seg-label">Rango de edad</div>
          <div style="display:flex;gap:8px">
            <input class="seg-input" id="seg-age-min" placeholder="Mín" style="width:80px">
            <span style="color:var(--m);align-self:center">—</span>
            <input class="seg-input" id="seg-age-max" placeholder="Máx" style="width:80px">
          </div>
        </div>
        <div class="seg-field"><div class="seg-label">Género</div>
          <div class="seg-tags">
            <div class="stag" data-click="toggleSeg|__el">Todos</div>
            <div class="stag" data-click="toggleSeg|__el">Hombres</div>
            <div class="stag" data-click="toggleSeg|__el">Mujeres</div>
          </div>
        </div>
        <div class="seg-field"><div class="seg-label">Presupuesto diario (COP)</div>
          <div class="budget-row"><input class="budget-input" id="seg-budget" placeholder="Ej: 50000"><span style="font-size:12px;color:var(--m)">COP/día</span></div>
        </div>
        <div class="seg-field" style="grid-column:span 2"><div class="seg-label">Intereses y comportamientos</div><input class="seg-input" id="seg-interests" placeholder="Salud dental, odontología, padres de familia..."></div>
        <div class="seg-field" style="grid-column:span 2"><div class="seg-label">Audiencias personalizadas</div>
          <div class="seg-tags">
            <div class="stag" data-click="toggleSeg|__el">Lista de clientes</div>
            <div class="stag" data-click="toggleSeg|__el">Visitantes del sitio</div>
            <div class="stag" data-click="toggleSeg|__el">Lookalike 1%</div>
            <div class="stag" data-click="toggleSeg|__el">Retargeting</div>
            <div class="stag" data-click="toggleSeg|__el">Interacción FB/IG</div>
          </div>
        </div>
      </div>
      <button style="margin-top:12px;padding:7px 16px;border-radius:6px;font-size:12px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb)" data-click="analyzeSegmentation">Analizar con AVI</button>
      <div class="avi-resp" id="seg-resp" style="margin-top:10px"></div>
    </div>

    <!-- AVI Públicos avanzados -->
    <div class="avi">
      <div class="avi-hd"><div class="avi-orb">✦</div><div><div class="avi-name">AVI · Estrategia de públicos</div><div class="avi-sub">Audiencias, Lookalike, exclusiones e intereses óptimos</div></div></div>
      <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px">
        <button style="padding:5px 10px;border-radius:5px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)" data-click="metaPubAVI|Dame una estrategia completa de audiencias para este cliente: públicos fríos, cálidos y retargeting con su segmentación detallada.">🗺️ Estrategia completa</button>
        <button style="padding:5px 10px;border-radius:5px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)" data-click="metaPubAVI|¿Qué audiencias Lookalike debería crear para este cliente y con qué tamaño (1%, 2%, 5%)? Justifica cada una.">👥 Lookalike óptimos</button>
        <button style="padding:5px 10px;border-radius:5px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)" data-click="metaPubAVI|¿Qué intereses específicos debo targetear en Meta Ads para este negocio? Dame 20 intereses detallados con justificación.">🎯 Intereses específicos</button>
        <button style="padding:5px 10px;border-radius:5px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)" data-click="metaPubAVI|¿Qué públicos debo excluir para mejorar la eficiencia de mis anuncios y reducir el desperdicio de presupuesto?">🚫 Exclusiones</button>
        <button style="padding:5px 10px;border-radius:5px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)" data-click="metaPubAVI|Diseña una estrategia de retargeting en 3 niveles para este cliente: visitantes del sitio, interactuaron con anuncios, y lista de clientes.">🔄 Retargeting 3 niveles</button>
      </div>
      <div class="avi-row">
        <input class="avi-in" id="meta-pub-q" placeholder="Ej: ¿qué público es mejor para este tipo de negocio?" onkeydown="if(event.key==='Enter')metaPubAVI()">
        <button class="avi-send" data-click="metaPubAVI">Analizar</button>
      </div>
      <div class="avi-resp" id="avi-resp-meta-pub"></div>
    </div>
  </div>

  <!-- ═══ TAB: COMPETENCIA ═══ -->
  <div class="meta-panel" id="mpanel-competencia" style="display:none">
    <div class="card">
      <div class="chd"><div class="ctit" style="color:var(--p)">Estudio de competencia</div></div>
      <div style="margin-bottom:14px">
        <div style="font-size:11px;color:var(--m);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px">Buscar en Meta Ads Library</div>
        <div style="display:flex;gap:6px">
          <input class="seg-input" id="lib-search" placeholder="Nombre del competidor o keyword..." style="flex:1">
          <select id="lib-country" style="background:var(--bg3);border:1px solid var(--br2);border-radius:7px;padding:8px 11px;font-size:12px;color:var(--t);font-family:var(--fb);outline:none">
            <option value="CO">Colombia</option>
            <option value="MX">México</option>
            <option value="US">USA</option>
            <option value="ES">España</option>
          </select>
          <button data-click="searchAdsLibrary" style="padding:7px 14px;border-radius:7px;font-size:12px;background:var(--b);border:none;color:#fff;cursor:pointer;font-family:var(--fb)">Buscar</button>
          <a href="https://www.facebook.com/ads/library" target="_blank" style="padding:7px 12px;border-radius:7px;font-size:12px;border:1px solid rgba(74,158,248,.3);background:rgba(74,158,248,.1);color:var(--b);text-decoration:none">↗ Abrir</a>
        </div>
        <div id="lib-results" style="margin-top:10px"></div>
      </div>
      <div class="avi">
        <div class="avi-hd"><div class="avi-orb">✦</div><div><div class="avi-name">AVI · Análisis competitivo</div><div class="avi-sub">Identifica competidores y sugiere estrategia basada en tus datos</div></div></div>
        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px">
          <button style="padding:5px 11px;border-radius:5px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)" data-click="competenciaRapida|competidores">🏢 Identificar competidores</button>
          <button style="padding:5px 11px;border-radius:5px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)" data-click="competenciaRapida|creativos">🎨 Analizar creativos</button>
          <button style="padding:5px 11px;border-radius:5px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)" data-click="competenciaRapida|estrategia">📋 Estrategia sugerida</button>
          <button style="padding:5px 11px;border-radius:5px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)" data-click="competenciaRapida|hooks">🎣 Hooks ganadores</button>
        </div>
        <div class="avi-row">
          <input class="avi-in" id="meta-comp-q" placeholder="Ej: competidores de clínica dental en Medellín..." onkeydown="if(event.key==='Enter')askAVI('meta-comp')">
          <button class="avi-send" data-click="askAVI|meta-comp">Analizar</button>
        </div>
        <div class="avi-resp" id="avi-resp-meta-comp"></div>
      </div>
    </div>
  </div>

  <!-- ═══ AVI AGENTE META ═══ -->
  <div id="avi-meta-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 · Meta Ads</div>
        <div class="avi-sub" id="avi-meta-sub">Análisis profundo y acciones sobre datos reales de campañas</div>
      </div>
    </div>
    <div style="display:flex;gap:6px;flex-wrap:wrap">
      <button class="db" data-click="aviAgentMetaQuick|Analiza todas mis campañas activas. ¿Cuáles tienen mejor ROAS? ¿Cuáles tienen frecuencia alta (>3) que indica fatiga? Dame acciones concretas.">📊 Diagnóstico completo</button>
      <button class="db" data-click="aviAgentMetaQuick|¿Qué campañas tienen CTR bajo (<1%) y qué está causando eso? Dame recomendaciones específicas de creativos, copy y segmentación para mejorarlos.">📉 CTR bajo — plan de mejora</button>
      <button class="db" data-click="aviAgentMetaQuick|¿Cómo debo distribuir el presupuesto entre mis campañas activas para maximizar el ROAS? Analiza el gasto actual y recomienda ajustes.">💰 Optimizar presupuesto</button>
      <button class="db" data-click="aviAgentMetaQuick|Dame las 5 acciones más importantes que debo hacer HOY para mejorar el rendimiento de Meta Ads de este cliente. Orden de prioridad.">⚡ Top 5 acciones urgentes</button>
      <button class="db" data-click="aviAgentMetaQuick|Analiza la frecuencia de mis conjuntos. ¿Cuáles tienen fatiga publicitaria (>3)? ¿Cuándo debo renovar creativos? Dame un plan de rotación.">🔄 Plan de creativos</button>
    </div>
    <div class="avi-row">
      <input class="avi-in" id="avi-meta-q" placeholder="Ej: ¿qué campañas pausar? ¿cómo mejorar el CPA?" onkeydown="if(event.key==='Enter')aviAgentMetaSend()">
      <button class="avi-send" data-click="aviAgentMetaSend">Analizar →</button>
    </div>
    <div class="avi-resp" id="avi-agent-resp-meta" style="display:none;white-space:normal"></div>
  </div>

</div>
<?php endif ?>
