<!-- ═══════ DOC MODAL — Documentación de módulo ═══════ -->
<div id="doc-modal" data-closeifback="closeDocModal" style="display:none;position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.82);overflow-y:auto;padding:20px 16px;justify-content:center">
  <div style="max-width:620px;width:100%;margin:0 auto;background:var(--bg);border:1px solid var(--br2);border-radius:16px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.6)">
    <div id="doc-modal-accent" style="height:3px;background:var(--red)"></div>
    <div style="background:var(--bg2);padding:18px 22px;border-bottom:1px solid var(--br);display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:1">
      <div style="display:flex;align-items:center;gap:12px">
        <div id="doc-modal-icon" style="font-size:26px;flex-shrink:0"></div>
        <div>
          <div id="doc-modal-title" style="font-family:var(--fh);font-size:16px;font-weight:700;color:var(--t)"></div>
          <div id="doc-modal-subtitle" style="font-size:11px;color:var(--m);margin-top:2px"></div>
        </div>
      </div>
      <button data-click="closeDocModal" title="Cerrar" style="background:none;border:none;color:var(--m);cursor:pointer;font-size:20px;padding:4px 8px;line-height:1;border-radius:6px;flex-shrink:0;transition:color .15s" onmouseenter="this.style.color='var(--t)'" onmouseleave="this.style.color='var(--m)'">✕</button>
    </div>
    <div id="doc-modal-body" style="padding:20px 22px;display:flex;flex-direction:column;gap:16px"></div>
  </div>
</div>

<!-- ═══════ AVI AGENTE — Modal de Confirmación ═══════ -->
<div id="avi-agent-modal" style="display:none;position:fixed;inset:0;z-index:4000;background:rgba(0,0,0,.72);align-items:center;justify-content:center">
  <div style="background:var(--bg2);border:1px solid var(--br2);border-radius:14px;padding:24px;max-width:420px;width:90%;box-shadow:0 24px 60px rgba(0,0,0,.5)">
    <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px">
      <div style="width:32px;height:32px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0">✦</div>
      <div>
        <div style="font-family:var(--fh);font-size:14px;font-weight:700" data-i18n="avi.modal.confirm_title">AVI Agente · Confirmar acción</div>
        <div style="font-size:11px;color:var(--m)" data-i18n="avi.modal.confirm_sub">Revisa antes de ejecutar</div>
      </div>
    </div>
    <div id="avi-agent-modal-msg" style="font-size:13px;font-weight:600;margin-bottom:10px;color:var(--t)"></div>
    <div id="avi-agent-modal-explain" style="font-size:12px;color:var(--m);line-height:1.6;margin-bottom:18px;background:var(--bg3);border-radius:8px;padding:10px 12px;display:none"></div>
    <div style="display:flex;gap:8px;justify-content:flex-end">
      <button data-click="aviAgentModalClose" 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)" data-i18n="avi.modal.cancel">Cancelar</button>
      <button id="avi-agent-modal-confirm" style="padding:8px 18px;border-radius:7px;font-size:13px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb);font-weight:600" data-i18n="avi.modal.execute">Ejecutar</button>
    </div>
  </div>
</div>

<!-- Modal editor HTML -->
<div id="editor-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:600;flex-direction:column">
  <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg2);border-bottom:1px solid var(--br)">
    <div style="display:flex;align-items:center;gap:10px">
      <span style="font-family:var(--fh);font-size:14px;font-weight:700">Editor HTML</span>
      <span id="editor-style-badge" style="font-size:11px;padding:2px 8px;border-radius:10px;background:var(--rl);color:var(--red)"></span>
    </div>
    <div style="display:flex;gap:8px">
      <button data-click="saveEditedProposal" 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>
      <button data-click="previewEdited" 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)">Preview</button>
      <button data-click="closeEditor" style="padding:6px 12px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">✕</button>
    </div>
  </div>
  <div style="display:flex;flex:1;overflow:hidden">
    <div style="flex:1;display:flex;flex-direction:column;border-right:1px solid var(--br)">
      <textarea id="html-editor" spellcheck="false" style="flex:1;background:#1e1e1e;color:#d4d4d4;font-family:monospace;font-size:12px;line-height:1.6;padding:16px;border:none;outline:none;resize:none;tab-size:2;width:100%;height:100%"></textarea>
    </div>
    <div style="flex:1;display:flex;flex-direction:column">
      <iframe id="editor-preview" style="flex:1;border:none;background:#fff;width:100%;height:100%"></iframe>
    </div>
  </div>
  <div id="editor-msg" style="padding:8px 20px;font-size:12px;text-align:center;min-height:32px"></div>
</div>
<div id="gt_element" style="display:none"></div>
<script>
function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'es'},'gt_element');}
function gtLang(lang){
  var host=location.hostname;
  if(lang==='es'){
    document.cookie='googtrans=;expires=Thu,01 Jan 1970 00:00:00 UTC;path=/';
    document.cookie='googtrans=;expires=Thu,01 Jan 1970 00:00:00 UTC;path=/;domain='+host;
    document.cookie='googtrans=;expires=Thu,01 Jan 1970 00:00:00 UTC;path=/;domain=.'+host;
  } else {
    document.cookie='googtrans=/es/'+lang+';path=/';
    document.cookie='googtrans=/es/'+lang+';path=/;domain='+host;
    document.cookie='googtrans=/es/'+lang+';path=/;domain=.'+host;
  }
  localStorage.setItem('sc_lang',lang);
  location.reload();
}
(function(){
  var lang=localStorage.getItem('sc_lang')||'es';
  var btn=document.getElementById('gl-'+lang);
  if(btn) btn.style.opacity='1';
})();
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<!-- ═══════ WIZARD NUEVA CAMPAÑA — JS ═══════ -->
<script>
const GCW_STEPS = ['Tipo','Brief + IA','Keywords','Anuncios','Lanzar'];
const GCW_LOCS  = [
  {id:2170,   name:'🇨🇴 Colombia'},
  {id:1003660,name:'🇨🇴 Bogotá'},
  {id:1003662,name:'🇨🇴 Medellín'},
  {id:1003663,name:'🇨🇴 Cali'},
  {id:1003661,name:'🇨🇴 Barranquilla'},
  {id:1009867,name:'🇨🇴 Cartagena'},
  {id:1003664,name:'🇨🇴 Bucaramanga'},
  {id:1003666,name:'🇨🇴 Pereira'},
  {id:2840,   name:'🇺🇸 Estados Unidos'},
  {id:2484,   name:'🇲🇽 México'},
  {id:2724,   name:'🇪🇸 España'},
  {id:2032,   name:'🇦🇷 Argentina'},
  {id:2152,   name:'🇨🇱 Chile'},
  {id:2604,   name:'🇵🇪 Perú'},
  {id:2218,   name:'🇪🇨 Ecuador'},
  {id:2076,   name:'🇧🇷 Brasil'},
  {id:2862,   name:'🇻🇪 Venezuela'},
  {id:2320,   name:'🇬🇹 Guatemala'},
  {id:2188,   name:'🇨🇷 Costa Rica'},
];

let gcw = {
  step:0, type:'SEARCH', goal:'LEADS', url:'', brief:'', plan:null,
  locations:[],
  budget:0, bidding:'MAXIMIZE_CLICKS',
};

function openGCWizard(){
  if(!currentClient||currentClient==='all'){alert('Selecciona un cliente primero');return;}
  gcw = {step:0,type:'SEARCH',goal:'LEADS',url:'',brief:'',plan:null,
         locations:[],budget:0,bidding:'MAXIMIZE_CLICKS'};
  // Pre-fill URL from client
  const cl = CLIENTS.find(x=>x.id==currentClient);
  if(cl?.url) gcw.url = cl.url.startsWith('http')?cl.url:'https://'+cl.url;
  // Cargar segmentación guardada
  try {
    const saved = localStorage.getItem('google_seg_'+currentClient);
    if(saved){ const s=JSON.parse(saved);
      if(s.locations?.length) gcw.locations=s.locations;
      if(s.budget) gcw.budget=s.budget;
      if(s.bidding) gcw.bidding=s.bidding;
    }
  } catch(e){}
  document.getElementById('gcw-modal').style.display='flex';
  document.body.style.overflow='hidden';
  gcwRender();
}
function gcwSaveSeg(){
  const budget=parseInt(document.getElementById('gcw-budget')?.value)||gcw.budget||150000;
  const bidding=document.getElementById('gcw-bid')?.value||gcw.bidding;
  localStorage.setItem('google_seg_'+currentClient,JSON.stringify({locations:gcw.locations,budget,bidding}));
  showToast('✓ Segmentación guardada — se pre-cargará en la próxima campaña','var(--g)');
}
function closeGCWizard(){
  document.getElementById('gcw-modal').style.display='none';
  document.body.style.overflow='';
}

// ── PROGRESS BAR ──────────────────────────────────────────────────────────
function gcwRenderProgress(){
  const bar = document.getElementById('gcw-progress-bar');
  if(!bar) return;
  bar.innerHTML = GCW_STEPS.map((s,i)=>{
    const cls = i<gcw.step?'done':i===gcw.step?'active':'';
    return `<div class="gcw-prog-step ${cls}">
      <div class="gcw-ps-num">${i<gcw.step?'✓':(i+1)}</div>
      <div class="gcw-ps-lbl">${s}</div>
    </div>`;
  }).join('');
  // footer buttons
  document.getElementById('gcw-prev-btn').style.display = gcw.step===0?'none':'block';
  const nxt = document.getElementById('gcw-next-btn');
  if(gcw.step===4){ nxt.textContent='✦ Crear campaña'; nxt.className='gcw-btn gcw-btn-grn'; }
  else { nxt.textContent='Siguiente →'; nxt.className='gcw-btn gcw-btn-pri'; }
}

// ── RENDER STEPS ─────────────────────────────────────────────────────────
function gcwRender(){
  gcwRenderProgress();
  const body = document.getElementById('gcw-body');
  if(!body) return;
  const renders = [gcwStep0,gcwStep1,gcwStep2,gcwStep3,gcwStep4];
  body.innerHTML = renders[gcw.step]();
  // Bind live updates
  if(gcw.step===1){
    ['gcw-url','gcw-brief'].forEach(id=>{
      const el=document.getElementById(id);
      if(el) el.addEventListener('input',()=>{
        if(id==='gcw-url') gcw.url=el.value;
        if(id==='gcw-brief') gcw.brief=el.value;
      });
    });
  }
}

// STEP 0 — Tipo y objetivo
function gcwStep0(){
  const types = [
    {id:'SEARCH',    icon:'🔍', name:'Search',          desc:'Anuncios de texto cuando buscan tu servicio en Google', rec:true},
    {id:'PERFORMANCE_MAX',icon:'⚡',name:'Performance Max',desc:'IA de Google en todos los canales a la vez (Search, Display, YouTube, Maps)'},
    {id:'DISPLAY',   icon:'🖼', name:'Display',          desc:'Banners visuales en millones de sitios y apps de la red de Google'},
  ];
  const goals = [
    {id:'LEADS',  icon:'🎯', label:'Leads / Contactos'},
    {id:'SALES',  icon:'🛒', label:'Ventas'},
    {id:'TRAFFIC',icon:'🌐', label:'Tráfico web'},
    {id:'AWARENESS',icon:'📣',label:'Reconocimiento'},
  ];
  return `<div class="gcw-stit">¿Qué tipo de campaña?</div>
    <div class="gcw-ssub">Elige el tipo según tu objetivo principal. Para captar clientes que ya buscan tu servicio, <b>Search</b> es la mejor opción.</div>
    <div class="gcw-type-grid">
      ${types.map(t=>`<div class="gcw-tc ${gcw.type===t.id?'sel':''}" onclick="gcw.type='${t.id}';document.querySelectorAll('.gcw-tc').forEach(e=>e.classList.remove('sel'));this.classList.add('sel')">
        <div class="gcw-tc-icon">${t.icon}</div>
        <div class="gcw-tc-name">${t.name} ${t.rec?'<span style="font-size:9px;padding:1px 5px;border-radius:3px;background:rgba(34,201,122,.15);color:var(--g)">Recomendado</span>':''}</div>
        <div class="gcw-tc-desc">${t.desc}</div>
      </div>`).join('')}
    </div>
    <div class="gcw-slbl">Objetivo principal</div>
    <div class="gcw-goals">
      ${goals.map(g=>`<div class="gcw-goal ${gcw.goal===g.id?'sel':''}" onclick="gcw.goal='${g.id}';document.querySelectorAll('.gcw-goal').forEach(e=>e.classList.remove('sel'));this.classList.add('sel')">
        ${g.icon} ${g.label}
      </div>`).join('')}
    </div>`;
}

