/* GridPredic: the shared design system of the dashboard pages (index, dias, historial, negocio).

   Tokens first (colour, type, spacing, radius, shadow, motion), then the base, the navigation, the page header,
   the panels, the figures, the badges of risk, the data grids, the charts and maps, the status strips, the
   footer, the motion and the responsive rules. The risk colours are semantic and never change meaning; every
   risk is always written as a word next to its colour. Light is the working theme (maps and charts read better
   on paper); dark follows the system or data-theme="dark". */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Surfaces and ink */
  --ink: #141c26;          /* the navigation bar and the strongest text */
  --paper: #eef1f5;        /* the page */
  --panel: #ffffff;        /* panels */
  --panel-2: #f6f8fb;      /* nested panels, table headers */
  --line: #d9dfe7;
  --line-strong: #c3ccd8;
  --fg: #1b2430;
  --muted: #5d6878;
  --faint: #6b7686;        /* 4.6:1 on white: labels of the figures and metadata */
  /* The one accent: voltage blue, for navigation, links and the forecast bars */
  --accent: #2457c5;
  --accent-ink: #163c8f;
  --accent-soft: #e6edfb;
  --accent-on-ink: #8fb1ff;
  /* Risk, semantic and fixed: an ordered scale from grey to maroon (grey for the normal days, then amber, the
     vermilion of Okabe and Ito and maroon), readable with protanopia and deuteranopia (CIEDE2000 between levels
     18.9 or more, Machado 2009). These four colours mean a level and nothing else. Text on the badge is chosen
     for contrast; the amber needs a darker edge where it is drawn on white (--medio-borde). */
  --bajo: #8a96a3; --bajo-soft: #eceff3; --bajo-ink: #3d4752;
  --medio: #f2c230; --medio-soft: #fff1c2; --medio-ink: #6b5200; --medio-borde: #b38f00;
  --alto: #d55e00; --alto-soft: #fde3d2; --alto-ink: #8a3e0b;
  --muy-alto: #7f1d2d; --muy-alto-soft: #f6dde1; --muy-alto-ink: #6e1422;
  --guardia: #2457c5;
  /* Lightning and storms: black and white, never a colour of the levels */
  --tormenta: #1b2430; --tormenta-fondo: #ffffff;
  /* Series of the charts: the forecast in the accent, the rain in light blue, the ensemble in purple, AEMET in the
     bluish green of Okabe and Ito (dashed), what was observed in black, the alternative policies in a neutral
     grey, force majeure in dark grey and the window of the day as a blue-grey band. */
  --serie-prevista: #2457c5; --serie-lluvia: #4a90d9; --serie-banda: #6b4fbb; --serie-aemet: #009e73; --serie-observada: #141c26;
  --serie-alternativa: #9aa5b1; --serie-fuerza-mayor: #4a5462; --franja: #8a9bb0;
  /* The edge of the circles of the map and the ring of the stations of AEMET */
  --mapa-borde: #1b2430; --estacion: #1b2430;
  --grid: #e3e7ed;
  /* Type */
  --font: "IBM Plex Sans", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", "Courier New", monospace;
  --fs-0: 12px; --fs-1: 13px; --fs-2: 14px; --fs-3: 16px; --fs-4: 19px; --fs-5: 24px; --fs-6: 30px;
  /* Space and shape */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --r-1: 6px; --r-2: 10px; --r-3: 14px;
  --shadow: 0 1px 2px rgba(20, 28, 38, 0.06), 0 6px 18px -8px rgba(20, 28, 38, 0.12);
  --gutter: 24px;
  --page-max: 1680px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms; --t-base: 220ms; --t-slow: 420ms;
  --focus: 0 0 0 3px rgba(36, 87, 197, 0.35);
}

