/* Estilo Bee2Fire: panel industrial sobrio. El color solo comunica estado. */
:root {
  color-scheme: light dark;
  &:has(> head > meta[name="color-scheme"][content="dark"]) { color-scheme: dark; }
  &:has(> head > meta[name="color-scheme"][content="light"]) { color-scheme: light; }

  --ink: light-dark(rgb(4 27 42), rgb(226 232 240));
  --page: light-dark(rgb(251 252 253), rgb(11 18 32));
  --card: light-dark(#fff, rgb(19 28 43));
  --sunken: light-dark(rgb(244 247 250), rgb(27 38 56));
  --line: light-dark(rgb(230 235 241), rgb(42 56 80));
  --sidebar: light-dark(rgb(247 249 251), rgb(14 23 38));
  --soft: light-dark(rgb(100 116 139), rgb(148 163 184));   /* slate-500 / slate-400 */
  --focus: rgb(59 130 246);
  --tech: light-dark(rgb(124 58 237), rgb(167 139 250));   /* avería (alarma técnica: cuadro, comunicaciones, batería, cobertura): violeta */
  --shadow-overlay: 0 6px 18px rgb(16 24 40 / .10);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Estados semánticos: verde bien, amarillo aviso, naranja prealerta, rojo alarma, violeta avería, azul anulado y gris sin
   comunicación. fg (texto), bg (pastel), bd (borde), dot (saturado; los de TH_COLORS en public/app.js,
   salvo el violeta, que sigue a --tech) */
.st-ok    { --fg: light-dark(rgb(21 128 61), rgb(134 239 172));  --bg: light-dark(rgb(240 253 244), rgb(20 83 45 / .35));  --bd: light-dark(rgb(187 247 208), rgb(22 101 52));  --dot: rgb(34 197 94); }
.st-warn  { --fg: light-dark(rgb(161 98 7), rgb(253 224 71));    --bg: light-dark(rgb(254 252 232), rgb(113 63 18 / .35)); --bd: light-dark(rgb(254 240 138), rgb(133 77 14));  --dot: rgb(250 204 21); }   /* aviso */
.st-pre   { --fg: light-dark(rgb(194 65 12), rgb(253 186 116));  --bg: light-dark(rgb(255 247 237), rgb(124 45 18 / .35)); --bd: light-dark(rgb(254 215 170), rgb(154 52 18));  --dot: rgb(249 115 22); }   /* prealerta */
.st-alarm { --fg: light-dark(rgb(185 28 28), rgb(252 165 165));  --bg: light-dark(rgb(254 242 242), rgb(127 29 29 / .35)); --bd: light-dark(rgb(254 202 202), rgb(153 27 27));  --dot: rgb(239 68 68); }
.st-info  { --fg: light-dark(rgb(29 78 216), rgb(147 197 253));  --bg: light-dark(rgb(239 246 255), rgb(30 58 138 / .35)); --bd: light-dark(rgb(191 219 254), rgb(30 64 175));  --dot: rgb(59 130 246); }
.st-tech  { --fg: light-dark(rgb(109 40 217), rgb(196 181 253)); --bg: light-dark(rgb(245 243 255), rgb(76 29 149 / .35)); --bd: light-dark(rgb(221 214 254), rgb(91 33 182)); --dot: var(--tech); }   /* avería */
.st-muted { --fg: var(--soft); --bg: var(--sunken); --bd: var(--line); --dot: rgb(148 163 184); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); }
body { margin: 0; font: 14px/1.45 var(--font); color: var(--ink); background: var(--page); display: flex; min-height: 100dvh; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 700; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Layout ---------- */
.side { position: sticky; top: 0; width: 288px; height: 100dvh; flex: none; display: flex; flex-direction: column; gap: 24px; padding: 20px 16px; overflow-y: auto; background: var(--sidebar); border-right: 1px solid var(--line); }
.brand { display: flex; flex: 1; min-width: 0; padding: 0 12px; }
.logo-img { display: block; height: 38px; width: auto; }
.brand-mark { display: none; }
.brand-mark img { width: 28px; height: 28px; }
/* Logos de Configuración › Logos (ITGEST va aparte): uno cada vez sobre su placa, blanca u oscura, igual en los dos temas; fundido entre ellos */
.logos { display: grid; width: 100%; }
.logos[hidden] { display: none; }
.logo-stage { display: grid; width: 100%; height: 52px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.logo-stage img { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; padding: 6px 10px; object-fit: contain; background: #fff; opacity: 0; transition: opacity .6s ease-in-out; }
.logo-stage img.dark { background: rgb(4 27 42); }
.logo-stage img.on { opacity: 1; }
/* Símbolo de la barra plegada: negro en tema claro, blanco en oscuro (sigue a la preferencia o a la elección manual) */
.on-dark { display: none !important; }
:root:has(meta[name="color-scheme"][content="dark"]) .on-light { display: none !important; }
:root:has(meta[name="color-scheme"][content="dark"]) .on-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:has(meta[name="color-scheme"][content="light dark"]) .on-light { display: none !important; }
  :root:has(meta[name="color-scheme"][content="light dark"]) .on-dark { display: block !important; }
}
.nav { display: grid; gap: 4px; margin-bottom: auto; }   /* empuja hacia abajo las cajas, la meteo, el usuario y las fuentes */
.nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.nav a svg { color: var(--soft); }
.nav a:hover { background: var(--sunken); }
.nav a[aria-current="page"] { background: var(--sunken); color: var(--ink); font-weight: 700; }
.nav a[aria-current="page"] svg { color: inherit; }
.side-info { display: grid; gap: 8px; padding: 0 12px; }
.side-meteo { display: flex; gap: 16px; }
.side-meteo span { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; }
.side-meteo svg { color: var(--soft); }
.side-clock { font-size: 12px; color: var(--soft); }
/* Cajas de la barra lateral: alarmas (activas y sin reconocer) y avisos de AEMET. Mismo marco; plegada, solo su icono */
.side-boxes { display: grid; gap: 8px; }
.sbox { display: grid; gap: 8px; padding: 10px 12px; border-radius: 6px; }
.sbox-calm { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--soft); }
.sbox-ico { position: relative; display: none; place-items: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); }
.sbox-badge { position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font: 700 11px/18px var(--font); font-style: normal; text-align: center;
  background: light-dark(rgb(180 83 9), rgb(252 211 77)); color: var(--card); }
.abox { grid-template-columns: 1fr 1fr; gap: 12px; }
.abox:hover { background: var(--sunken); }
.abox-k { display: grid; gap: 2px; }
.abox-k b { font-size: 20px; font-weight: 700; line-height: 1.15; color: var(--fg); }
/* Avisos: una línea por aviso con el color oficial del nivel; el detalle, en #warn-dlg */
.wbox-list { display: grid; gap: 2px; }
.wbox-list .eyebrow { margin-bottom: 2px; }
.warn-line { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 -6px; padding: 3px 6px; border: 0; border-radius: 6px; background: none; font-size: 13px; text-align: left; }
.warn-line b { flex: none; font-weight: 600; }
.warn-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); }
.warn-line:hover { background: var(--sunken); }
.warn-more { padding-left: 22px; }
.warn-dlg .dlg-head { margin-bottom: 4px; }
.warn-list { display: grid; gap: 12px; max-height: 70dvh; overflow: auto; }
.warn-item { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.warn-item h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.warn-item h3::first-letter { text-transform: uppercase; }
.warn-item p { margin: 0; font-size: 13px; line-height: 1.45; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.side-clock::first-letter { text-transform: uppercase; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); }
.icon-btn:hover { background: var(--sunken); }
.main { flex: 1; min-width: 0; }
.topbar { display: none; }
#view { padding: 24px; display: grid; gap: 16px; }
.scrim { display: none; }

/* ---------- Piezas ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 16px; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.card h2 { font-size: 15px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--soft); }
.tnum { font-variant-numeric: tabular-nums; }
.trend { margin: 6px 0 0; min-height: 1.45em; font-size: 13px; color: var(--soft); }
.stale { color: var(--soft); }
[data-thermo] { background: var(--ink); }
[data-bar].stale > i { background: var(--soft); }
[data-thermo].stale { background: var(--soft); }
.comm-notice { margin: 6px 0; color: var(--soft); font-size: 12px; line-height: 1.4; }
/* Señal fuera de servicio (Configuración › Sensores): azul, con el token de .st-info */
[data-t].st-info, .comm-notice.st-info { color: var(--fg); }
.station-pin { width: 30px; height: 34px; cursor: pointer; }
.station-pin svg { display: block; width: 100%; height: 100%; }
.big { font-size: 28px; font-weight: 700; line-height: 1.1; }
.mid { font-size: 18px; font-weight: 700; }
.soft { color: var(--soft); }


.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); font-size: 13px; font-weight: 600; }
.chip-btn:hover { background: var(--sunken); }
.chip-btn svg { color: var(--soft); }

