/* styles.css (v2) — modo oscuro, HUD estilo CONSOLA DE OPERACIONES sobre mapa RM.
   Paneles de instrumento (superficie sólida, no vidrio esmerilado), reglas a pelo
   (hairline), etiquetas monoespaciadas, cifras tabulares codificadas por color e
   iconos vectoriales (no glifos de fuente). El mapa manda; el HUD lo lee. */
:root{
  --text:#eef4fb; --soft:#93a6bc; --faint:#6f859d;
  --line:rgba(146,178,216,.13); --line-bright:rgba(150,185,225,.26);
  --coral:#ff6166; --cyan:#39e3ff; --violet:#a594ff; --outage:#ff5667; --amber:#ffb15a; --ctx:#64758a;
  /* variantes suaves para CIFRAS (legibles, no neón) — codifican el panel por color */
  --cyan-soft:#82e9ff; --coral-soft:#ff9094; --violet-soft:#c2b6ff; --amber-soft:#ffcd86;

  /* superficie de instrumento: panel sólido oscuro (no frosted glass), con borde
     a pelo y un realce superior tenue. Un blur leve deja ver el mapa por debajo. */
  --panel:linear-gradient(180deg,rgba(11,17,28,.90),rgba(7,11,19,.87));
  --panel-strong:linear-gradient(180deg,rgba(13,20,33,.94),rgba(7,11,19,.91));
  --panel-bd:rgba(150,185,225,.17);
  --hair:rgba(150,185,225,.13);
  --hl:inset 0 1px 0 rgba(255,255,255,.05);
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --shadow-sm:0 8px 22px rgba(0,0,0,.42);

  --btn:rgba(150,185,220,.07); --btn-h:rgba(150,185,220,.15); --btn-a:rgba(150,185,220,.22);
  --bar-bg:rgba(150,180,210,.11);
  --radius:10px; --radius-sm:7px; --radius-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --mono:ui-monospace,"Cascadia Code","Segoe UI Mono",Consolas,"Roboto Mono",monospace;
  --bg1:#0a1322; --bg2:#050810;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{
  font-family:"Segoe UI",Helvetica,Arial,system-ui,sans-serif;
  color:var(--text);
  background:linear-gradient(165deg,var(--bg1) 0%,var(--bg2) 100%);
  -webkit-font-smoothing:antialiased;
}
#app{position:fixed;inset:0}
#scene{position:absolute;inset:0;display:block;width:100%;height:100%}
#app::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 38%,transparent 50%,rgba(0,0,0,.40) 100%)}

/* ===== etiquetas de comunas (con conector que apunta a su comuna) ===== */
#labels{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.map-label{position:absolute;transform:translate(-50%,-100%);
  --lc:var(--cyan);--lead:8px;
  font-size:10.5px;font-weight:600;letter-spacing:.015em;white-space:nowrap;
  font-variant-numeric:tabular-nums;
  padding:2.5px 8px;border-radius:8px;
  background:rgba(7,12,21,.74);border:1px solid var(--line);
  border-left:2.5px solid var(--lc);
  color:var(--text);box-shadow:0 3px 12px rgba(0,0,0,.5);
  text-shadow:0 1px 3px rgba(0,0,0,.8)}
.map-label i{display:none}
/* conector: línea que va de TENUE (en el pill) a SÓLIDA (en la comuna), guiando
   el ojo hacia abajo, y un punto que aterriza sobre el centroide de la comuna. */
.map-label::after{content:"";position:absolute;left:50%;top:100%;
  width:1.5px;height:var(--lead);transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--lc) 85%)}
.map-label::before{content:"";position:absolute;left:50%;top:100%;
  width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,calc(var(--lead) - 3.5px));
  background:var(--lc);box-shadow:0 0 9px var(--lc),0 0 0 2px rgba(7,12,21,.6)}
.map-label.pending{--lc:var(--outage)}
.map-label.restored{--lc:var(--cyan);opacity:.66}

#hud{position:absolute;inset:0;pointer-events:none;z-index:5}
#hud button{pointer-events:auto;font-family:inherit}

