
<!-- ===== EMAIL MARKETING ===== -->
<div class="page" id="page-email">
  <div class="ph">
    <div><div class="pt">Email Marketing</div><div class="ps">Mailchimp · Campañas · Audiencias · AVI</div></div>
    <button data-click="loadEmailData" style="padding:5px 12px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">↻ Actualizar</button>
  </div>

  <!-- Estado sin cliente / sin creds -->
  <div id="em-no-client" style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:12px">
    <div style="font-size:44px">📧</div>
    <div style="font-family:var(--fh);font-size:18px;font-weight:700">Email Marketing</div>
    <div style="font-size:13px;color:var(--m);max-width:380px;line-height:1.7">Selecciona un cliente para ver sus métricas de Mailchimp: campañas enviadas, tasas de apertura, clics y audiencias.</div>
  </div>

  <!-- Wizard de conexión Mailchimp -->
  <div id="em-no-creds" style="display:none;justify-content:center;padding:40px 20px">
    <div class="card" style="max-width:520px;width:100%;padding:28px 30px">
      <div style="display:flex;align-items:center;gap:10px;margin-bottom:20px">
        <div style="font-size:30px">📧</div>
        <div>
          <div style="font-family:var(--fh);font-size:16px;font-weight:700">Conecta Mailchimp para este cliente</div>
          <div style="font-size:12px;color:var(--m);margin-top:2px">Necesitas la API key para ver campañas, audiencias y métricas</div>
        </div>
      </div>

      <div style="background:var(--bg3);border-radius:10px;padding:14px 16px;margin-bottom:16px">
        <div style="font-size:12px;font-weight:600;color:var(--t);margin-bottom:6px">Paso 1: Obtén tu API Key</div>
        <div style="font-size:12px;color:var(--m);line-height:1.8">
          → Entra a <strong>mailchimp.com</strong> con la cuenta del cliente<br>
          → Ve a <strong>Account → Extras → API keys</strong><br>
          → Crea una nueva key y cópiala
        </div>
      </div>

      <div style="margin-bottom:14px">
        <div style="font-size:12px;font-weight:600;color:var(--t);margin-bottom:8px">Paso 2: Pégala aquí</div>
        <input id="em-inline-key" type="text" placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-us1"
          style="width:100%;box-sizing:border-box;padding:10px 12px;border-radius:8px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:13px;font-family:var(--fb);outline:none"
          data-input="_scEmConnReset">
        <div style="font-size:11px;color:var(--m);margin-top:5px">Formato: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-us1</div>
      </div>

      <div style="display:flex;gap:10px;margin-bottom:14px">
        <button data-click="connectMailchimpInline" style="flex:1;padding:9px 0;border-radius:8px;background:var(--p);border:none;color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--fb)">🔗 Conectar Mailchimp</button>
        <button data-click="testMailchimpConnection" style="padding:9px 18px;border-radius:8px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);font-size:13px;cursor:pointer;font-family:var(--fb)">Probar conexión</button>
      </div>

      <div id="em-conn-status" style="font-size:13px;text-align:center">
        <span style="color:var(--m)">⚪ Sin verificar</span>
      </div>
    </div>
  </div>

  <!-- Contenido principal (oculto hasta cargar) -->
  <div id="em-main" style="display:none">

    <!-- TABS -->
    <div style="display:flex;gap:0;border-bottom:1px solid var(--br);margin-bottom:4px;overflow-x:auto">
      <button class="em-tab active" data-click="switchEMTab|dashboard|__el" style="padding:9px 16px;font-size:12px;color:var(--t);background:none;border:none;border-bottom:2px solid var(--p);cursor:pointer;font-family:var(--fb);white-space:nowrap">Dashboard</button>
      <button class="em-tab" data-click="switchEMTab|campanas|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">Campañas</button>
      <button class="em-tab" data-click="switchEMTab|audiencias|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">Audiencias</button>
      <button class="em-tab" data-click="switchEMTab|crear|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">📤 Crear campaña</button>
      <button class="em-tab" data-click="switchEMTab|borradores|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">📝 Borradores</button>
      <button class="em-tab" data-click="switchEMTab|copys|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">✦ Copys IA</button>
      <button class="em-tab" data-click="switchEMTab|estrategia|__el" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">✦ Estrategia AVI</button>
    </div>

    <!-- ═══ TAB: DASHBOARD ═══ -->
    <div class="em-panel" id="empanel-dashboard">

      <!-- Métricas resumen -->
      <div class="metrics" id="em-metrics" style="grid-template-columns:repeat(4,minmax(0,1fr))">
        <div class="metric">
          <div class="ml" data-tip="Total de suscriptores activos en la lista principal de Mailchimp"><div class="md" style="background:var(--p)"></div>Suscriptores</div>
          <div class="mv" id="em-members">—</div>
          <div class="mdelta" id="em-members-d" style="color:var(--m)"></div>
        </div>
        <div class="metric">
          <div class="ml" data-tip="Tasa de apertura promedio: porcentaje de destinatarios que abrieron el email"><div class="md" style="background:var(--b)"></div>Tasa de apertura</div>
          <div class="mv" id="em-open-rate">—</div>
          <div class="mdelta" id="em-open-rate-d" style="color:var(--m)"></div>
        </div>
        <div class="metric">
          <div class="ml" data-tip="Tasa de clics promedio: porcentaje de destinatarios que hicieron clic en algún enlace"><div class="md" style="background:var(--g)"></div>Tasa de clics</div>
          <div class="mv" id="em-click-rate">—</div>
          <div class="mdelta" id="em-click-rate-d" style="color:var(--m)"></div>
        </div>
        <div class="metric">
          <div class="ml" data-tip="Tasa de baja promedio: porcentaje de personas que se dieron de baja — referencia: <0.5% es saludable"><div class="md" style="background:var(--red)"></div>Tasa de baja</div>
          <div class="mv" id="em-unsub-rate">—</div>
          <div class="mdelta" id="em-unsub-rate-d" style="color:var(--m)"></div>
        </div>
      </div>

      <!-- Últimas 5 campañas (resumen) -->
      <div class="card">
        <div class="chd">
          <div class="ctit">📊 Últimas campañas</div>
          <button data-click="_scSwitchEMTabCampanas" style="padding:4px 12px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">Ver todas →</button>
        </div>
        <div style="overflow-x:auto">
          <table class="tbl" id="em-dash-camps" style="min-width:560px">
            <thead><tr><th>Campaña</th><th>Enviados</th><th>Apertura</th><th>Clics</th><th>Fecha</th></tr></thead>
            <tbody><tr><td colspan="5" style="text-align:center;color:var(--m);padding:18px">Cargando...</td></tr></tbody>
          </table>
        </div>
      </div>

      <!-- AVI resumen -->
      <div class="avi" id="em-avi-dash">
        <div class="avi-hd">
          <div class="avi-orb">✦</div>
          <div><div class="avi-name">AVI · Email Marketing</div><div class="avi-sub" id="em-avi-dash-sub">Análisis de rendimiento de campañas</div></div>
          <button data-click="emAVIquick|Analiza el rendimiento general de las campañas de email marketing de este cliente. Identifica tendencias en apertura y clics, y dame 3 recomendaciones concretas para mejorar los resultados" style="margin-left:auto;padding:5px 12px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.12);border:1px solid rgba(155,127,244,.25);color:var(--p);cursor:pointer;font-family:var(--fb)">✦ Analizar con AVI</button>
        </div>
        <div class="avi-row">
          <input class="avi-in" id="em-avi-q" placeholder="Pregunta sobre el rendimiento de tus emails..." onkeydown="if(event.key==='Enter')askEMAVI()">
          <button class="avi-send" data-click="askEMAVI">Preguntar</button>
        </div>
        <div class="avi-resp" id="em-avi-resp-dash"></div>
      </div>
    </div>

    <!-- ═══ TAB: CAMPAÑAS ═══ -->
    <div class="em-panel" id="empanel-campanas" style="display:none">
      <div class="card">
        <div class="chd">
          <div class="ctit">Campañas enviadas <span id="em-camps-count" style="font-size:11px;color:var(--m);font-weight:400"></span></div>
          <button data-click="loadEmailCampaigns" style="padding:4px 12px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">↺ Actualizar</button>
        </div>
        <div style="overflow-x:auto">
          <table class="tbl" id="em-camps-table" style="min-width:700px">
            <thead><tr>
              <th>Campaña / Asunto</th>
              <th>Enviados</th>
              <th>Apertura %</th>
              <th>Clics %</th>
              <th>Aperturas</th>
              <th>Clics</th>
              <th>Fecha envío</th>
            </tr></thead>
            <tbody id="em-camps-body">
              <tr><td colspan="7" style="text-align:center;color:var(--m);padding:20px">Cargando campañas...</td></tr>
            </tbody>
          </table>
        </div>
        <div style="margin-top:12px">
          <button data-click="emAVIquick|Analiza la tabla de campañas enviadas. Identifica cuáles tienen mejor rendimiento en apertura y clics, y explica por qué crees que funcionaron mejor. Dame acciones concretas para replicar ese éxito" class="btn-avi-analyze">✦ Analizar campañas con AVI</button>
          <div class="avi-resp" id="em-avi-resp-camps" style="display:none;margin-top:10px"></div>
        </div>
      </div>
    </div>

    <!-- ═══ TAB: AUDIENCIAS ═══ -->
    <div class="em-panel" id="empanel-audiencias" style="display:none">
      <div id="em-lists-wrap" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px">
        <div style="text-align:center;color:var(--m);font-size:13px;padding:30px;grid-column:1/-1">Cargando audiencias...</div>
      </div>
      <div style="margin-top:14px">
        <button data-click="emAVIquick|Analiza las audiencias/listas de Mailchimp de este cliente. Evalúa la salud de cada lista, identifica problemas (alta tasa de bajas, bajo engagement) y recomienda acciones para mejorar la calidad y el tamaño de la base de suscriptores" class="btn-avi-analyze">✦ Analizar audiencias con AVI</button>
        <div class="avi-resp" id="em-avi-resp-aud" style="display:none;margin-top:10px"></div>
      </div>
    </div>

    <!-- ═══ TAB: CREAR CAMPAÑA ═══ -->
    <div class="em-panel" id="empanel-crear" style="display:none">

      <!-- Indicador de pasos -->
      <div style="display:flex;align-items:center;gap:0;margin-bottom:20px">
        <div class="em-wiz-step active" id="em-wiz-ind-1" style="display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--p)">
          <div style="width:24px;height:24px;border-radius:50%;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700">1</div>
          Configuración
        </div>
        <div style="flex:1;height:1px;background:var(--br);margin:0 10px"></div>
        <div class="em-wiz-step" id="em-wiz-ind-2" style="display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--m)">
          <div id="em-wiz-circle-2" style="width:24px;height:24px;border-radius:50%;background:var(--bg3);border:1px solid var(--br2);color:var(--m);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700">2</div>
          Contenido
        </div>
        <div style="flex:1;height:1px;background:var(--br);margin:0 10px"></div>
        <div class="em-wiz-step" id="em-wiz-ind-3" style="display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--m)">
          <div id="em-wiz-circle-3" style="width:24px;height:24px;border-radius:50%;background:var(--bg3);border:1px solid var(--br2);color:var(--m);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700">3</div>
          Envío
        </div>
      </div>

      <!-- PASO 1: Configuración -->
      <div id="em-wiz-step1" class="card" style="padding:22px 24px">
        <div class="chd" style="margin-bottom:16px"><div class="ctit">Paso 1 — Configuración de la campaña</div></div>

        <div style="display:grid;gap:14px">
          <div>
            <label style="font-size:12px;font-weight:600;color:var(--t);display:block;margin-bottom:5px">Nombre de la campaña</label>
            <input id="em-camp-name" type="text" placeholder="Ej: Newsletter Mayo 2026"
              style="width:100%;box-sizing:border-box;padding:9px 12px;border-radius:8px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:13px;font-family:var(--fb);outline:none">
          </div>
          <div>
            <label style="font-size:12px;font-weight:600;color:var(--t);display:block;margin-bottom:5px">Asunto del email</label>
            <div style="display:flex;gap:8px">
              <input id="em-camp-subject" type="text" placeholder="Ej: ¿Sabías que puedes duplicar tus ventas este mes?"
                style="flex:1;padding:9px 12px;border-radius:8px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:13px;font-family:var(--fb);outline:none">
              <button data-click="emGenerateSubject" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb);white-space:nowrap">✦ AVI genera</button>
            </div>
          </div>
          <div>
            <label style="font-size:12px;font-weight:600;color:var(--t);display:block;margin-bottom:5px">Preheader</label>
            <div style="display:flex;gap:8px">
              <input id="em-camp-preheader" type="text" placeholder="Texto que aparece después del asunto en el inbox..."
                style="flex:1;padding:9px 12px;border-radius:8px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:13px;font-family:var(--fb);outline:none">
              <button data-click="emGeneratePreheader" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb);white-space:nowrap">✦ AVI genera</button>
            </div>
          </div>
          <div>
            <label style="font-size:12px;font-weight:600;color:var(--t);display:block;margin-bottom:5px">Lista de destinatarios</label>
            <select id="em-camp-list" style="width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:13px;font-family:var(--fb);outline:none">
              <option value="">-- Selecciona una lista --</option>
            </select>
          </div>
          <div>
            <label style="font-size:12px;font-weight:600;color:var(--t);display:block;margin-bottom:5px">Responder a (email)</label>
            <input id="em-camp-replyto" type="email" placeholder="contacto@cliente.com"
              style="width:100%;box-sizing:border-box;padding:9px 12px;border-radius:8px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:13px;font-family:var(--fb);outline:none">
          </div>
        </div>

        <div id="em-wiz-subj-resp" class="avi-resp" style="display:none;margin-top:10px"></div>

        <div style="display:flex;justify-content:flex-end;margin-top:20px">
          <button data-click="emWizardNext|1" style="padding:9px 24px;border-radius:8px;background:var(--p);border:none;color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--fb)">Siguiente → Contenido</button>
        </div>
      </div>

      <!-- PASO 2: Contenido -->
      <div id="em-wiz-step2" class="card" style="padding:22px 24px;display:none">
        <div class="chd" style="margin-bottom:16px"><div class="ctit">Paso 2 — Contenido del email</div></div>

        <div style="margin-bottom:12px">
          <button data-click="emGenerateContent" style="padding:8px 16px;border-radius:8px;font-size:12px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb);font-weight:600">✦ Generar contenido con AVI</button>
          <span style="font-size:11px;color:var(--m);margin-left:10px">AVI genera un email completo basado en el asunto y el contexto del cliente</span>
        </div>

        <div id="em-wiz-content-resp" class="avi-resp" style="display:none;margin-bottom:12px"></div>

        <div style="margin-bottom:14px">
          <label style="font-size:12px;font-weight:600;color:var(--t);display:block;margin-bottom:5px">Cuerpo del email (HTML o texto)</label>
          <textarea id="em-camp-body" rows="12" placeholder="Escribe o pega el contenido del email aquí. AVI puede generarlo por ti."
            style="width:100%;box-sizing:border-box;padding:10px 12px;border-radius:8px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:12px;font-family:monospace;outline:none;resize:vertical"
            data-input="emUpdatePreview"></textarea>
        </div>

        <div style="margin-bottom:14px">
          <label style="font-size:12px;font-weight:600;color:var(--t);display:block;margin-bottom:6px">Vista previa HTML</label>
          <div id="em-camp-preview" style="border:1px solid var(--br2);border-radius:8px;min-height:100px;background:#fff;padding:14px;font-size:13px;color:#222;overflow:auto;max-height:300px">
            <span style="color:#aaa;font-size:12px">La vista previa aparecerá aquí...</span>
          </div>
        </div>

        <div style="background:var(--bg3);border-radius:8px;padding:12px 14px;margin-bottom:8px">
          <label style="font-size:12px;font-weight:600;color:var(--t);display:block;margin-bottom:8px">📧 Enviar email de prueba</label>
          <div style="display:flex;gap:8px">
            <input id="em-test-email" type="email" placeholder="email@prueba.com"
              style="flex:1;padding:8px 12px;border-radius:7px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:12px;font-family:var(--fb);outline:none">
            <button data-click="_scEmSendTest" style="padding:8px 14px;border-radius:7px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);font-size:12px;cursor:pointer;font-family:var(--fb)">Enviar prueba</button>
          </div>
          <div id="em-test-status" style="font-size:11px;color:var(--m);margin-top:5px"></div>
        </div>

        <div style="display:flex;justify-content:space-between;margin-top:18px">
          <button data-click="emWizardPrev|2" style="padding:9px 20px;border-radius:8px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);font-size:13px;cursor:pointer;font-family:var(--fb)">← Volver</button>
          <button data-click="emWizardNext|2" style="padding:9px 24px;border-radius:8px;background:var(--p);border:none;color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--fb)">Siguiente → Envío</button>
        </div>
      </div>

      <!-- PASO 3: Envío -->
      <div id="em-wiz-step3" class="card" style="padding:22px 24px;display:none">
        <div class="chd" style="margin-bottom:16px"><div class="ctit">Paso 3 — Envío</div></div>

        <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:20px">
          <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px">
            <input type="radio" name="em-send-mode" value="now" id="em-send-now" checked data-change="_scHide|em-sched-row">
            <span><strong>Enviar ahora</strong> — La campaña se envía inmediatamente</span>
          </label>
          <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px">
            <input type="radio" name="em-send-mode" value="schedule" id="em-send-sched" data-change="_scShow|em-sched-row|flex">
            <span><strong>Programar</strong> — Elige fecha y hora de envío</span>
          </label>
          <div id="em-sched-row" style="display:none;align-items:center;gap:10px;padding-left:28px">
            <input type="datetime-local" id="em-sched-time"
              style="padding:8px 12px;border-radius:7px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:13px;font-family:var(--fb);outline:none">
          </div>
        </div>

        <div id="em-wiz-send-status" style="font-size:13px;color:var(--m);margin-bottom:12px;min-height:20px"></div>

        <div style="background:var(--bg3);border-radius:8px;padding:12px 14px;margin-bottom:16px;font-size:12px;color:var(--m)">
          <strong style="color:var(--t)">Resumen:</strong>
          <div id="em-wiz-summary" style="margin-top:6px;line-height:1.8">—</div>
        </div>

        <div style="display:flex;justify-content:space-between;margin-top:4px">
          <button data-click="emWizardPrev|3" style="padding:9px 20px;border-radius:8px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);font-size:13px;cursor:pointer;font-family:var(--fb)">← Volver</button>
          <button data-click="emSubmitCampaign" style="padding:10px 28px;border-radius:8px;background:var(--p);border:none;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--fb)">🚀 Crear y enviar campaña</button>
        </div>
      </div>

    </div><!-- /empanel-crear -->

    <!-- ═══ TAB: BORRADORES ═══ -->
    <div class="em-panel" id="empanel-borradores" style="display:none">
      <div class="card">
        <div class="chd">
          <div class="ctit">Campañas borrador <span id="em-drafts-count" style="font-size:11px;color:var(--m);font-weight:400"></span></div>
          <button data-click="loadEMDrafts|true" style="padding:4px 12px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">↺ Actualizar</button>
        </div>
        <div id="em-drafts-empty" style="display:none;text-align:center;padding:30px;color:var(--m);font-size:13px">
          <div style="font-size:36px;margin-bottom:10px">📭</div>
          No hay campañas borrador en esta cuenta de Mailchimp.
        </div>
        <div style="overflow-x:auto">
          <table class="tbl" id="em-drafts-table" style="min-width:580px">
            <thead><tr>
              <th>Campaña / Asunto</th>
              <th>Lista</th>
              <th>Creado</th>
              <th>Acciones</th>
            </tr></thead>
            <tbody id="em-drafts-body">
              <tr><td colspan="4" style="text-align:center;color:var(--m);padding:20px">Cargando borradores...</td></tr>
            </tbody>
          </table>
        </div>
        <div style="margin-top:10px;font-size:11px;color:var(--m);line-height:1.6">
          ℹ Los borradores incluyen campañas creadas con el wizard de esta plataforma y campañas en estado <em>draft</em> en Mailchimp.
          Puedes enviarlas directamente o eliminarlas desde aquí.
        </div>
      </div>
    </div><!-- /empanel-borradores -->

    <!-- ═══ TAB: COPYS IA ═══ -->
    <div class="em-panel" id="empanel-copys" style="display:none">
      <div class="avi">
        <div class="avi-hd">
          <div class="avi-orb">✦</div>
          <div><div class="avi-name">AVI · Generador de Copys</div><div class="avi-sub">Asuntos, cuerpos de email y secuencias automatizadas</div></div>
        </div>

        <!-- Accesos rápidos -->
        <div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px">
          <button data-click="emAVIquick|Escribe 5 asuntos de email de alto impacto para el negocio de este cliente. Cada asunto debe: tener menos de 50 caracteres, generar curiosidad o urgencia, y ser natural (no clickbait). Incluye una variante con emoji y otra sin él" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">📬 Asuntos impactantes</button>
          <button data-click="emAVIquick|Redacta un email de bienvenida completo para nuevos suscriptores de este cliente. Incluye: asunto atractivo, saludo personalizado, propuesta de valor clara, qué recibirán en futuros emails, y CTA. Tono profesional pero cercano" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">👋 Email de bienvenida</button>
          <button data-click="emAVIquick|Crea una secuencia de 3 emails de nurturing para este cliente: Email 1 (día 1): Educativo / valor puro. Email 2 (día 4): Caso de éxito o testimonio. Email 3 (día 7): Oferta o CTA directo. Para cada email incluye asunto, preheader y cuerpo completo" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">🔄 Secuencia nurturing</button>
          <button data-click="emAVIquick|Escribe un email promocional persuasivo para este cliente. Incluye: asunto urgente, preheader, hook de apertura, oferta irresistible con beneficios claros, prueba social, garantía (si aplica), y CTA repetido al menos 2 veces. Límite: 300 palabras" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">🎯 Email promocional</button>
          <button data-click="emAVIquick|Diseña una estrategia de re-engagement para recuperar suscriptores inactivos de este cliente (sin aperturas en 90+ días). Propón: asunto de curiosidad, oferta especial para reactivar, y email de despedida con segunda oportunidad si no responden" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">💤 Re-engagement</button>
          <button data-click="emAVIquick|Genera 3 variantes de preheader text (máx 100 caracteres cada uno) para complementar el asunto del email de este cliente. El preheader debe ampliar el asunto, crear curiosidad adicional y motivar la apertura" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">👁 Preheaders</button>
        </div>

        <div class="avi-row">
          <input class="avi-in" id="em-copys-q" placeholder="Describe qué copy necesitas: asunto, bienvenida, secuencia, promo..." onkeydown="if(event.key==='Enter')askEMCopys()">
          <button class="avi-send" data-click="askEMCopys">Generar</button>
        </div>
        <div class="avi-resp" id="em-copys-resp"></div>
      </div>
    </div>

    <!-- ═══ TAB: ESTRATEGIA AVI ═══ -->
    <div class="em-panel" id="empanel-estrategia" style="display:none">
      <div class="avi">
        <div class="avi-hd">
          <div class="avi-orb">✦</div>
          <div><div class="avi-name">AVI · Estrategia de Email Marketing</div><div class="avi-sub">Calendario, automatizaciones, segmentación y crecimiento de lista</div></div>
        </div>

        <div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px">
          <button data-click="emAVIquick|Diseña una estrategia completa de email marketing para este cliente. Incluye: frecuencia de envíos recomendada, tipos de emails del mix (newsletters, promos, nurturing), segmentación de lista por comportamiento, 3 automatizaciones clave a implementar, y KPIs a medir mensualmente" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">🗺️ Estrategia completa</button>
          <button data-click="emAVIquick|Crea un calendario editorial de email marketing para este cliente para el próximo mes. Define: semana 1-4, tipo de email cada semana, tema o campaña, objetivo y segmento de audiencia. Ajusta la frecuencia al historial de campañas enviadas" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">📅 Calendario mensual</button>
          <button data-click="emAVIquick|Propón 5 ideas de segmentación avanzada para las listas de Mailchimp de este cliente. Para cada segmento: nombre, criterios de filtro en Mailchimp, tipo de email a enviar y beneficio esperado" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">🎯 Segmentación avanzada</button>
          <button data-click="emAVIquick|Diseña 3 automatizaciones de Mailchimp para este cliente. Para cada automatización: nombre, trigger (evento que la activa), secuencia de emails con tiempos, objetivo y métricas de éxito. Prioriza las de mayor impacto en conversión" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">⚡ Automatizaciones</button>
          <button data-click="emAVIquick|Crea un plan de crecimiento de lista para este cliente. Propón: 5 lead magnets adaptados al negocio, estrategias de captación (popup, landing, redes, etc.), técnicas de limpieza y mantenimiento de lista, y meta de suscriptores en 90 días" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">📈 Crecimiento de lista</button>
          <button data-click="emAVIquick|Haz un diagnóstico completo del email marketing de este cliente basado en sus métricas actuales (tasa de apertura, clics, bajas). Compara con benchmarks del sector, identifica los 3 problemas principales y define el plan de acción con prioridad Alta/Media/Baja" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">🔍 Diagnóstico y benchmarks</button>
        </div>

        <div class="avi-row">
          <input class="avi-in" id="em-strat-q" placeholder="Pregunta sobre estrategia de email marketing..." onkeydown="if(event.key==='Enter')askEMStrat()">
          <button class="avi-send" data-click="askEMStrat">Preguntar</button>
        </div>
        <div class="avi-resp" id="em-strat-resp"></div>
      </div>
    </div>

  </div><!-- /em-main -->