/* The dark theme keeps the same order of hues; on a dark panel the grey and the orange are lighter and the
   red is a crimson (CIEDE2000 between levels 18.7 or more with protanopia and deuteranopia). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #0b1017; --paper: #10151c; --panel: #171e27; --panel-2: #1d2531; --line: #2a3340; --line-strong: #3a4556;
    --fg: #e7ecf3; --muted: #a0abbb; --faint: #8d98a8;
    --accent: #7fa7ff; --accent-ink: #b7ccff; --accent-soft: #1b2a47; --accent-on-ink: #9dbbff; --on-accent: #0b1017;
    --bajo: #7d8896; --bajo-soft: #252d38; --bajo-ink: #c9d1dc;
    --medio: #ffdb42; --medio-soft: #3a3008; --medio-ink: #f6dc7a; --medio-borde: #ffdb42;
    --alto: #e37115; --alto-soft: #3f2211; --alto-ink: #f6b687;
    --muy-alto: #b73d43; --muy-alto-soft: #3d1a1f; --muy-alto-ink: #f4aab0;
    --tormenta: #e7ecf3; --tormenta-fondo: #0b1017;
    --serie-aemet: #2fbf8f; --serie-observada: #f2f5f9; --serie-alternativa: #9aa5b1; --serie-fuerza-mayor: #b4bdc8; --franja: #8a9bb0;
    --mapa-borde: #e7ecf3; --estacion: #e7ecf3;
    --grid: #2a3340;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -10px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #0b1017; --paper: #10151c; --panel: #171e27; --panel-2: #1d2531; --line: #2a3340; --line-strong: #3a4556;
  --fg: #e7ecf3; --muted: #a0abbb; --faint: #8d98a8;
  --accent: #7fa7ff; --accent-ink: #b7ccff; --accent-soft: #1b2a47; --accent-on-ink: #9dbbff; --on-accent: #0b1017;
  --bajo: #7d8896; --bajo-soft: #252d38; --bajo-ink: #c9d1dc;
  --medio: #ffdb42; --medio-soft: #3a3008; --medio-ink: #f6dc7a; --medio-borde: #ffdb42;
  --alto: #e37115; --alto-soft: #3f2211; --alto-ink: #f6b687;
  --muy-alto: #b73d43; --muy-alto-soft: #3d1a1f; --muy-alto-ink: #f4aab0;
  --tormenta: #e7ecf3; --tormenta-fondo: #0b1017;
  --serie-aemet: #2fbf8f; --serie-observada: #f2f5f9; --serie-alternativa: #9aa5b1; --serie-fuerza-mayor: #b4bdc8; --franja: #8a9bb0;
  --mapa-borde: #e7ecf3; --estacion: #e7ecf3;
  --grid: #2a3340;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -10px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--fg);
  font: 400 var(--fs-2)/1.5 var(--font);
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--focus); border-radius: var(--r-1);
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
h1 { font-size: var(--fs-6); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-2); font-weight: 600; color: var(--fg); }
p { margin: 0; }
p + p { margin-top: var(--s-2); }
ul, ol { margin: 0; padding-left: 20px; }
li { margin: 2px 0; }
b, strong { font-weight: 600; }
code { font-family: var(--mono); font-size: 0.92em; background: var(--panel-2); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; }
pre { font-family: var(--mono); font-size: var(--fs-0); background: var(--panel-2); border: 1px solid var(--line); padding: var(--s-3) var(--s-4); border-radius: var(--r-1); overflow: auto; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.notas { color: var(--muted); font-size: var(--fs-1); }
.notas li { margin: 3px 0; }
p.texto { margin: var(--s-2) 0; max-width: 78ch; }
.vacio { color: var(--muted); padding: var(--s-5); text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--r-2); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }

/* ---------------------------------------------------------------- navigation */
nav.menu {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s-1) var(--s-2);
  min-height: 52px; padding: 0 var(--gutter);
  background: var(--ink); color: #dfe6f0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
