/* =========================================================
   CENTRO DE ENERGÍA · TU CLIENTE — "SALA DE CONTROL"
   =========================================================
   Idea: la torre Tu cliente es el escenario real y la interfaz
   es el HUD de la sala de control que la vigila: azul profundo del
   banco como lienzo, vidrio BLANCO translúcido como instrumental,
   y el amarillo del banco reservado para lo que hay que mirar.
   La corriente que recorre el piso del edificio sigue fluyendo
   por la pantalla.

   LEY DEL SISTEMA — un solo lenguaje, repetido en todas partes:
     · UNA superficie: vidrio blanco al 6-10 % sobre el azul, filo
       claro arriba (luz cenital) y sombra proyectada abajo
     · UNA barra: degradado vertical cyan→azul BG, tope redondeado,
       reflejo interno y base asentada (vale para verticales,
       horizontales, apiladas y arcos de dona)
     · UNA jerarquía de color: azul = masa medida · cyan = lo vivo ·
       AMARILLO = el dato que importa · blanco = rotulación
     · micro-tipografía monoespaciada + números tabulares grandes
     · profundidad por capas: escena → vidrio → dato → realce
/* ---- propiedades tipadas: permiten animar gradientes, ángulos y el sol ---- */
@property --giro   { syntax: "<angle>";      inherits: false; initial-value: 0deg; }
@property --barrido{ syntax: "<percentage>"; inherits: false; initial-value: -30%; }
@property --sol-x   { syntax: "<percentage>"; inherits: true; initial-value: 50% }
@property --sol-y   { syntax: "<percentage>"; inherits: true; initial-value: 12% }
@property --sol-alt { syntax: "<number>";     inherits: true; initial-value: 1 }
@property --sol-ang { syntax: "<angle>";      inherits: true; initial-value: 200deg }
@property --sh-x    { syntax: "<length>";     inherits: true; initial-value: 0px }
@property --sh-y    { syntax: "<length>";     inherits: true; initial-value: 5px }

:root {
  color-scheme: light;

  /* ---------- neutros: papel cálido, JAMÁS gris puro ni #fff ---------- */
  --papel:   #fdfcf7;
  --perla:   #f5f3ec;
  --tinta:   #171408;
  --tinta-2: #272419;
  --gris:    #67655c;   /* 5.4:1 sobre papel */
  --gris-2:  #6f6d64;   /* 4.9:1 */
  --gris-3:  #74726a;   /* 4.6:1 — se usa como texto, no como línea */

  /* ---------- marca (H 258): la ESTRUCTURA ----------
     #004090 en OKLCH vive en H≈258; un verde bosque en H≈158. El arco
     corto entre ambos pasa por el teal y nunca por gris: el azul del
     banco no es un intruso en una paleta natural, es su extremo frío. */
  --bg-900: #072045;
  --bg-800: #063069;
  --bg-700: #004090;         /* el institucional exacto · 9.6:1 sobre papel */
  --bg-600: #1d5fbc;
  --bg-500: #4d86d9;
  --bg-400: #86b0ed;
  --bg-300: #c2d9fc;
  --bg-200: #e7f1ff;

  --teal-700: #00636d;
  --teal-600: #008c99;
  --teal-500: #38b1bd;
  --teal-300: #83d4dd;

  --hoja-700: #0e653f;
  --hoja-600: #20905d;
  --hoja-500: #4ab67f;

  --rojo:      var(--bg-700);   /* el "acento" del sistema (nombre heredado) */
  --rojo-hondo:var(--bg-900);
  --rojo-tinta:var(--bg-800);
  --rojo-vivo: var(--bg-600);
  --barra-1: var(--bg-400);
  --barra-2: var(--bg-700);

  --rojo-5:  color-mix(in oklab, var(--rojo) 4%,  transparent);
  --rojo-8:  color-mix(in oklab, var(--rojo) 7%,  transparent);
  --rojo-14: color-mix(in oklab, var(--rojo) 12%, transparent);
  --rojo-22: color-mix(in oklab, var(--rojo) 20%, transparent);
  --rojo-40: color-mix(in oklab, var(--rojo) 38%, transparent);
  --rojo-70: color-mix(in oklab, var(--rojo) 68%, transparent);

  /* ---------- el amarillo del banco ----------
     #ffd34d sobre papel da 1.39:1: JAMÁS es texto ni línea fina en modo
     claro. Es relleno, halo y sol. El texto solar va en --oro-tinta. */
  --oro:       #ffd34d;
  --oro-claro: #ffe9a5;
  --oro-hondo: #c99f00;
  --oro-tinta: #7a5e00;
  --oro-8:  color-mix(in oklab, var(--oro) 12%, transparent);
  --oro-22: color-mix(in oklab, var(--oro) 28%, transparent);

  --pico:      #bb4717;
  --pico-vivo: #f16935;

  /* ---------- datos: la paleta de los reportes 4K ---------- */
  --verde:  var(--hoja-600);
  --ambar:  var(--oro);
  --ambar-claro: var(--oro-tinta);
  --c-hvac:  #2f86ff;
  --c-tomas: #34d6c8;
  --c-luces: #ffc738;
  --c-ups:   #a98bff;
  --c-otros: #9aa6bd;
  --c-solar: #ffd34d;

  --filo-rgb: 255 255 255;
  --sh:   .18 .03 258;       /* el tono de TODA sombra, en OKLCH */

  /* ---------- vidrio: la superficie del sistema ---------- */
  --vidrio:    rgb(255 255 255 / .72);
  --vidrio-2:  rgb(255 255 255 / .82);
  --vidrio-3:  rgb(255 255 255 / .34);
  --filo:      rgb(255 255 255 / .55);
  --filo-fino: rgb(255 255 255 / .34);
  --realce:    inset 0 1px 0 rgb(255 255 255 / .85);

  /* ---------- elevación: el OFFSET lo pone el sol ---------- */
  --s1: 0 var(--sh-y) calc(var(--sh-y) * 2) calc(var(--sh-y) * -1) oklch(var(--sh) / .16);
  --s2: var(--sh-x) calc(var(--sh-y) * 1.6) calc(var(--sh-y) * 3.4) calc(var(--sh-y) * -1.4) oklch(var(--sh) / .17),
        0 1px 2px oklch(var(--sh) / .07);
  --s3: calc(var(--sh-x) * 1.8) calc(var(--sh-y) * 3.2) calc(var(--sh-y) * 7) calc(var(--sh-y) * -2.2) oklch(var(--sh) / .22),
        0 2px 6px oklch(var(--sh) / .08);
  --s-rojo: 0 14px 34px -18px color-mix(in oklab, var(--rojo) 55%, transparent);

  /* ---------- geometría ---------- */
  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 13px;
  --r-sm: 9px;
  --carril: 1180px;

  --canal-noche: #061230;
  --canal-cyan:  #38b1bd;

  --out:    cubic-bezier(.23, 1, .32, 1);
  --inout:  cubic-bezier(.77, 0, .175, 1);
  --drawer: cubic-bezier(.32, .72, 0, 1);
  --resorte:cubic-bezier(.34, 1.28, .42, 1);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;

  --acc: var(--rojo);
  --acc-soft: var(--rojo-tinta);
  --acc-deep: var(--rojo-hondo);
  --rayo: var(--rojo-vivo);
  --text: var(--tinta);
  --text-2: var(--tinta-2);
  --muted: var(--gris);
  --muted-2: var(--gris-2);
  --bg0: var(--papel);
  --bg1: var(--perla);
  --bg2: var(--papel);
  --panel-brd: var(--filo);
  --panel-bg: var(--vidrio);
  --panel-bg-2: var(--vidrio-2);
  --inner-bg: var(--vidrio);
  --hairline: var(--filo-fino);
  --sombra-1: var(--s1);
  --sombra-2: var(--s2);
  --sombra-3: var(--s3);
  --glow-acc: 0 0 26px var(--rojo-22);
  --suave: var(--out);
  --spring: var(--resorte);
  --green: var(--verde);
  --gold: var(--oro);
  --orange: var(--ambar);

  /* UNA sola voz tipográfica en toda la app. Las cifras se alinean con
     tabular-nums, no cambiando de familia. */
  --mono: var(--sans);
  --mono-real: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* el sol se mueve un paso por minuto — pero solo DESPUÉS del primer
     pintado: al abrir tiene que arrancar ya en la luz que toca */
  transition: none;
}

/* ---------- LA NOCHE: no es "modo oscuro", es la hora azul ----------
   Bajo −6° de altura solar el cielo se vuelve el azul profundo de los
   reportes 4K del banco. De noche la app ES el reporte. */
:root[data-cielo="noche"] {
  color-scheme: dark;
  --papel:   #061230;
  --perla:   #0a1d4a;
  --tinta:   #f2f7ff;
  --tinta-2: #dce8ff;
  --gris:    #a8bcda;
  --gris-2:  #93a9c9;
  --gris-3:  #8397b8;
  --oro-tinta: var(--oro);
  /* sobre el azul hondo, los acentos SUBEN de brillo: si se dejan en su
     versión oscura, las etiquetas desaparecen contra el fondo */
  --rojo:       var(--bg-400);
  --rojo-tinta: #9fd4ff;
  --rojo-hondo: #c2d9fc;
  --rojo-vivo:  var(--bg-300);
  --verde:      var(--hoja-500);
  --vidrio:    rgb(255 255 255 / .07);
  --vidrio-2:  rgb(255 255 255 / .11);
  --vidrio-3:  rgb(255 255 255 / .05);
  --filo:      rgb(255 255 255 / .14);
  --filo-fino: rgb(255 255 255 / .08);
  --realce:    inset 0 1px 0 rgb(255 255 255 / .16);
  --sh:   .04 .05 262;
}

@media (prefers-reduced-motion: reduce) { :root { transition: none; } }

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--papel);
}
body {
  font-family: var(--sans);
  /* el lienzo lo pinta <html>: si el body tuviera fondo propio, taparía la
     escena (que va en z-index -1) y desaparecería la torre */
  background: transparent;
  color: var(--tinta);
  line-height: 1.45;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; }

:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--rojo-22); color: var(--tinta); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* ---------- micro-tipografía de instrumento ---------- */
.kpi__label, .card__mini label, .metrics__lbl, .stat label, .field label,
.card__dona small, .dist__center small, .card__estado, .detail__estado,
.cliente--proximo small, .gate__foot, .lock__by, .rtype__ic + .rtype__txt b {
  font-feature-settings: "ss01";
}

/* =========================================================
   ESCENARIO — capas: torre → horizonte → campo → trama
   La torre vive ARRIBA y se disuelve en papel blanco: deja de
   competir con las tarjetas y pasa a ser el edificio que se
   está monitoreando.
   ========================================================= */
.escena { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.escena__torre {
  position: absolute; inset: 0;
  /* el edificio ENTERO, de borde a borde: es el fondo de la app, no un
     recorte decorativo en una esquina */
  background: image-set(url('/panel/assets/fondo.jpg?v=t2') 1x,
                        url('/panel/assets/fondo.jpg?v=t2') 2x)
              left 44% / cover no-repeat;
  /* Safari viejo y navegadores sin image-set se quedan con el 1x */
  background: -webkit-image-set(url('/panel/assets/fondo.jpg?v=t2') 1x,
                                url('/panel/assets/fondo.jpg?v=t2') 2x)
              left 44% / cover no-repeat;
  /* recibe la luz del sol real: su saturación, contraste y brillo
     siguen la elevación solar */
  filter:
    saturate(calc(.55 + .35 * var(--sol-alt)))
    contrast(calc(1.18 - .12 * var(--sol-alt)))
    brightness(calc(1.02 + .12 * var(--sol-alt)));
  opacity: calc(.62 + .24 * var(--sol-alt));
  transform: translate3d(0, 0, 0) scale(1.02);
  will-change: transform;
  transition: opacity .8s var(--out), filter .8s var(--out);
}
/* el halo del sol sobre el edificio: lo ilumina por la cara que mira
   al astro, como en la realidad */
.escena__torre::after {
  content: ""; position: absolute; inset: 0;
  /* luz cenital neutra sobre el edificio, sin temperatura de color */
  background: radial-gradient(34vmax 30vmax at var(--sol-x) var(--sol-y),
    rgb(255 255 255 / calc(.22 * var(--sol-alt) + .08)), transparent 62%);
}

/* en retrato el istmo se mira a lo largo: la misma escena real, girada
   para que llene la pantalla del teléfono de arriba abajo */
@media (orientation: portrait) {
  .escena__torre {
    background-image: image-set(url('/panel/assets/fondo-alto.jpg?v=t2') 1x,
                                url('/panel/assets/fondo-alto.jpg?v=t2') 2x);
    background-position: center 38%;
  }
}

/* de noche el edificio se apaga y queda como silueta encendida */
:root[data-cielo="noche"] .escena__torre {
  opacity: .72;
  filter: saturate(.35) contrast(1.5) brightness(.55) hue-rotate(-8deg);
  mix-blend-mode: screen;
}
:root[data-cielo="horaazul"] .escena__torre {
  opacity: .72; filter: saturate(.8) contrast(1.25) brightness(.92);
}

/* parallax nativo: la torre se hunde al bajar (sin un solo listener de scroll) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .escena__torre {
      animation: torreParallax linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 120vh;
    }
  }
}
@keyframes torreParallax {
  to { transform: translate3d(0, -5%, 0) scale(1.09); }
}

/* velo nocturno: funde la torre con el lienzo y deja el aire azul.
   Sin él, la foto se corta con un canto duro a media pantalla. */
.escena__horizonte {
  position: absolute; inset: 0;
  /* velo neutro: integra el edificio con el papel sin teñirlo. El sol
     mueve las sombras y el brillo del vidrio, pero ya no pinta color. */
  background:
    radial-gradient(58vmax 50vmax at 18% 6%,  rgb(255 255 255 / .58), transparent 62%),
    radial-gradient(54vmax 48vmax at 86% 20%, color-mix(in oklab, var(--bg-200) 55%, transparent), transparent 62%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--papel) 52%, transparent) 0%,
      color-mix(in oklab, var(--papel) 62%, transparent) 48%,
      color-mix(in oklab, var(--papel) 78%, transparent) 100%);
}

