/* ══ TOKENS ══════════════════════════════════════════════ */
:root{
  --br:#5A2575;--br-d:#3B0D55;--br-s:#f3eefa;--br-2:#7B2082;
  --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:#5A2575;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(90,37,117,.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}

/* ══ HERRAMIENTAS — pantalla única, sin toggle de modo ══════ */
body[data-view="agent"] #agenteView{display:block}
#agenteView{display:none}
/* El buscador de objeciones es fixed sobre toda la pantalla — sin este
   padding, al hacer scroll hasta el final los últimos botones (Copiar/
   Imprimir, etc.) quedan tapados detrás de él. */
body[data-view="agent"] #agenteView{padding-bottom:76px}

/* Barra de atajos superior */
.tools-shortcut-bar{
  max-width:1480px;margin:14px auto 0;padding:0 18px;
  display:flex;gap:10px;flex-wrap:wrap;
}

/* Card de pitch — oculta en V27: el speech ahora vive solo en 🗣️ Guiones */

/* KPIs rápidos en fila (usados en el modal de calculadora) */
.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 (usada en el modal de calculadora) */
.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(90,37,117,.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}

.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}
.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-body{display:flex;flex-direction:column;flex:1;min-width:0;gap:1px}
.mr-assist-name{font-size:10px;font-weight:800;color:var(--tx);line-height:1.25}
.mr-assist-val{font-size:9.5px;font-weight:800;color:var(--ok)}
.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(90,37,117,.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}

/* ═══════════════════════════════════════════════════════════════
   V28 — SISTEMA ÚNICO DE VISIBILIDAD (arquitectura unificada)
   Todo se decide por atributos en <body>: data-view, data-modo, data-ready, data-present.
   Un elemento tiene UNA sola regla que lo muestra; todo lo demás permanece oculto
   por su regla base. No se usa !important en ningún lado de este bloque.
   ═══════════════════════════════════════════════════════════════ */

/* Marca/respaldo y selector de plan — siempre visibles en la vista Agente */
.tools-block-flex{max-width:1480px;margin:14px auto 0;padding:0 18px;display:none;align-items:center;gap:10px;flex-wrap:wrap}
body[data-view="agent"] .tools-block-flex{display:flex}

/* Calculadora completa (asistencias, experiencias, comparativos) — solo cuando ya hay plan.
   Estas 4 no tenían regla base que las oculte — por eso se veían siempre dentro de Agente,
   sin importar si ya había plan o no. */
.layout,.cockpit,.legal,.footer{display:none}
#floatClose{display:none}
body[data-view="agent"][data-ready="1"] .layout{display:grid}
body[data-view="agent"][data-ready="1"] .cockpit{display:grid}
body[data-view="agent"][data-ready="1"] .legal,
body[data-view="agent"][data-ready="1"] .footer{display:block}

/* Botón flotante — solo Agente + plan seleccionado */
body[data-view="agent"][data-ready="1"] #floatClose{display:flex}

/* Candado — solo un aviso ligero cuando falta plan, no bloquea el selector */
#agentGate,#clienteGate,#clienteWrapBody{display:none}
body[data-view="agent"][data-ready="0"] #agentGate{display:block}
body[data-view="cliente"][data-ready="0"] #clienteGate{display:block}
body[data-view="cliente"][data-ready="1"] #clienteWrapBody{display:block}

/* ── MODO OSCURO ── */
body.dark .mr-plan-wrap{background:#1e293b;border-color:#334155}

/* ── RESPONSIVE ── */
@media(min-width:641px){
  .mr-plan-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}
}
#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)}
/* Modo presentación — solo agrega: ocultar nav + botón de salida. La vista Cliente
   ya se muestra sola porque data-view="cliente" (togglePresentMode fuerza esa vista). */
#clienteView .cliente-wrap{padding-top:10px;margin:0 auto}
body[data-present="1"] .view-toggle{display:none}
body[data-present="1"] #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[data-present="1"] #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[data-present="1"] #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,#5A2575 0%,#7B2082 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,#5A2575,#7B2082);
  color:#fff;font-size:14px;font-weight:900;
  cursor:pointer;font-family:inherit;
  box-shadow:0 6px 20px rgba(90,37,117,.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}
body[data-view="training"] #trainingView{display:block}

/* ══ COPILOTO DE RETENCIÓN (V27 — flujo PPT) ═══════════════ */
#copilotoView{display:none}
body[data-view="copiloto"] #copilotoView{display:block}
#benchmarkView{display:none}
body[data-view="benchmark"] #benchmarkView{display:block}
#guionesView{display:none}
body[data-view="guiones"] #guionesView{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 110px}
.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:16px;
  padding:18px 18px;margin-bottom:16px;display:flex;align-items:center;gap:14px;
  border:2px solid var(--br);box-shadow:0 6px 20px rgba(90,37,117,.25);
}
.cp-banner .cp-check{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.cp-banner b{display:block;font-size:15px;font-weight:900}
.cp-banner span{font-size:12px;opacity:.9;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,#f3eefa,#fbcfe8);color:#3B0D55}
.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-toggle{
  background:none;border:none;color:var(--br);font-size:11.5px;font-weight:800;
  cursor:pointer;font-family:inherit;padding:6px 0;text-decoration:underline;
}
.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,#5A2575,#3B0D55);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-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}
/* Barra fija de cierre — más compacta, se ve en pantalla todo el tiempo */
#cpCierreBar .cp-cierre-btn{padding:9px 10px}
#cpCierreBar .cp-cierre-btn .em{font-size:16px;margin-bottom:2px}
#cpCierreBar .cp-cierre-btn b{font-size:11px}
#cpCierreBar p{margin-bottom:4px!important}
.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(90,37,117,.14)}
.cp-card-main .cp-speech{font-size:14.5px;line-height:1.75}
body.dark .cp-card-main{border-color:#7B2082}
.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)}

