/* ¿Cómo está el río? — hoja de estilos unica, sin dependencias.
   Prioridades, en este orden: legibilidad en celular, contraste alto para
   leerse a la intemperie, y que nada dependa de la red para renderizar. */

:root {
  --papel:#f6f3ec; --tarjeta:#fff; --tinta:#1c2531; --suave:#5b6472; --linea:#ddd4c4;
  --verde:#1a6b3a;  --verde-bg:#e2efe6;
  --amarillo:#8a6205; --amarillo-bg:#fbf0cf;
  --naranja:#a8490a; --naranja-bg:#fbe6d4;
  --rojo:#8f1414;    --rojo-bg:#f8e0e0;
  --azul:#0b5f7d;    --azul-bg:#e2eff4;
  --gris-bg:#eceae4;
  --sombra:0 1px 3px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05);
  --radio:14px;
  --serif:Georgia,"Times New Roman",serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel:#14181e; --tarjeta:#1c222b; --tinta:#e8eaed; --suave:#9aa4b2; --linea:#2e3742;
    --verde:#5fd08a;  --verde-bg:#12301f;
    --amarillo:#e8c25a; --amarillo-bg:#332a10;
    --naranja:#f0a06a; --naranja-bg:#3a2413;
    --rojo:#ff8e8e;    --rojo-bg:#3d1618;
    --azul:#6ec5e0;    --azul-bg:#112b35;
    --gris-bg:#232a33;
    --sombra:0 1px 3px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
  }
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
.envoltorio { max-width:720px; margin:0 auto; padding:16px 16px 64px; }

/* Reportes de vecinos: seccion propia, mas ancha que el resto para que el
   mapa se use comodo en desktop (ver .mapa-caja mas abajo). */
.reportes-ancho { max-width:980px; margin:0 auto 18px; padding:0 16px; }

a { color:var(--azul); overflow-wrap:anywhere; }
a:focus-visible, button:focus-visible { outline:3px solid var(--azul); outline-offset:2px; border-radius:6px; }

/* ---------- Encabezado ---------- */
header.principal { text-align:center; padding:14px 0 16px; border-bottom:2px solid var(--tinta); margin-bottom:16px; }
.marca { font-family:var(--serif); font-size:clamp(24px,6vw,30px); font-weight:800; margin:0; letter-spacing:-.015em; }
.marca span { color:var(--azul); }
.bajada { color:var(--suave); font-size:13px; margin:5px 0 0; }
.origen { display:inline-block; margin-top:9px; font-size:11.5px; color:var(--suave);
  border:1px solid var(--linea); border-radius:20px; padding:3px 11px; }

/* ---------- Avisos de estado del dato ---------- */
.aviso-dato { font-size:13px; padding:10px 13px; border-radius:10px; margin-bottom:14px; display:none; }
.aviso-dato.mostrar { display:block; }
.aviso-dato.viejo { background:var(--amarillo-bg); color:var(--amarillo); border:1px solid currentColor; }
.aviso-dato.error { background:var(--rojo-bg); color:var(--rojo); border:1px solid currentColor; }

/* ---------- Bloques principales (dos rios, en pie de igualdad) ---------- */
.rejilla-heroes { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:14px; }
.rejilla-heroes .principal-estado { padding:20px 15px 17px; }
.rejilla-heroes .metros { font-size:clamp(34px,9vw,44px); }
.rejilla-heroes .palabra { font-size:clamp(17px,4.5vw,20px); }
.rejilla-heroes .rio-nombre { font-family:var(--serif); font-size:13px; font-weight:700; opacity:.75; margin:0 0 4px; text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:560px) { .rejilla-heroes { grid-template-columns:1fr; } }

.principal-estado { border-radius:var(--radio); padding:26px 20px 22px; text-align:center; box-shadow:var(--sombra); }
.e-normal{background:var(--verde-bg);} .e-normal .palabra,.e-normal .metros{color:var(--verde);}
.e-atencion{background:var(--amarillo-bg);} .e-atencion .palabra,.e-atencion .metros{color:var(--amarillo);}
.e-preparacion{background:var(--naranja-bg);} .e-preparacion .palabra,.e-preparacion .metros{color:var(--naranja);}
.e-alerta{background:var(--naranja-bg);} .e-alerta .palabra,.e-alerta .metros{color:var(--naranja);}
.e-evacuacion{background:var(--rojo-bg);} .e-evacuacion .palabra,.e-evacuacion .metros{color:var(--rojo);}
.e-sin_dato{background:var(--gris-bg);} .e-sin_dato .palabra{color:var(--suave); font-size:21px;}

