/* ===========================================================================
   Colombia Solidaria — hoja de estilos única.

   Arquitectura visual:
     · El MAPA es el fondo de la página, a pantalla completa y siempre entero.
       Nunca se recorta ni comparte rejilla con nada: lo que se veía "mocho"
       venía de meterlo en una columna de un grid.
     · Todo lo demás FLOTA encima en tarjetas con sombra.
     · En celular el listado es una hoja inferior que arranca plegada, para que
       el mapa ocupe tres cuartas partes de la pantalla desde el primer segundo.
     · Ningún control se identifica sólo con un icono: todos llevan su palabra.

   Criterios que no se negocian:
     1. Legible con sol de mediodía y la pantalla al 40 %.
     2. Nada que se pueda tocar mide menos de 44 px.
     3. Lo urgente se ve urgente sin leer.
     4. Sin estilos en línea: la CSP prohíbe 'unsafe-inline'.
   =========================================================================== */

:root {
  --f: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-num: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fondo: #eef0f3;
  --carta: #ffffff;
  --carta-2: #f4f6f8;
  --linea: #e3e6ea;
  --linea-2: #cfd4da;

  --tinta: #14161a;
  --tinta-2: #4e555f;
  --tinta-3: #7c848f;

  --critico: #d5232c;
  --critico-luz: #fdeaea;
  --alto: #d2650a;
  --alto-luz: #fdf1e4;
  --medio: #9a7500;
  --medio-luz: #fbf6e2;
  --hecho: #0d8a5f;
  --hecho-luz: #e6f5ee;
  --frio: #2158d0;
  --frio-luz: #e8effc;

  --s1: 0 1px 2px rgba(16, 20, 28, .06), 0 2px 6px rgba(16, 20, 28, .06);
  --s2: 0 2px 8px rgba(16, 20, 28, .10), 0 12px 28px rgba(16, 20, 28, .12);
  --s3: 0 -4px 24px rgba(16, 20, 28, .16);

  --r1: 10px;
  --r2: 14px;
  --r3: 20px;

  --panel-w: 396px;
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1115;
    --carta: #181b21;
    --carta-2: #21252d;
    --linea: #2c313a;
    --linea-2: #3c4350;
    --tinta: #eef1f5;
    --tinta-2: #b6bdc7;
    --tinta-3: #838c99;
    --critico: #ff6b62;
    --critico-luz: #381616;
    --alto: #ffa14e;
    --alto-luz: #35230f;
    --medio: #e8c552;
    --medio-luz: #2f2810;
    --hecho: #3ed49b;
    --hecho-luz: #0d2c21;
    --frio: #7ba6ff;
    --frio-luz: #16223c;
    --s2: 0 2px 8px rgba(0, 0, 0, .5), 0 12px 28px rgba(0, 0, 0, .45);
    --s3: 0 -4px 24px rgba(0, 0, 0, .55);
  }
}

/* ------------------------------------------------------------- base ----- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
  font-family: var(--f);
  background: var(--fondo);
  color: var(--tinta);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; text-align: inherit; }
a { color: var(--frio); }
svg { display: block; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--frio); outline-offset: 2px; border-radius: 6px; }

.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================== MAPA ==== */

/* Ocupa toda la ventana, siempre. Nunca es hijo de una rejilla. */
#mapa {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--carta-2);
  /* Retícula tenue detrás de las teselas: si el proveedor del mapa falla,
     el fondo sigue pareciendo un mapa y no una página rota. */
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
}

.leaflet-container { font: inherit; background: transparent; }
.leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; }
.leaflet-control-attribution {
  font-size: 10px; border-radius: 6px 0 0 0;
  background: rgba(255, 255, 255, .78) !important; color: #3a4048 !important;
}
.leaflet-control-attribution a { color: #3a4048 !important; }
@media (prefers-color-scheme: dark) {
  .leaflet-control-attribution {
    background: rgba(15, 17, 21, .78) !important; color: #98a0ac !important;
  }
  .leaflet-control-attribution a { color: #98a0ac !important; }
  .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.94) contrast(.92); }
}

/* -------------------------------------------------------------- pines --- */

