:root{
  --fondo:#110A1D; --sup:#1B1230; --sup2:#231839; --borde:#2F2448; --texto:#F3EEFB; --texto2:#BFB3D6; --tenue:#8E81A8;
  --s1:#9B6AEB; --s2:#D96E1E; --s3:#1C9E90; --neutro:#6D6287;
  --ok:#32D583; --mal:#F97066; --acento:#EC6608;
  --radio:18px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo);color:var(--texto);font-family:Poppins,system-ui,sans-serif;min-height:100vh;
  background-image:radial-gradient(1200px 500px at 85% -10%,rgba(107,45,172,.35),transparent 60%),radial-gradient(800px 400px at -10% 110%,rgba(236,102,8,.10),transparent 60%);background-attachment:fixed}
button{font:inherit;cursor:pointer;color:inherit}
[hidden]{display:none!important}
.logo-blanco{filter:brightness(0) invert(1)}
.num{font-variant-numeric:tabular-nums}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-card{width:100%;max-width:380px;background:var(--sup);border:1px solid var(--borde);border-radius:24px;padding:36px 32px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.login-card img{height:30px;align-self:flex-start}
.login-card h1{margin:12px 0 0;font-size:26px}
.login-card p{margin:0 0 8px;color:var(--texto2);font-size:13px}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--texto2)}
.login-card input{background:var(--fondo);border:1px solid var(--borde);border-radius:12px;padding:12px 14px;color:var(--texto);font:14px Poppins;outline:none}
.login-card input:focus{border-color:var(--s1)}
.login-card button{margin-top:6px;background:linear-gradient(135deg,#6B2DAC,#8B45D1);border:none;border-radius:12px;padding:13px;font-weight:600}
.login-card small{color:var(--tenue);font-size:12px;text-align:center}
.login-card small b{color:var(--texto2)}
.login-err{color:var(--mal);font-size:13px;min-height:18px;text-align:center}

/* Cabecera */
.cab{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 32px;border-bottom:1px solid var(--borde);background:rgba(17,10,29,.75);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.cab-izq{display:flex;align-items:center;gap:16px}
.cab-izq img{height:24px}
.cab-izq b{display:block;font-size:15px}
.cab-izq small{color:var(--tenue);font-size:12px}
.sep{width:1px;height:30px;background:var(--borde)}
.cab-der{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.periodos{display:flex;background:var(--sup);border:1px solid var(--borde);border-radius:12px;padding:3px}
.periodos button{background:none;border:none;padding:7px 14px;border-radius:9px;font-size:13px;font-weight:500;color:var(--texto2)}
.periodos button.activo{background:var(--sup2);color:var(--texto);box-shadow:inset 0 0 0 1px var(--borde)}
.vivo-pill{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ok)}
.vivo-pill i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulso 1.6s infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(50,213,131,.5)}70%{box-shadow:0 0 0 8px rgba(50,213,131,0)}100%{box-shadow:0 0 0 0 rgba(50,213,131,0)}}
.lnk{background:none;border:none;color:var(--texto2);font-size:13px;text-decoration:none}
.lnk:hover{color:var(--texto)}
.demo-banda{margin:16px 32px 0;padding:8px 14px;border:1px dashed var(--borde);border-radius:10px;color:var(--tenue);font-size:12px}
.demo-banda b{color:var(--acento)}

.contenido{padding:20px 32px 40px;display:flex;flex-direction:column;gap:20px;max-width:1680px;margin:0 auto}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.kpi{background:var(--sup);border:1px solid var(--borde);border-radius:var(--radio);padding:16px 18px;position:relative;overflow:hidden}
.kpi.hero{background:linear-gradient(145deg,#4A1A80,#2A1250);border-color:#5B2F94}
.kpi small{display:block;color:var(--texto2);font-size:12px;font-weight:500}
.kpi .v{font-size:28px;font-weight:600;letter-spacing:-.01em;margin:4px 0 2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi.hero .v{font-size:32px}
.kpi .d{font-size:12px;color:var(--tenue);display:flex;gap:6px;align-items:center}
.kpi .d b{font-weight:600}
.kpi .d .up{color:var(--ok)}
.kpi .d .down{color:var(--mal)}

/* Tarjetas */
.fila2{display:grid;grid-template-columns:1.7fr 1fr;gap:20px}
.fila2.inv{grid-template-columns:1.15fr 1fr}
.fila3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--sup);border:1px solid var(--borde);border-radius:var(--radio);padding:20px 22px;min-width:0}
.card-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.card-cab.mt{margin-top:24px}
.card h2{font-size:15px;font-weight:600;margin:0}
.card-cab p{margin:2px 0 0;color:var(--tenue);font-size:12px}
.leyenda{display:flex;gap:14px;font-size:12px;color:var(--texto2);flex-wrap:wrap}
.leyenda span{display:flex;align-items:center;gap:6px}
.leyenda i{width:10px;height:10px;border-radius:3px;display:inline-block}
.leyenda i.linea{height:2px;border-radius:0;width:16px;border-top:2px dashed var(--texto2);background:none}

/* Gráfico principal */
.grafico{position:relative;height:370px}
.grafico svg{width:100%;height:100%;display:block;overflow:visible}
.grafico .eje text{fill:var(--tenue);font-size:11px;font-family:Poppins}
.grafico .grid line{stroke:var(--borde);stroke-width:1}
.grafico .bar{fill:var(--s1);transition:opacity .15s}
.grafico .bar.futuro{fill:var(--borde)}
.grafico .hit{fill:transparent;cursor:crosshair}
.grafico .hit:hover + .bar,.grafico .bar.on{opacity:.75}
.grafico .prev{fill:none;stroke:var(--texto2);stroke-width:2;stroke-dasharray:4 4;opacity:.7}
.grafico .cursor{stroke:var(--texto2);stroke-width:1;opacity:.4}

.tip{position:fixed;z-index:50;background:#0B0614;border:1px solid var(--borde);border-radius:10px;padding:8px 12px;font-size:12px;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.4);min-width:150px}
.tip b{display:block;margin-bottom:4px;font-size:12px}
.tip div{display:flex;justify-content:space-between;gap:14px;color:var(--texto2)}
.tip div span:last-child{color:var(--texto);font-weight:600;font-variant-numeric:tabular-nums}

/* Embudo */
.embudo{display:flex;flex-direction:column;gap:12px}
.et{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.et .nom{font-size:13px;color:var(--texto2)}
.et .val{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.et .pista{grid-column:1 / -1;height:26px;background:var(--sup2);border-radius:6px;overflow:hidden;position:relative}
.et .relleno{height:100%;border-radius:0 4px 4px 0;background:linear-gradient(90deg,#6B2DAC,var(--s1));transition:width .6s ease}
.et:last-child .relleno{background:linear-gradient(90deg,#B55A14,var(--s2))}
.et .paso{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--texto2)}
.embudo-pie{margin-top:6px;padding-top:12px;border-top:1px solid var(--borde);display:flex;justify-content:space-between;font-size:13px;color:var(--texto2)}
.embudo-pie b{color:var(--texto);font-size:18px}

/* Canales */
.canal-fila{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--borde)}
.canal-fila:last-child{border:none}
.canal-fila .punto{width:10px;height:10px;border-radius:3px}
.canal-fila b{font-size:13.5px;font-weight:500}
.canal-fila .bs{font-weight:600;font-variant-numeric:tabular-nums;font-size:14px;text-align:right}
.canal-fila .det{grid-column:2 / -1;font-size:12px;color:var(--tenue);display:flex;justify-content:space-between}
.mezcla{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;margin-bottom:6px}
.mezcla span{height:100%}

/* Barras horizontales */
.barras{display:flex;flex-direction:column;gap:9px}
.bh{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:12.5px;cursor:default}
.bh .n{color:var(--texto2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh .x{font-weight:600;font-variant-numeric:tabular-nums}
.bh .x small{color:var(--tenue);font-weight:400;margin-left:6px}
.bh .p{grid-column:1 / -1;height:8px;background:var(--sup2);border-radius:4px;overflow:hidden}
.bh .p i{display:block;height:100%;background:var(--s1);border-radius:0 4px 4px 0;transition:width .6s}
.barras.neutras .bh .p i{background:var(--neutro)}

/* Tipos */
.tipos-barra{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px;margin:4px 0 12px}
.tipos-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tipo{background:var(--sup2);border-radius:12px;padding:10px 12px}
.tipo small{display:flex;align-items:center;gap:6px;color:var(--texto2);font-size:12px}
.tipo small i{width:9px;height:9px;border-radius:3px}
.tipo b{display:block;font-size:18px;font-variant-numeric:tabular-nums}
.tipo span{font-size:11.5px;color:var(--tenue)}

/* Feed */
.cuenta{font-size:12px;color:var(--tenue)}
.feed{display:flex;flex-direction:column;max-height:520px;overflow-y:auto;margin:0 -8px}
.conv{display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:center;padding:10px 8px;border-radius:12px;cursor:pointer;border-bottom:1px solid rgba(47,36,72,.6)}
.conv:hover{background:var(--sup2)}
.conv .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:11px;font-weight:700;grid-row:span 2}
.conv .ic.whatsapp{background:rgba(155,106,235,.18);color:var(--s1)}
.conv .ic.instagram{background:rgba(217,110,30,.18);color:var(--s2)}
.conv .ic.web{background:rgba(28,158,144,.18);color:var(--s3)}
.conv .t{font-size:13px;font-weight:500;display:flex;gap:8px;align-items:center;min-width:0}
.conv .t .nro{font-family:'JetBrains Mono',monospace;font-size:12px}
.conv .m{font-size:12px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .r{text-align:right;grid-row:span 2}
.conv .r b{display:block;font-size:13px;font-variant-numeric:tabular-nums}
.conv .r small{font-size:11px;color:var(--tenue)}
.badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;letter-spacing:.03em;white-space:nowrap}
.badge.vivo{background:var(--acento);color:#fff}
.et-badge{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--sup2);color:var(--texto2);white-space:nowrap}
.et-badge.pagada{background:rgba(50,213,131,.15);color:var(--ok)}
.et-badge.qr{background:rgba(217,110,30,.15);color:#F2A064}
.et-badge.derivada{background:rgba(249,112,102,.12);color:var(--mal)}

/* Salud */
.salud{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sa{background:var(--sup2);border-radius:12px;padding:10px 12px}
.sa small{display:block;font-size:11.5px;color:var(--texto2)}
.sa b{font-size:19px;font-variant-numeric:tabular-nums;font-weight:600}
.sa span{display:block;font-size:11px;color:var(--tenue)}
.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla th{text-align:left;font-weight:500;color:var(--tenue);font-size:11.5px;padding:6px 0;border-bottom:1px solid var(--borde)}
.tabla td{padding:9px 0;border-bottom:1px solid var(--borde);font-variant-numeric:tabular-nums}
.tabla th:not(:first-child),.tabla td:not(:first-child){text-align:right}
.tabla tr.actual td{color:var(--texto);font-weight:600}
.medicion{margin-top:16px;padding:12px 14px;border-radius:12px;border:1px solid #5B2F94;background:rgba(107,45,172,.12);font-size:12.5px;color:var(--texto2);line-height:1.55}
.medicion b{color:var(--texto)}

/* Cajón de transcripción */
.cajon{position:fixed;inset:0;z-index:60}
.cajon-fondo{position:absolute;inset:0;background:rgba(5,2,10,.6);animation:fade .2s}
.cajon-panel{position:absolute;right:0;top:0;bottom:0;width:min(460px,100%);background:var(--sup);border-left:1px solid var(--borde);display:flex;flex-direction:column;animation:entra .25s ease-out}
@keyframes entra{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.cajon-cab{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--borde)}
.cajon-cab b{display:block;font-size:15px}
.cajon-cab small{color:var(--tenue);font-size:12px}
.cajon-cab button{background:none;border:none;font-size:26px;color:var(--texto2)}
.cajon-meta{display:flex;flex-wrap:wrap;gap:6px;padding:12px 20px;border-bottom:1px solid var(--borde)}
.cajon-meta span{font-size:11.5px;background:var(--sup2);border-radius:99px;padding:3px 10px;color:var(--texto2)}
.cajon-chat{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:8px}
.bm{max-width:85%;padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.45}
.bm small{display:block;font-size:10.5px;color:var(--tenue);margin-top:3px}
.bm.cliente{align-self:flex-end;background:#3B2166;border-top-right-radius:4px}
.bm.agente{align-self:flex-start;background:var(--sup2);border-top-left-radius:4px}
.bm.sistema{align-self:center;background:none;border:1px dashed var(--borde);color:var(--texto2);font-size:12px;text-align:center}
.bm .ui{margin-top:6px;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.25);font-size:11.5px;color:var(--texto2);font-family:'JetBrains Mono',monospace}

/* Responsive */
@media (max-width:1400px){ .kpis{grid-template-columns:repeat(3,1fr)} }
@media (max-width:1100px){ .fila2,.fila2.inv{grid-template-columns:1fr} .fila3{grid-template-columns:1fr 1fr} }
@media (max-width:720px){
  .cab{padding:12px 16px}
  .cab-izq .sep,.cab-izq div{display:none}
  .demo-banda{margin:12px 16px 0}
  .contenido{padding:16px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi .v{font-size:22px}
  .kpi.hero .v{font-size:24px}
  .fila3{grid-template-columns:1fr}
  .salud{grid-template-columns:1fr 1fr}
  .grafico{height:240px}
}