/* estilo.css — panel público de Centinela. Tema claro/oscuro por
   prefers-color-scheme, layout responsive (mapa+timeline). */

:root {
  --color-fondo: #ffffff;
  --color-texto: #1a1a1a;
  --color-texto-suave: #555555;
  --color-panel: #f5f5f5;
  --color-borde: #d8d8d8;
  --color-acento: #1565c0;
  --color-seleccionado: #e3f2fd;

  --sev-1: #9e9e9e;
  --sev-2: #f9a825;
  --sev-3: #ef6c00;
  --sev-4: #c62828;
  --sev-sindato: #cfcfcf;

  /* Color de lo MEDIDO (estación real) — distinto del acento (usado para
     lo PROYECTADO/modelado) a propósito: HONESTIDAD DE DATOS exige que
     medido y modelado nunca se confundan visualmente (ver lluvia.js). */
  --color-medido: #2e7d32;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #121212;
    --color-texto: #e8e8e8;
    --color-texto-suave: #aaaaaa;
    --color-panel: #1e1e1e;
    --color-borde: #3a3a3a;
    --color-acento: #64b5f6;
    --color-seleccionado: #0d2b45;
    --color-medido: #66bb6a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--color-fondo);
  color: var(--color-texto);
}

.cabecera {
  padding: 1rem 1.25rem 0.5rem;
}

.cabecera-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.cabecera-acciones {
  display: flex;
  gap: 0.5rem;
}

.cabecera h1 {
  margin: 0;
  font-size: 1.5rem;
}

.subtitulo {
  margin: 0.25rem 0 0;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

/* --- Botones --- */
.boton {
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--color-borde);
  cursor: pointer;
  background: var(--color-panel);
  color: var(--color-texto);
}

.boton-primario {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: #fff;
}

.boton-secundario:hover,
.boton-primario:hover {
  filter: brightness(1.08);
}

/* --- Modal de login --- */
.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

/* `[hidden]` tiene la misma especificidad que `.modal-fondo`: sin esta regla,
   el `display:flex` de arriba (hoja de autor) le gana al `display:none` del
   User-Agent stylesheet y el modal queda visible pese al atributo `hidden`. */
.modal-fondo[hidden] {
  display: none;
}

.modal {
  /* `--color-panel` (no `--color-fondo`): en modo oscuro ambos son casi
     negros, y una tarjeta del mismo tono que el fondo de la página quedaba
     casi invisible detrás del overlay semitransparente. `--color-panel` es
     un escalón más claro y se ve contra el overlay en los dos temas. */
  background: var(--color-panel);
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  padding: 1.25rem;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.modal h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

.campo-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.campo-label input,
.campo-label select {
  font-size: 0.9rem;
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--color-borde);
  background: var(--color-fondo);
  color: var(--color-texto);
}

.login-error {
  margin: 0.5rem 0 0;
  color: var(--sev-4);
  font-size: 0.85rem;
}

.modal-botones {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.aviso-error {
  margin: 0 1.25rem 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  background: var(--sev-3);
  color: #fff;
  font-size: 0.9rem;
}

/* --- Layout responsive: móvil = una columna (mapa arriba, timeline abajo);
   desktop (>=768px) = grid de dos columnas, timeline lateral. --- */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0 1.25rem 1.25rem;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
  .panel-timeline {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    position: sticky;
    top: 1rem;
  }
}

.panel-mapa {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#mapa {
  height: 55vh;
  min-height: 320px;
  border-radius: 8px;
  border: 1px solid var(--color-borde);
}

@media (min-width: 768px) {
  #mapa { height: 65vh; }
}

.controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-panel);
  border: 1px solid var(--color-borde);
  border-radius: 8px;
}

.filtro-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  border: none;
  padding: 0;
  margin: 0;
}

.filtro-tipos legend {
  font-size: 0.8rem;
  color: var(--color-texto-suave);
  padding: 0;
}

.filtro-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.filtro-severidad-label {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: var(--color-texto-suave);
  gap: 0.2rem;
}

.filtro-severidad-label select {
  font-size: 0.9rem;
  padding: 0.2rem;
}

.contador-eventos {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-panel);
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  font-size: 0.85rem;
}

.leyenda-titulo {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  width: 100%;
}

.leyenda-titulo:not(:first-child) {
  margin-top: 0.25rem;
}

.leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* --- Task 11 (P2a): capas de zonas de riesgo (mapa público) --- */

.filtro-riesgo {
  width: 100%;
}

.riesgo-aviso {
  margin-left: 0.35rem;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-texto-suave);
}

.leyenda-riesgo-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
  width: 100%;
}

.riesgo-swatch {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 3px;
  vertical-align: middle;
}

/* --- Task 11 (P2a): chequeo por casa (zonas de riesgo, panel privado) --- */

.riesgo-chequeo {
  margin-bottom: 1rem;
}