.pin {
  display: grid; place-items: center; border-radius: 50%; position: relative;
  border: 2.5px solid #fff; box-shadow: 0 2px 7px rgba(10, 14, 20, .4);
  font-family: var(--f-num); font-size: 12px; font-weight: 800; color: #fff;
}
.pin.k-critica  { background: #d5232c; }
.pin.k-alta     { background: #e0730f; }
.pin.k-media    { background: #ab8300; }
.pin.k-info     { background: #6b7482; }
.pin.k-saturado { background: #2158d0; }
.pin.k-resuelto { background: #0d8a5f; }
.pin.k-acopio   { background: #6d3fc4; }
.pin.k-refugio  { background: #0e7490; }
.pin.k-medico   { background: #be1558; }
.pin.viejo { opacity: .55; border-style: dashed; }

/* El icono va en blanco sobre el color de urgencia: el color responde «¿es
   grave?» y el dibujo responde «¿qué es?», sin que uno estorbe al otro. */
.pin-icono { stroke: #fff; fill: none; stroke-width: 2.2; }
.pin-cifra {
  position: absolute; top: -6px; right: -7px;
  min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: 999px; background: #14161a; color: #fff;
  border: 2px solid #fff;
  font-size: 11px; font-weight: 800; line-height: 15px; text-align: center;
}
.pin-sello {
  position: absolute; bottom: -3px; right: -3px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #0d8a5f; border: 2px solid #fff;
}
/* El ✓ del sello se dibuja con dos trazos: así no depende de ninguna fuente. */
.pin-sello::after {
  content: ''; position: absolute; left: 2px; top: 3.5px;
  width: 5px; height: 2.5px;
  border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg);
}

/* Marcador de persona desaparecida: rombo, no círculo. La forma tiene que
   distinguirse del resto incluso en blanco y negro o para quien no separa
   bien los colores. */
.pin-desap {
  display: grid; place-items: center;
  background: #6d28d9; border: 2.5px solid #fff;
  border-radius: 6px; transform: rotate(45deg);
  box-shadow: 0 2px 7px rgba(10, 14, 20, .4);
}
.pin-desap > * { transform: rotate(-45deg); }
.pin-desap.encontrado { background: #0d8a5f; }
.titulo-enlace { text-align: left; width: 100%; }
.titulo-enlace h3 { text-decoration: underline; text-underline-offset: 2px; }

/* La cara va aquí, no en el mapa: en la ficha se reconoce, en un rombo de
   32 px no, y encima tapa los puntos de alrededor. */
.retrato-grande {
  display: block; width: 100%; max-height: 46vh; object-fit: contain;
  border-radius: var(--r2); background: var(--carta-2); margin-bottom: 12px;
}

.pin.late::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 2.5px solid #d5232c; animation: onda 2.1s ease-out infinite;
}
@keyframes onda {
  0%   { transform: scale(.65); opacity: .95; }
  100% { transform: scale(1.75); opacity: 0; }
}

.pin-grupo {
  display: grid; place-items: center; border-radius: 50%;
  background: #14161a; color: #fff; border: 2.5px solid #fff;
  font-family: var(--f-num); font-weight: 800; box-shadow: 0 2px 9px rgba(10, 14, 20, .38);
}
.pin-grupo.tiene-critico { background: #d5232c; }

.pin-yo {
  border-radius: 50%; background: #1a6bff; border: 3px solid #fff;
  box-shadow: 0 0 0 8px rgba(26, 107, 255, .22);
}

#mira {
  position: fixed; left: 50%; top: 50%; z-index: 60;
  transform: translate(-50%, -50%); pointer-events: none;
}
#mira svg { width: 56px; height: 56px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }

/* ============================================== CAPA DE INTERFAZ ======== */

#capa {
  position: fixed; inset: 0; z-index: 10;
  pointer-events: none;               /* el mapa recibe el ratón por defecto */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  /* minmax(0, 1fr) y no '1fr': una pista '1fr' nunca se encoge por debajo de
     su contenido, así que en una pantalla de 320 px la suma de invitación +
     acciones + panel empujaba el panel 43 px fuera de la ventana y dejaba
     "Coordinación" cortado. Con minmax(0, …) la fila del medio cede primero y
     la capa nunca puede ser más alta que la pantalla. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(14px + var(--sa-t)) calc(14px + var(--sa-r))
           calc(14px + var(--sa-b)) calc(14px + var(--sa-l));
  gap: 12px;
}
#capa > * { pointer-events: auto; }

/* ------------------------------------------------------------- marca ---- */

.marca-flotante {
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  align-self: start;
}

.marca {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 15px 9px 12px;
  background: var(--carta); border-radius: 999px;
  box-shadow: var(--s2); text-decoration: none; color: var(--tinta);
  min-height: 46px;
}
.marca-punto {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  background: var(--critico);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--critico) 18%, transparent);
}
.marca-texto { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.marca-texto b { font-size: 15.5px; font-weight: 800; letter-spacing: -.025em; white-space: nowrap; }
.marca-texto b em { font-style: normal; color: var(--critico); }
.marca-texto small {
  font-size: 11.5px; color: var(--tinta-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}

.vivo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px; min-height: 46px;
  background: var(--carta); border-radius: 999px; box-shadow: var(--s2);
  font-size: 13px; font-weight: 600; color: var(--tinta-2); white-space: nowrap;
}
.pulso {
  width: 9px; height: 9px; border-radius: 50%; background: var(--hecho); flex: 0 0 auto;
  animation: latido 2.6s ease-out infinite;
}
.pulso.gris { background: var(--tinta-3); animation: none; }
.pulso.rojo { background: var(--critico); animation: none; }
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hecho) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ------------------------------------------------ acciones flotantes ---- */

/* Abajo a la derecha: es donde cae el pulgar en el celular y donde no
   compiten con la marca ni tapan los puntos de la mitad superior. */
.acciones-mapa {
  grid-column: 3; grid-row: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  align-self: end; justify-self: end;
}

/* Botón con palabra. Nunca un icono suelto: en emergencia nadie descifra
   símbolos, y "⋯" no le dice nada a nadie. */
.pastilla {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 16px;
  background: var(--carta); color: var(--tinta);
  border: 1px solid transparent; border-radius: 999px;
  box-shadow: var(--s2);
  font-size: 14.5px; font-weight: 650;
  transition: background .12s, transform .08s;
  white-space: nowrap;
}
.pastilla svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--tinta-2); }
.pastilla:hover { background: var(--carta-2); }
.pastilla:active { transform: scale(.97); }



.cinta {
  grid-column: 1 / -1; grid-row: 1;
  align-self: start; justify-self: center;
  margin-top: 56px;
  max-width: min(680px, 92vw);
  padding: 10px 18px; border-radius: 999px;
  background: var(--medio-luz); color: var(--tinta);
  border: 1px solid color-mix(in srgb, var(--medio) 40%, transparent);
  box-shadow: var(--s1);
  font-size: 13.5px; font-weight: 650; text-align: center;
}
.cinta.sin-red { background: var(--alto-luz); border-color: color-mix(in srgb, var(--alto) 45%, transparent); }

/* ============================================================ PANEL ===== */

/* Dos acciones de la aplicación (no del mapa) que deben verse siempre,
   incluso con la hoja plegada, y con su palabra escrita. */
/* auto-fit y no repeat(3, 1fr): con tres botones, una pantalla de 320 px no da
   para las tres palabras y la última se salía del borde. Así la tercera baja a
   una segunda fila en vez de cortarse. Antes que recortar una palabra, se
   ocupa una fila más: la palabra es lo que dice qué hace el botón. */
.acciones-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 6px; }
/* Tres botones en una fila de 340 px: el icono se encoge antes que la palabra,
   porque la palabra es lo que dice qué hace el botón. */
.acciones-panel .btn.pequeno { padding-inline: 8px; font-size: 13px; gap: 5px; }
.acciones-panel .btn.pequeno svg { width: 16px; height: 16px; flex: none; }

/* Invitación al canal de Telegram.
   Flota sobre el mapa, arriba y al centro, como la cinta de aviso. Se probó
   dentro del panel y no sirve: en un iPhone SE le quitaba media pantalla al
   mapa, y el mapa es lo que la gente vino a ver. Aquí sólo tapa una franja.
   Se descarta con un toque y no vuelve. */
.invitacion {
  grid-column: 1 / -1; grid-row: 1;
  align-self: start; justify-self: center;
  margin-top: 56px;
  max-width: min(560px, 94vw);
  padding: 9px 10px 9px 14px;
  border: 1px solid var(--frio); border-radius: 999px;
  background: var(--frio-luz);
  box-shadow: var(--s1);
  display: flex; align-items: center; gap: 10px;
}
/* Si además hay cinta de aviso, se pone debajo en vez de encima de ella. */
.invitacion.bajo-cinta { margin-top: 106px; }

.invitacion-texto { min-width: 0; font: 400 12.5px/1.3 var(--f); color: var(--tinta-2); }
.invitacion-texto b { display: block; font: 650 13.5px/1.25 var(--f); color: var(--frio); }
.invitacion-arroba {
  font-family: var(--f-num); font-size: 13px;
  overflow-wrap: anywhere;      /* un @ largo no puede ensanchar la tarjeta */
}
.btn.azul { background: var(--frio); border-color: var(--frio); color: #fff; font-weight: 650; }
.btn.azul:hover { filter: brightness(1.08); }

.invitacion-botones { display: flex; gap: 6px; flex: none; }
.invitacion-botones .btn { min-height: 40px; border-radius: 999px; font-size: 13px; padding-inline: 12px; }

@media (max-width: 560px) {
  /* En pantalla estrecha la tarjeta pasa a dos filas y pierde las esquinas
     redondas: caben las palabras completas, que es lo que importa. */
  .invitacion { flex-direction: column; align-items: stretch; gap: 8px; border-radius: var(--r2); padding: 10px 12px; }
  .invitacion-botones { display: grid; grid-template-columns: 1fr auto; }
}

/* Cuando las notificaciones están encendidas, el botón lo dice sin abrirlo. */
#b-avisarme.encendido {
  color: var(--hecho);
  border-color: var(--hecho);
  background: var(--hecho-luz);
}

/* Opciones de radio: botones grandes, no un desplegable diminuto. */
.campo-etiqueta {
  display: block; margin: 14px 0 2px;
  font: 600 13px/1.3 var(--f); color: var(--tinta-2);
}
.separador-texto {
  margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--linea);
  font: 600 13px/1.3 var(--f); color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.candidato-bloque { display: flex; flex-direction: column; gap: 8px; }
.radios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 4px; }
.radios-2 { grid-template-columns: repeat(2, 1fr); }
.radios button {
  min-height: 46px; border: 1px solid var(--linea-2); border-radius: var(--r1);
  background: var(--carta); color: var(--tinta); font: 600 14px/1.1 var(--f);
  display: grid; place-items: center; cursor: pointer;
}
.radios button[aria-pressed='true'] {
  border-color: var(--frio); background: var(--frio-luz); color: var(--frio);
}

#panel {
  grid-column: 1; grid-row: 2 / 4;
  align-self: stretch; justify-self: start;
  width: var(--panel-w); max-width: 92vw;
  display: flex; flex-direction: column; min-height: 0;
  position: relative;
  background: var(--carta);
  border-radius: var(--r3);
  box-shadow: var(--s2);
  overflow: hidden;
  transition: transform .24s cubic-bezier(.2, .8, .3, 1), opacity .18s;
}
#panel.oculto { transform: translateX(calc(-100% - 32px)); opacity: 0; pointer-events: none; }

/* Degradado al pie del panel: dice "esto sigue hacia abajo" en vez de parecer
   que la tarjeta está cortada. Era una de las cosas que se veían "mochas". */
#panel::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: linear-gradient(to bottom, transparent, var(--carta));
  pointer-events: none; z-index: 4;
}
#panel.con-ficha::after { display: none; }

#tirador { display: none; }

.panel-cabeza {
  flex: 0 0 auto; padding: 14px; display: grid; gap: 12px;
  border-bottom: 1px solid var(--linea);
}

/* Franja de cifras: da contexto de un vistazo y evita que el panel se vea
   vacío mientras cargan los datos. */
.resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dato-resumen {
  padding: 9px 10px; border-radius: var(--r1);
  background: var(--carta-2); text-align: center;
}
.dato-resumen b {
  display: block; font-family: var(--f-num); font-size: 21px; font-weight: 800;
  line-height: 1.1; letter-spacing: -.03em;
}
.dato-resumen span { font-size: 11.5px; color: var(--tinta-3); font-weight: 600; }
.dato-resumen.rojo   { background: var(--critico-luz); }
.dato-resumen.rojo b { color: var(--critico); }
.dato-resumen.azul   { background: var(--frio-luz); }
.dato-resumen.azul b { color: var(--frio); }

#panel-contenido { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ----------------------------------------------------------- botones ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 11px 16px;
  border: 1.5px solid var(--linea-2); border-radius: var(--r1);
  background: var(--carta); color: var(--tinta);
  font-size: 15px; font-weight: 650;
  transition: background .12s, border-color .12s, transform .08s;
}
.btn:hover { background: var(--carta-2); border-color: var(--tinta-3); }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .5; cursor: default; }
.btn svg { width: 19px; height: 19px; }

