/* ==========================================================================
   TIPOGRAFÍAS
   Self-hosteadas, subset latin (cubre los acentos del español, ¿ y ¡).
   Plus Jakarta Sans para todo el texto; JetBrains Mono sólo para datos,
   etiquetas y coordenadas — la mono es deliberada: la app quiere leerse como
   un instrumento de medición.
   Sólo las seis caras que el CSS usa.
   ========================================================================== */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/vendor/fonts/jakarta-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/vendor/fonts/jakarta-600.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/vendor/fonts/jakarta-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/vendor/fonts/jakarta-800.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/vendor/fonts/jetbrains-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/vendor/fonts/jetbrains-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TEMAS
   El claro no es preferencia estética: la app se usa parada en la vereda, de
   día, y un tema oscuro a pleno sol se lee mucho peor.
   Los semánticos del diseño venían entre 3,86 y 4,32 de contraste — elegidos
   por cómo se ven, no medidos. Están corregidos al mínimo necesario para
   pasar AA conservando el tono; el desplazamiento es de pocos por ciento y no
   se nota, pero es la diferencia entre que una alerta se lea o no.
   ========================================================================== */
:root {
  --fondo: #0e1619;
  --panel: #17232a;
  --panel-2: rgba(233, 238, 240, 0.07);
  --linea: rgba(233, 238, 240, 0.1);
  --texto: #e9eef0;
  --tenue: #93a6ad;
  --agua: #2e9bc4;
  --agua-clara: #5fc8e8;
  --acento: #5fc8e8;
  --alerta: #e8a33d;
  --peligro: #e15f49;
  --ok: #4fa88b;
  --alerta-texto: #e8a33d;
  --peligro-texto: #e57563;
  --ok-texto: #51ab8e;
  --tierra: #c9a227;

  /* Relleno sólido: ahí encima va texto blanco y necesita su propio valor.
     El del diseño daba 3,67 con blanco. */
  --peligro-solido: #d93e24;
  --sobre-solido: #ffffff;

  --agua-tinte: rgba(46, 155, 196, 0.16);
  --alerta-tinte: rgba(232, 163, 61, 0.14);
  --alerta-tinte-suave: rgba(232, 163, 61, 0.07);
  --peligro-tinte: rgba(224, 90, 68, 0.16);
  --ok-tinte: rgba(79, 168, 139, 0.15);

  --btn-texto: #0e1619;
  --fondo-invertido: #1b2b33;
  --btn-fuerte: var(--agua);
  --btn-fuerte-texto: #0e1619;
  --texto-invertido: #e9eef0;
  --tenue-invertido: #93a6ad;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 28px rgba(0, 0, 0, 0.3);
  --sombra-nav: 0 -6px 24px rgba(0, 0, 0, 0.35);
  --filtro-mapa: invert(1) hue-rotate(180deg) saturate(0.5) brightness(0.95)
    contrast(0.9);
  --filtro-iconos-mapa: invert(1) brightness(0.92);

  /* ---- escalas ---- */
  --t-hero: 64px; /* el número del hidrómetro */
  --t-display: 44px; /* h1 de landing y páginas, sólo en escritorio */
  --t-xxl: 30px;
  --t-xl: 24px;
  --t-l: 20px;
  --t-m: 17px;
  --t-base: 15px;
  --t-s: 13px;
  --t-xs: 12px;
  --t-tick: 12px;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-7: 32px;

  --r-s: 8px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 28px;
  --r-full: 99px;

  --mov: 160ms cubic-bezier(0.2, 0, 0.2, 1);

  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Los valores del tema claro viven UNA sola vez acá. Los dos selectores de
   abajo sólo los remapean: duplicarlos garantiza que tarde o temprano uno se
   actualice y el otro no. */
:root {
  --c-fondo: #f7f8f9;
  --c-panel: #ffffff;
  --c-panel-2: rgba(27, 38, 44, 0.055);
  --c-linea: rgba(27, 38, 44, 0.09);
  --c-texto: #1b262c;
  --c-tenue: #66747a;
  --c-agua: #1f7a9e;
  --c-agua-clara: #7cc6e0;
  --c-acento: #1f7a9e;
  --c-alerta: #cb430e;
  --c-peligro: #ca442f;
  --c-ok: #387f64;
  --c-alerta-texto: #c4410e;
  --c-peligro-texto: #be402c;
  --c-ok-texto: #35785e;
  --c-tierra: #7a5f0d;
  --c-peligro-solido: #ca442f;
  --c-agua-tinte: #e8f3f8;
  --c-alerta-tinte: #ffefe3;
  --c-alerta-tinte-suave: #fff8f3;
  --c-peligro-tinte: #fbe9e5;
  --c-ok-tinte: #e6f2ec;
  --c-btn-texto: #ffffff;
  --c-fondo-invertido: #0e1619;
  --c-btn-fuerte: #0e1619;
  --c-btn-fuerte-texto: #e9eef0;
  --c-texto-invertido: #e9eef0;
  --c-tenue-invertido: #93a6ad;
  --c-sombra:
    0 1px 2px rgba(23, 36, 42, 0.05), 0 10px 28px rgba(23, 36, 42, 0.07);
  --c-sombra-nav: 0 -6px 24px rgba(23, 36, 42, 0.06);
  --c-filtro-mapa: saturate(0.92);
  --c-filtro-iconos-mapa: none;
}

@media (prefers-color-scheme: light) {
  html:not([data-tema="oscuro"]) {
    --fondo: var(--c-fondo);
    --panel: var(--c-panel);
    --panel-2: var(--c-panel-2);
    --linea: var(--c-linea);
    --texto: var(--c-texto);
    --tenue: var(--c-tenue);
    --agua: var(--c-agua);
    --agua-clara: var(--c-agua-clara);
    --acento: var(--c-acento);
    --alerta: var(--c-alerta);
    --peligro: var(--c-peligro);
    --ok: var(--c-ok);
    --alerta-texto: var(--c-alerta-texto);
    --peligro-texto: var(--c-peligro-texto);
    --ok-texto: var(--c-ok-texto);
    --tierra: var(--c-tierra);
    --peligro-solido: var(--c-peligro-solido);
    --agua-tinte: var(--c-agua-tinte);
    --alerta-tinte: var(--c-alerta-tinte);
    --alerta-tinte-suave: var(--c-alerta-tinte-suave);
    --peligro-tinte: var(--c-peligro-tinte);
    --ok-tinte: var(--c-ok-tinte);
    --btn-texto: var(--c-btn-texto);
    --fondo-invertido: var(--c-fondo-invertido);
    --btn-fuerte: var(--c-btn-fuerte);
    --btn-fuerte-texto: var(--c-btn-fuerte-texto);
    --btn-fuerte: var(--c-btn-fuerte);
    --btn-fuerte-texto: var(--c-btn-fuerte-texto);
    --texto-invertido: var(--c-texto-invertido);
    --tenue-invertido: var(--c-tenue-invertido);
    --fondo-invertido: var(--c-fondo-invertido);
    --btn-fuerte: var(--c-btn-fuerte);
    --btn-fuerte-texto: var(--c-btn-fuerte-texto);
    --btn-fuerte: var(--c-btn-fuerte);
    --btn-fuerte-texto: var(--c-btn-fuerte-texto);
    --texto-invertido: var(--c-texto-invertido);
    --tenue-invertido: var(--c-tenue-invertido);
    --sombra: var(--c-sombra);
    --sombra-nav: var(--c-sombra-nav);
    --filtro-mapa: var(--c-filtro-mapa);
    --filtro-iconos-mapa: var(--c-filtro-iconos-mapa);
  }
}

html[data-tema="claro"] {
  --fondo: var(--c-fondo);
  --panel: var(--c-panel);
  --panel-2: var(--c-panel-2);
  --linea: var(--c-linea);
  --texto: var(--c-texto);
  --tenue: var(--c-tenue);
  --agua: var(--c-agua);
  --agua-clara: var(--c-agua-clara);
  --acento: var(--c-acento);
  --alerta: var(--c-alerta);
  --peligro: var(--c-peligro);
  --ok: var(--c-ok);
  --alerta-texto: var(--c-alerta-texto);
  --peligro-texto: var(--c-peligro-texto);
  --ok-texto: var(--c-ok-texto);
  --tierra: var(--c-tierra);
  --peligro-solido: var(--c-peligro-solido);
  --agua-tinte: var(--c-agua-tinte);
  --alerta-tinte: var(--c-alerta-tinte);
  --alerta-tinte-suave: var(--c-alerta-tinte-suave);
  --peligro-tinte: var(--c-peligro-tinte);
  --ok-tinte: var(--c-ok-tinte);
  --btn-texto: var(--c-btn-texto);
  --fondo-invertido: var(--c-fondo-invertido);
  --btn-fuerte: var(--c-btn-fuerte);
  --btn-fuerte-texto: var(--c-btn-fuerte-texto);
  --texto-invertido: var(--c-texto-invertido);
  --tenue-invertido: var(--c-tenue-invertido);
  --sombra: var(--c-sombra);
  --sombra-nav: var(--c-sombra-nav);
  --filtro-mapa: var(--c-filtro-mapa);
  --filtro-iconos-mapa: var(--c-filtro-iconos-mapa);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
body {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
/* La barra de instalar es fixed: sin esto flotaba encima del último bloque
   de cada pestaña, que además suele ser un aviso importante. */
body.con-instalar {
  padding-bottom: calc(96px + 60px + env(safe-area-inset-bottom));
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--r-s);
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- cabecera ---------- */
.top {
  /* viewport-fit=cover hace que el contenido vaya por debajo de la muesca y
     la barra de estado. El safe-area estaba contemplado abajo (la nav) pero
     no arriba, así que el logo quedaba pisado. */
  padding: calc(18px + env(safe-area-inset-top)) 18px 12px;
  /* El botón de tema va en el flujo, no absoluto: estaba posicionado y el
     subtítulo le pasaba por debajo. Con flex no se solapan nunca, cualquiera
     sea el largo del texto. */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  border-bottom: 1px solid var(--linea);
  position: relative;
  overflow: hidden;
}
.top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--agua), transparent);
  opacity: 0.5;
}
/* El botón de tema va en el encabezado, arriba a la derecha, donde no
   compite con nada. */