nav.menu .marca {
  display: inline-flex; align-items: center; gap: 10px; margin-right: var(--s-4);
  color: #ffffff; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
}
nav.menu .marca svg { width: 22px; height: 22px; display: block; }
nav.menu .marca:hover { text-decoration: none; color: #ffffff; }
nav.menu .items { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; min-width: 0; }
nav.menu .items::-webkit-scrollbar { display: none; }
nav.menu .items a, nav.menu .derecha a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 8px;
  color: #c6d0dd; font-size: var(--fs-2); font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
nav.menu .items a:hover, nav.menu .derecha a:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
nav.menu .items a.actual { background: rgba(255, 255, 255, 0.12); color: #ffffff; box-shadow: inset 0 -2px 0 var(--accent-on-ink); }
nav.menu .derecha { margin-left: auto; display: flex; align-items: center; gap: 2px; }
nav.menu .derecha a { color: #a9b5c5; font-weight: 400; }
nav.menu a:focus-visible { box-shadow: 0 0 0 3px rgba(143, 177, 255, 0.5); }

/* ---------------------------------------------------------------- page frame */
.page, main, footer, .page-wrap { max-width: var(--page-max); margin-left: auto; margin-right: auto; }
header.page { position: relative; isolation: isolate; overflow: clip; padding: var(--s-5) var(--gutter) var(--s-4); display: grid; gap: var(--s-3); }
/* A decorative layer behind the header: the only thing that moves with a parallax, never the data. */
header.page .aurora { position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 18% 20%, rgba(36, 87, 197, 0.10), transparent 55%), radial-gradient(ellipse at 85% 70%, rgba(36, 87, 197, 0.06), transparent 50%); }
header.page .page-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); }
header.page .titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); }
header.page h1 { font-size: var(--fs-6); }
header.page .fecha-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; font-size: var(--fs-2); font-variant-numeric: tabular-nums;
}
header.page .sub { color: var(--muted); font-size: var(--fs-2); max-width: 80ch; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.boton {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--fg); font-weight: 500; font-size: var(--fs-1);
  text-decoration: none; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.boton:hover { background: var(--panel-2); border-color: var(--accent); text-decoration: none; }
.boton.primario { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #ffffff); }
.boton.primario:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.boton svg { width: 14px; height: 14px; }

/* The metadata of the run: a definition grid, quiet */
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-2) var(--s-5); margin: 0; font-size: var(--fs-1); }
.meta div { display: grid; gap: 1px; align-content: start; }
.meta dt { color: var(--faint); font-size: var(--fs-0); }
.meta dd { margin: 0; color: var(--muted); }
details.meta-detalles > summary { cursor: pointer; color: var(--accent); font-size: var(--fs-1); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.meta-detalles > summary::-webkit-details-marker { display: none; }
details.meta-detalles > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease); }
details.meta-detalles[open] > summary::before { transform: rotate(45deg); }
details.meta-detalles[open] > summary { margin-bottom: var(--s-3); }

/* Status strips: the guard, the outlook, the lightning, the stale day */
.strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  padding: 10px 14px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--panel); font-size: var(--fs-2);
}
.strip b { font-weight: 600; }
/* Notices of the system (a stale file, an archived day) go in the accent with a thick left edge: the colours of
   the levels are only for levels. */
.strip.aviso { border-color: var(--accent); border-left-width: 4px; background: var(--accent-soft); color: var(--accent-ink); }
.strip.aviso a { color: inherit; text-decoration: underline; }
/* The notice of the public demo (demo.js, only outside the laptop): the accent of the notices, under the menu and
   above the page header, so every page says what it is before anything else. */