:root[data-cielo="noche"] .escena__horizonte {
  background:
    radial-gradient(32vmax 28vmax at var(--sol-x) 112%, oklch(.42 .12 262 / .60), transparent 70%),
    radial-gradient(58vmax 50vmax at 18% 6%,  oklch(.26 .075 258 / .95), transparent 66%),
    radial-gradient(62vmax 54vmax at 86% 28%, oklch(.23 .085 254 / .92), transparent 64%),
    linear-gradient(180deg,
      color-mix(in oklab, #0a1d4a 88%, transparent) 0%,
      color-mix(in oklab, #061230 90%, transparent) 58%,
      color-mix(in oklab, #040d24 92%, transparent) 100%);
}
:root[data-cielo="horaazul"] .escena__horizonte {
  background:
    radial-gradient(30vmax 26vmax at var(--sol-x) 96%, oklch(.80 .05 250 / .50), transparent 66%),
    radial-gradient(56vmax 48vmax at 20% 8%, oklch(.80 .06 250 / .80), transparent 64%),
    linear-gradient(180deg,
      color-mix(in oklab, #c8d6ec 72%, transparent) 0%,
      color-mix(in oklab, #e6ecf5 70%, transparent) 60%,
      color-mix(in oklab, var(--papel) 74%, transparent) 100%);
}


/* campo de energía generado en vivo (lo pinta app.js) */
.escena__campo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
/* apagado sobre el workspace (29-jul): sobre la foto de la sede ensucia.
   El del portal de entrada (#campoGate) sigue encendido. */
#campo { display: none; }

/* trama técnica: rejilla finísima sobre todo el lienzo */
.escena__trama {
  position: absolute; inset: 0;
  filter: url(#grano);
  opacity: .05;
  mix-blend-mode: soft-light;
}


/* =========================================================
   CORCHETES DE REGISTRO — la firma del sistema.
   Un solo pseudo-elemento: se dibuja un marco y se enmascara
   para dejar únicamente las 4 esquinas en L. Al acercarse el
   cursor, los corchetes "encuadran" el panel.
   ========================================================= */
.marco { position: relative; }
.marco::before {
  content: "";
  position: absolute; inset: 8px; pointer-events: none; z-index: 3;
  border: 1px solid var(--rojo-22);
  border-radius: 8px;
  opacity: .85;
  -webkit-mask:
    linear-gradient(#000, #000) 0 0 / 15px 15px no-repeat,
    linear-gradient(#000, #000) 100% 0 / 15px 15px no-repeat,
    linear-gradient(#000, #000) 0 100% / 15px 15px no-repeat,
    linear-gradient(#000, #000) 100% 100% / 15px 15px no-repeat;
  mask:
    linear-gradient(#000, #000) 0 0 / 15px 15px no-repeat,
    linear-gradient(#000, #000) 100% 0 / 15px 15px no-repeat,
    linear-gradient(#000, #000) 0 100% / 15px 15px no-repeat,
    linear-gradient(#000, #000) 100% 100% / 15px 15px no-repeat;
  transition: inset 260ms var(--out), border-color 200ms ease, opacity 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .marco:hover::before { inset: 5px; border-color: var(--rojo-40); opacity: 1; }
}

/* =========================================================
   PORTAL DE ENTRADA — marca TU MARCA (azul noche)
   ========================================================= */
.gate {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background:
    radial-gradient(90% 70% at 50% -18%, #0b2350 0%, transparent 62%),
    radial-gradient(70% 55% at 50% 118%, #05122e 0%, transparent 60%),
    var(--canal-noche);
  color: #e6eefb;
  padding: 24px;
  overflow: hidden;
}
.gate__fondo { position: absolute; inset: 0; pointer-events: none; }
.gate__campo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
.gate__glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.gate__glow--a {
  width: 480px; height: 480px; left: -160px; top: -180px;
  background: radial-gradient(circle, rgba(30, 110, 220, .4), transparent 65%);
  animation: gateDeriva 14s ease-in-out infinite alternate;
}
.gate__glow--b {
  width: 420px; height: 420px; right: -150px; bottom: -170px;
  background: radial-gradient(circle, rgba(52, 198, 255, .18), transparent 65%);
  animation: gateDeriva 17s ease-in-out infinite alternate-reverse;
}
@keyframes gateDeriva {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(46px, 30px, 0) scale(1.08); }
}
.gate__inner {
  position: relative;
  width: min(470px, 100%);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  animation: gateEntra .7s var(--out) both;
}
@keyframes gateEntra {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.gate__icon { width: 54px; height: auto; margin: 0 auto 16px; filter: drop-shadow(0 6px 24px rgba(52, 198, 255, .3)); }
.gate__word { display: flex; align-items: center; justify-content: center; gap: 12px; }
.gate__word img { height: 20px; width: auto; }
.gate__live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0;
  color: var(--canal-cyan);
  border: 1px solid rgba(52, 198, 255, .4);
  border-radius: 24px; padding: 4px 10px 4px 8px;
}
.gate__live i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--canal-cyan);
  box-shadow: 0 0 8px rgba(52, 198, 255, .95);
  animation: late 2.2s ease-in-out infinite;
}
@keyframes late { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.gate__tag { margin-top: 14px; font-size: 13px; color: rgba(190, 208, 235, .74); letter-spacing: .02em; }
.gate__clientes { width: 100%; margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.cliente {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  width: 100%; text-align: left;
  border-radius: var(--r-lg);
  padding: 16px 18px;
  overflow: hidden;
}
.cliente--activo {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(52, 198, 255, .28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px -22px rgba(0, 40, 120, .7), 0 0 22px rgba(52, 198, 255, .35);
  transition: transform .3s var(--out), background .25s ease, border-color .25s ease;
}
.cliente--activo::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent var(--barrido), rgba(120, 220, 255, .16) calc(var(--barrido) + 12%), transparent calc(var(--barrido) + 26%));
  animation: barrer 3.4s linear infinite;
}
@keyframes barrer { to { --barrido: 110%; } }
@media (hover: hover) and (pointer: fine) {
  .cliente--activo:hover { background: rgba(255, 255, 255, .09); border-color: rgba(52, 198, 255, .5); transform: translateY(-2px); }
  .cliente--activo:hover .cliente__go { transform: translateX(3px); color: var(--canal-cyan); }
}
.cliente--activo:active { transform: scale(.985); }
.cliente__logo {
  flex: none; display: grid; place-items: center;
  width: 118px; height: 44px; border-radius: var(--r-sm);
  background: linear-gradient(150deg, var(--rojo-tinta), #002d60);
  box-shadow: inset 0 1px 0 rgba(255, 190, 196, .25), 0 8px 18px -8px rgba(90, 0, 14, .8);
}
.cliente__logo img { height: 15px; width: auto; }
.cliente__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cliente__txt b { font-size: 15px; font-weight: 650; color: #f2f7ff; letter-spacing: .01em; }
.cliente__txt small { font-size: 12px; color: rgba(174, 197, 230, .78); }
.cliente__go { color: rgba(174, 197, 230, .72); transition: transform .3s var(--resorte), color .2s ease; }
.cliente__progreso {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--canal-cyan), #7ad9ff);
  box-shadow: 0 0 10px rgba(52, 198, 255, .8);
  border-radius: 2px;
}
.gate--auto .cliente__progreso { animation: llenar 1.6s linear forwards; }
@keyframes llenar { from { width: 0; } to { width: 100%; } }
.cliente--proximo { border: 1.5px dashed rgba(120, 170, 240, .2); color: rgba(174, 197, 230, .55); cursor: default; }
.cliente--proximo .cliente__plus {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-sm);
  border: 1px dashed rgba(120, 170, 240, .28);
  font-size: 20px; font-weight: 300; color: rgba(120, 170, 240, .5);
}
.cliente--proximo b { font-size: 14px; font-weight: 550; color: rgba(210, 224, 244, .6); }
.cliente--proximo small { font-family: var(--mono); font-size: 13px; letter-spacing: 0; color: rgba(120, 170, 240, .42); }
.gate__foot { margin-top: 42px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0; color: rgba(148, 170, 205, .5); }
.gate--out { animation: gateSale .45s var(--out) forwards; pointer-events: none; }
@keyframes gateSale { to { opacity: 0; transform: scale(1.03); filter: blur(6px); } }
.app--in { animation: appEntra .5s var(--out) both; }
@keyframes appEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* =========================================================
   TOPBAR — cerámica blanca sobre vidrio, con riel de corriente
   ========================================================= */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px clamp(16px, 4vw, 28px);
  padding-top: calc(11px + env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, rgba(6, 26, 56, .82), rgba(6, 26, 56, .62));
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border-bottom: 1px solid var(--filo-fino);
}
/* la corriente de la red cruzando la barra: latido de la conexión */
.topbar__corriente {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, var(--rojo-14) 20%, var(--rojo-14) 80%, transparent);
}
.topbar__corriente::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 22%;
  background: linear-gradient(90deg, transparent, var(--rojo), transparent);
  box-shadow: 0 0 10px var(--rojo-70);
  animation: corriente 6.5s var(--inout) infinite;
}
@keyframes corriente {
  0%   { transform: translateX(-120%); opacity: 0; }
  12%  { opacity: 1; }
  60%  { opacity: 1; }
  72%, 100% { transform: translateX(560%); opacity: 0; }
}
.topbar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.volver {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 12px;
  color: var(--tinta-2);
  border: 1px solid transparent;
  transition: background .2s ease, transform .2s var(--out), border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .volver:hover { background: var(--rojo-8); border-color: var(--rojo-14); color: var(--rojo-tinta); transform: translateX(-1px); }
}
.volver:active { transform: scale(.92); }
.chipbg {
  flex: none; display: grid; place-items: center;
  height: 32px; padding: 0 13px; border-radius: 8px;
  background: linear-gradient(150deg, var(--rojo), var(--rojo-hondo));
  box-shadow: inset 0 1px 0 rgba(150, 200, 255, .35), 0 6px 16px -8px color-mix(in srgb, var(--rojo) 70%, transparent);
}
.chipbg img { height: 12px; width: auto; }
.topbar__txt { display: flex; flex-direction: column; min-width: 0; }
.topbar__txt strong { font-size: 14.5px; font-weight: 650; letter-spacing: -.015em; white-space: nowrap; color: var(--tinta); }
.statusline {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .02em;
  color: var(--gris); white-space: nowrap; min-width: 0;
}
.statusline > span { overflow: hidden; text-overflow: ellipsis; }
.dot {
  width: 6px; height: 6px; border-radius: 2px; flex: none;
  background: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 16%, transparent), 0 0 8px color-mix(in srgb, var(--verde) 70%, transparent);
  animation: latir 2.6s ease-in-out infinite;
}
.dot--warn { background: var(--ambar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ambar) 16%, transparent), 0 0 8px color-mix(in srgb, var(--ambar) 60%, transparent); }
.dot--off  { background: var(--gris-3); box-shadow: 0 0 0 3px rgba(174, 174, 178, .2); animation: none; }
@keyframes latir { 0%, 100% { opacity: 1; } 55% { opacity: .45; } }
.topbar__tools { display: flex; align-items: center; gap: 8px; }
.herr {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 12px;
  color: var(--rojo);
  background: var(--vidrio-2);
  border: 1px solid var(--filo);
  box-shadow: var(--s1), var(--realce);
  transition: transform .2s var(--out), box-shadow .25s ease, color .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .herr:hover { transform: translateY(-1px); box-shadow: var(--s2), 0 0 0 3px var(--rojo-8); border-color: var(--rojo-22); }
}
.herr:active { transform: scale(.92); }
.herr.is-loading svg { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* =========================================================
   ESCENARIO DE CONTENIDO
   ========================================================= */
.stage { max-width: var(--carril); margin: 0 auto; padding: 26px clamp(16px, 4vw, 28px) 40px; }

/* --- conmutador de pestañas con lente deslizante --- */
.tabs {
  position: relative;
  display: inline-flex; gap: 2px;
  background: var(--vidrio);
  border: 1px solid var(--filo);
  box-shadow: var(--s1), var(--realce);
  backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border-radius: 16px; padding: 3px; margin-bottom: 22px;
}
/* la lente: la pastilla de azul institucional que viaja bajo la pestaña
   activa. Es el único azul BG sólido del marco, y por eso se lee como
   "usted está aquí" sin necesidad de más señales. */
.tabs__lente {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: var(--lw, 0px); transform: translateX(var(--lx, 0px));
  border-radius: 12px;
  background: linear-gradient(180deg, var(--bg-600), var(--bg-700));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 1px 2px rgba(0, 6, 20, .5),
    0 8px 18px -10px rgba(0, 64, 144, .9),
    0 0 0 1px rgba(122, 196, 255, .22);
  transition: transform .32s var(--drawer), width .32s var(--drawer);
}
.tabs__lente::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--rojo), transparent);
  box-shadow: 0 0 8px var(--rojo-40);
}
.tab {
  position: relative; z-index: 1;
  border-radius: 12px; padding: 8px 20px;
  font-size: 13.5px; font-weight: 600; color: var(--gris);
  letter-spacing: -.01em;
  transition: color .2s ease, transform .18s var(--out);
}
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--tinta); } }
.tab:active { transform: scale(.97); }
.tab.is-active { color: var(--tinta); }

.stale {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; padding: 11px 15px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ambar) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--ambar) 26%, transparent);
  color: var(--ambar); font-size: 13px;
}

/* =========================================================
   CONSOLA — el instrumento maestro de la red
   ========================================================= */
.hero {
  position: relative;
  container-type: inline-size;
  border-radius: var(--r-xl);
  padding: 26px clamp(20px, 3vw, 34px) 24px;
  color: var(--tinta);
  /* hairline superior encendido + cuerpo de vidrio (en el fondo, no en un
     pseudo-elemento: ::before queda libre para los corchetes de registro) */
  background:
    linear-gradient(90deg, transparent, var(--rojo-40) 14%, var(--rojo) 50%, var(--rojo-40) 86%, transparent) top left / 100% 1px no-repeat,
    radial-gradient(130% 100% at 84% -10%, rgba(122, 196, 255, .14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 100%);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid var(--filo);
  box-shadow: var(--s2), var(--realce);
  overflow: hidden; margin-bottom: 34px;
  animation: subir .55s var(--out) both;
}
@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero__glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(52px); }
.hero__glow--a {
  width: 380px; height: 380px; right: -110px; top: -190px;
  background: radial-gradient(circle, var(--rojo-14), transparent 66%);
  animation: heroDeriva 14s ease-in-out infinite alternate;
}
.hero__glow--b {
  width: 300px; height: 300px; left: 4%; bottom: -190px;
  background: radial-gradient(circle, var(--rojo-8), transparent 66%);
  animation: heroDeriva 18s ease-in-out infinite alternate-reverse;
}
@keyframes heroDeriva { from { transform: translate3d(0,0,0); } to { transform: translate3d(-34px, 20px, 0); } }

/* el pulso de la red: 24 h agregadas de todas las sucursales */
.consola__onda { position: relative; height: 138px; min-width: 0; }
.consola__pulso {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 100%);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 100%);
}

.hero__head {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 22px;
  border-bottom: 1px solid var(--filo-fino);
}
.hero__head h2 { font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--tinta); }
.hero__mes {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .1em;
  color: var(--rojo-tinta); white-space: nowrap;
  padding: 4px 9px; border-radius: 8px;
  background: var(--rojo-5); border: 1px solid var(--rojo-14);
}

/* fila de lectura: número maestro | onda de la red */
.consola__lectura {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(230px, .82fr) minmax(0, 1.7fr);
  gap: clamp(20px, 4vw, 48px); align-items: center;
}