.tema {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-m);
  border: 1px solid var(--linea);
  background: var(--panel);
  color: var(--tenue);
  font-size: var(--t-m);
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.tema:hover {
  color: var(--texto);
}

/* La marca de la app es ahora símbolo + nombre. El tamaño lo pone
   .lockup-nombre; acá sólo queda la caja. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.marca span {
  color: var(--acento);
}
.sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-s);
  color: var(--tenue);
  letter-spacing: 0;
  text-transform: none;
  /* Es un <p> por semántica; el margen inferior de los párrafos no va acá. */
  margin: var(--e-1) 0 0;
}

/* ---------- estructura ---------- */
.vista {
  display: none;
  padding: var(--e-5);
  max-width: 640px;
  margin: 0 auto;
}
.vista.on {
  display: block;
}
h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: var(--e-6) 0 var(--e-2);
}
h2:first-child {
  margin-top: var(--e-1);
}
.cuenta {
  font-family: var(--mono);
  font-size: var(--t-s);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--tenue);
  text-transform: none;
}
.cuenta.completa {
  color: var(--ok-texto);
}
h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-m);
  letter-spacing: -0.01em;
  color: var(--texto);
  margin: var(--e-5) 0 var(--e-2);
}
p {
  margin: 0 0 var(--e-3);
}
.chico {
  font-size: var(--t-s);
  color: var(--tenue);
}
.tarjeta {
  background: var(--panel);
  border: none;
  box-shadow: var(--sombra);
  border-radius: var(--r-l);
  padding: var(--e-5);
  margin-bottom: var(--e-4);
}
.eti {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
  display: block;
  margin-bottom: var(--e-2);
}
.dato {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--t-hero);
  line-height: 0.9;
}
.unidad {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-top: var(--e-2);
}