</div>

<script>
// ── Estado ────────────────────────────────────────────────────────────────
let emCampaigns = [];
let emLists     = [];
let emDrafts    = [];

function emResetCache() { emCampaigns = []; emLists = []; emDrafts = []; }

function _emCsrf() {
  return document.querySelector('meta[name="dm-csrf"]')?.content || '';
}

async function _emPost(endpoint, payload) {
  const r = await fetch(endpoint, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': _emCsrf() },
    body: JSON.stringify(payload),
  });
  return r.json();
}

// ── Tab switching ─────────────────────────────────────────────────────────
function switchEMTab(tab, btn) {
  document.querySelectorAll('.em-tab').forEach(t => {
    t.style.color        = 'var(--m)';
    t.style.borderBottom = '2px solid transparent';
  });
  document.querySelectorAll('.em-panel').forEach(p => p.style.display = 'none');
  if (btn) {
    btn.style.color        = 'var(--t)';
    btn.style.borderBottom = '2px solid var(--p)';
  }
  document.getElementById('empanel-' + tab).style.display = 'block';
  if (tab === 'campanas'    && emCampaigns.length === 0) loadEmailCampaigns();
  if (tab === 'audiencias'  && emLists.length === 0)     loadEmailAudiences();
  if (tab === 'crear')       loadEMLists();
  if (tab === 'borradores')  loadEMDrafts();
}