.btn.primario {
  background: var(--critico); border-color: var(--critico); color: #fff;
  font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--critico) 35%, transparent);
}
.btn.primario:hover { background: color-mix(in srgb, var(--critico) 88%, #000); border-color: transparent; }
.btn.primario svg { color: #fff; }
.btn.grande { min-height: 54px; font-size: 16.5px; width: 100%; }
.btn.fantasma { background: transparent; border-color: transparent; }
.btn.fantasma:hover { background: var(--carta-2); }
.btn.pequeno { min-height: 44px; padding: 8px 13px; font-size: 14px; }
.btn.ancho { width: 100%; }
.btn.peligro { color: var(--critico); border-color: color-mix(in srgb, var(--critico) 55%, transparent); }

.b-icono {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--r1);
  display: grid; place-items: center; color: var(--tinta);
}
.b-icono svg { width: 22px; height: 22px; }
.b-icono:hover { background: var(--carta-2); }

/* ---------------------------------------------------------- pestañas ---- */

.pestanas {
  display: flex; flex: 0 0 auto; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--linea); padding: 0 6px;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  flex: 1 0 auto; padding: 13px 12px; min-height: 48px;
  font-size: 14px; font-weight: 650; color: var(--tinta-3);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.pestanas button[aria-selected='true'] { color: var(--tinta); border-bottom-color: var(--critico); }
.pastilla-num {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--carta-2); font-size: 12px; font-weight: 800; color: var(--tinta-2);
  font-family: var(--f-num);
}

/* ---------------------------------------------------------- buscador ---- */

.buscador { position: relative; flex: 0 0 auto; border-bottom: 1px solid var(--linea); }
.buscador svg {
  position: absolute; left: 15px; top: 50%; margin-top: -9px;
  width: 18px; height: 18px; color: var(--tinta-3); pointer-events: none;
}
.buscador input[type='search'] {
  width: 100%; padding: 13px 14px 13px 44px; min-height: 50px;
  border: none; border-radius: 0; background: transparent; color: var(--tinta);
  font-size: 16px;                       /* menos de 16 px hace que iOS haga zoom */
  -webkit-appearance: none; appearance: none;
}
.buscador input[type='search']:focus { box-shadow: none; outline-offset: -3px; }
.buscador input::placeholder { color: var(--tinta-3); }

/* ----------------------------------------------------------- filtros ---- */

.filtros {
  display: flex; gap: 7px; padding: 10px 12px; overflow-x: auto; flex: 0 0 auto;
  border-bottom: 1px solid var(--linea); scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filtros::-webkit-scrollbar { display: none; }

.chip-filtro {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 8px 14px;
  border: 1.5px solid var(--linea-2); border-radius: 999px;
  background: var(--carta); font-size: 14px; font-weight: 650; white-space: nowrap;
}
.chip-filtro b { font-family: var(--f-num); color: var(--tinta-3); font-weight: 800; }
.chip-filtro[aria-pressed='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--carta); }
.chip-filtro[aria-pressed='true'] b { color: var(--carta); opacity: .75; }
.chip-filtro.urgente[aria-pressed='false'] { border-color: var(--critico); color: var(--critico); }
.chip-filtro.urgente[aria-pressed='false'] b { color: var(--critico); }
.chip-filtro.urgente[aria-pressed='true'] { background: var(--critico); border-color: var(--critico); color: #fff; }
.chip-filtro.urgente[aria-pressed='true'] b { color: #fff; }
.chip-filtro.rancio[aria-pressed='false'] { border-color: var(--alto); color: var(--alto); }
.chip-filtro.rancio[aria-pressed='false'] b { color: var(--alto); }
.chip-filtro.rancio[aria-pressed='true'] { background: var(--alto); border-color: var(--alto); color: #fff; }
.chip-filtro.rancio[aria-pressed='true'] b { color: #fff; }
.chip-filtro.chip-leyenda { border-style: dashed; color: var(--tinta-2); font-weight: 650; }

/* Leyenda: la muestra a la izquierda y lo que significa a la derecha. */
.leyenda { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 6px; }
.leyenda-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.leyenda-fila { display: flex; align-items: center; gap: 11px; }
.leyenda-fila > div { min-width: 0; }
.leyenda-fila b { display: block; font: 650 13.5px/1.3 var(--f); color: var(--tinta); }
.leyenda-fila span { display: block; font: 400 12.5px/1.35 var(--f); color: var(--tinta-2); }
.pin-muestra { width: 34px; height: 34px; position: relative; flex: none; }

/* ------------------------------------------------------------- lista ---- */

#lista {
  flex: 1; min-width: 0; overflow-y: auto; padding: 10px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 8px;
}

/* Tarjeta: la urgencia se lee por el punto de color y por el fondo teñido,
   no por una barra lateral. */
.fila {
  display: block; width: 100%; text-align: left;
  padding: 12px 13px; border-radius: var(--r2);
  border: 1.5px solid var(--linea);
  background: var(--carta);
  transition: border-color .12s, background .12s, transform .08s;
}
.fila:hover { border-color: var(--linea-2); background: var(--carta-2); }
.fila:active { transform: scale(.995); }
.fila[aria-current='true'] { border-color: var(--tinta); box-shadow: var(--s1); }

.fila.u-critica { background: var(--critico-luz); border-color: color-mix(in srgb, var(--critico) 34%, transparent); }
.fila.u-alta    { border-color: color-mix(in srgb, var(--alto) 32%, transparent); }
.fila.resuelto  { opacity: .6; }

.fila-tope { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.punto-urg {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; margin-top: 6px;
  background: var(--tinta-3);
}
.punto-urg.critica { background: var(--critico); }
.punto-urg.alta    { background: var(--alto); }
.punto-urg.media   { background: var(--medio); }
.punto-urg.hecho   { background: var(--hecho); }

.fila h3 {
  flex: 1; min-width: 0; font-size: 15.5px; font-weight: 750; letter-spacing: -.015em;
  line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hora {
  flex: 0 0 auto; font-family: var(--f-num); font-size: 11.5px;
  color: var(--tinta-3); padding-top: 3px;
}
.hora.viejo { color: var(--alto); font-weight: 700; }
.fila .lugar {
  margin-top: 3px; margin-left: 19px; font-size: 13px; color: var(--tinta-2);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fila .necesita {
  margin-top: 8px; margin-left: 19px; font-size: 13px; color: var(--tinta-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fila .necesita b { color: var(--tinta); font-weight: 700; }

/* ---------------------------------------------------------- etiquetas --- */

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; margin-left: 19px; }
.etiquetas:empty { display: none; }

.eti {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 7px;
  font-size: 11.5px; font-weight: 750; letter-spacing: .01em;
  border: 1.5px solid transparent; white-space: nowrap;
}
.eti.critica    { background: var(--critico); color: #fff; }
.eti.alta       { background: var(--alto-luz); color: var(--alto); border-color: color-mix(in srgb, var(--alto) 40%, transparent); }
.eti.faltan     { background: var(--critico-luz); color: var(--critico); border-color: color-mix(in srgb, var(--critico) 45%, transparent); }
.eti.saturado   { background: var(--frio); color: #fff; }
.eti.resuelto   { background: var(--hecho); color: #fff; }
.eti.fijado     { background: var(--tinta); color: var(--carta); }
.eti.verificado { background: var(--hecho-luz); color: var(--hecho); border-color: color-mix(in srgb, var(--hecho) 40%, transparent); }
.eti.sinubicar  { background: var(--carta-2); color: var(--tinta-2); border-color: var(--linea-2); }
.eti.viejo      { background: var(--medio-luz); color: var(--medio); border-color: color-mix(in srgb, var(--medio) 40%, transparent); }
.eti.suave      { background: var(--carta-2); color: var(--tinta-2); border-color: var(--linea); font-weight: 650; }
.eti.protegido  { background: var(--tinta); color: var(--carta); }
/* Deliberadamente discreta: "sin verificar" es el estado normal de casi todo
   el mapa, no una advertencia. Si gritara, la gente dejaría de creerle a todo. */
.eti.sinverificar {
  background: transparent; color: var(--tinta-3); border-color: var(--linea-2);
  font-weight: 600;
}

/* ------------------------------------------------------------- vacío ---- */

.vacio { padding: 40px 22px; text-align: center; color: var(--tinta-3); }
.vacio svg { width: 38px; height: 38px; margin: 0 auto 12px; opacity: .45; }
.vacio p { font-size: 14px; }
.vacio strong { display: block; color: var(--tinta-2); font-size: 15.5px; margin-bottom: 6px; }

/* ------------------------------------------------------------- ficha ---- */

/* La ficha NO se superpone: sustituye al contenido del panel. Superponerla
   con position:absolute dejaba una franja del listado asomando por debajo,
   y cualquier desajuste de un píxel se veía como una tarjeta cortada. */
#panel.con-ficha > .panel-cabeza,
#panel.con-ficha > #panel-contenido { display: none; }

#ficha {
  flex: 1; min-height: 0; min-width: 0;
  display: flex; flex-direction: column; background: var(--carta);
}

.ficha-cab {
  display: flex; align-items: flex-start; gap: 8px; flex: 0 0 auto;
  padding: 10px 12px; border-bottom: 1px solid var(--linea);
}
.ficha-cab h2 {
  flex: 1; min-width: 0; padding-top: 8px;
  font-size: 18.5px; font-weight: 800; letter-spacing: -.025em;
  line-height: 1.25; overflow-wrap: anywhere;
}

.ficha-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.bloque { padding: 14px; border-bottom: 1px solid var(--linea); }
.bloque h3 {
  font-size: 12.5px; font-weight: 750; color: var(--tinta-3);
  margin-bottom: 10px; letter-spacing: .01em;
}

.dato { font-size: 14.5px; margin-bottom: 4px; }
.dato.tenue { color: var(--tinta-2); font-size: 13.5px; }

.pasos { display: flex; align-items: center; gap: 8px; }
.pasos button {
  width: 46px; height: 46px; border: 1.5px solid var(--linea-2);
  border-radius: var(--r1); background: var(--carta);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
}
.pasos button:hover { border-color: var(--tinta); background: var(--carta-2); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-nec {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 9px 13px;
  border: 1.5px solid var(--linea-2); border-radius: var(--r1);
  background: var(--carta); font-size: 14px; font-weight: 650;
}
.chip-nec.cubierta { text-decoration: line-through; opacity: .5; }
.chip-nec .marca-x { color: var(--tinta-3); font-size: 12px; }
.chip-nec[aria-pressed='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--carta); }

.sub-titulo {
  margin: 14px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--tinta-3);
}

/* ---------------------------------------------------------- veredicto --- */
/* Lo primero de la ficha: si vas o no vas, en una frase. */

.veredicto { padding: 16px 15px 15px; border-bottom: 1px solid var(--linea); }
.v-titulo {
  font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2;
  display: flex; align-items: center; gap: 9px;
}
.v-titulo::before {
  content: ''; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  background: currentColor;
}
.v-detalle { margin-top: 6px; font-size: 14.5px; color: var(--tinta-2); line-height: 1.4; }
.v-sello {
  margin-top: 11px; font-family: var(--f-num); font-size: 11.5px;
  color: var(--tinta-3); letter-spacing: -.01em;
}
.v-sello.rancio { color: var(--alto); font-weight: 700; }
/* Verificado y confirmado no son lo mismo; la ficha lo dice con todas las
   letras porque confundirlos manda gente a sitios equivocados. */
.v-verif {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r1);
  font-size: 12.5px; line-height: 1.4;
}
.v-verif.si { background: var(--hecho-luz); color: var(--hecho); }
.v-verif.no { background: color-mix(in srgb, var(--tinta) 7%, transparent); color: var(--tinta-2); }
.v-verif b { font-weight: 700; }

.v-candado {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r1);
  background: color-mix(in srgb, var(--tinta) 7%, transparent);
  font-size: 12.5px; color: var(--tinta-2); line-height: 1.4;
}

/* ------------------------------------------------------ coordinación ---- */

.bloque-coord { background: var(--carta-2); }
.palancas { display: grid; gap: 8px; }
.palanca {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  min-height: 52px; padding: 10px 12px; text-align: left;
  border: 1.5px solid var(--linea-2); border-radius: var(--r1); background: var(--carta);
}
.palanca:hover { border-color: var(--tinta-3); }
.palanca b { display: block; font-size: 14.5px; font-weight: 700; }
.palanca small { display: block; font-size: 12.5px; color: var(--tinta-3); line-height: 1.35; }
.palanca-marca {
  width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; border-radius: 6px;
  border: 2px solid var(--linea-2); display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #fff;
}
.palanca.activa { border-color: var(--hecho); background: var(--hecho-luz); }
.palanca.activa .palanca-marca { background: var(--hecho); border-color: var(--hecho); }

.lista-poderes { margin: 6px 0 12px 18px; }
.lista-poderes li { font-size: 12.5px; line-height: 1.5; color: var(--tinta-2); }
.lista-poderes li::marker { color: var(--tinta-3); }

.veredicto.v-critico { background: var(--critico-luz); }
.veredicto.v-critico .v-titulo { color: var(--critico); }
.veredicto.v-frio { background: var(--frio-luz); }
.veredicto.v-frio .v-titulo { color: var(--frio); }
.veredicto.v-hecho { background: var(--hecho-luz); }
.veredicto.v-hecho .v-titulo { color: var(--hecho); }
.veredicto.v-gris { background: var(--carta-2); }
.veredicto.v-gris .v-titulo { color: var(--tinta-3); }
.veredicto.v-neutro .v-titulo { color: var(--tinta); }

/* -------------------------------------------------------------- dónde --- */

.bloque-donde { display: grid; gap: 12px; }
.donde-1 { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.donde-2 { font-size: 14px; color: var(--tinta-2); margin-top: 2px; }
.donde-dist { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--frio); }
.donde-aviso { margin-top: 6px; font-size: 13px; color: var(--alto); font-weight: 650; }
.donde-acciones { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }

/* -------------------------------------------------------------- fotos --- */

.bloque-fotos { padding-right: 0; }
.tira-fotos {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; padding-right: 14px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tira-fotos::-webkit-scrollbar { display: none; }
.foto-celda {
  flex: 0 0 auto; width: 104px; height: 104px; border-radius: var(--r2);
  overflow: hidden; background: var(--carta-2); border: 1px solid var(--linea);
}
.foto-celda img { width: 100%; height: 100%; object-fit: cover; }
.foto-anadir {
  flex: 0 0 auto; width: 104px; height: 104px; border-radius: var(--r2);
  border: 2px dashed var(--linea-2); background: var(--carta-2);
  display: grid; place-items: center; gap: 5px; align-content: center;
  font-size: 12.5px; font-weight: 650; color: var(--tinta-2);
}
.foto-anadir svg { width: 22px; height: 22px; }
.foto-anadir:hover { border-color: var(--tinta-3); color: var(--tinta); }

/* -------------------------------------------------------------- gente --- */

/* Barra de ocupación: azul lo que hay, rojo rayado lo que falta. */
.medidor {
  display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--carta-2); border: 1px solid var(--linea);
}
.medidor i { display: block; height: 100%; }
.medidor .m-hay { background: var(--frio); }
.medidor .m-falta {
  background: repeating-linear-gradient(45deg,
    var(--critico) 0 6px, color-mix(in srgb, var(--critico) 62%, #fff) 6px 12px);
}
.medidor-leyenda {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 8px; font-size: 13.5px; color: var(--tinta-2);
}
.medidor-leyenda b { font-family: var(--f-num); font-size: 17px; font-weight: 800; }
.medidor-leyenda b.azul { color: var(--frio); }
.medidor-leyenda b.rojo { color: var(--critico); }
.medidor-leyenda .tenue { color: var(--tinta-3); }

.ajustes-gente { display: grid; gap: 8px; margin: 14px 0 10px; }

.ajuste {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 13px;
  border: 1.5px solid var(--linea); border-radius: var(--r1); background: var(--carta);
}
.ajuste-etiqueta { flex: 1; font-size: 14px; font-weight: 650; color: var(--tinta-2); }
.ajuste .pasos button {
  width: 44px; height: 44px; font-size: 20px;
  border: 1.5px solid var(--linea-2); border-radius: var(--r1); background: var(--carta);
}
.ajuste .pasos button:hover { border-color: var(--tinta); background: var(--carta-2); }
/* El número también es un botón: se toca y se escribe la cifra exacta. */
.ajuste-num {
  min-width: 56px; height: 44px; padding: 0 8px;
  font-size: 19px; font-weight: 800; text-align: center;
  border: 1.5px dashed var(--linea-2) !important; border-radius: var(--r1);
  background: var(--carta-2) !important; color: var(--tinta);
}
.ajuste-num:hover { border-color: var(--tinta) !important; }

/* "Llegué" en vez de "+1": la persona informa de sí misma, no cuenta a otros. */
.btn-presencia {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  width: 100%; min-height: 62px; padding: 10px 14px; margin-bottom: 10px;
  border: 2px solid var(--frio); border-radius: var(--r2);
  background: var(--frio-luz); color: var(--frio); text-align: left;
}
.btn-presencia b { font-size: 15.5px; font-weight: 800; }
.btn-presencia small { font-size: 12px; opacity: .8; }
.btn-presencia:hover { background: color-mix(in srgb, var(--frio) 14%, transparent); }
.btn-presencia.activo {
  background: var(--frio); color: #fff; border-color: var(--frio);
}

/* --------------------------------------------- elegir sitio en el mapa --- */

.barra-mira {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  padding: 14px 14px calc(14px + var(--sa-b));
  background: var(--carta); border-top: 1px solid var(--linea);
  box-shadow: var(--s3);
  display: grid; gap: 10px;
}
.mira-pista { font-size: 13.5px; color: var(--tinta-2); line-height: 1.4; }
.mira-pista b { display: block; margin-top: 4px; font-size: 12.5px; color: var(--tinta-3); }
.mira-botones { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
@media (min-width: 861px) {
  .barra-mira {
    left: 50%; right: auto; bottom: 22px; transform: translateX(-50%);
    width: min(520px, 92vw); border-radius: var(--r3); border: 1px solid var(--linea);
    box-shadow: var(--s2);
  }
}

/* --------------------------------------------------------- qué falta ---- */

.verificas { display: grid; gap: 6px; margin-bottom: 12px; }
.verifica {
  display: flex; align-items: center; gap: 11px; width: 100%;
  min-height: 46px; padding: 8px 12px;
  border: 1.5px solid var(--linea); border-radius: var(--r1);
  background: var(--carta); font-size: 14.5px; font-weight: 600; text-align: left;
}
.verifica:hover { border-color: var(--linea-2); background: var(--carta-2); }
.verifica .casilla {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px;
  border: 2px solid var(--linea-2); display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #fff;
}
.verifica-texto { min-width: 0; overflow-wrap: anywhere; }
.verifica.listo { opacity: .55; }
.verifica.listo .verifica-texto { text-decoration: line-through; }
.verifica.listo .casilla { background: var(--hecho); border-color: var(--hecho); }

/* ------------------------------------------------------------- hilo ----- */

.hilo { position: relative; padding-left: 6px; }
.hilo-fila { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.hilo-fila:last-child { padding-bottom: 0; }
/* El carril vertical que une los puntos del hilo. */
.hilo-fila:not(:last-child)::before {
  content: ''; position: absolute; left: 4px; top: 15px; bottom: 0;
  width: 2px; background: var(--linea);
}
.hilo-punto {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; margin-top: 5px;
  background: var(--tinta-3); z-index: 1;
}
.hilo-punto.c-critico { background: var(--critico); }
.hilo-punto.c-alto { background: var(--alto); }
.hilo-punto.c-hecho { background: var(--hecho); }
.hilo-punto.c-frio { background: var(--frio); }
.hilo-texto { min-width: 0; }
.hilo-texto p { font-size: 14px; color: var(--tinta); line-height: 1.35; }
.hilo-texto time {
  display: block; margin-top: 2px; font-family: var(--f-num);
  font-size: 11.5px; color: var(--tinta-3);
}

/* --------------------------------------------- foto de desaparecidos ---- */

.fila-desaparecido { display: flex; gap: 12px; align-items: flex-start; }
.retrato {
  width: 72px; height: 88px; flex: 0 0 auto; border-radius: var(--r1);
  object-fit: cover; background: var(--carta-2); border: 1px solid var(--linea);
}
.retrato-vacio {
  width: 72px; height: 88px; flex: 0 0 auto; border-radius: var(--r1);
  border: 2px dashed var(--linea-2); background: var(--carta-2);
  display: grid; place-items: center; gap: 3px; align-content: center;
  font-size: 10.5px; font-weight: 650; color: var(--tinta-3); text-align: center;
  padding: 4px; line-height: 1.2;
}
.retrato-vacio svg { width: 18px; height: 18px; }
.desaparecido-datos { flex: 1; min-width: 0; }

.previa-foto {
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
}
.previa-foto img {
  width: 64px; height: 78px; object-fit: cover; border-radius: var(--r1);
  border: 1px solid var(--linea);
}

/* Rejilla de acciones secundarias, dentro del cuerpo desplazable. */
.acciones-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acciones-ficha .col2 { grid-column: 1 / -1; }

/* Al pie sólo va la acción que más se usa: confirmar que el punto sigue vivo. */
.barra-acciones {
  flex: 0 0 auto; padding: 12px;
  border-top: 1px solid var(--linea); background: var(--carta-2);
}

/* ============================================================= MODAL ==== */

.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(12, 15, 20, .55);
  backdrop-filter: blur(2px);
  animation: aparecer .16s ease-out;
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.hoja {
  width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto;
  background: var(--fondo); border-radius: var(--r3) var(--r3) 0 0;
  box-shadow: var(--s2); padding-bottom: var(--sa-b);
  animation: subir .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes subir { from { transform: translateY(24px); } to { transform: none; } }

@media (min-width: 700px) {
  .modal { align-items: center; }
  .hoja { border-radius: var(--r3); max-height: 88dvh; }
  @keyframes subir { from { transform: scale(.97); } to { transform: none; } }
}

.hoja-cab {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 15px; border-bottom: 1px solid var(--linea); background: var(--fondo);
}
.hoja-cab h2 { flex: 1; font-size: 19px; font-weight: 800; letter-spacing: -.025em; }
.hoja-cuerpo { padding: 15px; }
.hoja-pie {
  position: sticky; bottom: 0; display: flex; gap: 8px;
  padding: 12px 15px calc(12px + var(--sa-b));
  border-top: 1px solid var(--linea); background: var(--fondo);
}
.hoja-pie .btn { flex: 1; }
.hoja-pie .btn.primario { flex: 1.6; }

/* -------------------------------------------------------- formularios --- */

.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.campo .pista { font-weight: 400; color: var(--tinta-3); font-size: 12.5px; }

input[type='text'], input[type='search'], input[type='tel'], input[type='number'],
input[type='password'], input[type='url'], select, textarea {
  width: 100%; min-height: 50px; padding: 13px 13px;
  border: 1.5px solid var(--linea-2); border-radius: var(--r1);
  background: var(--carta); color: var(--tinta); font-size: 16px;
}
textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--tinta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tinta) 12%, transparent);
}

.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(102px, 1fr)); gap: 8px; }
.opcion {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; min-height: 78px;
  border: 1.5px solid var(--linea-2); border-radius: var(--r2);
  background: var(--carta); font-size: 13px; font-weight: 650; text-align: center;
}
.opcion svg { width: 22px; height: 22px; color: var(--tinta-2); }
.opcion b { font-size: 14px; font-weight: 750; }
.opcion small { font-size: 11.5px; font-weight: 500; color: var(--tinta-3); line-height: 1.3; }
.opcion[aria-pressed='true'] { border-color: var(--tinta); border-width: 2.5px; background: var(--carta-2); }
.opcion[aria-pressed='true'] svg { color: var(--tinta); }
.opcion[aria-pressed='true'] small { color: inherit; opacity: .85; }

.opcion.urg-critica[aria-pressed='true'] { border-color: var(--critico); background: var(--critico-luz); color: var(--critico); }
.opcion.urg-alta[aria-pressed='true']    { border-color: var(--alto);    background: var(--alto-luz);    color: var(--alto); }
.opcion.urg-media[aria-pressed='true']   { border-color: var(--medio);   background: var(--medio-luz);   color: var(--medio); }
.opcion.urg-info[aria-pressed='true']    { border-color: var(--tinta-3); background: var(--carta-2); }

.pasos-guia { display: flex; gap: 6px; margin-bottom: 16px; }
.pasos-guia i { flex: 1; height: 5px; border-radius: 3px; background: var(--linea); }
.pasos-guia i.on { background: var(--critico); }

.nota {
  padding: 11px 13px; border-radius: var(--r1);
  background: var(--carta-2); border-left: 3px solid var(--medio);
  font-size: 13px; color: var(--tinta-2); margin-bottom: 14px;
}
.nota.grave { border-left-color: var(--critico); background: var(--critico-luz); }
/* Letra pequeña de verdad: lo legal que hay que decir pero que no debe
   competir con lo que la persona vino a hacer. */
.nota.tenue { font-size: 11.5px; color: var(--tinta-3); }
.nota.buena { border-left-color: var(--hecho); background: var(--hecho-luz); }
.nota b { color: var(--tinta); }

.candidato {
  display: block; width: 100%; text-align: left; padding: 13px;
  border: 1.5px solid var(--linea-2); border-radius: var(--r2);
  background: var(--carta); margin-bottom: 8px; text-decoration: none; color: var(--tinta);
}
.candidato:hover { border-color: var(--tinta); background: var(--carta-2); }
.candidato b { display: block; font-size: 15px; font-weight: 750; margin-bottom: 3px; }
.candidato span { font-size: 13px; color: var(--tinta-2); }
.candidato .razon { display: block; margin-top: 6px; font-size: 12.5px; color: var(--tinta-3); }
/* La ciudad que la persona ya eligió: va primera y se reconoce de un vistazo,
   para no tener que leer trece nombres cada vez que abre los avisos. */
.candidato-tuyo { border-color: var(--tinta); background: var(--carta-2); }

a.btn, a.eti { text-decoration: none; color: var(--tinta); }
a.eti.suave { color: var(--tinta-2); }

/* ------------------------------------------------------------ brindis --- */

#brindis {
  position: fixed; left: 50%; bottom: calc(24px + var(--sa-b));
  transform: translateX(-50%); z-index: 300;
  max-width: min(92vw, 460px); padding: 13px 19px;
  border-radius: var(--r2); background: var(--tinta); color: var(--fondo);
  font-size: 14px; font-weight: 650; box-shadow: var(--s2);
  animation: subir .18s ease-out;
}
#brindis.error { background: var(--critico); color: #fff; }
#brindis.bien  { background: var(--hecho); color: #fff; }

/* ============================================ CELULAR (≤ 860 px) ======== */

@media (max-width: 860px) {
  #capa {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: calc(10px + var(--sa-t)) calc(10px + var(--sa-r)) 0 calc(10px + var(--sa-l));
    gap: 8px;
  }

  .marca-flotante { grid-column: 1 / -1; grid-row: 1; flex-wrap: nowrap; }
  .marca { padding: 7px 13px 7px 10px; min-height: 44px; }
  .marca-texto b { font-size: 14.5px; }
  .marca-texto small { display: none; }   /* el subtítulo estorba en celular */
  .vivo { min-height: 44px; padding: 0 12px; font-size: 12.5px; }

  .acciones-mapa { grid-column: 2; grid-row: 2; align-items: flex-end; }
  /* En pantalla pequeña las pastillas se encogen a icono + palabra corta,
     pero NUNCA pierden la palabra. */
  .pastilla { min-height: 44px; padding: 0 13px; font-size: 13px; gap: 6px; }
  .pastilla svg { width: 17px; height: 17px; }
  .plegar-escritorio { display: none; }

  .cinta { margin-top: 48px; font-size: 12.5px; padding: 8px 14px; }

  /* Hoja inferior. Arranca PLEGADA: lo que manda es el mapa. */
  #panel {
    grid-column: 1 / -1; grid-row: 3;
    width: auto; max-width: none; justify-self: stretch;
    margin: 0 calc(-10px - var(--sa-l)) 0 calc(-10px - var(--sa-r));
    height: var(--panel-h, 218px);
    border-radius: var(--r3) var(--r3) 0 0;
    box-shadow: var(--s3);
    transition: height .26s cubic-bezier(.2, .8, .3, 1);
  }
  #panel.oculto { transform: none; opacity: 1; }

  /* 44 px de alto aunque la barrita sea fina: es el objetivo tactil que se
     arrastra para subir y bajar la hoja. */
  #tirador {
    display: block; width: 100%; min-height: 44px; padding: 14px 0 8px;
    text-align: center; flex: 0 0 auto; touch-action: none;
  }
  #tirador i {
    display: inline-block; width: 44px; height: 5px; border-radius: 3px;
    background: var(--linea-2);
  }

  .panel-cabeza { padding: 2px 12px 12px; gap: 10px; }
  .resumen { gap: 6px; }
  .dato-resumen { padding: 7px 6px; }
  .dato-resumen b { font-size: 19px; }
  .dato-resumen span { font-size: 11px; }
  .btn.grande { min-height: 52px; font-size: 16px; }

  #lista { padding: 8px 10px calc(12px + var(--sa-b)); }
  /* El aviso se coloca por encima de la hoja: si no, tapa justo el botón
     principal, que es lo último que uno quiere esconder. */
  /* Por encima de las pastillas del mapa, no encima de ellas.
     En celular las acciones del mapa («Ir a una ciudad», «Mi ubicación») se
     apilan justo sobre el panel; el aviso caía en el mismo sitio y las tapaba,
     dejándolas intocables durante los ~4 segundos que dura. La altura de esa
     columna es fija: dos pastillas de 44 px más el hueco. Si alguna vez se
     añade una tercera, hay que subir este número —y la prueba de tamaños lo
     avisa, porque comprueba que no se solapen. */
  #brindis {
    bottom: calc(var(--panel-h, 246px) + 14px + var(--sa-b) + 100px);
    max-width: min(92vw, 420px);
  }
  .barra-acciones { padding-bottom: calc(12px + var(--sa-b)); }
  .modal { align-items: flex-end; }
}

@media (max-width: 390px) {
  .marca-texto small { display: none; }
  .pastilla span { font-size: 12.5px; }
  .dato-resumen b { font-size: 17.5px; }
}

/* Pantallas muy estrechas (320 px: iPhone SE de primera generación).
   Ahí los tres botones de acción bajan a dos filas, y la altura plegada estaba
   calculada para una sola. Sin esto, "Coordinación" queda cortado por la mitad
   y la hoja parece rota. El min() evita que crezca también desplegada. */
@media (max-width: 359px) {
  #panel { height: min(calc(var(--panel-h, 218px) + 34px), 92dvh); }
  /* Aquí cada píxel cuenta: la invitación se queda con el @ y los botones,
     sin la frase explicativa. El canal se sigue entendiendo. */
  .invitacion { margin-top: 48px; padding: 8px 10px; }
  .invitacion-texto > :not(b) { display: none; }
  .invitacion-botones .btn { min-height: 38px; font-size: 12.5px; }
  /* El panel mide 46 px más aquí, así que el aviso tiene que subir otro tanto
     o vuelve a caer encima de las pastillas del mapa. */
  #brindis { bottom: calc(var(--panel-h, 246px) + 14px + var(--sa-b) + 146px); }
}

/* Pantallas muy bajas (celular apaisado): el panel no debe comerse el mapa */
@media (max-height: 480px) and (max-width: 860px) {
  #panel { height: min(var(--panel-h, 218px), 80dvh); }
  .resumen { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================== ESCRITORIO ANCHO ======== */

@media (min-width: 1500px) { :root { --panel-w: 430px; } }

/* ========================================== página de compartir ========= */

body.pagina-compartir {
  overflow: auto; display: grid; place-items: center; min-height: 100vh; padding: 24px;
  background: var(--fondo);
}
.pagina-compartir main {
  max-width: 460px; text-align: center; background: var(--carta);
  padding: 32px 26px; border-radius: var(--r3); box-shadow: var(--s2);
}
.pagina-compartir h1 { font-size: 25px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 6px; }
.pagina-compartir .tipo { color: var(--tinta-3); font-size: 14px; margin-bottom: 12px; }
.pagina-compartir .dir { color: var(--tinta-2); font-size: 15px; }
.pagina-compartir .nec { margin-top: 12px; font-size: 15px; }
.pagina-compartir .boton {
  display: inline-block; margin-top: 22px; padding: 15px 28px;
  background: var(--critico); color: #fff; border-radius: var(--r1);
  font-weight: 750; text-decoration: none;
}
.etiqueta-urgencia { font-size: 12px; font-weight: 800; letter-spacing: .08em; margin-bottom: 8px; }
.etiqueta-urgencia.u-critica { color: var(--critico); }
.etiqueta-urgencia.u-alta { color: var(--alto); }

/* ------------------------------------------------------------ imprimir -- */

@media print {
  #mapa, .acciones-mapa, .marca-flotante, .barra-acciones, #mira, #tirador { display: none !important; }
  body, #panel { overflow: visible; height: auto; }
  #capa { position: static; display: block; padding: 0; }
  #panel { width: auto; box-shadow: none; }
}

/* Firma de coordinación en la bitácora. Discreta pero legible: no es una
   alarma, es el rastro que permite pedir cuentas si algo se hizo mal. */
.hilo-firma {
  display: block; margin-top: 2px;
  font: 650 11.5px/1.3 var(--f); color: var(--frio);
}

/* Qué está cerrado con llave, dicho antes de que alguien lo intente. */
.bloque-cerrado {
  border: 1px dashed var(--linea-2);
  background: color-mix(in srgb, var(--tinta) 4%, transparent);
}
.bloque-cerrado h3 { color: var(--tinta-2); }
.bloque-cerrado .lista-poderes { margin: 6px 0 8px; }

/* Lista de poderes de la clave: el verbo en negrita, el detalle detrás. */
.titulo-poderes { display: block; margin-bottom: 6px; font-size: 14px; }
.lista-poderes li b { color: var(--tinta); }
.aviso-clave {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r1);
  background: var(--alto-luz); color: var(--tinta-2);
  font-size: 12.5px; line-height: 1.45;
}
.aviso-clave b { color: var(--alto); }

/* Los pasos van numerados a propósito: son instrucciones para seguir en
   orden, no una lista de cosas sueltas, y el número le dice a la persona
   cuántas le quedan. La cifra se saca del <li> para que el texto de dos o
   tres renglones quede alineado y no en escalera. */
.pasos-clave { counter-reset: paso; margin: 8px 0 0; padding: 0; list-style: none; }
.pasos-clave li {
  counter-increment: paso;
  position: relative; padding-left: 27px; margin-bottom: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--tinta-2);
}
.pasos-clave li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--tinta); color: var(--fondo);
  font-size: 11px; font-weight: 750; line-height: 19px; text-align: center;
}
.pasos-clave li b { color: var(--tinta); }
.pasos-clave li:last-child { margin-bottom: 0; }

/* ============================================== avisos legales =========== */

/* Pie legal del panel. Una línea, discreta, pero con área de toque completa:
   un enlace legal que no se puede pulsar con el pulgar no está disponible. */
.pie-legal {
  display: block; width: 100%; margin-top: 6px; padding: 7px 4px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--tinta-3);
  text-align: center; text-decoration: underline;
  text-underline-offset: 2px;
}
.pie-legal:hover { color: var(--tinta-2); }

/* Casilla de tratamiento de datos. Pequeña, pero con toda la fila como zona
   de toque: es una casilla de 16 px y el dedo no acierta una casilla de 16 px.
   Cuando falta, se enciende en vez de dejar a la persona adivinando. */
.casilla-datos {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; margin: 2px 0 4px; padding: 4px 8px;
  border: 1px solid transparent; border-radius: var(--r1);
  cursor: pointer;
}
.casilla-datos input { width: 18px; height: 18px; flex: none; accent-color: var(--alto); }
.casilla-datos span { font-size: 11.5px; line-height: 1.4; color: var(--tinta-3); }
.casilla-datos b { color: var(--tinta-2); font-weight: 650; }
.casilla-datos.falta {
  border-color: var(--critico);
  background: color-mix(in srgb, var(--critico) 7%, transparent);
}
.casilla-datos.falta span { color: var(--tinta-2); }

/* En 320 px el pie legal se aprieta hasta lo mínimo legible: cada píxel que le
   quite al panel es mapa que gana quien mira. Sigue entero y sigue teniendo
   toda la fila como zona de toque, sólo pierde el aire de alrededor.
   Va al final del archivo a propósito: la regla base está aquí abajo y una
   media query escrita más arriba no la pisaría. */
@media (max-width: 359px) {
  .pie-legal { margin-top: 0; padding: 2px; font-size: 10.5px; }
}