/* ---------- regla / hidrómetro (elemento firma) ---------- */
.regla-caja {
  display: flex;
  gap: var(--e-4);
  align-items: stretch;
  margin: var(--e-2) 0 var(--e-1);
}
/* Escala y pista comparten alto: los porcentajes de una caen en la misma
   altura que los de la otra sin coordinar nada. */
.instrumento {
  display: flex;
  gap: var(--e-2);
  align-items: stretch;
  flex: none;
}
.escala {
  position: relative;
  width: 30px;
  flex: none;
}
.regla {
  position: relative;
  /* 74px eran pocos: entre marcas y números ya se iban 31, y las etiquetas de
     umbral se montaban encima de la numeración. */
  width: 88px;
  flex: none;
  background: var(--panel-2);
  border: none;
  border-radius: var(--r-l);
  overflow: hidden;
  min-height: 340px;
}
.agua {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--agua);
  transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
/* La superficie del agua es la línea que más se mira: va nítida y de un solo
   grosor, sin el resplandor de antes (que en tema claro quedaba raro). */
.agua::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--agua-clara);
}
.marca-linea {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed currentColor;
  transition: bottom 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.marca-linea b {
  position: absolute;
  right: var(--e-1);
  top: -15px;
  font-family: var(--mono);
  font-size: var(--t-tick);
  font-weight: 700;
  letter-spacing: 0.02em;
  /* El chip va sobre --panel, no sobre el fondo de la regla: apoyado en
     --panel-2 el rojo quedaba en 4,47 y el acento claro en 4,36. Además así
     lee como una pastilla flotando sobre el instrumento, que es la idea. */
  background: var(--panel);
  border: 1px solid currentColor;
  padding: 2px 7px;
  border-radius: var(--r-full);
  line-height: 1.35;
}
/* 5,30 y 5,70 están siempre a 40 cm: sobre esta escala son 15px, y las
   etiquetas miden 14. Se montaban una sobre otra. Bajamos la de alerta al
   otro lado de su línea y el problema desaparece para siempre. */
.marca-linea.debajo b {
  top: 3px;
}
/* "vos" va con chip lleno: es tuyo, no un umbral oficial. */
.marca-linea.propia b {
  background: var(--tierra);
  color: var(--fondo) !important;
  border-color: var(--tierra);
}
.tic {
  position: absolute;
  right: 0;
  width: 5px;
  height: 1px;
  background: var(--linea);
}
.tic.mayor {
  width: 9px;
  background: var(--tenue);
}
.tic-num {
  position: absolute;
  right: var(--e-3);
  font-family: var(--mono);
  font-size: var(--t-tick);
  font-weight: 500;
  color: var(--tenue);
  transform: translateY(50%);
}
.leyenda {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-3);
}
.leyenda-item {
  border-left: 3px solid;
  padding-left: var(--e-3);
}
.leyenda-item .v {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--t-m);
  line-height: 1.15;
}
.leyenda-item .k {
  font-size: var(--t-s);
  color: var(--tenue);
  line-height: 1.35;
  margin-top: 2px;
}

/* ---------- veredicto ---------- */
.veredicto {
  border-radius: var(--r-l);
  box-shadow: var(--sombra);
  padding: var(--e-5);
  margin-bottom: var(--e-4);
  border: none;
}
.veredicto .titu {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--e-2);
}
.v-ok {
  background: var(--ok-tinte);
}
.v-ok .titu {
  color: var(--ok-texto);
}
.v-alerta {
  background: var(--alerta-tinte);
}
.v-alerta .titu {
  color: var(--alerta-texto);
}
.v-peligro {
  background: var(--peligro-tinte);
}
.v-peligro .titu {
  color: var(--peligro-texto);
}
/* Mientras busca el dato, la tarjeta late suave. Es la diferencia entre
   "esperá" y "falló". */
.veredicto.cargando {
  animation: latido 1.6s ease-in-out infinite;
}
@keyframes latido {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
.v-neutro {
  background: var(--panel);
  box-shadow: var(--sombra);
}

/* ---------- controles ---------- */
label.campo {
  display: block;
  margin-bottom: var(--e-3);
}
label.campo > span {
  font-family: var(--sans);
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tenue);
  display: block;
  margin-bottom: var(--e-1);
}
input[type="text"],
input[type="number"],
select,
textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid transparent;
  border-radius: var(--r-m);
  padding: var(--e-3) var(--e-4);
  min-height: 52px;
  font-family: var(--sans);
  font-weight: 500;
}
input[type="number"] {
  font-family: var(--mono);
}
textarea {
  font-family: var(--sans);
  resize: vertical;
  min-height: 64px;
}
input[type="range"] {
  width: 100%;
  accent-color: var(--agua);
}
.btn {
  background: var(--agua);
  color: var(--btn-texto);
  border: none;
  border-radius: var(--r-full);
  /* La altura mínima se declara, no se deduce del padding: así el objetivo
     táctil no depende de que nadie toque la escala de espaciados. */
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 13px de alto deja el botón en 45px: el mínimo recomendado para un
     objetivo táctil son 44. Con 12px quedaba en 43. */
  padding: var(--e-3) var(--e-4);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-m);
  letter-spacing: -0.01em;
  text-transform: none;
  cursor: pointer;
  width: 100%;
  margin-bottom: var(--e-2);
}
.btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.btn:active {
  transform: translateY(1px);
}
/* El secundario se distingue por relleno, no por contorno. Con --panel puro
   quedaba blanco sobre tarjeta blanca: sólo lo separaba la sombra. */