// ── Carga principal ───────────────────────────────────────────────────────
async function loadEmailData() {
  if (!currentClient || currentClient === 'all') return;
  const nc = document.getElementById('em-no-client');
  const nd = document.getElementById('em-no-creds');
  const em = document.getElementById('em-main');
  if (nc) nc.style.display = 'none';
  if (nd) nd.style.display = 'none';
  if (em) em.style.display = 'none';

  try {
    const [camps, aud] = await Promise.all([
      _emPost('api/email-data.php', { action: 'campaigns', client_id: currentClient }),
      _emPost('api/email-data.php', { action: 'audience',  client_id: currentClient }),
    ]);

    if (!camps.ok && camps.error === 'no_creds') {
      if (nd) nd.style.display = 'flex';
      return;
    }
    if (em) em.style.display = 'block';
    if (camps.ok) {
      emCampaigns = camps.campaigns || [];
      renderEMDashCamps(emCampaigns.slice(0, 5));
      renderEMMetrics(emCampaigns);
    }
    if (aud.ok) {
      emLists = aud.lists || [];
      renderEMListMetrics(emLists);
    }
  } catch(e) {
    if (em) em.style.display = 'block';
  }
}

// ── Wizard conexión Mailchimp inline ──────────────────────────────────────
async function testMailchimpConnection() {
  const key = (document.getElementById('em-inline-key')?.value || '').trim();
  const status = document.getElementById('em-conn-status');
  if (!status) return;
  if (!key) { status.innerHTML = '<span style="color:var(--y)">⚠ Ingresa una API key primero</span>'; return; }
  status.innerHTML = '<span style="color:var(--m)">🔄 Verificando...</span>';
  try {
    const d = await _emPost('api/email-data.php', { action: 'test_connection', client_id: currentClient, api_key_test: key });
    if (d.ok) {
      status.innerHTML = '<span style="color:var(--g)">✓ Conectado — ' + escapeHtml(d.account_name || 'Cuenta verificada') + '</span>';
    } else {
      status.innerHTML = '<span style="color:var(--red)">✗ ' + escapeHtml(d.error || 'API key inválida') + '</span>';
    }
  } catch(e) { status.innerHTML = '<span style="color:var(--red)">✗ Error de red</span>'; }
}

