:root {
  color-scheme: only light;
  --fondo: #f9f9f7;
  --superficie: #fcfcfb;
  --borde: rgba(11, 11, 11, 0.1);
  --texto: #0b0b0b;
  --texto-2: #52514e;
  --tenue: #898781;
  --rejilla: #e1e0d9;
  --eje: #c3c2b7;
  --serie: #2a78d6;
  --tendencia: #eb6834;
  --critico: #d03b3b;
  --aviso-fondo: #fdeceb;
  --atencion: #8a5a00;
  --atencion-fondo: #fdf3dc;
  --tranquilo: #2e6b2e;
  --tranquilo-fondo: #e8f3e4;
  --barra-baja: #9cc3e8;
  --barra-alta: #0f4a9e;
  --boton: #2a78d6;
  --boton-texto: #ffffff;
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }

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

main {
  max-width: 38rem;
  margin: 0 auto;
  padding: 1rem 0.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

h1 { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--texto-2); }
h2 { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem; }

section, .aviso {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 1rem;
}

.principal { text-align: center; padding-block: 1.5rem; }
.etiqueta { margin: 0; color: var(--texto-2); font-size: 0.95rem; }
.prob { margin: 0.25rem 0; font-size: clamp(4rem, 22vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.prob.bajo { font-size: clamp(2.3rem, 11vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.15; }
.frase { margin: 0; font-size: 1.15rem; font-weight: 500; }

.aviso {
  background: var(--aviso-fondo);
  border-color: var(--critico);
  border-left-width: 5px;
  font-weight: 500;
}
.aviso strong { color: var(--critico); }
.proximas { margin: 0.6rem 0 0; color: var(--texto-2); }

.datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  text-align: center;
}
.dato { display: flex; flex-direction: column; gap: 0.15rem; }
.valor { font-size: 1.35rem; font-weight: 600; white-space: nowrap; }
.valor small { font-size: 0.65em; font-weight: 500; color: var(--texto-2); }
.nombre { font-size: 0.8rem; color: var(--texto-2); }

.lectura { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.principal .lectura { margin-top: 1rem; }
.hora-lectura { margin: 0; color: var(--texto-2); }
.estado:empty { display: none; }
.estado { margin: 0; font-size: 0.9rem; color: var(--texto-2); }
.estado.error { color: var(--critico); }

button {
  font: inherit;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  min-width: 14rem;
  border: 0;
  border-radius: 999px;
  background: var(--boton);
  color: var(--boton-texto);
  cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: default; }
button:focus-visible { outline: 3px solid var(--tendencia); outline-offset: 2px; }

.leyenda {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.8rem;
  color: var(--texto-2);
}
.leyenda li { display: flex; align-items: center; gap: 0.4rem; }
.muestra { width: 18px; height: 0; border-top: 2px solid var(--serie); }
.muestra.proyeccion { border-top-style: dashed; }
.muestra.tendencia { border-top-color: var(--tendencia); }

.lienzo { position: relative; touch-action: pan-y; }
.lienzo svg { display: block; width: 100%; height: auto; overflow: visible; }
.lienzo text { font-size: 11px; fill: var(--tenue); font-variant-numeric: tabular-nums; }
.lienzo .rejilla { stroke: var(--rejilla); stroke-width: 1; }
.lienzo .base { stroke: var(--eje); stroke-width: 1; }
.lienzo .ref { stroke: var(--critico); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.8; }
.lienzo text.ref-texto { fill: var(--critico); }
.lienzo .dia { stroke: var(--texto-2); stroke-width: 1; stroke-dasharray: 2 3; }
.lienzo text.dia-texto { fill: var(--texto-2); font-weight: 600; }
.lienzo .linea-ahora { stroke: var(--eje); stroke-width: 1; }
.lienzo .pasado, .lienzo .proyeccion, .lienzo .tendencia { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lienzo .pasado { stroke: var(--serie); }
.lienzo .proyeccion { stroke: var(--serie); stroke-dasharray: 5 4; }
.lienzo .tendencia { stroke: var(--tendencia); }
.lienzo .ahora { fill: var(--serie); stroke: var(--superficie); stroke-width: 2; }
.lienzo .ahora { fill: var(--texto-2); font-weight: 600; }
.lienzo .cruz { stroke: var(--tenue); stroke-width: 1; }
.lienzo .marca { fill: var(--superficie); stroke: var(--serie); stroke-width: 2; }

.globo {
  position: absolute;
  top: 0;
  pointer-events: none;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 0.3rem 0.55rem;
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.globo b { font-size: 0.95rem; }

.tendencia { margin: 0.5rem 0 0; font-weight: 500; }


.horas table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horas th, .horas td { padding: 0.4rem 0.3rem; border-bottom: 1px solid var(--rejilla); text-align: left; font-weight: 500; }
.horas thead th { font-size: 0.75rem; font-weight: 500; color: var(--texto-2); vertical-align: bottom; }
.horas tbody th { white-space: nowrap; color: var(--texto-2); }
.horas td { width: 75%; }
.celda { display: flex; align-items: center; gap: 0.4rem; }
.celda b { min-width: 3em; text-align: right; font-weight: 600; }
.barra { flex: 1; height: 8px; border-radius: 4px; background: var(--rejilla); overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 4px; }
.barra.hora > span { background: var(--serie); }
.nota { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--texto-2); }
.lugares td { width: auto; text-align: center; }
.lugares thead th:not(:first-child) { text-align: center; }
.lugares td b { display: block; font-weight: 600; }
.lugares td .barra { display: block; width: 100%; height: 6px; margin-top: 0.2rem; }

footer { font-size: 0.8rem; color: var(--tenue); text-align: center; }
footer a { color: inherit; }

@media (max-width: 360px) {
  .valor { font-size: 1.15rem; }
}

.rayos .nivel {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}
.nivel-0 { background: var(--tranquilo-fondo); color: var(--tranquilo); }
.nivel-1 { background: var(--atencion-fondo); color: var(--atencion); }
.nivel-2 { background: var(--aviso-fondo); color: var(--critico); }
.rayos-titulo { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.2rem; }
.radar svg { display: block; width: 100%; margin: 0 auto; }
.radar text { font-size: 14.5px; fill: var(--texto); paint-order: stroke; stroke: var(--superficie); stroke-width: 3px; }
.radar .anillo { fill: none; stroke: var(--eje); }
.radar .anillo.cerca { fill: var(--aviso-fondo); stroke: var(--critico); }
.radar text.escala { fill: var(--texto-2); }
.radar circle.pueblo { fill: var(--texto-2); }
.radar circle.centro { fill: var(--texto); }
.radar text.centro { fill: var(--texto); font-weight: 600; }
.radar circle.rayo { stroke: var(--superficie); fill-opacity: 0.8; }
.radar circle.rayo.nivel-2 { fill: var(--critico); }
.radar circle.rayo.nivel-1, .radar circle.rayo.nivel-0 { fill: var(--atencion); }
.radar .pulso {
  fill: none;
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulso-rayo 2.7s ease-out infinite;
}
.radar .pulso.nivel-2 { stroke: var(--critico); }
.radar .pulso.nivel-1 { stroke: var(--atencion); }
.radar .pulso-1 { animation-delay: 0.9s; }
.radar .pulso-2 { animation-delay: 1.8s; }
@keyframes pulso-rayo {
  from { transform: scale(0.6); opacity: 0.8; }
  to { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .radar .pulso { animation: none; }
}

/* Color según el riesgo de lluvia, en un solo tono: el rojo queda para la tormenta eléctrica.
   --p es la probabilidad (0 a 100): el color sube de a poco, así 39 % y 40 % casi no se distinguen.
   La página siempre se ve en modo claro. */
.principal {
  --mezcla: color-mix(in srgb, #eef5fa, #5f9fe3 calc(var(--p, 0) * 1%));
  background: linear-gradient(160deg, color-mix(in srgb, #eef5fa, var(--mezcla) 45%), var(--mezcla));
  border-color: rgba(11, 11, 11, 0.1);
  color: #0b0b0b;
}
.principal .etiqueta, .principal .proximas, .principal .hora-lectura, .principal .estado { color: #0b0b0b; }
.principal .estado.error { color: #5e0c0c; }
.principal button {
  background: color-mix(in srgb, #2a78d6, #0b3d86 calc(var(--p, 0) * 1%));
  color: #ffffff;
}
.barra > span, .barra.hora > span {
  background: linear-gradient(90deg, var(--barra-baja), color-mix(in srgb, var(--barra-baja), var(--barra-alta) calc(var(--p, 0) * 1%)));
}
/* Navegadores viejos, sin color-mix: un color fijo para que el texto se siga leyendo. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .principal { background: #d3e6f6; }
  .principal button { background: #2a78d6; }
  .barra > span, .barra.hora > span { background: var(--serie); }
}