.btn.sec {
  background: var(--panel-2);
  color: var(--texto);
  border: none;
}
.btn.mini {
  width: auto;
  min-height: 44px;
  padding: 0 var(--e-4);
  font-size: var(--t-s);
}
.fila {
  display: flex;
  gap: var(--e-2);
}
.fila > * {
  flex: 1;
  margin-bottom: var(--e-2);
}

/* ---------- pronóstico ---------- */
.dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--e-1);
  margin-top: var(--e-1);
}
.dia {
  background: var(--panel-2);
  border-radius: var(--r-s);
  padding: var(--e-2) 3px;
  text-align: center;
  border: 1px solid transparent;
}
.dia.fuerte {
  border-color: var(--alerta);
}
.dia .d {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--tenue);
  text-transform: uppercase;
}
.dia .mm {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--t-base);
  margin-top: 3px;
}
.dia .mm.hay {
  color: var(--acento);
}
.dia .mm.fuerte {
  color: var(--alerta-texto);
}
/* Un número suelto no dice si 12 mm es mucho o poco. La barra da la escala y
   la línea punteada marca el umbral de 40 mm. */
.dia .barra {
  position: relative;
  height: 34px;
  margin-top: var(--e-1);
  background: var(--panel-2);
  border-radius: var(--r-s);
  overflow: hidden;
}
.dia .barra i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: var(--agua);
}
.dia.fuerte .barra i {
  background: var(--alerta);
}
.dia .barra u {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--alerta);
  opacity: 0.55;
}

/* ---------- listas ---------- */
.chk {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
  cursor: pointer;
}
.chk:last-child {
  border-bottom: none;
}
.chk input {
  margin-top: 2px;
  width: 19px;
  height: 19px;
  flex: none;
  accent-color: var(--ok);
}
.chk span {
  flex: 1;
  font-size: var(--t-base);
}
.chk input:checked + span {
  color: var(--tenue);
  text-decoration: line-through;
}
/* Las listas vienen como <ul> en el HTML para que sean indexables. */
.lista-plana {
  list-style: none;
  margin: 0;
  padding: 0;
}
.punto {
  display: block;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linea);
  color: inherit;
  text-decoration: none;
}
.punto:last-child {
  border-bottom: none;
}
.punto .n {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-m);
  letter-spacing: -0.01em;
}
.punto .d {
  display: block;
  font-size: var(--t-s);
  color: var(--tenue);
  margin-top: 1px;
}
.punto .ir {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--acento);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 3px;
  display: inline-block;
}

/* ---------- avisos ---------- */
.aviso {
  border-left: none;
  background: var(--alerta-tinte);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-m);
  font-size: var(--t-s);
  margin-bottom: var(--e-3);
}
.aviso.grave {
  background: var(--peligro-tinte);
}
/* Una lista de acciones se lee; el mismo contenido en prosa, no. */
.pasos {
  margin: var(--e-1) 0 0;
  padding-left: var(--e-5);
  font-size: var(--t-s);
  color: var(--tenue);
}
.pasos li {
  margin-bottom: var(--e-2);
  line-height: 1.45;
}
.pasos.grave li b {
  color: var(--peligro-texto);
  font-family: var(--mono);
}
.pasos a {
  color: var(--acento);
  font-weight: 700;
}
.aviso details summary {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
}
.aviso b {
  color: var(--alerta-texto);
}
.aviso.grave b {
  color: var(--peligro-texto);
}
.tel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
  color: inherit;
  text-decoration: none;
}
.tel:last-child {
  border-bottom: none;
}
.tel .q {
  font-size: var(--t-base);
}
.tel .n {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--t-m);
  color: var(--acento);
}

/* ---------- mapa ---------- */
/* El basemap del IGN es claro y la app es oscura. invert + hue-rotate(180)
   invierte la luminosidad conservando los tonos: el agua sigue siendo azul y
   los espacios verdes verdes, pero sobre fondo oscuro. Va sólo sobre el
   canvas de los tiles; los pines y los controles son DOM aparte y no se
   tocan. */
#mapa .maplibregl-canvas {
  /* saturate() baja el rojizo que deja la inversión sobre el beige urbano
     del IGN: en una app que usa rojo para peligro, un mapa rojizo
     confunde. El agua queda igual de reconocible. */
  filter: var(--filtro-mapa);
}
@media (prefers-contrast: more) {
  #mapa .maplibregl-canvas {
    filter: none;
  }
}
#mapa {
  width: 100%;
  height: 340px;
  border-radius: var(--r-l);
  border: 1px solid var(--linea);
  margin-bottom: var(--e-4);
  background: var(--panel-2);
}
/* MapLibre trae sus controles en blanco. Sobre un mapa que oscurecimos a
   propósito quedaban como dos parches brillantes. */
#mapa .maplibregl-ctrl-group {
  background: var(--panel);
  border: 1px solid var(--linea);
  box-shadow: none;
}
#mapa .maplibregl-ctrl-group button + button {
  border-top-color: var(--linea);
}
#mapa .maplibregl-ctrl-group button:hover {
  background: var(--panel-2);
}
/* Los íconos son SVG oscuros embebidos: no se recolorean, se invierten. */
#mapa .maplibregl-ctrl-icon {
  filter: var(--filtro-iconos-mapa);
}
#mapa .maplibregl-ctrl-attrib {
  background: var(--panel);
  color: var(--tenue);
  font-size: var(--t-xs);
}
#mapa .maplibregl-ctrl-attrib a {
  color: var(--acento);
}
#mapa .maplibregl-ctrl-attrib-button {
  filter: var(--filtro-iconos-mapa);
}