async function connectMailchimpInline() {
  const key = (document.getElementById('em-inline-key')?.value || '').trim();
  const status = document.getElementById('em-conn-status');
  if (!key) { if(status) status.innerHTML = '<span style="color:var(--y)">⚠ Ingresa una API key</span>'; return; }
  if (!currentClient || currentClient === 'all') { if(status) status.innerHTML = '<span style="color:var(--y)">⚠ Selecciona un cliente primero</span>'; return; }
  if (status) status.innerHTML = '<span style="color:var(--m)">💾 Guardando...</span>';
  try {
    const r = await _emPost('api/save-credentials.php', { client_id: currentClient, service: 'mailchimp', fields: { api_key: key } });
    if (r.ok) {
      if (status) status.innerHTML = '<span style="color:var(--g)">✓ Guardado correctamente — cargando datos...</span>';
      setTimeout(() => loadEmailData(), 800);
    } else {
      if (status) status.innerHTML = '<span style="color:var(--red)">✗ ' + escapeHtml(r.error || 'Error al guardar') + '</span>';
    }
  } catch(e) { if(status) status.innerHTML = '<span style="color:var(--red)">✗ Error de red</span>'; }
}

// ── Métricas resumen ──────────────────────────────────────────────────────
function renderEMMetrics(camps) {
  if (!camps.length) return;
  const avgOpen  = camps.reduce((s, c) => s + c.open_rate,  0) / camps.length;
  const avgClick = camps.reduce((s, c) => s + c.click_rate, 0) / camps.length;
  const el = id => document.getElementById(id);

  el('em-open-rate').textContent  = avgOpen.toFixed(1)  + '%';
  el('em-click-rate').textContent = avgClick.toFixed(1) + '%';

  const openOk  = avgOpen  >= 20;
  const clickOk = avgClick >= 2;
  el('em-open-rate-d').textContent  = openOk  ? '✓ Sobre benchmark (20%)' : '↓ Bajo benchmark (20%)';
  el('em-open-rate-d').style.color  = openOk  ? 'var(--g)' : 'var(--red)';
  el('em-click-rate-d').textContent = clickOk ? '✓ Sobre benchmark (2%)' : '↓ Bajo benchmark (2%)';
  el('em-click-rate-d').style.color = clickOk ? 'var(--g)' : 'var(--red)';
}

