/* ===========================================================================
   KW — identidad de la web (kw.tgdata.co)
   ---------------------------------------------------------------------------
   Producto propio: negro + azul eléctrico, Sora para texto y JetBrains Mono
   para todo lo que sea número. NADA se hereda de TGData: esta app no comparte
   ni hoja de estilos ni layout.
   =========================================================================== */

:root{
  --ground:#08080A;   --surface:#0E1016;  --surface-2:#141824; --surface-3:#1A2030;
  --line:#1E2434;     --line-soft:#171C28;
  --led:#0D6BFF;      --led-bright:#67C6FF; --led-pale:#A8E0FF;
  --deep:#092676;     --deep-2:#050A34;
  /* ⚠️ `--ink-3` era #6B7488 y daba entre 3,46:1 y 4,27:1 contra las cuatro
     superficies — por debajo del mínimo legible (4,5) en TODAS. Y es el color
     del texto secundario, que en esta app es casi siempre de 9,5 a 11,5 px:
     direcciones, notas de panel, unidades. Medido, #8A94A8 da 5,32:1 en el peor
     caso y sigue leyéndose como secundario frente a --ink-2 (1,43:1 entre los
     dos), que es lo que hay que conservar: legible, no protagonista. */
  --ink:#EEF2FA;      --ink-2:#A9B2C6;    --ink-3:#8A94A8;
  --ok:#3DD68C;       --warn:#FFB020;     --crit:#FF4D5E;
  /* Color de los marcadores del mapa. Va en variables porque lo usan DOS
     lugares —el marcador y la leyenda de abajo— y al oscurecerlos para que el
     número blanco se leyera, la leyenda se quedó con los tonos viejos: el mapa
     decía un verde y su propia leyenda otro. */
  /* Hay un compromiso medido: cuanto más oscuro el marcador, mejor se lee su
     número blanco pero menos se despega del mapa oscuro. Estos son el punto de
     equilibrio — texto 4,99:1 y 4,58:1, y ~4:1 contra el mapa. */
  --pin-libre:#227F4D; --pin-ocupado:#A16A08; --pin-fuera:#C0303E;
  --sora:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
  --nav:56px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);color:var(--ink);font-family:var(--sora);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:var(--led-bright);text-decoration:none}