.maplibregl-popup-content {
  background: var(--panel);
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: var(--e-3) var(--e-3);
  font-family: var(--sans);
}
.maplibregl-popup-content strong {
  font-family: var(--sans);
  font-size: var(--t-m);
  letter-spacing: 0.02em;
}
.maplibregl-popup-tip {
  border-top-color: var(--panel) !important;
  border-bottom-color: var(--panel) !important;
}
.maplibregl-popup-close-button {
  color: var(--tenue);
  font-size: var(--t-m);
}
.pin {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--agua);
  border: 2px solid var(--fondo);
  box-shadow: 0 0 0 1px var(--agua);
  cursor: pointer;
}
.pin.cerca {
  background: var(--ok);
  width: 21px;
  height: 21px;
  box-shadow:
    0 0 0 1px var(--ok),
    0 0 14px var(--ok);
}
.pin.yo {
  background: var(--tierra);
  box-shadow: 0 0 0 1px var(--tierra);
}
.punto.destacado {
  background: var(--ok-tinte);
  border-radius: var(--r-m);
  padding-left: var(--e-3);
  padding-right: var(--e-3);
  border-bottom-color: transparent;
}

/* ---------- tendencia ---------- */
.tend {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.tend .flecha {
  font-size: var(--t-xl);
  line-height: 1;
  font-family: var(--mono);
  font-weight: 700;
}
.sparkline {
  width: 100%;
  height: 46px;
  margin-top: var(--e-2);
  display: block;
}

/* ---------- navegación ---------- */
.barra-app {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--panel);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sombra-nav);
  padding: var(--e-2) var(--e-3) 0;
  padding-bottom: calc(var(--e-2) + env(safe-area-inset-bottom));
  z-index: 50;
}
.barra-app button {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  border-radius: var(--r-m);
  padding: var(--e-2) 2px var(--e-3);
  cursor: pointer;
  color: var(--tenue);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-1);
}
.barra-app button.on {
  color: var(--acento);
}
.barra-app button svg {
  transition: background var(--mov);
}
.barra-app button.on svg {
  background: var(--agua-tinte);
}
.barra-app button svg {
  width: 44px;
  height: 26px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  box-sizing: content-box;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.barra-app button span {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0;
  text-transform: none;
}
#sin-conexion {
  background: var(--alerta-tinte);
  border-bottom: 1px solid var(--alerta);
  color: var(--alerta-texto);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  padding: var(--e-2) var(--e-5);
  text-align: center;
}
#sin-conexion[hidden] {
  display: none;
}

/* Barra de instalar: se queda hasta que la persona la cierre. Antes se
   borraba sola a los 20 s y no volvía en toda la sesión. */
.instalar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  gap: var(--e-2);
  align-items: stretch;
}
.instalar .btn {
  margin: 0;
  flex: 1;
}
.instalar .cerrar {
  flex: none;
  width: 52px;
  border: none;
  border-radius: var(--r-full);
  background: var(--panel);
  box-shadow: var(--sombra);
  color: var(--texto);
  font-size: var(--t-l);
  cursor: pointer;
}

/* ---------- hoja de instrucciones ---------- */
/* Va en <dialog> por lo que trae gratis: foco atrapado, Escape para salir y
   el resto de la página inerte para un lector de pantalla. Nada de eso sale
   bien a mano. */
.hoja {
  /* El reset de arriba pone margin:0 en todo, y con eso se pierde el
     margin:auto con el que el navegador centra un <dialog> modal: quedaba
     pegado arriba a la izquierda. */
  margin: auto;
  border: none;
  background: var(--panel);
  color: var(--texto);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra);
  padding: var(--e-5);
  width: min(420px, calc(100vw - 32px));
  max-height: 82vh;
  overflow-y: auto;
}
.hoja::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.hoja h2 {
  margin-top: 0;
}
.hoja ol {
  margin: var(--e-4) 0;
  padding-left: var(--e-5);
}
.hoja ol li {
  margin-bottom: var(--e-3);
}
.hoja .aviso {
  margin-bottom: var(--e-4);
}
/* Sin showModal() el <dialog> queda abierto pero NO modal, y por defecto se
   posiciona en absoluto: se salía de la pantalla y empujaba el resto de la
   página. Vuelve al flujo normal. */
.hoja:not(:modal) {
  position: static;
  margin: var(--e-4) auto;
}

/* ---------- instalar, enlace del pie ---------- */
.instalar-pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-5);
}

/* ==========================================================================
   PORTADA Y PÁGINAS DE CONTENIDO
   La app esconde 3 de sus 4 secciones detrás de pestañas y eso a un buscador
   le llega como contenido oculto. Estas páginas son texto visible, con el
   mismo sistema de tokens y sin pestañas.
   ========================================================================== */
.ancho {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--e-5);
}
.pagina {
  padding: var(--e-5) 0 var(--e-7);
  max-width: 720px;
  margin: 0 auto;
}
body.landing {
  /* Sin barra de navegación fija abajo, el hueco reservado para ella sobra. */
  padding-bottom: 0;
}
.landing section {
  padding: var(--e-7) 0;
}
.landing h2 {
  font-size: var(--t-xxl);
  margin: var(--e-2) 0 var(--e-5);
}
.landing p {
  margin-bottom: var(--e-4);
}
.landing a:not(.btn):not(.lockup):not(.punto) {
  color: var(--acento);
}

/* ---------- marca ---------- */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  color: var(--texto);
  text-decoration: none;
}
.lockup svg {
  display: block;
  flex: none;
}
.lockup-nombre {
  font-weight: 800;
  font-size: var(--t-m);
  letter-spacing: -0.02em;
}

