/* Panel del Dinero v4 — "Centro de control": neón azul, acentos rojo Treviño Tuning, 💰 dorado.
   Escenario fijo 1920×1080 escalado al viewport (letterbox). */
:root {
  --azul: #2fa8ff; --cian: #39e6ff; --azul2: #1b5cff; --rojo: #e10600; --rojo2: #ff2a2a; --oro: #f5c542;
  --verde: #36e27f; --ambar: #ffb020; --perdida: #ff5a5a; --morado: #a875ff;
  --txt: #eef5ff; --txt2: #a9bdd6; --txt3: #6c7f99;
  --cond: "Bahnschrift", "Barlow Condensed", "Roboto Condensed", "Arial Narrow", "Archivo Narrow", sans-serif;
  --vidrio: rgba(4, 12, 26, .93);
}
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
body { font-family: Inter, "Segoe UI", Roboto, system-ui, sans-serif; color: var(--txt); -webkit-font-smoothing: antialiased; }
body.video, body.video * { cursor: none !important; }
#visor { position: fixed; inset: 0; overflow: hidden; background: #000; }
#escenario { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; overflow: hidden; background: #02050c; transform-origin: center center; transform: translate(-50%, -50%); }
#camara { position: absolute; inset: 0; will-change: transform; }
body:not(.listo) #camara, body:not(.listo) .hud, body:not(.listo) .titulo, body:not(.listo) .kpi, body:not(.listo) .ticker, body:not(.listo) .menu { visibility: hidden; }
.plano { position: absolute; inset: 0; will-change: transform; }
.arte { position: absolute; left: 0; top: 0; display: block; user-select: none; pointer-events: none; }
.plano > .arte:not(.capa) { width: 1920px; height: 1080px; }
#fx-lejos, #fx-piso, #fx { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
#fx-piso, #fx { mix-blend-mode: screen; }
#fx { z-index: 30; }
#velo-intro { position: absolute; inset: 0; z-index: 90; pointer-events: none; background: #000; }
.verde, .pos { color: var(--verde) !important; } .rojo, .neg { color: var(--perdida) !important; } .muted { color: var(--txt3); }

/* ---------------- vidrio neón azul (esquinas cortadas, glow que respeta el corte) ---------------- */
.vidrio, .chip-est, .holo-panel, .consenso, .kpi, .seccion, .toast {
  --c: var(--azul); --corte: 9px; position: absolute; isolation: isolate; box-sizing: border-box;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 80%, transparent));
}
.chip-est::before, .holo-panel::before, .consenso::before, .kpi::before, .seccion::before, .toast::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 25%, #000) 50%, var(--c));
  clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte));
}
.chip-est::after, .holo-panel::after, .consenso::after, .kpi::after, .seccion::after, .toast::after {
  content: ""; position: absolute; inset: 1.4px; z-index: -1; background: linear-gradient(170deg, #071425, #030913);
  clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte));
}
body:not(.sin-anim) .chip-est, body:not(.sin-anim) .kpi { animation: pulsoNeon 5s ease-in-out infinite; }
@keyframes pulsoNeon { 50% { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--c) 95%, transparent)); } }
@keyframes parpadeo { 50% { opacity: .3; } }