/* botón base reutilizable (estados consistentes) */
.ctl-btn,.tl-btn,.more-toggle{
  transition:background .16s var(--ease),border-color .16s var(--ease),transform .12s var(--ease),box-shadow .16s var(--ease)}
.ctl-btn:active,.tl-btn:active,.more-toggle:active{transform:translateY(1px) scale(.97)}
.ctl-btn:focus-visible,.tl-btn:focus-visible,.more-toggle:focus-visible,.tl-track:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px}

/* ===== superior izquierda ===== */
.hud-top-left{position:absolute;top:24px;left:28px}
.sys-label{font-weight:800;font-size:13px;letter-spacing:.15em}
.sys-sub{margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:var(--soft)}

/* ===== superior derecha (controles + DÍA, este se conserva) ===== */
.hud-top-right{position:absolute;top:18px;right:28px;text-align:right;pointer-events:none}
.hud-controls{display:flex;gap:8px;justify-content:flex-end;margin-bottom:10px}
.ctl-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hair);background:var(--btn);color:var(--soft);
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  padding:7px 11px;border-radius:var(--radius-sm);
  cursor:pointer;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.ctl-btn:hover{background:var(--btn-h);border-color:var(--line-bright);color:var(--text)}
.ctl-btn.ic{padding:0;width:32px;height:32px;justify-content:center}
.ctl-btn svg{display:block}
.hud-hint{font-family:var(--mono);font-size:9.5px;color:var(--faint);margin-bottom:9px;letter-spacing:.02em;pointer-events:none}
.day-block{display:flex;align-items:baseline;justify-content:flex-end;gap:2px}
.day-big{font-weight:800;font-size:52px;line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.day-tot{font-weight:700;font-size:28px;color:var(--soft);font-variant-numeric:tabular-nums}
.day-label{font-size:11px;letter-spacing:.34em;color:var(--soft);margin-top:2px}
.phase{margin-top:9px;font-size:12px;font-weight:600;color:var(--text);max-width:320px;margin-left:auto;
  opacity:.92;transition:opacity .3s var(--ease)}

/* ===== panel de estadísticas (instrumento) ===== */
.hud-stats{position:absolute;left:28px;top:96px;width:262px;pointer-events:auto;
  max-height:calc(100vh - 184px);overflow-y:auto;overflow-x:hidden;
  background:var(--panel);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--panel-bd);border-radius:var(--radius);padding:0 16px 15px;
  box-shadow:var(--shadow),var(--hl)}
.hud-stats::-webkit-scrollbar{width:6px}
.hud-stats::-webkit-scrollbar-thumb{background:rgba(140,175,210,.22);border-radius:3px}

/* cabecera = barra de título del instrumento (mono, indicador en vivo) */
.panel-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);
  margin:0 -16px 14px;padding:12px 16px 11px;border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(13,20,33,.96),rgba(11,17,28,.82))}
.panel-head::after{content:"RM";margin-left:auto;color:var(--faint);letter-spacing:.18em}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:0 0 auto;
  box-shadow:0 0 8px var(--cyan);animation:livePulse 2.4s var(--ease) infinite}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(57,227,255,.5),0 0 8px var(--cyan)}
  70%{box-shadow:0 0 0 7px rgba(57,227,255,0),0 0 8px var(--cyan)}
  100%{box-shadow:0 0 0 0 rgba(57,227,255,0),0 0 8px var(--cyan)}}