// STEP 1 — Brief + IA
function gcwStep1(){
  const hasplan = !!gcw.plan;
  return `<div class="gcw-stit">Cuéntale a AVI qué anunciamos</div>
    <div class="gcw-ssub">AVI generará grupos de anuncios, keywords y textos optimizados para el mercado colombiano.</div>
    <div style="margin-bottom:13px">
      <div class="gcw-slbl">URL de destino (página donde llega el usuario) *</div>
      <input id="gcw-url" class="gcw-inp" type="url" value="${escapeHtml(gcw.url)}" placeholder="https://tuempresa.com/servicio">
    </div>
    <div style="margin-bottom:16px">
      <div class="gcw-slbl">Brief de la campaña *</div>
      <textarea id="gcw-brief" class="gcw-ta" rows="5" placeholder="Ej: Clínica dental en Medellín. Servicios: implantes, blanqueamiento, ortodoncia. Público objetivo: adultos 30-60 años con capacidad de pago. Meta: generar llamadas y formularios de pacientes nuevos. Diferencial: tecnología digital, sin dolor, financiación disponible. Competidores: Sonría, Dental Solutions...">${escapeHtml(gcw.brief)}</textarea>
      <div style="font-size:11px;color:var(--m);margin-top:4px">Cuanto más específico, mejores serán los anuncios generados</div>
    </div>
    ${hasplan
      ? `<div class="gcw-ok">✓ Estructura generada — avanza para revisar y editar grupos de anuncios y keywords</div>`
      : `<button class="gcw-btn gcw-btn-pri" onclick="gcwGenerateAI()" style="width:100%">✦ Generar estructura completa con AVI</button>`
    }`;
}

// STEP 2 — Grupos y Keywords
function gcwStep2(){
  if(!gcw.plan) return `<div class="gcw-gen"><div class="gcw-gen-orb">✦</div><div style="font-size:14px;font-weight:600">Vuelve al paso anterior y genera la estructura con AVI</div></div>`;
  const ags = gcw.plan.ad_groups||[];
  return `<div class="gcw-stit">Grupos de anuncios y keywords</div>
    <div class="gcw-ssub">AVI creó <b>${ags.length} grupos</b> con <b>${ags.reduce((a,g)=>a+g.keywords.length,0)} keywords</b>. Puedes editar nombres, agregar o eliminar keywords.</div>
    <div style="font-size:11px;color:var(--m);margin-bottom:14px;display:flex;gap:12px">
      <span style="padding:2px 7px;border-radius:3px;background:rgba(74,158,248,.12);color:var(--b)">B Amplia</span>
      <span style="padding:2px 7px;border-radius:3px;background:rgba(34,201,122,.12);color:var(--g)">"P" Frase</span>
      <span style="padding:2px 7px;border-radius:3px;background:rgba(155,127,244,.12);color:var(--p)">[E] Exacta</span>
    </div>
    ${ags.map((ag,i)=>`<div class="gcw-ag">
      <div class="gcw-ag-hd">
        <div class="gcw-ag-n">${i+1}</div>
        <input value="${escapeHtml(ag.name)}" oninput="gcw.plan.ad_groups[${i}].name=this.value"
          style="flex:1;background:none;border:none;border-bottom:1px solid var(--br2);color:var(--t);font-size:13px;font-weight:600;font-family:var(--fh);padding:2px 4px;outline:none">
        <span style="font-size:11px;color:var(--m);flex-shrink:0">${escapeHtml(ag.theme||'')}</span>
      </div>
      <div class="gcw-kw-tags" id="gcw-kws-${i}">
        ${ag.keywords.map((k,j)=>{
          const m=k.match||'B'; const mc=m[0];
          const display=mc==='P'?'"'+k.text+'"':mc==='E'?'['+k.text+']':k.text;
          return `<span class="gcw-kw gcw-kw-${mc}">${escapeHtml(display)} <span class="gcw-kw-x" onclick="gcwDelKw(${i},${j})">×</span></span>`;
        }).join('')}
        <span onclick="gcwAddKw(${i})" style="cursor:pointer;font-size:11px;color:var(--m);padding:3px 9px;border:1px dashed var(--br2);border-radius:4px;transition:all .15s" onmouseover="this.style.borderColor='var(--t)'" onmouseout="this.style.borderColor='var(--br2)'">+ Agregar</span>
      </div>
    </div>`).join('')}`;
}

// STEP 3 — Anuncios (RSA)
function gcwStep3(){
  if(!gcw.plan) return '';
  const ags = gcw.plan.ad_groups||[];
  const domain = gcw.url ? (new URL(gcw.url.startsWith('http')?gcw.url:'https://'+gcw.url)).hostname : 'tusitio.com';
  return `<div class="gcw-stit">Anuncios de búsqueda</div>
    <div class="gcw-ssub">Revisa y edita los títulos y descripciones. El anuncio de Google combina los títulos automáticamente — escríbelos independientes.</div>
    ${ags.map((ag,i)=>`<div style="margin-bottom:24px">
      <div style="font-weight:700;font-size:13px;font-family:var(--fh);margin-bottom:12px;color:var(--t)">📌 Grupo ${i+1}: ${escapeHtml(ag.name)}</div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
        <div>
          <div class="gcw-slbl" style="margin-bottom:7px">Títulos — máx. 30 caracteres c/u</div>
          ${(ag.headlines||[]).slice(0,3).map((h,j)=>`<div style="position:relative;margin-bottom:7px">
            <input class="gcw-inp" maxlength="30" value="${escapeHtml(h)}"
              oninput="gcw.plan.ad_groups[${i}].headlines[${j}]=this.value;gcwUpdatePreview(${i});const s=document.getElementById('gcw-hc-${i}-${j}');if(s){s.textContent=this.value.length+'/30';s.style.color=this.value.length>27?'var(--y)':'var(--m)'}"
              style="padding-right:38px">
            <span id="gcw-hc-${i}-${j}" style="position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:10px;color:${h.length>27?'var(--y)':'var(--m)'}">${h.length}/30</span>
          </div>`).join('')}
          <div class="gcw-slbl" style="margin:11px 0 7px">Descripciones — máx. 90 caracteres c/u</div>
          ${(ag.descriptions||[]).slice(0,2).map((d,j)=>`<div style="position:relative;margin-bottom:7px">
            <textarea class="gcw-ta" maxlength="90" rows="2"
              oninput="gcw.plan.ad_groups[${i}].descriptions[${j}]=this.value;gcwUpdatePreview(${i});const s=document.getElementById('gcw-dc-${i}-${j}');if(s){s.textContent=this.value.length+'/90';s.style.color=this.value.length>80?'var(--y)':'var(--m)'}"
              style="padding-right:40px">${escapeHtml(d)}</textarea>
            <span id="gcw-dc-${i}-${j}" style="position:absolute;right:9px;bottom:9px;font-size:10px;color:${d.length>80?'var(--y)':'var(--m)'}">${d.length}/90</span>
          </div>`).join('')}
        </div>
        <div>
          <div class="gcw-slbl" style="margin-bottom:7px">Vista previa</div>
          <div class="gcw-prev" id="gcw-prev-${i}">
            <div class="gcw-prev-lbl">Patrocinado · Anuncio de búsqueda</div>
            <div class="gcw-prev-url">${domain}</div>
            <div class="gcw-prev-ttl" id="gcw-pt-${i}">${escapeHtml((ag.headlines||[]).slice(0,3).join(' | '))}</div>
            <div class="gcw-prev-dsc" id="gcw-pd-${i}">${escapeHtml((ag.descriptions||[]).join(' '))}</div>
          </div>
        </div>
      </div>
    </div>`).join('')}`;
}

