/* ══ TOKENS ══════════════════════════════════════════════ */
:root{
  --br:#E5006B;--br-d:#9e0049;--br-s:#fce4f0;--br-2:#6A1A4C;
  --bg:#f0f2f7;--card:#fff;--tx:#1e293b;--mu:#64748b;
  --bo:#dbe3ef;--sh:0 4px 16px rgba(15,23,42,.07);
  --ok:#059669;--ok-s:#ecfdf5;--wn:#d97706;--wn-s:#fff7ed;
  --bd:#dc2626;--bd-s:#fef2f2;--nv:#0f172a;--r:14px;
}

/* ══ MODO OSCURO ══════════════════════════════════════════ */
body.dark{
  --bg:#0f172a;--card:#1e293b;--tx:#e2e8f0;--mu:#94a3b8;
  --bo:#334155;--sh:0 4px 16px rgba(0,0,0,.3);
  --ok-s:#052e16;--wn-s:#1c1008;--bd-s:#1c0a0a;--nv:#0f172a;
}
body.dark .topbar{background:#1e293b;border-bottom-color:var(--br)}
body.dark #pifLogoSvg circle:first-child{fill:#E5006B;opacity:.25}
body.dark #pifLogoSvg path:last-child{fill:#ff4da6}
body.dark .ph{background:#162032;border-bottom-color:#334155}
body.dark .eco-btn,body.dark .plan-btn,body.dark .assist-btn{background:#1e293b;border-color:#334155;color:var(--tx)}
body.dark .eco-btn.on{background:#2d1a2e;border-color:var(--br)}
body.dark .plan-btn.on{background:linear-gradient(180deg,#1e293b,#2d1a2e)}
body.dark .assist-btn.on{background:#052e16}
body.dark .brands,body.dark .view-toggle{background:#0f172a;border-color:#334155}
body.dark .brands button,body.dark .view-toggle button{color:#94a3b8}
body.dark .kpi{background:#1e293b;border-color:#334155}
body.dark .sm{background:#162032;border-color:#334155}
body.dark .exp-card,body.dark .exp-hd{background:#1e293b;border-color:#334155}
body.dark .exp-hd{background:#162032}
body.dark .bench-table th:first-child{background:#0f172a;color:#e2e8f0}
body.dark .bench-table td{border-color:#334155;color:#e2e8f0}
body.dark .bench-table td:first-child{color:#e2e8f0}
body.dark .bench-table tr:nth-child(even) td{background:#162032;color:#e2e8f0}
body.dark .bench-table tr:nth-child(even) td.col-liv{background:rgba(229,0,107,.08)}
body.dark .bench-table tr:nth-child(even) td.col-other{background:#1a2535;opacity:1}
body.dark .bench-table td.col-other{opacity:1;filter:none;color:#cbd5e1}
body.dark .bench-table td.col-liv div{color:#ffb3d1 !important}
body.dark .bench-check-comp-ok{background:#334155;color:#94a3b8}
body.dark .bench-check-comp-no{background:#1e293b;color:#64748b}
body.dark .bench-excl-badge{background:linear-gradient(135deg,#b45309,#92400e)}
body.dark .bench-exp-band{background:linear-gradient(135deg,#0f172a,#1e3a5f)}
body.dark .btn-g{background:#1e293b;border-color:#334155;color:#e2e8f0}
body.dark .chip{background:#162032;border-color:#334155;color:#e2e8f0}
body.dark input,body.dark select,body.dark textarea{background:#162032;border-color:#334155;color:#e2e8f0}
body.dark .ret-box{background:#162032;border-color:#334155}
body.dark #lossPanel{border-color:#7f1d1d}
body.dark .signal.low{background:#2a0f0f;border-color:#7f1d1d;color:#fca5a5}
body.dark .signal.med{background:#2a1c0a;border-color:#92400e;color:#fcd34d}
body.dark .signal.high{background:#0a2418;border-color:#065f46;color:#6ee7b7}
body.dark .fin-sum{background:#162032;border-color:#334155}
body.dark .sbox{background:linear-gradient(180deg,#1a2438,#162032);border-color:#334155}
body.dark .sbox h3{color:#93c5fd}
body.dark .stext{background:#0f172a;border-color:#334155;color:#e2e8f0}
body.dark .btn-o{color:#cbd5e1;border-color:#334155}
body.dark .btn-o:hover,body.dark .btn-g:hover{background:#0f172a}
body.dark .obj{background:#2a1c0a;border-color:#92400e}
body.dark .obj > .obj-q{color:#fcd34d;background:transparent;padding:0}
body.dark .obj > .obj-r{color:#fde68a}
body.dark .hist-item{background:#162032;border-color:#334155}
body.dark .mode-pill{background:#162032;border-color:#334155;color:#94a3b8}
body.dark #assistSummary{background:#162032 !important}
body.dark .cmp-box.now{background:#162032}
body.dark .upg-table tr:nth-child(even) td{background:#162032}
.dark-toggle{
  display:flex;align-items:center;gap:6px;
  background:#f1f5f9;border:1.5px solid var(--bo);
  border-radius:999px;padding:6px 12px;
  font-size:11px;font-weight:800;color:var(--mu);
  cursor:pointer;transition:.16s;flex-shrink:0;
}
body.dark .dark-toggle{background:#334155;border-color:#475569;color:#e2e8f0}
.dark-track{
  width:32px;height:18px;border-radius:999px;background:#cbd5e1;
  position:relative;transition:.2s;flex-shrink:0;
}
body.dark .dark-track{background:var(--br)}
.dark-thumb{
  width:14px;height:14px;border-radius:50%;background:#fff;
  position:absolute;top:2px;left:2px;transition:.2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
body.dark .dark-thumb{left:16px}

/* ══ MODO RÁPIDO / EXPERTO ════════════════════════════════ */

/* Toggle de modo */
.modo-toggle-wrap{
  max-width:1480px;margin:10px auto 0;padding:0 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
}
.modo-toggle{
  display:flex;background:#f1f5f9;border:1.5px solid var(--bo);
  border-radius:999px;padding:3px;gap:3px;
}
body.dark .modo-toggle{background:#0f172a;border-color:#334155}
.modo-btn{
  border:none;background:transparent;border-radius:999px;
  padding:7px 16px;font-size:11px;font-weight:900;
  cursor:pointer;transition:.18s;color:var(--mu);font-family:inherit;
  display:flex;align-items:center;gap:5px;
}
.modo-btn.on{background:#fff;color:var(--tx);box-shadow:0 2px 8px rgba(15,23,42,.12)}
body.dark .modo-btn.on{background:#1e293b;color:#e2e8f0}
.modo-btn.experto.on{background:linear-gradient(135deg,#4c1d95,#6d28d9);color:#fff}
.modo-hint{font-size:10px;color:var(--mu);font-weight:700}

/* Modo Rápido — pantalla unificada */
/* V27 fix: Herramientas oculto por defecto — antes solo se ocultaba vía JS, causando un parpadeo
   donde se veía plan/asistencias antes de que cargara el script. El Copiloto es la pantalla de entrada real. */
#agenteView{display:none}
#modoRapido{display:none;max-width:560px;margin:0 auto;padding:12px 18px 80px}
#modoRapido.show{display:block}

/* Card de pitch en Modo Rápido — oculta en V27: el speech ahora vive solo en 🗣️ Guiones */
.mr-pitch-card{
  display:none;
  background:linear-gradient(135deg,#0f172a,#1e3a5f);
  border-radius:16px;padding:18px;margin-bottom:12px;
  border:1px solid rgba(229,0,107,.25);
}
.mr-pitch-label{font-size:9px;font-weight:900;color:var(--br);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.mr-pitch-text{font-size:13px;color:#e2e8f0;font-weight:600;line-height:1.6;min-height:60px}
.mr-pitch-loading{color:#64748b;font-style:italic}

/* KPIs rápidos en fila */
.mr-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.mr-kpi{background:var(--card);border:1px solid var(--bo);border-radius:12px;padding:10px 12px;text-align:center}
body.dark .mr-kpi{background:#1e293b;border-color:#334155}
.mr-kpi-k{font-size:9px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.4px}
.mr-kpi-v{font-size:18px;font-weight:900;color:var(--tx);margin-top:3px;letter-spacing:-.5px}
.mr-kpi-v.green{color:#059669}
.mr-kpi-v.amber{color:#d97706}
.mr-kpi-v.red{color:#dc2626}

/* Selección de plan simplificada en Modo Rápido */
.mr-plan-wrap{background:var(--card);border:1px solid var(--bo);border-radius:14px;padding:14px;margin-bottom:12px}
body.dark .mr-plan-wrap{background:#1e293b;border-color:#334155}
.mr-plan-label{font-size:10px;font-weight:900;color:var(--mu);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.mr-plan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.mr-plan-btn{
  border:1.5px solid var(--bo);border-radius:10px;padding:10px 8px;
  background:var(--card);cursor:pointer;text-align:center;
  font-family:inherit;transition:.15s;
}
body.dark .mr-plan-btn{background:#162032;border-color:#334155}
.mr-plan-btn.on{border-color:var(--br);background:var(--br-s)}
body.dark .mr-plan-btn.on{background:rgba(229,0,107,.15)}
.mr-plan-btn:active{transform:scale(.97)}
.mr-plan-name{font-size:11px;font-weight:900;color:var(--tx)}
.mr-plan-price{font-size:13px;font-weight:900;color:var(--br);margin-top:2px}
.mr-plan-daily{font-size:9px;color:var(--mu);font-weight:600}

/* Momento del Cliente en Modo Rápido — versión compacta */
.mr-momento-wrap{background:var(--card);border:1px solid var(--bo);border-radius:14px;padding:14px;margin-bottom:12px}
.mr-placeholder{
  text-align:center;font-size:12px;font-weight:700;color:var(--mu);
  background:#f8fafc;border:1.5px dashed var(--bo);border-radius:12px;padding:16px;margin-bottom:12px;
}
body.dark .mr-placeholder{background:#1e293b;border-color:#334155}
body.dark .mr-momento-wrap{background:#1e293b;border-color:#334155}
.mr-momento-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.mr-momento-btn{
  border:1.5px solid var(--bo);border-radius:10px;padding:10px 8px;
  background:var(--card);cursor:pointer;text-align:center;
  font-family:inherit;transition:.15s;
}
body.dark .mr-momento-btn{background:#162032;border-color:#334155}
.mr-momento-btn:active{transform:scale(.96)}
.mr-momento-btn.on.nuevo{border-color:#059669;background:#ecfdf5}
.mr-momento-btn.on.cancela{border-color:#dc2626;background:#fef2f2}
.mr-momento-btn.on.upgrade{border-color:#f59e0b;background:#fff7ed}
.mr-momento-btn.on.consulta{border-color:#6366f1;background:#eef2ff}
body.dark .mr-momento-btn.on.nuevo{background:#052e16}
body.dark .mr-momento-btn.on.cancela{background:#1c0a0a}
body.dark .mr-momento-btn.on.upgrade{background:#1c1008}
body.dark .mr-momento-btn.on.consulta{background:#1e1b4b}
.mr-mb-ico{font-size:22px;display:block;margin-bottom:4px}
.mr-mb-name{font-size:11px;font-weight:900;color:var(--tx);display:block}
.mr-mb-type{font-size:9px;color:var(--mu);font-weight:700;display:block;margin-top:1px}

/* Asistencias adicionales en Modo Rápido */
.mr-assist-wrap{background:var(--card);border:1px solid var(--bo);border-radius:14px;padding:14px;margin-bottom:12px}
body.dark .mr-assist-wrap{background:#1e293b;border-color:#334155}
.mr-assist-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:260px;overflow-y:auto;padding-right:2px}
.mr-assist-btn{
  display:flex;align-items:center;gap:8px;
  border:1.5px solid var(--bo);border-radius:10px;padding:8px 9px;
  background:var(--card);cursor:pointer;text-align:left;
  font-family:inherit;transition:.15s;
}
body.dark .mr-assist-btn{background:#162032;border-color:#334155}
.mr-assist-btn.on{border-color:var(--ok);background:#ecfdf5}
body.dark .mr-assist-btn.on{background:#052e16}
.mr-assist-btn.na{opacity:.4;cursor:not-allowed}
.mr-assist-btn:active{transform:scale(.97)}
.mr-assist-ico{font-size:15px;flex-shrink:0}
.mr-assist-name{font-size:10px;font-weight:800;color:var(--tx);line-height:1.25;flex:1;min-width:0}
.mr-assist-check{font-size:12px;font-weight:900;color:var(--ok);flex-shrink:0}
.mr-assist-empty{font-size:11px;color:var(--mu);font-weight:700;padding:10px 4px;text-align:center}
.mr-assist-summary{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:1px dashed var(--bo);font-size:11px;font-weight:800;color:var(--mu)}
.mr-assist-summary b{color:var(--ok);font-size:13px}

/* CTA principal en Modo Rápido */
.mr-cta-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.mr-cta-main{
  width:100%;padding:15px;border:none;border-radius:14px;
  background:linear-gradient(135deg,var(--br),var(--br-2));
  color:#fff;font-size:14px;font-weight:900;
  cursor:pointer;font-family:inherit;
  box-shadow:0 6px 20px rgba(229,0,107,.35);
  transition:.15s;letter-spacing:-.2px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.mr-cta-main:active{transform:scale(.98);filter:brightness(.95)}
.mr-cta-wa{
  width:100%;padding:12px;border:none;border-radius:12px;
  background:#25D366;color:#fff;font-size:13px;font-weight:900;
  cursor:pointer;font-family:inherit;
  box-shadow:0 4px 14px rgba(37,211,102,.3);
  transition:.15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.mr-cta-wa:active{transform:scale(.98)}
.mr-cta-expert{
  width:100%;padding:10px;border:1.5px solid var(--bo);border-radius:12px;
  background:transparent;color:var(--mu);font-size:11px;font-weight:800;
  cursor:pointer;font-family:inherit;transition:.15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.mr-cta-expert:active{transform:scale(.98)}

/* ── MICROINTERACCIONES GLOBALES ── */
.plan-btn:active,.eco-btn:active,.assist-btn:active{transform:scale(.97)!important;transition:transform .08s!important}
.btn:active{transform:scale(.97)!important;filter:brightness(.95)!important}
.momento-btn:not(.locked):active{transform:scale(.97)!important}
.quiz-opt:active{transform:translateX(4px)!important}
.obj-tab:active{opacity:.7!important}
.welcome-cta:active{transform:scale(.98)!important}

/* Ocultar Modo Experto cuando está activo Modo Rápido */
body.modo-rapido #agenteView .agent-adv-block,
body.modo-rapido #agenteView #ventaRapidaBar,
body.modo-rapido .layout,
body.modo-rapido .cockpit,
body.modo-rapido .legal,
body.modo-rapido .footer{display:none!important}
body.modo-rapido #modoRapido{display:block!important}
body.modo-rapido #calcStrip{display:none!important}

/* Ocultar Modo Rápido en Modo Experto */
body:not(.modo-rapido) #modoRapido{display:none!important}

/* ── MODO OSCURO MODO RÁPIDO ── */
body.dark .mr-pitch-card{background:linear-gradient(135deg,#0f172a,#1e3a5f)}
body.dark .mr-plan-wrap,body.dark .mr-momento-wrap{background:#1e293b;border-color:#334155}

/* ── RESPONSIVE MODO RÁPIDO ── */
@media(min-width:641px){
  #modoRapido{max-width:680px;padding:16px 24px 80px}
  .mr-plan-grid{grid-template-columns:repeat(4,1fr)}
  .mr-momento-grid{grid-template-columns:repeat(4,1fr)}
  .mr-kpis{grid-template-columns:repeat(4,1fr)}
  .mr-cta-wrap{flex-direction:row}
  .mr-cta-main,.mr-cta-wa{flex:1}
  .mr-cta-expert{flex:0 0 auto}
}
#btnPresent{
  background:var(--br);color:#fff;border:none;border-radius:999px;
  padding:6px 12px;font-size:11px;font-weight:800;
  white-space:nowrap;flex-shrink:0;cursor:pointer;
  transition:.15s;
}
#btnPresent:hover{filter:brightness(1.1);transform:translateY(-1px)}
body.present-mode #agenteView .layout,
body.present-mode #agenteView .momento-wrap,
body.present-mode #agenteView .cockpit,
body.present-mode #agenteView .legal,
body.present-mode #agenteView .footer,
body.present-mode #agenteView #ventaRapidaBar,
body.present-mode #agenteView .panel,
body.present-mode #calcStrip{display:none !important}
body.present-mode #clienteView{display:block !important}
body.present-mode #clienteView .cliente-wrap{padding-top:10px;margin:0 auto}
body.present-mode .view-toggle{display:none}
body.present-mode #floatClose{display:none !important}
body.present-mode #btnPresent{display:none}
#exitPresent{
  position:fixed;top:12px;left:12px;z-index:300;
  background:rgba(0,0,0,.75);color:#fff;border:none;
  border-radius:999px;padding:8px 16px;
  font-size:11px;font-weight:800;cursor:pointer;
  display:none;align-items:center;gap:6px;
  backdrop-filter:blur(4px);
}
body.present-mode #exitPresent{display:flex}
@media(max-width:640px){
  #btnPresent{font-size:9px;padding:4px 8px}
  #exitPresent{top:6px;left:6px;padding:6px 10px;font-size:10px}
  body.present-mode #clienteView .cliente-wrap{padding-top:50px}
}
#welcomeOverlay{
  position:fixed;inset:0;z-index:999;
  background:rgba(15,23,42,.85);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
#welcomeOverlay.hide{display:none}
.welcome-card{
  background:#fff;border-radius:24px;
  max-width:520px;width:100%;
  box-shadow:0 32px 80px rgba(15,23,42,.35);
  overflow:hidden;
}
body.dark .welcome-card{background:#1e293b}
.welcome-hero{
  background:linear-gradient(135deg,#E5006B 0%,#6A1A4C 60%,#0f172a 100%);
  padding:28px 28px 20px;text-align:center;
}
.welcome-logo{
  width:64px;height:64px;border-radius:18px;
  background:rgba(255,255,255,.15);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:14px;font-size:32px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.welcome-title{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.4px;margin-bottom:4px}
.welcome-sub{font-size:13px;color:rgba(255,255,255,.7);font-weight:600}
.welcome-steps{padding:22px 28px 0}
.welcome-step{
  display:flex;align-items:flex-start;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--bo);
}
.welcome-step:last-child{border-bottom:none}
.ws-num{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:14px;font-weight:900;color:#fff;
  margin-top:1px;
}
.ws-content{}
.ws-title{font-size:13px;font-weight:900;color:var(--tx);margin-bottom:2px}
.ws-desc{font-size:11px;color:var(--mu);font-weight:600;line-height:1.4}
.welcome-footer{padding:18px 28px 24px}
.welcome-cta{
  width:100%;padding:14px;border:none;border-radius:12px;
  background:linear-gradient(135deg,#E5006B,#6A1A4C);
  color:#fff;font-size:14px;font-weight:900;
  cursor:pointer;font-family:inherit;
  box-shadow:0 6px 20px rgba(229,0,107,.35);
  transition:.15s;letter-spacing:-.2px;
}
.welcome-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.welcome-skip{
  display:block;text-align:center;margin-top:10px;
  font-size:11px;color:var(--mu);font-weight:600;cursor:pointer;
  background:none;border:none;font-family:inherit;width:100%;
}
.welcome-skip:hover{color:var(--tx)}
.momento-wrap{max-width:1480px;margin:14px auto 0;padding:0 18px}
.momento-details{max-width:1480px;margin:14px auto 0;padding:0 18px}
.momento-details > summary{
  cursor:pointer;list-style:none;font-size:11px;font-weight:800;color:var(--mu);
  padding:8px 12px;background:#f8fafc;border:1px dashed var(--bo);border-radius:10px;
  display:inline-flex;align-items:center;gap:6px;user-select:none;
}
.momento-details > summary::-webkit-details-marker{display:none}
.momento-details > summary:hover{color:var(--br);border-color:var(--br)}
.momento-details .momento-wrap{margin-top:10px;padding:0}
body.dark .momento-details > summary{background:#1e293b;border-color:#334155;color:#94a3b8}
.momento-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:800px){.momento-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.momento-grid{grid-template-columns:1fr 1fr}}
.momento-btn{
  border:2px solid var(--bo);border-radius:14px;
  padding:14px 12px;background:var(--card);
  cursor:pointer;text-align:center;transition:.18s;
  font-family:inherit;position:relative;overflow:hidden;
}
.momento-btn:hover:not(.locked){transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,23,42,.1)}
.momento-btn.locked{opacity:.38;cursor:not-allowed;filter:grayscale(.6)}
.momento-btn.on{box-shadow:0 8px 24px rgba(0,0,0,.15)}
.momento-btn .mb-ico{font-size:28px;margin-bottom:8px;display:block}
.momento-btn .mb-name{font-size:12px;font-weight:900;display:block;margin-bottom:3px}
.momento-btn .mb-desc{font-size:10px;font-weight:600;color:var(--mu);display:block;line-height:1.3}
.momento-btn .mb-badge{
  position:absolute;top:8px;right:8px;
  font-size:8px;font-weight:900;padding:2px 6px;
  border-radius:999px;text-transform:uppercase;letter-spacing:.4px;
}
/* Colores por tipo */
.momento-btn.nuevo{border-color:rgba(5,150,105,.3)}
.momento-btn.nuevo.on{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border-color:#059669}
.momento-btn.nuevo .mb-name{color:#065f46}
.momento-btn.nuevo .mb-badge{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0}
.momento-btn.cancela{border-color:rgba(220,38,38,.3)}
.momento-btn.cancela.on{background:linear-gradient(135deg,#fef2f2,#fee2e2);border-color:#dc2626}
.momento-btn.cancela .mb-name{color:#991b1b}
.momento-btn.cancela .mb-badge{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.momento-btn.upgrade{border-color:rgba(245,158,11,.3)}
.momento-btn.upgrade.on{background:linear-gradient(135deg,#fff7ed,#fef3c7);border-color:#f59e0b}
.momento-btn.upgrade .mb-name{color:#92400e}
.momento-btn.upgrade .mb-badge{background:#fff7ed;color:#d97706;border:1px solid #fcd34d}
.momento-btn.consulta{border-color:rgba(99,102,241,.3)}
.momento-btn.consulta.on{background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-color:#6366f1}
.momento-btn.consulta .mb-name{color:#3730a3}
.momento-btn.consulta .mb-badge{background:#eef2ff;color:#6366f1;border:1px solid #c7d2fe}
body.dark .momento-btn{background:#1e293b;border-color:#334155}
body.dark .momento-btn.nuevo.on{background:linear-gradient(135deg,#052e16,#064e3b);border-color:#059669}
body.dark .momento-btn.cancela.on{background:linear-gradient(135deg,#1c0a0a,#450a0a);border-color:#dc2626}
body.dark .momento-btn.upgrade.on{background:linear-gradient(135deg,#1c1008,#292524);border-color:#f59e0b}
body.dark .momento-btn.consulta.on{background:linear-gradient(135deg,#1e1b4b,#1e293b);border-color:#6366f1}
/* Barra de contexto activo */
.momento-context{
  margin-top:10px;padding:10px 16px;border-radius:10px;
  display:none;align-items:center;gap:10px;font-size:12px;font-weight:700;
  flex-wrap:wrap;
}
.momento-context.show{display:flex}
.mc-icon{font-size:20px;flex-shrink:0}
.mc-text{flex:1;line-height:1.4}
.mc-action{
  border:none;border-radius:8px;padding:7px 14px;
  font-size:11px;font-weight:900;cursor:pointer;font-family:inherit;
  white-space:nowrap;flex-shrink:0;
}
#trainingView{display:none}
#trainingView.show{display:block}

/* ══ COPILOTO DE RETENCIÓN (V27 — flujo PPT) ═══════════════ */
#copilotoView{display:none}
#copilotoView.show{display:block}
#benchmarkView{display:none}
#benchmarkView.show{display:block}
#guionesView{display:none}
#guionesView.show{display:block}
.cp-standalone-hd{max-width:1480px;margin:14px auto 0;padding:0 18px}
.cp-wrap{max-width:760px;margin:0 auto;padding:18px 18px 90px}
.cp-head{text-align:center;margin-bottom:18px}
.cp-head h1{font-size:19px;font-weight:900;color:var(--tx);letter-spacing:-.3px;margin-bottom:4px}
.cp-head p{font-size:12px;color:var(--mu);font-weight:600}
.cp-progress{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:20px}
.cp-progress-label{font-size:10.5px;font-weight:800;color:var(--mu);margin-left:8px}
.cp-tally span.pulse{animation:cpPulse .5s ease}
@keyframes cpPulse{0%{transform:scale(1);background:var(--br-s)}50%{transform:scale(1.12);background:var(--br-s)}100%{transform:scale(1)}}
.cp-dot{width:8px;height:8px;border-radius:50%;background:var(--bo);transition:.2s}
.cp-dot.on{background:var(--br);width:22px;border-radius:5px}
.cp-step{display:none}
.cp-step.on{display:block;animation:cpFade .25s ease}
@keyframes cpFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.cp-step-label{font-size:11px;font-weight:900;color:var(--br);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.cp-opt-grid{display:grid;grid-template-columns:1fr;gap:10px}
.cp-opt{
  display:flex;align-items:center;gap:14px;text-align:left;
  background:var(--card);border:1.5px solid var(--bo);border-radius:14px;
  padding:16px;cursor:pointer;transition:.15s;font-family:inherit;width:100%;
}
.cp-opt:hover{border-color:var(--br);transform:translateY(-1px);box-shadow:var(--sh)}
.cp-opt .cp-ico{font-size:26px;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--br-s);border-radius:12px}
.cp-opt .cp-tx b{display:block;font-size:14px;font-weight:800;color:var(--tx)}
.cp-opt .cp-tx span{display:block;font-size:11.5px;color:var(--mu);font-weight:600;margin-top:2px}
.cp-back{background:none;border:none;color:var(--mu);font-size:12px;font-weight:800;cursor:pointer;padding:6px 0;margin-bottom:8px;font-family:inherit;display:flex;align-items:center;gap:4px}
.cp-back:hover{color:var(--br)}
.cp-banner{
  background:linear-gradient(135deg,var(--nv),#1e3a5f);color:#fff;border-radius:14px;
  padding:14px 16px;margin-bottom:16px;display:flex;align-items:center;gap:12px;
}
.cp-banner .cp-check{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.cp-banner b{display:block;font-size:13px;font-weight:900}
.cp-banner span{font-size:11px;opacity:.85;font-weight:600}
.cp-card{background:var(--card);border:1.5px solid var(--bo);border-radius:16px;overflow:hidden;box-shadow:var(--sh);margin-bottom:14px}
.cp-card-hd{padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.cp-card-bd{padding:14px 16px}
.cp-hd-escucha{background:#eff6ff;color:#1d4ed8}
.cp-hd-di{background:linear-gradient(135deg,#fce4f0,#fbcfe8);color:#9e0049}
.cp-hd-valor{background:#ecfdf5;color:#047857}
.cp-hd-cierre{background:#fff7ed;color:#c2410c}
.cp-escucha-text{font-size:13px;color:var(--tx);font-weight:600;font-style:italic;line-height:1.5}
.cp-speech{font-size:13.5px;color:var(--tx);line-height:1.7;white-space:pre-line;font-weight:500}
.cp-speech-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.cp-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cp-benefit-chip{display:flex;align-items:center;gap:6px;background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800}
.cp-btn{border:none;border-radius:10px;padding:10px 16px;font-size:12.5px;font-weight:900;cursor:pointer;font-family:inherit;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.cp-btn-primary{background:linear-gradient(135deg,#E5006B,#9e0049);color:#fff}
.cp-btn-primary:hover{filter:brightness(1.08)}
.cp-btn-outline{background:transparent;border:1.5px solid var(--bo);color:var(--tx)}
.cp-btn-outline:hover{border-color:var(--br);color:var(--br)}
.cp-btn-wa{background:#25D366;color:#fff}
.cp-cierre-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cp-cierre-btn{border-radius:12px;padding:16px 10px;border:1.5px solid var(--bo);background:var(--card);cursor:pointer;font-family:inherit;text-align:center;transition:.15s}
.cp-cierre-btn:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.cp-cierre-btn .em{font-size:24px;display:block;margin-bottom:6px}
.cp-cierre-btn b{font-size:12.5px;color:var(--tx)}
.cp-cierre-btn.won{border-color:#6ee7b7}
.cp-cierre-btn.lost{border-color:#fecaca}
.cp-result{text-align:center;padding:20px 10px}
.cp-result .em{font-size:48px;display:block;margin-bottom:10px}
.cp-result h2{font-size:17px;font-weight:900;color:var(--tx);margin-bottom:6px}
.cp-result p{font-size:12.5px;color:var(--mu);font-weight:600;line-height:1.6}
.cp-golden{
  background:var(--wn-s);border:1.5px solid #fcd34d;border-radius:12px;padding:12px 14px;
  font-size:12px;color:#78350f;line-height:1.6;font-weight:600;margin:14px 0;text-align:left;
}
.cp-golden b{color:#92400e}
.cp-tally{
  display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px;
  font-size:10.5px;font-weight:800;color:var(--mu);
}
.cp-tally span{background:#f8fafc;border:1px solid var(--bo);border-radius:999px;padding:4px 10px}
body.dark .cp-tally span{background:#1e293b;border-color:#334155}
/* Tarjeta "Di esto" — protagonista del flujo, más peso visual que las demás */
.cp-card-main{border-width:2px;border-color:#fbcfe8;box-shadow:0 8px 28px rgba(229,0,107,.14)}
.cp-card-main .cp-speech{font-size:14.5px;line-height:1.75}
body.dark .cp-card-main{border-color:#6A1A4C}
.cp-folio-box{
  background:linear-gradient(135deg,#fff7ed,#fffbeb);border:1.5px solid #fcd34d;border-radius:12px;
  padding:14px 16px;text-align:left;font-size:12.5px;color:#78350f;line-height:1.6;font-weight:600;
}
body.dark .cp-folio-box{background:#1c1008;border-color:#92400e;color:#fde68a}
.cp-tangible{margin-top:14px;padding-top:14px;border-top:1px dashed var(--bo)}
.cp-tangible-title{font-size:11.5px;font-weight:900;color:var(--tx);margin-bottom:10px}
.cp-tangible-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cp-tangible-item{text-align:center;background:#f8fafc;border:1px solid var(--bo);border-radius:12px;padding:12px}
.cp-qr{width:96px;height:96px;border-radius:8px;margin-bottom:8px;background:#fff}
.cp-tangible-label{font-size:11.5px;font-weight:800;color:var(--tx);margin-bottom:8px}
.cp-btn-sm{padding:7px 12px;font-size:11px;text-decoration:none}
.cp-tangible-hint{font-size:10.5px;color:var(--mu);font-weight:600;margin-top:10px;text-align:center}
body.dark .cp-tangible-item{background:#1e293b;border-color:#334155}
@media (max-width:420px){.cp-tangible-grid{grid-template-columns:1fr}}
.cp-toolbar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0 4px}
.cp-tool-btn{
  display:flex;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--bo);
  border-radius:999px;padding:8px 14px;font-size:11.5px;font-weight:800;color:var(--tx);
  cursor:pointer;font-family:inherit;transition:.15s;
}
.cp-tool-btn:hover{border-color:var(--br);color:var(--br)}
body.dark .cp-opt{background:#1e293b;border-color:#334155}
body.dark .cp-opt .cp-ico{background:#2d1a2e}
body.dark .cp-opt .cp-tx b{color:#e2e8f0}
body.dark .cp-card{background:#1e293b;border-color:#334155}
body.dark .cp-hd-escucha{background:#0f2744;color:#93c5fd}
body.dark .cp-hd-di{background:#3a0d24;color:#ff8fc4}
body.dark .cp-hd-valor{background:#052e16;color:#6ee7b7}
body.dark .cp-hd-cierre{background:#2a1c0a;color:#fdba74}
body.dark .cp-speech,body.dark .cp-escucha-text{color:#e2e8f0}
body.dark .cp-benefit-chip{background:#052e16;border-color:#065f46;color:#6ee7b7}
body.dark .cp-cierre-btn{background:#1e293b;border-color:#334155}
body.dark .cp-golden{background:#1c1008;border-color:#92400e;color:#fde68a}
body.dark .cp-golden b{color:#fcd34d}
body.dark .cp-tool-btn{background:#1e293b;border-color:#334155;color:#e2e8f0}
body.dark .cp-btn-outline{border-color:#334155;color:#e2e8f0}
@media (min-width:520px){.cp-opt-grid.cp-3col{grid-template-columns:1fr 1fr 1fr}.cp-opt.cp-vert{flex-direction:column;text-align:center;gap:8px}}
.train-wrap{max-width:860px;margin:0 auto;padding:20px 18px 60px}
.train-hero{
  background:linear-gradient(135deg,#4c1d95,#6d28d9,#7c3aed);
  border-radius:20px;padding:24px;color:#fff;margin-bottom:16px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.train-hero-icon{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:28px;flex-shrink:0}
.train-hero-title{font-size:20px;font-weight:900;letter-spacing:-.4px}
.train-hero-sub{font-size:12px;opacity:.75;font-weight:600;margin-top:3px}
.train-score-strip{display:flex;gap:12px;margin-left:auto;flex-wrap:wrap}
.train-score-item{text-align:center;background:rgba(255,255,255,.12);border-radius:12px;padding:10px 16px}
.train-score-item .tsk{font-size:9px;text-transform:uppercase;letter-spacing:.5px;opacity:.7;font-weight:800}
.train-score-item .tsv{font-size:22px;font-weight:900;margin-top:2px}
/* Tabs de modalidad */
.train-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.train-tab{
  flex:1;min-width:140px;padding:12px 16px;border:2px solid #e2e8f0;
  border-radius:14px;background:#fff;cursor:pointer;text-align:center;
  transition:.15s;font-family:inherit;
}
.train-tab:hover{border-color:#7c3aed;transform:translateY(-1px)}
.train-tab.on{border-color:#7c3aed;background:linear-gradient(135deg,#f5f3ff,#ede9fe);box-shadow:0 4px 14px rgba(124,58,237,.15)}
body.dark .train-tab{background:#1e293b;border-color:#334155;color:#e2e8f0}
body.dark .train-tab.on{background:linear-gradient(135deg,#2e1065,#1e293b);border-color:#7c3aed}
.train-tab-icon{font-size:24px;margin-bottom:6px}
.train-tab-name{font-size:12px;font-weight:900;color:#1e293b}
body.dark .train-tab-name{color:#e2e8f0}
.train-tab-desc{font-size:10px;color:var(--mu);font-weight:600;margin-top:2px}
/* Panel contenido */
.train-panel{background:var(--card);border-radius:16px;border:1px solid var(--bo);box-shadow:var(--sh);overflow:hidden}
.train-ph{padding:14px 18px;background:#f5f3ff;border-bottom:1px solid #ddd6fe;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
body.dark .train-ph{background:#2e1065;border-color:#4c1d95}
.train-ph-title{font-size:12px;font-weight:900;color:#4c1d95;text-transform:uppercase;letter-spacing:.6px}
body.dark .train-ph-title{color:#c4b5fd}
.train-pb{padding:18px}
/* Quiz */
.quiz-q{font-size:14px;font-weight:800;color:var(--tx);margin-bottom:14px;line-height:1.5;padding:14px;background:linear-gradient(135deg,#f5f3ff,#ede9fe);border-radius:12px;border-left:4px solid #7c3aed}
body.dark .quiz-q{background:linear-gradient(135deg,#2e1065,#1e293b)}
.quiz-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.quiz-opt{
  padding:11px 14px;border:1.5px solid var(--bo);border-radius:10px;
  background:var(--card);cursor:pointer;text-align:left;font-size:13px;
  font-weight:600;color:var(--tx);transition:.14s;font-family:inherit;width:100%;
}
.quiz-opt:hover:not(:disabled){border-color:#7c3aed;background:#f5f3ff;transform:translateX(3px)}
body.dark .quiz-opt:hover:not(:disabled){background:#2e1065}
.quiz-opt.correct{background:#ecfdf5;border-color:#059669;color:#065f46;font-weight:800}
.quiz-opt.wrong{background:#fef2f2;border-color:#dc2626;color:#991b1b}
.quiz-opt.reveal{background:#ede9fe;border-color:#7c3aed;color:#4c1d95;font-weight:800}
.quiz-feedback{padding:12px 14px;border-radius:10px;font-size:12px;font-weight:700;line-height:1.5;margin-bottom:10px}
.quiz-feedback.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.quiz-feedback.bad{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
/* Simulador */
.sim-obj-card{background:linear-gradient(135deg,#fff7ed,#fffbeb);border:2px solid #fed7aa;border-radius:14px;padding:16px;margin-bottom:14px}
.sim-obj-label{font-size:10px;font-weight:900;color:#92400e;text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.sim-obj-text{font-size:14px;font-weight:800;color:#78350f;line-height:1.5}
.sim-input{width:100%;min-height:80px;padding:12px 14px;border:1.5px solid var(--bo);border-radius:10px;font-size:13px;font-family:inherit;color:var(--tx);background:var(--card);resize:vertical;margin-bottom:10px}
.sim-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.sim-feedback-card{border-radius:12px;padding:14px 16px;margin-top:12px;display:none}
.sim-feedback-card.show{display:block}
.sim-score-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:900;margin-bottom:10px}
/* Guía paso a paso */
.guide-steps{display:flex;flex-direction:column;gap:0}
.guide-step{display:flex;gap:0;position:relative}
.guide-step:not(:last-child)::before{content:'';position:absolute;left:19px;top:40px;bottom:0;width:2px;background:linear-gradient(180deg,#7c3aed,#ddd6fe);z-index:0}
.guide-step-num{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#4c1d95);color:#fff;font-size:14px;font-weight:900;display:grid;place-items:center;flex-shrink:0;z-index:1;box-shadow:0 4px 12px rgba(124,58,237,.3)}
.guide-step-content{flex:1;padding:0 0 24px 14px}
.guide-step-title{font-size:13px;font-weight:900;color:var(--tx);margin-bottom:6px}
.guide-step-desc{font-size:12px;color:var(--mu);font-weight:600;line-height:1.5;margin-bottom:8px}
.guide-step-script{background:#f5f3ff;border:1px solid #ddd6fe;border-radius:8px;padding:10px 12px;font-size:12px;color:#4c1d95;font-weight:700;font-style:italic;line-height:1.5}
body.dark .guide-step-script{background:#2e1065;border-color:#4c1d95;color:#c4b5fd}
.guide-check{display:flex;align-items:center;gap:8px;margin-top:8px}
.guide-check input[type=checkbox]{width:16px;height:16px;accent-color:#7c3aed;cursor:pointer}
.guide-check label{font-size:11px;font-weight:700;color:var(--mu);cursor:pointer}
.obj-panel{background:var(--card);border:1px solid var(--bo);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.obj-tabs{display:flex;border-bottom:1px solid var(--bo);background:#f8fafc;overflow-x:auto;scrollbar-width:none}
body.dark .obj-tabs{background:#162032}
.obj-tab{
  border:none;background:transparent;padding:9px 14px;
  font-size:11px;font-weight:800;color:var(--mu);
  white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;
  transition:.14s;font-family:inherit;
}
.obj-tab.on{color:var(--br);border-bottom-color:var(--br);background:#fff}
body.dark .obj-tab.on{background:#1e293b}
.obj-body{padding:14px}
.obj-card{
  background:linear-gradient(135deg,#fff7fb,#fff);
  border:1.5px solid rgba(229,0,107,.15);
  border-radius:12px;padding:14px 16px;
  display:none;
}
body.dark .obj-card{background:linear-gradient(135deg,#2d1a2e,#1e293b);border-color:rgba(229,0,107,.25)}
.obj-card.on{display:block}
.obj-q{
  font-size:13px;font-weight:900;color:var(--tx);
  padding:10px 14px;background:rgba(229,0,107,.06);
  border-radius:8px;border-left:3px solid var(--br);
  margin-bottom:12px;line-height:1.4;
}
body.dark .obj-q{background:rgba(229,0,107,.1)}
.obj-steps{display:flex;flex-direction:column;gap:8px}
.obj-step{display:flex;gap:10px;align-items:flex-start}
.obj-num{
  flex:0 0 22px;height:22px;border-radius:50%;
  background:var(--br);color:#fff;
  font-size:10px;font-weight:900;
  display:grid;place-items:center;margin-top:1px;
}
.obj-txt{font-size:12px;color:var(--tx);font-weight:600;line-height:1.5;flex:1}
.obj-txt strong{color:var(--br);font-weight:900}
.obj-tip{
  margin-top:10px;padding:8px 12px;
  background:var(--ok-s);border:1px solid #a7f3d0;
  border-radius:8px;font-size:11px;color:#065f46;font-weight:700;
}
body.dark .obj-tip{background:#052e16;border-color:#166534;color:#86efac}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
body{margin:0;font-family:'Montserrat',sans-serif;background:var(--bg);color:var(--tx);font-size:14px}
button,select,textarea{font:inherit;cursor:pointer}

/* ══ TOPBAR ══════════════════════════════════════════════ */
.topbar{position:sticky;top:0;z-index:90;background:#fff;border-bottom:3px solid var(--br);box-shadow:0 2px 12px rgba(15,23,42,.08)}
.ti{max-width:1480px;margin:0 auto;padding:8px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:64px}
.logo-box{width:48px;height:48px;flex:0 0 48px;border-radius:12px;background:var(--br);overflow:hidden;display:grid;place-items:center;box-shadow:0 6px 16px rgba(229,0,107,.25)}
.logo-box img{width:42px;height:42px;object-fit:contain;filter:brightness(0) invert(1)}
.app-name{font-size:clamp(15px,2vw,20px);font-weight:900;letter-spacing:-.5px;line-height:1}
.app-name small{display:block;font-size:10px;color:var(--mu);font-weight:600;margin-top:2px}
/* segmented brands */
.brands{display:flex;background:#f1f5f9;border:1px solid var(--bo);padding:3px;border-radius:999px;gap:3px}
.brands button{border:none;background:transparent;color:#475569;font-weight:800;font-size:11px;padding:7px 14px;border-radius:999px;transition:.15s}
.brands button.on{background:var(--br);color:#fff;box-shadow:0 4px 14px rgba(229,0,107,.22)}
/* mode pill */
.mode-pill{display:flex;align-items:center;gap:6px;background:#f8fafc;border:1.5px solid var(--bo);border-radius:999px;padding:6px 14px;font-size:11px;font-weight:800;color:var(--mu);cursor:pointer;transition:.16s;margin-left:auto;user-select:none}
.mode-pill.cc{background:var(--nv);color:#fff;border-color:var(--nv)}
.mdot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.mode-pill.cc .mdot{background:#facc15}
/* view toggle */
.view-toggle{display:flex;background:#f1f5f9;border:1px solid var(--bo);padding:3px;border-radius:999px;gap:3px}
.view-toggle button{border:none;background:transparent;color:#475569;font-weight:800;font-size:11px;padding:6px 12px;border-radius:999px;transition:.15s}
.view-toggle button.on{background:var(--nv);color:#fff}

/* ══ MODE BANNER ═════════════════════════════════════════ */
.mbanner{max-width:1480px;margin:10px auto 0;padding:0 18px;display:none}
.mbanner.show{display:block}
.mb-in{border-radius:12px;padding:11px 16px;display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;flex-wrap:wrap}
.mb-in.tienda{background:var(--ok-s);border:1px solid #a7f3d0;color:#065f46}
.mb-in.cc{background:var(--wn-s);border:1px solid #fcd34d;color:#92400e}
.mb-tip{margin-left:auto;font-size:11px;font-weight:900;padding:4px 12px;border-radius:999px}
.mb-in.tienda .mb-tip{background:#059669;color:#fff}
.mb-in.cc .mb-tip{background:#d97706;color:#fff}

/* ══ VISTA CLIENTE ═══════════════════════════════════════ */
#clienteView{display:none}
#clienteView.show{display:block}
.cliente-wrap{max-width:600px;margin:24px auto;padding:0 18px 40px}
.cliente-hero{
  background:linear-gradient(135deg,var(--nv),#1e3a5f);
  border-radius:20px;padding:28px 24px;color:#fff;text-align:center;margin-bottom:16px;
}
.cliente-hero .ch-eco{font-size:12px;font-weight:700;opacity:.7;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.cliente-hero .ch-plan{font-size:28px;font-weight:900;letter-spacing:-.5px;margin-bottom:4px}
.cliente-hero .ch-cost{font-size:14px;opacity:.75;font-weight:600}
.cliente-big{
  background:var(--card);border-radius:16px;padding:24px;text-align:center;
  box-shadow:0 8px 32px rgba(229,0,107,.12);border:2px solid rgba(229,0,107,.15);margin-bottom:14px;
}
.cliente-big .kb{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--mu);font-weight:800;margin-bottom:8px}
.cliente-big .kv{font-size:clamp(40px,8vw,64px);font-weight:900;color:var(--br);letter-spacing:-2px;line-height:1}
.cliente-big .ks{font-size:13px;color:var(--mu);margin-top:6px;font-weight:600}
.cliente-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.c3card{background:var(--card);border-radius:14px;padding:16px 12px;text-align:center;border:1px solid var(--bo);box-shadow:var(--sh)}
.c3card .ck{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--mu);font-weight:800}
.c3card .cv{font-size:clamp(18px,3vw,26px);font-weight:900;color:var(--tx);margin-top:6px;letter-spacing:-.3px}
.c3card .cs{font-size:10px;color:var(--mu);margin-top:3px;font-weight:600}
.cliente-losses{background:var(--bd-s);border:1px solid #fecaca;border-radius:14px;padding:16px 18px;margin-bottom:14px}
.cliente-losses h3{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#991b1b;font-weight:900}
.cliente-losses ul{margin:0;padding-left:16px;display:grid;gap:5px}
.cliente-losses li{font-size:12px;color:#7f1d1d;font-weight:600;line-height:1.4}
.cliente-top3{background:var(--card);border-radius:14px;padding:16px;border:1px solid var(--bo);margin-bottom:14px}
.cliente-top3 h3{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--mu);font-weight:900}
.top3-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bo)}
.top3-item:last-child{border-bottom:none}
.top3-ico{font-size:22px;flex:0 0 auto}
.top3-name{font-size:12px;font-weight:700;flex:1}
.top3-val{font-size:13px;font-weight:900;color:var(--ok)}
.cliente-share{display:flex;gap:8px;flex-wrap:wrap}
.c-btn{flex:1;border:none;border-radius:12px;padding:14px;font-size:13px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;transition:.15s}
.c-btn:hover{filter:brightness(.95);transform:translateY(-1px)}
.c-btn.wa{background:#25D366;color:#fff}
.c-btn.cp{background:var(--br);color:#fff}
.c-btn.pdf{background:var(--nv);color:#fff}

/* ══ COCKPIT ═════════════════════════════════════════════ */
.cockpit{max-width:1480px;margin:10px auto 0;padding:0 18px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media(max-width:1080px){.cockpit{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.cockpit{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--card);border:1px solid var(--bo);border-radius:var(--r);padding:11px 12px;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.03)}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--br)}
.kpi .k{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:var(--mu);font-weight:800}
.kpi .v{margin-top:5px;font-size:clamp(16px,1.8vw,22px);font-weight:900;letter-spacing:-.5px;color:var(--br)}
.kpi .s{margin-top:4px;font-size:10px;color:var(--mu);font-weight:600;line-height:1.3}
.kpi.hi{border-color:rgba(229,0,107,.18);background:linear-gradient(180deg,#fff,#fff5fa)}
.vbar-wrap{margin-top:8px}
.vbar-lbl{display:flex;justify-content:space-between;font-size:10px;color:var(--mu);font-weight:700;margin-bottom:4px}
.vbar-track{height:6px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.vbar-fill{height:100%;background:linear-gradient(90deg,var(--br),var(--br-2));border-radius:999px;transition:width .6s cubic-bezier(.34,1.56,.64,1)}

/* ══ LAYOUT ══════════════════════════════════════════════ */
.layout{max-width:900px;margin:10px auto 0;padding:0 18px 40px;display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
@media(max-width:1080px){.layout{grid-template-columns:1fr}}
.col-main{display:flex;flex-direction:column;gap:16px}
.col-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:76px}
@media(max-width:1080px){.col-side{position:static}}

/* ══ PANEL ═══════════════════════════════════════════════ */
.panel{background:var(--card);border:1px solid rgba(15,23,42,.07);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.ph{padding:10px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pt{margin:0;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.7px;color:var(--nv)}
.ps{font-size:11px;color:var(--mu);font-weight:600;margin-top:2px;line-height:1.3}
.pb{padding:12px 14px}

/* ══ BUTTONS ═════════════════════════════════════════════ */
.btn{border:none;border-radius:9px;padding:9px 13px;font-weight:800;font-size:11px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.14s;cursor:pointer}
.btn-p{background:var(--br);color:#fff;box-shadow:0 5px 14px rgba(229,0,107,.18)}
.btn-d{background:var(--nv);color:#fff}
.btn-g{background:#fff;border:1px solid var(--bo);color:#334155}
.btn-o{background:transparent;border:1.5px solid var(--bo);color:#334155}
.btn-ok{background:var(--ok);color:#fff}
.btn-p:hover,.btn-d:hover,.btn-ok:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn-g:hover,.btn-o:hover{background:#f8fafc}
.btn-row{display:flex;flex-wrap:wrap;gap:7px}

/* DEMO BUTTON */
.demo-btn{
  display:flex;align-items:center;gap:7px;padding:8px 14px;
  background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;
  border:none;border-radius:999px;font-size:11px;font-weight:800;cursor:pointer;
  box-shadow:0 4px 14px rgba(102,126,234,.3);transition:.15s;
}
.demo-btn:hover{transform:translateY(-1px);filter:brightness(.95)}

/* ══ CHIPS ═══════════════════════════════════════════════ */
.chip{display:inline-flex;align-items:center;gap:4px;background:#f8fafc;border:1px solid var(--bo);color:#334155;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700}
.chip.ok{background:var(--ok-s);border-color:#a7f3d0;color:#047857}
.chip.brand{background:var(--br-s);border-color:rgba(229,0,107,.18);color:var(--br-d,#9e0049)}
.chip.warn{background:var(--wn-s);border-color:#fed7aa;color:#92400e}
.chip.bad{background:var(--bd-s);border-color:#fecaca;color:#b91c1c}
.chip-row{display:flex;flex-wrap:wrap;gap:6px}

/* ══ ECO + PLAN ══════════════════════════════════════════ */
.eco-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:0}
.eco-btn{border:1.5px solid var(--bo);border-radius:12px;padding:11px 8px;text-align:center;cursor:pointer;background:#fff;transition:.16s}
.eco-btn:hover{border-color:#c0cfe0;transform:translateY(-1px)}
.eco-btn.on{border-color:var(--br);background:var(--br-s);box-shadow:0 4px 14px rgba(229,0,107,.1)}
.eco-btn .en{font-size:13px;font-weight:900}
.eco-btn .ep{font-size:11px;color:var(--br);font-weight:800;margin-top:4px}
.eco-btn .es{font-size:10px;color:var(--mu);font-weight:600;margin-top:1px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.plan-btn{border:1.5px solid var(--bo);border-radius:11px;padding:10px 12px;background:#fff;text-align:left;cursor:pointer;transition:.16s;width:100%}
.plan-btn:hover{border-color:#c0cfe0;transform:translateY(-1px)}
.plan-btn.on{border-color:rgba(229,0,107,.35);background:linear-gradient(180deg,#fff,#fff8fc);box-shadow:0 8px 20px rgba(229,0,107,.1)}
.plan-btn .pn{font-size:14px;font-weight:900}
.plan-btn .pc{font-size:18px;font-weight:900;color:var(--br);margin-top:4px;letter-spacing:-.4px}
.plan-btn .pd{font-size:11px;color:var(--mu);font-weight:700;margin-top:2px}
.plan-btn .pt2{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px}
.ptag{font-size:10px;font-weight:800;border-radius:999px;padding:4px 7px;border:1px solid var(--bo);background:#f8fafc;color:#334155}
.ptag.si{background:var(--ok-s);color:#047857;border-color:#a7f3d0}
.ptag.no{background:var(--bd-s);color:#b91c1c;border-color:#fecaca}
.ptag.cc{background:var(--wn-s);color:#92400e;border-color:#fed7aa}
.plan-btn.no-comercial{background:repeating-linear-gradient(135deg,#fff,#fff 8px,#fef2f2 8px,#fef2f2 16px);border-color:#fecaca}
.plan-btn.no-comercial:hover{border-color:#f87171}
.plan-btn.no-comercial.on{border-color:#dc2626;box-shadow:0 8px 20px rgba(220,38,38,.12)}
.plan-nc-banner{margin-top:6px;background:#fef2f2;border:1px solid #fecaca;border-radius:7px;padding:4px 7px;font-size:9.5px;font-weight:800;color:#b91c1c;text-align:center;letter-spacing:.1px}

/* ══ ASISTENCIAS ═════════════════════════════════════════ */
.assist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
@media(max-width:700px){.assist-grid{grid-template-columns:repeat(2,1fr)}}
.assist-btn{border:1.5px solid var(--bo);border-radius:10px;padding:9px 10px;background:#fff;cursor:pointer;transition:.15s;text-align:left;display:flex;align-items:center;gap:8px}
.assist-btn:hover{border-color:#c0cfe0}
.assist-btn.on{border-color:var(--ok);background:var(--ok-s);box-shadow:0 4px 12px rgba(5,150,105,.1)}
.assist-btn.na{opacity:.3;cursor:not-allowed;background:#f8fafc;pointer-events:none}
.assist-btn .ai{font-size:20px;flex:0 0 auto}
.assist-btn .at{font-size:12px;font-weight:700;color:var(--tx)}
.assist-btn .av{font-size:11px;color:var(--ok);font-weight:800;margin-top:1px}
.assist-btn.na .av{color:var(--mu)}
.acheck{width:18px;height:18px;border-radius:4px;border:2px solid var(--bo);margin-left:auto;flex:0 0 auto;display:grid;place-items:center;font-size:11px;color:#fff;transition:.15s;background:#fff}
.assist-btn.on .acheck{background:var(--ok);border-color:var(--ok)}

/* ══ EXPERIENCIAS ════════════════════════════════════════ */
.exp-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
@media(max-width:640px){.exp-summary{grid-template-columns:repeat(2,1fr)}}
.sm{background:#f8fafc;border:1px solid var(--bo);border-radius:12px;padding:11px 10px;text-align:center}
.sm .k{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--mu);font-weight:800}
.sm .v{margin-top:4px;font-size:clamp(14px,1.6vw,18px);font-weight:900;letter-spacing:-.3px}
.exp-list{display:flex;flex-direction:column;gap:10px}
.exp-card{background:#fff;border:1px solid var(--bo);border-radius:12px;overflow:hidden}
.exp-hd{padding:10px 14px;background:#fff7fb;border-bottom:1px solid #f2d7e4;display:flex;align-items:center;justify-content:space-between;gap:8px}
.exp-num{background:var(--br);color:#fff;font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px}
.exp-del{border:none;background:#f1f5f9;color:#475569;width:28px;height:28px;border-radius:50%;font-size:16px;font-weight:900;display:grid;place-items:center}
.exp-del:hover{background:#fee2e2;color:#b91c1c}
.exp-bd{padding:12px 14px}
.exp-selrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.exp-selrow{grid-template-columns:1fr}}
/* buscador experiencias */
.exp-search{width:100%;padding:8px 11px;border:1.5px solid var(--bo);border-radius:9px;font-family:inherit;font-size:12px;font-weight:600;color:var(--tx);background:#fff;margin-bottom:6px;transition:.15s}
.exp-search:focus{outline:none;border-color:var(--br);box-shadow:0 0 0 3px rgba(229,0,107,.08)}
.field label{display:block;margin:0 0 5px;font-size:10px;font-weight:900;color:#475569;letter-spacing:.5px;text-transform:uppercase}
.field select{width:100%;padding:9px 11px;border:1px solid var(--bo);border-radius:9px;background:#fff;color:var(--tx);font-weight:700;font-family:inherit}
.exp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* ══ COBERTURAS ══════════════════════════════════════════ */
.cov-group{border:1px solid var(--bo);border-radius:12px;background:#fff;overflow:hidden;margin-bottom:8px}
.cov-group summary{list-style:none;cursor:pointer;padding:11px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:12px}
.cov-group summary::-webkit-details-marker{display:none}
.cov-count{font-size:10px;font-weight:900;color:#475569;background:#fff;border:1px solid var(--bo);padding:3px 7px;border-radius:999px}
.cov-body{padding:10px;display:grid;gap:7px}
.cov-item{border:1px solid var(--bo);border-radius:10px;padding:10px;background:#fff;position:relative}
.cov-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.cov-name{font-size:12px;font-weight:900;line-height:1.3}
.cov-sub{margin-top:2px;font-size:10px;color:var(--mu);line-height:1.4}
.cov-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.ctag{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;padding:3px 5px;border-radius:999px;border:1px solid var(--bo);background:#f8fafc;color:#334155}
.ctag.ok{background:var(--ok-s);border-color:#a7f3d0;color:#047857}
.ctag.warn{background:var(--wn-s);border-color:#fed7aa;color:#92400e}
/* tooltip */
.tooltip{position:relative}
.tooltip-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#e2e8f0;color:#475569;font-size:9px;font-weight:900;cursor:help;margin-left:4px;flex-shrink:0}
.tooltip-box{
  display:none;position:absolute;bottom:calc(100% + 6px);left:0;
  background:var(--nv);color:#fff;font-size:11px;font-weight:600;line-height:1.5;
  padding:8px 12px;border-radius:10px;white-space:normal;min-width:200px;max-width:260px;z-index:50;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.tooltip:hover .tooltip-box{display:block}

/* ══ SIGNAL ══════════════════════════════════════════════ */
.signal{border-radius:12px;padding:12px 14px;border:1px solid var(--bo);font-weight:700;line-height:1.45}
.signal.low{background:var(--bd-s);border-color:#fecaca;color:#991b1b}
.signal.med{background:var(--wn-s);border-color:#fed7aa;color:#92400e}
.signal.high{background:var(--ok-s);border-color:#a7f3d0;color:#065f46}
.signal .ttl{display:block;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px}
.signal .desc{font-size:12px}
.fin-sum{margin-top:10px;padding:10px 12px;background:#f8fafc;border-radius:10px;border:1px solid var(--bo)}
.fin-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.fin-row:last-child{margin-top:6px;padding-top:6px;border-top:1px solid var(--bo);font-size:13px}

/* ══ RETENCIÓN ═══════════════════════════════════════════ */
.ret-box{border-radius:12px;padding:14px;border:1px solid #fecaca;background:linear-gradient(180deg,#fff7f7,#fff)}
.ret-box h3{margin:0 0 8px;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#991b1b;font-weight:900}
.ret-box ul{margin:0;padding-left:16px;display:grid;gap:5px}
.ret-box li{font-size:12px;line-height:1.4;color:#7f1d1d;font-weight:600}

/* ══ UPGRADE ═════════════════════════════════════════════ */
.cmp-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:10px}
.cmp-box{border:1.5px solid var(--bo);border-radius:12px;padding:13px;text-align:center}
.cmp-box.now{background:#f8fafc}
.cmp-box.up{border-color:rgba(229,0,107,.3);background:var(--br-s)}
.cmp-box .k{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--mu);font-weight:800;margin-bottom:5px}
.cmp-box .nm{font-size:15px;font-weight:900}
.cmp-box .pr{font-size:20px;font-weight:900;color:var(--br);margin-top:4px}
.cmp-box .inf{font-size:10px;color:var(--mu);font-weight:600;margin-top:3px;line-height:1.3}
.cmp-arr{text-align:center;font-size:24px;color:var(--br)}
.diff-strip{background:linear-gradient(135deg,var(--br),var(--br-2));border-radius:11px;padding:12px 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;color:#fff;text-align:center;margin-bottom:10px}
.diff-num{font-size:20px;font-weight:900;letter-spacing:-.4px;line-height:1}
.diff-lbl{font-size:10px;opacity:.8;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:3px}
/* upgrade life comparison table */
.upg-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}
.upg-table th{padding:7px 10px;background:var(--nv);color:#fff;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;text-align:left}
.upg-table th:last-child{text-align:right}
.upg-table td{padding:8px 10px;border-bottom:1px solid var(--bo)}
.upg-table td:last-child{text-align:right;font-weight:800;color:var(--ok)}
.upg-table tr:last-child td{border-bottom:none}
/* Life calculator */
.life-calc{background:linear-gradient(135deg,#1e3a5f,#0f172a);border-radius:12px;padding:14px 16px;margin-top:10px;color:#fff}
.life-calc h4{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#94a3b8;font-weight:800}
.life-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.life-input-wrap label{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:#94a3b8;font-weight:800;margin-bottom:4px}
.life-input{width:100%;padding:8px 10px;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:13px;font-weight:700}
.life-input:focus{outline:none;border-color:var(--br);background:rgba(255,255,255,.12)}
.life-input::placeholder{color:rgba(255,255,255,.3)}
.life-result{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.life-res-item .k{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:#94a3b8;font-weight:800}
.life-res-item .v{font-size:16px;font-weight:900;margin-top:3px;color:#fff}
.life-res-item .v.accent{color:var(--br)}
.life-res-item .s{font-size:10px;color:#94a3b8;margin-top:2px}
.upg-table tr:nth-child(even) td{background:#f8fafc}

/* ══ SPEECH ══════════════════════════════════════════════ */
.stabs{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
.stab{padding:6px 11px;border:1.5px solid var(--bo);border-radius:7px;font-size:11px;font-weight:800;cursor:pointer;background:transparent;color:var(--mu);transition:.15s}
.stab.on{border-color:var(--br);color:var(--br);background:var(--br-s)}
.sc{display:none}
.sc.on{display:block}
.sbubble{background:var(--br-s);border-left:3px solid var(--br);border-radius:0 9px 9px 0;padding:10px 13px;margin-bottom:8px;font-size:12px;line-height:1.6}
.sbubble-lbl{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--br);margin-bottom:4px}
.obj{background:#fef9ec;border:1px solid #fcd34d;border-radius:9px;padding:10px 13px;margin-bottom:7px}
.obj-q{font-size:12px;font-weight:900;color:#92400e;margin-bottom:4px}
.obj-r{font-size:12px;color:#78350f;line-height:1.5}
.sbox{border:1px solid #bfdbfe;background:linear-gradient(180deg,#eff6ff,#fff);border-radius:14px;padding:13px;margin-top:8px}
.sbox h3{margin:0 0 9px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#1d4ed8;font-weight:900}
.stext{width:100%;min-height:120px;border:1px solid #cbd5e1;border-radius:10px;padding:10px;font-family:inherit;font-size:12px;line-height:1.55;color:var(--nv);background:#f8fafc;user-select:text;white-space:pre-wrap;word-break:break-word;cursor:default}

/* ══ TOAST ═══════════════════════════════════════════════ */
.toast{position:fixed;bottom:20px;right:20px;background:var(--nv);color:#fff;padding:10px 18px;border-radius:9px;font-size:12px;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.2);transform:translateY(60px);opacity:0;transition:.25s;z-index:300}
.toast.show{transform:translateY(0);opacity:1}

/* ══ HISTORIAL ═══════════════════════════════════════════ */
.hist-list{display:flex;flex-direction:column;gap:7px}
.hist-item{background:#f8fafc;border:1px solid var(--bo);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:.14s}
.hist-item:hover{background:var(--br-s);border-color:rgba(229,0,107,.2)}
.hist-dot{width:10px;height:10px;border-radius:50%;background:var(--br);flex:0 0 auto}
.hist-info{flex:1;min-width:0}
.hist-name{font-size:12px;font-weight:800;color:var(--tx)}
.hist-meta{font-size:10px;color:var(--mu);margin-top:1px}
.hist-val{font-size:12px;font-weight:900;color:var(--ok)}

/* ══ FOOTER ══════════════════════════════════════════════ */
.legal{max-width:1480px;margin:0 auto 10px;padding:10px 18px;background:#fff8e1;border:1px solid #f5c542;border-radius:11px;font-size:11px;color:#6b4f00;line-height:1.5}
.footer{max-width:1480px;margin:0 auto;padding:4px 18px 28px;color:var(--mu);font-size:10px;line-height:1.5}

/* ══ ANIM ════════════════════════════════════════════════ */
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.panel,.kpi{animation:fade .3s ease both}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.pop{animation:pop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(229,0,107,0)}50%{box-shadow:0 0 0 8px rgba(229,0,107,.15)}}
.glow{animation:glow .5s ease}

/* ══ BENCHMARK V20 — SPOTLIGHT LIVERPOOL ════════════════ */

/* Experiencias hero band — encima de la tabla */
.bench-exp-band{
  background:linear-gradient(135deg,var(--nv) 0%,#1e3a5f 100%);
  border-radius:14px;padding:14px 18px;margin-bottom:14px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.bench-exp-band .beb-label{
  flex:0 0 auto;
  background:var(--br);color:#fff;
  font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.7px;
  padding:4px 10px;border-radius:999px;
}
.bench-exp-band .beb-title{
  font-size:14px;font-weight:900;color:#fff;flex:1;min-width:160px;
}
.bench-exp-band .beb-title span{color:var(--br);font-size:17px}
.bench-exp-band .beb-logos{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bench-exp-logo{height:28px;width:auto;object-fit:contain;background:#fff;border-radius:6px;padding:3px 6px;filter:none}
.bench-exp-band .beb-excl{
  margin-left:auto;font-size:10px;font-weight:900;color:#fbbf24;
  border:1.5px solid #fbbf24;border-radius:999px;padding:4px 10px;white-space:nowrap;
}

/* Tabla */
.bench-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px;table-layout:fixed}
.bench-table th{padding:8px 10px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;text-align:left;position:sticky;top:0;z-index:2}
.bench-table th:first-child{background:var(--nv);color:#fff;width:34%}
/* Liverpool: columna protagonista */
.bench-table th.col-liv{
  background:linear-gradient(180deg,var(--br),var(--br-2));color:#fff;
  width:26%;font-size:11px;
  box-shadow:inset 0 -3px 0 rgba(255,255,255,.25);
}
/* Competencia: visible pero subordinada */
.bench-table th.col-other{background:#64748b;color:#fff;width:16%;font-size:9px;opacity:1;min-width:90px}
.bench-table td{padding:7px 10px;border-bottom:1px solid var(--bo);vertical-align:middle}
.bench-table td:first-child{font-size:11px;font-weight:800;color:#334155}
/* Liverpool: fondo cálido */
.bench-table td.col-liv{
  background:linear-gradient(180deg,rgba(229,0,107,.07),rgba(229,0,107,.03));
  border-left:3px solid rgba(229,0,107,.25);
}
/* Competencia: legible pero sin protagonismo */
.bench-table td.col-other{opacity:.9;filter:saturate(.7)}
.bench-table tr:last-child td{border-bottom:none}
.bench-table tr:nth-child(even) td{background:#f8fafc}
.bench-table tr:nth-child(even) td.col-liv{background:linear-gradient(180deg,rgba(229,0,107,.08),rgba(229,0,107,.04))}
.bench-table tr:nth-child(even) td.col-other{background:#f1f5f9;opacity:.9}

/* Íconos Liverpool: escudo dorado */
.bench-check-liv{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#fff;font-size:12px;flex-shrink:0;
}
/* Íconos competencia: legibles, sin saturar */
.bench-check-comp-ok{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:#cbd5e1;color:#475569;font-size:10px;flex-shrink:0;
}
.bench-check-comp-no{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:#f1f5f9;color:#94a3b8;font-size:10px;flex-shrink:0;
}
.bench-check-comp-na{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:#f8fafc;color:#cbd5e1;font-size:10px;flex-shrink:0;
}
/* Íconos legacy (por compatibilidad) */
.bench-check{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px}
.bench-check.ok{background:var(--ok-s);color:var(--ok)}
.bench-check.no{background:var(--bd-s);color:#b91c1c}
.bench-check.na{background:#f1f5f9;color:#94a3b8}

/* Badge "★ Exclusivo PIF" en el encabezado de fila */
.bench-excl-badge{
  display:inline-block;font-size:8px;font-weight:900;
  background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;
  border-radius:999px;padding:2px 6px;margin-left:5px;vertical-align:middle;
  letter-spacing:.3px;white-space:nowrap;
}

/* Hero strip Liverpool */
.bench-hero{background:linear-gradient(135deg,var(--br),var(--br-2));border-radius:12px;padding:12px 16px;margin-bottom:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;color:#fff;text-align:center}
.bench-hero-item .bh-k{font-size:9px;text-transform:uppercase;letter-spacing:.6px;opacity:.8;font-weight:700}
.bench-hero-item .bh-v{font-size:16px;font-weight:900;margin-top:4px}

@media(max-width:640px){\n  .ti,.cockpit,.layout,.mbanner,.legal,.footer{padding-left:12px;padding-right:12px}\n  .diff-strip{grid-template-columns:1fr;gap:6px}\n  .cliente-3{grid-template-columns:1fr 1fr}\n  .bench-table{font-size:10px}\n  .bench-table th,.bench-table td{padding:5px 7px}\n}

/* ══════════════════════════════════════════════════════════
   MOBILE-FIRST — Todas las mejoras (retro colega Jun 2026)
   ══════════════════════════════════════════════════════════ */

/* ── 1. TOPBAR COMPACTA EN MÓVIL ── */
@media(max-width:640px){
  .topbar{ position:sticky;top:0;z-index:90 }
  .ti{
    padding:6px 12px;min-height:52px;gap:8px;flex-wrap:nowrap;overflow-x:auto;
  }
  /* Logo más pequeño */
  .ti > div:first-child > div:first-child{
    width:40px!important;height:40px!important;border-radius:10px!important;
  }
  .ti > div:first-child > div:first-child svg{width:24px!important;height:24px!important}
  .app-name{font-size:14px!important}
  .app-name small{display:none!important}
  /* Ocultar tira de proveedores en móvil — ocupa demasiado */
  .ti > div[style*="Respaldado"]{display:none!important}
  /* Toggle vista más compacto */
  .view-toggle button{font-size:10px!important;padding:5px 8px!important}
  /* Dark toggle sin texto */
  .dark-toggle span:not(.dark-track){ font-size:14px }
  /* Marcas en topbar — ocultar texto, solo botones pequeños */
  .brands button{font-size:10px;padding:5px 10px}
}

/* ── 2. CALCULADOR STICKY COLAPSADO EN MÓVIL ── */
@media(max-width:640px){
  #calcStrip > div{
    padding:5px 12px!important;
    flex-wrap:nowrap!important;
    overflow-x:auto;
    gap:0!important;
  }
  /* En móvil: solo ahorro + ROI + precio diario. El resto se oculta */
  #calcStrip > div > div:nth-child(3),
  #calcStrip > div > div:nth-child(4){display:none!important}
  #calcStrip > div > div:last-child{display:none!important}
  #calcAhorro{font-size:16px!important}
  #calcMeses{font-size:16px!important}
  /* Separadores más compactos */
  #calcStrip > div > div{
    padding-right:10px!important;
    margin-right:10px!important;
    border-right-width:1px!important;
  }
}

/* ── 3. BOTONES — ÁREA TÁCTIL MÍNIMA 44px ── */
@media(max-width:640px){
  .btn{min-height:44px!important;padding:10px 14px!important;font-size:12px!important}
  .btn-p,.btn-d,.btn-g,.btn-o,.btn-ok{min-height:44px!important}
  .c-btn{min-height:48px!important;font-size:13px!important}
  .eco-btn{padding:12px 10px!important;min-height:56px!important}
  .plan-btn{padding:12px!important;min-height:60px!important}
  .plan-btn .pc{font-size:16px!important}
  .assist-btn{min-height:48px!important;padding:10px 12px!important}
  .assist-btn .at{font-size:13px!important}
  .chip{padding:8px 12px!important;font-size:12px!important}
  /* Momento del cliente */
  .momento-btn{min-height:80px!important;padding:12px 8px!important}
  .momento-btn .mb-ico{font-size:24px!important;margin-bottom:4px!important}
  .momento-btn .mb-name{font-size:11px!important}
  .momento-btn .mb-desc{font-size:9px!important}
  /* Objeciones tabs */
  .obj-tab{padding:10px 12px!important;min-height:44px!important;font-size:11px!important}
  /* Quiz opciones */
  .quiz-opt{padding:13px 14px!important;min-height:48px!important;font-size:13px!important}
  /* Train tabs */
  .train-tab{min-height:80px!important;padding:12px 8px!important}
  /* Welcome CTA */
  .welcome-cta{min-height:52px!important;font-size:15px!important}
}

/* ── 4. INPUTS — font-size 16px evita zoom en iOS ── */
@media(max-width:640px){
  input,select,textarea{font-size:16px!important}
  .sim-input{min-height:110px!important;font-size:16px!important;padding:14px!important}
  #assistSearch{height:44px!important;font-size:16px!important}
  #budgetSlider{width:100px!important}
}

/* ── 5. BENCHMARK → SCROLL HORIZONTAL CON LIVERPOOL FIJA EN MÓVIL ── */
@media(max-width:640px){
  /* Contenedor con scroll horizontal */
  .bench-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;border:1px solid var(--bo)}
  .bench-table{display:table;min-width:520px;border-radius:0;font-size:11px}
  .bench-table thead{display:table-header-group}
  .bench-table tbody{display:table-row-group}
  .bench-table tr{display:table-row;border:none;border-radius:0;margin:0;padding:0;background:transparent;box-shadow:none}
  .bench-table td,.bench-table th{display:table-cell;padding:8px 10px!important;border-bottom:1px solid var(--bo)!important}
  /* Liverpool — columna sticky izquierda */
  .bench-table th.col-liv,
  .bench-table td.col-liv{
    position:sticky!important;left:0!important;z-index:3!important;
    min-width:130px!important;max-width:130px!important;
    box-shadow:2px 0 8px rgba(229,0,107,.15)!important;
  }
  .bench-table th.col-liv{background:linear-gradient(180deg,var(--br),var(--br-2))!important;z-index:4!important}
  .bench-table td.col-liv{background:linear-gradient(180deg,rgba(229,0,107,.08),rgba(229,0,107,.04))!important}
  body.dark .bench-table td.col-liv{background:linear-gradient(180deg,rgba(229,0,107,.15),rgba(229,0,107,.08))!important}
  /* Primera columna (feature) sticky también */
  .bench-table td:first-child,.bench-table th:first-child{
    position:sticky!important;left:0!important;z-index:2!important;
    min-width:110px!important;max-width:110px!important;
    background:var(--card)!important;
    box-shadow:2px 0 6px rgba(15,23,42,.08)!important;
    font-size:10px!important;
  }
  body.dark .bench-table td:first-child{background:var(--card)!important}
  /* Competencia — columnas más compactas */
  .bench-table th.col-other,.bench-table td.col-other{
    min-width:80px!important;max-width:80px!important;
    font-size:9px!important;
  }
  /* Hint de scroll */
  .bench-scroll-hint{
    display:flex;align-items:center;gap:6px;
    font-size:10px;color:var(--mu);font-weight:700;
    padding:6px 12px;margin-bottom:6px;
  }
  .bench-scroll-hint::after{content:"→";animation:hint-slide 1.2s ease-in-out infinite}
  @keyframes hint-slide{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
}

/* ── 6. GRIDS — ASISTENCIAS Y EXPERIENCIAS ── */
@media(max-width:640px){
  .assist-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .exp-summary{grid-template-columns:1fr 1fr!important}
  .exp-selrow{grid-template-columns:1fr!important}
  .plan-grid{grid-template-columns:1fr 1fr!important}
  .eco-grid{grid-template-columns:1fr 1fr!important}
  .momento-grid{grid-template-columns:1fr 1fr!important}
  .cockpit{grid-template-columns:1fr 1fr!important}
  .cliente-3{grid-template-columns:1fr 1fr 1fr!important}
  /* Bench hero compacto */
  .bench-hero{grid-template-columns:1fr 1fr!important;gap:6px!important}
  /* Train hero compacto */
  .train-hero{flex-direction:column!important;text-align:center!important}
  .train-score-strip{margin-left:0!important;width:100%;justify-content:center}
  .train-tabs{flex-direction:column!important}
  .train-tab{min-height:64px!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important;text-align:left!important}
  .train-tab-icon{font-size:20px!important;margin-bottom:0!important}
}

/* ── 7. LAYOUT PRINCIPAL ── */
@media(max-width:640px){
  .layout{grid-template-columns:1fr!important;padding:0 12px 80px!important}
  .col-side{position:static!important}
  .momento-wrap{padding:10px 12px 0!important}
  /* Plan selector */
  #agenteView .agent-adv-block{padding:0 12px!important;margin-top:10px!important}
  /* Venta rápida */
  #ventaRapidaBar{padding:0 12px!important;margin-top:8px!important}
  #vrKpis{grid-template-columns:1fr 1fr!important;gap:6px!important}
  /* Botón flotante — más pequeño en móvil */
  #floatClose{bottom:16px!important;right:12px!important;gap:6px!important}
  #floatClose button:first-child{padding:10px 14px!important;font-size:12px!important}
  #floatClose button:last-child{padding:7px 12px!important;font-size:10px!important}
  /* Barra de contexto momento */
  .momento-context{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
  .mc-action{width:100%!important;text-align:center!important}
  /* Loss panel */
  #lossBigNumbers > div{padding:10px 8px!important}
  #lossLifeVal,#lossRecovVal,#lossCovCount{font-size:16px!important}
}

/* ── 8. TIPOGRAFÍA Y ESPACIADO MÓVIL ── */
@media(max-width:640px){
  .panel{border-radius:12px}
  .ph{padding:8px 12px}
  .pb{padding:10px 12px}
  .pt{font-size:10px!important}
  .ps{font-size:10px!important}
  /* Cliente view */
  .cliente-wrap{padding:12px 12px 100px!important}
  .cliente-hero{padding:20px 16px!important;border-radius:16px!important}
  .cliente-hero .ch-plan{font-size:22px!important}
  .cliente-big .kv{font-size:40px!important}
  /* Welcome */
  .welcome-card{border-radius:16px}
  .welcome-hero{padding:20px 18px 16px!important}
  .welcome-steps{padding:16px 18px 0!important}
  .welcome-footer{padding:14px 18px 18px!important}
  .ws-title{font-size:12px!important}
  /* Quiz */
  .quiz-q{font-size:13px!important;padding:12px!important}
  /* Guía */
  .guide-step-title{font-size:12px!important}
  .guide-step-desc{font-size:11px!important}
  .guide-step-script{font-size:11px!important}
  /* Objeciones */
  .obj-q{font-size:12px!important}
  .obj-txt{font-size:11px!important}
  /* Sim feedback */
  #simFeedbackText{font-size:12px!important;line-height:1.5!important}
}

/* ── 9. ACCESIBILIDAD — FOCUS VISIBLE ── */
@media(max-width:640px){
  button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:3px solid var(--br);outline-offset:2px;
  }
  /* Contraste mejorado en modo oscuro */
  body.dark .bench-table td{border-color:#475569}
  body.dark .obj-q{background:rgba(229,0,107,.15)!important}
}

/* ── 10. SCROLL HORIZONTAL — EVITAR OVERFLOW ── */
@media(max-width:640px){
  body{overflow-x:hidden}
  .ti{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .obj-tabs{-webkit-overflow-scrolling:touch}
  /* Prevent tables from overflowing */
  .bench-table{max-width:100%;word-break:break-word}
  /* Venta rápida pitch no se desborda */
  #vrPitch{font-size:12px!important;line-height:1.5!important}
  #vrExcl{gap:4px!important}
  #vrExcl span{font-size:9px!important;padding:3px 7px!important}
}

/* ── TABLET (641–1080px) ── */
@media(min-width:641px) and (max-width:1080px){
  .layout{grid-template-columns:1fr!important}
  .col-side{position:static!important}
  .plan-grid{grid-template-columns:repeat(3,1fr)}
  .assist-grid{grid-template-columns:repeat(3,1fr)}
  #vrKpis{grid-template-columns:repeat(4,1fr)}
  .train-tabs{flex-direction:row}
}
/* V27: candado de perfilamiento — al final de la hoja para ganar por orden Y especificidad
   sobre los !important de modo-rapido/experto, sin ambigüedad en ningún motor */
html body.perfil-pending #modoRapido,
html body.perfil-pending .agent-adv-block,
html body.perfil-pending #agenteView .layout,
html body.perfil-pending #ventaRapidaBar,
html body.perfil-pending #calcStrip,
html body.perfil-pending #floatClose{display:none!important}