.stat{position:relative;margin-bottom:13px;padding-bottom:13px;border-bottom:1px solid var(--hair)}
/* codificacion semantica: la cifra hereda el color de su elemento en el mapa/leyenda */
.stat.ac-cyan .stat-v,.mini.ac-cyan .stat-v{color:var(--cyan-soft)}
.stat.ac-coral .stat-v,.mini.ac-coral .stat-v{color:var(--coral-soft)}
.stat.ac-violet .stat-v,.mini.ac-violet .stat-v{color:var(--violet-soft)}
.stat.ac-amber .stat-v,.mini.ac-amber .stat-v{color:var(--amber-soft)}
.stat.row2{display:flex;gap:14px}
.stat.tight{margin-bottom:9px;padding-bottom:9px}
.stat:last-child,.stat.row2.tight:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.stat-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);font-weight:500}
.stat-v{font-weight:800;font-size:27px;line-height:1.05;margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.stat-v.sm{font-size:18px;font-weight:700}
.stat-tot,.stat-u{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--faint);margin-left:4px}
.bar{height:5px;border-radius:var(--radius-pill);background:var(--bar-bg);margin-top:9px;overflow:hidden}
.bar i{display:block;height:100%;width:0%;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,#21c7ff,var(--cyan));box-shadow:0 0 9px rgba(57,227,255,.55);
  transition:width .35s var(--ease)}
.bar i.coral{background:linear-gradient(90deg,#ff7a4d,var(--outage));box-shadow:0 0 9px rgba(255,86,103,.5)}
.row2{display:flex;gap:14px}
.row2.tight{gap:12px}
.row2 .mini{flex:1}

.more-toggle{width:100%;margin-top:14px;border:1px solid var(--hair);background:var(--btn);
  color:var(--soft);font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:9px;border-radius:var(--radius-sm);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.more-toggle:hover{background:var(--btn-h);border-color:var(--line-bright);color:var(--text)}
.more-toggle .chev{transition:transform .25s var(--ease);font-size:10px}
.more-toggle.open .chev{transform:rotate(180deg)}

/* disclosure por grid-template-rows (sin animar layout; colapsa sin recorte fijo) */
.more{display:grid;grid-template-rows:1fr;opacity:1;
  transition:grid-template-rows .38s var(--ease),opacity .3s var(--ease)}
.more.collapsed{grid-template-rows:0fr;opacity:0}
.more-inner{overflow:hidden;min-height:0;padding-top:12px}
.more-sec-t{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:500;
  margin:6px 0 8px;padding-top:11px;border-top:1px solid var(--hair)}
.mat-table,.cost-table{display:flex;flex-direction:column;gap:5px;font-family:var(--mono)}
.mat-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;font-size:10.5px;align-items:center}
.mat-row .mn{color:var(--soft)}
.mat-row .mc{color:var(--coral);font-weight:600;text-align:right;min-width:28px;font-variant-numeric:tabular-nums}
.mat-row .ms{color:var(--faint);font-weight:600;text-align:right;min-width:28px;font-variant-numeric:tabular-nums}
.mat-head{color:var(--faint);font-size:9px;letter-spacing:.04em;text-transform:uppercase}
.mat-head .mc,.mat-head .ms{color:var(--faint);font-weight:500}
.cost-row{display:flex;justify-content:space-between;font-size:10.5px}
.cost-row .ck{color:var(--soft)}
.cost-row .cv{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.cost-row.total{border-top:1px solid var(--hair);padding-top:6px;margin-top:3px}
.cost-row.total .ck,.cost-row.total .cv{color:var(--text);font-weight:700}

/* ===== leyenda (instrumento) ===== */
.hud-legend{position:absolute;right:28px;bottom:96px;
  background:var(--panel);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--panel-bd);border-radius:var(--radius);padding:12px 15px 13px;
  box-shadow:var(--shadow-sm),var(--hl)}
.hud-legend::before{content:"Leyenda";display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--soft);font-weight:600;margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid var(--hair)}
.lg{display:flex;align-items:center;font-family:var(--mono);font-size:10.5px;margin:7px 0;letter-spacing:.01em;color:var(--soft)}
.lg:last-child{margin-bottom:0}
.lg .dot{width:8px;height:8px;border-radius:50%;margin-right:11px;flex:0 0 auto}
.dot.coral{background:var(--coral);box-shadow:0 0 8px var(--coral)}
.dot.cyan{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.dot.violet{background:var(--violet);box-shadow:0 0 8px var(--violet)}
.dot.outage{background:var(--outage);box-shadow:0 0 8px var(--outage)}
.dot.ctx{background:var(--ctx);box-shadow:none}

/* ===== línea de tiempo / scrubber (instrumento) ===== */
.hud-timeline{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;align-items:center;gap:13px;width:min(660px,76vw);
  background:var(--panel-strong);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--panel-bd);border-radius:var(--radius);padding:9px 14px;
  box-shadow:var(--shadow),var(--hl)}
.tl-btn{border:1px solid var(--hair);background:var(--btn);color:var(--soft);width:34px;height:34px;border-radius:var(--radius-sm);
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tl-btn:hover{background:var(--btn-h);border-color:var(--line-bright);color:var(--text)}
.tl-btn svg{display:block}
#btn-play{color:var(--text)}
.tl-btn.wide{width:auto;padding:0 12px;border-radius:var(--radius-sm);font-family:var(--mono);font-weight:600;font-size:12px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;min-width:50px;color:var(--soft)}
.tl-btn.wide:hover{color:var(--text)}
.tl-track{position:relative;flex:1;height:34px;cursor:pointer;display:flex;align-items:center;
  pointer-events:auto;touch-action:none;border-radius:var(--radius-pill)}
.tl-track::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:5px;border-radius:var(--radius-pill);
  background:var(--bar-bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.tl-fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:5px;border-radius:var(--radius-pill);width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--coral));box-shadow:0 0 10px rgba(57,227,255,.35)}