.kpi { display: flex; flex-direction: column; min-width: 0; }
.kpi__label {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0; color: var(--gris-2);
}
.kpi__value {
  font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
.kpi__unit { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0; color: var(--gris-2); }

/* ---- lectura maestra ---- */
.kpi--maestro { position: relative; padding-left: 22px; }
.kpi--maestro::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 30px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--rojo), color-mix(in srgb, var(--rojo) 12%, transparent));
  box-shadow: 0 0 14px var(--rojo-40);
}
.kpi--maestro .kpi__label { color: var(--rojo-tinta); }
.kpi__fila { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 8px 0 0; }
.kpi--maestro .kpi__value {
  font-size: clamp(56px, 8.4cqi, 96px);
  font-weight: 800; letter-spacing: -.05em; line-height: .92;
  /* la cifra maestra no se apaga: baja de blanco a azul luminoso, como
     un tubo encendido. Con gris se veía sucia sobre el azul. */
  background: linear-gradient(172deg, #ffffff 22%, #9fd4ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(122, 196, 255, .28));
}
.kpi--maestro .kpi__unit {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0;
  color: var(--tinta-2);
}
.kpi__pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.kpi__nota {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--gris-3);
}
.kpi__delta {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  padding: 4px 8px; border-radius: 8px; font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.kpi__delta.is-up   { color: var(--ambar); background: color-mix(in srgb, var(--ambar) 12%, transparent); }
.kpi__delta.is-down { color: var(--verde); background: color-mix(in srgb, var(--verde) 11%, transparent); }

/* ---- banco de instrumentos: los otros 4 indicadores, en fila ---- */
.kpis {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 30px; border-top: 1px solid var(--filo-fino);
}
.kpis .kpi {
  gap: 8px; padding: 18px 20px 4px;
  border-left: 1px solid var(--filo-fino);
  transition: background .22s ease;
}
.kpis .kpi:first-child { border-left: 0; padding-left: 0; }
/* peine de escala: la firma de instrumento bajo cada lectura */
.kpis .kpi::after {
  content: "";
  height: 6px; margin-top: 4px; opacity: .5;
  background-image: repeating-linear-gradient(90deg, var(--gris-3) 0 1px, transparent 1px 9px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 82%);
  mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 82%);
}
@media (hover: hover) and (pointer: fine) {
  .kpis .kpi:hover { background: linear-gradient(180deg, var(--rojo-5), transparent); }
  .kpis .kpi:hover .kpi__label { color: var(--rojo-tinta); }
}
.kpis .kpi__value { font-size: clamp(24px, 3.1cqi, 34px); font-weight: 780; letter-spacing: -.035em; line-height: 1; }

.hero__foot {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0;
  color: var(--gris-2);
}
.hero__foot svg { color: var(--rojo); }

/* =========================================================
   ENCABEZADOS DE SECCIÓN
   ========================================================= */
.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 18px; }
.sechead h2 {
  position: relative; font-size: 13px; font-weight: 700;
  font-family: var(--mono); letter-spacing: 0;
  color: var(--tinta); padding-left: 16px;
}
.sechead h2::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--rojo); box-shadow: 0 0 10px var(--rojo-40);
}
.sechead__hint { font-size: 12.5px; color: var(--gris); text-align: right; }
.sechead--rep { margin-top: 4px; }
.empty { color: var(--gris); font-size: 14px; padding: 26px 4px; text-align: center; }

/* =========================================================
   VITRINA DE SUCURSALES — módulos de instrumento
   ========================================================= */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }

.card {
  position: relative;
  container-type: inline-size;
  display: flex; flex-direction: column;
  text-align: left;
  border-radius: var(--r-lg);
  padding: 17px 19px 16px 22px;
  background:
    radial-gradient(120% 100% at 88% -10%, rgba(122, 196, 255, .10) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--filo);
  box-shadow: var(--s1), var(--realce);
  transform:
    perspective(1200px)
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translateY(var(--lift, 0px));
  transition: transform .5s var(--out), box-shadow .3s var(--out), border-color .25s ease;
  will-change: transform;
  animation: cardEntra .5s var(--out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
  overflow: hidden;
}
@keyframes cardEntra {
  from { opacity: 0; transform: perspective(1200px) translateY(14px) scale(.985); }
  to   { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    --lift: -5px;
    transition-duration: .18s;
    box-shadow: var(--s3), 0 0 0 1px var(--rojo-14);
    border-color: var(--rojo-22);
  }
}
.card:active { --lift: -2px; }

/* riel de corriente lateral: se enciende y le viaja un pulso */
.card__riel {
  position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px;
  border-radius: 0 2px 2px 0; overflow: hidden;
  background: linear-gradient(180deg, transparent, var(--rojo-22) 22%, var(--rojo-22) 78%, transparent);
  transition: opacity .25s ease;
  opacity: .7;
}
.card__riel::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -40%; height: 40%;
  background: linear-gradient(180deg, transparent, var(--rojo), transparent);
  box-shadow: 0 0 10px var(--rojo-70);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__riel { opacity: 1; }
  .card:hover .card__riel::after { opacity: 1; animation: rielPulso 1.5s var(--inout) infinite; }
}
@keyframes rielPulso {
  from { transform: translateY(0); }
  to   { transform: translateY(350%); }
}
.card--alerta .card__riel { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ambar) 45%, transparent) 22%, color-mix(in srgb, var(--ambar) 45%, transparent) 78%, transparent); }

/* halo especular que sigue al cursor */
.card::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--rojo-8), transparent 62%);
}
@media (hover: hover) and (pointer: fine) { .card:hover::after { opacity: 1; } }

.card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
/* estado como LED de instrumento */
.card__estado {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0;
  padding: 4px 9px 4px 7px; border-radius: 8px;
}
.card__estado i {
  width: 6px; height: 6px; border-radius: 2px; background: currentColor;
  box-shadow: 0 0 7px currentColor;
}
.card--ok     .card__estado { color: var(--verde); background: color-mix(in srgb, var(--verde) 10%, transparent); }
.card--ok     .card__estado i { animation: latir 2.6s ease-in-out infinite; }
.card--alerta .card__estado { color: var(--ambar); background: color-mix(in srgb, var(--ambar) 12%, transparent); }
.card--alerta .card__estado i { animation: latir 1.1s ease-in-out infinite; }
.card--sin    .card__estado { color: var(--gris); background: rgba(120, 120, 128, .1); }
.card__last { font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; color: var(--gris-2); white-space: nowrap; }
.card__name { font-size: 17.5px; font-weight: 680; letter-spacing: -.022em; margin-bottom: 14px; color: var(--tinta); }

.card__body { display: flex; gap: 16px; align-items: stretch; }
.card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card__hoy { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card__hoy b {
  font-size: clamp(26px, 9.5cqi, 32px); font-weight: 780; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--tinta); line-height: 1;
}
.card__hoy small { font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--gris-2); }
.card__delta {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  padding: 3px 7px; border-radius: 8px; font-variant-numeric: tabular-nums;
}
.card__delta.is-up   { color: var(--ambar); background: color-mix(in srgb, var(--ambar) 12%, transparent); }
.card__delta.is-down { color: var(--verde); background: color-mix(in srgb, var(--verde) 11%, transparent); }

/* la "pantalla" del instrumento: rejilla + curva viva */
.card__pantalla {
  position: relative; margin-top: 12px; height: 52px;
  border-radius: 8px; overflow: hidden;
  /* la "pantalla" del instrumento: un hueco hundido en la lámina,
     no una caja clara pegada encima */
  background:
    linear-gradient(180deg, rgba(0, 10, 28, .34), rgba(0, 10, 28, .16));
  box-shadow: inset 0 1px 3px rgba(0, 6, 20, .4), inset 0 0 0 1px var(--filo-fino);
}
.card__pantalla::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(140, 195, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 195, 255, .07) 1px, transparent 1px);
  background-size: 100% 13px, 26px 100%;
}
.card__spark { position: relative; width: 100%; height: 52px; display: block; }
.card__sinserie {
  display: grid; place-items: center; height: 52px; margin-top: 12px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0; color: var(--gris-2);
  border: 1px dashed var(--filo); border-radius: 8px;
}

/* gauge HVAC con ticks (lo dibuja app.js) */
.card__dona { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 2px; }
.dona { position: relative; width: 82px; height: 82px; }
.dona canvas { width: 82px; height: 82px; display: block; }
.dona__pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 15px; font-weight: 780; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
.card__dona small { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--gris-2); }

/* medidor de cargas segmentado (barra LED) */
.card__cargas { margin-top: 15px; }
.cbar {
  position: relative; display: flex; gap: 0;
  height: 10px; border-radius: 24px; overflow: hidden;
  background: color-mix(in oklab, var(--tinta) 8%, transparent);
  box-shadow: inset 0 1px 2px oklch(var(--sh) / .10);
}
.cbar i {
  display: block; height: 100%; min-width: 2px;
  transform-origin: left;
  animation: cbarCrece .7s var(--out) both;
  animation-delay: calc(.15s + var(--i, 0) * 45ms);
}
@keyframes cbarCrece { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cbar__leg { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.cbar__leg span {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0;
  color: var(--gris); font-variant-numeric: tabular-nums;
}
.cbar__leg i { width: 6px; height: 6px; border-radius: 1.5px; flex: none; }
.cbar__leg b { color: var(--tinta); font-weight: 700; }
.card__cargas--vacio {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--gris-2);
  border: 1px dashed rgba(0, 0, 0, .12); border-radius: 8px; padding: 8px 10px; text-align: center;
}

.card__mini { display: flex; gap: 24px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--filo-fino); }
.card__mini span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card__mini label { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--gris-2); cursor: inherit; }
.card__mini b { font-size: 13.5px; font-weight: 700; letter-spacing: -.018em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.card__mini b.is-solar { color: var(--c-solar); }

.card--sin { opacity: .66; }
.card--sin .card__hoy b { color: var(--gris); }

/* esqueletos de carga */
.card--skel { pointer-events: none; min-height: 250px; justify-content: space-between; gap: 12px; }
.skel {
  border-radius: 8px;
  background: linear-gradient(100deg, rgba(0,0,0,.05) 38%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.05) 62%);
  background-size: 220% 100%; animation: brillar 1.4s ease-in-out infinite;
}
@keyframes brillar { from { background-position: 130% 0; } to { background-position: -90% 0; } }

/* =========================================================
   DETALLE — "la sala": el reporte hecho instrumento
   ========================================================= */
/* la sala es una vista más dentro de .stage (spec BG 28-jul §3): ya no
   es una capa fija con velo, así que no lleva posición ni centrado */
.detail { position: relative; }
.detail__card {
  position: relative;
  width: 100%;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 80% at 80% -6%, rgba(122, 196, 255, .12) 0%, transparent 58%),
    linear-gradient(180deg, rgba(9, 30, 62, .96), rgba(5, 20, 44, .97));
  backdrop-filter: blur(34px) saturate(1.4);
  -webkit-backdrop-filter: blur(34px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--s3), var(--realce);
  padding: 24px clamp(18px, 3vw, 30px) 26px;
}
@keyframes sala { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: none; } }
.detail__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--filo-fino);
}
.detail__title { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.detail__title h2 { font-size: clamp(23px, 2.6vw, 29px); font-weight: 780; letter-spacing: -.032em; color: var(--tinta); }
.detail__estado {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0; padding: 4px 9px; border-radius: 8px;
}
.detail__estado--ok        { color: var(--verde); background: color-mix(in srgb, var(--verde) 10%, transparent); }
.detail__estado--alerta    { color: var(--ambar); background: color-mix(in srgb, var(--ambar) 12%, transparent); }
.detail__estado--sin_datos { color: var(--gris);  background: rgba(120, 120, 128, .1); }
.detail__dev {
  font-family: var(--mono); font-size: 13px; color: var(--rojo-tinta);
  background: var(--rojo-5); border: 1px solid var(--rojo-14);
  border-radius: 8px; padding: 3px 8px; letter-spacing: .04em;
}
.cerrar {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 12px;
  color: var(--tinta-2); background: rgba(0, 0, 0, .04);
  border: 1px solid var(--filo-fino);
  transition: background .2s ease, transform .2s var(--out), color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .cerrar:hover { background: rgba(0, 0, 0, .08); color: var(--tinta); } }
.cerrar:active { transform: scale(.9); }
.cerrar--claro { background: rgba(255, 255, 255, .12); color: #f2f2f4; border-color: rgba(255,255,255,.2); }
.cerrar--claro:hover { background: rgba(255, 255, 255, .24); color: #fff; }

/* paneles internos del detalle */
.detail__chartwrap, .detail__dist, .detail__metrics {
  position: relative;
  border: 1px solid var(--filo);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .62);
  box-shadow: var(--realce), var(--s1);
}
.detail__chartwrap { padding: 15px 17px 13px; }
.detail__charthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.detail__chartlbl {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0; color: var(--rojo-tinta);
}
.rng { display: inline-flex; gap: 2px; background: rgba(120, 120, 128, .1); border: 1px solid var(--filo-fino); border-radius: 12px; padding: 2px; }
.rng__btn {
  font-family: var(--mono); border-radius: 8px; padding: 5px 11px;
  font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--gris);
  transition: background .2s var(--out), color .2s ease, box-shadow .2s ease, transform .15s var(--out);
}
.rng__btn:active { transform: scale(.95); }
.rng__btn.is-active {
  background: linear-gradient(180deg, var(--bg-600), var(--bg-700));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 2px 8px -3px rgba(0,64,144,.9);
}

.detail__lienzo { position: relative; }
#dChart { width: 100%; height: 280px; display: block; }
/* lectura de cruz: los valores exactos bajo el cursor */
.lectura {
  position: absolute; top: 6px; left: 50px; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 10px; border-radius: 12px;
  background: rgba(6, 26, 56, .94);
  border: 1px solid var(--filo);
  box-shadow: var(--s2);
  transform: translateX(var(--lecx, 0px));
  transition: transform .09s linear, opacity .15s ease;
  white-space: nowrap; z-index: 2;
}
.lectura__h { font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--gris-2); }
.lectura__v { font-size: 13px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tinta); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 12px; }
.legend__item { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--gris); }
.legend__sw { width: 8px; height: 8px; border-radius: 2px; }
.legend__sw--hvac  { background: var(--c-hvac); }
.legend__sw--tomas { background: var(--c-tomas); }
.legend__sw--luces { background: var(--c-luces); }
.legend__sw--ups   { background: var(--c-ups); }
.legend__sw--otros { background: var(--c-otros); }
.legend__sw--solar { background: var(--c-solar); }
.legend__sw--resto { background: var(--c-tomas); }

/* distribución de cargas del mes */
.detail__dist { margin-top: 15px; padding: 15px 17px 17px; }
.dist__head { margin-bottom: 14px; }
.dist__lbl { font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: 0; color: var(--rojo-tinta); }
.dist__lbl b { color: var(--tinta); }
.dist__body { display: flex; align-items: center; gap: 24px; }
.dist__ring { position: relative; flex: none; width: 142px; height: 142px; }
.dist__ring canvas { width: 142px; height: 142px; display: block; }
.dist__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.dist__center b { font-size: 21px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.dist__center small { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0; color: var(--gris-2); }
.dist__list { list-style: none; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dist__list li {
  display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center;
  gap: 12px; font-size: 12.5px; padding: 6px 8px; border-radius: 8px;
  transition: background .18s ease;
}
@media (hover: hover) and (pointer: fine) { .dist__list li:hover { background: rgba(0,0,0,.035); } }
.dist__list .d-sw { width: 10px; height: 10px; border-radius: 3px; }
.dist__list .d-nom { font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; color: var(--gris); }
.dist__list .d-kwh { color: var(--tinta); font-weight: 650; font-variant-numeric: tabular-nums; }
.dist__list .d-pct { color: var(--rojo-tinta); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }

/* indicadores del mes */
.detail__metrics { margin-top: 16px; padding: 15px 17px 17px; }
.metrics__lbl { display: block; margin: 0 0 13px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: 0; color: var(--rojo-tinta); }
.detail__stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; }
.detail__stats--vivo { margin-top: 16px; }
.stat {
  display: flex; flex-direction: column; gap: 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--filo-fino);
  background: rgba(255, 255, 255, .7);
  padding: 11px 13px;
  box-shadow: 0 2px 8px -6px rgba(0, 0, 0, .16);
  transition: transform .2s var(--out), border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .stat:hover { transform: translateY(-2px); border-color: var(--rojo-22); } }