.demo-aviso {
  padding: 10px var(--gutter); border-bottom: 1px solid var(--accent); border-left: 4px solid var(--accent);
  background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-2); line-height: 1.45;
}
.demo-aviso b { font-weight: 600; }
.demo-aviso a { color: inherit; text-decoration: underline; white-space: nowrap; }
.strip.guardia-si { border-color: var(--guardia); background: var(--accent-soft); color: var(--accent-ink); }
.strip.suave { color: var(--muted); }
.strip .nivel { font-size: 12px; }
.rayos { display: block; margin: 0 0 var(--s-3); padding: 8px 12px; border-radius: var(--r-1); border: 1px solid var(--line); background: var(--panel-2); font-size: var(--fs-1); color: var(--muted); line-height: 1.5; }
.rayos b { color: var(--fg); font-weight: 600; }
/* A storm over the network or near it: black and white with a thick edge, like the flashes on the map. */
.rayos.tormenta { border-color: var(--tormenta); border-left-width: 4px; background: var(--panel); color: var(--fg); }
.rayos.tormenta b { color: inherit; }
.rayos.cerca { border-color: var(--tormenta); border-left-width: 4px; }
.rayos.vejez { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--page-max) - 2 * var(--gutter)); margin: 0 auto var(--s-4); border-color: var(--accent); border-left-width: 4px; background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-2); }
.rayos.vejez b { color: inherit; }
.rayos.vejez a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------- main and panels */
main { padding: 0 var(--gutter) var(--s-6); display: grid; gap: var(--s-5); }
main > *, section.dist > *, .panel-b, .panel-h { min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow); }
.panel.sub { box-shadow: none; border-radius: var(--r-2); background: var(--panel); }
.panel-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4) 0; }
.panel-h h3 { font-size: var(--fs-2); }
.panel-b { padding: var(--s-3) var(--s-4) var(--s-4); }

/* A distribuidora: the block of the risk page */
section.dist { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: var(--s-4); }
section.dist > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--fs-5); letter-spacing: -0.015em; }
section.dist > h2 .notas { font-weight: 400; font-size: var(--fs-2); }
section.dist h3 { font-size: var(--fs-2); color: var(--fg); margin: 0 0 var(--s-2); }
section.dist .fila-paneles { display: grid; gap: var(--s-4); }
.dos { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-4); }
.dos > * { min-width: 0; }

/* The figures: one row, the level first and larger */
.kpis { display: grid; grid-template-columns: minmax(200px, 1.35fr) repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.cifra, .kpi { position: relative; border: 1px solid var(--line); border-radius: var(--r-2); padding: 12px 14px 12px 16px; background: var(--panel); min-width: 0; }
.cifra .v, .kpi .v { font-size: var(--fs-5); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cifra .l, .kpi .l { color: var(--muted); font-size: var(--fs-0); margin-top: 4px; line-height: 1.35; }
.kpi.nivel-card { padding-left: 18px; }
.kpi.nivel-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; border-radius: 0 4px 4px 0; background: var(--line-strong); }
.kpi.nivel-card.bajo::before { background: var(--bajo); } .kpi.nivel-card.medio::before { background: var(--medio); }
.kpi.nivel-card.alto::before { background: var(--alto); } .kpi.nivel-card.muy-alto::before { background: var(--muy-alto); }
.kpi.nivel-card .v { font-size: var(--fs-6); }
.kpi.nivel-card.bajo .v { color: var(--bajo-ink); } .kpi.nivel-card.medio .v { color: var(--medio-ink); }
.kpi.nivel-card.alto .v { color: var(--alto-ink); } .kpi.nivel-card.muy-alto .v { color: var(--muy-alto-ink); }
.kpi .t { color: var(--faint); font-size: var(--fs-0); margin-bottom: 2px; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); }

/* ---------------------------------------------------------------- badges of risk */
.nivel {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  font-size: var(--fs-0); font-weight: 600; line-height: 1.5; letter-spacing: 0.01em; white-space: nowrap; vertical-align: middle;
  background: var(--panel-2); color: var(--muted); border: 1px solid transparent;
}
.nivel::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.nivel.bajo { background: var(--bajo-soft); color: var(--bajo-ink); }
.nivel.medio { background: var(--medio-soft); color: var(--medio-ink); }
.nivel.alto { background: var(--alto-soft); color: var(--alto-ink); }
.nivel.muy-alto { background: var(--muy-alto-soft); color: var(--muy-alto-ink); }
.nivel.guardia-pill { background: var(--accent-soft); color: var(--accent-ink); }
.nivel.tormenta-pill { background: var(--tormenta); color: var(--tormenta-fondo); }
.nivel.lg { font-size: var(--fs-2); padding: 4px 14px; }
.nivel.lg::before { width: 9px; height: 9px; }
.guardia-pill::before, .tormenta-pill::before { display: none; }

