/* 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);
  --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: fg (texto), bg (pastel), bd (borde), dot (saturado) */
.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(180 83 9), rgb(252 211 77));    --bg: light-dark(rgb(255 251 235), rgb(120 53 15 / .35)); --bd: light-dark(rgb(253 230 138), rgb(146 64 14));  --dot: rgb(245 158 11); }
.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-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; background: var(--sidebar); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.logo-img { display: block; height: 38px; width: auto; }
.brand-mark { display: none; }
.brand-mark img { width: 28px; height: 28px; }
/* Logo 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; }
.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 { margin-top: auto; display: grid; gap: 8px; padding: 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); }
.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; }
.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 nivel sobre el mapa */
.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; }
.lvl b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }

/* 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%; }
.toggles { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.toggles button { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); font-weight: 600; }
.toggles button.on { --bd: rgb(245 158 11); background: light-dark(rgb(255 251 235), rgb(120 53 15 / .35)); border-color: var(--bd); color: light-dark(rgb(180 83 9), rgb(252 211 77)); }
.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; }

/* 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 */
body.login { display: block; min-height: 100dvh; }
.login-shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr); min-height: 100dvh; }
.login-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 48px;
  background: rgb(4 27 42); color: rgb(226 232 240); }
.login-hero .brand { padding: 0; }
.login-hero .logo-img { height: 48px; }
.login-hero .eyebrow { color: rgb(217 138 43); }
.login-hero h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; margin: 10px 0 14px; color: #fff; }
.login-hero .lead { max-width: 420px; margin: 0; color: rgb(148 163 184); font-size: 15px; }
.login-hero .waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 38%; fill: none; stroke: rgb(217 138 43); stroke-width: 1.5; opacity: .35; }
.login-hero > :not(.waves) { position: relative; z-index: 1; }
.login-hero .hero-text { margin-block: auto 30%; }   /* texto por encima de las ondas */
.login-form { align-self: center; justify-self: center; width: min(380px, calc(100% - 32px)); display: grid; gap: 16px; padding: 32px 0; }
.login-form h2 { font-size: 24px; margin-bottom: 4px; }
.login-form .soft { margin: 0; font-size: 14px; }
.login-form .field.text { justify-content: stretch; gap: 6px; padding: 0; }
.login-form .field input { width: 100%; padding: 11px 12px; font-size: 15px; background: var(--card); }
.login-form .field input:focus-visible { outline-offset: 0; }
.pw { position: relative; display: block; }
.pw input { padding-right: 84px !important; }
.pw-toggle { position: absolute; top: 50%; right: 6px; translate: 0 -50%; padding: 5px 10px; border: 0; border-radius: 6px; background: var(--sunken); color: var(--soft); font-size: 12px; font-weight: 600; }
.login-form .btn-primary { padding: 12px 16px; font-size: 15px; }
.login-form .btn-primary:disabled { opacity: .7; cursor: progress; }
.login-foot { margin: 8px 0 0; font-size: 11px; color: var(--soft); text-align: center; }
.mobile-only { display: none; }
@media (max-width: 860px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-hero { display: none; }
  .mobile-only { display: flex; padding: 0; }
}
.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); }

/* Admin */
.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; }
.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: 1fr; } }

/* Admin › Consignas */
.admin-sec { display: grid; gap: 10px; }
#admin-body { display: grid; gap: 32px; }
.admin-sec h2 { font-size: 16px; }
.admin-sec > .soft { margin: 0 0 4px; font-size: 13px; max-width: 760px; }
.th-now { display: flex; align-items: baseline; gap: 10px; }
.th-scale { position: relative; height: 10px; margin: 18px 0 26px; 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 72px auto minmax(48px, 110px) 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 { margin-top: 4px; }
.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: 10px 0; border-bottom: 1px solid var(--line); }
.manual-rearm { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; font-size: 12px; }
.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; }

/* Admin › 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; } }

/* 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 minmax(0, 1fr); min-height: 0; height: 100%; }
.al-sum { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.al-kpi { position: relative; display: grid; gap: 2px; padding: 12px 14px; }
.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 { position: sticky; top: 0; z-index: 1; }
/* El resumen se reparte según el ancho disponible, con la barra lateral plegada o no */
@container (max-width: 860px) { .al-sum { grid-template-columns: repeat(3, 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; } }

/* 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; }
.legends { position: absolute; z-index: 3; left: 16px; bottom: 32px; display: flex; 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; }
.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; }

/* Ríos: todo en una pantalla (escritorio) */
.rio-fit { display: grid; min-height: 0; }
/* Cuadros de control: rejilla que llena la pantalla (fitGrid decide filas y columnas) */
.cab-grid { display: grid; gap: 16px; min-height: 0; height: 100%; }
.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); }

/* 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; }
.warns { display: flex; flex-wrap: wrap; gap: 8px; }
.warn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; font-size: 13px; }
@media (min-width: 1201px) { .meteo-fit:has(.warns:not([hidden])) { grid-template-rows: auto minmax(0, 1.15fr) minmax(0, 1fr); } }
.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; }   /* Ríos: mapa arriba, una gráfica por río abajo; la meteo está en su pestaña */
.rio-right { display: grid; gap: 16px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.rivers { display: grid; gap: 16px; min-height: 0; }
.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 */
}

/* 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 .nav .lbl, body.collapsed .side-info, body.collapsed .sources { display: none; }
  body.collapsed .side-user { justify-content: center; padding: 0; margin-top: auto; 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; }
}

/* 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; padding: 12px 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; }
  #view { padding: 16px; }
  .fullmap { height: calc(100dvh - 61px); flex-direction: column; }
  .apanel { width: auto; max-height: 50%; border-width: 1px 0 0; }
  .rio-fit { grid-template-columns: 1fr; }
  /* Tarjetas apiladas: una columna en móvil, dos o más en tableta */
  .meteo-top, .meteo-bottom, .cab-grid, .rivers { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; }
  .meteo-fit, .meteo-stack { grid-template-rows: none; }
  .cab-grid { grid-template-rows: none !important; height: auto; }
  .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; }
  .rio-right, .rivers { grid-template-rows: none; }
  .rio-right { grid-template-columns: 1fr !important; }
  .flexcard .map { min-height: 300px; }
  .flexcard .chart { min-height: 180px; }
  .apanel.closed { width: auto; max-height: 0; padding-block: 0; }
  #collapse { display: none; }
}