/* ---------------- Título y HUD ---------------- */
.titulo { display: flex; align-items: center; gap: 14px; box-sizing: border-box; padding: 0 20px; z-index: 50;
  background: linear-gradient(90deg, #030812 70%, rgba(3, 8, 18, 0)); }
.logo-tt { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 11px; font: 900 italic 21px var(--cond); letter-spacing: -1px;
  background: linear-gradient(140deg, var(--rojo2), #7a0400); box-shadow: 0 0 18px rgba(255, 42, 42, .7); color: #fff; }
.titulo h1 { margin: 0; font: 800 36px var(--cond); letter-spacing: 1.5px; white-space: nowrap; color: #fff; text-shadow: 0 0 12px rgba(120, 190, 255, .35); }
.titulo h1 .punto { color: var(--rojo2); text-shadow: 0 0 10px var(--rojo2); }
.titulo h1 em { font-style: normal; color: var(--cian); text-shadow: 0 0 10px rgba(57, 230, 255, .85), 0 0 24px rgba(47, 168, 255, .5); }
.hud { z-index: 50; display: flex; align-items: center; justify-content: flex-end; gap: 9px; box-sizing: border-box; font-size: 12px; color: var(--txt2);
  background: linear-gradient(270deg, #030812 75%, rgba(3, 8, 18, 0)); padding-right: 6px; }
.hud b { color: var(--txt); }
.reloj { font-family: var(--cond); font-size: 14px; letter-spacing: 1px; }
.reloj b { font-size: 17px; font-variant-numeric: tabular-nums; }
.toggle { display: flex; background: rgba(255, 255, 255, .05); border: 1px solid rgba(47, 168, 255, .45); border-radius: 999px; padding: 2px; }
.toggle button { border: 0; background: transparent; padding: 3px 10px; border-radius: 999px; cursor: pointer; color: var(--txt2); font: 600 12px var(--cond); letter-spacing: 1px; text-transform: uppercase; }
.toggle button.activo { background: var(--azul2); color: #fff; box-shadow: 0 0 10px rgba(47, 168, 255, .7); }
.toggle button[data-modo="real"].activo { background: var(--rojo); box-shadow: 0 0 10px rgba(225, 6, 0, .7); }
.btn-hud { border: 1px solid rgba(47, 168, 255, .4); background: rgba(255, 255, 255, .04); color: var(--txt2); border-radius: 999px; padding: 4px 10px; cursor: pointer; font: 600 11.5px var(--cond); letter-spacing: 1px; text-transform: uppercase; }
.btn-hud:hover { color: #fff; border-color: var(--cian); }
.en-vivo { display: inline-flex; align-items: center; gap: 8px; font: 800 19px var(--cond); letter-spacing: 1.5px; color: #fff; padding: 2px 4px 2px 10px; }
.en-vivo i { width: 13px; height: 13px; border-radius: 50%; background: var(--rojo2); box-shadow: 0 0 10px var(--rojo2), 0 0 22px var(--rojo); }
body:not(.sin-anim) .en-vivo i { animation: latido 1.3s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(.7); opacity: .55; } }
.franja-prueba { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 60; padding: 4px 16px; border-radius: 8px; font: 900 16px var(--cond); letter-spacing: 2px; color: #111;
  background: repeating-linear-gradient(-45deg, #ffcc00 0 16px, #ffb000 16px 32px); box-shadow: 0 0 22px rgba(255, 204, 0, .6); white-space: nowrap; }
.franja-prueba[hidden] { display: none; }
body.modo-prueba #escenario { box-shadow: inset 0 0 0 5px #ffcc00; }

/* ---------------- Muro de video ---------------- */
.pantalla { box-sizing: border-box; overflow: hidden; background: #020810; cursor: pointer; border: 2px solid #0a1424; }
.pantalla canvas, .holo-tenis canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tv-logo { position: absolute; left: 8px; top: 7px; display: flex; align-items: center; gap: 5px; font: 800 15px var(--cond); letter-spacing: 1px; text-transform: uppercase;
  background: rgba(0, 0, 0, .6); padding: 1px 8px 1px 4px; border-radius: 4px; border-left: 3px solid var(--bot); }
.tv-envivo { position: absolute; right: 8px; top: 7px; font: 800 13px var(--cond); letter-spacing: 1px; color: #fff; background: var(--rojo); padding: 1px 8px; border-radius: 3px; }
body:not(.sin-anim) .tv-envivo { animation: parpadeo 1.6s infinite; }
.tv-pie { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 9px;
  background: linear-gradient(90deg, rgba(1, 6, 14, .95), rgba(4, 14, 30, .9)); border-top: 2px solid var(--bot); white-space: nowrap; overflow: hidden; }
.tv-etq { font: 800 13px var(--cond); letter-spacing: 1px; text-transform: uppercase; color: var(--cian); flex: none; }
.tv-txt { overflow: hidden; text-overflow: ellipsis; color: var(--txt); font: 600 15px var(--cond); letter-spacing: .3px; flex: 1; }
.tv-cuota { flex: none; font: 700 13px var(--cond); color: var(--txt2); }
.tv-cuota b { border: 1px solid rgba(54, 226, 127, .55); border-radius: 3px; padding: 0 5px; color: var(--txt); margin-left: 3px; }

/* ---------------- Estación holográfica de Tenis (lounge) ---------------- */
.holo-tenis { box-sizing: border-box; overflow: hidden; cursor: pointer; z-index: 4; opacity: .9; border: 2px solid rgba(57, 230, 255, .8);
  box-shadow: 0 0 18px rgba(57, 230, 255, .6), inset 0 0 20px rgba(57, 230, 255, .3); background: rgba(2, 16, 30, .6); }
.holo-tenis::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(57, 230, 255, .14) 0 1px, transparent 1px 4px); }
.holo-tenis .tv-pie { height: 26px; }
.holo-tenis .tv-txt { font-size: 13px; }

/* ---------------- Chips de estación ---------------- */
.chip-est { --c: color-mix(in srgb, var(--bot) 55%, var(--azul)); cursor: pointer; z-index: 8; padding: 6px 10px; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; transition: transform .2s; overflow: hidden; }
.chip-est:hover { transform: translateY(-3px); }
.chip-est .ce-cab { display: flex; align-items: center; gap: 9px; min-width: 0; }
.chip-est .ce-cab > div { min-width: 0; flex: 1; }
.chip-est .ce-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; font-size: 22px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bot) 35%, transparent), transparent 70%); }
.chip-est .ce-nom { font: 800 17px var(--cond); letter-spacing: 1px; text-transform: uppercase; line-height: 1; }
.chip-est .ce-est { white-space: nowrap; display: flex; align-items: center; gap: 6px; font: 600 13px var(--cond); letter-spacing: .5px; color: var(--txt2); margin-top: 2px; }
.chip-est .ce-est i { width: 9px; height: 9px; border-radius: 50%; background: var(--txt3); }
.ce-est.analizando i { background: var(--cian); box-shadow: 0 0 8px var(--cian); }
body:not(.sin-anim) .ce-est.analizando i { animation: parpadeo 1.4s infinite; }
.ce-est.al-dia i { background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.ce-est.stop i { background: var(--rojo2); box-shadow: 0 0 9px var(--rojo2); }
.ce-est.stop { color: #ffd0cc; }
.ce-est.sin i { background: #4a5a70; }
.chip-est .ce-sub { font: 500 11px Inter, sans-serif; color: var(--txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.chip-est .ce-sub b { color: var(--txt); font-weight: 700; }
.chip-dinero { --c: var(--oro); }
.chip-dinero[data-est="riesgo"] { --c: #ff5a4a; }
.chip-dinero .ce-lin { display: flex; justify-content: space-between; gap: 6px; font: 600 11.5px Inter, sans-serif; color: var(--txt2); white-space: nowrap; }
.chip-dinero .ce-lin b { color: var(--txt); font-variant-numeric: tabular-nums; }
.chip-dinero .barra { height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 2px 0; }
.chip-dinero .barra i { display: block; height: 100%; background: linear-gradient(90deg, #a06a00, var(--oro)); box-shadow: 0 0 6px var(--oro); min-width: 2px; }
.stop-pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 99px; font: 700 10.5px Inter, sans-serif; line-height: 16px; }
.stop-pill.on { color: #fff; background: rgba(225, 6, 0, .9); box-shadow: 0 0 9px rgba(225, 6, 0, .8); }
.stop-pill.off { color: var(--txt2); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }

/* ---------------- Robots sentados ---------------- */
.sentado { position: absolute; z-index: 6; transform: translateX(-50%); transition: opacity .4s; cursor: pointer; }
.sentado img { height: 100%; display: block; position: relative; z-index: 1; filter: drop-shadow(0 0 9px color-mix(in srgb, var(--bot) 70%, transparent)) drop-shadow(0 4px 5px rgba(0, 0, 0, .7)); }
.sentado .sombra { position: absolute; left: 10%; right: 10%; bottom: -8px; height: 16px; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .75), transparent 70%); }
.sentado.fuera { opacity: 0; pointer-events: none; }
/* mini-pantallas holográficas doradas de 💰 en DATOS y RIESGO */
.puesto-dinero { position: absolute; z-index: 6; width: 92px; height: 70px; margin: -60px 0 0 -46px; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1.5px solid rgba(245, 197, 66, .85); border-radius: 6px;
  background: linear-gradient(180deg, rgba(60, 40, 6, .55), rgba(30, 20, 2, .35)); box-shadow: 0 0 16px rgba(245, 197, 66, .55), inset 0 0 14px rgba(245, 197, 66, .3);
  transform: perspective(300px) rotateX(10deg); }
.puesto-dinero::after { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 220, 120, .16) 0 1px, transparent 1px 4px); }
.puesto-dinero::before { content: ""; position: absolute; left: 30%; right: 30%; bottom: -26px; height: 26px; pointer-events: none;
  background: linear-gradient(0deg, rgba(245, 197, 66, .35), transparent); clip-path: polygon(40% 100%, 60% 100%, 100% 0, 0 0); }
.puesto-dinero span { font: 800 10px var(--cond); letter-spacing: 1px; color: #ffe39a; text-shadow: 0 0 6px rgba(245, 197, 66, .9); }
.ic-holo { width: 54px; height: 40px; fill: none; stroke: #ffd56a; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(245, 197, 66, .9)); }
.ic-holo circle { fill: #fff2c0; stroke: none; }
.ic-holo .aguja { stroke: #ff5a4a; stroke-width: 2.4; stroke-linecap: round; transform-origin: 32px 28px; transform: rotate(var(--giro, -80deg)); transition: transform 1.2s; }
.ic-holo .arco-m { stroke: #ffb020; }
body:not(.sin-anim) .ic-holo .flujo circle { animation: fluye 1.6s linear infinite; }
.ic-holo .flujo circle:nth-child(2) { animation-delay: -.5s; } .ic-holo .flujo circle:nth-child(3) { animation-delay: -1s; }
.ic-holo .flujo circle:nth-child(4) { animation-delay: -.3s; animation-direction: reverse; } .ic-holo .flujo circle:nth-child(5) { animation-delay: -1.1s; animation-direction: reverse; }
@keyframes fluye { 0% { transform: translateY(-10px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
body:not(.sin-anim) .puesto-dinero { animation: holoParpadeo 6s steps(1) infinite; }
@keyframes holoParpadeo { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .55; } 49% { opacity: 1; } 83% { opacity: .8; } 84% { opacity: 1; } }

/* ---------------- Mesa holográfica con 💰 ---------------- */
#mesa-fx { position: absolute; z-index: 3; pointer-events: none; }
#mesa-fx .anillo { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(57, 230, 255, .55); box-shadow: 0 0 14px rgba(57, 230, 255, .35); }
#mesa-fx .a2 { inset: 12%; border-style: dotted; border-color: rgba(47, 168, 255, .6); }
#mesa-fx .a3 { inset: -5%; border: 1px solid rgba(57, 230, 255, .25); }
body:not(.sin-anim) #mesa-fx .a1 { animation: rotar 14s linear infinite; }
body:not(.sin-anim) #mesa-fx .a2 { animation: rotar 9s linear infinite reverse; }
@keyframes rotar { to { transform: rotate(360deg); } }
.jefe { position: absolute; z-index: 5; cursor: pointer; }
.jefe-cuerpo { position: absolute; inset: 0; transform-origin: 50% 80%; will-change: transform; }
.jefe-cuerpo img { width: 100%; height: 100%; display: block; image-rendering: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, rgba(0, 0, 0, .35) 93%, transparent); mask-image: linear-gradient(180deg, #000 80%, rgba(0, 0, 0, .35) 93%, transparent);
  filter: drop-shadow(0 0 10px rgba(57, 230, 255, .6)) drop-shadow(0 0 22px rgba(245, 197, 66, .45)); }
body:not(.sin-anim) .jefe-cuerpo { animation: holoJefe 7s steps(1) infinite; }
@keyframes holoJefe { 0%, 100% { opacity: 1; } 31% { opacity: 1; } 32% { opacity: .78; } 33% { opacity: 1; } 34% { opacity: .9; } 35% { opacity: 1; } 77% { opacity: .85; } 78% { opacity: 1; } }
/* haz holográfico desde el disco hacia 💰, brillo dorado en el disco y halo detrás */
#haz { position: absolute; z-index: 4; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(0deg, rgba(120, 220, 255, .55), rgba(57, 200, 255, .22) 45%, rgba(245, 197, 66, .12) 80%, transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 9px); }
body:not(.sin-anim) #haz { animation: respiraHaz 3.2s ease-in-out infinite; }
@keyframes respiraHaz { 50% { opacity: .65; } }
#mesa-fx .brillo-disco { position: absolute; left: 22%; right: 22%; top: 24%; bottom: 24%; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 215, 110, .65), rgba(245, 170, 40, .28) 50%, transparent); }
body:not(.sin-anim) #mesa-fx .brillo-disco { animation: respiraHaz 3.2s ease-in-out infinite reverse; }
#halo-jefe { position: absolute; z-index: 2; pointer-events: none; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 214, 120, .35), rgba(57, 180, 255, .18) 50%, transparent); }
body.cal-baja #haz, body.cal-baja .jefe-cuerpo { animation: none; }
.jefe .scan { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: repeating-linear-gradient(0deg, rgba(57, 230, 255, .22) 0 1px, transparent 1px 4px);
  -webkit-mask-image: url(../assets/personajes/dinero-flotante.png); mask-image: url(../assets/personajes/dinero-flotante.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
body:not(.sin-anim) .jefe .scan { animation: scan 2.6s linear infinite; }
@keyframes scan { to { background-position: 0 40px; } }
.jefe .ojo { position: absolute; width: 13%; height: 11%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(170, 255, 150, .95), rgba(60, 255, 80, .45) 40%, transparent 70%); mix-blend-mode: screen; opacity: .35; }
#aprobado { position: absolute; left: 50%; top: 36%; width: 0; height: 0; pointer-events: none; }
#aprobado i { position: absolute; left: -100px; top: -100px; width: 200px; height: 200px; border-radius: 50%; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle, var(--flash, rgba(140, 255, 150, .7)), transparent 68%); }
#aprobado b { position: absolute; left: -22px; top: -150px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; opacity: 0;
  font: 900 28px var(--cond); color: #04150a; background: var(--flash-s, #3dff7f); box-shadow: 0 0 22px var(--flash-s, #3dff7f); }
.holo-panel { --c: var(--oro); z-index: 8; padding: 5px 12px; cursor: pointer; }
.holo-panel::after { background: linear-gradient(170deg, rgba(10, 20, 36, .96), rgba(3, 9, 19, .97)); }
.hp-cab { display: flex; justify-content: space-between; align-items: center; font: 800 14px var(--cond); letter-spacing: 1.5px; color: var(--oro); }
.hp-cab span { font: 700 11px var(--cond); letter-spacing: 1px; color: var(--ambar); text-transform: uppercase; }
.hp-cab span.real { color: var(--rojo2); }
.hp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 3px; }
.hp-kpis span { display: block; font: 600 10.5px var(--cond); letter-spacing: 1px; text-transform: uppercase; color: var(--txt3); }
.hp-kpis b { font: 800 21px var(--cond); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------- Sala Consenso ---------------- */
.consenso { --c: var(--cian); z-index: 8; padding: 7px 11px; cursor: pointer; }
.cs-cab { display: flex; justify-content: space-between; align-items: center; font: 800 14px var(--cond); letter-spacing: 2px; color: var(--cian); }
.cs-dec { font: 800 12px var(--cond); letter-spacing: 1px; padding: 1px 8px; border-radius: 4px; background: rgba(255, 255, 255, .07); color: var(--txt2); }
.cs-dec.aprobado { background: rgba(54, 226, 127, .2); color: var(--verde); border: 1px solid rgba(54, 226, 127, .5); }
.cs-dec.rechazado { background: rgba(255, 42, 42, .2); color: #ff8b80; border: 1px solid rgba(255, 42, 42, .5); }
.cs-dec.analisis { background: rgba(57, 230, 255, .14); color: var(--cian); border: 1px solid rgba(57, 230, 255, .4); }
.cs-cuerpo { font-size: 12px; color: var(--txt2); margin-top: 4px; line-height: 1.35; }
.cs-cuerpo b { color: var(--txt); }
.cs-cuerpo .cs-pick { font: 700 15px var(--cond); color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .3px; }
.cs-cuerpo .cs-mot { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--txt3); font-size: 11px; }
.consenso.flash-ok { filter: drop-shadow(0 0 16px var(--verde)); }
.consenso.flash-no { filter: drop-shadow(0 0 16px var(--rojo2)); }

/* ---------------- KPIs inferiores ---------------- */
.kpi { display: flex; align-items: center; gap: 14px; padding: 6px 16px; z-index: 50; --corte: 10px; }
.kpi.alerta { --c: var(--rojo2); }
.kpi.consenso-k { --c: var(--verde); }
.kpi-ic { font-size: 30px; filter: drop-shadow(0 0 8px var(--c)); }
.kpi-et { display: block; font: 600 14px var(--cond); letter-spacing: .5px; color: var(--txt2); }
.kpi-v { font: 800 33px var(--cond); font-variant-numeric: tabular-nums; line-height: 1; }
.spark { flex: 1; height: 44px; position: relative; }
.spark svg { width: 100%; height: 100%; display: block; }
.spark .vacio-s { position: absolute; inset: 0; display: grid; place-items: center; font: 600 11px var(--cond); color: var(--txt3); letter-spacing: .5px; text-align: center; }
.barra-p { transition: transform .9s cubic-bezier(.2, .8, .2, 1); transform-box: fill-box; transform-origin: bottom; }

/* ---------------- Menú compacto ---------------- */
.menu { z-index: 50; display: flex; flex-direction: column; gap: 5px; }
.menu button { display: flex; align-items: center; gap: 9px; border: 1px solid rgba(47, 168, 255, .35); background: rgba(3, 10, 22, .88); color: var(--txt); cursor: pointer; text-align: left;
  padding: 6px 9px; border-radius: 8px; font: 600 13.5px var(--cond); letter-spacing: .8px; text-transform: uppercase; box-shadow: 0 0 10px rgba(47, 168, 255, .15); transition: transform .15s, border-color .15s; }
.menu button:hover, .menu button.activo { transform: translateX(3px); border-color: var(--cian); box-shadow: 0 0 14px rgba(57, 230, 255, .45); }
.menu .ic { width: 24px; height: 24px; display: grid; place-items: center; font-size: 13px; border-radius: 6px; border: 1px solid rgba(57, 230, 255, .7); box-shadow: 0 0 7px rgba(57, 230, 255, .5); }
.menu .cuenta { margin-left: auto; background: var(--rojo); border-radius: 99px; padding: 0 7px; font-size: 12px; box-shadow: 0 0 8px var(--rojo); }
.enlace-v3 { align-self: flex-start; background: rgba(3, 10, 22, .85); border-radius: 6px; margin-top: 3px; font: 600 11.5px Inter, sans-serif; color: var(--txt3); text-decoration: none; padding: 2px 4px; }
.enlace-v3:hover { color: var(--cian); }

/* ---------------- Ticker ---------------- */
.ticker { z-index: 50; display: flex; align-items: stretch; background: linear-gradient(180deg, rgba(2, 8, 18, .8), rgba(1, 4, 10, .97)); border-top: 1px solid rgba(47, 168, 255, .45); }
.ticker-tit { flex: none; display: flex; align-items: center; padding: 0 14px; font: 800 13px var(--cond); letter-spacing: 2px; color: #fff; background: var(--rojo); }
.ticker-vent { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.ticker-pista { display: inline-flex; white-space: nowrap; height: 100%; align-items: center; }
body:not(.sin-anim) .ticker-pista { animation: ticker var(--dur, 90s) linear infinite; }
.ticker-pista span { padding: 0 24px; font: 600 14px var(--cond); letter-spacing: .8px; color: var(--txt2); }
.ticker-pista span b { color: var(--txt); }
.ticker-pista span i { font-style: normal; font-weight: 800; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------------- Agentes caminando y globos ---------------- */
#capa-agentes { position: absolute; inset: 0; pointer-events: none; }
.caminante { position: absolute; left: 0; top: 0; z-index: 9; will-change: transform; transform-origin: 50% 100%; }
.caminante img { display: block; height: 100%; filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 5px 4px rgba(0, 0, 0, .7)); }
.caminante .sombra { position: absolute; left: 12%; right: 12%; bottom: -9px; height: 14px; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .75), transparent 70%); }
.globo { position: absolute; z-index: 20; max-width: 300px; padding: 5px 11px; border-radius: 10px; background: rgba(3, 9, 20, .96);
  border: 1.5px solid var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); font: 600 14px var(--cond); letter-spacing: .3px; color: var(--txt);
  transform: translate(-50%, -100%) scale(.6); opacity: 0; transition: opacity .25s, transform .25s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.globo.ver { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.globo small { color: var(--c); font-weight: 800; margin-right: 5px; text-transform: uppercase; letter-spacing: .8px; }

/* ---------------- Toasts ---------------- */
#toasts { position: absolute; right: 18px; top: 74px; display: flex; flex-direction: column; gap: 9px; z-index: 60; width: 400px; pointer-events: none; }
.toast { position: relative; padding: 10px 15px; font-size: 14px; --corte: 10px; animation: toastIn .4s ease-out; }
.toast.sale { opacity: 0; transform: translateX(30px); transition: all .4s; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } }
.toast b { font-family: var(--cond); letter-spacing: 1px; text-transform: uppercase; color: var(--c); margin-right: 6px; }

/* ---------------- Encendido (intro) ---------------- */
.tapa { position: absolute; inset: -1px; z-index: 99; pointer-events: none; overflow: hidden;
  background: linear-gradient(160deg, rgba(6, 22, 44, .75), rgba(2, 8, 18, .8)); box-shadow: inset 0 0 0 1px rgba(57, 230, 255, .6), inset 0 0 26px rgba(47, 168, 255, .25); }
body.cal-alta .tapa { -webkit-backdrop-filter: blur(6px) saturate(.6); backdrop-filter: blur(6px) saturate(.6); }
.tapa .estatica { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, rgba(57, 200, 255, .28) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120, 200, 255, .12) 0 2px, transparent 2px 7px); }
.tapa .escaneo { position: absolute; left: 0; right: 0; height: 18%; top: -20%; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(80, 200, 255, .35) 45%, rgba(225, 245, 255, .95) 50%, rgba(80, 200, 255, .35) 55%, transparent); box-shadow: 0 0 18px rgba(57, 230, 255, .7); }
.tapa.enciende .estatica { animation: estatica .32s steps(4) 1; }
.tapa.enciende .escaneo { animation: escaneo .5s ease-in .1s 1 both; }
@keyframes estatica { 0% { opacity: 0; } 30% { opacity: 1; transform: translateY(-2px); } 60% { opacity: .7; transform: translateY(2px); } 100% { opacity: 0; } }
@keyframes escaneo { 0% { top: -20%; opacity: 1; } 100% { top: 105%; opacity: .9; } }
body.intro .chip-est, body.intro .kpi { animation: none !important; }

/* ---------------- Detalle / secciones ---------------- */
.velo { position: absolute; inset: 0; z-index: 70; background: rgba(0, 3, 10, .62); backdrop-filter: blur(3px); }
.velo[hidden] { display: none; }
.drawer.v4 { position: absolute; top: 70px; bottom: 34px; right: 20px; width: 1180px; z-index: 80; display: flex; flex-direction: column;
  background: rgba(4, 10, 22, .97); border: 1px solid rgba(47, 168, 255, .6); border-radius: 14px; box-shadow: 0 0 40px rgba(47, 168, 255, .3); }
.drawer.v4[hidden] { display: none; }
.drawer.v4 .drawer-cuerpo { flex: 1; min-height: 0; }
.drawer.v4 .tabla th { background: rgba(5, 12, 26, .99); }
.pipe-drawer { border-top: 1px solid rgba(47, 168, 255, .35); padding: 12px 6px 14px; height: 232px; flex: none; display: flex; flex-direction: column; }
.pipe-drawer .pnl-hdr h2, .seccion .pnl-hdr h2 { font-family: var(--cond); font-size: 17px; letter-spacing: 1.5px; text-transform: uppercase; }
.pipe-drawer .pasos { padding-top: 8px; }
.seccion { left: 240px; top: 90px; width: 960px; height: 820px; z-index: 80; padding: 20px 24px; display: flex; flex-direction: column; --corte: 20px; }
.seccion[hidden] { display: none; }
.seccion h2 { margin: 0 0 8px; font: 700 22px var(--cond); letter-spacing: 1.2px; text-transform: uppercase; }
.seccion .cerrar { position: absolute; right: 14px; top: 14px; }
.seccion-cuerpo { flex: 1; overflow-y: auto; min-height: 0; padding-right: 6px; }
.seccion .lista { list-style: none; margin: 0; padding: 0; }
.seccion .lista li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 9px 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); cursor: pointer; }
.seccion .lista li:hover { background: rgba(255, 255, 255, .04); }
.seccion .lista .t1 { font-weight: 600; }
.seccion .lista .t2 { font-size: 12px; color: var(--txt3); margin-top: 2px; }
.seccion .razon-larga { font-size: 13px; color: var(--txt2); margin-top: 3px; }
.seccion .pipe-sec { border: 1px solid rgba(47, 168, 255, .3); border-radius: 10px; padding: 12px 4px; margin-bottom: 14px; height: 230px; display: flex; flex-direction: column; }
body.resaltar-pendientes .chip-est.con-pendientes { filter: drop-shadow(0 0 14px var(--verde)); }
.paso h4 { color: var(--cian); }
.paso .punto { border-color: var(--cian); box-shadow: 0 0 12px rgba(57, 230, 255, .55); background: #04121f; }
.paso .riel::before { background: linear-gradient(90deg, var(--cian), rgba(57, 230, 255, .15)); }
.det-sec h3::before { background: var(--cian); }

/* ---------------- Modo táctil (zoom) y pantallas chicas ---------------- */
.zoom-ctrl { position: absolute; left: 50%; top: 8px; z-index: 65; display: flex; align-items: center; gap: 8px; transform: translateX(-50%);
  background: rgba(2, 8, 18, .9); border: 1px solid rgba(57, 230, 255, .55); border-radius: 999px; padding: 5px 6px 5px 16px; box-shadow: 0 0 22px rgba(47, 168, 255, .35);
  font: 700 14px var(--cond); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.zoom-ctrl[hidden] { display: none; }
.zoom-ctrl button { border: 1px solid rgba(57, 230, 255, .5); background: rgba(255, 255, 255, .05); color: var(--txt); border-radius: 999px; padding: 6px 14px; cursor: pointer; font: 700 13px var(--cond); letter-spacing: 1px; text-transform: uppercase; }
.zoom-ctrl button#zoom-volver { background: var(--azul2); border-color: var(--azul2); box-shadow: 0 0 12px rgba(47, 168, 255, .6); }
.zoom-ctrl button[hidden] { display: none; }
body.pantalla-chica .hud { transform: scale(calc(var(--inv) * .7)); transform-origin: top right; left: auto !important; right: 0; width: auto !important; }
body.pantalla-chica .hud .actualizado { display: none; }
body.pantalla-chica .ticker { right: auto; width: calc(1920px / (var(--inv) * .8)) !important; transform: scale(calc(var(--inv) * .8)); transform-origin: bottom left; top: auto !important; bottom: 0; }
body.pantalla-chica .menu { transform: scale(calc(var(--inv) * .62)); transform-origin: bottom left; top: auto !important; bottom: calc(30px * var(--inv)); height: auto !important; }
body.pantalla-chica #toasts { transform: scale(var(--inv)); transform-origin: top right; }
body.pantalla-chica .zoom-ctrl { transform: translateX(-50%) scale(var(--inv)); transform-origin: top center; }
body.pantalla-chica .drawer.v4, body.pantalla-chica .seccion { left: 0; top: 0; right: auto; bottom: auto; width: calc(1920px / var(--inv)); height: calc(1080px / var(--inv)); transform: scale(var(--inv)); transform-origin: 0 0; border-radius: 0; }
body.pantalla-chica .det-kpis { grid-template-columns: repeat(3, 1fr); }
#girar { display: none; position: fixed; inset: 0; z-index: 100; background: radial-gradient(circle at 50% 40%, #061a33, #000 70%); color: var(--txt); place-items: center; text-align: center; padding: 30px; font-size: 15px; }
#girar b { display: block; font: 800 30px var(--cond); letter-spacing: 1.5px; text-transform: uppercase; margin: 10px 0 6px; color: var(--cian); text-shadow: 0 0 12px rgba(57, 230, 255, .8); }
#girar span { font-size: 54px; display: block; }
@media (orientation: portrait) and (max-width: 900px) { #girar { display: grid; } }

/* ---------------- Animación apagada / calidad ---------------- */
body.sin-anim *, body.sin-anim *::before, body.sin-anim *::after { animation: none !important; transition: none !important; }
body.cal-baja .velo { backdrop-filter: none; }
body.cal-baja #fx, body.cal-baja .jefe .scan { display: none; }
body.cal-baja .chip-est, body.cal-baja .kpi, body.cal-baja .holo-panel, body.cal-baja .consenso { filter: none; animation: none; }

/* ---------------- CONTROL DE RIESGO EN VIVO ---------------- */
.control-riesgo { --c: #ff3b30; box-sizing: border-box; display: flex; flex-direction: column; gap: 7px; color: var(--txt); font-size: 12px; }
.cr-escena { position: absolute; z-index: 9; padding: 11px 13px; border-radius: 12px;
  background: linear-gradient(170deg, rgba(10, 18, 34, .97), rgba(3, 8, 18, .98)); border: 1.5px solid rgba(255, 59, 48, .75);
  box-shadow: 0 0 22px rgba(255, 40, 30, .35), inset 0 0 24px rgba(47, 168, 255, .1); }
body:not(.sin-anim) .cr-escena { animation: pulsoRiesgo 4.5s ease-in-out infinite; }
@keyframes pulsoRiesgo { 50% { box-shadow: 0 0 32px rgba(255, 40, 30, .55), inset 0 0 24px rgba(47, 168, 255, .15); } }
.cr-detalle { max-width: 760px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 59, 48, .5); background: rgba(255, 255, 255, .03); }
.cr-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 800 17px var(--cond); letter-spacing: 1.4px; color: #fff; }
.cr-pill { font: 700 10.5px var(--cond); letter-spacing: 1px; padding: 2px 8px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .2); color: var(--txt2); white-space: nowrap; }
.cr-pill.ok { color: var(--verde); border-color: rgba(54, 226, 127, .5); background: rgba(54, 226, 127, .1); }
.cr-pill.sim { color: var(--ambar); border-color: rgba(255, 176, 32, .5); background: rgba(255, 176, 32, .1); }
.cr-pill.off { color: #ff8b80; border-color: rgba(255, 42, 42, .5); background: rgba(255, 42, 42, .12); }
.cr-switch { display: grid; grid-template-columns: 1fr 1fr; background: rgba(255, 255, 255, .05); border: 1px solid rgba(47, 168, 255, .45); border-radius: 999px; padding: 3px; }
.cr-switch button { border: 0; background: transparent; color: var(--txt2); border-radius: 999px; padding: 7px 0; cursor: pointer; font: 800 13px var(--cond); letter-spacing: 1.3px; min-height: 32px; }
.cr-switch button.activo { background: var(--azul2); color: #fff; box-shadow: 0 0 12px rgba(47, 168, 255, .75); }
.cr-switch button[data-modo="auto"].activo { background: linear-gradient(90deg, #a06a00, #f5c542); color: #1d1400; box-shadow: 0 0 14px rgba(245, 197, 66, .75); }
.cr-botones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cr-detalle .cr-botones { grid-template-columns: repeat(4, 1fr); }
.cr-btn { min-height: 54px; border-radius: 10px; cursor: pointer; font: 900 26px var(--cond); letter-spacing: 1px; color: var(--txt2);
  background: linear-gradient(180deg, rgba(20, 30, 50, .9), rgba(6, 12, 24, .95)); border: 1.5px solid rgba(47, 168, 255, .35); transition: transform .12s, box-shadow .2s; }
.cr-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--cian); color: #fff; }
.cr-btn.activo { color: #fff; border-color: #ff5a3c; background: linear-gradient(180deg, #ff3b30, #8a0a04);
  box-shadow: 0 0 18px rgba(255, 50, 30, .85), 0 0 0 2px rgba(245, 197, 66, .9) inset; text-shadow: 0 0 10px rgba(255, 220, 150, .9); }
body:not(.sin-anim) .cr-btn.activo { animation: brilloActivo 2.2s ease-in-out infinite; }
@keyframes brilloActivo { 50% { box-shadow: 0 0 28px rgba(255, 70, 30, 1), 0 0 0 2px rgba(255, 220, 120, 1) inset; } }
.cr-btn.auto { opacity: .55; }
.cr-btn.auto.activo { opacity: .85; background: linear-gradient(180deg, #c48a12, #6a4600); border-color: var(--oro); box-shadow: 0 0 16px rgba(245, 197, 66, .7); }
.cr-btn:disabled, .cr-switch button:disabled { cursor: not-allowed; }
.sin-conexion .cr-btn, .sin-conexion .cr-switch { opacity: .35; filter: grayscale(.7); }
.cr-vigente { font: 700 15px var(--cond); letter-spacing: .8px; color: var(--txt2); text-transform: uppercase; }
.cr-vigente b { font: 900 30px var(--cond); color: #fff; text-shadow: 0 0 12px rgba(255, 59, 48, .8); margin-left: 4px; vertical-align: -3px; }
.modo-auto .cr-vigente b { text-shadow: 0 0 12px rgba(245, 197, 66, .9); color: #ffe39a; }
.cr-vigente small { font: 600 11px Inter, sans-serif; color: var(--txt3); text-transform: none; letter-spacing: 0; }
.cr-pick { font-size: 11.5px; line-height: 1.35; color: var(--txt2); border-left: 3px solid var(--oro); padding: 3px 0 3px 7px; background: rgba(245, 197, 66, .06);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cr-pick b { color: var(--txt); }
.cr-lin { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--txt3); border-bottom: 1px dashed rgba(255, 255, 255, .08); padding-bottom: 3px; }
.cr-lin b { color: var(--txt); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cr-lin.duro b { color: var(--txt2); font-weight: 600; font-size: 11px; }
.cr-pie { font-size: 10.5px; color: var(--txt3); margin-top: auto; }
.cr-pie b { color: var(--txt2); }
.sin-conexion .cr-pie { color: #ff8b80; font-weight: 600; }
body.cal-baja .cr-escena, body.cal-baja .cr-btn.activo { animation: none; }