/* ---------------------------------------------------------------- data grids */
.scroll { overflow: auto; max-height: 440px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--panel); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-1); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: var(--fs-0); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--t-fast) var(--ease); }
tbody tr:hover td { background: var(--panel-2); }
tr.fila-zona { cursor: pointer; }
tr.fila-zona.zona-sel td { background: var(--accent-soft); }
tr.fila-zona.zona-sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
td:first-child, th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
th:first-child { z-index: 3; background: var(--panel-2); }
tbody tr:hover td:first-child { background: var(--panel-2); }
tr.fila-zona.zona-sel td:first-child { background: var(--accent-soft); }
td .pico { color: var(--muy-alto-ink); font-weight: 600; }
details.cts { margin-top: var(--s-3); }
details.cts summary { cursor: pointer; color: var(--accent); font-size: var(--fs-1); font-weight: 500; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.cts summary::-webkit-details-marker { display: none; }
details.cts summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease); }
details.cts[open] summary::before { transform: rotate(45deg); }
details.cts[open] summary { margin-bottom: var(--s-2); }
details.cts p.notas { max-width: 70ch; margin-top: var(--s-2); }

/* ---------------------------------------------------------------- map and charts */
.map { height: 420px; border-radius: var(--r-2); border: 1px solid var(--line); overflow: hidden; background: var(--panel-2); }
.leaflet-container { font-family: var(--font); font-size: var(--fs-0); }
.leaflet-bar a { background: var(--panel); color: var(--fg); border-bottom-color: var(--line); }
.leaflet-bar a:hover { background: var(--panel-2); }
.leaflet-control-attribution { background: rgba(255, 255, 255, 0.8); font-size: 11px; }
.leaflet-tooltip { font-family: var(--font); font-size: var(--fs-0); border: 1px solid var(--line); border-radius: var(--r-1); box-shadow: var(--shadow); }
/* The base map in grey, so its red roads and green parks do not compete with the colours of the levels. The
   dark theme overrides it below with the same grey, inverted. */
.leaflet-tile-pane { filter: grayscale(1) brightness(1.04) contrast(0.92); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(0.92) contrast(0.88); }
  :root:not([data-theme="light"]) .leaflet-control-attribution { background: rgba(23, 30, 39, 0.85); color: var(--muted); }
  :root:not([data-theme="light"]) .leaflet-tooltip { background: var(--panel); color: var(--fg); }
}
:root[data-theme="dark"] .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(0.92) contrast(0.88); }
:root[data-theme="dark"] .leaflet-control-attribution { background: rgba(23, 30, 39, 0.85); color: var(--muted); }
:root[data-theme="dark"] .leaflet-tooltip { background: var(--panel); color: var(--fg); }
/* A flash of the last hour on the map: a small cross, black with a white halo (white with a dark halo in the dark theme). */
.rayo-icono { background: none; border: 0; }
.rayo-icono svg { display: block; overflow: visible; }
.leyenda { display: flex; gap: 6px 14px; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-0); align-items: center; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.leyenda i.sq { border-radius: 2px; }
.leyenda i.anillo { background: var(--panel); border: 1.5px solid var(--estacion); }
.leyenda i.medio, .leyenda i.sq.medio { box-shadow: inset 0 0 0 1px var(--medio-borde); }
.leyenda .tamanos { display: inline-flex; align-items: center; gap: 6px; }
.leyenda .tamanos svg { display: block; overflow: visible; }
.leyenda b.que { color: var(--fg); font-weight: 600; }
.perfil { width: 100%; height: auto; display: block; }
.perfil-holder { margin-top: var(--s-2); }
.verificacion { color: var(--muted); font-size: var(--fs-1); margin: var(--s-2) 0 0; max-width: 90ch; }
.verificacion b { color: var(--fg); }
.barra { display: flex; height: 14px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); margin-bottom: var(--s-2); }
.barra span { display: block; height: 100%; }
.brigada ul { padding-left: 18px; }
.brigada li { margin: 6px 0; }
.brigada li b { font-weight: 600; }
.pasado-bloque { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-1); color: var(--muted); padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-1); margin: 0; }
.seguimiento .ok { color: var(--bajo-ink); font-weight: 600; } .seguimiento .fallo { color: var(--muy-alto-ink); font-weight: 600; }
section.seguimiento, section.notas-seccion, #diario { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: var(--s-3); }
#diario h2, section.seguimiento h2 { font-size: var(--fs-4); }