.stat label { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--gris-2); }
.stat b { font-size: 16px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tinta); }

/* =========================================================
   REPORTES
   ========================================================= */
.rtype { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.rtype__btn {
  position: relative; display: flex; align-items: center; gap: 12px; text-align: left;
  border-radius: var(--r-lg); padding: 15px 17px;
  background: var(--vidrio);
  backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--filo);
  box-shadow: var(--s1), var(--realce);
  transition: transform .25s var(--out), box-shadow .25s ease, border-color .2s ease, background .2s ease;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .rtype__btn:hover { transform: translateY(-2px); box-shadow: var(--s2), var(--realce); border-color: var(--rojo-22); }
}
.rtype__btn:active { transform: scale(.985); }
.rtype__btn.is-active {
  border-color: var(--rojo-40);
  background: linear-gradient(180deg, rgba(255,255,255,.10), var(--rojo-8));
  box-shadow: 0 0 0 1px var(--rojo-22), var(--s1);
}
.rtype__btn.is-active::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--rojo), transparent);
  box-shadow: 0 0 10px var(--rojo-70);
}
.rtype__ic {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  color: var(--rojo); background: var(--rojo-5); border: 1px solid var(--rojo-14);
  transition: background .25s ease, color .25s ease, transform .3s var(--resorte);
}
.rtype__btn.is-active .rtype__ic {
  color: #fff; background: linear-gradient(150deg, var(--rojo), var(--rojo-hondo));
  border-color: transparent; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--rojo) 60%, transparent);
}
.rtype__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rtype__txt b { font-size: 14.5px; font-weight: 680; letter-spacing: -.015em; color: var(--tinta); }
.rtype__txt small { font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--gris); }

.repform {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  border-radius: var(--r-lg); background: var(--vidrio);
  backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--filo); box-shadow: var(--s1), var(--realce);
  padding: 19px; margin-bottom: 18px;
}
.repform__fields { display: flex; gap: 16px; flex-wrap: wrap; flex: 1; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 170px; }
.field label { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--gris-2); }
.field input, .field select {
  height: 42px; border-radius: 12px;
  border: 1px solid var(--filo);
  /* el campo es un hueco en la lámina: se hunde, no sobresale */
  background: rgba(2, 12, 30, .55);
  padding: 0 12px; font-size: 14px; color: var(--tinta);
  box-shadow: inset 0 1px 3px rgba(0, 6, 20, .5);
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* el ícono del selector de fecha nace negro: sin esto desaparece */
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="month"]::-webkit-calendar-picker-indicator,
.repform input::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6) sepia(.3) saturate(4) hue-rotate(175deg);
  opacity: .75; cursor: pointer;
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.field input[type="month"]::-webkit-calendar-picker-indicator:hover,
.repform input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.field input:focus, .field select:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-14); }
/* Mes + año como dos listas. Reemplazaron a <input type="month">, que en Safari
   no despliega calendario: allí el campo quedaba en blanco y había que adivinar
   el formato "2026-08". El mes se lleva el ancho porque su texto es más largo. */
.mespick { display: flex; gap: 8px; }
.mespick select { flex: 2 1 0; min-width: 0; }
.mespick select + select { flex: 1 1 0; }
.field select option { background: #06183a; color: var(--tinta); }
.repnota { font-size: 11.5px; color: var(--gris); max-width: 300px; line-height: 1.5; }
.repnota b { color: var(--rojo-tinta); font-weight: 650; }

.bigcta {
  position: relative; overflow: hidden;
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 26px; border-radius: 12px;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.012em; color: #ffffff;
  background: linear-gradient(160deg, var(--rojo) 0%, var(--rojo-hondo) 92%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--s-rojo);
  transition: transform .2s var(--out), box-shadow .25s ease, filter .2s ease;
}
.bigcta svg, .bigcta span { position: relative; z-index: 1; }
/* la carga que recorre el botón mientras se genera el reporte */
.bigcta__carga {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transform: translateX(-100%);
}
.bigcta.is-working .bigcta__carga { animation: cargar 1.5s linear infinite; }
@keyframes cargar { to { transform: translateX(100%); } }
@media (hover: hover) and (pointer: fine) {
  .bigcta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 22px 44px -18px color-mix(in srgb, var(--rojo) 60%, transparent); }
}
.bigcta:active { transform: scale(.97); }
.bigcta:disabled { opacity: .7; cursor: progress; transform: none; }

.repstatus {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0;
  color: var(--rojo-tinta); font-weight: 600; padding: 4px 2px 14px;
}
.pulso { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--rojo); animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { box-shadow: 0 0 0 0 var(--rojo-40); } 50% { box-shadow: 0 0 0 7px transparent; } }
.repstatus__t { color: var(--gris); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: .04em; }

.repskel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.repskel__page {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: var(--r-md);
  border: 1px solid var(--filo);
  background: rgba(255, 255, 255, .85);
  box-shadow: var(--s1); padding: 9% 10%;
  display: flex; flex-direction: column; gap: 8%;
}
/* barrido de escáner: se está "renderizando" la página */
.repskel__page::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 40%; top: -40%;
  background: linear-gradient(180deg, transparent, var(--rojo-8), transparent);
  animation: escaner 2.2s var(--inout) infinite;
}
@keyframes escaner { to { transform: translateY(350%); } }
.repskel__page i {
  display: block; height: 7%; border-radius: 8px;
  background: linear-gradient(100deg, rgba(0,0,0,.05) 38%, rgba(0,0,0,.11) 50%, rgba(0,0,0,.05) 62%);
  background-size: 220% 100%; animation: brillar 1.4s ease-in-out infinite;
}
.repskel__page .repskel__bloque { flex: 1; width: 100%; border-radius: 12px; }
.reperr {
  border-radius: var(--r-md); border: 1px solid var(--rojo-22);
  background: var(--rojo-8); color: var(--rojo-tinta); font-size: 13.5px; padding: 12px 15px; margin-bottom: 16px;
}

.report {
  border-radius: var(--r-xl); background: var(--vidrio);
  backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--filo); box-shadow: var(--s2), var(--realce);
  padding: 17px;
  animation: subir .5s var(--out) both;
}
.report__pages { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.report__frame {
  position: relative;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--filo);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, .18), 0 24px 48px -26px rgba(0, 0, 0, .3);
  transition: transform .3s var(--out), box-shadow .3s ease;
  padding: 0; line-height: 0;
}
@media (hover: hover) and (pointer: fine) {
  .report__frame:hover { transform: translateY(-3px); box-shadow: 0 8px 20px -8px rgba(0,0,0,.2), 0 36px 70px -28px rgba(0,0,0,.36); }
  .report__frame:hover .report__lupa { opacity: 1; transform: none; }
}
.report__frame:active { transform: scale(.99); }
.report__frame img { width: 100%; height: auto; }
.report__lupa {
  position: absolute; right: 10px; bottom: 10px;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 12px;
  color: #fff; background: color-mix(in srgb, var(--rojo) 92%, transparent);
  box-shadow: var(--s2);
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .25s var(--out);
}
.report__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 4px 2px; flex-wrap: wrap; }
.report__meta { font-family: var(--mono); font-size: 13px; letter-spacing: 0; color: var(--gris); }
.dl {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: 12px;
  font-size: 13.5px; font-weight: 700; text-decoration: none; color: #ffffff;
  background: linear-gradient(160deg, var(--rojo), var(--rojo-hondo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--s-rojo);
  transition: transform .2s var(--out), filter .2s ease;
}
@media (hover: hover) and (pointer: fine) { .dl:hover { transform: translateY(-1px); filter: brightness(1.06); } }
.dl:active { transform: scale(.96); }

/* =========================================================
   VISOR — modo cine
   ========================================================= */
.viewer {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  background: rgba(12, 12, 14, .93);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  animation: velo .25s ease both;
}
.viewer__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(16px, 4vw, 26px); padding-top: calc(14px + env(safe-area-inset-top, 0px)); color: #f2f2f4; }
.viewer__title { font-family: var(--mono); font-size: 13px; letter-spacing: 0; }
.viewer__stage { flex: 1; display: grid; place-items: center; padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px)); min-height: 0; }
.viewer__stage img {
  max-width: 100%; max-height: calc(100dvh - 110px); width: auto; height: auto;
  border-radius: var(--r-sm); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85);
  animation: sala .35s var(--out) both;
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--gris-2);
}
.foot__sello { display: inline-flex; align-items: center; gap: 8px; }
.foot__sello svg { color: var(--rojo); }
.foot__sep { color: rgba(110, 110, 115, .45); }
.foot__by { display: inline-flex; align-items: center; gap: 8px; }
.foot__chip {
  display: inline-grid; place-items: center; background: var(--canal-noche);
  border-radius: 8px; padding: 6px 9px; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .6);
}
.foot__chip img { height: 9px; width: auto; }

/* =========================================================
   CANDADO
   ========================================================= */
.lock {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 22px;
  background: rgba(3, 12, 28, .72);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
}
.lock__card {
  width: min(370px, 100%); border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(9, 30, 62, .97), rgba(5, 20, 44, .98));
  border: 1px solid var(--filo);
  box-shadow: var(--s3), var(--realce);
  padding: 32px 28px 26px; text-align: center;
  animation: sala .42s var(--out) both;
}
.lock__chip {
  display: inline-grid; place-items: center; height: 38px; padding: 0 16px; border-radius: 12px;
  background: linear-gradient(150deg, var(--rojo), var(--rojo-hondo));
  box-shadow: inset 0 1px 0 rgba(255, 200, 205, .35), 0 12px 24px -12px color-mix(in srgb, var(--rojo) 70%, transparent);
  margin-bottom: 18px;
}
.lock__chip img { height: 13px; width: auto; }
.lock__title { font-size: 19px; font-weight: 760; letter-spacing: -.025em; margin-bottom: 6px; color: var(--tinta); }
.lock__sub { font-size: 13px; color: var(--gris); margin-bottom: 20px; }
.lock form { display: flex; gap: 8px; }
.lock input {
  flex: 1; min-width: 0; height: 44px; border-radius: 12px;
  border: 1px solid var(--filo); background: rgba(2, 12, 30, .55); padding: 0 13px; font-size: 15px; color: var(--tinta);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lock input:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-14); }
.btn {
  height: 44px; padding: 0 18px; border-radius: 12px;
  font-size: 14px; font-weight: 700; color: #ffffff;
  background: linear-gradient(160deg, var(--rojo), var(--rojo-hondo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--s-rojo);
  transition: transform .2s var(--out), filter .2s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.96); }
.lock__err { margin-top: 13px; font-size: 12.5px; color: var(--rojo-tinta); }
.lock__by { margin-top: 20px; font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--gris-2); }

/* =========================================================
   TRANSICIÓN DE VISTAS (View Transitions API)
   Solo una .view está visible a la vez → el nombre nunca se
   duplica y el navegador cruza de una pantalla a la otra.
   ========================================================= */
.view:not([hidden]) { view-transition-name: vista; }

::view-transition-old(vista) {
  animation: vtSale .16s var(--inout) both;
}
::view-transition-new(vista) {
  animation: vtEntra .26s var(--out) both;
}
@keyframes vtSale  { to { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }
@keyframes vtEntra { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .consola__lectura { grid-template-columns: 1fr; gap: 16px; }
  .consola__onda { height: 118px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis .kpi:nth-child(3) { border-left: 0; padding-left: 0; }
  .kpis .kpi:nth-child(n+3) { border-top: 1px solid var(--filo-fino); margin-top: 6px; }
}
@media (max-width: 900px) {
  .rtype { grid-template-columns: 1fr; }
  .repform { flex-direction: column; align-items: stretch; }
  .bigcta { justify-content: center; }
  .report__pages { grid-template-columns: 1fr; }
  .repskel { grid-template-columns: 1fr; }
  .repskel__page:last-child { display: none; }
}
@media (max-width: 640px) {
  .stage { padding-top: 20px; }
  .tabs { display: flex; width: 100%; }
  .tab { flex: 1; text-align: center; padding: 9px 10px; }
  .hero { padding: 20px 17px 20px; margin-bottom: 26px; }
  .kpi--maestro { padding-left: 16px; }
  .kpi--maestro .kpi__value { font-size: clamp(48px, 17cqi, 72px); }
  .consola__onda { height: 104px; }
  /* sin velo lateral en pantalla chica: recortaba la primera etiqueta horaria */
  .consola__pulso { -webkit-mask-image: none; mask-image: none; }
  .kpis { grid-template-columns: 1fr 1fr; margin-top: 22px; }
  .kpis .kpi { padding: 15px 14px 4px; }
  .kpis .kpi__value { font-size: clamp(22px, 7cqi, 28px); }
  .sechead { flex-direction: column; gap: 3px; align-items: flex-start; }
  .sechead__hint { text-align: left; }
  .grid { grid-template-columns: 1fr; gap: 16px; }
  #dChart { height: 235px; }
  .detail__stats { grid-template-columns: 1fr 1fr; }
  .dist__body { flex-direction: column; align-items: stretch; gap: 16px; }
  .dist__ring { align-self: center; }
  .repnota { max-width: none; }
  .report__foot { justify-content: center; text-align: center; }
  .foot { flex-direction: column; gap: 8px; }
  .foot__sep { display: none; }
  .escena__torre { height: 62vh; opacity: .5; }
}
@keyframes hoja { from { opacity: .4; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@media (max-width: 360px) {
  .topbar__txt strong { font-size: 13px; }
  .chipbg { padding: 0 10px; }
}

/* =========================================================
   MOVIMIENTO REDUCIDO — se conserva el color y la opacidad,
   se elimina el desplazamiento (accesibilidad de movimiento)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .escena__torre { animation: none; transform: none; }
  .gate--auto .cliente__progreso { animation: none; width: 100%; }
  .card, .card:hover { transform: none; animation: none; opacity: 1; }
  .card::after, .card__riel::after, .cliente--activo::after,
  .topbar__corriente::after, .repskel__page::after { display: none; }
  .cbar i { animation: none; transform: none; }
  .skel, .repskel__page i { animation: none; background: rgba(0,0,0,.07); }
}

/* =========================================================
   LOGO TU CLIENTE — el wordmark va en blanco sobre los chips de acento
   ========================================================= */
.cliente__logo img, .chipbg img, .lock__chip img { filter: brightness(0) invert(1); }


/* =========================================================
   DASHBOARD DE SUCURSAL — spec "Arreglos plataforma BG"
   Mismo lenguaje instrumental del resto: paneles de vidrio,
   micro-tipografía monoespaciada y números tabulares.
   ========================================================= */
.sdash { display: flex; flex-direction: column; gap: 16px; }

/* --- barra superior: comunicación + periodo --- */
.sdash__barra {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--vidrio);
  border: 1px solid var(--filo);
  box-shadow: var(--realce), var(--s1);
}
.sdash__lbl {
  display: block; margin-bottom: 5px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0; color: var(--gris-2);
}
.sdash__com-val { display: inline-flex; align-items: center; gap: 8px; }
.sdash__com-val b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--tinta); }
.sdash__ult {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--gris);
}
.sdash__periodo { display: flex; flex-direction: column; align-items: flex-start; }
.sdash__periodo select {
  height: 38px; min-width: 190px; border-radius: 12px;
  border: 1px solid var(--filo); background: rgba(2, 12, 30, .55);
  padding: 0 12px; font-size: 14px; color: var(--tinta);
  box-shadow: inset 0 1px 3px rgba(0, 6, 20, .5);
}
.sdash__periodo select:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-14); }
.sdash__aviso {
  margin-top: 6px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em;
  color: var(--ambar); padding: 4px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--ambar) 12%, transparent);
}