.palabra { font-family:var(--serif); font-size:clamp(24px,7vw,31px); font-weight:800; margin:0 0 2px; letter-spacing:-.015em; }
.metros { font-size:clamp(48px,15vw,66px); font-weight:800; line-height:1; margin:6px 0 2px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.metros small { font-size:.36em; font-weight:600; }
.detalle-estacion { font-size:13px; opacity:.85; margin:4px 0 0; }
.tendencia { display:inline-block; margin-top:11px; font-size:13.5px; font-weight:600;
  background:rgba(127,127,127,.16); padding:5px 13px; border-radius:20px; }
.faltante { font-size:13px; margin:11px 0 0; opacity:.9; }
.sin-cambios { font-size:12px; margin:7px 0 0; opacity:.65; }

.accion { margin:13px 0 0; padding:15px 17px; border-radius:12px; font-size:15.5px; font-weight:600; color:#fff; text-align:left; }
.a-normal{background:var(--verde);} .a-atencion{background:#8a6205;} .a-preparacion{background:#a8490a;} .a-alerta{background:#a8490a;}
.a-evacuacion{background:#8f1414; animation:latir 1.8s infinite;} .a-sin_dato{background:#6b7280;}
@media (prefers-color-scheme: dark) { .a-normal,.a-atencion,.a-preparacion,.a-alerta,.a-evacuacion{color:#fff;} }
@keyframes latir { 0%,100%{box-shadow:0 0 0 0 rgba(143,20,20,.55);} 50%{box-shadow:0 0 0 12px rgba(143,20,20,0);} }
@media (prefers-reduced-motion: reduce) { .a-evacuacion{animation:none;} }

.momento { text-align:center; font-size:12px; color:var(--suave); margin:11px 0 0; }
.momento b { color:var(--tinta); }

/* ---------- Suscripcion ---------- */
.suscripcion { margin-top:16px; background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio); padding:16px 17px; box-shadow:var(--sombra); }
.suscripcion h2 { margin:0 0 5px; font-size:16px; border:0; padding:0; }
.suscripcion p { margin:0 0 12px; font-size:13.5px; color:var(--suave); }
.boton { display:block; width:100%; padding:14px 18px; font-size:16px; font-weight:700;
  border:0; border-radius:11px; background:var(--azul); color:#fff; cursor:pointer;
  font-family:inherit; min-height:48px; }
.boton:hover:not(:disabled) { filter:brightness(1.08); }
.boton:disabled { opacity:.55; cursor:not-allowed; }
.boton.activo { background:var(--verde); }
.boton.secundario { background:transparent; color:var(--azul); border:1.5px solid var(--azul); }
.estado-susc { font-size:13px; margin:10px 0 0; text-align:center; color:var(--suave); }

/* ---------- Estructura general ---------- */
h2 { font-family:var(--serif); font-size:19.5px; margin:32px 0 11px; padding-bottom:7px; border-bottom:1px solid var(--linea); }
h3 { font-size:14.5px; margin:0 0 7px; }
.tarjeta { background:var(--tarjeta); border:1px solid var(--linea); border-radius:12px; padding:15px 17px; box-shadow:var(--sombra); }
.nota { font-size:12.5px; color:var(--suave); margin:8px 2px 0; }

/* ---------- Aguas arriba ---------- */
.rejilla-arriba { display:grid; gap:10px; }
.est-arriba { background:var(--tarjeta); border:1px solid var(--linea); border-left:4px solid var(--verde);
  border-radius:11px; padding:13px 15px; }
.est-arriba.sobre { border-left-color:var(--naranja); }
.est-arriba-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.est-arriba-nombre { font-weight:700; font-size:14.5px; padding-top:4px; line-height:1.4; }
.est-arriba-cifra { flex:0 0 auto; display:flex; align-items:baseline; gap:5px; font-size:22px; font-weight:800;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.est-arriba-cifra small { font-size:12.5px; font-weight:600; color:var(--suave); }
.est-arriba-cifra .flecha-tend { font-size:15px; font-weight:600; color:var(--suave); }
.est-arriba.sobre .est-arriba-cifra { color:var(--naranja); }
.pill-alerta { display:inline-block; margin-left:2px; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.045em; color:var(--naranja); background:var(--naranja-bg); padding:2px 8px; border-radius:9px;
  white-space:nowrap; vertical-align:1px; }
.est-arriba-meta { margin-top:8px; font-size:12px; color:var(--suave); }

/* ---------- Escala historica ---------- */
.escala { position:relative; margin:14px 0 6px; }
.escala-barra { height:26px; border-radius:7px; overflow:hidden; display:flex; border:1px solid var(--linea); }
.escala-barra i { display:block; height:100%; }
.escala-marca { position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--tinta); }
.escala-marca::after { content:attr(data-etq); position:absolute; top:-17px; left:50%; transform:translateX(-50%);
  font-size:10.5px; white-space:nowrap; color:var(--tinta); font-weight:700; }
.escala-leyenda { display:flex; justify-content:space-between; font-size:11px; color:var(--suave); margin-top:5px; }

/* ---------- Tabla de umbrales ---------- */
ul.umbrales { list-style:none; padding:0; margin:0; }
ul.umbrales li { padding:13px 0; border-bottom:1px dashed var(--linea); font-size:14.5px; display:flex; gap:12px; align-items:flex-start; }
ul.umbrales li:last-child { border-bottom:0; }
.punto { flex:0 0 auto; width:14px; height:14px; border-radius:50%; margin-top:5px; }
.p-normal{background:var(--verde);} .p-atencion{background:#c9a227;}
.p-preparacion{background:var(--naranja);} .p-alerta{background:var(--naranja);} .p-evacuacion{background:var(--rojo);}
.p-sin_dato{background:var(--suave);}
ul.umbrales b { display:block; }

/* ---------- Grafico ---------- */
.grafico { width:100%; height:auto; display:block; }
.grafico-caja { background:var(--tarjeta); border:1px solid var(--linea); border-radius:12px; padding:14px 12px 10px; box-shadow:var(--sombra); }

/* ---------- Rejillas ---------- */
.rejilla2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.mini { background:var(--tarjeta); border:1px solid var(--linea); border-radius:11px; padding:12px 14px; }
.mini h3 { font-size:12px; color:var(--azul); text-transform:uppercase; letter-spacing:.055em; margin:0 0 5px; }
.mini p { margin:0; font-size:14px; }
.mini .grande { font-size:23px; font-weight:800; font-variant-numeric:tabular-nums; }
.tel { font-weight:800; font-size:19px; color:var(--tinta); text-decoration:none; display:inline-block; padding:3px 0; }

.enlaces a { display:block; padding:10px 0; border-bottom:1px dotted var(--linea); font-size:14.5px; }
.enlaces a:last-child { border-bottom:0; }

/* ---------- Kit / listas ---------- */
ul.chequeo { list-style:none; padding:0; margin:0; }
ul.chequeo li { padding:7px 0 7px 26px; position:relative; font-size:14.5px; border-bottom:1px dotted var(--linea); }
ul.chequeo li:last-child { border-bottom:0; }
ul.chequeo li::before { content:"☐"; position:absolute; left:2px; top:6px; font-size:15px; color:var(--azul); }

details.plegable { background:var(--tarjeta); border:1px solid var(--linea); border-radius:11px; margin-bottom:9px; }
details.plegable > summary { padding:13px 15px; font-weight:700; cursor:pointer; font-size:14.5px; list-style:none; }
details.plegable > summary::-webkit-details-marker { display:none; }
details.plegable > summary::before { content:"+ "; color:var(--azul); font-weight:800; }
details.plegable[open] > summary::before { content:"– "; }
details.plegable .cuerpo { padding:0 15px 14px; font-size:14px; }
details.plegable .cuerpo ol, details.plegable .cuerpo ul { padding-left:20px; margin:8px 0; }
details.plegable .cuerpo li { margin-bottom:5px; }

footer { margin-top:34px; padding-top:15px; border-top:1px solid var(--linea); font-size:11.5px; color:var(--suave); }
footer p { margin:0 0 8px; }

.oculto { display:none !important; }

@media (max-width:470px) {
  .rejilla2 { grid-template-columns:1fr; }
  .envoltorio { padding:12px 13px 56px; }
}

/* ---------- Enlace "kit de emergencia" dentro del texto de accion ---------- */
.accion .enlace-kit {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 800; color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.accion .enlace-kit:hover, .accion .enlace-kit:focus-visible { text-decoration-thickness: 2px; }

/* ---------- Modal del kit de emergencia ---------- */
dialog.modal-kit {
  border: none; border-radius: var(--radio); padding: 20px 22px 22px;
  max-width: 480px; width: calc(100vw - 40px); color: var(--tinta); background: var(--tarjeta);
  box-shadow: var(--sombra);
}
dialog.modal-kit::backdrop { background: rgba(20,20,20,.5); }
.modal-kit-cabecera { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:4px; }
.modal-kit-cabecera h3 { font-family:var(--serif); font-size:20px; margin:0; }
.modal-kit-cerrar {
  background:none; border:none; font-size:26px; line-height:1; color:var(--suave);
  cursor:pointer; padding:4px 6px; margin:-4px -6px 0 0; border-radius:8px;
}
.modal-kit-cerrar:hover, .modal-kit-cerrar:focus-visible { color:var(--tinta); background:var(--gris-bg); }
.modal-kit-cuerpo ul.chequeo { margin-top:8px; }
@media (max-width:480px) { dialog.modal-kit { padding:17px 17px 19px; } }

/* Boton (i): abre en un modal una aclaracion que, si fuera texto fijo, se
   repetiria en cada tarjeta o quedaria como un parrafo largo en mobile. */
.icono-info {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:19px; height:19px; border-radius:50%; border:1.5px solid var(--suave);
  background:none; color:var(--suave); font:italic 700 12px var(--serif);
  line-height:1; padding:0; cursor:pointer;
}
.icono-info:hover, .icono-info:focus-visible { border-color:var(--azul); color:var(--azul); }


/* ---------- Suscripcion ya activa: fila compacta con engranaje ---------- */
.susc-activa-fila { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.susc-activa-texto { font-size:14.5px; font-weight:700; color:var(--verde); }
.susc-engranaje {
  flex:0 0 auto; width:34px; height:34px; border-radius:9px; border:1px solid var(--linea);
  background:var(--papel); color:var(--suave); font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.susc-engranaje:hover, .susc-engranaje:focus-visible { color:var(--tinta); background:var(--gris-bg); }
.susc-panel { margin-top:12px; padding-top:12px; border-top:1px dashed var(--linea); }

/* ---------- Boton compartir (header) ---------- */
.btn-compartir {
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  background:none; border:1px solid var(--linea); border-radius:20px;
  padding:6px 14px; font-size:12.5px; font-weight:600; color:var(--azul);
  font-family:inherit; cursor:pointer;
}
.btn-compartir:hover, .btn-compartir:focus-visible { background:var(--azul-bg); }
.btn-compartir span { font-size:13px; }

/* ---------- Campos de formulario (reportes) ---------- */
.campo-texto {
  display:block; width:100%; padding:11px 13px; font:inherit; font-size:14.5px;
  color:var(--tinta); background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:10px; resize:vertical;
}
.campo-texto:focus-visible { outline:2px solid var(--azul); outline-offset:1px; }

/* ---------- Mapas (Leaflet) ---------- */
.mapa-caja {
  height:260px; border-radius:12px; border:1px solid var(--linea); overflow:hidden;
  background:var(--gris-bg);
}
@media (min-width:760px) {
  .reportes-ancho .mapa-caja { height:420px; }
}
.mapa-caja .leaflet-popup-content-wrapper,
.mapa-caja .leaflet-popup-tip { background:var(--tarjeta); color:var(--tinta); }
.popup-reporte b { display:block; margin-bottom:3px; }
.popup-reporte .fecha { font-size:11.5px; color:var(--suave); margin-top:4px; }

/* ---------- Pasos de la guia de iOS ---------- */
ol.pasos-ios { margin:0; padding-left:22px; }
ol.pasos-ios li { margin-bottom:14px; font-size:14.5px; }
ol.pasos-ios li:last-child { margin-bottom:0; }
.paso-icono {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin:0 6px -10px 0; padding:4px;
  border:1.5px solid var(--azul); border-radius:8px; color:var(--azul);
}

/* ---------- Historial de alertas ---------- */
.historial-item { padding:11px 0; border-bottom:1px dashed var(--linea); }
.historial-item:last-child { border-bottom:none; }
.historial-fecha { font-size:11.5px; color:var(--suave); margin-bottom:2px; }
.historial-titulo { font-weight:700; font-size:14px; margin-bottom:2px; }
.historial-cuerpo { font-size:13.5px; color:var(--suave); }

/* ---------- Scroll con margen para que la barra fija no tape el titulo ---------- */
h2[id], header[id] { scroll-margin-top: 68px; }

/* ---------- Guia para familias ---------- */
.guia-familias { scroll-margin-top:68px; margin-bottom:9px; }
.guia-familias h3 { font-family:var(--serif); font-size:17px; line-height:1.3; margin:0 0 8px; }
.guia-familias p { margin:0 0 12px; font-size:14.5px; }
.guia-familias p.nota { margin:10px 2px 0; font-size:12.5px; }
a.boton { text-align:center; text-decoration:none; }

/* ---------- Botones del header ---------- */
.header-botones { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.btn-compartir, .btn-menu {
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:1px solid var(--linea); border-radius:20px;
  padding:6px 14px; font-size:12.5px; font-weight:600; color:var(--azul);
  font-family:inherit; cursor:pointer;
}
.btn-compartir { margin-top:0; }
.btn-compartir:hover, .btn-compartir:focus-visible,
.btn-menu:hover, .btn-menu:focus-visible { background:var(--azul-bg); }
.btn-compartir span, .btn-menu span { font-size:13px; }

/* ---------- Barra fija (aparece al scrollear) ----------
   Full-bleed por fuera (fondo de borde a borde) para que el ancho nunca
   dependa de un porcentaje resuelto contra un contenedor con padding --
   eso fue justo el bug: width:100% + margin:auto no daba un ancho
   confiable. Adentro, .barra-fija-interior repite EXACTO el max-width y
   el padding lateral de .envoltorio, asi el contenido siempre alinea con
   el resto de la pagina, venga lo que venga por fuera.
   z-index bien alto: Leaflet usa hasta ~1000 en sus paneles y controles
   (.leaflet-top/.leaflet-bottom van a 1000), asi que con menos la barra
   quedaba tapada por el mapa al hacer scroll. */
.barra-fija {
  position:sticky; top:0; z-index:1200; width:100%;
  padding:0; margin:0 0 -1px; border:0; border-bottom:1px solid var(--linea);
  background:var(--tarjeta); box-shadow:0 2px 10px rgba(0,0,0,.06);
  font-family:inherit; cursor:pointer; display:block;
}
.barra-fija.oculto { display:none; }
.barra-fija-interior {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  max-width:720px; margin:0 auto; padding:11px 16px;
  font-size:14px; font-weight:700; color:var(--tinta);
}
.barra-fija-estado { display:flex; align-items:center; gap:14px; font-variant-numeric:tabular-nums; font-size:12.5px; }
.barra-fija-rio { display:flex; align-items:center; gap:6px; }
.barra-fija-punto { width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.barra-fija span[aria-hidden] { font-size:17px; color:var(--suave); }

/* ---------- Menu de secciones ---------- */
.menu-secciones { display:flex; flex-direction:column; }
.menu-secciones a {
  padding:12px 4px; border-bottom:1px dotted var(--linea); font-size:15px;
  color:var(--tinta); text-decoration:none;
}
.menu-secciones a:last-child { border-bottom:none; }
.menu-secciones a:hover, .menu-secciones a:focus-visible { color:var(--azul); }

@media (max-width:480px) {
  .barra-fija-interior { padding:10px 13px; }
}