/* ---------------------------------------------------------------- footer */
footer { padding: var(--s-4) var(--gutter) var(--s-6); color: var(--muted); font-size: var(--fs-0); line-height: 1.5; max-width: var(--page-max); }
/* The sources and licences of every page, under the footer that each page fills in. */
aside.licencias { max-width: var(--page-max); margin: calc(-1 * var(--s-5)) auto 0; padding: 0 var(--gutter) var(--s-6); color: var(--muted); font-size: var(--fs-0); line-height: 1.5; }

/* ---------------------------------------------------------------- motion */
details > *:not(summary) { animation: abrir var(--t-base) var(--ease); }
@keyframes abrir { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1280px) {
  :root { --gutter: 20px; }
  .kpis { gap: var(--s-2); }
  .map { height: 380px; }
}
@media (max-width: 1024px) {
  .dos { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis .kpi.nivel-card { grid-column: span 4; }
  .map { height: 340px; }
  section.dist { padding: var(--s-4); }
}
@media (max-width: 768px) {
  :root { --gutter: 16px; --fs-6: 26px; --fs-5: 21px; }
  header.page { padding-top: var(--s-4); }
  nav.menu { padding: 0 var(--s-3); gap: 0; min-height: 50px; }
  nav.menu .marca { margin-right: var(--s-2); font-size: 14px; }
  nav.menu .items a, nav.menu .derecha a { padding: 0 10px; height: 32px; font-size: var(--fs-1); }
  nav.menu .derecha { margin-left: 0; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .kpis .kpi.nivel-card { grid-column: span 2; }
  .kpi .v, .cifra .v { font-size: var(--fs-4); }
  .kpi.nivel-card .v { font-size: var(--fs-5); }
  .map { height: 300px; }
  .scroll { max-height: 380px; }
  th, td { padding: 8px; }
  main { gap: var(--s-4); }
  section.dist { padding: var(--s-3); gap: var(--s-3); }
  .panel-h, .panel-b { padding-left: var(--s-3); padding-right: var(--s-3); }
}
@media (max-width: 560px) {
  :root { --fs-6: 24px; }
  .acciones { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; }
  .acciones::-webkit-scrollbar { display: none; }
  .boton { flex: 0 0 auto; height: 32px; }
  td:first-child, th:first-child { min-width: 168px; }
  nav.menu .derecha { display: none; }
  header.page .page-top { align-items: flex-start; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta { grid-template-columns: 1fr; }
  .map { height: 260px; }
}

/* ---------------------------------------------------------------- print */
@media print {
  nav.menu, .acciones, .noimprimir { display: none !important; }
  /* The sections that motion.js has not revealed yet (still below the fold) print as well. */
  main section, main > div > section, .kpi, .cifra, .dos.mapa-perfil { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  body { background: #fff; color: #000; }
  .panel, .panel.sub, .kpi, .cifra, .scroll { box-shadow: none; border-color: #bbb; }
  main { gap: var(--s-4); }
  .map { height: 280px; }
}