function renderEMListMetrics(lists) {
  if (!lists.length) return;
  const l   = lists[0];
  const el  = id => document.getElementById(id);
  el('em-members').textContent    = l.member_count.toLocaleString();
  el('em-members-d').textContent  = l.name;
  el('em-members-d').style.color  = 'var(--m)';
  el('em-unsub-rate').textContent = l.unsub_rate.toFixed(2) + '%';
  const unsubOk = l.unsub_rate < 0.5;
  el('em-unsub-rate-d').textContent = unsubOk ? '✓ Saludable (<0.5%)' : '↑ Alta tasa de baja';
  el('em-unsub-rate-d').style.color  = unsubOk ? 'var(--g)' : 'var(--red)';
}

// ── Tabla resumen dashboard ────────────────────────────────────────────────
function renderEMDashCamps(camps) {
  const tbody = document.querySelector('#em-dash-camps tbody');
  if (!tbody) return;
  if (!camps.length) {
    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--m);padding:18px">Sin campañas enviadas</td></tr>';
    return;
  }
  tbody.innerHTML = camps.map(c => {
    const openC  = c.open_rate  >= 20 ? 'var(--g)' : c.open_rate  >= 10 ? 'var(--y)' : 'var(--red)';
    const clickC = c.click_rate >= 2  ? 'var(--g)' : c.click_rate >= 1  ? 'var(--y)' : 'var(--red)';
    return `<tr>
      <td><div style="font-weight:600;font-size:12px">${escapeHtml(c.title)}</div><div style="font-size:11px;color:var(--m)">${escapeHtml(c.subject)}</div></td>
      <td>${c.emails_sent.toLocaleString()}</td>
      <td style="color:${openC};font-weight:600">${c.open_rate}%</td>
      <td style="color:${clickC};font-weight:600">${c.click_rate}%</td>
      <td style="color:var(--m)">${emFmtDate(c.send_time)}</td>
    </tr>`;
  }).join('');
}

// ── Tabla campañas completa ────────────────────────────────────────────────
async function loadEmailCampaigns() {
  if (emCampaigns.length) { renderEMCampsTable(emCampaigns); return; }
  try {
    const d = await _emPost('api/email-data.php', { action: 'campaigns', client_id: currentClient });
    if (d.ok) { emCampaigns = d.campaigns || []; renderEMCampsTable(emCampaigns); }
  } catch(e) {}
}

function renderEMCampsTable(camps) {
  const count = document.getElementById('em-camps-count');
  if (count) count.textContent = '(' + camps.length + ')';
  const tbody = document.getElementById('em-camps-body');
  if (!tbody) return;
  if (!camps.length) {
    tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;color:var(--m);padding:20px">Sin campañas enviadas</td></tr>';
    return;
  }
  tbody.innerHTML = camps.map(c => {
    const openC  = c.open_rate  >= 20 ? 'var(--g)' : c.open_rate  >= 10 ? 'var(--y)' : 'var(--red)';
    const clickC = c.click_rate >= 2  ? 'var(--g)' : c.click_rate >= 1  ? 'var(--y)' : 'var(--red)';
    return `<tr>
      <td><div style="font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escapeHtml(c.title)}</div>
          <div style="font-size:11px;color:var(--m);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escapeHtml(c.subject)}</div></td>
      <td>${c.emails_sent.toLocaleString()}</td>
      <td style="color:${openC};font-weight:600">${c.open_rate}%</td>
      <td style="color:${clickC};font-weight:600">${c.click_rate}%</td>
      <td>${c.opens.toLocaleString()}</td>
      <td>${c.clicks.toLocaleString()}</td>
      <td style="color:var(--m);font-size:11px">${emFmtDate(c.send_time)}</td>
    </tr>`;
  }).join('');
}

// ── Audiencias ─────────────────────────────────────────────────────────────
async function loadEmailAudiences() {
  if (emLists.length) { renderEMLists(emLists); return; }
  try {
    const d = await _emPost('api/email-data.php', { action: 'audience', client_id: currentClient });
    if (d.ok) { emLists = d.lists || []; renderEMLists(emLists); }
  } catch(e) {}
}

function renderEMLists(lists) {
  const wrap = document.getElementById('em-lists-wrap');
  if (!wrap) return;
  if (!lists.length) {
    wrap.innerHTML = '<div style="text-align:center;color:var(--m);font-size:13px;padding:30px;grid-column:1/-1">Sin audiencias en esta cuenta</div>';
    return;
  }
  wrap.innerHTML = lists.map(l => {
    const openOk  = l.open_rate  >= 20;
    const clickOk = l.click_rate >= 2;
    const unsubOk = l.unsub_rate < 0.5;
    return `<div class="card" style="padding:16px 18px">
      <div style="font-family:var(--fh);font-size:14px;font-weight:700;margin-bottom:12px">${escapeHtml(l.name)}</div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
        <div style="background:var(--bg3);border-radius:8px;padding:10px 12px">
          <div style="font-size:10px;color:var(--m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px">Suscriptores</div>
          <div style="font-size:20px;font-weight:700;font-family:var(--fh)">${l.member_count.toLocaleString()}</div>
        </div>
        <div style="background:var(--bg3);border-radius:8px;padding:10px 12px">
          <div style="font-size:10px;color:var(--m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px">Apertura</div>
          <div style="font-size:20px;font-weight:700;font-family:var(--fh);color:${openOk?'var(--g)':'var(--red)'}">${l.open_rate}%</div>
        </div>
        <div style="background:var(--bg3);border-radius:8px;padding:10px 12px">
          <div style="font-size:10px;color:var(--m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px">Clics</div>
          <div style="font-size:20px;font-weight:700;font-family:var(--fh);color:${clickOk?'var(--g)':'var(--y)'}">${l.click_rate}%</div>
        </div>
        <div style="background:var(--bg3);border-radius:8px;padding:10px 12px">
          <div style="font-size:10px;color:var(--m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px">Tasa baja</div>
          <div style="font-size:20px;font-weight:700;font-family:var(--fh);color:${unsubOk?'var(--g)':'var(--red)'}">${l.unsub_rate}%</div>
        </div>
      </div>
      <div style="margin-top:10px;display:flex;gap:6px;flex-wrap:wrap">
        <span style="font-size:10px;padding:3px 8px;border-radius:4px;background:${openOk?'rgba(34,201,122,.12)':'rgba(232,39,42,.1)'};color:${openOk?'var(--g)':'var(--red)'}">${openOk?'✓ Apertura OK':'↓ Apertura baja'}</span>
        <span style="font-size:10px;padding:3px 8px;border-radius:4px;background:${unsubOk?'rgba(34,201,122,.12)':'rgba(232,39,42,.1)'};color:${unsubOk?'var(--g)':'var(--red)'}">${unsubOk?'✓ Baja saludable':'↑ Bajas elevadas'}</span>
      </div>
    </div>`;
  }).join('');
}