// STEP 4 — Segmentación + Resumen
function gcwStep4(){
  if(!gcw.plan) return '';
  const ag = gcw.plan.ad_groups||[];
  const totalKws = ag.reduce((a,g)=>a+g.keywords.length,0);
  const budget = gcw.budget || gcw.plan.budget_daily_cop || 150000;
  return `<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px">
    <div>
      <div class="gcw-slbl">Presupuesto diario (COP)</div>
      <div style="display:flex;align-items:center;gap:7px">
        <span style="color:var(--m);font-size:13px">$</span>
        <input id="gcw-budget" class="gcw-inp" type="number" value="${budget}" min="10000" step="10000"
          oninput="gcw.budget=parseInt(this.value)||0">
      </div>
      <div style="font-size:11px;color:var(--m);margin-top:4px">AVI sugiere: $${(gcw.plan.budget_daily_cop||0).toLocaleString('es-CO')} COP/día</div>
    </div>
    <div>
      <div class="gcw-slbl">Estrategia de puja</div>
      <select id="gcw-bid" class="gcw-inp" onchange="gcw.bidding=this.value">
        <option value="MAXIMIZE_CLICKS" ${(gcw.plan.bidding||'MAXIMIZE_CLICKS')==='MAXIMIZE_CLICKS'?'selected':''}>Maximizar clics — recomendado sin historial</option>
        <option value="MAXIMIZE_CONVERSIONS" ${gcw.plan.bidding==='MAXIMIZE_CONVERSIONS'?'selected':''}>Maximizar conversiones</option>
        <option value="TARGET_CPA">Target CPA — costo por adquisición fijo</option>
        <option value="MANUAL_CPC">CPC manual</option>
      </select>
      ${gcw.plan.bidding_reason?`<div style="font-size:11px;color:var(--m);margin-top:4px">${escapeHtml(gcw.plan.bidding_reason)}</div>`:''}
    </div>
  </div>
  <div style="margin-bottom:18px">
    <div class="gcw-slbl">Ubicaciones de segmentación</div>
    <div id="gcw-locs" style="display:flex;flex-wrap:wrap;min-height:28px;margin-bottom:8px">
      ${gcw.locations.length
        ? gcw.locations.map((l,i)=>`<span class="gcw-loc">${escapeHtml(l.name)} <span onclick="gcwRemoveLoc(${i})" style="cursor:pointer;margin-left:3px;opacity:.6" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=.6">×</span></span>`).join('')
        : `<span style="font-size:12px;color:var(--m);font-style:italic">Sin restricción geográfica — campañas en todos los países (puedes agregar ubicaciones específicas abajo)</span>`
      }
    </div>
    <select class="gcw-inp" style="max-width:260px" onchange="gcwAddLoc(parseInt(this.value),this.options[this.selectedIndex].text);this.value=''">
      <option value="">+ Agregar país o ciudad...</option>
      ${GCW_LOCS.filter(l=>!gcw.locations.find(x=>x.id===l.id)).map(l=>`<option value="${l.id}">${l.name}</option>`).join('')}
    </select>
    <button onclick="gcwSaveSeg()" style="margin-top:8px;padding:5px 14px;border-radius:6px;font-size:11px;background:none;border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">💾 Guardar segmentación para próximas campañas</button>
  </div>
  <div style="background:var(--bg3);border-radius:10px;padding:16px;margin-bottom:6px">
    <div style="font-weight:700;font-size:13px;font-family:var(--fh);margin-bottom:11px">📋 Resumen — se creará en pausa para revisión</div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px">
      <div>📌 <b>Campaña:</b> ${escapeHtml(gcw.plan.campaign_name)}</div>
      <div>📣 <b>Tipo:</b> ${gcw.type}</div>
      <div>🎯 <b>Objetivo:</b> ${gcw.goal}</div>
      <div>💰 <b>Presupuesto:</b> $${(budget).toLocaleString('es-CO')} COP/día</div>
      <div>📂 <b>Grupos:</b> ${ag.length}</div>
      <div>🔑 <b>Keywords:</b> ${totalKws}</div>
      <div>📝 <b>Anuncios:</b> ${ag.length} RSA</div>
      <div>📍 <b>Zonas:</b> ${gcw.locations.length ? gcw.locations.map(l=>l.name).join(', ') : 'Global (sin restricción)'}</div>
    </div>
  </div>
  <div id="gcw-create-status"></div>`;
}

// ── NAVIGATION ────────────────────────────────────────────────────────────
function gcwNext(){
  if(gcw.step===4){ gcwCreate(); return; }
  // Validate before advance
  if(gcw.step===0 && !gcw.type){ alert('Selecciona el tipo de campaña'); return; }
  if(gcw.step===1){
    gcw.url   = (document.getElementById('gcw-url')?.value   || '').trim();
    gcw.brief = (document.getElementById('gcw-brief')?.value || '').trim();
    if(!gcw.url)  { alert('Ingresa la URL de destino'); return; }
    if(gcw.brief.length<20){ alert('El brief debe tener al menos 20 caracteres'); return; }
    if(!gcw.plan){ gcwGenerateAI(); return; }
  }
  gcw.step++;
  gcwRender();
  document.getElementById('gcw-body').scrollIntoView({behavior:'smooth'});
}
function gcwPrev(){
  if(gcw.step>0){ gcw.step--; gcwRender(); }
}

// ── AI GENERATION ─────────────────────────────────────────────────────────
async function gcwGenerateAI(){
  gcw.url   = (document.getElementById('gcw-url')?.value   || '').trim();
  gcw.brief = (document.getElementById('gcw-brief')?.value || '').trim();
  if(!gcw.url)  { alert('Ingresa la URL de destino'); return; }
  if(gcw.brief.length<20){ alert('El brief debe tener al menos 20 caracteres'); return; }
  const body = document.getElementById('gcw-body');
  body.innerHTML = `<div class="gcw-gen">
    <div class="gcw-gen-orb">✦</div>
    <div style="font-family:var(--fh);font-size:17px;font-weight:700">AVI está diseñando tu campaña</div>
    <div style="font-size:13px;color:var(--m)">Generando grupos, keywords y anuncios optimizados…</div>
  </div>`;
  document.getElementById('gcw-next-btn').disabled = true;
  try {
    const ctx = document.getElementById('google-ctx')?.value||'';
    const d = await fetch(`api/google-ads-create.php?action=ai_plan&client_id=${currentClient}`,{
      method:'POST', headers:{'Content-Type':'application/json'},
      body:JSON.stringify({brief:gcw.brief, type:gcw.type, goal:gcw.goal, url:gcw.url, context:ctx})
    }).then(r=>r.json());
    if(!d.ok){ body.innerHTML=`<div class="gcw-err">✗ ${escapeHtml(d.error||'Error al generar')}</div>`; return; }
    gcw.plan = d.plan;
    gcw.budget = d.plan.budget_daily_cop||150000;
    gcw.bidding = d.plan.bidding||'MAXIMIZE_CLICKS';
    gcw.step = 2; // Skip to groups step
    gcwRender();
  } catch(e){
    body.innerHTML=`<div class="gcw-err">✗ Error de conexión</div>`;
  } finally {
    document.getElementById('gcw-next-btn').disabled = false;
  }
}

// ── KEYWORD EDITING ───────────────────────────────────────────────────────
function gcwDelKw(gi,ki){
  gcw.plan.ad_groups[gi].keywords.splice(ki,1);
  gcwRender();
}
function gcwAddKw(gi){
  const txt = prompt('Keyword nueva (sin comillas ni corchetes):');
  if(!txt||!txt.trim()) return;
  const match = prompt('Concordancia:\nB = Amplia\nP = Frase\nE = Exacta','P').toUpperCase();
  const m = ['B','P','E'].includes(match) ? match : 'P';
  gcw.plan.ad_groups[gi].keywords.push({text:txt.trim(), match:m});
  gcwRender();
}
function gcwAddLoc(id,name){
  if(!id) return;
  if(!gcw.locations.find(l=>l.id===id)) gcw.locations.push({id,name});
  gcwRender();
}
function gcwRemoveLoc(i){
  gcw.locations.splice(i,1);
  gcwRender();
}

// ── AD PREVIEW UPDATE ──────────────────────────────────────────────────────
function gcwUpdatePreview(i){
  const ag = gcw.plan?.ad_groups?.[i]; if(!ag) return;
  const pt = document.getElementById(`gcw-pt-${i}`);
  const pd = document.getElementById(`gcw-pd-${i}`);
  if(pt) pt.textContent = (ag.headlines||[]).slice(0,3).filter(Boolean).join(' | ');
  if(pd) pd.textContent = (ag.descriptions||[]).filter(Boolean).join(' ');
}

// ── CREATE CAMPAIGN ───────────────────────────────────────────────────────
async function gcwCreate(){
  const btn = document.getElementById('gcw-next-btn');
  const st  = document.getElementById('gcw-create-status');
  if(!gcw.plan){ alert('Falta la estructura de campaña'); return; }
  // Read final values from DOM
  gcw.budget  = parseInt(document.getElementById('gcw-budget')?.value)||gcw.budget||150000;
  gcw.bidding = document.getElementById('gcw-bid')?.value||gcw.bidding;
  gcw.plan.budget_daily_cop = gcw.budget;
  gcw.plan.bidding = gcw.bidding;
  btn.disabled=true; btn.textContent='Creando…';
  if(st) st.innerHTML = '<div style="font-size:12px;color:var(--m);margin-top:8px;text-align:center">⏳ Conectando con Google Ads API…</div>';
  try {
    const d = await fetch(`api/google-ads-create.php?action=create_full&client_id=${currentClient}`,{
      method:'POST', headers:{'Content-Type':'application/json'},
      body:JSON.stringify({ plan:gcw.plan, type:gcw.type, url:gcw.url,
        location_ids: gcw.locations.map(l=>l.id), start_date: new Date().toISOString().slice(0,10) })
    }).then(r=>r.json());
    if(!d.ok){
      if(st) st.innerHTML=`<div class="gcw-err" style="margin-top:10px">✗ ${escapeHtml(d.error||'Error al crear')}</div>`;
      btn.disabled=false; btn.textContent='✦ Crear campaña';
    } else {
      if(st) st.innerHTML=`<div class="gcw-ok" style="margin-top:10px;flex-direction:column;align-items:flex-start;gap:6px">
        <div style="font-weight:700">✓ ¡Campaña creada exitosamente!</div>
        <div>${escapeHtml(d.message||'')}</div>
        <div style="font-size:11px;color:var(--m)">ID: ${d.campaign_id} · Creada en pausa para revisión</div>
      </div>`;
      btn.textContent='Cerrar';
      btn.className='gcw-btn gcw-btn-sec';
      btn.disabled=false;
      btn.onclick = () => { closeGCWizard(); reloadGTab(); };
    }
  } catch(e){
    if(st) st.innerHTML=`<div class="gcw-err" style="margin-top:10px">✗ Error de conexión</div>`;
    btn.disabled=false; btn.textContent='✦ Crear campaña';
  }
}
</script>

<!-- Sistema de Tooltips -->
<script>
(function(){
  const tip = document.createElement('div');
  tip.className = 'dm-tip';
  document.body.appendChild(tip);
  let hideTimer;
  document.addEventListener('mouseover', function(e){
    const el = e.target.closest('[data-tip]');
    if (!el || !el.dataset.tip) return;
    clearTimeout(hideTimer);
    tip.textContent = el.dataset.tip;
    tip.style.display = 'block';
    requestAnimationFrame(function(){ tip.style.opacity = '1'; });
  });
  document.addEventListener('mouseout', function(e){
    const el = e.target.closest('[data-tip]');
    if (!el) return;
    const to = e.relatedTarget;
    if (to && el.contains(to)) return;
    tip.style.opacity = '0';
    hideTimer = setTimeout(function(){ tip.style.display = 'none'; }, 150);
  });
  document.addEventListener('mousemove', function(e){
    if (tip.style.display === 'none') return;
    const tw = tip.offsetWidth, th2 = tip.offsetHeight;
    const vw = window.innerWidth;
    let x = e.clientX + 14;
    let y = e.clientY - th2 - 10;
    if (x + tw > vw - 8) x = e.clientX - tw - 14;
    if (y < 8) y = e.clientY + 18;
    if (x < 8) x = 8;
    tip.style.left = x + 'px';
    tip.style.top  = y + 'px';
  });
})();

function toggleTheme(){
  const html = document.documentElement;
  const isLight = html.getAttribute('data-theme') === 'light';
  const next = isLight ? 'dark' : 'light';
  html.setAttribute('data-theme', next);
  try{ localStorage.setItem('dm_theme', next); }catch(e){}
  const btn = document.getElementById('dm-theme-btn');
  if(btn) btn.textContent = next === 'light' ? '☀️' : '🌙';
}

// Inicializar icono del botón según tema activo
(function(){
  const saved = document.documentElement.getAttribute('data-theme');
  const btn = document.getElementById('dm-theme-btn');
  if(btn && saved === 'light') btn.textContent = '☀️';
})();

// ── REPORTES ─────────────────────────────────────────────────────────────────
let currentReportHtml = '';
let currentReportPeriod = '';
let rptConnected   = {}; // servicios conectados del cliente actual
let rptSelected    = []; // servicios seleccionados para el reporte
let currentReportId = null; // ID del reporte actualmente en preview

function rptPeriodChange() {
  const val = document.getElementById('rpt-period')?.value;
  const customRange = document.getElementById('rpt-custom-range');
  if (customRange) customRange.style.display = val === 'custom' ? 'flex' : 'none';
  updateRptPreview();
}

function loadRptServices() {
  if (!currentClient || currentClient === 'all') {
    // Resetear tarjetas a estado inicial
    ['meta','google','seo'].forEach(k => rptUpdateCard(k, false, false));
    return;
  }
  // Mostrar tarjetas en "cargando"
  ['meta','google','seo'].forEach(k => {
    const badge = document.getElementById('rpt-badge-'+k);
    if (badge) badge.textContent = 'Verificando...';
  });

  fetch('api/reports.php?action=services&client_id=' + currentClient)
    .then(r => r.json())
    .then(data => {
      if (!data.ok) return;
      rptConnected = data.services || {};
      // Pre-seleccionar todos los conectados
      rptSelected = Object.keys(rptConnected).filter(k => rptConnected[k]);
      ['meta','google','seo','tiktok','email'].forEach(k => {
        const connected = !!rptConnected[k];
        const selected  = rptSelected.includes(k);
        rptUpdateCard(k, connected, selected);
      });
    })
    .catch(() => {
      ['meta','google','seo','tiktok','email'].forEach(k => {
        const badge = document.getElementById('rpt-badge-'+k);
        if (badge) { badge.textContent = 'Error'; badge.style.color = 'var(--red)'; }
      });
    });
}

function rptUpdateCard(key, connected, selected) {
  const card  = document.getElementById('rpt-card-'+key);
  const chk   = document.getElementById('rpt-chk-'+key);
  const badge = document.getElementById('rpt-badge-'+key);
  if (!card) return;

  if (!connected) {
    card.style.opacity     = '.35';
    card.style.cursor      = 'not-allowed';
    card.style.borderColor = 'var(--br)';
    card.style.background  = 'transparent';
    if (chk)   { chk.textContent = ''; chk.style.background = 'var(--bg2)'; chk.style.borderColor = 'var(--br2)'; }
    if (badge) { badge.textContent = 'No conectado'; badge.style.color = 'var(--m)'; }
    return;
  }

  // Conectado
  card.style.opacity  = '1';
  card.style.cursor   = 'pointer';
  if (selected) {
    card.style.borderColor = 'var(--red)';
    card.style.background  = 'rgba(232,39,42,.06)';
    if (chk)   { chk.textContent = '✓'; chk.style.background = 'var(--red)'; chk.style.borderColor = 'var(--red)'; chk.style.color = '#fff'; }
    if (badge) { badge.textContent = 'Incluido ✓'; badge.style.color = 'var(--g)'; }
  } else {
    card.style.borderColor = 'var(--br)';
    card.style.background  = 'transparent';
    if (chk)   { chk.textContent = ''; chk.style.background = 'var(--bg2)'; chk.style.borderColor = 'var(--br2)'; }
    if (badge) { badge.textContent = 'Conectado — clic para incluir'; badge.style.color = 'var(--m)'; }
  }
}

function toggleRptService(key) {
  if (!rptConnected[key]) return; // no conectado, ignorar clic
  if (rptSelected.includes(key)) {
    if (rptSelected.length === 1) { showToast('Incluye al menos un servicio en el reporte', 'var(--y)'); return; }
    rptSelected = rptSelected.filter(k => k !== key);
    rptUpdateCard(key, true, false);
  } else {
    rptSelected.push(key);
    rptUpdateCard(key, true, true);
  }
  updateRptPreview();
}

async function generateReport() {
  if (!currentClient || currentClient === 'all') {
    showToast('Selecciona un cliente primero', 'var(--y)'); return;
  }
  if (rptSelected.length === 0) {
    showToast('Selecciona al menos un servicio para incluir', 'var(--y)'); return;
  }
  const period = document.getElementById('rpt-period')?.value || 'last_month';
  const since  = document.getElementById('rpt-since')?.value || '';
  const until  = document.getElementById('rpt-until')?.value || '';

  if (period === 'custom' && (!since || !until)) {
    showToast('Selecciona las fechas del rango personalizado', 'var(--y)'); return;
  }

  const btn    = document.getElementById('rpt-gen-btn');
  const status = document.getElementById('rpt-status');
  if (btn) { btn.disabled = true; btn.textContent = '⏳ Generando...'; }
  if (status) status.textContent = 'AVI está recopilando datos de ' + rptSelected.join(', ').toUpperCase() + ' y redactando el análisis...';

  try {
    const body = { client_id: parseInt(currentClient), period, since, until, include: rptSelected };
    const r = await fetch('api/reports.php?action=generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body)
    });
    if (!r.ok) throw new Error('HTTP ' + r.status);
    const data = await r.json();

    if (!data.ok) {
      if (status) status.textContent = '✗ ' + (data.error || 'Error generando reporte');
      showToast('✗ ' + (data.error || 'Error'), 'var(--red)');
      return;
    }

    // Cerrar preview anterior si había otro abierto
    if (currentReportId) _rptSetBtn(currentReportId, false);

    currentReportHtml   = data.html;
    currentReportPeriod = data.period;
    currentReportId     = data.id || null;

    const wrap   = document.getElementById('rpt-preview-wrap');
    const iframe = document.getElementById('rpt-iframe');
    const title  = document.getElementById('rpt-preview-title');
    if (title) title.textContent = 'Reporte · ' + data.period;
    if (wrap)  wrap.style.display = 'block';
    if (iframe) {
      const blob = new Blob([data.html], {type:'text/html'});
      iframe.src = URL.createObjectURL(blob);
      wrap?.scrollIntoView({behavior:'smooth', block:'start'});
    }

    const modules = [data.meta&&'Meta', data.google&&'Google', data.seo&&'SEO', data.tiktok&&'TikTok', data.email&&'Email'].filter(Boolean);
    if (status) status.textContent = '✓ Reporte generado · ' + modules.join(' + ');
    showToast('✓ Reporte listo', 'var(--g)');
    // Recargar historial, marcar botón y cargar comparativa
    loadReportHistory().then(() => { if (data.id) _rptSetBtn(data.id, true); });
    const periodMap = { last_7:'7d', last_15:'14d', last_30:'30d', last_90:'30d', this_month:'30d', last_month:'30d' };
    loadRptCompare(periodMap[period] || '30d');
    // AVI análisis ejecutivo automático
    rptAviAnalyze(modules.join(' + '), period);

  } catch(e) {
    if (status) status.textContent = '✗ Error de conexión. Verifica tu sesión e intenta de nuevo.';
    showToast('✗ Error de conexión', 'var(--red)');
  } finally {
    if (btn) { btn.disabled = false; btn.textContent = '📊 Generar Reporte'; }
  }
}

function downloadReport() {
  if (!currentReportHtml) { showToast('Genera un reporte primero', 'var(--y)'); return; }
  const blob = new Blob([currentReportHtml], {type:'text/html;charset=utf-8'});
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  const name = 'reporte-' + (currentReportPeriod || 'marketing').toLowerCase().replace(/\s+/g,'-').replace(/[^a-z0-9-]/g,'');
  a.href = url; a.download = name + '.html'; a.click();
  setTimeout(() => URL.revokeObjectURL(url), 5000);
}

function printReport() {
  if (!currentReportHtml) { showToast('Genera un reporte primero', 'var(--y)'); return; }
  const win = window.open('', '_blank');
  win.document.write(currentReportHtml);
  win.document.close();
  win.focus();
  setTimeout(() => win.print(), 500);
}

function loadReportHistory() {
  if (!currentClient || currentClient === 'all') return Promise.resolve();
  const el = document.getElementById('rpt-history');
  if (!el) return Promise.resolve();
  el.innerHTML = '<div style="font-size:12px;color:var(--m);padding:10px">Cargando...</div>';

  return fetch('api/reports.php?action=list&client_id=' + currentClient)
    .then(r => r.json())
    .then(data => {
      if (!data.ok || !data.reports || data.reports.length === 0) {
        el.innerHTML = '<div style="font-size:12px;color:var(--m);text-align:center;padding:20px">Sin reportes generados para este cliente.</div>';
        return;
      }
      el.innerHTML = '<table style="width:100%;border-collapse:collapse;font-size:12px">'
        + '<thead><tr style="background:var(--bg2)"><th style="padding:8px 12px;text-align:left;color:var(--m);font-weight:600">Período</th><th style="padding:8px 12px;text-align:left;color:var(--m);font-weight:600">Generado</th><th style="padding:8px 12px;text-align:right;color:var(--m);font-weight:600">Acciones</th></tr></thead><tbody>'
        + data.reports.map(r => `<tr id="rpt-row-${r.id}" style="border-bottom:1px solid var(--br)">
            <td style="padding:8px 12px">${r.period_label}</td>
            <td style="padding:8px 12px;color:var(--m)">${r.created_at}</td>
            <td style="padding:8px 12px;text-align:right">
              <button id="rpt-ver-${r.id}" onclick="loadReportById(${r.id})"
                style="padding:3px 10px;border-radius:5px;font-size:11px;background:rgba(74,158,248,.1);border:1px solid rgba(74,158,248,.2);color:var(--b);cursor:pointer;font-family:var(--fb)">Ver</button>
            </td>
          </tr>`).join('')
        + '</tbody></table>';
    })
    .catch(() => {
      el.innerHTML = '<div style="font-size:12px;color:var(--red);padding:10px">Error cargando historial.</div>';
    });
}

function _rptSetBtn(id, open) {
  const btn = document.getElementById('rpt-ver-' + id);
  const row = document.getElementById('rpt-row-' + id);
  if (!btn) return;
  if (open) {
    btn.textContent = '✕ Cerrar';
    btn.style.cssText = 'padding:3px 10px;border-radius:5px;font-size:11px;background:rgba(232,39,42,.12);border:1px solid rgba(232,39,42,.3);color:var(--red);cursor:pointer;font-family:var(--fb);font-weight:600';
    if (row) row.style.background = 'rgba(232,39,42,.04)';
  } else {
    btn.textContent = 'Ver';
    btn.style.cssText = 'padding:3px 10px;border-radius:5px;font-size:11px;background:rgba(74,158,248,.1);border:1px solid rgba(74,158,248,.2);color:var(--b);cursor:pointer;font-family:var(--fb)';
    if (row) row.style.background = '';
  }
}

async function shareReport() {
  if (!currentReportId || !currentClient || currentClient === 'all') return;
  const btn = document.getElementById('btn-rpt-share');
  if (btn) { btn.textContent = '⏳'; btn.disabled = true; }
  try {
    const r = await fetch('api/reports.php?action=share&client_id=' + currentClient, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id: currentReportId, client_id: parseInt(currentClient) })
    });
    const data = await r.json();
    if (data.ok) {
      await navigator.clipboard.writeText(data.url);
      if (btn) { btn.textContent = '✓ Copiado'; btn.style.background = 'rgba(34,201,122,.2)'; }
      setTimeout(() => { if (btn) { btn.textContent = '🔗 Compartir'; btn.style.background = ''; btn.disabled = false; } }, 2500);
    } else {
      if (btn) { btn.textContent = '🔗 Compartir'; btn.disabled = false; }
      alert('Error: ' + (data.error || 'No se pudo generar el enlace'));
    }
  } catch(e) {
    if (btn) { btn.textContent = '🔗 Compartir'; btn.disabled = false; }
  }
}

function closeRptPreview() {
  const wrap = document.getElementById('rpt-preview-wrap');
  if (wrap) wrap.style.display = 'none';
  const aviWrap = document.getElementById('rpt-avi-wrap');
  if (aviWrap) aviWrap.style.display = 'none';
  if (currentReportId) _rptSetBtn(currentReportId, false);
  currentReportId = null;
}

function loadReportById(id) {
  if (currentReportId === id) { closeRptPreview(); return; }
  // Resetear botón anterior si había otro abierto
  if (currentReportId) _rptSetBtn(currentReportId, false);

  fetch('api/reports.php?action=get&id=' + id + '&client_id=' + currentClient)
    .then(r => r.json())
    .then(data => {
      if (!data.ok) return;
      currentReportHtml   = data.html;
      currentReportPeriod = data.period_label;
      currentReportId     = id;
      _rptSetBtn(id, true);
      const wrap   = document.getElementById('rpt-preview-wrap');
      const iframe = document.getElementById('rpt-iframe');
      const title  = document.getElementById('rpt-preview-title');
      if (title) title.textContent = 'Reporte · ' + data.period_label;
      if (wrap)  wrap.style.display = 'block';
      if (iframe) {
        const blob = new Blob([data.html], {type:'text/html'});
        iframe.src = URL.createObjectURL(blob);
      }
      wrap?.scrollIntoView({behavior:'smooth', block:'start'});
      loadRptCompare('30d');
      rptAviAnalyze();
    });
}

// ── PDF Download ─────────────────────────────────────────────────────────────
async function exportReportPdf() {
  if (!currentReportId) { showToast('Abre un reporte primero', 'var(--y)'); return; }
  const btn = document.getElementById('btn-rpt-pdf');
  if (btn) { btn.disabled = true; btn.textContent = '⏳ PDF…'; }
  try {
    const url = 'api/reports.php?action=export_pdf&id=' + currentReportId + '&client_id=' + currentClient;
    const r   = await fetch(url);
    const ct  = r.headers.get('Content-Type') || '';
    if (ct.includes('application/json')) {
      const d = await r.json();
      showToast('✗ ' + (d.error || 'Error generando PDF'), 'var(--red)', 4000);
      return;
    }
    const blob = await r.blob();
    const dlUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = dlUrl;
    const cd    = r.headers.get('Content-Disposition') || '';
    const match = cd.match(/filename="([^"]+)"/);
    a.download  = match ? match[1] : 'reporte.pdf';
    a.click();
    setTimeout(() => URL.revokeObjectURL(dlUrl), 5000);
  } catch(e) {
    showToast('✗ Error al generar PDF', 'var(--red)');
  } finally {
    if (btn) { btn.disabled = false; btn.textContent = '⬇ PDF'; }
  }
}

// ── Envío por email ───────────────────────────────────────────────────────────
function toggleRptEmailRow() {
  const row = document.getElementById('rpt-email-row');
  if (!row) return;
  const open = row.style.display === 'flex';
  row.style.display = open ? 'none' : 'flex';
  if (!open) document.getElementById('rpt-email-to')?.focus();
}

async function sendReportEmail() {
  if (!currentReportId) { showToast('Abre un reporte primero', 'var(--y)'); return; }
  const email  = document.getElementById('rpt-email-to')?.value.trim();
  const status = document.getElementById('rpt-email-status');
  const btn    = document.getElementById('btn-rpt-send-email');
  if (!email) { if (status) status.textContent = '⚠ Ingresa un email'; return; }
  if (status) status.textContent = 'Enviando...';
  if (btn)   { btn.disabled = true; }
  const csrf = document.querySelector('meta[name="dm-csrf"]')?.content || '';
  try {
    const r = await fetch('api/reports.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
      body: JSON.stringify({ action: 'send_email', client_id: parseInt(currentClient), id: currentReportId, email })
    });
    const d = await r.json();
    if (d.ok) {
      if (status) status.textContent = '✓ Enviado';
      showToast('✓ Reporte enviado a ' + email, 'var(--g)');
      setTimeout(() => { toggleRptEmailRow(); if (status) status.textContent = ''; }, 2000);
    } else {
      if (status) status.textContent = '✗ ' + (d.error || 'Error');
    }
  } catch(e) {
    if (status) status.textContent = '✗ Error de conexión';
  } finally {
    if (btn) btn.disabled = false;
  }
}

// ── Comparativa vs período anterior ──────────────────────────────────────────
async function loadRptCompare(period) {
  const row = document.getElementById('rpt-compare-row');
  if (!row || !currentClient || currentClient === 'all') return;
  row.style.display = 'block';
  row.innerHTML = '<span style="color:var(--m)">Calculando comparativa...</span>';
  try {
    const r = await fetch('api/reports.php?action=compare&client_id=' + currentClient + '&period=' + (period || '30d'));
    const d = await r.json();
    if (!d.ok || !d.has_data) { row.style.display = 'none'; return; }
    const dl = d.deltas;
    const arrow = (pct, higherIsBetter) => {
      if (Math.abs(pct) <= 2) return '<span style="color:var(--m)">→</span>';
      const up = pct > 0;
      const good = higherIsBetter ? up : !up;
      const col = good ? 'var(--g)' : 'var(--red)';
      return `<span style="color:${col}">${up ? '▲' : '▼'} ${Math.abs(pct)}%</span>`;
    };
    let html = '<div style="display:flex;gap:18px;flex-wrap:wrap;align-items:center">'
      + '<span style="font-size:10px;color:var(--m);text-transform:uppercase;letter-spacing:.6px;font-weight:600">vs período ant.</span>';
    if (dl.meta?.spend)        html += `<span>📘 Inv. ${arrow(dl.meta.spend.pct, false)}</span>`;
    if (dl.meta?.conversions)  html += `<span>Conv Meta ${arrow(dl.meta.conversions.pct, true)}</span>`;
    if (dl.google?.cost)       html += `<span>🟢 Inv. ${arrow(dl.google.cost.pct, false)}</span>`;
    if (dl.google?.conversions)html += `<span>Conv Google ${arrow(dl.google.conversions.pct, true)}</span>`;
    if (dl.seo?.clicks)        html += `<span>🔍 Clics ${arrow(dl.seo.clicks.pct, true)}</span>`;
    if (dl.seo?.position)      html += `<span>Pos. SEO ${arrow((dl.seo.position.trend==='up'?-1:1)*Math.abs((dl.seo.position.curr-dl.seo.position.prev)/Math.max(dl.seo.position.prev,1)*100), true)}</span>`;
    html += `<span style="color:var(--m);margin-left:auto;font-size:10px">${d.curr_range.from} → ${d.curr_range.to}</span>`;
    html += '</div>';
    row.innerHTML = html;
  } catch(e) {
    row.style.display = 'none';
  }
}

// ── AVI análisis ejecutivo del reporte ────────────────────────────────────────
function rptAviAnalyze(modules, period) {
  const wrap = document.getElementById('rpt-avi-wrap');
  const resp = document.getElementById('rpt-avi-resp');
  if (!wrap || !resp) return;
  if (!currentClient || currentClient === 'all') return;
  wrap.style.display = 'block';
  wrap.scrollIntoView({ behavior:'smooth', block:'nearest' });
  const mods = modules || 'Meta, Google, SEO';
  const per  = period  || document.getElementById('rpt-period')?.value || 'last_30';
  const periodLabel = { last_7:'últimos 7 días', last_15:'últimos 15 días', last_30:'últimos 30 días',
    last_90:'últimos 90 días', this_month:'mes actual', last_month:'mes anterior' }[per] || per;
  const q = `Acabo de generar un reporte de marketing digital para ${mods} del período ${periodLabel}. Con los datos disponibles en contexto, dame un análisis ejecutivo de 4-5 puntos clave: (1) resultado más relevante del período, (2) canal con mejor performance y por qué, (3) canal o campaña que necesita atención urgente, (4) 2 acciones prioritarias para el próximo mes con impacto concreto en resultados.`;
  if (typeof callAVIAgent === 'function') {
    callAVIAgent({ respId:'rpt-avi-resp', question:q, scope:'all',
      availableActions:['generate_report','send_report_email'],
      sectionData:{ period:per },
      loadingText:'AVI redactando análisis ejecutivo...' });
  } else if (typeof callAVI === 'function') {
    callAVI(q, '', 'rpt-avi-resp', 'AVI redactando análisis ejecutivo...', 'reportes');
  }
}

// ── Configuración de reportes por cliente ────────────────────────────────────
function updateRptPreview() {
  // Calcular próxima fecha de auto-envío
  const autoOn = document.getElementById('rpt-auto-send')?.checked;
  const dayEl  = document.getElementById('rpt-send-day');
  const nextEl = document.getElementById('rpt-next-run');
  let nextDateStr = '';
  if (autoOn && dayEl) {
    const day = Math.max(1, Math.min(28, parseInt(dayEl.value) || 1));
    const now = new Date();
    let target = new Date(now.getFullYear(), now.getMonth(), day);
    if (target <= now) target = new Date(now.getFullYear(), now.getMonth() + 1, day);
    nextDateStr = target.toLocaleDateString('es-ES', { day: 'numeric', month: 'long', year: 'numeric' });
    if (nextEl) { nextEl.textContent = '📅 Próximo envío automático: ' + nextDateStr; nextEl.style.display = 'block'; }
  } else if (nextEl) {
    nextEl.style.display = 'none';
  }

  // Actualizar card de preview de configuración
  const preview = document.getElementById('rpt-config-preview');
  if (!preview) return;
  preview.style.display = 'block';

  // Período
  const periodSel = document.getElementById('rpt-period');
  const periodLabels = {'7d':'Últimos 7 días','30d':'Últimos 30 días','60d':'Últimos 60 días','90d':'Últimos 90 días','custom':'Rango personalizado','current_month':'Mes actual','last_month':'Mes anterior'};
  const periodVal = periodSel?.value || '30d';
  const periodText = periodLabels[periodVal] || periodVal;
  const prevPeriod = document.getElementById('rpt-prev-period');
  if (prevPeriod) prevPeriod.textContent = periodText;

  // Servicios seleccionados
  const svcLabels = {meta:'Meta Ads', google:'Google Ads', seo:'SEO/GSC', tiktok:'TikTok Ads', email:'Email Marketing'};
  const prevSvc = document.getElementById('rpt-prev-services');
  if (prevSvc && typeof rptSelected !== 'undefined') {
    prevSvc.innerHTML = (rptSelected.length ? rptSelected : ['—']).map(k =>
      `<span style="font-size:10px;padding:2px 7px;border-radius:10px;background:rgba(232,39,42,.1);color:var(--red);margin-right:4px">${svcLabels[k]||k}</span>`
    ).join('');
  }

  // Email destino
  const email = document.getElementById('rpt-contact-email')?.value.trim();
  const emailRow = document.getElementById('rpt-prev-email-row');
  const emailSpan = document.getElementById('rpt-prev-email');
  if (emailRow && emailSpan) {
    if (autoOn && email) { emailRow.style.display = 'block'; emailSpan.textContent = email; }
    else emailRow.style.display = 'none';
  }

  // Próximo envío
  const nextRow = document.getElementById('rpt-prev-next-row');
  const nextSpan = document.getElementById('rpt-prev-next');
  if (nextRow && nextSpan) {
    if (nextDateStr) { nextRow.style.display = 'block'; nextSpan.textContent = nextDateStr; }
    else nextRow.style.display = 'none';
  }
}

async function loadRptClientSettings(clientId) {
  const csrf = document.querySelector('meta[name="dm-csrf"]')?.content || '';
  try {
    const r = await fetch('api/client-report-settings.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
      body: JSON.stringify({ action: 'get', client_id: clientId })
    });
    const d = await r.json();
    if (!d.ok) return;
    const emailEl   = document.getElementById('rpt-contact-email');
    const autoEl    = document.getElementById('rpt-auto-send');
    const dayEl     = document.getElementById('rpt-send-day');
    const logoEl    = document.getElementById('rpt-use-logo');
    if (emailEl) emailEl.value   = d.contact_email    || '';
    if (autoEl)  autoEl.checked  = !!d.report_auto_send;
    if (dayEl)   dayEl.value     = d.report_send_day  || 1;
    if (logoEl)  logoEl.checked  = !!d.report_use_logo;
    updateRptPreview();
  } catch(e) {}
}

async function saveRptClientSettings() {
  const clientId = parseInt(currentClient || 0);
  if (!clientId) { showToast('Selecciona un cliente primero', 'var(--y)'); return; }
  const email      = document.getElementById('rpt-contact-email')?.value.trim() || '';
  const autoSend   = document.getElementById('rpt-auto-send')?.checked ? 1 : 0;
  const sendDay    = parseInt(document.getElementById('rpt-send-day')?.value || '1');
  const useLogo    = document.getElementById('rpt-use-logo')?.checked ? 1 : 0;
  const status     = document.getElementById('rpt-settings-status');
  if (status) { status.textContent = 'Guardando...'; status.style.color = 'var(--m)'; }
  const csrf = document.querySelector('meta[name="dm-csrf"]')?.content || '';
  try {
    const r = await fetch('api/client-report-settings.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
      body: JSON.stringify({ client_id: clientId, contact_email: email, report_auto_send: autoSend, report_send_day: sendDay, report_use_logo: useLogo })
    });
    const d = await r.json();
    if (d.ok) {
      if (status) { status.textContent = '✓ Guardado'; status.style.color = 'var(--g)'; }
      updateRptPreview();
      setTimeout(() => { if (status) status.textContent = ''; }, 2500);
    } else {
      if (status) { status.textContent = '✗ ' + (d.error || 'Error'); status.style.color = 'var(--red)'; }
    }
  } catch(e) {
    if (status) { status.textContent = '✗ Error de conexión'; status.style.color = 'var(--red)'; }
  }
}
</script>

<!-- ═══════════════════════════════════════════════════════
     WIZARD: NUEVA CAMPAÑA GOOGLE ADS
════════════════════════════════════════════════════════ -->
<div id="gcw-modal" style="display:none" class="gcw-overlay" data-closeifback="closeGCWizard">
  <div class="gcw-box">
    <!-- HEADER + PROGRESS -->
    <div class="gcw-head">
      <div style="font-size:18px">✦</div>
      <div class="gcw-title">Nueva Campaña Google Ads</div>
      <div class="gcw-progress" id="gcw-progress-bar"></div>
      <button class="gcw-close" data-click="closeGCWizard">×</button>
    </div>
    <!-- BODY (rendered by JS) -->
    <div class="gcw-body" id="gcw-body"></div>
    <!-- FOOTER -->
    <div class="gcw-foot">
      <button class="gcw-btn gcw-btn-sec" id="gcw-prev-btn" data-click="gcwPrev">← Anterior</button>
      <div id="gcw-foot-center" style="font-size:12px;color:var(--m)"></div>
      <button class="gcw-btn gcw-btn-pri" id="gcw-next-btn" data-click="gcwNext">Siguiente →</button>
    </div>
  </div>
</div>

<!-- Modal: Cambiar presupuesto Meta Ads -->
<div id="meta-budget-modal" style="display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.65);align-items:center;justify-content:center" data-closeifback="closeMetaBudgetModal">
  <div style="background:var(--bg2);border:1px solid var(--br2);border-radius:14px;padding:28px 24px;width:340px;max-width:95vw;box-shadow:0 20px 60px rgba(0,0,0,.5)">
    <div style="font-weight:700;font-size:15px;margin-bottom:6px;color:var(--t)">💰 Cambiar presupuesto diario</div>
    <div id="meta-budget-modal-name" style="color:var(--m);font-size:12px;margin-bottom:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></div>
    <label style="font-size:12px;color:var(--m);display:block;margin-bottom:6px">Nuevo presupuesto diario (COP)</label>
    <input type="number" id="meta-budget-modal-input" min="1000" step="1000"
      style="width:100%;box-sizing:border-box;background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px 14px;color:var(--t);font-size:15px;font-family:var(--fb);outline:none"
      onkeydown="if(event.key==='Enter')saveMetaBudget()">
    <div style="display:flex;gap:8px;margin-top:16px">
      <button class="mbm-save" data-click="saveMetaBudget" style="flex:1;padding:10px;background:var(--red);border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--fb)">Guardar</button>
      <button data-click="closeMetaBudgetModal" style="flex:1;padding:10px;background:var(--bg3);border:1px solid var(--br2);border-radius:8px;color:var(--t);font-size:13px;cursor:pointer;font-family:var(--fb)">Cancelar</button>
    </div>
  </div>
</div>

<!-- Modal: Cambiar presupuesto de campaña -->
<div id="g-budget-modal" style="display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.65);align-items:center;justify-content:center">
  <div style="background:var(--bg2);border:1px solid var(--br2);border-radius:14px;padding:28px 24px;width:340px;max-width:95vw;box-shadow:0 20px 60px rgba(0,0,0,.5)">
    <div style="font-weight:700;font-size:15px;margin-bottom:6px;color:var(--t)">Cambiar presupuesto diario</div>
    <div id="g-budget-modal-name" style="color:var(--m);font-size:12px;margin-bottom:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></div>
    <label style="font-size:12px;color:var(--m);display:block;margin-bottom:6px">Nuevo presupuesto por día ($)</label>
    <input type="number" id="g-budget-modal-input" min="1" step="1000"
      style="width:100%;box-sizing:border-box;background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px 14px;color:var(--t);font-size:15px;font-family:var(--fb);outline:none"
      onkeydown="if(event.key==='Enter')saveBudget()">
    <div style="display:flex;gap:8px;margin-top:16px">
      <button data-click="saveBudget" style="flex:1;padding:10px;background:var(--red);border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--fb)">Guardar</button>
      <button data-click="closeBudgetModal" style="flex:1;padding:10px;background:var(--bg3);border:1px solid var(--br2);border-radius:8px;color:var(--t);font-size:13px;cursor:pointer;font-family:var(--fb)">Cancelar</button>
    </div>
  </div>
</div>

<?php if($isAdmin): ?>
<!-- ═══════ AVI AGENTE — FAB + Drawer Flotante ═══════ -->
<script>
function aviToggle(){var d=document.getElementById('avi-drawer');if(d&&d.classList.contains('open'))aviClose();else aviOpen();}
function aviOpen(){
  var d=document.getElementById('avi-drawer');if(d)d.classList.add('open');
  var b=document.getElementById('avi-bd');if(b)b.style.display='block';
  var f=document.getElementById('avi-fab');if(f)f.classList.add('open');
  // Actualizar contexto de cliente
  var ctx=document.getElementById('avi-drw-ctx');
  if(ctx){
    var cc=typeof currentClient!=='undefined'?currentClient:'all';
    var cls=typeof CLIENTS!=='undefined'?CLIENTS:[];
    if(!cc||cc==='all'){ctx.textContent='Modo general · Selecciona cliente para análisis con datos reales';}
    else{var c=cls.find(function(x){return String(x.id)===String(cc);});ctx.textContent=c?c.name+' · Meta + Google + SEO':'Cliente activo';}
  }
  // Renderizar shortcuts y datos del scope actual
  _aviRenderShortcuts();
  _aviRefreshDataPanel();
  // Renderizar historial si está visible
  if(document.getElementById('avi-history-panel')?.style.display==='block') aviHistoryRender();
  setTimeout(function(){var q=document.getElementById('avi-drw-q');if(q)q.focus();},320);
}
function aviClose(){
  var d=document.getElementById('avi-drawer');if(d)d.classList.remove('open');
  var b=document.getElementById('avi-bd');if(b)b.style.display='none';
  var f=document.getElementById('avi-fab');if(f)f.classList.remove('open');
}
function aviHistoryToggle(){
  var p=document.getElementById('avi-history-panel');
  var body=document.getElementById('avi-drw-body');
  if(!p)return;
  var show=p.style.display!=='block';
  p.style.display=show?'block':'none';
  if(body)body.style.display=show?'none':'flex';
  if(show)aviHistoryRender();
}
function aviHistoryRender(){
  var list=document.getElementById('avi-history-list');if(!list)return;
  var cc=typeof currentClient!=='undefined'?currentClient:'all';
  var key='avi_hist_'+(cc==='all'?'all':cc);
  var entries=JSON.parse(localStorage.getItem(key)||'[]');
  if(!entries.length){list.innerHTML='<div style="font-size:12px;color:var(--m);text-align:center;padding:20px 0">Sin conversaciones aún</div>';return;}
  list.innerHTML=entries.slice().reverse().map(function(e){
    var d=new Date(e.ts);
    var time=d.toLocaleDateString('es-CO',{day:'2-digit',month:'short'})+' '+d.toLocaleTimeString('es-CO',{hour:'2-digit',minute:'2-digit'});
    return '<div style="background:var(--bg);border:1px solid var(--br2);border-radius:8px;padding:9px 11px;cursor:pointer" onclick="aviHistoryLoad('+JSON.stringify(e.q).replace(/"/g,"'")+')" title="Clic para repetir">'
      +'<div style="font-size:11px;color:var(--m);margin-bottom:4px">'+time+' · '+escapeHtml(e.scope||'general')+'</div>'
      +'<div style="font-size:12px;font-weight:600;color:var(--t);margin-bottom:4px">'+escapeHtml(e.q)+'</div>'
      +'<div style="font-size:11px;color:var(--m);line-height:1.5">'+escapeHtml((e.resp||'').slice(0,120))+'…</div>'
      +'</div>';
  }).join('');
}
function aviHistoryLoad(q){
  var input=document.getElementById('avi-drw-q');if(input)input.value=q;
  // Volver al chat
  var p=document.getElementById('avi-history-panel');if(p)p.style.display='none';
  var body=document.getElementById('avi-drw-body');if(body)body.style.display='flex';
  setTimeout(function(){var q2=document.getElementById('avi-drw-q');if(q2)q2.focus();},100);
}
function aviHistoryClear(){
  var cc=typeof currentClient!=='undefined'?currentClient:'all';
  localStorage.removeItem('avi_hist_'+(cc==='all'?'all':cc));
  aviHistoryRender();
}
function aviHistorySave(q,resp,scope){
  var cc=typeof currentClient!=='undefined'?currentClient:'all';
  var key='avi_hist_'+(cc==='all'?'all':cc);
  var entries=JSON.parse(localStorage.getItem(key)||'[]');
  entries.push({ts:Date.now(),q:q,resp:resp,scope:scope||'general'});
  if(entries.length>50)entries=entries.slice(-50);
  localStorage.setItem(key,JSON.stringify(entries));
}
// ── Snapshot de datos locales (sin API key) ───────────────────────────────────
function _aviDataSnapshot(scope){
  var html='';
  var mc=(typeof metaCampsAll!=='undefined'&&Array.isArray(metaCampsAll)?metaCampsAll:[]).filter(function(c){return c.status==='active'||c.status==='ACTIVE';});
  var gc=(typeof gCampaignsList!=='undefined'&&Array.isArray(gCampaignsList)?gCampaignsList:[]).filter(function(c){return c.status==='enabled'||c.status==='ENABLED';});
  var kl=typeof gscKeywordsList!=='undefined'&&Array.isArray(gscKeywordsList)?gscKeywordsList:[];
  function fmt(n){return typeof n==='number'?n.toLocaleString('es-CO',{maximumFractionDigits:2}):(n||'—');}
  if((scope==='meta'||scope==='all')&&mc.length){
    html+='<div style="margin-bottom:10px"><div style="font-size:10px;font-weight:700;color:var(--m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px">📘 Meta Ads · '+mc.length+' activas</div>';
    mc.slice(0,8).forEach(function(c){html+='<div style="display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--br);font-size:11px"><div style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t)">'+c.name+'</div><span style="color:var(--m);flex-shrink:0">$'+fmt(c.spend)+'</span><span style="color:'+(( c.roas||0)>=1?'var(--g)':'var(--red)')+';flex-shrink:0">ROAS '+fmt(c.roas)+'</span></div>';});
    html+='</div>';
  }
  if((scope==='google'||scope==='all')&&gc.length){
    html+='<div style="margin-bottom:10px"><div style="font-size:10px;font-weight:700;color:var(--m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px">🟢 Google Ads · '+gc.length+' activas</div>';
    gc.slice(0,8).forEach(function(c){html+='<div style="display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--br);font-size:11px"><div style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t)">'+c.name+'</div><span style="color:var(--m);flex-shrink:0">$'+fmt(c.spend)+'</span><span style="color:var(--m);flex-shrink:0">CPA $'+fmt(c.cpa)+'</span></div>';});
    html+='</div>';
  }
  if((scope==='gsc'||scope==='all')&&kl.length){
    html+='<div style="margin-bottom:10px"><div style="font-size:10px;font-weight:700;color:var(--m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px">🔍 SEO · Top keywords</div>';
    kl.slice(0,8).forEach(function(k){var pos=k.position||99;html+='<div style="display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--br);font-size:11px"><div style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t)">'+k.keyword+'</div><span style="color:'+(pos<=3?'var(--g)':pos<=10?'var(--b)':'var(--m)')+';flex-shrink:0">Pos. '+fmt(pos)+'</span><span style="color:var(--m);flex-shrink:0">'+fmt(k.clicks)+' clics</span></div>';});
    html+='</div>';
  }
  return html;
}
function _aviRefreshDataPanel(){
  var el=document.getElementById('avi-drw-data');if(!el)return;
  var snap=_aviDataSnapshot(_aviDrawerScope);
  if(snap){el.innerHTML=snap;el.style.display='block';}
  else{el.innerHTML='';el.style.display='none';}
}
// ── Estado y shortcuts (fallback cuando app.js está cacheado) ─────────────────
var _aviDrawerScope='all';
var _aviCurrentPage='overview';
var _AVI_SC={
  overview:[
    {icon:'◈',label:'Revisar todo',scope:'all',q:'Revisa todos los canales de este cliente y dime qué está mal o qué oportunidades hay. Analiza Meta Ads, Google Ads y SEO.'},
    {icon:'◉',label:'Solo Meta',scope:'meta',q:'Analiza mis campañas de Meta Ads: rendimiento, ROAS, frecuencia, campañas problemáticas y qué acciones tomar.'},
    {icon:'◎',label:'Solo Google',scope:'google',q:'Analiza mis campañas de Google Ads: Impression Share, inversión, conversiones y qué campañas necesitan atención.'},
    {icon:'◐',label:'Solo SEO',scope:'gsc',q:'Analiza mis datos de SEO: keywords con mejor oportunidad, posiciones en riesgo y acciones concretas.'},
    {icon:'📋',label:'Plan semanal',scope:'all',q:'Dame un plan de acción priorizado para esta semana: máximo 5 acciones ordenadas por impacto en resultados.'},
  ],
  meta:[
    {icon:'◈',label:'Revisar todo',scope:'meta',q:'Revisa todas mis campañas de Meta Ads. Identifica cuáles tienen bajo ROAS, frecuencia alta o gasto ineficiente. Dame acciones concretas.'},
    {icon:'⏸',label:'ROAS bajo',scope:'meta',q:'¿Qué campañas tienen ROAS menor a 1? Muéstrame cuáles pausar y por qué. Incluye el bloque [ACCIONES] para pausarlas.'},
    {icon:'💰',label:'Optimizar presupuesto',scope:'meta',q:'Optimiza los presupuestos: ¿a qué campañas les subirías o bajarías el presupuesto y en cuánto? Incluye el bloque [ACCIONES] con change_budget.'},
    {icon:'⚡',label:'Fatiga creativa',scope:'meta',q:'¿Cuáles campañas están activas pero con frecuencia mayor a 3? Recomiéndame pausarlas. Incluye el bloque [ACCIONES].'},
    {icon:'🚀',label:'Crear campaña',scope:'meta',q:'Crea una nueva campaña de Meta Ads para este cliente. Usa objetivo OUTCOME_LEADS, presupuesto diario 50000 COP. Basa el nombre en el negocio del cliente. Se crea PAUSADA para revisar antes de activar. Incluye el bloque [ACCIONES] con create_campaign_meta y todos sus parámetros.'},
    {icon:'📋',label:'Duplicar mejor',scope:'meta',q:'Identifica la campaña activa con mejor ROAS y propón duplicarla para hacer una variación de prueba. Incluye el bloque [ACCIONES] con duplicate_campaign.'},
    {icon:'✏️',label:'Editar copy',scope:'meta',q:'Revisa los anuncios activos. Propón editar el copy del anuncio con peor CTR: genera un headline más persuasivo y primary_text mejorado alineado al objetivo. Incluye el bloque [ACCIONES] con edit_ad_copy.'},
    {icon:'🎯',label:'Cambiar targeting',scope:'meta',q:'Analiza los ad sets activos. ¿Hay alguno con targeting ineficiente (edad muy amplia, ubicación mala)? Propón el ajuste más importante con el bloque [ACCIONES] update_targeting.'},
  ],
  google:[
    {icon:'◈',label:'Revisar todo',scope:'google',q:'Revisa todas mis campañas de Google Ads: ROAS, Impression Share, conversiones y gasto. Dame acciones concretas.'},
    {icon:'📉',label:'CPA alto / IS bajo',scope:'google',q:'¿Qué campañas tienen Impression Share bajo o alto CPA? Muéstrame qué pausar o qué presupuesto cambiar. Incluye el bloque [ACCIONES].'},
    {icon:'💰',label:'Presupuestos',scope:'google',q:'Optimiza los presupuestos de Google Ads: ¿a cuáles les subirías o bajarías el presupuesto diario y en cuánto? Incluye el bloque [ACCIONES] con change_budget.'},
    {icon:'⛔',label:'Negativos urgentes',scope:'google',q:'¿Qué keywords negativas añadirías urgente para reducir gasto inútil? Incluye el bloque [ACCIONES] con add_negatives.'},
    {icon:'🚀',label:'Crear campaña',scope:'google',q:'Crea una nueva campaña de Google Search para este cliente. Presupuesto diario 150000 COP. La IA genera keywords y RSA automáticamente basándose en el negocio. Se crea PAUSADA. Incluye el bloque [ACCIONES] con create_campaign_google y su brief completo.'},
    {icon:'📝',label:'Crear grupo',scope:'google',q:'Identifica cuál campaña activa podría beneficiarse de un grupo de anuncios adicional con keywords más específicas o de nicho. Propón el nombre, keywords y el bloque [ACCIONES] create_adgroup.'},
    {icon:'✏️',label:'Mejorar RSA',scope:'google',q:'Revisa los anuncios RSA activos. Para el que tiene peor ad_strength o CTR más bajo, propón titulares (máx 30 chars) y descripciones (máx 90 chars) mejorados. Incluye el bloque [ACCIONES] con edit_rsa.'},
    {icon:'🔑',label:'Keywords positivas',scope:'google',q:'Basándote en las keywords con mejor conversión, ¿qué keywords adicionales agregarías al grupo con mejor desempeño? Incluye el bloque [ACCIONES] con add_positive_keywords.'},
  ],
  seo:[
    {icon:'🎯',label:'Oportunidades rápidas',scope:'gsc',q:'Analiza mis datos de GSC. ¿Qué keywords están en posiciones 4-10 con muchas impresiones pero bajo CTR? Esas son las oportunidades más rápidas de subir a TOP 3.'},
    {icon:'📉',label:'Keywords caídas',scope:'gsc',q:'¿Qué keywords importantes han caído más de 2 posiciones? Dame un plan concreto de recuperación por keyword.'},
    {icon:'⚡',label:'Plan on-page',scope:'gsc',q:'Dame las 5 acciones de SEO on-page más importantes basándote en los datos reales de GSC.'},
    {icon:'📝',label:'Plan de contenido',scope:'gsc',q:'¿Cuáles son las keywords con mejor CTR pero pocas impresiones? ¿Cómo escalo el tráfico? Dame un plan de contenido.'},
    {icon:'📤',label:'Publicar artículo',scope:'gsc',q:'Publica el último artículo SEO generado en WordPress como borrador para revisión. Incluye el bloque [ACCIONES] con publish_seo_article.'},
  ],
  tiktok:[
    {icon:'◈',label:'Revisar TikTok',scope:'all',q:'Analiza el rendimiento de las campañas de TikTok Ads de este cliente: CPM, CTR, CPA y presupuesto. ¿Qué campañas escalar o pausar?'},
    {icon:'⏸',label:'Pausar ineficientes',scope:'all',q:'¿Cuáles campañas de TikTok tienen CPA alto o CTR bajo? Muéstrame cuáles pausar ahora. Incluye el bloque [ACCIONES].'},
    {icon:'💰',label:'Ajustar presupuesto',scope:'all',q:'Optimiza los presupuestos de TikTok Ads: ¿a cuáles subirías el presupuesto diario y en cuánto? Incluye el bloque [ACCIONES] con change_budget.'},
    {icon:'🎬',label:'Estrategia creative',scope:'all',q:'Analiza la fatiga creativa en TikTok Ads. ¿Qué tipo de hooks, copies y formatos recomiendas para mejorar el CTR basándote en los datos actuales?'},
    {icon:'📊',label:'Reporte TikTok',scope:'all',q:'Genera un análisis ejecutivo del rendimiento de TikTok Ads del último mes: inversión, resultados clave, comparativa vs período anterior y plan de acción.'},
  ],
  email:[
    {icon:'📧',label:'Analizar campañas',scope:'all',q:'Analiza el rendimiento de las últimas campañas de Email Marketing: open rate, click rate, baja de suscriptores y tendencias. ¿Qué mejorar?'},
    {icon:'🚀',label:'Crear campaña',scope:'all',q:'Crea una campaña de Email Marketing como borrador en Mailchimp para este cliente. Genera un asunto atractivo basado en el negocio del cliente. Incluye el bloque [ACCIONES] con create_email_campaign con nombre y asunto.'},
    {icon:'📋',label:'Plan Email mensual',scope:'all',q:'Dame un plan de email marketing para el próximo mes: frecuencia, tipos de email (newsletter, promocional, nurturing, reactivación), asuntos sugeridos por semana y mejores horarios de envío.'},
    {icon:'📈',label:'Mejorar open rate',scope:'all',q:'El open rate de las últimas campañas es bajo. Dame 5 estrategias concretas para mejorar la tasa de apertura: asuntos, segmentación, horarios, preheader y limpieza de lista.'},
  ],
  web:[
    {icon:'🌐',label:'Revisar web',scope:'all',q:'Analiza el estado web del cliente: uptime, SSL, PageSpeed. ¿Hay problemas urgentes que necesiten atención inmediata?'},
    {icon:'⚡',label:'Mejorar velocidad',scope:'all',q:'Dame las 5 acciones más importantes para mejorar el PageSpeed Score y Core Web Vitals de la web del cliente. Sé específico con qué optimizar.'},
    {icon:'📤',label:'Publicar artículo',scope:'all',q:'Publica el último artículo SEO generado en WordPress como borrador para revisión y edición final. Incluye el bloque [ACCIONES] con publish_seo_article.'},
    {icon:'🏪',label:'Análisis Shopify',scope:'all',q:'Analiza el rendimiento del ecommerce Shopify del cliente: tasa de conversión, carritos abandonados, top productos y oportunidades de mejora.'},
  ],
  reportes:[
    {icon:'📋',label:'Reporte mensual',scope:'all',q:'Genera un reporte ejecutivo del último mes con Meta Ads, Google Ads y SEO. Resume los puntos más importantes para el cliente.'},
    {icon:'📊',label:'Análisis ejecutivo',scope:'all',q:'Analiza el rendimiento general de este cliente en todos los canales y dame las 3 conclusiones más importantes del período.'},
    {icon:'🎯',label:'Plan de mejora',scope:'all',q:'Dame un plan de optimización basado en los datos del período: qué mejorar en Meta, Google y SEO con acciones priorizadas.'},
    {icon:'📧',label:'Enviar reporte',scope:'all',q:'Genera el reporte del último mes y envíalo por email al cliente. Incluye el bloque [ACCIONES] con generate_report y send_report_email.'},
  ],
};
function aviDrawerSetContext(page){
  _aviCurrentPage=page||'overview';
  var labels={overview:'Dashboard',meta:'Meta Ads',google:'Google Ads',seo:'SEO',reportes:'Reportes',tiktok:'TikTok Ads',web:'Web',videos:'Videos',imagenes:'Imágenes',marca:'Activos',config:'APIs',profile:'Perfil'};
  var badge=document.getElementById('avi-drw-badge');
  if(badge)badge.textContent=labels[_aviCurrentPage]||_aviCurrentPage;
  // Mapear página → scope de datos
  var pageToScope={meta:'meta',google:'google',seo:'gsc',overview:'all',reportes:'all',tiktok:'all',email:'all',web:'all',videos:'all',imagenes:'all',marca:'all'};
  _aviDrawerScope=pageToScope[_aviCurrentPage]||'all';
  _aviRenderShortcuts();
  _aviRefreshDataPanel();
}
function _aviRenderShortcuts(){
  var wrap=document.getElementById('avi-drw-shortcuts');if(!wrap)return;
  var shortcuts=_AVI_SC[_aviCurrentPage]||_AVI_SC.overview;
  wrap.innerHTML=shortcuts.map(function(s){
    var sq=s.q.replace(/\\/g,'\\\\').replace(/'/g,"\\'");
    return '<button class="db" onclick="aviDrawerQuick(\''+s.scope+'\',\''+sq+'\')">'+s.icon+' '+s.label+'</button>';
  }).join('');
}
function aviDrawerClientUpdate(){
  var el=document.getElementById('avi-drw-ctx');if(!el)return;
  var cc=typeof currentClient!=='undefined'?currentClient:'all';
  var cls=typeof CLIENTS!=='undefined'?CLIENTS:[];
  if(!cc||cc==='all'){el.textContent='Modo general · Selecciona cliente para análisis con datos reales';}
  else{var c=cls.find(function(x){return String(x.id)===String(cc);});el.textContent=c?c.name+' · Meta + Google + SEO':'Cliente activo';}
}
function aviDrawerQuick(scope,question){
  _aviDrawerScope=scope;
  _aviRefreshDataPanel();
  var q=document.getElementById('avi-drw-q');if(q)q.value=question;
  var dr=document.getElementById('avi-drawer');
  if(dr&&!dr.classList.contains('open'))aviOpen();
  aviDrawerSend();
}
function aviDrawerSend(){
  var inp=document.getElementById('avi-drw-q');
  var q=inp?inp.value.trim():'';if(!q)return;
  if(inp)inp.value='';
  var respEl=document.getElementById('avi-drw-resp');
  if(respEl)respEl.style.display='block';
  var cc=typeof currentClient!=='undefined'?currentClient:'all';
  var cls=typeof CLIENTS!=='undefined'?CLIENTS:[];
  var hasClient=cc&&cc!=='all'&&cls.find(function(x){return String(x.id)===String(cc);});
  if(!hasClient){
    if(typeof callAVI==='function'){
      callAVI(q,'','avi-drw-resp','AVI analizando...',_aviCurrentPage,function(text){aviHistorySave(q,text,'general');});
    }else if(respEl){respEl.innerHTML='<span style="color:var(--m)">Recargando funciones AVI, intenta de nuevo...</span>';}
    return;
  }
  if(typeof callAVIAgent!=='function'){if(respEl){respEl.style.display='block';respEl.innerHTML='<span style="color:var(--m)">Configura la Claude API Key en ⚙ APIs para análisis IA (los datos arriba son locales).</span>';}return;}
  var actionsMap={
    meta:    ['pause_campaign','activate_campaign','change_budget','pause_adset','activate_adset','pause_ad','activate_ad','create_campaign_meta','duplicate_campaign','create_adset','edit_ad_copy','update_targeting','generate_report','send_report_email'],
    google:  ['pause_campaign','activate_campaign','change_budget','pause_adgroup','enable_adgroup','pause_ad','activate_ad','add_negatives','add_positive_keywords','change_bidding','create_campaign_google','create_adgroup','edit_rsa','generate_report','send_report_email'],
    gsc:     ['publish_seo_article','generate_report','send_report_email'],
    tiktok:  ['pause_campaign','activate_campaign','change_budget','pause_adgroup','enable_adgroup'],
    email:   ['create_email_campaign'],
    reportes:['generate_report','send_report_email'],
    overview:['pause_campaign','activate_campaign','change_budget','add_negatives','create_campaign_meta','create_campaign_google','generate_report','send_report_email'],
    all:     ['pause_campaign','activate_campaign','change_budget','pause_adset','activate_adset','pause_adgroup','enable_adgroup','pause_ad','activate_ad','add_negatives','add_positive_keywords','change_bidding','create_campaign_meta','create_campaign_google','duplicate_campaign','create_adset','create_adgroup','edit_ad_copy','edit_rsa','update_targeting','publish_seo_article','create_email_campaign','generate_report','send_report_email'],
  };
  var sdata={};
  var mc=(typeof metaCampsAll!=='undefined'?metaCampsAll:[]).filter(function(c){return c.status==='active'||c.status==='ACTIVE';});
  var gc=(typeof gCampaignsList!=='undefined'?gCampaignsList:[]).filter(function(c){return c.status==='enabled'||c.status==='ENABLED';});
  var kl=typeof gscKeywordsList!=='undefined'?gscKeywordsList:[];
  if(_aviDrawerScope==='meta'||_aviDrawerScope==='all'){var camps=mc.map(function(c){return{id:c.id,name:c.name,status:c.status,spend:c.spend,roas:c.roas,ctr:c.ctr,frequency:c.frequency,daily_budget:c.daily_budget};});if(camps.length)sdata.meta_campaigns=camps;}
  if(_aviDrawerScope==='google'||_aviDrawerScope==='all'){var gcamps=gc.map(function(c){return{id:c.id,name:c.name,status:c.status,spend:c.spend,roas:c.roas,cpa:c.cpa,conversions:c.conversions,imp_share:c.imp_share,daily_budget:c.daily_budget};});if(gcamps.length)sdata.google_campaigns=gcamps;}
  if(_aviDrawerScope==='gsc'||_aviDrawerScope==='all'){var kws=kl.slice(0,30).map(function(k){return{keyword:k.keyword,clicks:k.clicks,position:k.position,impressions:k.impressions,ctr:k.ctr};});if(kws.length)sdata.seo_keywords=kws;}
  if(_aviCurrentPage==='reportes'){var rp=document.getElementById('rpt-period');sdata.period=rp?rp.value:'last_30';}
  var pageActions=actionsMap[_aviCurrentPage]||actionsMap[_aviDrawerScope]||actionsMap.all;
  callAVIAgent({respId:'avi-drw-resp',question:q,scope:_aviDrawerScope,availableActions:pageActions,sectionData:sdata,loadingText:'AVI analizando datos reales...'});
}
</script>
<style>
#avi-fab{position:fixed;bottom:24px;right:24px;z-index:1100;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#e8272a,#c9186b);border:none;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 4px 24px rgba(232,39,42,.5);display:flex;align-items:center;justify-content:center;transition:transform .25s,box-shadow .25s;font-family:var(--fb)}
#avi-fab:hover{transform:scale(1.1);box-shadow:0 6px 32px rgba(232,39,42,.65)}
#avi-fab.open{transform:rotate(45deg) scale(1.05)}
#avi-bd{display:none;position:fixed;inset:0;z-index:1098;background:rgba(0,0,0,.35)}
#avi-drawer{position:fixed;top:0;right:-420px;width:400px;max-width:100vw;height:100vh;background:var(--bg);border-left:1px solid var(--br);z-index:1099;display:flex;flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 40px rgba(0,0,0,.2)}
#avi-drawer.open{right:0}
@media(max-width:520px){#avi-drawer{width:100vw;right:-100vw}}
#avi-drw-hd{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--br);flex-shrink:0}
#avi-drw-body{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:12px}
#avi-drw-shortcuts{display:flex;gap:6px;flex-wrap:wrap}
#avi-drw-shortcuts .db{font-size:11px;padding:5px 10px}
#avi-drw-resp{font-size:12px;line-height:1.7}
#avi-drw-foot{display:flex;gap:6px;flex-shrink:0;padding:12px 18px;border-top:1px solid var(--br)}
#avi-drw-q{flex:1;background:var(--bg2);border:1px solid var(--br2);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--t);font-family:var(--fb);outline:none}
#avi-drw-q:focus{border-color:var(--red)}
</style>

<button id="avi-fab" data-click="aviToggle" title="AVI Agente · Copiloto IA">✦</button>
<div id="avi-bd" data-click="aviClose"></div>

<div id="avi-drawer">
  <div id="avi-drw-hd">
    <div style="width:34px;height:34px;background:linear-gradient(135deg,var(--red),#c9186b);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;color:#fff">✦</div>
    <div style="flex:1;min-width:0">
      <div style="font-family:var(--fh);font-size:14px;font-weight:700">AVI Agente</div>
      <div id="avi-drw-ctx" data-i18n="avi.drawer.ctx_general" style="font-size:11px;color:var(--m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Modo general · Selecciona cliente para análisis con datos reales</div>
    </div>
    <div id="avi-drw-badge" style="font-size:10px;color:var(--m);background:var(--bg2);border:1px solid var(--br2);border-radius:5px;padding:3px 8px;margin-right:4px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0">Dashboard</div>
    <button data-click="aviHistoryToggle" title="Historial" style="background:none;border:none;color:var(--m);font-size:15px;cursor:pointer;padding:4px;line-height:1;flex-shrink:0">🕐</button>
    <button data-click="aviClose" style="background:none;border:none;color:var(--m);font-size:18px;cursor:pointer;padding:4px;line-height:1;flex-shrink:0">✕</button>
  </div>

  <!-- Panel de historial (oculto por defecto) -->
  <div id="avi-history-panel" style="display:none;flex:1;overflow-y:auto;border-bottom:1px solid var(--br);background:var(--bg2)">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--br)">
      <span style="font-size:12px;font-weight:600;color:var(--t)" data-i18n="avi.drawer.history">Historial de conversaciones</span>
      <button data-click="aviHistoryClear" style="font-size:11px;background:none;border:none;color:var(--m);cursor:pointer;padding:2px 6px;border-radius:4px" onmouseover="this.style.color='var(--red)'" onmouseout="this.style.color='var(--m)'" data-i18n="avi.drawer.history_clear">Borrar todo</button>
    </div>
    <div id="avi-history-list" style="padding:8px 12px;display:flex;flex-direction:column;gap:6px"></div>
  </div>

  <div id="avi-drw-body">
    <div id="avi-drw-shortcuts"></div>
    <div id="avi-drw-data" style="display:none"></div>
    <div id="avi-drw-sep" style="display:none;height:1px;background:linear-gradient(90deg,transparent,var(--br2),transparent);margin:4px 0 8px"></div>
    <div class="avi-resp" id="avi-drw-resp" style="display:none;white-space:normal"></div>
  </div>
  <div id="avi-drw-foot">
    <input id="avi-drw-q" data-i18n="avi.drawer.placeholder" data-i18n-attr="placeholder" placeholder="Pregunta o instrucción libre..." onkeydown="if(event.key==='Enter')aviDrawerSend()">
    <button class="avi-send" data-i18n="avi.drawer.execute" data-click="aviDrawerSend">Ejecutar →</button>
  </div>
</div>

<?php endif ?>

<!-- ── Modal: Nuevo cliente (SaaS) ───────────────────────────── -->
<div id="modal-new-client" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:600;align-items:center;justify-content:center" data-closeifback="closeNewClientModal">
  <div style="background:var(--bg2);border:1px solid var(--br2);border-radius:14px;width:480px;max-width:95vw;max-height:90vh;overflow-y:auto">
    <div style="padding:20px 24px;border-bottom:1px solid var(--br);position:sticky;top:0;background:var(--bg2);display:flex;justify-content:space-between;align-items:center">
      <div style="font-family:var(--fh);font-size:16px;font-weight:700">Nuevo cliente</div>
      <button data-click="closeNewClientModal" style="background:none;border:none;color:var(--m);font-size:18px;cursor:pointer;line-height:1">×</button>
    </div>
    <div style="padding:20px 24px">
      <div id="nc-msg" style="display:none;padding:8px 12px;border-radius:7px;font-size:13px;margin-bottom:14px"></div>
      <div style="margin-bottom:12px">
        <label style="font-size:11px;color:var(--m);text-transform:uppercase;letter-spacing:.7px;display:block;margin-bottom:5px">Nombre *</label>
        <input id="nc-name" type="text" placeholder="Ej: Clínica Dental MDE" style="width:100%;background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:9px 12px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none">
      </div>
      <div style="margin-bottom:12px">
        <label style="font-size:11px;color:var(--m);text-transform:uppercase;letter-spacing:.7px;display:block;margin-bottom:5px">Industria</label>
        <input id="nc-industry" type="text" placeholder="Salud, Inmobiliaria, Ecommerce..." style="width:100%;background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:9px 12px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none">
      </div>
      <div style="margin-bottom:12px">
        <label style="font-size:11px;color:var(--m);text-transform:uppercase;letter-spacing:.7px;display:block;margin-bottom:5px">Sitio web</label>
        <input id="nc-url" type="text" placeholder="cliente.com" style="width:100%;background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:9px 12px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none">
      </div>
      <div style="margin-bottom:16px">
        <label style="font-size:11px;color:var(--m);text-transform:uppercase;letter-spacing:.7px;display:block;margin-bottom:8px">Servicios activos</label>
        <div style="display:flex;gap:6px;flex-wrap:wrap" id="nc-svcs">
          <?php
          // All services with their module mapping
          $all_nc_svcs = [
            'meta'    => ['Meta Ads',        'meta_ads'],
            'google'  => ['Google Ads',      'google_ads'],
            'tiktok'  => ['TikTok Ads',      'tiktok_ads'],
            'seo'     => ['SEO',             'seo'],
            'email'   => ['Email Marketing', 'email'],
            'web'     => ['Sitio Web',       'web'],
            'shopify' => ['Shopify',         'web'],
          ];
          $nc_sub      = function_exists('dm_get_subscription') ? dm_get_subscription((int)$user['id']) : null;
          $nc_plan     = $nc_sub['plan'] ?? '';
          $nc_mods     = $nc_sub['modules_chosen'] ?? [];
          $nc_is_admin = dm_is_admin();
          foreach ($all_nc_svcs as $sv => [$sl, $mod]):
            // Starter: only show if module was chosen (web = show always if has web addon or plan > starter)
            if (!$nc_is_admin && $nc_plan === 'starter') {
              if ($mod === 'web') {
                if (empty($nc_sub['addons']['sitios_web']) && !in_array('web', $nc_mods)) continue;
              } elseif (!in_array($mod, $nc_mods)) continue;
            }
          ?>
          <span data-svc="<?=$sv?>" data-click="toggleNCSvc|__el" style="padding:5px 10px;border-radius:6px;font-size:12px;cursor:pointer;background:var(--bg3);border:1px solid var(--br2);color:var(--m);transition:all .15s"><?=$sl?></span>
          <?php endforeach ?>
        </div>
      </div>
      <div style="display:flex;justify-content:flex-end;gap:8px">
        <button data-click="closeNewClientModal" style="padding:8px 16px;border-radius:7px;font-size:13px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">Cancelar</button>
        <button data-click="submitNewClient" style="padding:8px 16px;border-radius:7px;font-size:13px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb);font-weight:500">Crear cliente</button>
      </div>
    </div>
  </div>
</div>
<script>
function openNewClientModal(){
  const m=document.getElementById('modal-new-client');
  if(!m){console.error('[DM] modal-new-client NO existe en el DOM');alert('Error: recarga la página (Ctrl+Shift+R)');return;}
  m.style.display='flex';
  setTimeout(()=>{const n=document.getElementById('nc-name');if(n)n.focus();},50);
}
function closeNewClientModal(){
  document.getElementById('modal-new-client').style.display='none';
  ['nc-name','nc-industry','nc-url'].forEach(id=>{document.getElementById(id).value='';});
  document.querySelectorAll('#nc-svcs span').forEach(s=>{s.style.background='var(--bg3)';s.style.borderColor='var(--br2)';s.style.color='var(--m)';s.removeAttribute('data-active');});
  document.getElementById('nc-msg').style.display='none';
}
function toggleNCSvc(el){
  if(el.dataset.active){
    delete el.dataset.active;
    el.style.background='var(--bg3)';el.style.borderColor='var(--br2)';el.style.color='var(--m)';
  } else {
    el.dataset.active='1';
    el.style.background='rgba(232,39,42,.15)';el.style.borderColor='rgba(232,39,42,.4)';el.style.color='var(--red)';
  }
}
async function submitNewClient(){
  const name=document.getElementById('nc-name').value.trim();
  if(!name){showNCMsg('El nombre es obligatorio.','err');return;}
  const svcs=[...document.querySelectorAll('#nc-svcs span[data-active]')].map(s=>s.dataset.svc).join(',');
  const csrf=document.querySelector('meta[name="dm-csrf"]')?.content||'';
  const body=new URLSearchParams({action:'create_client',name,industry:document.getElementById('nc-industry').value.trim(),url:document.getElementById('nc-url').value.trim(),services:svcs,csrf_token:csrf});
  try {
    const r=await fetch('/supercerebro/api/clients.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body});
    const text=await r.text();
    let d; try { d=JSON.parse(text); } catch(e){ showNCMsg('Error del servidor: '+text.slice(0,120),'err'); return; }
    if(d.ok){
      showNCMsg('Cliente creado.','ok');
      setTimeout(()=>{closeNewClientModal();location.reload();},900);
    } else {
      showNCMsg(d.error||'Error al crear cliente.','err');
    }
  } catch(e){ showNCMsg('Error de red: '+e.message,'err'); }
}
function showNCMsg(txt,type){
  const el=document.getElementById('nc-msg');
  el.textContent=txt;
  el.style.display='block';
  el.style.background=type==='ok'?'rgba(34,201,122,.1)':'rgba(232,39,42,.1)';
  el.style.border='1px solid '+(type==='ok'?'rgba(34,201,122,.3)':'rgba(232,39,42,.3)');
  el.style.color=type==='ok'?'var(--g)':'var(--red)';
}
</script>