/* ---------- navegación del sitio ---------- */
.nav-sitio {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-5) 0;
  flex-wrap: wrap;
}
.nav-enlaces {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e-5);
}
.nav-enlaces a:not(.btn) {
  font-weight: 600;
  font-size: var(--t-s);
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}
.chip-borde {
  padding: 5px 10px;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-full);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  color: var(--tenue);
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--e-7);
  align-items: center;
  padding: var(--e-6) 0 var(--e-7);
}
.titulo-hero {
  font-size: var(--t-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: var(--e-4) 0 0;
}
.bajada {
  font-size: var(--t-l);
  line-height: 1.5;
  color: var(--tenue);
  max-width: 30em;
  margin: var(--e-4) 0 0;
}
.hero-botones {
  display: flex;
  gap: var(--e-3);
  margin: var(--e-6) 0 var(--e-4);
  flex-wrap: wrap;
}
.hero-botones .btn {
  width: auto;
  padding: 0 var(--e-6);
}
.chip-vivo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: var(--agua-tinte);
  color: var(--acento);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  margin: 0;
}
.punto-vivo {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ---------- el mockup con el dato en vivo ---------- */
.mockup {
  background: var(--panel);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.mockup-cabecera {
  padding: var(--e-5) var(--e-5) var(--e-4);
}
.mockup-numero {
  display: flex;
  align-items: flex-end;
  gap: var(--e-2);
  margin-top: var(--e-2);
}
.mockup .dato {
  font-size: 56px;
}
.mockup-m {
  font-weight: 800;
  font-size: var(--t-l);
  color: var(--tenue);
  padding-bottom: 6px;
}
.chip-delta {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: var(--alerta-tinte);
  color: var(--alerta-texto);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
}
.mockup .chico {
  margin: var(--e-3) 0 0;
}
/* La regla del mockup representa de 0 a 8 m; las alturas las fija landing.js
   sobre esa escala. */
.regla-mini {
  position: relative;
  height: 230px;
  background: var(--panel-2);
  background-image: linear-gradient(var(--linea) 1px, transparent 1px);
  background-size: 100% 28px;
}
.rm-agua {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--agua);
  transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.rm-linea {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  bottom: 0;
  background: var(--agua-clara);
  transition: bottom 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.rm-umbral {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
}
.rm-umbral b {
  position: absolute;
  right: var(--e-3);
  bottom: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-family: var(--mono);
  font-size: var(--t-xs);
}
.rm-alerta {
  bottom: 66.25%; /* 5,30 de 8 m */
  background: var(--alerta);
}
.rm-alerta b {
  background: var(--alerta-tinte);
  color: var(--alerta-texto);
}
.rm-evac {
  bottom: 71.25%; /* 5,70 de 8 m */
  background: var(--peligro);
}
.rm-evac b {
  background: var(--peligro-tinte);
  color: var(--peligro-texto);
  right: auto;
  left: var(--e-3);
  bottom: 5px;
}
.rm-alerta b {
  /* Debajo de su línea: alerta y evacuación están a 40 cm, que en esta
     escala son 11 px, y las dos etiquetas se pisaban. */
  bottom: auto;
  top: 5px;
}

/* ---------- franja histórica ---------- */
.franja-oscura {
  background: var(--fondo-invertido);
  color: var(--texto-invertido);
  border-radius: var(--r-xl);
  padding: var(--e-7);
  margin: var(--e-6) 0;
}
.franja-oscura .eti {
  color: var(--tenue-invertido);
}
.hitos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-7);
  margin-top: var(--e-5);
}
.hitos b {
  display: block;
  font-size: var(--t-xxl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hitos p {
  margin: var(--e-2) 0 0;
  font-size: var(--t-s);
  color: var(--tenue-invertido);
}
.franja-cierre {
  margin: var(--e-6) 0 0;
  font-weight: 600;
  font-size: var(--t-m);
}

/* ---------- tres pasos y métricas ---------- */
.tres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-5);
}
.tres .tarjeta {
  margin: 0;
}
.tres h3 {
  margin: var(--e-4) 0 var(--e-2);
}
.tres p {
  margin: 0;
  color: var(--tenue);
  font-size: var(--t-s);
}
.numerito {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-s);
  background: var(--agua-tinte);
  color: var(--acento);
  font-weight: 800;
}
.metricas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-5);
}
.metrica {
  background: var(--panel);
  box-shadow: var(--sombra);
  border-radius: var(--r-l);
  padding: var(--e-5);
}
.metrica b {
  display: block;
  font-size: var(--t-xxl);
  font-weight: 800;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.metrica span {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-s);
  color: var(--tenue);
}
.metrica.fuerte {
  background: var(--fondo-invertido);
  color: var(--texto-invertido);
}
.metrica.fuerte b {
  color: inherit;
}
.metrica.fuerte span {
  color: var(--tenue-invertido);
}

/* ---------- secciones a dos columnas ---------- */
.dosc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-7);
  align-items: center;
}
.dosc .btn {
  width: auto;
  padding: 0 var(--e-6);
}
.mapa-caja {
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--panel-2);
}
#mapa-landing {
  height: 420px;
}
.citas {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.cita {
  border-radius: var(--r-m);
  background: var(--alerta-tinte-suave);
  border: 2px solid var(--alerta-tinte);
  padding: var(--e-4) var(--e-5);
}
.cita.neutra {
  background: transparent;
  border-color: var(--linea);
}
.cita p {
  margin: var(--e-2) 0 0;
  font-weight: 600;
}
.eti-alerta {
  color: var(--alerta-texto);
}

/* ---------- llamada final ---------- */
.cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-7);
  align-items: center;
  background: var(--fondo-invertido);
  color: var(--texto-invertido);
  border-radius: var(--r-xl);
  padding: var(--e-7);
  margin-bottom: var(--e-7);
}
.cta h2 {
  margin: var(--e-4) 0 0;
}
.cta p {
  margin: var(--e-3) 0 0;
  color: var(--tenue-invertido);
  max-width: 30em;
}
.cta .btn {
  width: auto;
  padding: 0 var(--e-7);
}

/* ---------- pie del sitio ---------- */
.pie-sitio {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--e-7);
  border-top: 1.5px solid var(--linea);
  padding: var(--e-7) 0;
}
.pie-sitio > div {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  align-items: flex-start;
}
.pie-sitio a {
  font-weight: 600;
  font-size: var(--t-s);
  color: var(--texto);
  text-decoration: none;
}
.pie-sitio a:hover {
  text-decoration: underline;
}
.pie-sitio .chico {
  max-width: 32ch;
  margin: var(--e-2) 0 0;
}
.pie-sitio .firma {
  margin: var(--e-2) 0 0;
  font-size: var(--t-s);
}
.chip-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin: var(--e-3) 0 0;
  padding: 10px 16px;
  border-radius: var(--r-m);
  background: var(--fondo-invertido);
  color: var(--texto-invertido);
  font-weight: 700;
  font-size: var(--t-s);
}
.chip-tel b {
  color: var(--agua-clara);
  font-size: var(--t-l);
}