.riesgo-chip-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.riesgo-chip {
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  background: var(--color-panel);
  border: 1px solid var(--color-borde);
}

.riesgo-chip-ok {
  color: var(--color-medido);
}

.riesgo-chip-alerta {
  border-left: 4px solid var(--sev-3);
}

/* Ámbar/neutro — NUNCA verde: "no verificado" no es sinónimo de "sin riesgo"
   (requisito de seguridad del contrato de Task 11). */
.riesgo-chip-noverificado {
  border-left: 4px solid var(--sev-2);
}

.riesgo-chip-proximamente {
  color: var(--color-texto-suave);
  font-style: italic;
}

.punto {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
}

.punto.severidad-1, .severidad-1 { background: var(--sev-1); }
.punto.severidad-2, .severidad-2 { background: var(--sev-2); }
.punto.severidad-3, .severidad-3 { background: var(--sev-3); }
.punto.severidad-4, .severidad-4 { background: var(--sev-4); }
.punto.severidad-sindato, .severidad-sindato { background: var(--sev-sindato); }

/* --- Timeline --- */
.panel-timeline h2 {
  font-size: 1.05rem;
  margin: 0.5rem 0 0.5rem;
}

.timeline-vacio {
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

.timeline-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.timeline-item {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-borde);
  border-left-width: 4px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--color-panel);
}

.timeline-item.severidad-1 { border-left-color: var(--sev-1); }
.timeline-item.severidad-2 { border-left-color: var(--sev-2); }
.timeline-item.severidad-3 { border-left-color: var(--sev-3); }
.timeline-item.severidad-4 { border-left-color: var(--sev-4); }

/* Destacado (Task 9): severidad ≥3 además del acento izquierdo (que ya
   tienen todas), suma un borde completo del color del nivel para
   diferenciarse visualmente de severidad 1-2. */
.timeline-item.severidad-3,
.timeline-item.severidad-4 {
  border-width: 2px;
  border-left-width: 4px;
}
.timeline-item.severidad-3 { border-color: var(--sev-3); }
.timeline-item.severidad-4 { border-color: var(--sev-4); }

.timeline-item.seleccionado {
  background: var(--color-seleccionado);
  border-color: var(--color-acento);
}

.timeline-cabecera {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.badge {
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--color-borde);
}