/* --- paneles --- */
.sdash__panel {
  position: relative;
  padding: 15px 17px 16px; border-radius: var(--r-lg);
  background: var(--vidrio);
  border: 1px solid var(--filo);
  box-shadow: var(--realce), var(--s1);
}
.sdash__ptitulo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0; color: var(--rojo-tinta);
}
.sdash__phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sdash__phead .sdash__ptitulo { margin-bottom: 0; }
.sdash__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* --- selectores de serie --- */
.sdash__series { display: inline-flex; gap: 2px; background: rgba(120,120,128,.1); border: 1px solid var(--filo-fino); border-radius: 12px; padding: 2px; flex-wrap: wrap; }
.sser {
  font-family: var(--mono); border-radius: 8px; padding: 6px 11px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--gris);
  transition: background .2s var(--out), color .2s ease, box-shadow .2s ease, transform .15s var(--out);
}
.sser:active { transform: scale(.96); }
.sser.is-active {
  background: linear-gradient(180deg, var(--bg-600), var(--bg-700));
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 2px 10px -3px var(--rojo-40);
}

.sdash__lienzo { position: relative; }
#sChart { width: 100%; height: 320px; display: block; }

/* --- indicadores --- */
.sdash__kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.skpi {
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px 13px; border-radius: var(--r-md);
  border: 1px solid var(--filo-fino); background: var(--vidrio-3);
  box-shadow: 0 2px 8px -6px rgba(0,0,0,.16);
  transition: transform .2s var(--out), border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .skpi:hover { transform: translateY(-2px); border-color: var(--rojo-22); } }
.skpi label { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0; color: var(--gris-2); }
.skpi b { font-size: 17px; font-weight: 780; letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.skpi b em { font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--gris-2); margin-left: 4px; }
.skpi--nulo b { color: var(--gris-3); }

/* --- distribución de cargas y balance solar --- */
.sfila {
  display: grid; grid-template-columns: 11px minmax(0, 1fr) auto auto; align-items: center;
  gap: 8px; padding: 9px 4px; border-top: 1px solid var(--filo-fino);
  font-size: 13px;
}
.sfila:first-child { border-top: 0; }
.sfila i { width: 11px; height: 11px; border-radius: 3px; }
.sfila .n { font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; color: var(--gris); }
.sfila .v { font-weight: 680; font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }
.sfila .p { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rojo-tinta); min-width: 52px; text-align: right; }
.sfila--tot { border-top: 1px solid var(--rojo-22); }
.sfila--tot .v, .sfila--tot .n { color: var(--tinta); font-weight: 800; }

/* barra de reparto solar */
.sbar {
  display: flex; height: 12px; border-radius: 24px; overflow: hidden; margin: 4px 0 12px;
  background: color-mix(in oklab, var(--tinta) 8%, transparent);
  box-shadow: inset 0 1px 2px oklch(var(--sh) / .10);
}
.sbar i { height: 100%; }

/* --- HVAC dentro/fuera de horario --- */
.sdash__hvac { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: center; }
.shvac { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--filo-fino); background: var(--vidrio-3); }
.shvac label { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--gris-2); }
.shvac b { font-size: 19px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.shvac small { font-family: var(--mono); font-size: 12px; color: var(--gris); }
.shvac--fuera b { color: var(--ambar); }

@media (max-width: 720px) {
  .sdash__fila { grid-template-columns: 1fr; }
  #sChart { height: 260px; }
  .sdash__barra { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .skpi, .sser { transition: none; } }

/* --- nivel de detalle del gráfico (hora · día · mes) --- */
.sdash__nivel { display: inline-flex; gap: 2px; background: rgba(120,120,128,.1); border: 1px solid var(--filo-fino); border-radius: 12px; padding: 2px; }
.sniv {
  font-family: var(--mono); border-radius: 8px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--gris);
  transition: background .2s var(--out), color .2s ease, box-shadow .2s ease, transform .15s var(--out);
}
.sniv:active { transform: scale(.96); }
.sniv.is-active { background: var(--rojo); color: #04142e; box-shadow: 0 2px 8px -3px var(--rojo-40); }

/* =========================================================
   VISTA SOLAR — "Desempeño de Sistemas Fotovoltaicos"
   =========================================================
   Lenguaje: el de los reportes mensuales que recibe el banco
   (paneles translúcidos con filo de luz, un ícono de color por
   indicador, número grande y gauge que se lee de un vistazo),
   traducido al mundo blanco y llevado a acabado Apple:
   vidrio esmerilado REAL (blur + saturate), filos hairline,
   sombras amplias y bajas, radios generosos, mucho aire y
   solo tres colores de dato — azul = red · ámbar = solar ·
   violeta = exportada.
   ========================================================= */
:root {
  --f-red:   #2a72ff;          /* energía suministrada por la red */
  --f-solar: #ffd34d;          /* energía solar */
  --f-expo:  #a98bff;          /* energía exportada */

  /* vidrio del sistema: UNA receta, la misma para todos los planos */
  --vidrio-blur: saturate(125%) blur(18px);
  --filo-luz:  inset 0 1px 0 rgba(255,255,255,.17);
  --sombra-aire: 0 22px 44px -22px rgba(0, 6, 20, .72);
}

/* --- el plano de vidrio: paneles con profundidad real --- */
.sdash__panel, .sdash__barra, .solhero {
  -webkit-backdrop-filter: var(--vidrio-blur);
  backdrop-filter: var(--vidrio-blur);
  background:
    radial-gradient(130% 100% at 84% -10%, rgba(122, 196, 255, .13) 0%, transparent 60%),
    linear-gradient(168deg, rgba(255,255,255,.085), rgba(255,255,255,.028));
  border: 1px solid var(--filo);
  box-shadow: var(--filo-luz), var(--sombra-aire),
              inset 0 0 40px rgba(122, 196, 255, .05);
}
.sdash__panel { padding: 18px 20px 20px; border-radius: 20px; }

/* --- título de panel con ícono (como los reportes) --- */
.panel-tit {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0; color: var(--rojo-tinta);
}
.panel-tit .ico { display: inline-flex; color: var(--rojo); opacity: .9; }

/* =========== RESUMEN SOLAR — la lectura maestra =========== */
.solhero {
  container-type: inline-size;
  position: relative; overflow: hidden;
  padding: 26px 30px 16px; border-radius: 24px; margin-bottom: 14px;
}
.solhero__head {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.solhero__head .panel-tit { margin-bottom: 0; }
.solalcance {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--gris-2);
}

.solhero__lectura {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: clamp(24px, 5cqi, 54px);
  margin-top: 20px; flex-wrap: wrap;
}

/* gauge del aporte solar */
.solgauge { position: relative; flex: none; width: 158px; height: 158px; }
.solgauge canvas { width: 158px; height: 158px; display: block; }
.solgauge__txt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.solgauge__txt b {
  font-size: 31px; font-weight: 800; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
.solgauge__txt small {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0; color: var(--gris-2);
}

.solhero__total { flex: 1; min-width: 260px; }
.solhero__total .kpi__value { font-size: clamp(40px, 6.6cqi, 72px); }
.solhero__mix { margin-top: 18px; }
.solhero__total .cbar__leg { margin-top: 9px; }

/* banco de instrumentos: un ícono y un color por indicador */
.solkpis {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  margin-top: 26px; border-top: 1px solid var(--filo-fino);
}
.ikpi {
  --tinte: var(--rojo);
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 20px 16px; border-left: 1px solid var(--filo-fino);
  transition: background .24s var(--out);
}
.ikpi:first-child { border-left: 0; padding-left: 0; }
@media (hover: hover) and (pointer: fine) {
  .ikpi:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--tinte) 7%, transparent), transparent); }
}
.ikpi__top { display: flex; align-items: center; gap: 8px; }
.ikpi__top .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: 12px;
  color: var(--tinte);
  background: color-mix(in srgb, var(--tinte) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinte) 30%, transparent);
}
.ikpi__top label {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0; color: var(--gris-2);
}
.ikpi__val {
  font-size: clamp(20px, 2.7cqi, 27px); font-weight: 780;
  letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
.ikpi__val em {
  font-style: normal; font-family: var(--mono); font-size: 12px;
  font-weight: 600; color: var(--gris-2); margin-left: 5px;
}
.ikpi__prop { height: 6px; border-radius: 24px; background: color-mix(in oklab, var(--tinta) 8%, transparent); overflow: hidden; box-shadow: inset 0 1px 2px oklch(var(--sh) / .10); }
.ikpi__prop i { display: block; height: 100%; border-radius: 24px; animation: cbarCrece .7s var(--out) both .2s; transform-origin: left; }
.ikpi__pie { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--gris-3); }
.ikpi--nulo .ikpi__val { color: var(--gris-3); font-size: 17px; }

/* --- segmentador de fechas --- */
.rango { display: flex; flex-direction: column; gap: 12px; }
.rango__fechas { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.rango__fechas .field { min-width: 148px; }
.rango__ok {
  height: 38px; padding: 0 20px; border-radius: 12px;
  background: linear-gradient(180deg, var(--rojo-vivo), var(--rojo));
  color: #fff;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0;
  box-shadow: var(--filo-luz-btn, inset 0 1px 0 rgba(255,255,255,.28)), 0 6px 18px -8px var(--rojo-40);
  transition: transform .16s var(--out), box-shadow .24s ease, filter .24s ease;
}
.rango__ok:hover { filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 9px 22px -8px var(--rojo-40); }
.rango__ok:active { transform: scale(.975); }
.rango__rapidos {
  display: inline-flex; gap: 2px; width: fit-content; flex-wrap: wrap;
  background: rgba(120,120,128,.09); border: 1px solid var(--filo-fino);
  border-radius: 12px; padding: 2px;
}

/* --- encabezado de vista: título y segmentador en UN solo plano --- */
.vista__cab {
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  background:
    radial-gradient(130% 100% at 84% -10%, rgba(122, 196, 255, .13) 0%, transparent 60%),
    linear-gradient(168deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .028) 100%);
  border: 1px solid var(--filo);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .17),
    inset 0 0 40px rgba(122, 196, 255, .05),
    var(--s2);
  border-radius: 24px; padding: 18px 22px; margin-bottom: 14px;
}
.vista__tit { display: flex; align-items: flex-start; gap: 16px; }
.vista__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none; border-radius: 16px;
  color: var(--f-solar);
  background: color-mix(in srgb, var(--f-solar) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f-solar) 20%, transparent);
}
.vista__tit h2 {
  font-size: clamp(19px, 2.4vw, 25px); font-weight: 700;
  letter-spacing: -.028em; color: var(--tinta); line-height: 1.15;
}
.vista__tit p { margin-top: 4px; font-size: 13px; color: var(--gris); letter-spacing: -.005em; }
.vista__filtro {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--filo-fino);
}
.vista__periodo { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.vista__periodo b { font-size: 19px; font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tinta); }

/* --- aviso honesto (dato que no se muestra y por qué) --- */
.aviso {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 2px 14px; padding: 12px 15px; border-radius: 16px;
  font-size: 12.5px; line-height: 1.45; color: #ffe6a8;
  background: color-mix(in srgb, var(--oro) 8%, rgba(255,255,255,.04));
  border: 1px solid color-mix(in srgb, var(--oro) 24%, transparent);
  -webkit-backdrop-filter: var(--vidrio-blur); backdrop-filter: var(--vidrio-blur);
}
.aviso .ico { color: var(--ambar-claro); flex: none; margin-top: 1px; display: inline-flex; }

/* Varios avisos van en LISTA, no unidos por " · ". Las salas de las vistas
   nuevas llegan a 5 avisos a la vez (Bodega Fría: configuración provisional + sin
   demanda + cargas sin medición propia + sin tarifa del año + intervalos
   interpolados = 506 caracteres en un solo párrafo, que nadie lee). Son el
   mecanismo de honestidad de la app: tienen que poder leerse de un vistazo. */
.aviso__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; min-width: 0; }
.aviso__lista li { position: relative; padding-left: 13px; }
.aviso__lista li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5;
}

.solaviso { margin: 0 2px; }
.solnota { margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--gris-3); }

/* --- dona de fuentes --- */
.dist__ring--sol { width: 152px; height: 152px; }
.dist__ring--sol canvas { width: 152px; height: 152px; }
.dist__list--sol li { padding: 11px 0; }
.dist__list--sol .d-sw { width: 9px; height: 9px; border-radius: 50%; }
.dist__list--sol .d-pct { min-width: 58px; }

/* --- cobertura de datos solares --- */
.solcob { display: flex; flex-direction: column; gap: 16px; }
.solcob__item { display: flex; flex-direction: column; gap: 8px; }
.solcob__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.solcob__nom { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 660; color: var(--tinta); }
.solcob__nom .ico { display: inline-flex; }
.solcob__pct { font-family: var(--mono); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rojo-tinta); }
.solcob__barra {
  height: 8px; border-radius: 24px; overflow: hidden;
  background: color-mix(in oklab, var(--tinta) 8%, transparent);
  box-shadow: inset 0 1px 2px oklch(var(--sh) / .10);
}
.solcob__barra i {
  display: block; height: 100%;
  /* la cobertura NO es un dato solar (son días con lectura): va en el azul
     del sistema. En amarillo competía con el aporte solar de al lado y
     llenaba la pantalla de un color que debe usarse con cuentagotas. */
  background: linear-gradient(90deg, var(--barra-2), var(--barra-1));
  transform-origin: left; animation: cbarCrece .8s var(--out) both .15s;
}
.solcob__pie { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; color: var(--gris-2); }
.solcob--nulo .solcob__pct, .solcob--nulo .solcob__nom { color: var(--gris-3); }