@keyframes cpConfettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  100%{transform:translateY(100vh) rotate(540deg);opacity:0}
}
.cp-video-block{
  margin-top:14px;padding:14px;border-radius:14px;
  background:linear-gradient(135deg,#fff1f2,#fef2f2);border:1.5px solid #fecdd3;
}
.cp-video-btn{
  background:#FF0000;color:#fff;border:none;border-radius:10px;
  padding:11px 20px;font-size:13px;font-weight:900;cursor:pointer;
  font-family:inherit;display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 4px 14px rgba(255,0,0,.3);transition:.15s;
}
.cp-video-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
body.dark .cp-video-block{background:linear-gradient(135deg,#2a1015,#1e293b);border-color:#7f1d1d}
.cp-video-hint{font-size:12px;color:var(--mu);font-weight:600;line-height:1.5;margin:8px 0 10px}
.cp-plan-accordion{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--bo);
  animation:cpFade .25s ease;
}
.cp-plan-acc-hint{font-size:11.5px;font-weight:800;color:var(--br);margin-bottom:10px;text-align:center}
body.dark .cp-plan-acc-hint{color:#ff8fc4}
.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:16px}
.cp-tangible-item{text-align:center;background:#f8fafc;border:1.5px solid var(--bo);border-radius:14px;padding:18px 14px}
.cp-qr{width:168px;height:168px;max-width:100%;border-radius:10px;margin-bottom:12px;background:#fff;padding:8px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.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:520px){.cp-tangible-grid{grid-template-columns:1fr}.cp-qr{width:210px;height:210px}}
.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:#eff6ff;border:1.5px solid #bfdbfe;
  border-radius:999px;padding:8px 14px;font-size:11.5px;font-weight:800;color:#1d4ed8;
  cursor:pointer;font-family:inherit;transition:.15s;
}
.cp-tool-btn:hover{border-color:var(--br);color:var(--br);background:var(--br-s)}
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:#0f2744;border-color:#1e3a5f;color:#93c5fd}
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(90,37,117,.15);
  border-radius:12px;padding:14px 16px;
  display:none;
}
body.dark .obj-card{background:linear-gradient(135deg,#2d1a2e,#1e293b);border-color:rgba(90,37,117,.25)}
.obj-card.on{display:block}
.obj-q{
  font-size:13px;font-weight:900;color:var(--tx);
  padding:10px 14px;background:rgba(90,37,117,.06);
  border-radius:8px;border-left:3px solid var(--br);
  margin-bottom:12px;line-height:1.4;
}
body.dark .obj-q{background:rgba(90,37,117,.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','Segoe UI',Roboto,Arial,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(90,37,117,.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(90,37,117,.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}
body[data-view="cliente"] #clienteView{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(90,37,117,.12);border:2px solid rgba(90,37,117,.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.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(90,37,117,.18);background:linear-gradient(180deg,#fff,#fff5fa)}

/* ══ 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(90,37,117,.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(90,37,117,.18);color:var(--br-d,#3B0D55)}
.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(90,37,117,.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(90,37,117,.35);background:linear-gradient(180deg,#fff,#fff8fc);box-shadow:0 8px 20px rgba(90,37,117,.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(90,37,117,.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(90,37,117,.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(90,37,117,.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(90,37,117,0)}50%{box-shadow:0 0 0 8px rgba(90,37,117,.15)}}
.glow{animation:glow .5s ease}

/* ═══════════════════════════════════════════════
   BENCHMARK — V44 REDESIGN
   ═══════════════════════════════════════════════ */
.bench-exp-band{
  background:linear-gradient(135deg,#0f1c3d 0%,#1a2f5e 60%,#0f1c3d 100%);
  border-radius:16px;padding:18px 22px 16px;margin-bottom:16px;
  border:1px solid rgba(90,37,117,.25);
  box-shadow:0 4px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.06);
}
.beb-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.beb-excl-pill{
  flex:0 0 auto;
  background:linear-gradient(135deg,#5A2575,#c0005a);
  color:#fff;font-size:10px;font-weight:900;text-transform:uppercase;
  letter-spacing:.8px;padding:5px 12px;border-radius:999px;
  box-shadow:0 2px 8px rgba(90,37,117,.4);
}
.beb-title-block{display:flex;align-items:baseline;gap:10px;flex:1;flex-wrap:wrap;}
.beb-main-title{font-size:18px;font-weight:900;color:#fff;letter-spacing:-.2px;}
.beb-discount{
  font-size:18px;font-weight:900;
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.beb-folio-tag{
  flex:0 0 auto;font-size:11px;font-weight:700;color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 10px;
}
.beb-logos{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.beb-logo-chip{display:flex;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.25);flex-shrink:0;}
.beb-logo-img{width:44px;height:44px;object-fit:cover;display:block;border-radius:10px;}
.beb-logo-fallback{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:7px;font-weight:900;text-align:center;padding:3px;line-height:1.2;
}
.beb-mas{font-size:11px;font-weight:700;color:rgba(255,255,255,.45);align-self:center;}
.bench-table-wrap{border-radius:14px;overflow:hidden;border:1px solid var(--bo);box-shadow:0 2px 16px rgba(0,0,0,.07);}
.bench-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;}
.bench-table th{padding:12px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;text-align:left;position:sticky;top:0;z-index:2;}
.bench-th-benefit{background:var(--nv);color:#fff;width:33%;font-size:10px;letter-spacing:.8px;}
.bench-table th.col-liv{background:linear-gradient(160deg,#5A2575 0%,#9b004a 100%);color:#fff;width:25%;text-align:center;box-shadow:inset 0 -3px 0 rgba(255,255,255,.2);}
.bench-table th.col-other{background:#475569;color:#fff;width:16%;text-align:center;font-size:9px;min-width:85px;}
.bench-th-liv-badge{font-size:9px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;background:rgba(255,255,255,.18);border-radius:999px;padding:3px 9px;display:inline-block;margin-top:4px;color:#fff;}
.bench-table td{padding:10px 12px;border-bottom:1px solid var(--bo);vertical-align:middle;}
.bench-table tr:last-child td{border-bottom:none;}
.bench-td-feature{font-size:12px;font-weight:700;color:#334155;line-height:1.35;}
.bench-td-feature-excl{color:#1e1e2e;font-weight:800;}
.bench-td-liv{background:linear-gradient(180deg,rgba(90,37,117,.07) 0%,rgba(90,37,117,.02) 100%);border-left:3px solid rgba(90,37,117,.3) !important;}
.bench-liv-val{font-size:12px;font-weight:800;color:#5A2575;line-height:1.3;}
.bench-table td.col-other{background:#fafbfc;}
.bench-comp-val{font-size:10px;color:#64748b;font-weight:600;line-height:1.3;}
body.dark .bench-comp-val{color:#94a3b8}
.bench-row-excl{background:rgba(90,37,117,.025);}
.bench-table tbody tr:nth-child(even) td{background:#f8fafc;}
.bench-table tbody tr:nth-child(even) td.bench-td-liv{background:linear-gradient(180deg,rgba(90,37,117,.09) 0%,rgba(90,37,117,.04) 100%);}
.bench-table tbody tr:nth-child(even) td.col-other{background:#f1f5f9;}
.bench-check-liv{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:13px;flex-shrink:0;box-shadow:0 2px 6px rgba(217,119,6,.35);}
.bench-check-comp-ok{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#dde4f0;color:#475569;font-size:11px;flex-shrink:0;}
.bench-check-comp-no{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#f1f5f9;color:#94a3b8;font-size:11px;flex-shrink:0;}
.bench-check-comp-na{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#f8fafc;color:#cbd5e1;font-size:11px;flex-shrink:0;}
.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;}
.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;}
.bench-group-sep-row td{padding:10px 12px 4px !important;border-bottom:none !important;background:transparent !important;}
.bench-group-sep{display:flex;align-items:center;gap:10px;}
.bench-sep-line{flex:1;height:1px;}
.bench-sep-label{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;padding:3px 10px;border-radius:999px;border:1px solid transparent;}
.bench-footnote{margin-top:12px;font-size:10px;color:var(--mu);line-height:1.6;padding:10px 12px;background:var(--card);border-radius:10px;border:1px solid var(--bo);}
.bench-scroll-hint{display:none;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--mu);padding:6px 0 4px;font-weight:600;}
body.dark .bench-exp-band{background:linear-gradient(135deg,#0a1020 0%,#0f1c3d 100%);border-color:rgba(90,37,117,.3);}
body.dark .bench-table-wrap{border-color:#334155;}
body.dark .bench-table th.col-other{background:#334155;}
body.dark .bench-th-benefit{background:#0f172a;}
body.dark .bench-table td{border-color:#334155;color:#e2e8f0;}
body.dark .bench-td-feature{color:#cbd5e1;}
body.dark .bench-table td.col-other{background:#1a2535;}
body.dark .bench-table tbody tr:nth-child(even) td{background:#162032;}
body.dark .bench-table tbody tr:nth-child(even) td.bench-td-liv{background:linear-gradient(180deg,rgba(90,37,117,.12),rgba(90,37,117,.06));}
body.dark .bench-table tbody tr:nth-child(even) td.col-other{background:#1a2535;}
body.dark .bench-check-comp-ok{background:#334155;color:#94a3b8;}
body.dark .bench-check-comp-no{background:#1e293b;color:#64748b;}
body.dark .bench-td-liv{background:linear-gradient(180deg,rgba(90,37,117,.13),rgba(90,37,117,.06)) !important;}
body.dark .bench-liv-val{color:#ff4da6;}
body.dark .bench-comp-val{color:#94a3b8;}
body.dark .bench-footnote{background:#0f172a;border-color:#334155;}
body.dark .bench-row-excl{background:rgba(90,37,117,.06);}
body.dark .bench-excl-badge{background:linear-gradient(135deg,#b45309,#92400e);}
body.dark .bench-table td.col-liv div{color:#ffb3d1 !important;}

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

/* ══════════════════════════════════════════════════════════
   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}
}

/* ── 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}
  /* Suburbia — 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(90,37,117,.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(90,37,117,.08),rgba(90,37,117,.04))!important}
  body.dark .bench-table td.col-liv{background:linear-gradient(180deg,rgba(90,37,117,.15),rgba(90,37,117,.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}
  /* 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 .tools-block-flex{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(90,37,117,.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}
}

/* V28: reglas finales de gating — van al final de la hoja para ganar por orden
   frente a las reglas base de .layout/.cockpit/.legal/.footer/#floatClose,
   que tienen la misma especificidad y se declaran más abajo en el archivo.
   Nota: #floatClose se separa del grupo de clases — agrupar un ID con clases
   en el mismo selector con comas confunde el cálculo de especificidad. */
.layout,.cockpit,.legal,.footer{display:none}
#floatClose{display:none}
body[data-view="agent"][data-ready="1"] .layout{display:grid}
body[data-view="agent"][data-ready="1"] .cockpit{display:grid}
body[data-view="agent"][data-ready="1"] .legal,
body[data-view="agent"][data-ready="1"] .footer{display:block}
body[data-view="agent"][data-ready="1"] #floatClose{display:flex}

/* ══ GUÍA DE FOLIO — el cliente no pudo solicitar su experiencia (soporte técnico, Paso 3) ══ */
.sis-block{background:var(--bg);border:1px solid var(--bo);border-radius:12px;padding:12px 14px;margin-bottom:4px}
.sis-head{font-size:10px;font-weight:900;color:var(--mu);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px}
.sis-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--bo);gap:10px}
.sis-row:last-child{border-bottom:none}
.sis-key{font-size:12px;color:var(--mu);font-weight:700;flex-shrink:0;max-width:42%;display:flex;align-items:center;gap:6px}
.sis-val{font-size:12px;font-weight:800;background:var(--br-s);color:var(--br-d);padding:3px 9px;border-radius:6px;text-align:right;max-width:58%;word-break:break-word}
.phone-block{background:var(--bg);border:1px solid var(--bo);border-radius:12px;padding:14px;text-align:center;margin-bottom:4px}
.phone-number{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:22px;font-weight:900;color:var(--br);text-decoration:none;letter-spacing:.4px}
.phone-note{font-size:12px;color:var(--mu);font-weight:600;margin-top:8px}

/* ══ GRID DE 10 MOTIVOS SIS (Paso 1, Modo CS) — compacto, 2 columnas ══ */
.cp-opt-grid-10{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cp-opt-sm{padding:12px 14px;min-height:0}
.cp-opt-sm .cp-tx b{font-size:12.5px;line-height:1.3}
@media (max-width:400px){.cp-opt-grid-10{grid-template-columns:1fr}}

/* ══ RESUMEN DE SESIÓN (cierre del Copiloto) — captura en SIS sin memoria ══ */
.cp-session-summary{margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--bo);text-align:left}
.cp-session-summary-hd{font-size:10px;font-weight:900;color:var(--mu);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.cp-session-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--bo);font-size:12px}
.cp-session-row:last-of-type{border-bottom:none}
.cp-session-row span{color:var(--mu);font-weight:700}
.cp-session-row b{color:var(--tx);font-weight:800;text-align:right}

/* ══ HOJA DE IMPRESIÓN — oculta en pantalla, única visible al imprimir ══ */
#printSheet{display:none}
@media print{
  @page { size: A4 portrait; margin: 8mm 10mm; }
  body.print-sheet-mode > *:not(#printSheet){display:none !important}
  body.print-sheet-mode #printSheet{display:block !important;font-family:'Montserrat','Segoe UI',Arial,sans-serif;color:#1e293b;padding:0;max-width:100%;font-size:10px}
  .ps-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #5A2575;padding-bottom:6px;margin-bottom:10px}
  .ps-brand{font-size:9px;font-weight:900;color:#5A2575;text-transform:uppercase;letter-spacing:1px}
  .ps-title{font-size:15px;font-weight:900;color:#1e293b;margin-top:1px}
  .ps-date{font-size:9px;color:#64748b;font-weight:600;white-space:nowrap}
  .ps-hero{text-align:center;padding:10px;border:2px solid #5A2575;border-radius:10px;margin-bottom:10px}
  .ps-hero-k{font-size:9px;font-weight:900;color:#3B0D55;text-transform:uppercase;letter-spacing:.6px}
  .ps-hero-v{font-size:30px;font-weight:900;color:#3B0D55;margin:1px 0}
  .ps-hero-s{font-size:10px;color:#64748b;font-weight:600}
  .ps-cols{display:flex;gap:10px;margin-bottom:10px}
  .ps-cols .ps-block{flex:1;margin-bottom:0}
  .ps-block{border:1px solid #dbe3ef;border-radius:8px;padding:7px 9px;margin-bottom:9px;page-break-inside:avoid}
  .ps-block-hd{font-size:9px;font-weight:900;color:#1e293b;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
  .ps-row{display:flex;justify-content:space-between;gap:8px;font-size:9.5px;padding:2px 0;border-bottom:1px dashed #e5eaf2}
  .ps-row:last-of-type{border-bottom:none}
  .ps-row span{color:#475569}
  .ps-row b{color:#059669;white-space:nowrap}
  .ps-note{font-size:8px;color:#64748b;margin-top:4px;font-style:italic}
  .ps-covs{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:8.5px;color:#475569}
  .ps-foot{margin-top:8px;padding-top:6px;border-top:1px solid #dbe3ef;font-size:7.5px;color:#94a3b8;text-align:center}
}

/* ══ TOUCH TARGETS — mínimo cómodo para pantallas táctiles de tienda ══ */
.cp-btn{min-height:42px}
.cp-tool-btn{min-height:42px}
.cp-opt-sm{min-height:48px}

/* ══════════════════════════════════════════════════════════
   BUSCADOR DE OBJECIONES
   ══════════════════════════════════════════════════════════ */
#objSearchFab{
  position:fixed;bottom:24px;left:24px;z-index:190;
  display:flex;align-items:center;gap:7px;
  background:var(--br);color:#fff;border:none;border-radius:999px;
  padding:11px 18px;font-family:inherit;font-size:13px;font-weight:800;
  cursor:pointer;box-shadow:0 6px 20px rgba(90,37,117,.35);
  transition:transform .15s,box-shadow .15s;
}
#objSearchFab:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(90,37,117,.45)}
#objSearchFab span{letter-spacing:.2px}
body.present #objSearchFab{display:none}

#objSearchOverlay{
  display:none;position:fixed;inset:0;z-index:500;
  background:rgba(15,23,42,.55);backdrop-filter:blur(3px);
  align-items:flex-start;justify-content:center;padding:6vh 16px 16px;
}
#objSearchBox{
  background:var(--card);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.3);
  width:100%;max-width:620px;max-height:84vh;display:flex;flex-direction:column;
  border:1px solid var(--bo);overflow:hidden;
}
#objSearchHead{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:18px 20px 12px;border-bottom:1px solid var(--bo);
}
#objSearchTitle{font-size:16px;font-weight:900;color:var(--tx);line-height:1.2}
#objSearchSub{font-size:11px;color:var(--mu);font-weight:600;margin-top:3px}
#objSearchClose{
  background:none;border:1.5px solid var(--bo);border-radius:9px;
  width:30px;height:30px;flex-shrink:0;cursor:pointer;
  color:var(--mu);font-size:14px;font-family:inherit;line-height:1;
}
#objSearchClose:hover{border-color:var(--br);color:var(--br)}
#objSearchInput{
  margin:14px 20px 4px;padding:12px 15px;font-family:inherit;font-size:14px;
  font-weight:600;border:2px solid var(--bo);border-radius:11px;
  background:var(--bg);color:var(--tx);outline:none;
}
#objSearchInput:focus{border-color:var(--br)}
#objSearchInput::placeholder{color:var(--mu);font-weight:500}
#objSearchResults{
  overflow-y:auto;padding:10px 20px 4px;flex:1;
  display:flex;flex-direction:column;gap:10px;
}
#objSearchFoot{
  padding:10px 20px 14px;font-size:10px;color:var(--mu);
  border-top:1px solid var(--bo);text-align:center;font-weight:600;
}
#objSearchFoot b{
  background:var(--bg);border:1px solid var(--bo);border-radius:4px;
  padding:1px 5px;font-family:ui-monospace,monospace;color:var(--tx);
}
.obj-result{
  border:1.5px solid var(--bo);border-radius:13px;padding:13px 15px;background:var(--bg);
}
.obj-result-hd{font-size:13px;font-weight:900;color:var(--tx);margin-bottom:6px;line-height:1.25}
.obj-result-why{font-size:11px;color:var(--mu);font-weight:600;margin-bottom:9px;line-height:1.45}
.obj-result-say{
  background:var(--card);border-left:3px solid var(--br);border-radius:0 9px 9px 0;
  padding:10px 13px;font-size:12.5px;color:var(--tx);line-height:1.6;font-weight:500;
}
.obj-result-say-lbl{
  font-size:8.5px;font-weight:900;color:var(--br);text-transform:uppercase;
  letter-spacing:.7px;margin-bottom:4px;
}
.obj-result-do{
  font-size:11px;color:var(--mu);font-weight:700;margin-top:9px;line-height:1.45;
}

/* ══════════════════════════════════════════════════════════
   MODO COMPACTO — reduce alturas para que el flujo quepa sin scroll
   ══════════════════════════════════════════════════════════ */
body.compacto .cp-card-bd{padding:11px 13px}
body.compacto .cp-card-hd{padding:8px 13px;font-size:10px}
body.compacto .cp-speech{font-size:12.5px;line-height:1.55}
body.compacto .cp-opt{padding:9px 12px}
body.compacto .cp-opt-sm{padding:7px 11px}
body.compacto .cp-tx b{font-size:12px}
body.compacto .cp-step-hd{margin-bottom:9px}
body.compacto .cp-btn{padding:9px 15px;font-size:12.5px}
body.compacto .card{padding:13px}
body.compacto .sis-block{padding:9px 11px}
body.compacto .sis-row{padding:3px 0;font-size:11px}
body.compacto .cp-golden{padding:9px 11px;font-size:11.5px}
body.compacto .cp-video-hint{font-size:11px}
body.compacto .assist-btn{padding:7px 9px}
body.compacto .footer{display:none}

@media (max-width:640px){
  #objSearchFab{bottom:16px;left:16px;padding:10px 14px;font-size:12px}
  #objSearchFab span{display:none}
  #objSearchOverlay{padding:3vh 10px 10px}
}

/* Chips de categoría del buscador de objeciones */
#objSearchChips{
  display:flex;flex-wrap:wrap;gap:5px;padding:10px 20px 4px;
}
.obj-chip{
  font-size:10px;font-weight:800;padding:4px 10px;border-radius:999px;
  border:1.5px solid var(--bo);background:var(--card);color:var(--mu);
  cursor:pointer;font-family:inherit;white-space:nowrap;transition:.12s;
}
.obj-chip:hover{border-color:var(--br);color:var(--tx)}
.obj-chip.on{background:var(--br);border-color:var(--br);color:#fff}
.obj-result-top{margin-bottom:5px}
.obj-result-cat{
  font-size:8.5px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;
  color:var(--mu);background:var(--card);border:1px solid var(--bo);
  border-radius:999px;padding:2px 8px;
}
#objSearchCount{font-weight:800;color:var(--tx)}

/* El buscador de objeciones vive solo en Herramientas: en el Copiloto ya hay
   guía paso a paso, y en Vista Cliente el asesor no debe mostrarle esto. */
#objSearchFab{ display:none; }
body[data-view="agent"] #objSearchFab{ display:flex; }
body.present #objSearchFab{ display:none !important; }

/* ══════════════════════════════════════════════════════════
   VISTA +GARANTÍA
   ══════════════════════════════════════════════════════════ */
#garantiaView{display:none}
body[data-view="garantia"] #garantiaView{display:block}
#garantiaViewBody{max-width:760px;margin:0 auto;padding:0 16px 40px}

/* Pantalla de entrada */
.gar-intro{text-align:center;padding:22px 10px 20px}
.gar-intro-ico{font-size:44px;margin-bottom:6px}
.gar-intro-t{font-size:24px;font-weight:900;color:var(--tx);margin:0 0 6px}
.gar-intro-s{font-size:13px;color:var(--mu);font-weight:600;line-height:1.6;max-width:460px;margin:0 auto}

.gar-rutas{display:flex;flex-direction:column;gap:12px}
.gar-ruta{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:18px 20px;border-radius:16px;border:2px solid var(--bo);
  background:var(--card);cursor:pointer;font-family:inherit;text-align:left;
  transition:transform .14s,border-color .14s,box-shadow .14s;
}
.gar-ruta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.gar-ruta-ico{font-size:26px;margin-bottom:4px}
.gar-ruta-t{font-size:15px;font-weight:900;color:var(--tx);line-height:1.25}
.gar-ruta-s{font-size:11.5px;color:var(--mu);font-weight:600;line-height:1.5}
.gar-ruta-venta:hover{border-color:#0ea5e9}
.gar-ruta-reclamo:hover{border-color:#f59e0b}
.gar-ruta-mant:hover{border-color:var(--ok)}

/* Header de ruta */
.gar-hd{display:flex;align-items:flex-start;gap:12px;padding:16px 0 14px}
.gar-back{
  background:var(--card);border:1.5px solid var(--bo);border-radius:9px;
  padding:6px 12px;font-size:11.5px;font-weight:800;color:var(--mu);
  cursor:pointer;font-family:inherit;flex-shrink:0;white-space:nowrap;
}
.gar-back:hover{border-color:var(--br);color:var(--br)}
.gar-hd-t{font-size:17px;font-weight:900;color:var(--tx);line-height:1.2}
.gar-hd-s{font-size:11.5px;color:var(--mu);font-weight:600;margin-top:2px}

/* Tarjetas */
.gar-card{
  background:var(--card);border:1.5px solid var(--bo);border-radius:15px;
  padding:16px 18px;margin-bottom:13px;
}
.gar-card-hd{font-size:11px;font-weight:900;color:var(--tx);text-transform:uppercase;letter-spacing:.5px;margin-bottom:9px}
.gar-card-note{font-size:11px;color:var(--mu);font-weight:600;line-height:1.5;margin:0 0 10px}
.gar-hint{font-size:11.5px;color:var(--mu);font-weight:600;text-align:center;padding:16px 8px;line-height:1.5}

/* Input de precio */
.gar-precio-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.gar-precio-sign{font-size:20px;font-weight:900;color:var(--mu)}
.gar-precio-input{
  flex:1;font-size:22px;font-weight:900;padding:9px 13px;font-family:inherit;
  border:2px solid var(--bo);border-radius:11px;background:var(--bg);color:var(--tx);outline:none;
}
.gar-precio-input:focus{border-color:var(--br)}
.gar-precio-mxn{font-size:12px;font-weight:800;color:var(--mu)}
.gar-check{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--tx);font-weight:600;cursor:pointer}
.gar-check em{color:var(--mu);font-style:normal;font-size:10.5px}

/* Resultado del programa */
.gar-resultado{border-radius:14px;padding:16px 18px;margin-top:14px;border:2px solid}
.gar-res-reemplazo{border-color:#0ea5e9;background:rgba(14,165,233,.06)}
.gar-res-reparaciones{border-color:var(--br);background:rgba(90,37,117,.05)}
.gar-res-tag{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.7px;color:var(--mu)}
.gar-res-t{font-size:18px;font-weight:900;color:var(--tx);margin:3px 0 2px;line-height:1.2}
.gar-res-s{font-size:12px;font-weight:700;color:var(--mu)}
.gar-res-list{margin:12px 0 0;padding-left:17px;font-size:11.5px;color:var(--tx);line-height:1.75;font-weight:500}
.gar-res-list li{margin-bottom:3px}
.gar-res-nota{
  font-size:10.5px;color:var(--mu);font-weight:600;margin-top:11px;padding-top:9px;
  border-top:1px dashed var(--bo);line-height:1.5;
}

/* Línea de tiempo */
.gar-timeline{margin:14px 0 4px}
.gar-tl-bar{display:flex;height:30px;border-radius:8px;overflow:hidden;border:1.5px solid var(--bo)}
.gar-tl-fab,.gar-tl-pif{display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800}
.gar-tl-fab{flex:1;background:#94a3b8;color:#fff}
.gar-tl-pif{flex:2.4;background:linear-gradient(135deg,var(--br),#3B0D55);color:#fff}
.gar-tl-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--mu);font-weight:700;margin-top:4px}

/* Secciones elegibles */
.gar-secs{display:flex;flex-direction:column;gap:7px}
.gar-sec{border:1px solid var(--bo);border-radius:10px;padding:9px 12px;background:var(--bg)}
.gar-sec-hd{font-size:11.5px;font-weight:900;color:var(--tx);margin-bottom:3px}
.gar-sec-items{font-size:10.5px;color:var(--mu);font-weight:600;line-height:1.5}
.gar-badge-mant{
  font-size:8px;font-weight:900;background:var(--ok);color:#fff;
  border-radius:999px;padding:2px 7px;letter-spacing:.3px;vertical-align:middle;
}

/* Diagnosticador de casos */
.gar-caso-input{
  width:100%;padding:12px 15px;font-family:inherit;font-size:13.5px;font-weight:600;
  border:2px solid var(--bo);border-radius:11px;background:var(--bg);color:var(--tx);
  outline:none;margin-bottom:12px;
}
.gar-caso-input:focus{border-color:var(--br)}
.gar-caso{border-radius:12px;padding:12px 14px;margin-bottom:9px;border:1.5px solid}
.gar-caso-si{border-color:rgba(5,150,105,.35);background:rgba(5,150,105,.05)}
.gar-caso-no{border-color:rgba(220,38,38,.3);background:rgba(220,38,38,.04)}
.gar-caso-depende{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.05)}
.gar-caso-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.gar-caso-ico{font-size:17px;flex-shrink:0}
.gar-caso-t{font-size:13px;font-weight:900;color:var(--tx);flex:1;min-width:130px;line-height:1.25}
.gar-caso-tag{font-size:8.5px;font-weight:900;letter-spacing:.4px;white-space:nowrap;padding:3px 8px;border-radius:999px;background:var(--card);border:1px solid var(--bo);color:var(--tx)}
.gar-caso-v{font-size:12px;color:var(--tx);font-weight:600;line-height:1.55;margin-bottom:6px}
.gar-caso-a{font-size:10.5px;color:var(--mu);font-weight:700;line-height:1.5}

/* Teléfono y pasos */
.gar-card-tel{text-align:center}
.gar-tel{
  display:block;font-size:26px;font-weight:900;color:var(--br);
  text-decoration:none;letter-spacing:-.5px;margin:2px 0 3px;
}
.gar-tel-note{font-size:10.5px;color:var(--mu);font-weight:600;margin-bottom:14px}
.gar-pasos{text-align:left;border-top:1px dashed var(--bo);padding-top:13px}
.gar-pasos-hd{font-size:10px;font-weight:900;color:var(--tx);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.gar-pasos-ol{margin:0;padding-left:18px;font-size:11.5px;color:var(--tx);line-height:1.9;font-weight:500}
.gar-pasos-nota{font-size:10.5px;color:var(--ok);font-weight:800;margin-top:8px;line-height:1.5}

/* Mantenimiento */
.gar-card-oportunidad{border-color:var(--ok);background:rgba(5,150,105,.05)}
.gar-oport-t{font-size:12px;font-weight:900;color:var(--tx);margin-bottom:5px}
.gar-oport-s{font-size:11.5px;color:var(--tx);font-weight:500;line-height:1.6;margin:0}
.gar-oport-s em{font-style:italic;color:var(--mu)}
.gar-mant-arts{display:flex;flex-wrap:wrap;gap:7px}
.gar-mant-art{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 15px;border-radius:12px;border:2px solid var(--bo);
  background:var(--bg);cursor:pointer;font-family:inherit;min-width:88px;transition:.14s;
}
.gar-mant-art:hover{border-color:var(--ok)}
.gar-mant-art.on{border-color:var(--ok);background:var(--ok)}
.gar-mant-art.on .gar-mant-lbl{color:#fff}
.gar-mant-ico{font-size:21px}
.gar-mant-lbl{font-size:10.5px;font-weight:800;color:var(--tx)}
.gar-mant-det{
  margin-top:11px;font-size:11px;color:var(--tx);font-weight:600;line-height:1.55;
  background:var(--bg);border-radius:9px;padding:9px 12px;border:1px solid var(--bo);
}
.gar-fecha-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.gar-fecha-input,.gar-select{
  padding:9px 12px;font-family:inherit;font-size:12.5px;font-weight:700;
  border:2px solid var(--bo);border-radius:10px;background:var(--bg);color:var(--tx);outline:none;
}
.gar-fecha-input{flex:1;min-width:150px}
.gar-select{flex:1;min-width:180px;cursor:pointer}
.gar-fecha-input:focus,.gar-select:focus{border-color:var(--br)}

.gar-mant-res{border-radius:13px;padding:15px 17px;margin-top:13px;border:2px solid}
.gar-mant-fabricante{border-color:#94a3b8;background:rgba(148,163,184,.08)}
.gar-mant-activo{border-color:var(--ok);background:rgba(5,150,105,.07)}
.gar-mant-urgente{border-color:#f59e0b;background:rgba(245,158,11,.09)}
.gar-mant-vencido{border-color:rgba(220,38,38,.3);background:rgba(220,38,38,.04)}
.gar-mant-res-t{font-size:15px;font-weight:900;color:var(--tx);margin-bottom:5px;line-height:1.25}
.gar-mant-res-m{font-size:12.5px;color:var(--tx);font-weight:700;line-height:1.55;margin-bottom:8px}
.gar-mant-res-a{font-size:11.5px;color:var(--mu);font-weight:600;line-height:1.6}
.gar-mant-warn{
  font-size:10.5px;color:#b45309;font-weight:800;margin-top:10px;padding-top:9px;
  border-top:1px dashed var(--bo);line-height:1.5;
}

@media (max-width:640px){
  #garantiaViewBody{padding:0 12px 32px}
  .gar-intro-t{font-size:21px}
  .gar-res-t{font-size:16px}
  .gar-tel{font-size:22px}
  .gar-mant-art{min-width:0;flex:1}
}

/* ══════════════════════════════════════════════════════════
   MODAL "CALCULAR AHORRO REAL" (Copiloto) — versión ampliada
   Solo afecta este modal, no la calculadora de Herramientas,
   aunque compartan las mismas clases .mr-*
   ══════════════════════════════════════════════════════════ */
#planModalOverlay .mr-plan-name{font-size:13px}
#planModalOverlay .mr-plan-price{font-size:16px}
#planModalOverlay .mr-plan-daily{font-size:10.5px}
#planModalOverlay .mr-plan-btn{padding:13px 10px}
#planModalOverlay .mr-kpi{padding:13px 14px}
#planModalOverlay .mr-kpi-k{font-size:10px}
#planModalOverlay .mr-kpi-v{font-size:22px}
#planModalOverlay .mr-kpi-v.big{font-size:26px}
#planModalOverlay .mr-assist-name{font-size:12px}
#planModalOverlay .mr-assist-val{font-size:11.5px}
#planModalOverlay .mr-assist-btn{padding:11px 12px}
#planModalOverlay .mr-assist-ico{font-size:19px}
#planModalOverlay .mr-plan-label{font-size:11.5px}
#planModalOverlay .cp-btn{padding:13px 20px;font-size:14px}
#planModalOverlay .mr-cta-main{padding:17px;font-size:16px}

@media (max-width:680px){
  #planModalOverlay > div{max-width:96vw!important;padding:20px!important}
}

/* ══════════════════════════════════════════════════════════
   PANTALLA DE ACCESO — tienda + número de empleado
   ══════════════════════════════════════════════════════════ */
#accesoGate{
  position:fixed;inset:0;z-index:9998;
  background:linear-gradient(135deg,#0f172a 0%,#2a1338 60%,#0f172a 100%);
  display:none;align-items:center;justify-content:center;padding:24px;
}
#accesoCard{
  background:#fff;border-radius:22px;max-width:460px;width:100%;
  box-shadow:0 32px 80px rgba(0,0,0,.4);overflow:hidden;
}
#accesoHead{
  background:linear-gradient(135deg,var(--br) 0%,var(--br-d) 100%);
  padding:28px 28px 22px;text-align:center;color:#fff;
}
#accesoIco{font-size:36px;margin-bottom:8px}
#accesoTitle{font-size:19px;font-weight:900;letter-spacing:-.3px;margin-bottom:6px}
#accesoSub{font-size:12px;opacity:.9;font-weight:600;line-height:1.5}
#accesoBody{padding:22px 26px 26px}
.acceso-label{
  display:block;font-size:10px;font-weight:900;color:#475569;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;
}
.acceso-input{
  width:100%;padding:12px 14px;font-family:inherit;font-size:14px;font-weight:700;
  border:2px solid #dbe3ef;border-radius:11px;background:#f8fafc;color:#1e293b;
  outline:none;margin-bottom:4px;
}
.acceso-input:focus{border-color:var(--br);background:#fff}
.acceso-tienda-sel{
  min-height:20px;font-size:12px;font-weight:800;color:#059669;
  margin:6px 0 8px;padding:0 2px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.acceso-cambiar-btn{
  background:none;border:none;color:#94a3b8;font-size:10.5px;font-weight:800;
  cursor:pointer;font-family:inherit;padding:2px 6px;border-radius:6px;
  text-decoration:underline;text-underline-offset:2px;
}
.acceso-cambiar-btn:hover{color:var(--br);background:var(--br-s)}
.acceso-tienda-results{
  max-height:0;overflow:hidden;border:0 solid #e2e8f0;border-radius:11px;
  margin-bottom:0;transition:max-height .15s;
}
.acceso-tienda-results.has-items{
  max-height:190px;overflow-y:auto;border-width:1px;margin-bottom:4px;
}
.acceso-hint-static{
  font-size:10px;color:#94a3b8;font-weight:600;margin:2px 0 4px;
}
.acceso-tienda-item.exacta{background:var(--br-s);border-left:3px solid var(--br)}
.acceso-tienda-item.exacta .ati-num{color:var(--br)}
.acceso-tienda-item{
  display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;
  border:none;border-bottom:1px solid #f1f5f9;background:#fff;cursor:pointer;
  font-family:inherit;text-align:left;transition:.1s;
}
.acceso-tienda-item:last-child{border-bottom:none}
.acceso-tienda-item:hover{background:var(--br-s)}
.acceso-tienda-item.on{background:var(--br-s)}
.ati-num{font-size:10.5px;font-weight:900;color:var(--br);font-family:ui-monospace,monospace;flex-shrink:0;width:44px}
.ati-name{font-size:12px;font-weight:700;color:#1e293b;flex:1}
.ati-zona{font-size:9px;font-weight:800;color:#94a3b8;flex-shrink:0}
.acceso-hint{padding:16px 12px;text-align:center;font-size:11.5px;color:#94a3b8;font-weight:600}
#accesoContinuarBtn{
  width:100%;margin-top:14px;padding:14px;border:none;border-radius:13px;
  background:linear-gradient(135deg,var(--br),var(--br-d));color:#fff;
  font-size:14px;font-weight:900;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 20px rgba(90,37,117,.3);transition:.15s;
}
#accesoContinuarBtn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
#accesoContinuarBtn:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-1px)}
#accesoFoot{font-size:9.5px;color:#94a3b8;font-weight:600;text-align:center;margin-top:10px;line-height:1.5}

/* Mientras no se ha dado acceso, toda la app queda oculta detrás del gate */
body[data-acceso="0"] .topbar,
body[data-acceso="0"] .view-toggle,
body[data-acceso="0"] #copilotoView,
body[data-acceso="0"] #agenteView,
body[data-acceso="0"] #trainingView,
body[data-acceso="0"] #benchmarkView,
body[data-acceso="0"] #guionesView,
body[data-acceso="0"] #garantiaView,
body[data-acceso="0"] #clienteView{ visibility:hidden }

/* Badge de tienda en el header — modo oscuro */
body.dark #tiendaBadge{background:#1e293b;border-color:#334155}
body.dark #tiendaBadge button{background:#3f1a1a;border-color:#7f1d1d;color:#fca5a5}

@media (max-width:900px){
  #tiendaBadge{display:none!important}
}
@media (max-width:480px){
  #accesoHead{padding:22px 20px 18px}
  #accesoBody{padding:18px 20px 22px}
  #accesoTitle{font-size:17px}
}

/* ══ V7-SBB: sello de marca, franja de productos y accesos rápidos de tienda ══ */
#accesoHead{position:relative}
.acceso-brand-seal{position:absolute;top:-24px;left:50%;transform:translateX(-50%);background:#fff;border-radius:14px;padding:8px 14px;box-shadow:0 10px 26px rgba(0,0,0,.22);border:1px solid #f1f5f9}
.acceso-brand-seal img{height:22px;width:auto;display:block}
.acceso-productos-strip{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px dashed #e2e8f0}
.acceso-productos-strip span{font-size:9.5px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.4px}
.acceso-logo-box{display:inline-flex;align-items:center;width:44px}
.acceso-productos-strip img{width:100%;height:auto;display:block;filter:grayscale(1);opacity:.55;transition:filter .2s,opacity .2s}
.acceso-productos-strip img:hover{filter:grayscale(0);opacity:1}

/* ══ RELOJ Y CLIMA — pantalla de acceso ══ */
#accesoClock{position:absolute;top:14px;right:18px;font-size:12px;font-weight:800;color:rgba(255,255,255,.85);letter-spacing:.2px;font-variant-numeric:tabular-nums}
#accesoClima{display:inline-flex;align-items:center;gap:5px;margin-top:8px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 11px;font-size:11px;font-weight:700;color:#fff}

/* ══ CAMPOS TIPO PÍLDORA — para calculadoras (reemplaza radios nativos) ══ */
.field-group{margin-bottom:16px}
.field-label{font-size:11px;font-weight:800;color:var(--mu);display:block;margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.pill-radio{position:relative;cursor:pointer;display:inline-block}
.pill-radio input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pill-radio span{display:inline-block;padding:9px 16px;border:1.5px solid var(--bo);border-radius:10px;font-size:12.5px;font-weight:700;color:var(--tx);background:var(--card);transition:.15s;user-select:none}
.pill-radio:hover span{border-color:var(--br)}
.pill-radio:has(input:checked) span{background:var(--br);border-color:var(--br);color:#fff;box-shadow:0 3px 10px rgba(90,37,117,.25)}

/* ══ JERARQUÍA VISUAL DEL NAV — Atender cliente como CTA dominante ══ */
#btnViewCopiloto{background:linear-gradient(135deg,var(--br),var(--br-2))!important;color:#fff!important;border-radius:999px!important;padding:8px 18px!important;font-weight:900!important;font-size:12px!important;border-bottom:none!important;box-shadow:0 4px 14px rgba(90,37,117,.3);margin-right:4px}
#btnViewCopiloto:hover{filter:brightness(1.08)}
body.dark #btnViewCopiloto{background:linear-gradient(135deg,var(--br),var(--br-2))!important}
.view-toggle button:not(#btnViewCopiloto){opacity:.72;font-weight:700}
.view-toggle button:not(#btnViewCopiloto).on{opacity:1}