// ── AVI helpers ────────────────────────────────────────────────────────────
function emAVIquick(q) {
  const active = document.querySelector('.em-panel:not([style*="display: none"]):not([style*="display:none"])');
  const tabId  = active ? active.id.replace('empanel-', '') : 'dashboard';
  if (tabId === 'copys')      { document.getElementById('em-copys-q').value = q; askEMCopys();  return; }
  if (tabId === 'estrategia') { document.getElementById('em-strat-q').value = q; askEMStrat(); return; }
  if (tabId === 'campanas')   { document.getElementById('em-avi-q').value = q; askEMAVI('em-avi-resp-camps'); return; }
  if (tabId === 'audiencias') { document.getElementById('em-avi-q').value = q; askEMAVI('em-avi-resp-aud');  return; }
  document.getElementById('em-avi-q').value = q;
  askEMAVI();
}

function _emCtx() {
  const c = (typeof CLIENTS !== 'undefined' ? CLIENTS : []).find(x => x.id == currentClient) || {};
  const campsInfo = emCampaigns.slice(0, 10).map(c =>
    `- "${c.title}" | enviados:${c.emails_sent} | apertura:${c.open_rate}% | clics:${c.click_rate}% | ${(c.send_time||'').slice(0,10)}`
  ).join('\n');
  const listInfo = emLists.map(l =>
    `- ${l.name}: ${l.member_count} suscriptores | apertura:${l.open_rate}% | clics:${l.click_rate}% | baja:${l.unsub_rate}%`
  ).join('\n');
  return `Cliente: ${c.name||'ID '+currentClient} | Industria: ${c.industry||'—'} | Web: ${c.url||'—'}\n\nEmail Marketing — últimas campañas:\n${campsInfo||'Sin datos'}\n\nAudiencias:\n${listInfo||'Sin datos'}`;
}

async function askEMAVI(respId) {
  const q    = document.getElementById('em-avi-q').value.trim();
  const resp = document.getElementById(respId || 'em-avi-resp-dash');
  if (!q || !resp) return;
  resp.style.display = 'block';
  resp.innerHTML = '<span style="color:var(--m);font-size:12px">AVI analizando...</span>';
  try {
    const d = await _emPost('api/avi.php', { question: q, context: _emCtx(), section: 'email', client_id: currentClient });
    resp.innerHTML = typeof renderMD === 'function'
      ? renderMD(d.response || d.answer || 'Sin respuesta')
      : (d.response || d.answer || 'Sin respuesta').replace(/\n/g, '<br>');
  } catch(e) { resp.innerHTML = '<span style="color:#f87171">Error al contactar AVI.</span>'; }
  document.getElementById('em-avi-q').value = '';
}

async function askEMCopys() {
  const q    = document.getElementById('em-copys-q').value.trim();
  const resp = document.getElementById('em-copys-resp');
  if (!q || !resp) return;
  resp.innerHTML = '<span style="color:var(--m);font-size:12px">AVI generando copys...</span>';
  try {
    const d = await _emPost('api/avi.php', { question: q, context: _emCtx() + '\n\nTarea: generación de copys y contenido para email marketing.', section: 'email', client_id: currentClient });
    resp.innerHTML = typeof renderMD === 'function'
      ? renderMD(d.response || d.answer || 'Sin respuesta')
      : (d.response || d.answer || 'Sin respuesta').replace(/\n/g, '<br>');
  } catch(e) { resp.innerHTML = '<span style="color:#f87171">Error al contactar AVI.</span>'; }
  document.getElementById('em-copys-q').value = '';
}

async function askEMStrat() {
  const q    = document.getElementById('em-strat-q').value.trim();
  const resp = document.getElementById('em-strat-resp');
  if (!q || !resp) return;
  resp.innerHTML = '<span style="color:var(--m);font-size:12px">AVI elaborando estrategia...</span>';
  try {
    const d = await _emPost('api/avi.php', { question: q, context: _emCtx() + '\n\nTarea: estrategia de email marketing.', section: 'email', client_id: currentClient });
    resp.innerHTML = typeof renderMD === 'function'
      ? renderMD(d.response || d.answer || 'Sin respuesta')
      : (d.response || d.answer || 'Sin respuesta').replace(/\n/g, '<br>');
  } catch(e) { resp.innerHTML = '<span style="color:#f87171">Error al contactar AVI.</span>'; }
  document.getElementById('em-strat-q').value = '';
}

function emFmtDate(iso) {
  if (!iso) return '—';
  try { return new Date(iso).toLocaleDateString('es-MX', { day: '2-digit', month: 'short', year: 'numeric' }); }
  catch(e) { return (iso || '').slice(0, 10); }
}

// ── Wizard Crear Campaña ───────────────────────────────────────────────────
let emCreatorStep   = 1;
let emActiveCampId  = null;

function _emWizSetStep(step) {
  emCreatorStep = step;
  [1,2,3].forEach(s => {
    const el = document.getElementById('em-wiz-step' + s);
    if (el) el.style.display = s === step ? 'block' : 'none';
    const ind = document.getElementById('em-wiz-ind-' + s);
    const circle = document.getElementById('em-wiz-circle-' + s);
    if (ind) ind.style.color = s === step ? 'var(--p)' : (s < step ? 'var(--g)' : 'var(--m)');
    if (circle) {
      circle.style.background = s === step ? 'var(--p)' : (s < step ? 'var(--g)' : 'var(--bg3)');
      circle.style.color = (s <= step) ? '#fff' : 'var(--m)';
      circle.style.border = 'none';
    }
  });
  // fix step 1 circle (no id em-wiz-circle-1 but inline style on ind-1)
  const ind1 = document.getElementById('em-wiz-ind-1');
  if (ind1) {
    const c1 = ind1.querySelector('div');
    if (c1) { c1.style.background = step === 1 ? 'var(--p)' : 'var(--g)'; c1.style.color = '#fff'; }
  }
}

function emWizardNext(currentStep) {
  if (currentStep === 1) {
    const name    = document.getElementById('em-camp-name')?.value.trim();
    const subject = document.getElementById('em-camp-subject')?.value.trim();
    const list    = document.getElementById('em-camp-list')?.value;
    if (!name || !subject || !list) { showToast('Completa nombre, asunto y lista', 'var(--y)'); return; }
  }
  if (currentStep === 2) {
    const body = document.getElementById('em-camp-body')?.value.trim();
    if (!body) { showToast('El contenido del email no puede estar vacío', 'var(--y)'); return; }
    // Render summary for step 3
    const name    = document.getElementById('em-camp-name')?.value || '—';
    const subject = document.getElementById('em-camp-subject')?.value || '—';
    const listSel = document.getElementById('em-camp-list');
    const listName = listSel?.options[listSel.selectedIndex]?.text || '—';
    const summary = document.getElementById('em-wiz-summary');
    if (summary) summary.innerHTML =
      `<b>Campaña:</b> ${escapeHtml(name)}<br><b>Asunto:</b> ${escapeHtml(subject)}<br><b>Lista:</b> ${escapeHtml(listName)}<br><b>Contenido:</b> ${body.length} caracteres`;
  }
  _emWizSetStep(currentStep + 1);
}

function emWizardPrev(currentStep) {
  _emWizSetStep(currentStep - 1);
}

async function loadEMLists() {
  if (emLists.length) { _emPopulateListSelect(emLists); return; }
  try {
    const d = await _emPost('api/email-data.php', { action: 'get_lists', client_id: currentClient });
    if (d.ok) { emLists = d.lists || []; _emPopulateListSelect(emLists); }
  } catch(e) {}
}

function _emPopulateListSelect(lists) {
  const sel = document.getElementById('em-camp-list');
  if (!sel) return;
  sel.innerHTML = '<option value="">-- Selecciona una lista --</option>' +
    lists.map(l => `<option value="${escapeHtml(l.id)}">${escapeHtml(l.name)} (${l.member_count.toLocaleString()} suscriptores)</option>`).join('');
}