/* Los puntos laten suavemente; en alarma lo hacen más rápido. */
.dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex: none; }
.dot.live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--dot); animation: halo 2.2s ease-out infinite; }
.dot.live.st-alarm::after { animation-duration: 1.3s; }
@keyframes halo { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Barras */
.bar { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--dot, var(--ink)); transition: width .5s; }

/* Resumen diario: mínimo, media y máximo. */
.current-reading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.daily-summary { display: grid; align-content: center; gap: 5px; }
.daily-head { color: var(--soft); font-size: 11px; }
.daily-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.daily-stats dt { color: var(--soft); font-size: 11px; }
.daily-stats dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }

/* Filas clave/valor */
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv b { font-variant-numeric: tabular-nums; }
.state-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.state-row:last-child { border-bottom: 0; }
.state-row .chip { margin-left: auto; }

/* Tabla de alarmas */
.table-wrap { overflow: auto; margin: 0 -16px -16px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
th { text-align: left; padding: 8px 16px; background: var(--sunken); }
th .eyebrow { color: var(--soft); }
td { padding: 10px 16px; border-top: 1px solid var(--line); }
tr.pulse td { animation: rowpulse 1.8s ease-in-out infinite; }
@keyframes rowpulse { 50% { background: light-dark(rgb(255 251 235), rgb(120 53 15 / .35)); } }
.empty { padding: 32px 16px; text-align: center; color: var(--soft); }

/* Mapas y gráficas */
.map { height: 100%; min-height: 360px; border-radius: 10px; overflow: hidden; background: var(--sunken); }
.chart { position: relative; height: 160px; }
.chart.tall { height: 240px; }
.skel { background: linear-gradient(90deg, var(--sunken) 0 40%, var(--card) 50%, var(--sunken) 60% 100%) 0 0 / 300% 100%; border-radius: 6px; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }

.map { position: relative; }
.map-layer { position: absolute; inset: 0; }
.map-layer.entering { opacity: 0; pointer-events: none; }

/* Popup del mapa (InfoWindow siempre es blanco) */
.iw { color-scheme: light; font-family: var(--font); color: rgb(4 27 42); min-width: 220px; padding-top: 4px; }   /* el globo de Google es siempre blanco */
.equip { display: flex; gap: 6px; margin: 8px 0 6px; }
.eq { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); }
.eq svg { width: 18px; height: 18px; }
.iw h3 { font-size: 14px; margin-bottom: 8px; }
.iw .kv { border-color: rgb(230 235 241); }
.iw a { display: inline-flex; margin-top: 8px; font-weight: 600; color: rgb(159 95 18); }

/* Etiqueta de un elemento sobre el mapa (vistas generales y de un elemento); la del elemento abierto, con borde marcado */
.lvl { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-overlay); padding: 6px 10px; font-family: var(--font); min-width: 96px; cursor: pointer; }
.lvl b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.lvl.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow-overlay); }

/* Editor */
.field { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; }
.field input { width: 96px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunken); font-variant-numeric: tabular-nums; }
.field.text { display: grid; }
.field.text input { width: 100%; }
.sub { margin: 14px 0 4px; }