/* --- tabla "Energía SFV por sucursal" --- */
.tablawrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.tabla th, .tabla td { padding: 10px 7px; text-align: right; border-bottom: 1px solid var(--filo-fino); }
.tabla th:first-child, .tabla td:first-child {
  text-align: left; position: sticky; left: 0;
  background: linear-gradient(90deg, rgba(10,29,74,.94) 84%, rgba(10,29,74,0));
}
.tabla thead th {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0; color: var(--gris-2);
  border-bottom: 1px solid var(--rojo-22); white-space: normal; min-width: 62px;
  padding-bottom: 9px;
}
.tabla tbody td { font-variant-numeric: tabular-nums; color: var(--tinta); font-weight: 620; }
.tabla tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .tabla tbody tr:hover td { background: var(--rojo-5); } }
.tabla .tsuc { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tabla .nulo td { color: var(--gris-3); font-weight: 500; }
.tabla .tsin { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0; color: var(--gris-3); }
/* el aporte solar se lee de un vistazo: barra proporcional detrás del número */
.tabla .taporte { position: relative; font-weight: 760; color: var(--oro-tinta); }
.tabla .taporte::before {
  content: ""; position: absolute; right: 8px; bottom: 5px; height: 3px; border-radius: 3px;
  width: calc(var(--ap, 0%) * .52); max-width: calc(100% - 16px);
  background: linear-gradient(90deg, color-mix(in srgb, var(--f-solar) 35%, transparent), var(--f-solar));
}
.tabla .taporte span { position: relative; }

@media (max-width: 900px) {
  .solhero { padding: 22px 20px 12px; }
  .solkpis { grid-template-columns: repeat(2, 1fr); }
  .ikpi:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 720px) {
  .rango__fechas { flex-direction: column; align-items: stretch; }
  .rango__ok { width: 100%; }
  .dist__body { flex-direction: column; align-items: stretch; gap: 16px; }
  .dist__ring { align-self: center; }
  .solhero__lectura { gap: 24px; }
  .solgauge, .solgauge canvas { width: 132px; height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .rango__ok, .ikpi { transition: none; }
  .ikpi__prop i, .solcob__barra i { animation: none; }
}

/* =========================================================
   DASHBOARD DE SUCURSAL — mismo lenguaje que la vista Solar
   (vidrio, íconos por dato, jerarquía) sin mover el ORDEN que
   fija la spec: encabezado · gráfico · indicadores · cargas ·
   balance solar · HVAC.
   ========================================================= */
.sdash__ident { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }

/* ficha: la "Información general" del reporte, con íconos */
.sficha { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.sficha__c { display: flex; align-items: flex-start; gap: 8px; }
.sficha__c .ico { color: var(--rojo); opacity: .85; display: inline-flex; margin-top: 1px; }
.sficha__l {
  display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0; color: var(--gris-2);
}
.sficha__c b { font-size: 13.5px; font-weight: 680; letter-spacing: -.01em; color: var(--tinta); }

/* el panel de indicadores manda: es la lectura principal de la sucursal */
.sdash__panel--maestro { container-type: inline-size; padding-bottom: 8px; }
.sdash__panel--maestro .solhero__lectura { margin-top: 8px; }
.sdash__panel--maestro .solkpis { margin-top: 22px; }

/* el detalle completo queda a un clic: minimalismo sin esconder datos */
.sdash__mas { margin-top: 16px; border-top: 1px solid var(--filo-fino); padding-top: 12px; }
.sdash__mas summary {
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0; color: var(--rojo-tinta);
  padding: 4px 0; transition: opacity .2s ease;
}
.sdash__mas summary::-webkit-details-marker { display: none; }
.sdash__mas summary::before { content: "+ "; font-weight: 800; }
.sdash__mas[open] summary::before { content: "− "; }
.sdash__mas summary:hover { opacity: .7; }
.sdash__mas .sdash__kpis { margin-top: 14px; padding-bottom: 8px; }

/* la dona de cargas comparte plano con la lista de filas */
.sdash__panel .dist__body { align-items: center; }
.sdash__panel .dist__body .sdash__cargas { flex: 1; min-width: 0; }

@media (max-width: 720px) {
  .sdash__panel .dist__body { flex-direction: column; align-items: stretch; }
  .sdash__panel .dist__ring { align-self: center; }
}

/* la dona de cargas convive con la lista: anillo más chico y filas compactas */
.dist__ring--cargas { width: 116px; height: 116px; flex: none; position: relative; }
.dist__ring--cargas canvas { width: 116px; height: 116px; display: block; }
.dist__ring--cargas .dist__center b { font-size: 16px; }
.dist__ring--cargas .dist__center small { font-size: 7.5px; }
.dist__body--cargas { gap: 16px; }
.dist__body--cargas .sfila { grid-template-columns: 10px auto 1fr auto; gap: 8px; padding: 8px 0; }
.dist__body--cargas .sfila .n { white-space: nowrap; }
.dist__body--cargas .sfila .v { text-align: right; }
.dist__body--cargas .sfila .p { min-width: 46px; }
@media (max-width: 900px) {
  .dist__body--cargas { flex-direction: column; align-items: stretch; }
  .dist__body--cargas .dist__ring--cargas { align-self: center; }
}

/* =========================================================
   HORARIO 1 / HORARIO 2 — "Comparativo Energético"
   ========================================================= */
.vista__ico--h { color: var(--rojo); background: var(--rojo-8); box-shadow: inset 0 0 0 1px var(--rojo-22); }

/* el horario operativo, como la tarjeta del Power BI */
.horchip {
  margin-left: auto; display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px; border-radius: 16px;
  background: var(--vidrio); border: 1px solid var(--filo-fino);
  box-shadow: var(--filo-luz);
}
.horchip span {
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em;
  color: var(--gris); white-space: nowrap;
}
.horchip span:first-child { color: var(--tinta-2); font-weight: 700; }

/* selector de indicador: uno a la vez */
.horind {
  display: inline-flex; gap: 2px; flex-wrap: wrap;
  background: rgba(120,120,128,.09); border: 1px solid var(--filo-fino);
  border-radius: 12px; padding: 2px;
}
.horind .sser.is-active {
  background: linear-gradient(180deg, var(--bg-600), var(--bg-700));
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 2px 8px -3px var(--rojo-40);
}

.horlienzo { position: relative; margin-top: 6px; }
#horChart { width: 100%; height: 400px; display: block; }
.legend__nota {
  flex-basis: 100%; text-align: center; margin-top: 2px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: none; color: var(--gris-3);
}

@media (max-width: 900px) {
  .horchip { margin-left: 0; width: 100%; }
  .vista__tit { flex-wrap: wrap; }
}
@media (max-width: 720px) { #horChart { height: 330px; } }

/* --- dashboard de Torre Corporativa: mismos componentes, nivel propio --- */
.rango--hp { flex: none; align-items: flex-end; }
.hplienzo { position: relative; }
#hpChart { width: 100%; height: 340px; display: block; }
.hpniv {
  font-family: var(--mono); border-radius: 8px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--gris);
  transition: background .2s var(--out), color .2s ease, box-shadow .2s ease;
}
.hpniv.is-active { background: var(--rojo); color: #04142e; box-shadow: 0 2px 8px -3px var(--rojo-40); }
#hpSeries { max-width: 100%; }
@media (max-width: 720px) { #hpChart { height: 270px; } }
@media (prefers-reduced-motion: reduce) { .hpniv { transition: none; } }

/* =========================================================
   LA SUPERFICIE DEL SISTEMA — una sola, en todas partes
   =========================================================
   Ya no hay "cuadros de excepción": el mundo entero es la sala de
   control, y toda superficie es la MISMA lámina de vidrio blanco
   translúcido sobre el azul del banco. Lo que la hace legible no es
   el color de relleno, sino las tres capas de luz:
     1. filo cenital arriba  (la lámina recibe luz de arriba)
     2. rebote interno tenue (el vidrio tiene espesor)
     3. sombra proyectada    (la lámina flota sobre el lienzo)
   ========================================================= */
.sdash__panel,
.solhero {
  color: var(--tinta);
  background:
    radial-gradient(130% 100% at 84% -10%, rgba(122, 196, 255, .13) 0%, transparent 60%),
    linear-gradient(168deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .028) 100%);
  border: 1px solid var(--filo);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .17),
    inset 0 0 40px rgba(122, 196, 255, .05),
    var(--s2);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}
/* el título del cuadro azul: cyan del reporte */
.sdash__panel .panel-tit,
.solhero .panel-tit,
.sdash__panel .sdash__ptitulo { color: var(--rojo-tinta); }
.sdash__panel .panel-tit .ico,
.solhero .panel-tit .ico { color: var(--rojo); opacity: 1; }

/* superficies internas: un punto más claras que el panel */
.sdash__panel .skpi,
.solhero .ikpi,
.sdash__panel .ikpi,
.sdash__panel .shvac {
  background: var(--vidrio-3);
  border-color: var(--filo-fino);
  box-shadow: var(--realce);
}
.sdash__panel .skpi b,
.solhero .ikpi__val,
.sdash__panel .ikpi__val { color: var(--tinta); }
.sdash__panel .sfila .v { color: var(--tinta); }
.sdash__panel .sfila .p { color: var(--rojo-tinta); }
.sdash__panel .dist__list .d-kwh { color: var(--tinta); }
.sdash__panel .dist__list .d-pct { color: var(--rojo-tinta); }
.sdash__panel .dist__center b { color: var(--tinta); }
.solhero .kpi__value,
.sdash__panel .kpi__value { color: var(--tinta); }
.solhero .solgauge__txt b,
.sdash__panel .solgauge__txt b { color: var(--tinta); }
.sdash__panel .sficha__c b { color: var(--tinta); }
.sdash__panel .sdash__mas summary { color: var(--rojo-tinta); }
.sdash__panel .tabla thead th { border-bottom-color: var(--filo); }
.sdash__panel .tabla tbody td { color: var(--tinta); }
/* la columna de nombres queda fija al hacer scroll lateral: necesita un
   fondo OPACO propio (si fuera vidrio, se leerían los números por debajo) */
.sdash__panel .tabla th:first-child,
.sdash__panel .tabla td:first-child {
  background: linear-gradient(90deg, var(--papel) 84%, transparent);
}
.sdash__panel .tabla .taporte { color: var(--oro-tinta); }
.sdash__panel .solcob__barra,
.sdash__panel .cbar,
.sdash__panel .sbar,
.sdash__panel .ikpi__prop { background: color-mix(in oklab, var(--tinta) 10%, transparent); }
.sdash__panel .sser,
.sdash__panel .sniv,
.sdash__panel .hpniv {
  color: var(--gris);
}
.sdash__panel .sdash__series,
.sdash__panel .sdash__nivel,
.sdash__panel .horind {
  background: var(--vidrio-3);
  border-color: var(--filo-fino);
}
.sdash__panel .sser.is-active,
.sdash__panel .sniv.is-active,
.sdash__panel .hpniv.is-active,
.sdash__panel .horind .sser.is-active {
  background: linear-gradient(180deg, var(--bg-600), var(--bg-700)); color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 2px 10px -3px oklch(var(--sh) / .45);
}
.sdash__panel .lectura {
  background: color-mix(in oklab, var(--papel) 94%, transparent);
  border-color: var(--filo);
  color: var(--tinta);
}
.sdash__panel .legend__item { color: var(--gris); }
.sdash__panel .solnota,
.sdash__panel .legend__nota { color: var(--gris); }
@media (hover: hover) and (pointer: fine) {
  .sdash__panel .tabla tbody tr:hover td { background: var(--rojo-8); }
}


/* --- ritmo vertical uniforme: la MISMA separación entre todos los bloques
   de una vista (antes unos llevaban margin y otros no, y se veía torcido) --- */
#viewSolar, #viewHorario { display: flex; flex-direction: column; gap: 16px; }
#viewSolar > *, #viewHorario > * { margin-bottom: 0; }
.sdash__fila { gap: 16px; }
.sdash { gap: 16px; }




/* =========================================================
   LUZ DE PANAMÁ — la superficie del sistema (28-jul-2026)
   =========================================================
   Una sola lámina de vidrio para toda la app. Se ve el edificio
   a través de ella: por eso el fondo va completo y por eso las
   tarjetas son translúcidas y no opacas.
     · el filo especular ARRANCA DONDE ESTÁ EL SOL
     · la sombra cae al lado contrario del sol
     · de noche el vidrio se oscurece y el edificio queda detrás
   ========================================================= */
.marco, .card, .hero, .sdash__panel, .solhero, .vista__cab, .detail__card,
.sdash__barra, .lock__card {
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(22px) saturate(1.7) brightness(1.04);
          backdrop-filter: blur(22px) saturate(1.7) brightness(1.04);
  border: 1px solid var(--filo);
  box-shadow: var(--realce), var(--s2);
}

/* el filo especular: un anillo de 1px que sigue al sol. Coste GPU: cero. */
.card::before, .hero::before, .sdash__panel::before, .vista__cab::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 2;
  background: conic-gradient(from calc(var(--sol-ang) - 90deg),
    rgb(var(--filo-rgb) / 0) 0deg, rgb(var(--filo-rgb) / .95) 24deg,
    rgb(var(--filo-rgb) / 0) 70deg, rgb(var(--filo-rgb) / 0) 190deg,
    rgb(var(--filo-rgb) / .5) 212deg, rgb(var(--filo-rgb) / 0) 248deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* la barra superior y el conmutador: el cromo, con más blur */
.topbar, .tabs {
  background: var(--vidrio-2);
  -webkit-backdrop-filter: blur(26px) saturate(1.8);
          backdrop-filter: blur(26px) saturate(1.8);
}

/* los campos son huecos en la lámina: se hunden, no sobresalen */
.field input, .field select, .sdash__periodo select, .lock input {
  background: rgb(255 255 255 / .5);
  border: 1px solid var(--filo);
  box-shadow: inset 0 1px 2px oklch(var(--sh) / .08);
  color: var(--tinta);
}
:root[data-cielo="noche"] .field input,
:root[data-cielo="noche"] .field select,
:root[data-cielo="noche"] .sdash__periodo select,
:root[data-cielo="noche"] .lock input {
  background: rgb(4 12 32 / .45);
  box-shadow: inset 0 1px 3px rgb(0 4 14 / .5);
}
.field select option { background: var(--papel); color: var(--tinta); }

/* el ícono del selector de fecha nace negro: de noche desaparecería */
:root[data-cielo="noche"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-cielo="noche"] input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6) sepia(.3) saturate(4) hue-rotate(175deg);
}

/* la lente de las pestañas: el azul institucional, con la luz del sol */
.tabs__lente {
  background: linear-gradient(180deg, var(--bg-600), var(--bg-700));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 3px 10px -3px oklch(var(--sh) / .45);
}
.tab.is-active { color: #fff; }

/* el amarillo del banco NO es texto sobre papel (1.39:1): en modo claro
   el dato solar se escribe en su versión tinta */
.tabla .taporte, .card__mini b.is-solar { color: var(--oro-tinta); }
:root[data-cielo="noche"] .tabla .taporte,
:root[data-cielo="noche"] .sdash__panel .tabla .taporte,
:root[data-cielo="noche"] .card__mini b.is-solar { color: var(--oro); }

/* aviso y errores, en la familia clara */
.stale { color: var(--oro-tinta); }
:root[data-cielo="noche"] .stale { color: var(--oro); }
.aviso { color: var(--oro-tinta); background: var(--oro-8); border-color: var(--oro-22); }
:root[data-cielo="noche"] .aviso { color: #ffe6a8; }

/* la cifra maestra: de blanco a azul luminoso solo de noche; de día,
   tinta sólida, que sobre papel el degradado la ensucia */
.kpi--maestro .kpi__value {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--tinta); filter: none;
}
:root[data-cielo="noche"] .kpi--maestro .kpi__value {
  background: linear-gradient(172deg, #ffffff 22%, #9fd4ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(122, 196, 255, .28));
}

@media (prefers-reduced-motion: reduce) {
  .escena__torre { animation: none !important; }
}

/* Los botones sólidos llevan texto BLANCO, así que su fondo tiene que
   seguir siendo el azul institucional también de noche: --rojo sube de
   brillo al caer el sol y los dejaría blanco sobre celeste. */
:root[data-cielo="noche"] .btn,
:root[data-cielo="noche"] .dl,
:root[data-cielo="noche"] .bigcta,
:root[data-cielo="noche"] .rango__ok,
:root[data-cielo="noche"] .rng__btn.is-active {
  background: linear-gradient(160deg, var(--bg-600), var(--bg-800));
  color: #fff;
}

/* --- RENDIMIENTO POR SISTEMA FOTOVOLTAICO ---
   Sustituye a la dona que repetía por tercera vez el reparto red/solar.
   Usa la MISMA barra del sistema, en su versión horizontal: pista hundida,
   cuerpo con degradado, cresta encendida al final del recorrido. */
.solrend { display: flex; flex-direction: column; gap: 16px; }
.solrend__it { display: flex; flex-direction: column; gap: 8px; }
.solrend__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.solrend__nom {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 640; color: var(--tinta); letter-spacing: -.01em;
}
.solrend__pct {
  font-family: var(--mono); font-size: 15px; font-weight: 780;
  font-variant-numeric: tabular-nums; color: var(--oro-tinta);
}
.solrend__pista {
  position: relative; height: 12px; border-radius: 8px; overflow: hidden;
  background: color-mix(in oklab, var(--tinta) 8%, transparent);
  box-shadow: inset 0 1px 2px oklch(var(--sh) / .10);
}
.solrend__pista i {
  display: block; height: 100%; border-radius: 8px;
  background: linear-gradient(90deg, var(--oro-hondo) 0%, var(--oro) 78%, #fff0bd 100%);
  box-shadow: 0 0 16px rgba(255, 211, 77, .45);
  transition: width .7s var(--out);
}
.solrend__pie {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--gris-2);
}
.solrend--nulo .solrend__nom { color: var(--gris-2); }
.solrend--nulo .solrend__pct { color: var(--gris-3); text-shadow: none; }


/* =========================================================
   UNA SOLA BARRA — la misma del comparativo, en todas partes
   =========================================================
   Antes convivían cuatro formas distintas (LED segmentado, pista
   cuadrada, barra fina, cápsula). Ahora todas son la misma: hueco
   con sombra interior, relleno en cápsula con el degradado del
   sistema y una cresta clara arriba, igual que las barras del
   comparativo horario.
   ========================================================= */
.barra i, .solcob__barra i, .solrend__pista i, .ikpi__prop i, .cbar i, .sbar i {
  position: relative;
}
.barra i::after, .solcob__barra i::after, .solrend__pista i::after,
.ikpi__prop i::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1.5px;
  background: rgb(255 255 255 / .55); border-radius: inherit;
}
.solcob__barra i {
  background: linear-gradient(90deg, var(--bg-700), var(--bg-500) 62%, var(--bg-400));
}
.solrend__pista i {
  background: linear-gradient(90deg, var(--oro-hondo), var(--oro) 78%, var(--oro-claro));
}
/* los tramos de carga conservan SU color (el color es el dato), pero
   comparten forma y remate */
.cbar i:first-child { border-radius: 24px 0 0 999px; }
.cbar i:last-child  { border-radius: 0 999px 999px 0; }
.sbar i:first-child { border-radius: 24px 0 0 999px; }
.sbar i:last-child  { border-radius: 0 999px 999px 0; }

/* --- las cifras se alinean por tabular-nums, no por familia --- */
.kpi__value, .metrics__val, .card__kwh, .skpi b, .ikpi__val, .tabla td,
.rank__v, .fila__v, .solrend__pct, .card__mini b, .hero__mes, .sdash__ult {
  font-variant-numeric: tabular-nums;
}

/* --- Contraste de las señales de estado (auditado, no a ojo) ---
   El amarillo del banco como TEXTO da 1.39:1 sobre papel y el verde
   medio 3.9:1: los dos por debajo del mínimo legible. Se escriben en su
   versión tinta, conservando el color de marca en el fondo de la píldora. */
.card--alerta .card__estado { color: var(--oro-tinta); }
.kpi__delta.is-down, .card__delta.is-down { color: var(--hoja-700); }
.kpi__delta.is-up, .card__delta.is-up { color: var(--pico); }
:root[data-cielo="noche"] .card--alerta .card__estado { color: var(--oro); }
:root[data-cielo="noche"] .kpi__delta.is-down,
:root[data-cielo="noche"] .card__delta.is-down { color: var(--hoja-500); }
:root[data-cielo="noche"] .kpi__delta.is-up,
:root[data-cielo="noche"] .card__delta.is-up { color: var(--pico-vivo); }

/* el verde de "OK" también es texto: va en su versión tinta */
.card--ok .card__estado, .detail__estado--ok { color: var(--hoja-700); }
:root[data-cielo="noche"] .card--ok .card__estado,
:root[data-cielo="noche"] .detail__estado--ok { color: var(--hoja-500); }

/* …y el ámbar de "Alerta" es el caso de siempre: #ffd34d sobre papel da
   1.29:1. Como texto va en tinta oro; el relleno sí conserva el ámbar. */
.detail__estado--alerta { color: var(--oro-tinta); }
:root[data-cielo="noche"] .detail__estado--alerta { color: var(--oro); }

/* =========================================================
   TRATAMIENTO TIPOGRÁFICO — la voz de Apple, no la de un tablero
   =========================================================
   Los titulares llevan tracking NEGATIVO y peso alto; el cuerpo va
   sin tracking. La jerarquía la hacen el tamaño y el peso, nunca las
   versalitas espaciadas.
   ========================================================= */
h1, h2, h3, .hero__head h2, .sechead h2, .vista__tit h2, .detail__nom,
.kpi__value, .metrics__val, .card__kwh, .skpi b, .ikpi__val {
  letter-spacing: -.022em;
}
.kpi--maestro .kpi__value, .solhero__total .kpi__value { letter-spacing: -.042em; }

/* las etiquetas: gris medio, peso 500, tamaño legible. Sin gritar. */
.kpi__label, .metrics__lbl, .stat label, .field label, .rot,
.sdash__lbl, .mod__tit, .card__estado, .solalcance, .hero__mes {
  font-weight: 500;
  letter-spacing: 0;
}

/* los títulos de sección dejan de ser micro-versalitas y pasan a ser
   títulos de verdad */
.sechead h2, .hero__head h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 600;
}
.panel-tit, .sdash__ptitulo {
  font-size: 13px; font-weight: 600; letter-spacing: -.01em;
  color: var(--gris);
}

/* controles con altura de dedo, como en iOS */
.field input, .field select, .sdash__periodo select, .lock input {
  height: 44px; border-radius: 16px; font-size: 15px;
}
.sser, .rng__btn { border-radius: 24px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; }
.tab { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }


/* la luz empieza a moverse recién cuando el primer pintado ya ocurrió */
:root.sol-vivo {
  transition: --sol-x 60s linear, --sol-y 60s linear, --sol-alt 60s linear,
              --sol-ang 60s linear, --sh-x 60s linear, --sh-y 60s linear;
}
@media (prefers-reduced-motion: reduce) { :root.sol-vivo { transition: none; } }

/* el separador del pie estaba al 45 % de opacidad: es decorativo, pero
   sale gratis dejarlo legible */
.foot__sep { opacity: .75; }

/* =========================================================
   RITMO — el aire y las proporciones del sistema
   =========================================================
   Última capa: impone la escala de espaciado sobre lo que quedaba
   del diseño anterior. La regla es una sola — 8 · 12 · 16 · 24 · 40 ·
   56 — y las superficies respiran. En un tablero denso el aire NO es
   decoración: es lo que deja ver la jerarquía.
   ========================================================= */

/* --- superficies: padding generoso y radio de familia --- */
.hero, .consola { padding: 28px clamp(22px, 3vw, 34px) 26px; border-radius: 24px; }
.card { padding: 20px 22px; border-radius: 20px; }
.sdash__panel, .solhero, .vista__cab, .detail__card { border-radius: 24px; }
.sdash__panel { padding: 22px 24px 24px; }
.vista__cab { padding: 24px 26px; }

/* --- aire entre secciones: lo que hace que se vea caro --- */
.stage { padding-top: 8px; }
.tabs { margin-bottom: 28px; }
.hero, .consola { margin-bottom: 40px; }
.sechead { margin-bottom: 20px; }
#grid { gap: 16px; }
#viewSolar, #viewHorario { gap: 16px; }
.sdash__fila { gap: 16px; }
.view > * + * { margin-top: 0; }

/* --- controles con altura de dedo --- */
.rango__ok, .btn, .bigcta, .dl { height: 44px; border-radius: 12px; }
.herr { width: 40px; height: 40px; border-radius: 12px; }
.tab { padding: 10px 20px; }

/* --- la cifra grande manda: es lo que se viene a ver --- */
.kpi--maestro .kpi__value { font-size: clamp(3.6rem, 8.4cqi, 6.4rem); }
.kpis .kpi__value { font-size: clamp(1.7rem, 3.1cqi, 2.3rem); }
.card__kwh { font-size: 1.95rem; letter-spacing: -.03em; }

/* --- filetes en vez de bordes: Apple separa con luz, no con cajas --- */
.kpis { border-top: 1px solid var(--linde); padding-top: 22px; margin-top: 22px; }
.kpi + .kpi { border-left: 0; }

/* --- la tarjeta reacciona como en iOS --- */
.card { transition: transform .22s var(--out), box-shadow .22s var(--out); }
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-2px); } }
.card:active { transform: scale(.985); transition-duration: 120ms; }

