/**
 * app/css/app.css — la pantalla de la Zona de riesgo Piura.
 *
 * La idea (PLAN §7): en esta app la pantalla ES la respuesta. No una tarjeta
 * con una insignia adentro: la franja entera se pinta del color del veredicto,
 * con una sola frase encima. El mapa va abajo, y las limitaciones siempre
 * visibles.
 *
 * Lo que NO va: animaciones de carga, degradados, sombras, tarjetas flotantes.
 * La persona puede estar asustada y bajo el sol: todo lo que no sea la
 * respuesta, estorba.
 */

:root {
  --tinta: #14110f;   /* todo el texto. Casi negro, cálido */
  --papel: #fbfaf8;   /* fondo. Blanco de sol, no crema */
  --rojo: #e04a3f;    /* en zona de riesgo */
  --ambar: #f2a93b;   /* cerca — y la franja dibujada en el mapa */
  --piedra: #d9d6cf;  /* fuera. Apagado a propósito: no celebra nada */
  --agua: #1b5e8c;    /* la mancha de inundación en el mapa */

  --sistema: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

/* La tipografía del veredicto: pesada, para leerse a distancia. Sólo ahí. */
@font-face {
  font-family: "Archivo Black";
  src: url("../vendor/fonts/archivo-black.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sistema);
  -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------- el veredicto */

#veredicto {
  padding: max(16px, env(safe-area-inset-top)) 16px 18px;
  text-align: center;
  border-bottom: 2px solid var(--tinta);
}

#veredicto-titulo {
  margin: 0;
  font-family: "Archivo Black", var(--sistema);
  font-weight: 400;
  font-size: clamp(27px, 8.4vw, 52px);
  line-height: 1.03;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

#veredicto-detalle {
  margin: 10px 0 0;
  font-size: clamp(16px, 4.6vw, 22px);
  font-weight: 600;
  line-height: 1.25;
}

#veredicto-detalle .numero {
  font-family: var(--mono);
  font-size: 1.06em;
  letter-spacing: -0.02em;
}

#veredicto-aclaracion {
  margin: 6px 0 0;
  font-size: 13px;
  opacity: 0.72;
}

#veredicto-aclaracion:empty { display: none; }

/* El aviso de "ojo" (cuando sale ⚪): una línea corta, no un párrafo. */
#veredicto-ojo {
  margin: 10px auto 0;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.35;
  text-align: left;
  border-top: 1px solid rgba(20, 17, 15, 0.35);
  padding-top: 8px;
}

#veredicto-ojo:empty { display: none; }

/* Los cuatro estados. El color va en la franja entera. */
body.estado-en-zona #veredicto { background: var(--rojo); }
body.estado-cerca #veredicto { background: var(--ambar); }
body.estado-fuera #veredicto { background: var(--piedra); }
body.estado-cargando #veredicto { background: var(--papel); }

/* ⚫ sin información: no lleva color propio, lleva rayado diagonal. Es la
   convención de los mapas para "acá no hay dato", y se explica solo. */
body.estado-sin-informacion #veredicto {
  background-color: var(--piedra);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(20, 17, 15, 0.13) 0 7px,
    rgba(20, 17, 15, 0) 7px 16px
  );
}

/* ------------------------------------------------------------------- el mapa */

#mapa-envoltorio {
  position: relative;
  min-height: 0; /* para que el mapa no estire la grilla */
}

#mapa {
  position: absolute;
  inset: 0;
  background: var(--papel);
}

/* Los avisos sobre el mapa: fondo papel, texto tinta, sin sombras. */
.aviso-mapa {
  position: absolute;
  right: 10px;
  z-index: 500;
  margin: 0;
  padding: 8px 10px;
  background: var(--papel);
  border: 2px solid var(--tinta);
  font-size: 13.5px;
  line-height: 1.35;
}

/* El de arriba arranca después de los botones de zoom, si no lo tapan. */
#aviso-fondo {
  top: 10px;
  left: 56px;
}

#pista-mapa {
  bottom: 10px;
  left: 10px;
}

/* El botón de volver: grande, para el pulgar (R4). */
#volver {
  position: absolute;
  z-index: 500;
  left: 10px;
  right: 10px;
  bottom: 10px;
  min-height: 52px;
  padding: 0 16px;
  background: var(--tinta);
  color: var(--papel);
  border: 0;
  border-radius: 0;
  font-family: var(--sistema);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

#volver:active { background: var(--agua); }

/* ------------------------------------------------------------ limitaciones */

#limitaciones {
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  border-top: 2px solid var(--tinta);
  background: var(--papel);
  font-size: 12.5px;
  line-height: 1.4;
}

#limitaciones ul {
  margin: 0;
  padding-left: 18px;
}

#limitaciones li { margin: 1px 0; }

/* --------------------------------------------------------------- accesorios */

/* Leaflet trae sus propios controles: se achican y se pintan de tinta. */
.leaflet-container { font-family: var(--sistema); }
.leaflet-control-attribution {
  background: rgba(251, 250, 248, 0.85) !important;
  font-size: 10px !important;
}
.leaflet-bar a {
  border-radius: 0 !important;
  color: var(--tinta) !important;
}

/* Pantallas muy bajas (celular acostado): el veredicto se achica. */
@media (max-height: 520px) {
  #veredicto-titulo { font-size: clamp(22px, 5.6vw, 34px); }
  #veredicto-detalle { margin-top: 6px; }
  #limitaciones { font-size: 11.5px; }
}