.tl-ticks{position:absolute;left:0;right:0;height:100%;pointer-events:none}
.tl-tick{position:absolute;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:9px;color:var(--soft);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;opacity:.92}
.tl-tick i{display:block;width:1.5px;height:9px;background:var(--line-bright);margin:0 auto 3px;border-radius:1px}
.tl-head{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;
  background:#fff;border:2.5px solid var(--coral);box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 12px rgba(255,97,102,.55);
  left:0;cursor:grab;transition:transform .14s var(--ease),box-shadow .14s var(--ease)}
.tl-track:hover .tl-head{transform:translate(-50%,-50%) scale(1.2)}
.tl-track.scrubbing{cursor:grabbing}
.tl-track.scrubbing .tl-head{cursor:grabbing;transform:translate(-50%,-50%) scale(1.32);
  box-shadow:0 2px 10px rgba(0,0,0,.55),0 0 16px rgba(255,97,102,.7)}

/* ===== intro ===== */
.intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;transition:opacity .8s var(--ease)}
.intro-line{font-size:13px;letter-spacing:.4em;color:var(--soft);margin-bottom:14px}
.intro-main{font-weight:800;font-size:clamp(32px,5.2vw,70px);line-height:1.0;letter-spacing:-.02em}
.intro-sub{margin-top:18px;font-size:14px;color:var(--soft);max-width:540px}
.intro.gone{opacity:0}

/* ===== resumen ===== */
#summary{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(5,8,16,.55);backdrop-filter:blur(6px);z-index:10;transition:opacity .6s var(--ease)}
#summary.hidden{opacity:0;pointer-events:none}
.sum-card{background:var(--glass-strong);border:1px solid var(--panel-bd);border-radius:20px;padding:34px 40px;
  text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.55),var(--hl);max-width:560px}
.sum-title{font-weight:800;font-size:30px;letter-spacing:.02em}
.sum-sub{margin-top:8px;color:var(--soft);font-size:13.5px}
.sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin:26px 0 8px;text-align:left}
.sum-item{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:6px}
.sum-item .k{font-size:12px;color:var(--soft);flex:1 1 auto}
.sum-item .v{font-weight:800;font-size:14px;flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.sum-btn{margin-top:22px;border:none;background:var(--cyan);color:#04121b;font-weight:800;padding:12px 26px;
  border-radius:var(--radius-pill);cursor:pointer;font-size:13px;letter-spacing:.03em;pointer-events:auto;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease);box-shadow:0 6px 18px rgba(57,227,255,.35)}
.sum-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(57,227,255,.45)}

.hidden{opacity:0;pointer-events:none}

/* respeta la preferencia del sistema de reducir movimiento */
@media (prefers-reduced-motion: reduce){
  .live-dot{animation:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}