/* --- Restos del lenguaje de instrumento que ya no pertenecen ---
   El peine de escala bajo cada lectura, el punto encendido antes de
   cada título y la barra vertical del indicador maestro eran la firma
   del tablero técnico. En este sistema la jerarquía la hacen el tamaño
   y el aire, no los adornos. */
.kpis .kpi::after { content: none; }
.sechead h2::before { content: none; }
.sechead h2 { padding-left: 0; font-family: var(--sans); }
.kpi--maestro::before { content: none; }
.kpi--maestro { padding-left: 0; }

/* el título de sección, con la escala del sistema */
.sechead h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 600; letter-spacing: -.022em; color: var(--tinta);
}
.sechead__hint { font-size: 13px; }


/* =========================================================
   LA SALA — el detalle de sucursal, ordenado (29-jul-2026)
   =========================================================
   Lo que estaba mal y qué se hizo:

   1. EL EDIFICIO SE PELEABA CON EL DATO. La sala era otra lámina
      de vidrio sobre la torre a tamaño completo: en Torre Corporativa
      la línea de estado era ilegible. La ley de los tres planos
      dice que el dato nunca se pelea con la atmósfera — así que
      la sala deja de ser vidrio y pasa a ser HOJA: el velo de
      atrás sube y la superficie se vuelve papel. El edificio
      sigue vivo alrededor, desenfocado, como en cualquier hoja
      modal de iOS. El sol sigue mandando: sombras, filo especular
      y temperatura no cambian.

   2. TRES MANERAS DE ESCRIBIR "ETIQUETA + VALOR". Ahora hay una
      sola fila de dato (.sfila) y un solo par (.skpi), con el
      número alineado por dígito y la etiqueta en una línea.

   3. DOS FILAS DE CONTROLES SIN REJILLA sobre el gráfico. Ahora
      es una rejilla: título y granularidad en la primera línea,
      las series en la segunda.

   4. LA FICHA TÉCNICA ABRÍA LA SALA. Identificador, proveedor,
      área, empleados y tarifa son contexto, no operación: bajan
      a una tira de metadatos y arriba queda una sola señal de
      estado.

   Todo va scopeado a .detail: .sdash__panel, .panel-tit, .kpi,
   .solhero__*, .solgauge, .solkpis, .cbar, .dist__*, .legend y
   .field también los usan Solar y Horario.
   ========================================================= */