async function emGenerateSubject() {
  const name = document.getElementById('em-camp-name')?.value.trim();
  const resp = document.getElementById('em-wiz-subj-resp');
  if (!resp) return;
  const ctx = _emCtx();
  const prompt = `Genera 5 asuntos de email de alto impacto (máx 50 caracteres cada uno) para una campaña llamada "${name || 'newsletter'}". Contexto del cliente: ${ctx}. Incluye variantes con y sin emoji. Solo lista los asuntos, sin explicaciones.`;
  resp.style.display = 'block';
  resp.innerHTML = '<span style="color:var(--m);font-size:12px">AVI generando asuntos...</span>';
  callAVI(prompt, ctx, 'em-wiz-subj-resp', 'AVI generando asuntos...', 'email');
}

async function emGeneratePreheader() {
  const subject = document.getElementById('em-camp-subject')?.value.trim();
  const resp = document.getElementById('em-wiz-subj-resp');
  if (!resp) return;
  const ctx = _emCtx();
  const prompt = `Genera 3 preheaders (máx 100 caracteres cada uno) que complementen este asunto de email: "${subject || 'newsletter'}". Contexto: ${ctx}. Solo lista los preheaders numerados.`;
  resp.style.display = 'block';
  callAVI(prompt, ctx, 'em-wiz-subj-resp', 'AVI generando preheaders...', 'email');
}

async function emGenerateContent() {
  const subject  = document.getElementById('em-camp-subject')?.value.trim();
  const preheader = document.getElementById('em-camp-preheader')?.value.trim();
  const resp = document.getElementById('em-wiz-content-resp');
  const bodyTA = document.getElementById('em-camp-body');
  if (!resp || !bodyTA) return;
  const ctx = _emCtx();
  const prompt = `Redacta el cuerpo completo de un email marketing para este cliente. Asunto: "${subject || '(sin asunto)'}". Preheader: "${preheader || ''}". Contexto del cliente: ${ctx}. El email debe tener: saludo, párrafo de valor, oferta o contenido principal, CTA claro y despedida. Formato: texto plano estructurado listo para pegar en Mailchimp.`;
  resp.style.display = 'block';
  callAVI(prompt, ctx, 'em-wiz-content-resp', 'AVI generando email...', 'email', (text) => {
    // Poblar textarea con el texto generado (sin HTML de renderMD)
    const plain = text.replace(/<[^>]+>/g, '').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');
    bodyTA.value = plain;
    emUpdatePreview();
  });
}

function emUpdatePreview() {
  const body = document.getElementById('em-camp-body')?.value || '';
  const prev = document.getElementById('em-camp-preview');
  if (!prev) return;
  // FASE 2 FIX: sandboxed iframe para preview HTML — evita XSS, ejecución de scripts inline
  // y filtra contenido peligroso (script tags, event handlers, javascript: URLs).
  const isHtml = /<[a-z][\s\S]*>/i.test(body);
  // Limpiar contenido potencialmente peligroso aunque sea sandboxed
  const cleanBody = isHtml
    ? body
        .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
        .replace(/\son\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '')
        .replace(/javascript\s*:/gi, '')
    : body.replace(/[&<>]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c])).replace(/\n/g, '<br>');
  // Renderizar en iframe sandbox (sin permisos JS/forms/popups)
  prev.innerHTML = '';
  const iframe = document.createElement('iframe');
  iframe.sandbox = 'allow-same-origin'; // solo permite estilos heredados, sin scripts
  iframe.style.cssText = 'width:100%;border:0;min-height:100px;background:#fff';
  prev.appendChild(iframe);
  const doc = iframe.contentDocument || iframe.contentWindow?.document;
  if (doc) {
    doc.open();
    doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"><style>body{margin:0;padding:8px;font-family:system-ui,sans-serif;font-size:13px;color:#222}</style></head><body>' + cleanBody + '</body></html>');
    doc.close();
    // Ajustar altura al contenido (con cap a max-height del contenedor)
    iframe.onload = () => {
      try { iframe.style.height = Math.min(280, doc.body.scrollHeight + 16) + 'px'; } catch(_) {}
    };
  }
}

async function emSendTest(email) {
  const status = document.getElementById('em-test-status');
  if (!email) { if(status) { status.style.color='var(--y)'; status.textContent='Ingresa un email de prueba'; } return; }
  if (!emActiveCampId) {
    // Crear campaña temporal primero si no existe
    const created = await _emCreateCampaignIfNeeded();
    if (!created) { if(status){ status.style.color='var(--red)'; status.textContent='Error al crear campaña temporal'; } return; }
  }
  if (status) { status.style.color='var(--m)'; status.textContent='Enviando...'; }
  try {
    const d = await _emPost('api/email-data.php', { action: 'send_test', client_id: currentClient, campaign_id: emActiveCampId, test_email: email });
    if (status) { status.style.color = d.ok ? 'var(--g)' : 'var(--red)'; status.textContent = d.ok ? '✓ Email de prueba enviado' : '✗ ' + (d.error||'Error'); }
  } catch(e) { if(status){ status.style.color='var(--red)'; status.textContent='Error de red'; } }
}

async function _emCreateCampaignIfNeeded() {
  if (emActiveCampId) return true;
  const name     = document.getElementById('em-camp-name')?.value.trim();
  const subject  = document.getElementById('em-camp-subject')?.value.trim();
  const preheader= document.getElementById('em-camp-preheader')?.value.trim();
  const list_id  = document.getElementById('em-camp-list')?.value;
  const replyto  = document.getElementById('em-camp-replyto')?.value.trim();
  const body     = document.getElementById('em-camp-body')?.value.trim();
  if (!name || !subject || !list_id) return false;
  try {
    const d = await _emPost('api/email-data.php', { action: 'create_campaign', client_id: currentClient, name, subject, preheader, list_id, reply_to: replyto });
    if (!d.ok) return false;
    emActiveCampId = d.campaign_id;
    if (body) {
      await _emPost('api/email-data.php', { action: 'set_campaign_content', client_id: currentClient, campaign_id: emActiveCampId, html: body, plain_text: body.replace(/<[^>]+>/g, '') });
    }
    return true;
  } catch(e) { return false; }
}

// ── Wizard reset ──────────────────────────────────────────────────────────
function emResetWizard() {
  ['em-camp-name','em-camp-subject','em-camp-preheader','em-camp-replyto','em-camp-body','em-test-email'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.value = '';
  });
  const list = document.getElementById('em-camp-list');
  if (list) list.value = '';
  const prev = document.getElementById('em-camp-preview');
  if (prev) prev.innerHTML = '<span style="color:#aaa;font-size:12px">La vista previa aparecerá aquí...</span>';
  const ts = document.getElementById('em-test-status');
  if (ts) ts.textContent = '';
  const ws = document.getElementById('em-wiz-send-status');
  if (ws) { ws.textContent = ''; ws.style.color = 'var(--m)'; }
  emActiveCampId = null;
  _emWizSetStep(1);
}

// ── Borradores ────────────────────────────────────────────────────────────
async function loadEMDrafts(force = false) {
  if (emDrafts.length && !force) { renderEMDraftsTable(emDrafts); return; }
  const tbody = document.getElementById('em-drafts-body');
  if (tbody) tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:var(--m);padding:20px">Cargando...</td></tr>';
  const empty = document.getElementById('em-drafts-empty');
  if (empty) empty.style.display = 'none';
  try {
    const d = await _emPost('api/email-data.php', { action: 'drafts', client_id: currentClient });
    if (d.ok) {
      emDrafts = d.drafts || [];
      renderEMDraftsTable(emDrafts);
    } else {
      if (tbody) tbody.innerHTML = `<tr><td colspan="4" style="text-align:center;color:var(--red);padding:20px">${escapeHtml(d.error||'Error cargando borradores')}</td></tr>`;
    }
  } catch(e) {
    if (tbody) tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:var(--red);padding:20px">Error de red</td></tr>';
  }
}