a:hover{text-decoration:underline}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ------------------------------- navbar ---------------------------------- */
.nav{
  height:var(--nav);flex:none;display:flex;align-items:center;gap:18px;
  padding:0 20px;background:rgba(14,16,22,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:900;
}
/* ⚠️ El logotipo son DOS letras. El tamaño y el tracking que servían para
   "kilowatt" (8 letras, peso 300, tracking -.04em) dejan a "kw" flaco y sin
   presencia: con menos letras hace falta más cuerpo, no el mismo. */
.logo{
  font-weight:400;font-size:27px;letter-spacing:-.02em;line-height:1;
  background:linear-gradient(96deg,#fff 0%,#fff 40%,var(--led) 72%,var(--led-pale) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-decoration:none;flex:none;
}
.logo:hover{text-decoration:none}
.nav-links{display:flex;gap:4px;flex:1;min-width:0;flex-wrap:wrap}
.nav-links a{
  color:var(--ink-2);font-size:13px;font-weight:500;padding:7px 12px;
  border-radius:8px;white-space:nowrap;
}
.nav-links a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.nav-links a.on{background:rgba(13,107,255,.16);color:var(--led-bright)}
.nav-yo{display:flex;align-items:center;gap:10px;flex:none}
.avatar{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--deep),var(--led));
  font-size:11.5px;font-weight:600;color:#fff;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.nav-yo .quien{font-size:12px;line-height:1.25;text-align:right}
.nav-yo .quien b{display:block;font-size:12.5px;color:var(--ink);font-weight:600}
.nav-yo .quien span{color:var(--ink-3);font-size:10.5px}

/* -------------------------------- botones -------------------------------- */
.btn{
  font-family:var(--sora);font-size:13.5px;font-weight:600;border-radius:9px;
  padding:10px 16px;border:1px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:filter .15s,transform .06s,border-color .15s,background .15s;
  text-decoration:none;line-height:1.2;
}
.btn:hover{text-decoration:none}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--led-bright);outline-offset:2px}
.btn.pri{background:linear-gradient(180deg,var(--led),#0A57D6);color:#fff}
.btn.pri:hover:not(:disabled){filter:brightness(1.12)}
.btn.gh{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.btn.gh:hover:not(:disabled){border-color:var(--led);color:var(--led-bright)}
.btn.stop{background:rgba(255,77,94,.13);border-color:rgba(255,77,94,.45);color:#FF8A94}
.btn.stop:hover:not(:disabled){background:rgba(255,77,94,.22)}
.btn.ok{background:rgba(61,214,140,.13);border-color:rgba(61,214,140,.45);color:var(--ok)}
.btn.ok:hover:not(:disabled){background:rgba(61,214,140,.22)}
.btn.sm{font-size:12px;padding:6px 11px;border-radius:7px}
.btn.full{width:100%}

/* ------------------------------ contenedores ----------------------------- */
main{flex:1;min-height:0;display:flex;flex-direction:column}
.wrap{max-width:1560px;margin:0 auto;padding:22px 20px 40px;width:100%}
.titulo{display:flex;align-items:center;gap:12px;margin:0 0 4px;flex-wrap:wrap}
.titulo h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.sub{color:var(--ink-3);font-size:12.5px;margin:0 0 20px}

.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin-bottom:16px;
}
.panel-h{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--surface-2);border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.panel-h h2{
  margin:0;font-size:10.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2);
}
.panel-h .nota{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.panel-b{padding:16px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:900px){.grid2{grid-template-columns:minmax(0,1fr)}}

/* --------------------------------- KPIs ---------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:11px;margin-bottom:18px}
.kpi{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--led);
  border-radius:10px;padding:13px 15px;min-width:0;
}
.kpi.ok{border-left-color:var(--ok)}
.kpi.warn{border-left-color:var(--warn)}
.kpi.crit{border-left-color:var(--crit)}
.kpi .l{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.kpi .v{font-family:var(--mono);font-size:25px;font-weight:700;margin-top:3px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi.ok .v{color:var(--ok)} .kpi.warn .v{color:var(--warn)} .kpi.crit .v{color:var(--crit)}
.kpi .s{font-size:10.5px;color:var(--ink-3);margin-top:2px}

/* -------------------------------- tablas --------------------------------- */
.tabla-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
table.t th{
  text-align:left;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--ink-3);padding:0 12px 8px 0;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.t td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
table.t tr:last-child td{border-bottom:none}
table.t td.n{font-family:var(--mono);text-align:right;padding-right:16px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.t td.fuerte{color:var(--ink);font-weight:500}
.vacio{padding:26px 0;text-align:center;color:var(--ink-3);font-size:12.5px}

/* -------------------------------- pastillas ------------------------------ */
.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:100px;border:1px solid;letter-spacing:.03em;
  white-space:nowrap;font-family:var(--mono);
}
.pill.ok{color:var(--ok);border-color:rgba(61,214,140,.4);background:rgba(61,214,140,.09)}
.pill.warn{color:var(--warn);border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.09)}
.pill.crit{color:#FF8A94;border-color:rgba(255,77,94,.45);background:rgba(255,77,94,.1)}
.pill.info{color:var(--led-bright);border-color:rgba(103,198,255,.4);background:rgba(103,198,255,.09)}
.pill.gris{color:var(--ink-3);border-color:var(--line);background:var(--surface-2)}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.dot.late{animation:late 1.8s infinite}
@keyframes late{50%{opacity:.25}}

/* --------------------------------- avisos -------------------------------- */
.aviso{
  display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:9px;
  font-size:12.5px;line-height:1.55;margin-bottom:14px;
}
.aviso.info{background:rgba(13,107,255,.08);border:1px solid rgba(13,107,255,.3);color:var(--led-pale)}
.aviso.warn{background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.32);color:#FFD98A}
.aviso.crit{background:rgba(255,77,94,.08);border:1px solid rgba(255,77,94,.35);color:#FFB3B9}
.aviso.ok{background:rgba(61,214,140,.07);border:1px solid rgba(61,214,140,.3);color:#9BE9C4}
.aviso b{color:#fff}

/* ================================ MAPA =================================== */
.mapa-stage{flex:1;min-height:0;display:grid;grid-template-columns:392px minmax(0,1fr)}
@media (max-width:940px){.mapa-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}}
#mapa{width:100%;height:100%;min-height:420px;background:#0B0D13}
.lado{
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
.lado-h{padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.lado-h h1{margin:0 0 3px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.lado-h p{margin:0;color:var(--ink-3);font-size:12px}
.buscador{
  margin:12px 18px 0;display:flex;align-items:center;gap:8px;background:var(--ground);
  border:1px solid var(--line);border-radius:9px;padding:8px 11px;
}
.buscador input{
  flex:1;background:transparent;border:none;color:var(--ink);font-family:var(--sora);
  font-size:13px;outline:none;min-width:0;
}
.buscador input::placeholder{color:var(--ink-3)}
.lista{flex:1;overflow-y:auto;padding:12px 18px 18px;display:flex;flex-direction:column;gap:9px}
.tarjeta{
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:12px 13px;cursor:pointer;transition:border-color .15s,background .15s;
}
.tarjeta:hover{border-color:var(--led);background:var(--surface-3)}
.tarjeta.sel{border-color:var(--led-bright);background:rgba(13,107,255,.1)}
.tarjeta .n{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:2px}
.tarjeta .d{font-size:11px;color:var(--ink-3);line-height:1.4}
.tarjeta .barra{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;align-items:center}
.leyenda{
  display:flex;gap:14px;flex-wrap:wrap;padding:11px 18px;border-top:1px solid var(--line);
  font-size:11px;color:var(--ink-3);background:var(--surface-2);
}
.leyenda i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}

/* ------------------------- detalle de un punto --------------------------- */
.det-h h2{margin:0 0 4px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.det-h p{margin:0;color:var(--ink-2);font-size:12.5px;line-height:1.55}
.det-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}

.det-sec{border-top:1px solid var(--line);padding-top:15px;margin-top:4px}
.det-sec h3{
  margin:0 0 11px;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
.det-vacio{margin:0;color:var(--ink-3);font-size:11.5px;line-height:1.55}

.det-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
.det-fotos img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;
  border:1px solid var(--line);
}
.det-fotos a:hover img{border-color:var(--led)}

.det-eq{
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;margin-bottom:9px;
}
.det-eq-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.det-eq-h b{font-family:var(--mono);font-size:12px;color:var(--ink)}
.det-eq-kw{
  margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--led-bright);
  white-space:nowrap;
}
.det-eq-s{font-size:10.5px;color:var(--ink-3);margin-top:3px}

.det-con{
  display:flex;align-items:center;gap:9px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--line-soft);
}
.det-con-n{
  width:23px;height:23px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--surface-3);font-family:var(--mono);font-size:11px;
  font-weight:700;color:var(--ink-2);
}
.det-con-d{flex:1;min-width:0}
.det-con-d b{display:block;font-size:11.5px;font-weight:600;color:var(--ink)}
.det-con-d span{font-family:var(--mono);font-size:10px;color:var(--ink-3)}

.det-uso{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.det-uso div{
  background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  padding:10px 8px;text-align:center;min-width:0;
}
.det-uso b{
  display:block;font-family:var(--mono);font-size:17px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.det-uso span{display:block;font-size:9.5px;color:var(--ink-3);margin-top:2px;line-height:1.3}

/* marcadores Leaflet */
.marca{
  width:30px;height:30px;border-radius:50% 50% 50% 6px;transform:rotate(-45deg);
  border:2px solid #fff;display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(0,0,0,.55);
}
.marca b{transform:rotate(45deg);font-family:var(--mono);font-size:11px;font-weight:700;color:#fff}
/* Los tres tonos se oscurecieron para que el número BLANCO de adentro se lea:
   el verde daba 3,00:1 (justo en el límite) y el ámbar 2,80:1 (por debajo). */
.marca.libre{background:var(--pin-libre)}
.marca.ocupado{background:var(--pin-ocupado)}
.marca.fuera{background:var(--pin-fuera)}
.marca b{text-shadow:0 1px 2px rgba(0,0,0,.45)}   /* el número, siempre legible */
/* ⚠️⚠️ TODO lo de Leaflet va prefijado con `html`.
   `leaflet.css` se carga desde el CDN en el `extra_head` de la pantalla, o sea
   DESPUÉS de esta hoja: a igual especificidad ganaba él y el emergente salía
   BLANCO en una app oscura — con el nombre del punto en blanco sobre blanco,
   invisible. Con `html` delante la especificidad sube a (0,1,1) y gana esta,
   sin depender del orden de carga. Es la misma regla que el proyecto ya tiene
   para el skin de Select2. */
html .leaflet-popup-content-wrapper{
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:13px;box-shadow:0 18px 44px -10px rgba(0,0,0,.85);
  padding:0;overflow:hidden;
}
html .leaflet-popup-tip{
  background:var(--surface);border:1px solid var(--line);box-shadow:none;
}
html .leaflet-popup-content{
  margin:0;padding:15px 16px 16px;font-family:var(--sora);font-size:12.5px;
  width:262px!important;line-height:1.5;
}
html .leaflet-popup-content h4{
  margin:0 0 3px;font-size:14.5px;color:var(--ink);font-weight:600;
  letter-spacing:-.01em;line-height:1.25;padding-right:16px;
}
html .leaflet-container a.leaflet-popup-close-button{
  color:var(--ink-3);width:26px;height:26px;font-size:17px;padding:5px 0 0 0;
  transition:color .15s;
}
html .leaflet-container a.leaflet-popup-close-button:hover{color:var(--ink);background:none}
html .leaflet-popup-content-wrapper a{color:var(--led-bright)}

/* Controles y créditos, en el mismo mundo oscuro.
   ⚠️ Acá hace falta `.leaflet-container` además del `html`: Leaflet declara el
   fondo de los créditos con ese selector delante, que pesa más que un `html`
   solo. El síntoma era una cajita BLANCA en la esquina de un mapa oscuro — y el
   `color` sí me lo tomaba, así que "parecía" que mi regla estaba aplicando. */
html .leaflet-container .leaflet-control-attribution{
  background:rgba(14,16,22,.88);color:var(--ink-3);
  font-size:10px;padding:2px 7px;border-radius:6px 0 0 0;
}
html .leaflet-container .leaflet-control-attribution a{color:var(--ink-2)}
html .leaflet-container .leaflet-control-attribution span{color:var(--ink-3)}
html .leaflet-container .leaflet-control-attribution svg{opacity:.55}
html .leaflet-bar{border:none;box-shadow:0 4px 14px rgba(0,0,0,.5)}
html .leaflet-bar a{
  background:var(--surface-2);color:var(--ink-2);border-bottom-color:var(--line);
  width:32px;height:32px;line-height:32px;font-size:17px;
}
html .leaflet-bar a:first-child{border-radius:9px 9px 0 0}
html .leaflet-bar a:last-child{border-radius:0 0 9px 9px}
html .leaflet-bar a:hover{background:var(--surface-3);color:#fff}
html .leaflet-bar a.leaflet-disabled{background:var(--surface);color:#3a4152}

/* Sub-bloques del emergente */
.pop-dir{color:var(--ink-3);font-size:11.5px;line-height:1.5;margin-bottom:10px}
.pop-pills{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.pop-pills .pill{font-size:9.5px;padding:3px 8px}

/* Los dos botones reparten el ancho en partes iguales. `min-width:0` porque un
   item de flex no se encoge por debajo de su contenido, y sin eso «Cómo llegar»
   empujaba al vecino fuera del emergente. */
.pop-acciones{display:flex;gap:7px}
.pop-acciones>*{flex:1 1 0;min-width:0;text-align:center;white-space:nowrap}

/* --- Lo que la persona HACE: enchufar, recargar, terminar --------------- */

/* El botón ocupa el lugar de la pastilla de estado, así que hereda su ancho y
   la fila de conectores no se mueve al pasar de "Libre" a "Cargar acá". */
.det-con .kw-cargar,
.det-con .kw-terminar{flex:none;white-space:nowrap}

/* El conector donde está MI carga, señalado en la ficha y en la lista: entre
   varios conectores iguales hay que poder ver de un vistazo cuál es el mío. */
.det-con.es-mio{
  background:rgba(61,214,140,.07);border-color:rgba(61,214,140,.30);
}
.det-con.es-mio .det-con-n{background:rgba(61,214,140,.18);color:var(--ok)}
.tarjeta.cargando-aqui{border-color:rgba(61,214,140,.42)}

.pasos{margin:0;padding-left:19px;color:var(--ink-2);font-size:13px;line-height:1.85}
.pasos>li{margin-bottom:10px}
.pasos>li:last-child{margin-bottom:0}
/* `>b` y no `b`: sin el hijo directo, la regla también agarra los resaltados de
   adentro del texto y los vuelve bloque, partiendo la frase en tres renglones. */
.pasos>li>b{color:#fff}
.pasos-acc{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}

/* Pie de la carga en vivo: el texto explica y el botón cierra. En pantalla
   angosta el botón baja solo en vez de estrujar la explicación. */
.vivo-pie{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:9px;
}
.vivo-pie>span{flex:1 1 240px;min-width:0;font-size:10.5px;color:var(--led-pale)}

/* ==================== EMERGENTE DE LA CARGA EN CURSO ===================== */

.kwc-bg{
  position:fixed;inset:0;z-index:1200;                 /* encima del mapa de Leaflet */
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,6,10,.72);backdrop-filter:blur(3px);
  animation:kwc-entra .16s ease-out;
}
@keyframes kwc-entra{from{opacity:0}to{opacity:1}}

.kwc{
  width:100%;max-width:430px;
  background:linear-gradient(180deg,rgba(13,107,255,.13),transparent 42%),var(--surface-2);
  border:1px solid rgba(13,107,255,.34);border-radius:16px;padding:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.kwc-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px}
/* `>h3` con hijo directo y sin margen: el h3 por defecto separa tanto que la
   pastilla de estado quedaba flotando lejos de su propio título. */
.kwc-h>h3{margin:0;font-size:16px;color:#fff;font-weight:600}

/* Los tres números en columnas iguales. `minmax(0,1fr)` para que un valor largo
   ($100.000) no le robe el ancho a los otros dos. */
.kwc-num{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.kwc-num>div{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:11px 10px;text-align:center;
}
.kwc-num span{
  display:block;font-family:var(--mono);font-size:19px;color:var(--led-bright);
  font-weight:700;line-height:1.15;
}
.kwc-num small{display:block;margin-top:4px;font-size:9.5px;color:var(--ink-3);line-height:1.3}

.kwc-barra{height:7px;background:var(--surface);border-radius:100px;overflow:hidden}
.kwc-barra>i{
  display:block;height:100%;border-radius:100px;
  background:linear-gradient(90deg,var(--led),var(--led-bright));
  transition:width .5s ease-out;
}
.kwc-nota{margin:9px 0 0;font-size:10.5px;color:var(--ink-3);line-height:1.55}
.kwc-nota b{color:var(--ink-2)}

.kwc-pie{display:flex;gap:8px;margin-top:16px}
.kwc-pie>*{flex:1 1 0;min-width:0;white-space:nowrap}

/* Cinta para volver al emergente cuando se cerró con la carga andando. */
.kw-cinta{
  position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:1150;
  display:flex;align-items:center;gap:9px;
  background:var(--surface-2);border:1px solid rgba(61,214,140,.42);
  border-radius:100px;padding:9px 17px;cursor:pointer;
  color:var(--ink);font-family:inherit;font-size:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:border-color .15s,transform .06s;
}
.kw-cinta:hover{border-color:var(--ok)}
.kw-cinta:active{transform:translateX(-50%) translateY(1px)}
.kw-cinta b{font-weight:600}
.kw-cinta span{color:var(--led-bright);font-size:11px}

/* ================================ ENTRAR ================================= */
.entrada{
  flex:1;display:grid;place-items:center;padding:34px 20px;
  background:
    radial-gradient(70% 55% at 50% 0%,rgba(13,107,255,.16),transparent 62%),
    var(--ground);
}
.caja{width:100%;max-width:414px}
.caja .marca{
  width:auto;height:auto;transform:none;border:none;box-shadow:none;display:block;
  text-align:center;margin-bottom:24px;
}
.caja .marca .logo{font-size:66px;font-weight:300;letter-spacing:-.03em}
.caja .marca p{margin:10px 0 0;color:var(--ink-3);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase}
.tarjeta-form{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;
}
.tarjeta-form h1{margin:0 0 3px;font-size:19px;font-weight:600}
.tarjeta-form .p{margin:0 0 20px;color:var(--ink-3);font-size:12.5px}
.campo{margin-bottom:14px}
.campo label{
  display:block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:6px;
}
.campo input{
  width:100%;background:var(--ground);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;color:var(--ink);font-family:var(--sora);font-size:14px;outline:none;
  transition:border-color .15s;
}
.campo input:focus{border-color:var(--led)}
.campo input::placeholder{color:var(--ink-3)}
.separa{display:flex;align-items:center;gap:12px;margin:19px 0;color:var(--ink-3);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase}
.separa::before,.separa::after{content:'';flex:1;height:1px;background:var(--line)}
.btn-google{
  width:100%;background:#fff;color:#1F1F1F;border:none;font-weight:600;font-size:14px;
  border-radius:9px;padding:11px;display:flex;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;text-decoration:none;
}
.btn-google:hover{filter:brightness(.94);text-decoration:none;color:#1F1F1F}
.btn-google svg{width:18px;height:18px;flex:none}
.pie-caja{text-align:center;margin-top:18px;font-size:12.5px;color:var(--ink-3)}
.demo{
  margin-top:16px;background:var(--surface-2);border:1px dashed var(--line);border-radius:9px;
  padding:11px 13px;font-size:11.5px;color:var(--ink-3);line-height:1.6;
}
.demo b{color:var(--ink-2)}
.demo code{font-family:var(--mono);color:var(--led-bright);font-size:11px}

/* ============================== SESIÓN EN VIVO =========================== */
.vivo{
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(13,107,255,.24),transparent 60%),
    linear-gradient(160deg,var(--deep-2),#0A0D18);
  border:1px solid rgba(13,107,255,.3);border-radius:14px;padding:20px;margin-bottom:16px;
}
.vivo-h{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.vivo-h .t{font-size:15px;font-weight:600}
.vivo-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.vivo-g .l{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--led-pale);font-weight:600}
.vivo-g .v{font-family:var(--mono);font-size:22px;font-weight:700;margin-top:3px;
  font-variant-numeric:tabular-nums}
.barra-prog{height:6px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:14px}
.barra-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--led),var(--led-bright));
  border-radius:4px;transition:width .6s}

/* ------------------------------ mini gráfica ----------------------------- */
/* `justify-content:flex-start` + tope de ancho por barra: con `flex:1` a secas,
   una cuenta con UN solo mes pintaba una barra de 1.400 px de ancho que se leía
   como un bloque de color, no como un gráfico. Con muchos meses el tope no se
   alcanza y el reparto es el de siempre. */
.barras{display:flex;align-items:flex-end;justify-content:flex-start;
  gap:7px;height:132px;padding-top:8px}
.barras .b{flex:1 1 0;min-width:0;max-width:120px;
  display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:6px;height:100%}
.barras .b i{
  display:block;width:100%;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--led-bright),var(--led));min-height:3px;
  transition:height .4s;
}
.barras .b span{font-size:9.5px;color:var(--ink-3);font-family:var(--mono);white-space:nowrap}
.barras .b em{font-size:10px;color:var(--ink-2);font-family:var(--mono);font-style:normal}

/* --------------------------------- varios -------------------------------- */
.filtros{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.chip{
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
  border-radius:100px;padding:6px 13px;font-size:12px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.chip:hover{border-color:var(--led);color:var(--ink)}
.chip.on{background:rgba(13,107,255,.16);border-color:var(--led);color:var(--led-bright);font-weight:600}
.pie{
  border-top:1px solid var(--line);padding:16px 20px;color:var(--ink-3);font-size:11.5px;
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;background:var(--surface);
}
/* El separador iba en --line (1,23:1): literalmente invisible, y su trabajo es
   separar. Va en el gris de texto, atenuado. */
.pie .sep{color:var(--ink-3);opacity:.5}
.err-pag{flex:1;display:grid;place-items:center;text-align:center;padding:60px 20px}
.err-pag .c{font-family:var(--mono);font-size:64px;font-weight:700;color:#2E384C;line-height:1}

.toast{
  position:fixed;right:18px;bottom:18px;z-index:2000;display:flex;flex-direction:column;gap:9px;
  max-width:min(430px,calc(100vw - 36px));
}
.toast div{
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--led);
  border-radius:9px;padding:11px 14px;font-size:12.5px;color:var(--ink);
  box-shadow:0 12px 30px rgba(0,0,0,.55);animation:entra .22s ease-out;
}
.toast div.ok{border-left-color:var(--ok)}
.toast div.err{border-left-color:var(--crit)}
@keyframes entra{from{opacity:0;transform:translateY(9px)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}