/* --- 1 · la superficie: hoja, no vidrio --------------------- */
.detail__card {
  background: color-mix(in oklab, var(--perla) 94%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
          backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: var(--s2), var(--realce);
  padding: 0;
}
/* el detalle genérico tiene la mitad de contenido: no se estira al carril */
.detail__card:has(#dEstandar:not([hidden])) { max-width: 920px; }

/* el encabezado se queda arriba: 2.400 px de scroll sin saber
   dónde estás era parte del desorden */
.detail__head {
  position: sticky; top: var(--topbar-h, 0px); z-index: 5;
  margin: 0; padding: 20px var(--sala-pad) 16px;
  background: color-mix(in oklab, var(--perla) 92%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--filo-fino);
}
.detail { --sala-pad: clamp(18px, 2.6vw, 28px); }
.detail__card > .sdash,
.detail__card > #dEstandar { padding: var(--sala-pad) var(--sala-pad) calc(var(--sala-pad) + 4px); }
.detail__title { gap: 6px; }
.detail__title h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 650; letter-spacing: -.026em; }
/* el identificador ya vive en la tira de metadatos: no dos veces */
.detail__card:has(#sDash:not([hidden])) .detail__dev,
.detail__card:has(#hpDash:not([hidden])) .detail__dev { display: none; }
/* y el estado del snapshot tampoco: la sala lo dice con la comunicación */
.detail__card:has(#sDash:not([hidden])) .detail__estado,
.detail__card:has(#hpDash:not([hidden])) .detail__estado { display: none; }

/* --- 2 · encabezado de la sala: una señal, un control ------- */
.salahead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px 28px; flex-wrap: wrap;
}
.detail .sdash__lbl {
  margin-bottom: 6px; font-size: 12px; font-weight: 600;
  letter-spacing: 0; color: var(--gris);
}
.detail .sdash__com-val { gap: 9px; }
.detail .sdash__com-val b {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  text-transform: none; color: var(--tinta);
}
.detail .sdash__ult {
  margin-top: 5px; font-size: 12.5px; letter-spacing: 0; color: var(--gris);
}
.detail .sdash__periodo { align-items: stretch; }
.detail .sdash__periodo select { min-width: 200px; }
.detail .sdash__aviso {
  margin-top: 8px; align-self: flex-start;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  color: var(--oro-tinta); background: var(--oro-8);
  border: 1px solid var(--oro-22); padding: 5px 10px; border-radius: 10px;
}
:root[data-cielo="noche"] .detail .sdash__aviso { color: #ffe6a8; }

/* --- 3 · la ficha, en una tira de metadatos ----------------- */
.detail .sficha {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px;
  padding: 0 2px; margin-top: -4px;
}
.detail .sficha__c { display: inline-flex; align-items: baseline; gap: 7px; padding: 0; border: 0; background: none; }
.detail .sficha__c > .ico { display: none; }          /* a este tamaño el ícono es ruido */
.detail .sficha__c > div { display: inline-flex; align-items: baseline; gap: 7px; }
.detail .sficha__l { font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--gris); }
.detail .sficha__c b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--tinta-2); }

/* --- 4 · los paneles: papel elevado sobre la hoja ----------- */
.detail .sdash__panel {
  padding: 20px; border-radius: 18px;
  background: color-mix(in oklab, #ffffff 92%, transparent);
  border: 1px solid var(--filo-fino);
  box-shadow: 0 1px 2px oklch(var(--sh) / .05), var(--s1);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
          backdrop-filter: blur(10px) saturate(1.2);
}
:root[data-cielo="noche"] .detail .sdash__panel {
  background: color-mix(in oklab, var(--perla) 88%, transparent);
}
/* dentro de una hoja no hay torre que reflejar: el filo especular
   se queda en el borde de la hoja, no en cada panel */
.detail .sdash__panel::before { content: none; }
.detail .sdash__panel .panel-tit,
.detail .sdash__panel .sdash__ptitulo {
  margin-bottom: 16px; font-size: 13px; font-weight: 600;
  letter-spacing: -.01em; color: var(--gris);
}

/* --- 5 · el gráfico: una rejilla, no dos filas sueltas ------ */
.detail .sdash__phead {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 14px 16px; margin-bottom: 16px;
}
.detail .sdash__phead > .panel-tit,
.detail .sdash__phead > .sdash__ptitulo { margin-bottom: 0; }
.detail .sdash__series {
  grid-column: 1 / -1; justify-self: start;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
  flex-wrap: nowrap; background: none; border: 0; padding: 0; gap: 6px;
}
.detail .sdash__series::-webkit-scrollbar { display: none; }
.detail .sser {
  flex: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500;
  padding: 7px 13px; border-radius: 10px; color: var(--gris);
  background: color-mix(in oklab, var(--tinta) 5%, transparent);
}
.detail .sser.is-active {
  background: var(--rojo); color: #fff; font-weight: 600;
  box-shadow: none;
}
.detail .sdash__nivel { background: color-mix(in oklab, var(--tinta) 6%, transparent); border: 0; padding: 3px; border-radius: 11px; }
.detail .sniv {
  letter-spacing: 0; font-size: 12.5px; font-weight: 500; padding: 6px 13px;
  border-radius: 9px; color: var(--gris);
}
.detail .sdash__panel .sniv.is-active { font-weight: 600; }
.detail .legend { margin-top: 14px; }
.detail .legend__item { font-size: 12px; letter-spacing: 0; color: var(--gris); }

/* --- 6 · UNA fila de dato para toda la sala ----------------- */
.detail .sfila {
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  gap: 12px; padding: 10px 2px;
  border-top: 1px solid color-mix(in oklab, var(--tinta) 7%, transparent);
  font-size: 13px;
}
.detail .sfila i { width: 10px; height: 10px; border-radius: 3px; }
.detail .sfila .n {
  font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--gris);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detail .sfila .v {
  font-size: 13px; font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
.detail .sfila .p {
  font-size: 13px; font-weight: 600; letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: var(--gris);
  min-width: 54px; text-align: right;
}
.detail .sfila .p:empty { display: none; }   /* el balance solar no lleva % */
.detail .sfila--tot {
  margin-top: 4px; padding-top: 12px;
  border-top: 1px solid color-mix(in oklab, var(--rojo) 22%, transparent);
}
.detail .sfila--tot .n { color: var(--tinta); font-weight: 600; }
.detail .sfila--tot .v { font-weight: 700; }
.detail .sbar { height: 10px; margin: 2px 0 14px; }

/* --- 7 · el par etiqueta/valor: una línea, no una caja ------ */
.detail .sdash__kpis {
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 0 32px;
}
.detail .skpi {
  flex-direction: row; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 10px 2px; border: 0; border-radius: 0; background: none;
  box-shadow: none;
  border-top: 1px solid color-mix(in oklab, var(--tinta) 7%, transparent);
}
.detail .skpi label {
  font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--gris);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detail .skpi b {
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap;
}
.detail .skpi b em { font-size: 12px; font-weight: 400; color: var(--gris); margin-left: 5px; }
.detail .skpi--nulo b { color: var(--gris-3); font-weight: 400; }
@media (hover: hover) and (pointer: fine) {
  .detail .skpi:hover { transform: none; border-color: color-mix(in oklab, var(--tinta) 7%, transparent); }
}

/* --- 8 · el plegable de detalles --------------------------- */
.detail .sdash__mas { margin-top: 4px; }
.detail .sdash__mas > summary {
  font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--rojo-tinta);
  padding: 10px 0; cursor: pointer;
}
.detail .sdash__mas[open] > summary { margin-bottom: 4px; }

/* --- 9 · la lectura maestra: un solo protagonista ----------- */
.detail .solhero__lectura { gap: 28px; align-items: center; }
.detail .solgauge { width: 132px; height: 132px; }
/* la etiqueta larga de Torre Corporativa ("Aporte · desde el cambio") se
   comía el anillo: cabe en dos líneas cortas dentro del círculo */
.detail .solgauge__txt small {
  max-width: 96px; font-size: 11.5px; line-height: 1.25;
  letter-spacing: 0; text-wrap: balance;
}

/* la lista de cargas se reparte en el alto del panel: con menos filas
   que su gemelo quedaba un hueco al pie */
.detail .dist__body--cargas { align-items: center; }
.detail .sdash__cargas { display: flex; flex-direction: column; justify-content: center; }
.detail .kpi--maestro .kpi__label {
  font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--gris);
}
.detail .kpi--maestro .kpi__value { font-weight: 650; letter-spacing: -.035em; }
.detail .cbar__leg span { font-size: 12.5px; letter-spacing: 0; color: var(--gris); }
.detail .solkpis { gap: 0; }
.detail .ikpi { padding: 16px 4px 2px; }
.detail .ikpi__top label { font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--gris); }
.detail .ikpi__val { font-size: 22px; font-weight: 650; letter-spacing: -.03em; }
.detail .ikpi__val em { font-size: 12.5px; font-weight: 400; color: var(--gris); }

/* --- 10 · HVAC dentro/fuera y calidad de datos -------------- */
.detail .sdash__hvac { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.detail .shvac {
  gap: 6px; padding: 0; border: 0; background: none; border-radius: 0;
}
.detail .shvac label { font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--gris); }
.detail .shvac b { font-size: 20px; font-weight: 650; letter-spacing: -.03em; }
.detail .shvac small { font-size: 12px; color: var(--gris); }
/* el ámbar sobre papel da 1.39:1: el dato fuera de horario va en tinta oro */
.detail .shvac--fuera b { color: var(--oro-tinta); }
:root[data-cielo="noche"] .detail .shvac--fuera b { color: var(--oro); }
/* la barra dentro/fuera: el reparto se ve, no se calcula de cabeza */
.detail .hvacbar {
  grid-column: 1 / -1; display: flex; height: 10px; border-radius: 24px;
  overflow: hidden; margin-top: 4px;
  background: color-mix(in oklab, var(--tinta) 8%, transparent);
  box-shadow: inset 0 1px 2px oklch(var(--sh) / .10);
}
.detail .hvacbar i { height: 100%; }

/* --- 11 · el aviso largo de Torre Corporativa -------------------- */
.detail .aviso {
  align-items: flex-start; gap: 10px; padding: 13px 15px; border-radius: 14px;
  font-size: 12.5px; line-height: 1.5; letter-spacing: 0;
}
.detail .aviso .ico { flex: none; margin-top: 1px; }

/* --- 12 · el rango de fechas, agrupado --------------------- */
.detail .rango { gap: 10px; align-items: flex-end; }
.detail .rango__fechas { gap: 10px; align-items: flex-end; }
.detail .rango .field label { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--gris); margin-bottom: 6px; }
.detail .rango .field input { height: 40px; font-size: 13.5px; border-radius: 12px; min-width: 148px; }
.detail .rango__ok { height: 40px; border-radius: 12px; font-size: 13.5px; font-weight: 600; }
.detail .rango__rapidos { gap: 6px; align-self: flex-end; background: none; border: 0; padding: 0; }

/* --- 13 · el borde del banco de indicadores que no existía -- */
.detail .kpis { border-top-color: var(--filo-fino); }

@media (max-width: 900px) {
  .detail .sdash__kpis { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .detail__head { padding: 16px var(--sala-pad) 14px; }
  .detail .salahead { gap: 16px; }
  .detail .sdash__periodo select { min-width: 0; width: 100%; }
  .detail .sficha { gap: 4px 18px; }
}


/* =========================================================
   EL FONDO: LA TORRE DEL BANCO, CON PANAMÁ DETRÁS (29-jul-2026)
   =========================================================
   La sede del Tu cliente con su letrero, el aire crema a la
   izquierda para que el dato respire, y al pie la Bahía: playa,
   palmeras y el skyline de la ciudad. Misma composición que la
   demo de Scotiabank —torre a la derecha, espacio negativo a la
   izquierda— pero SIN las pistas de circuito: sobre una foto
   real ensucian. En retrato entra el recorte vertical, centrado
   en el letrero, para que llene la pantalla del teléfono.

   Los filtros vienen calibrados para esta foto: crema y piedra
   clara ya llegan luminosas, así que se sube presencia en vez
   de brillo. El sol de Panamá sigue gobernando: la escena se
   satura y se aclara con la elevación solar, igual que antes.
   ========================================================= */
.escena__torre {
  filter:
    saturate(calc(.95 + .15 * var(--sol-alt)))
    contrast(calc(1.02 + .02 * var(--sol-alt)))
    brightness(calc(1.00 + .02 * var(--sol-alt)));
  opacity: calc(.95 + .05 * var(--sol-alt));
  image-rendering: -webkit-optimize-contrast;   /* sin re-suavizado al escalar */
}
/* el velo deja respirar la mitad de arriba: ahí no hay dato que
   proteger y es donde se reconoce el país */
.escena__horizonte {
  background:
    radial-gradient(52vmax 46vmax at 14% 6%, rgb(255 255 255 / .18), transparent 62%),
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in oklab, var(--papel) 26%, transparent) 42%,
      color-mix(in oklab, var(--papel) 62%, transparent) 100%);
}
:root[data-cielo="noche"] .escena__torre {
  opacity: .62;
  filter: saturate(.55) contrast(1.25) brightness(.62) hue-rotate(-6deg);
  mix-blend-mode: normal;
}

/* en el teléfono las 5 pestañas no caben y partían las palabras en tres
   renglones ("Centro / de / control"): pasan a una tira que se desliza,
   como el segmentado de iOS cuando se queda sin ancho */
@media (max-width: 560px) {
  .tabs {
    display: flex; max-width: 100%;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; white-space: nowrap; scroll-snap-align: center; }
}


/* =========================================================
   SPEC TU CLIENTE 28-jul — la vista de cada sucursal
   =========================================================
   §1 los indicadores suben debajo del estado, en cinco tarjetas
      compactas, y desaparece el gráfico circular
   §4 la demanda se lee como línea, no como barras
   §6 la dona de cargas va arriba y el desglose debajo
   §7 "Calidad y cobertura de datos" sale de la vista
   ========================================================= */

/* las cinco tarjetas: una fila pareja, sin la caja de instrumento */
.detail .solkpis--cinco {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 20px;
}
.detail .solkpis--cinco .ikpi {
  padding: 2px 0 2px 20px;
  border-left: 1px solid color-mix(in oklab, var(--tinta) 8%, transparent);
}
.detail .solkpis--cinco .ikpi:first-child { padding-left: 0; border-left: 0; }
.detail .solkpis--cinco .ikpi__top { gap: 7px; margin-bottom: 6px; }
.detail .solkpis--cinco .ikpi__val { font-size: 21px; }
@media (max-width: 1000px) {
  .detail .solkpis--cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; }
  .detail .solkpis--cinco .ikpi:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 620px) {
  .detail .solkpis--cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail .solkpis--cinco .ikpi:nth-child(3n+1) { padding-left: 20px; border-left: 1px solid color-mix(in oklab, var(--tinta) 8%, transparent); }
  .detail .solkpis--cinco .ikpi:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}

/* la muestra de la demanda en la leyenda: una raya, no un cuadrito */
.legend__sw--linea { width: 14px; height: 2.5px; border-radius: 2px; }

/* §6 · la dona arriba, el desglose debajo, centrados y con aire */
.detail .dist__body--pila {
  flex-direction: column; align-items: center; gap: 18px;
}
.detail .dist__body--pila .dist__ring--cargas { margin: 2px 0 0; }
.detail .dist__body--pila .sdash__cargas { width: 100%; }

/* el dato que no está medido se escribe como lo que es */
.detail .sfila .v--nulo { color: var(--gris-3); font-weight: 400; }
.detail .solnota {
  margin-top: 14px; font-size: 12px; line-height: 1.45; color: var(--gris);
}


/* =========================================================
   LA SALA COMO PÁGINA (spec BG 28-jul §3)
   =========================================================
   Se acabó el pop-up: la sucursal es la quinta vista dentro de
   .stage y hereda el mismo cruce con View Transitions que las
   pestañas. El botón de la esquina dejó de cerrar y ahora vuelve
   al listado, que es lo que hace una página.
   ========================================================= */
.volver {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  height: 36px; padding: 0 14px 0 10px; border-radius: 12px;
  font-size: 13.5px; font-weight: 500; letter-spacing: -.01em;
  color: var(--rojo-tinta); background: color-mix(in oklab, var(--rojo) 7%, transparent);
  border: 1px solid var(--filo-fino);
  transition: background .2s ease, transform .18s var(--out);
}
@media (hover: hover) and (pointer: fine) {
  .volver:hover { background: color-mix(in oklab, var(--rojo) 12%, transparent); }
}
.volver:active { transform: scale(.97); }

/* mientras la sala está abierta ninguna pestaña está activa: la lente
   se apagaría a medio camino, así que se retira el conmutador entero */
/* con opacity:0 el conmutador seguía ocupando su fila y, en el teléfono,
   su scroller horizontal empujaba el ancho del documento */
.app:has(#detail:not([hidden])) .tabs { display: none; }

/* el aviso de snapshot viejo habla del Centro de control: dentro de la
   sala, cuyos datos vienen de otro endpoint, solo confunde */
.app:has(#detail:not([hidden])) #staleBanner { display: none; }

/* la hoja de la sala arranca pegada al conmutador, que está oculto */
#detail:not([hidden]) { margin-top: -6px; }

/* la barra de desplazamiento del gráfico (spec BG §2): un scroller nativo
   delgado — el canvas no crece, así que no hay límite de dimensión que
   romper ni pulgar que repintar en cada movimiento del cursor */
.scrollx {
  margin-top: 10px; height: 12px; overflow-x: auto; overflow-y: hidden;
  border-radius: 8px; scrollbar-width: thin;
  background: color-mix(in oklab, var(--tinta) 4%, transparent);
}
.scrollx > i { display: block; height: 1px; }
.scrollx::-webkit-scrollbar { height: 10px; }
.scrollx::-webkit-scrollbar-track { background: transparent; }
.scrollx::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--rojo) 34%, transparent);
  border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
.scrollx::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--rojo) 52%, transparent); background-clip: padding-box; }
.scrollx:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

/* la tira de series es un scroller: sin min-width:0 el grid la deja crecer
   con su contenido y el último botón se sale de la pantalla en el teléfono */
.detail .sdash__phead { min-width: 0; }
.detail .sdash__series { min-width: 0; max-width: 100%; }
.detail .sdash__series > .sser:last-child { margin-right: 2px; }

/* en el teléfono el título ya ocupa el ancho: el botón se queda con la
   flecha sola (el aria-label sigue diciendo a dónde lleva) */
@media (max-width: 560px) {
  .volver { padding: 0 10px; gap: 0; font-size: 0; }
  .volver svg { margin: 0; }
}