function renderEMDraftsTable(drafts) {
  const count = document.getElementById('em-drafts-count');
  const empty = document.getElementById('em-drafts-empty');
  const table = document.getElementById('em-drafts-table');
  const tbody = document.getElementById('em-drafts-body');
  if (!tbody) return;
  if (count) count.textContent = '(' + drafts.length + ')';
  if (!drafts.length) {
    if (empty) empty.style.display = 'block';
    if (table) table.style.display = 'none';
    return;
  }
  if (empty) empty.style.display = 'none';
  if (table) table.style.display = '';
  tbody.innerHTML = drafts.map(d => `<tr id="em-draft-row-${escapeHtml(d.id)}">
    <td>
      <div style="font-weight:600;font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escapeHtml(d.title)}</div>
      <div style="font-size:11px;color:var(--m);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escapeHtml(d.subject||'Sin asunto')}</div>
    </td>
    <td style="font-size:12px;color:var(--m)">${escapeHtml(d.list_name)}</td>
    <td style="font-size:11px;color:var(--m)">${emFmtDate(d.create_time)}</td>
    <td style="white-space:nowrap">
      <button data-draft-id="${escapeHtml(d.id)}" data-draft-title="${escapeHtml(d.title)}" data-draft-action="send"
        style="padding:4px 10px;border-radius:6px;background:var(--p);border:none;color:#fff;font-size:11px;cursor:pointer;font-family:var(--fb);margin-right:5px">🚀 Enviar</button>
      <button data-draft-id="${escapeHtml(d.id)}" data-draft-title="${escapeHtml(d.title)}" data-draft-action="delete"
        style="padding:4px 10px;border-radius:6px;background:var(--bg3);border:1px solid var(--br2);color:var(--red);font-size:11px;cursor:pointer;font-family:var(--fb)">🗑 Eliminar</button>
    </td>
  </tr>`).join('');
}

// Delegated listener para botones de borrador (generados dinámicamente via JS)
document.addEventListener('click', function(e) {
  var btn = e.target.closest('[data-draft-action]');
  if (!btn) return;
  var id    = btn.dataset.draftId    || '';
  var title = btn.dataset.draftTitle || '';
  if (btn.dataset.draftAction === 'send')   emSendDraft(id, title);
  if (btn.dataset.draftAction === 'delete') emDeleteDraft(id, title);
});

async function emSendDraft(campId, campTitle) {
  if (!confirm('¿Enviar ahora la campaña "' + campTitle + '"?\n\nEsta acción es irreversible.')) return;
  showToast('Enviando campaña...', 'var(--m)', 2000);
  try {
    const d = await _emPost('api/email-data.php', { action: 'send_campaign', client_id: currentClient, campaign_id: campId });
    if (d.ok) {
      showToast('📧 Campaña enviada exitosamente', 'var(--g)', 4000);
      emDrafts = emDrafts.filter(x => x.id !== campId);
      renderEMDraftsTable(emDrafts);
      emCampaigns = []; // invalidar caché de campañas enviadas
    } else {
      showToast('✗ ' + (d.error||'Error al enviar'), 'var(--red)', 4000);
    }
  } catch(e) { showToast('Error de red', 'var(--red)', 3000); }
}

async function emDeleteDraft(campId, campTitle) {
  if (!confirm('¿Eliminar el borrador "' + campTitle + '"?\n\nEsta acción es irreversible en Mailchimp.')) return;
  try {
    const d = await _emPost('api/email-data.php', { action: 'delete_draft', client_id: currentClient, campaign_id: campId });
    if (d.ok) {
      showToast('Borrador eliminado', 'var(--m)', 2500);
      emDrafts = emDrafts.filter(x => x.id !== campId);
      renderEMDraftsTable(emDrafts);
    } else {
      showToast('✗ ' + (d.error||'Error al eliminar'), 'var(--red)', 3000);
    }
  } catch(e) { showToast('Error de red', 'var(--red)', 3000); }
}

let _emSubmitting = false; // FASE 2 FIX: lock contra doble envío
async function emSubmitCampaign() {
  if (_emSubmitting) { showToast('⏳ Envío en curso, espera...', 'var(--y)'); return; }
  const statusEl = document.getElementById('em-wiz-send-status');
  const sendNow  = document.getElementById('em-send-now')?.checked;
  const schedTime= document.getElementById('em-sched-time')?.value;
  if (!sendNow && !schedTime) { showToast('Selecciona fecha y hora de envío', 'var(--y)'); return; }
  // FASE 2 FIX: validar fecha futura para programación
  if (!sendNow && schedTime && new Date(schedTime).getTime() < Date.now() + 60000) {
    showToast('La fecha programada debe ser al menos 1 minuto en el futuro', 'var(--red)'); return;
  }
  // FASE 2 FIX: confirmación con resumen antes de envío masivo
  const lstName = (window.emLists && emLists[0]?.name) || 'audiencia';
  const lstSize = (window.emLists && emLists[0]?.stats?.member_count) || '?';
  const action  = sendNow ? `enviar AHORA` : `programar para ${schedTime}`;
  if (!confirm(`¿Confirmar ${action} a "${lstName}" (${lstSize} suscriptores)?`)) return;
  _emSubmitting = true;
  const submitBtn = document.querySelector('[onclick*="emSubmitCampaign"]');
  if (submitBtn) { submitBtn.disabled = true; submitBtn.style.opacity = '0.6'; submitBtn.style.cursor = 'wait'; }
  if (statusEl) { statusEl.style.color='var(--m)'; statusEl.textContent='Creando campaña...'; }
  const created = await _emCreateCampaignIfNeeded();
  if (!created) {
    _emSubmitting = false;
    if (submitBtn) { submitBtn.disabled = false; submitBtn.style.opacity = ''; submitBtn.style.cursor = ''; }
    if(statusEl){ statusEl.style.color='var(--red)'; statusEl.textContent='✗ Error al crear la campaña'; } return;
  }
  // Set content
  const body = document.getElementById('em-camp-body')?.value.trim() || '';
  if (body) {
    if (statusEl) statusEl.textContent = 'Subiendo contenido...';
    await _emPost('api/email-data.php', { action: 'set_campaign_content', client_id: currentClient, campaign_id: emActiveCampId, html: body, plain_text: body.replace(/<[^>]+>/g,'') });
  }
  try {
    let d;
    if (sendNow) {
      if (statusEl) statusEl.textContent = 'Enviando campaña...';
      d = await _emPost('api/email-data.php', { action: 'send_campaign', client_id: currentClient, campaign_id: emActiveCampId });
    } else {
      if (statusEl) statusEl.textContent = 'Programando campaña...';
      const iso = new Date(schedTime).toISOString();
      d = await _emPost('api/email-data.php', { action: 'schedule_campaign', client_id: currentClient, campaign_id: emActiveCampId, schedule_time: iso });
    }
    if (d.ok) {
      if (statusEl) { statusEl.style.color='var(--g)'; statusEl.textContent = sendNow ? '✓ ¡Campaña enviada exitosamente!' : '✓ Campaña programada para ' + (schedTime||''); }
      showToast(sendNow ? '📧 Campaña enviada' : '📅 Campaña programada', 'var(--g)', 4000);
      emDrafts = []; // invalidar caché de borradores
      setTimeout(() => emResetWizard(), 2500); // reset wizard tras mostrar éxito
    } else {
      if (statusEl) { statusEl.style.color='var(--red)'; statusEl.textContent = '✗ ' + (d.error||'Error al enviar'); }
    }
  } catch(e) { if(statusEl){ statusEl.style.color='var(--red)'; statusEl.textContent='✗ Error de red'; } }
  finally {
    _emSubmitting = false;
    if (submitBtn) { submitBtn.disabled = false; submitBtn.style.opacity = ''; submitBtn.style.cursor = ''; }
  }
}

</script>