.badge-severidad.severidad-1 { background: var(--sev-1); color: #fff; }
.badge-severidad.severidad-2 { background: var(--sev-2); color: #1a1a1a; }
.badge-severidad.severidad-3 { background: var(--sev-3); color: #fff; }
.badge-severidad.severidad-4 { background: var(--sev-4); color: #fff; }

.timeline-hora {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--color-texto-suave);
}

.timeline-detalle {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
}

/* --- Enlaces --- */
.enlaces {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
}

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

.enlace-descripcion {
  color: var(--color-texto-suave);
}

/* --- Popups del mapa --- */
.popup-evento {
  font-size: 0.9rem;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 0.2rem;
}

/* Destacado (Task 9): severidad ≥3 recibe un borde del color del nivel;
   severidad 1-2 se queda con el borde transparente (sin cambio visual). */
.popup-evento.severidad-3 { border-color: var(--sev-3); }
.popup-evento.severidad-4 { border-color: var(--sev-4); }

.popup-titulo {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.popup-fecha {
  margin: 0.25rem 0 0;
  color: #555;
  font-size: 0.8rem;
}

/* --- Bloque de acciones (Task 9): recomendaciones + teléfonos de
   emergencia, compartido por el popup del mapa y la entrada del timeline. --- */
.acciones {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-borde);
}

.acciones-titulo {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.acciones-lista {
  margin: 0 0 0.4rem;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}

.acciones-lista li {
  margin-bottom: 0.15rem;
}

.acciones-telefonos {
  margin: 0;
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.acciones-telefonos a {
  color: var(--color-acento);
  font-weight: 600;
  text-decoration: none;
}

.acciones-telefonos a:hover {
  text-decoration: underline;
}

.pie {
  padding: 1rem 1.25rem 1.5rem;
  color: var(--color-texto-suave);
  font-size: 0.8rem;
}

/* --- Panel privado (Task 7) --- */
.panel-privado {
  margin: 0 1.25rem 1.5rem;
  padding: 1rem;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  background: var(--color-panel);
}

.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-borde);
  margin-bottom: 1rem;
}

.tab {
  font-size: 0.9rem;
  padding: 0.5rem 0.9rem;
  border: none;
  background: none;
  color: var(--color-texto-suave);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab[aria-selected="true"] {
  color: var(--color-texto);
  border-bottom-color: var(--color-acento);
  font-weight: 600;
}

.tab-panel h3 {
  font-size: 1rem;
  margin: 0.25rem 0 0.5rem;
}

.filtro-alertas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.filtro-alertas input {
  font-size: 0.9rem;
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--color-borde);
  background: var(--color-fondo);
  color: var(--color-texto);
}

.tabla-scroll {
  overflow-x: auto;
}

.tabla-alertas,
.tabla-salud {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.tabla-alertas th,
.tabla-alertas td,
.tabla-salud th,
.tabla-salud td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-borde);
  white-space: nowrap;
}

.tabla-alertas td:nth-child(5) {
  white-space: normal;
  min-width: 14rem;
}

.tabla-vacio {
  color: var(--color-texto-suave);
  text-align: center !important;
  white-space: normal !important;
}

.badge-suprimida {
  background: var(--sev-2);
  color: #1a1a1a;
}

.salud-contexto {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.probar-alerta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.probar-alerta-resultado {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.probar-alerta-resultado.resultado-ok {
  color: var(--sev-1);
}

.probar-alerta-resultado.resultado-error {
  color: var(--sev-4);
}

/* --- Tarjetas de contexto --- */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.tarjeta {
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  padding: 0.75rem;
  background: var(--color-fondo);
}

.tarjeta-titulo {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.tarjeta-sin-datos {
  color: var(--color-texto-suave);
  font-size: 0.85rem;
  margin: 0;
}

.tarjeta-punto {
  font-size: 0.85rem;
  grid-column: 1 / -1;
}

.tarjeta-rango {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--color-texto-suave);
}

.grafico-barras {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 90px;
}

.barra-columna {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
}

.barra {
  width: 100%;
  min-height: 2px;
  background: var(--color-acento);
  border-radius: 2px 2px 0 0;
}

.barra-etiqueta {
  position: absolute;
  bottom: -1.1rem;
  font-size: 0.6rem;
  color: var(--color-texto-suave);
  white-space: nowrap;
}

.badges-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.badge-rafaga {
  background: var(--color-borde);
}

.grafico-caudal {
  width: 100%;
  height: 80px;
  color: var(--color-acento);
}

/* --- Task 10 (P2a): lluvia observada vs. proyectada --- */

.panel-lluvia {
  margin: 0 1.25rem 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  background: var(--color-panel);
}

.panel-lluvia h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.lluvia-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.lluvia-semaforo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.lluvia-semaforo.severidad-informativo { border-left: 4px solid var(--sev-1); }
.lluvia-semaforo.severidad-atencion { border-left: 4px solid var(--sev-2); }
.lluvia-semaforo.severidad-alerta { border-left: 4px solid var(--sev-3); }
.lluvia-semaforo.severidad-alarma { border-left: 4px solid var(--sev-4); }
.lluvia-semaforo.severidad-sindato { border-left: 4px solid var(--sev-sindato); }

.lluvia-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.lluvia-acumulado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  margin-bottom: 0.5rem;
}

.lluvia-acumulado-numero {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.lluvia-acumulado-etiqueta {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--color-texto-suave);
}

/* Gráfico diario (típ. 3 columnas = 72 h): una columna por día, cada una
   con su barra de pronóstico y (solo "hoy") una segunda barra de lo
   medido, lado a lado — misma escala de mm acumulados, comparación
   honesta (ver docstring de `graficoObservadoVsProyectado` en lluvia.js). */
.grafico-lluvia-obs-proy {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  height: 90px;
  padding-bottom: 1.2rem; /* espacio para la etiqueta de día debajo de las barras */
}

.dia-columna {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  flex: 1;
  max-width: 96px;
  position: relative;
}

.dia-barras {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 100%;
  width: 100%;
}

.barra-dia {
  width: 22px;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
}

.barra-dia-vacia {
  background: var(--color-borde);
  opacity: 0.5;
  height: 4% !important;
}

/* PRONÓSTICO (modelado, Open-Meteo): rayado — nunca sólido, para que jamás
   se confunda visualmente con una medición real (HONESTIDAD DE DATOS). */
.barra-pronostico {
  background: repeating-linear-gradient(
    45deg,
    var(--color-acento),
    var(--color-acento) 3px,
    transparent 3px,
    transparent 6px
  );
  opacity: 0.9;
}

/* MEDIDO (estación DMC real): barra sólida junto a la de pronóstico del
   día de hoy — nunca se pinta en días futuros (no se mide el futuro). */
.barra-medido {
  background: var(--color-medido);
}

.dia-columna .barra-etiqueta {
  position: absolute;
  bottom: -1.1rem;
  font-size: 0.7rem;
  color: var(--color-texto-suave);
  white-space: nowrap;
}

.lluvia-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--color-texto-suave);
}

.lluvia-leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.lluvia-swatch {
  width: 1.1rem;
  height: 0.7rem;
  display: inline-block;
  border-radius: 2px;
}

.lluvia-swatch-pronostico {
  background: repeating-linear-gradient(
    45deg,
    var(--color-acento),
    var(--color-acento) 3px,
    transparent 3px,
    transparent 6px
  );
  opacity: 0.9;
}

.lluvia-swatch-medido {
  background: var(--color-medido);
}

.lluvia-observado-nota {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}