/* Gráfica ampliada */
.chart canvas { cursor: zoom-in; }
.chart-dlg { width: min(1400px, calc(100vw - 32px)); height: min(860px, calc(100dvh - 32px)); padding: 20px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-overlay); }
.chart-dlg[open] { display: flex; flex-direction: column; gap: 12px; }
.chart-dlg::backdrop { background: rgb(2 6 23 / .6); backdrop-filter: blur(2px); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dlg-head .eyebrow { font-size: .8rem; }
.dlg-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; padding: 6px 12px; background: var(--card); font-size: 13px; font-weight: 600; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: light-dark(rgb(4 27 42), rgb(217 138 43)); color: light-dark(#fff, rgb(11 18 32)); }
.dlg-chart { position: relative; flex: 1; min-height: 0; }
.dlg-chart canvas { cursor: grab; }
.dlg-hint { margin: 0; font-size: 12px; color: var(--soft); text-align: center; }
.dlg-print { display: none; }
/* PDF de la gráfica ampliada: solo el diálogo, en claro y a página completa */
@media print {
  body.print-chart { background: #fff; color-scheme: light; }
  body.print-chart > :not(#chart-dlg) { display: none !important; }
  body.print-chart .chart-dlg { position: static; width: 100%; height: auto; border: 0; box-shadow: none; padding: 0; }
  body.print-chart .dlg-chart { flex: none; }
  body.print-chart .chart-dlg::backdrop { display: none; }
  body.print-chart .dlg-tools, body.print-chart .dlg-hint { display: none; }
  body.print-chart .dlg-print { display: block; margin: 0; font-size: 11px; }
}

/* Informe de una alarma (Alarmas › Informe). PDF: solo el informe, en claro (printPage en app.js) */
.rep-dlg { width: min(820px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-overlay); }
.rep-dlg[open] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rep-dlg::backdrop { background: rgb(2 6 23 / .6); backdrop-filter: blur(2px); }
.rep-dlg h2 { font-size: 18px; }
.rep-data { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; margin: 0; }
.rep-data dt { font-size: 12px; font-weight: 600; color: var(--soft); }
.rep-data dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.rep-chart { position: relative; height: 260px; }
.rep-foot { margin: 0; font-size: 12px; }
@media print {
  body.print-report { display: block; background: #fff; }
  body.print-report > :not(#rep-dlg) { display: none !important; }
  body.print-report .rep-dlg { position: static; width: 100%; max-height: none; border: 0; box-shadow: none; padding: 0; }
  body.print-report .rep-dlg::backdrop { display: none; }
  body.print-report .dlg-tools { display: none; }
}

/* Usuario conectado (barra lateral) */
.side-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 0 12px; margin-top: -12px; }
.side-user .who { display: grid; min-width: 0; flex: 1; }
.side-user .icon-btn { flex-shrink: 0; }
.side-user .who b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .who small { font-size: 11px; color: var(--soft); }

/* Acceso: siempre negro, también con el sistema en tema claro (petición expresa) */
html:has(> body.login) { background: #000; }
body.login { position: relative; display: grid; place-items: center; min-height: 100dvh; padding: 32px 16px; overflow-x: hidden;
  background: #000; color: rgb(226 232 240); }
.login-water { position: fixed; inset: auto 0 0; height: 34vh; overflow: hidden; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 120%, rgb(56 189 248 / .14), transparent 70%); }
.login-water svg { display: block; width: max(100%, 1100px); height: 100%; }   /* en pantallas estrechas no se aprietan las ondas */
.login-water path { fill: none; stroke: rgb(56 189 248); stroke-width: 1.25; vector-effect: non-scaling-stroke;
  transform-box: fill-box; animation: login-flow 48s linear infinite; }
.login-water path:nth-child(1) { opacity: .2; animation-duration: 64s; }
.login-water path:nth-child(2) { opacity: .28; animation-duration: 48s; animation-direction: reverse; }
.login-water path:nth-child(3) { opacity: .38; animation-duration: 36s; }
@keyframes login-flow { to { translate: -50% 0; } }   /* el trazo mide el doble del ancho: el ciclo no tiene salto */
.login-main { position: relative; width: min(380px, 100%); display: grid; gap: 28px; }
.login-main > * { animation: login-in .5s cubic-bezier(.23, 1, .32, 1) backwards; }
.login-main > :nth-child(2) { animation-delay: .08s; }
@keyframes login-in { from { opacity: 0; translate: 0 8px; } }
.login-head { display: grid; justify-items: center; gap: 18px; text-align: center; }
.login-head .logos { width: min(300px, 100%); }
.login-logo { display: block; height: 44px; width: auto; }
.login-head .logo-stage { height: 64px; border: 0; border-radius: 10px; }
.login-head .logo-stage img { padding: 8px 14px; }
.login-head h1 { font-size: clamp(20px, 5.2vw, 24px); font-weight: 600; line-height: 1.25; color: #fff; text-wrap: balance; }
.login-form { display: grid; gap: 16px; padding: 24px; border: 1px solid rgb(148 163 184 / .22); border-radius: 12px; background: rgb(15 23 36 / .72); }
.login-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: rgb(203 213 225); }
.login-field input { width: 100%; padding: 11px 12px; border: 1px solid rgb(148 163 184 / .35); border-radius: 8px;
  background: rgb(0 0 0 / .55); color: #fff; font-size: 15px; font-weight: 400; }
.login-field input:hover { border-color: rgb(148 163 184 / .6); }
.login-field input:focus-visible { outline-offset: 0; border-color: transparent; }
.pw { position: relative; display: block; }
.pw input { padding-right: 84px; }
.pw-toggle { position: absolute; top: 50%; right: 6px; translate: 0 -50%; padding: 5px 10px; border: 0; border-radius: 6px;
  background: rgb(148 163 184 / .16); color: rgb(203 213 225); font-size: 12px; font-weight: 600; }
.login-form .login-error { margin-block: -6px; }
.login-submit { padding: 12px 16px; border: 0; border-radius: 8px; background: rgb(217 138 43); color: #000; font-size: 15px; font-weight: 700;
  transition: scale .16s cubic-bezier(.23, 1, .32, 1), filter .16s ease; }
.login-submit:hover { filter: brightness(1.1); }
.login-submit:active:not(:disabled) { scale: .98; }
.login-submit:disabled { opacity: .7; cursor: progress; }
.field input, .field select { font: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunken); color: var(--ink); }
.field.text { justify-content: stretch; }
.field.text select { width: 100%; }
.login-error { margin: 0; min-height: 1.2em; font-size: 13px; color: light-dark(rgb(185 28 28), rgb(252 165 165)); }
.btn-primary { padding: 10px 16px; border: 0; border-radius: 8px; font-weight: 700; background: light-dark(rgb(4 27 42), rgb(217 138 43)); color: light-dark(#fff, rgb(11 18 32)); }
.btn-primary:hover { filter: brightness(1.1); }

/* Configuración */
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.check input { width: 16px; height: 16px; accent-color: rgb(4 27 42); }
.mail-help { margin: 0 0 10px; font-size: 13px; }
.admin-tabs { align-self: start; justify-self: start; max-width: 100%; overflow-x: auto; }
.admin-tabs a { padding: 8px clamp(10px, 3vw, 18px); font-size: 14px; font-weight: 600; background: var(--card); }
.admin-tabs a + a { border-left: 1px solid var(--line); }
.admin-tabs a[aria-selected="true"] { background: light-dark(rgb(4 27 42), rgb(217 138 43)); color: light-dark(#fff, rgb(11 18 32)); }
.admin-users { display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
.admin-users > :last-child { grid-column: 2; }
.user-form { display: grid; gap: 12px; }
.form-actions { display: flex; gap: 8px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.chip-btn.danger { color: light-dark(rgb(185 28 28), rgb(252 165 165)); }
@media (max-width: 1200px) { .admin-users { grid-template-columns: minmax(0, 1fr); } .admin-users > :last-child { grid-column: auto; } }

#admin-body { display: grid; gap: 32px; }

/* Acciones: consignas, accionamientos manuales, rearmes y mensajes. En escritorio no mueve la página: si no cabe, desplaza su contenido. */
.acciones { display: grid; gap: 16px; align-content: start; min-height: 0; overflow: auto; }
.acc-sec { display: grid; gap: 10px; }
.acc-sec h2 { font-size: 16px; }
.acc-sec > .soft { margin: -4px 0 0; font-size: 13px; }
.acc-th { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.acciones .login-error { min-height: 0; }   /* el hueco del error solo aparece si hay error */
.acciones .login-error:not(:empty) { margin-top: 8px; }
.msg-card .field.text { grid-template-columns: 76px minmax(0, 1fr); align-items: center; padding: 4px 0; }
.acciones .btn-primary { padding: 7px 14px; }
.msg-card input, .th-row input { padding-block: 5px; }
.th-now { display: flex; align-items: baseline; gap: 10px; }
.th-scale { position: relative; height: 10px; margin: 12px 0 22px; border-radius: 5px; background: var(--sunken); }
.th-scale i { position: absolute; top: 0; bottom: 0; opacity: .85; }
.th-scale i:first-child { border-radius: 5px 0 0 5px; }
.th-scale i:last-of-type { border-radius: 0 5px 5px 0; }
.th-scale b { position: absolute; top: 14px; translate: -50% 0; font-size: 11px; font-weight: 600; color: var(--soft); font-variant-numeric: tabular-nums; }
.th-now-mark { position: absolute; top: -6px; width: 4px; height: 22px; translate: -50% 0; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--card); }
.th-rows { display: grid; gap: 8px; }
.th-row { display: grid; grid-template-columns: auto 1fr minmax(56px, 96px) auto; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.th-row input { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunken); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }
.th-card .form-actions, .msg-card .form-actions { margin-top: 12px; }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.manual-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.manual-row:last-child { border-bottom: 0; padding-bottom: 0; }
.switch { position: relative; width: 44px; height: 24px; border-radius: 12px; border: 0; background: var(--line); padding: 0; transition: background .2s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: translate .2s; }
.switch.on { background: #f97316; }
.switch.on i { translate: 20px 0; }

/* Configuración › Estaciones */
body.fit #admin-body { min-height: 0; }
body.fit #view:has(.stations) { grid-template-rows: auto minmax(0, 1fr); }
.stations { display: grid; gap: 16px; grid-template-columns: minmax(340px, 1fr) minmax(0, 1.6fr); min-height: 0; height: 100%; }
.st-help { margin: 0 0 8px; font-size: 13px; }
.st-list { display: grid; gap: 8px; overflow: auto; flex: 1; min-height: 0; align-content: start; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 130px; gap: 10px; align-items: end; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.st-row.dirty { border-color: #f97316; background: light-dark(rgb(255 247 237), rgb(124 45 18 / .25)); }
.st-row b { align-self: center; font-size: 13px; }
.st-row input { width: 100%; font-variant-numeric: tabular-nums; }
@media (max-width: 1200px) { .stations { grid-template-columns: 1fr; height: auto; } .stations .map { min-height: 360px; } }

/* Configuración › Logos */
.logo-admin { max-width: 780px; display: grid; gap: 12px; }
.logo-admin .card-head { margin-bottom: 0; }
.lg-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lg-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.lg-thumb { height: 56px; }
.lg-row .field { padding: 0; }
.lg-row .check { white-space: nowrap; }
.lg-row .icon-btn:disabled, .chip-btn:disabled { opacity: .4; cursor: not-allowed; }
.lg-formats { align-self: center; font-size: 12px; }
@media (max-width: 640px) {
  .lg-row { grid-template-columns: 96px minmax(0, 1fr); }
  .lg-row .row-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
}

/* Cámaras: rejilla que llena la pantalla (fitGrid); el vídeo ocupa lo que deja la tarjeta y las medidas de la estación van debajo */
.cam-grid { display: grid; gap: 16px; min-height: 0; height: 100%; }
.cam { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cam .card-head { margin-bottom: 8px; }
.cam-name { color: var(--ink); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-zoom { width: 30px; height: 30px; flex: none; }
.cam-zoom svg { width: 16px; height: 16px; color: var(--soft); }
/* Fondo negro solo detrás del vídeo (como un monitor), igual en los dos temas */
.cam-media { position: relative; flex: 1; min-height: 120px; display: grid; border-radius: 4px; overflow: hidden; background: rgb(0 0 0); }
.cam-media > img, .cam-media > video, .cam-media > iframe { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; object-fit: contain; border: 0; }
.cam-off { grid-area: 1 / 1; place-self: center; margin: 0; color: rgb(148 163 184); font-size: 13px; }
.cam-station { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 8px; font-size: 12px; }
.cam-station .comm-notice { margin: 0; }
.cam-val { display: inline-flex; align-items: baseline; gap: 6px; }
.cam-val b { font-size: 14px; }
.cam-dlg { width: min(1400px, calc(100vw - 32px)); height: min(900px, calc(100dvh - 32px)); padding: 0; border: 1px solid var(--line);
  border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-overlay); }
.cam-dlg::backdrop { background: rgb(2 6 23 / .6); backdrop-filter: blur(2px); }
.cam-dlg-in { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; }
.cam-dlg-body { flex: 1; min-height: 0; display: flex; }
.cam-dlg-body .cam { flex: 1; padding: 0; border: 0; }
.cam-dlg-body .cam-station { font-size: 14px; }
.cam-dlg-body .cam-val b { font-size: 18px; }

/* Configuración › Cámaras: en escritorio la lista hace scroll dentro de la tarjeta si no cabe */
body.fit #view:has(.cam-admin) { grid-template-rows: auto minmax(0, 1fr); }
.cam-admin { display: flex; flex-direction: column; gap: 12px; max-width: 1180px; max-height: 100%; min-height: 0; align-self: start; }
.cam-admin .card-head { margin-bottom: 0; }
.cm-help { margin: 0; font-size: 13px; }
.cm-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; overflow: auto; min-height: 0; }
.cm-row { display: grid; grid-template-columns: minmax(120px, 1fr) 190px minmax(200px, 2fr) 96px 170px auto; align-items: end; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.cm-row .field { padding: 0; }
.cm-row .field input, .cm-row .field select { width: 100%; min-width: 0; }
.cm-row input:disabled { opacity: .45; }
.cm-row .icon-btn:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 1200px) {
  .cam-grid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) !important; grid-template-rows: none !important; height: auto; }
  .cam-media { aspect-ratio: 16 / 9; flex: none; }
  .cm-row { grid-template-columns: 1fr 1fr; }
  .cm-row .cm-url, .cm-row .row-actions { grid-column: 1 / -1; }
  .cm-row .row-actions { justify-content: flex-start; }
}

/* Configuración › Dispositivos IoT: misma tarjeta que Cámaras; una instalación por <details>, con sus sensores y magnitudes */
/* Configuración › Sensores */
.of-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; overflow: auto; min-height: 0; align-content: start; }
.of-row { display: grid; grid-template-columns: minmax(180px, 1.3fr) 100px 170px minmax(180px, 2fr) 170px minmax(130px, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.of-row.st-info { border-color: var(--bd); background: var(--bg); }
.of-row .field { padding: 0; }
.of-row .field input { width: 100%; min-width: 0; background: var(--card); }
.of-row .switch.on { background: var(--dot); }
.of-name { display: grid; min-width: 0; }
.of-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-val { font-size: 13px; }
.of-who { font-size: 12px; }
@media (max-width: 1200px) {
  .of-row { grid-template-columns: minmax(0, 1fr) auto; }
  .of-row .check, .of-row .field, .of-who { grid-column: 1 / -1; }
}
.io-list { display: grid; gap: 8px; overflow: auto; min-height: 0; align-content: start; }
.io-inst { border: 1px solid var(--line); border-radius: 10px; }
.io-inst > summary { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; cursor: pointer; }
.io-inst > summary::before { content: "›"; align-self: center; color: var(--soft); font-size: 18px; line-height: 1; transition: rotate .15s; }
.io-inst[open] > summary::before { rotate: 90deg; }
.io-inst > summary .soft { white-space: nowrap; }
.io-inst[open] > summary { border-bottom: 1px solid var(--line); }
.io-inst > .io-head, .io-inst > .form-actions { padding: 10px 12px; }
.io-sensor { margin: 0 12px 10px; padding: 10px; border-radius: 8px; background: var(--sunken); display: grid; gap: 8px; }
.io-sensor .field input { background: var(--card); }
.io-head { display: grid; grid-template-columns: minmax(160px, 360px) auto; justify-content: space-between; align-items: end; gap: 10px; }
.io-sensor > .io-head { grid-template-columns: minmax(160px, 360px) 140px 1fr; }
.io-mags { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.io-mag { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(120px, 1.2fr) 70px 70px 110px 80px minmax(120px, 1fr) auto; align-items: end; gap: 10px; }
.io-head .field, .io-mag .field { padding: 0; position: relative; }
.io-head .field input, .io-mag .field input, .io-mag .field select { width: 100%; min-width: 0; }
.io-mag input:disabled { opacity: .45; }
.io-last { padding: 9px 0; font-size: 13px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.io-list .icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.io-list [aria-invalid="true"] { border-color: light-dark(rgb(185 28 28), rgb(252 165 165)); }
/* En escritorio, los rótulos de las magnitudes solo se ven en la primera fila (siguen siendo la etiqueta de cada campo) */
@media (min-width: 1201px) {
  .io-mag + .io-mag .eyebrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 1200px) {
  .io-sensor { margin-inline: 8px; }
  .io-head, .io-sensor > .io-head { grid-template-columns: 1fr 1fr; }
  .io-head > .field:only-of-type { grid-column: 1 / -1; }
  .io-head .row-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .io-mag { grid-template-columns: repeat(auto-fill, minmax(min(130px, 40%), 1fr)); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .io-mag .row-actions { justify-content: flex-start; align-self: end; }
}

/* Reconocer alarma */
.ack-dlg { width: min(460px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-overlay); }
.ack-dlg::backdrop { background: rgb(2 6 23 / .5); backdrop-filter: blur(2px); }
.ack-dlg form { display: grid; gap: 12px; }
.ack-dlg h2 { font-size: 18px; }
.ack-dlg .soft { margin: 0; font-size: 13px; }
.ack-dlg textarea { font: inherit; width: 100%; resize: vertical; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunken); color: var(--ink); }
.al-comment { white-space: normal; min-width: 180px; max-width: 320px; font-size: 12px; color: var(--soft); }

/* Pestaña Alarmas */
.alarm-page { container-type: inline-size; display: grid; gap: 16px; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; height: 100%; }
.al-sum { display: grid; gap: 12px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.al-kpi { position: relative; display: grid; gap: 2px; padding: 12px 14px; }
.al-kpi:last-child { grid-column: span 2; }   /* tiempo medio hasta reconocer: «2 h 5 min» */
.al-kpi .dot { position: absolute; top: 14px; right: 14px; }
.al-card { gap: 12px; }
.al-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.al-filters select { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.al-filters .grow { flex: 1; }
.al-table { flex: 1; min-height: 0; margin: 0 -16px; }
.al-table thead th, .al-rank thead th { position: sticky; top: 0; z-index: 1; }
/* Estadísticas: barras por periodo a la izquierda, ranking por activo a la derecha */
.al-stats { flex: 1; min-height: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); }
.al-rank { margin: 0; min-height: 0; }
.al-rank th, .al-rank td { padding-inline: 10px; }
.al-rank th { white-space: normal; vertical-align: bottom; }
.al-barcell { width: 100%; }
.al-bar { display: flex; min-width: 60px; height: 10px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.al-print { display: none; }
/* El resumen se reparte según el ancho disponible, con la barra lateral plegada o no */
@container (max-width: 1000px) { .al-sum { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 420px) { .al-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1200px) {
  .al-table { max-height: 70dvh; }
  .al-stats { grid-template-columns: 1fr; }
  .al-card .al-stats .chart { height: 260px; }   /* por encima de .flexcard .chart */
}
@media print {
  body.print-stats { display: block; background: #fff; color-scheme: light; }
  body.print-stats .side, body.print-stats .topbar, body.print-stats .admin-tabs, body.print-stats .al-filters { display: none !important; }
  body.print-stats #view, body.print-stats .alarm-page { display: block; height: auto; padding: 0; overflow: visible; }
  body.print-stats .al-print { display: block; margin: 0 0 12px; font-size: 11px; }
  body.print-stats .al-sum { margin-bottom: 12px; }
  body.print-stats .al-stats { display: block; }
  body.print-stats .al-card .al-stats .chart { height: 300px; margin-bottom: 16px; }
  body.print-stats .al-rank { overflow: visible; }
}

/* Entrada de vistas y cambio de tema. */
#view > * { animation: fadeup .22s ease-out both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(4px); } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Dashboard: mapa a pantalla completa; la columna de alarmas lo estrecha al abrirse */
body.full #view { padding: 0; display: block; }
body.full #view, body.fit #view { overflow: hidden; }   /* la entrada con fade-up no debe sacar scroll */
.fullmap { display: flex; height: 100dvh; }
.mapwrap { position: relative; flex: 1; min-width: 0; }
.mapwrap .map { height: 100%; min-height: 0; border-radius: 0; }
.fab { position: absolute; z-index: 3; right: 16px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 12px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); font-weight: 700; box-shadow: var(--shadow-overlay); }
.fab svg { width: 20px; height: 20px; }
.fab[aria-expanded="true"] { outline: 2px solid var(--dot); outline-offset: 2px; }
.apanel { width: min(560px, 45%); flex: none; overflow: auto; border-radius: 0; border-width: 0 0 0 1px; box-shadow: none;
  transition: width .3s cubic-bezier(.2, .8, .2, 1), max-height .3s cubic-bezier(.2, .8, .2, 1), padding .3s, border-width .3s; }
.apanel:hover { box-shadow: none; }
.apanel > * { min-width: 320px; }   /* el contenido no se reordena mientras la columna se abre: se recorta */
.apanel.closed { width: 0; padding-inline: 0; border-width: 0; overflow: hidden; }
.fab { transition: background .2s, border-color .2s, color .2s; }

/* Peligro de incendio (escala AEMET de 6 niveles) */
.fire { display: grid; gap: 8px; width: 100%; }
.fire-now { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fire-now .mid { display: inline-flex; align-items: center; gap: 8px; }
.fire-scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.fire-scale i { height: 8px; border-radius: 3px; opacity: .25; transition: opacity .3s; }
.fire-scale i.on { opacity: 1; box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--ink); }

/* Herramientas sobre el mapa */
.maptools { position: absolute; z-index: 3; top: 16px; left: 16px; display: grid; gap: 8px; }
.maptool { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); color: var(--soft); box-shadow: var(--shadow-overlay); }
.maptool svg { width: 20px; height: 20px; }
.maptool[aria-pressed="true"] { color: #ef8504; border-color: #ef8504; }
.mapsearch { position: absolute; z-index: 3; top: 16px; left: 76px; width: min(320px, calc(100% - 136px)); }   /* entre las herramientas y la pantalla completa de Google */
.mapsearch svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--soft); pointer-events: none; }
.mapsearch input { width: 100%; height: 44px; padding: 0 12px 0 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-overlay); }
.mapsearch input:focus-visible { outline-offset: 0; }
/* Instalación agrupada: nombre y número de estaciones; el aro del número lleva el peor estado */
.inst-pin { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; translate: 0 50%;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-overlay); font: 600 13px var(--font); white-space: nowrap; cursor: pointer; }
.inst-pin b { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px;
  background: rgb(4 27 42); color: #fff; box-shadow: 0 0 0 3px var(--dot); font-size: 13px; font-variant-numeric: tabular-nums; }
/* Leyendas abajo a la izquierda, sin llegar a los controles de Google de abajo a la derecha */
.legends { position: absolute; z-index: 3; left: 16px; bottom: 32px; max-width: calc(100% - 88px); display: flex; flex-wrap: wrap-reverse; gap: 8px; align-items: flex-end; }
.legend { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-overlay); font-size: 12px; }
.legend span:not(.eyebrow) { display: flex; align-items: center; gap: 8px; }
.legend i { width: 14px; height: 10px; border-radius: 3px; opacity: .8; }
/* Estados: en una fila (varias en móvil) para que tape poco; punto como el aro de los marcadores */
.st-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 12px; }
.legend i.dot { width: 10px; height: 10px; border-radius: 50%; opacity: 1; }
.legend[hidden] { display: none; }
.sources { margin: -12px 0 0; padding: 0 12px; font-size: 10px; line-height: 1.4; color: var(--soft); }
.source { display: block; font-size: 10px; color: var(--soft); margin-top: 6px; }
.ica-dot { display: block; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .45); translate: 0 50%; }   /* centrado en la estación */
.forecast { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; height: 22px; }
.forecast i { position: relative; border-radius: 2px; transition: transform .12s, box-shadow .12s; cursor: default; }
.forecast i:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--ink); z-index: 1; }
.fc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 14px 0 6px; }
.fc-read { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.forecast b { position: absolute; top: 100%; left: 0; font-size: 9px; font-weight: 600; color: var(--soft); }
#air-fc, #fire-fc, #rain-fc { margin-bottom: 12px; }
.forecast.days { gap: 3px; }
.forecast.days b { left: 50%; translate: -50% 0; text-transform: capitalize; }

/* Vista general (Ríos, Meteorología, Estados, IoT): mapa y lista compacta que hace scroll dentro de su tarjeta */
.overview { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); min-height: 0; }
.overview.nomap { grid-template-columns: minmax(0, 1fr); }
.ov-list { flex: 1; min-height: 0; overflow: hidden auto; margin: 0 -16px -16px; border-top: 1px solid var(--line); }
.nomap .ov-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); align-content: start; }
.ov-h { position: sticky; top: 0; z-index: 1; padding: 6px 16px; background: var(--sunken); font-size: 12px; font-weight: 600; color: var(--soft); }
.ov-row { display: grid; grid-template-columns: minmax(96px, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.ov-row:hover { background: var(--sunken); }
.ov-name { display: grid; min-width: 0; }
.ov-name b, .ov-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-name b { font-size: 13px; }
.ov-name small { font-size: 12px; color: var(--soft); }
.ov-vals { display: flex; gap: 12px; font-size: 14px; white-space: nowrap; }
.ov-vals .stale { color: var(--soft); }
@media (max-width: 640px) {   /* móvil: los valores bajan debajo del nombre */
  .ov-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .ov-vals { grid-row: 2; }
  .ov-row .chip { grid-column: 2; grid-row: 1 / 3; }
}
/* Vista de un elemento: valor, estado y mapa a un lado; gráfica (o mapa) grande al otro */
.detail { display: grid; gap: 16px; grid-template-columns: minmax(300px, 1fr) minmax(0, 2.6fr); min-height: 0; }
.det-side { display: grid; gap: 16px; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.det-side .kv { padding: 6px 0; font-size: 13px; }
.det-side .kv:first-of-type { margin-top: 8px; }
.detail.cabd { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.6fr); }
.det-table { overflow: hidden; }
.det-table .chip-btn { flex: none; white-space: nowrap; }
.det-table .table-wrap { flex: 1; min-height: 0; }
.cab { display: flex; flex-direction: column; min-height: 0; overflow: hidden; container-type: size; }
.cab-title { display: grid; gap: 4px; padding-bottom: clamp(6px, 3cqh, 14px); margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.cab-title h2 { font-size: clamp(14px, 7cqh, 22px); line-height: 1.2; }
.cab-states { flex: 1; display: grid; align-content: space-evenly; }
.cab .state-row { font-size: clamp(12px, 6cqh, 20px); padding-block: clamp(4px, 2.5cqh, 14px); gap: clamp(8px, 3cqw, 16px); }
.cab .state-row .dot { width: clamp(8px, 3cqh, 14px); height: clamp(8px, 3cqh, 14px); }
.cab .state-row .chip { font-size: clamp(11px, 4.5cqh, 15px); }

/* Grupos de la barra lateral (Ríos, Meteorología, Estados, IoT): la entrada lleva a la vista general y debajo van los elementos con su estado.
   En escritorio, los sensores de una instalación IoT llenan la pantalla y hacen scroll dentro si no caben */
.nav-group { min-width: 0; }
.nav-group > summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary svg { color: var(--soft); }
.nav-group > summary:hover, .nav-group > summary[aria-current="page"] { background: var(--sunken); }
.nav-group > summary::after { content: ""; width: 6px; height: 6px; margin: 0 4px 0 auto; border: solid var(--soft); border-width: 0 1.75px 1.75px 0; rotate: -45deg; transition: rotate .16s cubic-bezier(.23, 1, .32, 1); }
.nav-group[open] > summary::after { rotate: 45deg; }
.nav-group:has([aria-current]) > summary, .nav-group:has([aria-current]) > summary svg { color: var(--ink); font-weight: 700; }
.nav-group a { gap: 8px; margin-top: 2px; padding: 7px 12px 7px 42px; font-size: 13px; font-weight: 500; }
.nav-group a .lbl { flex: 1; min-width: 0; line-height: 1.3; }
.nav-group a[aria-current="page"] { font-weight: 700; }
.iot-sum { display: flex; gap: 8px; font-size: 12px; font-weight: 600; color: var(--soft); font-variant-numeric: tabular-nums; }
.iot-sum > span { display: inline-flex; align-items: center; gap: 4px; }
.iot-sensors { display: grid; gap: 16px; min-height: 0; overflow: auto; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); grid-auto-rows: minmax(min-content, 1fr); }   /* con muchas magnitudes la fila crece en vez de montarse */
.iot-sensor { display: flex; flex-direction: column; min-height: 0; }
.iot-sensor .card-head { margin-bottom: 8px; }
.iot-sensor .eyebrow { color: var(--ink); font-size: 13px; }
.iot-vals { display: flex; flex-wrap: wrap; gap: 6px; }
.iot-val { display: grid; gap: 1px; min-width: 64px; padding: 4px 9px; text-align: left; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.iot-val span { font-size: 11px; color: var(--soft); }
.iot-val b { font-size: 15px; }
.iot-val b.stale { color: var(--soft); }
.iot-val:hover { background: var(--sunken); }
.iot-val[aria-pressed="true"] { background: var(--sunken); border-color: var(--soft); }
.iot-sensor .chart { flex: 1; min-height: 110px; height: auto; margin-top: 8px; }
.iot-seen { margin: 6px 0 0; font-size: 11px; color: var(--soft); }

/* Meteorología: dos filas que llenan la pantalla */
.meteo-fit { display: grid; gap: 16px; grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 0; }
.meteo-top { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr); min-height: 0; }
.meteo-stack { display: grid; gap: 16px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.meteo-bottom { display: grid; gap: 16px; min-height: 0; }
.grow { flex: 1; min-height: 0; }
.grow.center { display: grid; align-content: center; }
.grow.center .fire-now .mid { font-size: 22px; }
.grow.center .fire-scale i { height: 14px; }
.flexcard { display: flex; flex-direction: column; min-height: 0; }
.flexcard .map { flex: 1; min-height: 0; }
.flexcard .chart { flex: 1; min-height: 0; height: auto; margin-top: 8px; }
.flexcard .card-head { margin-bottom: 8px; }
@media (min-width: 1201px) {
  body.fit #view { height: max(100dvh, 700px); grid-template-rows: minmax(0, 1fr); }   /* ventana muy baja: scroll antes que tarjetas montadas */
}
/* Ventana baja: la barra lateral se aprieta y, como último recurso, se desplaza ella sola (overflow-y de .side) */
@media (min-width: 1201px) and (max-height: 860px) {
  .side { gap: 12px; padding-block: 14px; }
  .side-user, .sources { margin-top: -4px; }
  .nav a, .nav-group > summary { padding-block: 6px; }
  .sbox { padding-block: 8px; }
  .abox-k b { font-size: 18px; }
}

/* Barra lateral plegable (escritorio): queda una franja de iconos */
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side, .side .brand, .nav a { transition: width .2s, padding .2s; }
@media (min-width: 1201px) {
  body.collapsed .side { width: 72px; padding-inline: 12px; }
  body.collapsed .brand-mark { display: block; }
  body.collapsed .side .brand, body.collapsed .side .logos, body.collapsed .nav .lbl, body.collapsed .side-info, body.collapsed .sources { display: none; }
  body.collapsed .side-user { justify-content: center; padding: 0; margin-top: 0; flex-direction: column; gap: 12px; }
  body.collapsed .side-user .who { display: none; }
  body.collapsed .side-top { justify-content: center; padding: 0; flex-direction: column; gap: 12px; }
  body.collapsed .nav a { justify-content: center; padding-inline: 0; }
  body.collapsed .nav-group > summary { justify-content: center; padding-inline: 0; }
  body.collapsed .nav-group > summary::after, body.collapsed .nav-group a { display: none; }
  body.collapsed .nav-group:has([aria-current]) > summary { background: var(--sunken); }
  body.collapsed .side-boxes { gap: 12px; }
  body.collapsed .sbox { grid-template-columns: 1fr; justify-items: center; padding: 0; border: 0; background: none; }
  body.collapsed .sbox > :not(.sbox-ico) { display: none; }
  body.collapsed .sbox-ico { display: grid; }
}

/* Móvil, tableta y ventanas estrechas: la barra lateral pasa a drawer y las tarjetas se apilan con scroll */
@media (max-width: 1200px) {
  .side { position: fixed; z-index: 20; left: 0; translate: -100%; transition: translate .25s; box-shadow: var(--shadow-overlay); }
  body.open .side { translate: 0; }
  body.open .scrim { display: block; position: fixed; inset: 0; z-index: 10; background: rgb(2 6 23 / .4); backdrop-filter: blur(2px); }
  .topbar { display: flex; align-items: center; gap: 12px; height: 61px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--sidebar); position: sticky; top: 0; z-index: 5; }
  .topbar .brand { padding: 0; }
  .topbar .logo-img { height: 30px; }
  /* Indicadores de alarmas y de avisos, juntos a la derecha; caben a 360 px con el menú y el logo */
  .top-ind { display: flex; gap: 6px; margin-left: auto; }
  .tchip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); font-size: 13px; }
  .tchip-u { padding-left: 6px; border-left: 1px solid var(--bd); color: light-dark(rgb(180 83 9), rgb(252 211 77)); }
  #view { padding: 16px; }
  .fullmap { height: calc(100dvh - 61px); flex-direction: column; }
  .apanel { width: auto; max-height: 50%; border-width: 1px 0 0; }
  /* Tarjetas apiladas: una columna en móvil, dos o más en tableta */
  .meteo-top, .meteo-bottom { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; }
  .meteo-fit, .meteo-stack { grid-template-rows: none; }
  .overview, .detail, .detail.cabd, .det-side { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .nomap .ov-list { grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); }
  .det-table .table-wrap { flex: none; }
  .cab { container-type: normal; }
  .cab-title { padding-bottom: 10px; }
  .cab-title h2 { font-size: 16px; }
  .cab .state-row { font-size: 14px; padding-block: 8px; gap: 10px; }
  .cab .state-row .dot { width: 8px; height: 8px; }
  .cab .state-row .chip { font-size: 12px; }
  .st-row { grid-template-columns: 1fr 1fr; }
  .st-row b { grid-column: 1 / -1; }
  .meteo-top .flexcard .chart, .meteo-bottom .flexcard .chart { min-height: 160px; }
  .flexcard .map { min-height: 300px; }
  .flexcard .chart { min-height: 180px; }
  .apanel.closed { width: auto; max-height: 0; padding-block: 0; }
  #collapse { display: none; }
}