/* Un <a class="btn"> es un botón, no un enlace: sin esto las reglas de enlace
   le ganan por especificidad y lo pintan subrayado sobre el relleno. */
.btn {
  text-decoration: none;
}
.landing a.btn,
.pagina a.btn {
  text-decoration: none;
  color: var(--btn-texto);
}
/* El secundario no lleva relleno de color: su texto es el del cuerpo. Sin
   esto quedaba blanco sobre blanco en tema claro. */
.landing a.btn.sec,
.pagina a.btn.sec {
  color: var(--texto);
}
.btn-oscuro {
  background: var(--btn-fuerte);
  color: var(--btn-fuerte-texto);
}
.landing a.btn-oscuro,
.pagina a.btn-oscuro {
  color: var(--btn-fuerte-texto);
}
.btn-claro {
  background: var(--agua-clara);
  color: #0b1418;
}
.landing a.btn-claro {
  color: #0b1418;
}

/* Un h1 que dice sólo la marca no le sirve a quien busca "hasta dónde llega
   el agua". El complemento existe para el buscador y para un lector de
   pantalla; no se ve. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- bienvenida ---------- */
/* Overlay y no vista: la barra de pestañas se queda en cuatro. */
/* [hidden] del navegador es display:none, pero pierde contra cualquier regla
   de autor que fije display. Sin esta línea el overlay no se ocultaba nunca.
   Vale para todo lo que se oculta con el atributo y tiene display propio. */
.bienvenida[hidden],
.instalar-pie[hidden] {
  display: none;
}
.bienvenida {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--fondo);
  display: flex;
  align-items: center;
  padding: var(--e-5);
  overflow-y: auto;
}
body.con-bienvenida {
  overflow: hidden;
}
.bienvenida-caja {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.bienvenida .lockup {
  display: flex;
}
.bienvenida .dato {
  margin-top: var(--e-2);
}
.bienvenida-botones {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

/* ---------- barras de contexto ---------- */
.barra-fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-2);
}
.barra-nom {
  flex: none;
  width: 92px;
  font-size: var(--t-s);
  color: var(--tenue);
}
.barra-pista {
  flex: 1;
  background: var(--panel-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.barra-pista i {
  display: block;
  height: 14px;
  border-radius: var(--r-full);
  min-width: 3px;
}
.b-hoy {
  background: var(--agua);
}
.b-alerta {
  background: var(--alerta);
}
.b-peligro {
  background: var(--peligro);
}
.b-record {
  background: var(--linea);
}
.barra-val {
  flex: none;
  width: 48px;
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
}

/* ---------- ajustes ---------- */
.acciones-top {
  display: flex;
  gap: var(--e-2);
  align-items: center;
}
.fila-ajuste {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linea);
  flex-wrap: wrap;
}
.fila-ajuste:last-child {
  border-bottom: none;
}
.fila-ajuste > div:first-child {
  flex: 1;
  min-width: 12em;
}
.fila-ajuste b {
  display: block;
}
.fila-ajuste .chico {
  display: block;
  margin-top: 2px;
}
.segmentado {
  display: flex;
  gap: var(--e-1);
  background: var(--panel-2);
  border-radius: var(--r-full);
  padding: 3px;
}
.segmentado button {
  border: none;
  background: none;
  border-radius: var(--r-full);
  padding: 8px 14px;
  min-height: 40px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-s);
  color: var(--tenue);
  cursor: pointer;
}
.segmentado button.on {
  background: var(--panel);
  color: var(--texto);
  box-shadow: var(--sombra);
}

/* Tamaño de texto: una clase en <html> escala todo junto, incluidos los
   números de la regla, sin duplicar reglas. */
html.texto-grande {
  font-size: 118%;
}

/* ---------- acordeón de preguntas ---------- */
/* Va con <details> y no con JavaScript: una página de ayuda que depende de JS
   es una página que un día no se abre. Además así el buscador lee todas las
   respuestas, estén abiertas o cerradas. */
.faq {
  border-bottom: 1px solid var(--linea);
}
.faq:last-child {
  border-bottom: none;
}
.faq summary {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: 56px;
  padding: var(--e-3) 0;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--t-m);
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-s);
  background: var(--panel-2);
  color: var(--acento);
  font-weight: 800;
  font-size: var(--t-m);
  text-align: center;
  line-height: 30px;
}
.faq[open] summary::after {
  content: "−";
}
.faq p {
  margin: 0 0 var(--e-4);
  color: var(--tenue);
}

/* ---------- tabla de una cuenta ---------- */
.cuenta {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.cuenta td {
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-s);
  color: var(--tenue);
}
.cuenta td:last-child {
  text-align: right;
  white-space: nowrap;
  font-family: var(--mono);
  color: var(--texto);
}
.cuenta .total td {
  border-bottom: none;
  padding-top: var(--e-4);
  font-weight: 700;
  color: var(--texto);
}
.cuenta .total td:last-child {
  font-size: var(--t-l);
  font-weight: 800;
  color: var(--acento);
}

/* ---------- pines del mapa de la portada ---------- */
.pin-landing {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--agua-clara);
  border: 3px solid var(--fondo-invertido);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.mapa-caido {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mapa-caido::after {
  content: "El mapa no cargó. La lista completa está más abajo.";
  padding: var(--e-5);
  text-align: center;
  color: var(--tenue);
  font-size: var(--t-s);
}

/* ---------- angosto ---------- */
@media (max-width: 900px) {
  .hero,
  .dosc,
  .cta {
    grid-template-columns: 1fr;
    gap: var(--e-6);
  }
  .hitos,
  .tres,
  .metricas {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-5);
  }
  .pie-sitio {
    grid-template-columns: 1fr;
    gap: var(--e-6);
  }
  .titulo-hero {
    font-size: var(--t-xxl);
  }
  .bajada {
    font-size: var(--t-m);
  }
  .nav-enlaces a:not(.btn) {
    display: none;
  }
  .franja-oscura,
  .cta {
    padding: var(--e-6) var(--e-5);
  }
  .landing section {
    padding: var(--e-6) 0;
  }
}
@media (max-width: 560px) {
  .hitos,
  .tres,
  .metricas {
    grid-template-columns: 1fr;
  }
  .hero-botones .btn,
  .dosc .btn,
  .cta .btn {
    width: 100%;
  }
}

/* ---------- impresión ---------- */
#plan-impreso {
  display: none;
}
@media print {
  /* Lo único que tiene sentido en papel es el plan, y en texto plano: los
     campos de formulario se imprimen mal y los textarea se recortan. */
  body > *:not(#plan-impreso) {
    display: none !important;
  }
  html,
  body {
    background: #fff;
    color: #000;
    padding: 0;
  }
  #plan-impreso {
    display: block;
    white-space: pre-wrap;
    font-family: ui-monospace, monospace;
    font-size: 11.5pt;
    line-height: 1.45;
    color: #000;
    padding: 0;
  }
}

/* ---------- sugerencias ---------- */
.sugerir {
  max-width: 640px;
  margin: var(--e-6) auto 0;
  padding: 0 var(--e-5);
}
.sugerir > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-m);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tenue);
  padding: var(--e-3) 0;
  border-top: 1px solid var(--linea);
}
.sugerir > summary:hover {
  color: var(--texto);
}
.sugerir[open] > summary {
  color: var(--texto);
}

.pie {
  padding: var(--e-6) var(--e-5) var(--e-7);
  text-align: center;
  font-size: var(--t-s);
  color: var(--tenue);
  border-top: 1px solid var(--linea);
  margin-top: var(--e-6);
  line-height: 1.6;
}
/* Una herramienta que dice "no tiene vínculo con organismos oficiales"
   gana en que se vea quién responde por ella. */
.firma {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea);
  font-size: var(--t-s);
}
.firma b {
  color: var(--texto);
  font-weight: 600;
}
.firma .redes {
  display: inline-flex;
  gap: var(--e-2);
  margin-left: var(--e-2);
}
.firma .redes a {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--e-1) var(--e-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  color: var(--acento);
}
.firma .redes a:hover {
  border-color: var(--acento);
}

.pie a {
  color: var(--acento);
}

/* ==========================================================================
   ESTADOS E INTERACCIÓN
   Había 4 hover y 1 active en toda la app: nada respondía al toque. La
   diferencia entre "funciona" y "está hecho" suele ser esto.
   Todo va bajo (hover: hover) para que en el teléfono no queden estados
   pegados después de tocar.
   ========================================================================== */
.btn,
.tema,
.punto,
.tel,
.chk,
.barra-app button,
summary,
input,
select,
textarea {
  transition:
    background-color var(--mov),
    border-color var(--mov),
    color var(--mov),
    transform var(--mov);
}

.btn:active,
.tema:active {
  transform: translateY(1px);
}

/* Las filas de lista son links: tienen que sentirse como tales. */
.punto,
.tel {
  margin: 0 calc(var(--e-2) * -1);
  padding-left: var(--e-2);
  padding-right: var(--e-2);
  border-radius: var(--r-m);
}
.punto .ir {
  transition: transform var(--mov);
}

@media (hover: hover) {
  .btn:hover:not(:disabled) {
    filter: brightness(1.08);
  }
  .btn.sec:hover:not(:disabled) {
    filter: none;
    border-color: var(--agua);
    color: var(--acento);
  }
  .punto:hover,
  .tel:hover {
    background: var(--panel-2);
  }
  .punto:hover .ir {
    transform: translateX(3px);
  }
  .chk:hover span {
    color: var(--texto);
  }
  .barra-app button:hover {
    color: var(--texto);
  }
  summary:hover {
    color: var(--texto);
  }
}

/* El foco visible tiene que verse igual en todos lados, no heredar el que
   trae cada control. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--agua);
  outline-offset: 0;
}

/* ---- el número grande ----
   Es el centro de la app: una app de datos se juzga por cómo trata sus
   números. A 30px una monoespaciada queda suelta; el tracking negativo la
   compacta y la hace leer como un instrumento. */
.dato {
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.dato .unidad {
  letter-spacing: 0;
  margin-left: 2px;
}
.leyenda-item .v,
.tel .n {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   PANTALLAS ANCHAS — sólo "Dónde ir"
   El resto de la app se queda igual que en el teléfono a propósito: una
   columna centrada. La única pantalla que gana de verdad con más ancho es
   ésta, porque un mapa y su lista se usan juntos.
   La grilla va en .mapa-y-lista, no en la sección: poniéndola en la sección,
   los <h2> a ancho completo cortan cada fila y la segunda columna no se forma
   nunca. Eso fue exactamente lo que salió mal el intento anterior.
   ========================================================================== */
@media (min-width: 900px) {
  #v-donde.on {
    max-width: 1000px;
  }
  .mapa-y-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--e-5);
    align-items: start;
  }
  /* El mapa queda a la vista mientras se recorre la lista. */
  .col-mapa {
    position: sticky;
    top: var(--e-5);
  }
  #mapa {
    height: 440px;
  }
}

/* El foco programático de las secciones es para que un lector de pantalla
   anuncie el cambio, no para dibujar un recuadro alrededor de media página.
   Sólo se puede enfocar por script (tabindex="-1"), así que sacar el contorno
   no le quita nada a quien navega con teclado. */
.vista:focus {
  outline: none;
}