/* Estilos de la ficha de un activo.
   Hoja aparte de styles.css a propósito: la ficha NO es la app. La app es un
   mapa a pantalla completa con un panel encima; la ficha es un documento que se
   scrollea, porque a ella se llega en frío desde un buscador o un enlace
   compartido, sin haber visto el mapa nunca. Forzarla dentro del bottom-sheet
   arruinaría las dos. */

:root {
  --bg: #0c0f12; --panel: #14181d; --panel-2: #1b2129; --line: #262d36;
  --ink: #e8ecf1; --ink-2: #8b96a3; --ink-3: #56606c;
  --critica: #ff4d4d; --alta: #ff9f43; --media: #ffd166; --baja: #6c8ea4; --acento: #35d0a5;
  color-scheme: dark;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif; font-size: 15px; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
a { color: inherit; }

/* --- Cabecera ---
   Ya no hay ninguna acá: la barra de todas las páginas vive en `barra.css`.
   Lo que había —`.fh`, con un "‹ Atlas" (`.volver`) y un botón— se borró el día
   que la última de las diez páginas la adoptó. Reglas que ya no aplican a nada
   son peores que reglas de más: la próxima persona que lea esta hoja no tiene
   forma de saber que están muertas. Los botones siguen abajo, en
   `.acciones-pagina`, que es donde viven las acciones ahora. */

/* `text-decoration: none` porque Registro y Matriz son enlaces con esta misma
   clase, y un botón subrayado se lee como un enlace mal vestido. */
.compartir {
  background: transparent; color: var(--acento); border: 1px solid var(--acento);
  border-radius: 6px; padding: 8px 16px; font: 600 13px "Archivo", sans-serif; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center;
}
.compartir:hover { background: rgba(53, 208, 165, 0.12); }
/* Las acciones DE LA PÁGINA, debajo de su identidad. Estaban arriba, en el
   encabezado, cuando el encabezado era de esta página y de nada más; ahora ese
   lugar es del sitio, y "Seguir" o "Feed" mezclados con "Explorar" y "Entrar"
   harían indistinguible lo que es del documento de lo que es de Atlas.

   El filete de arriba es lo único que las separa del título: son sobre ÉL, así
   que se leen como parte del mismo bloque y no como una barra de herramientas
   aparte. En la ficha de un activo, además, quedan igual de fijas que antes —
   caen dentro de la lateral, que es lo único de esa página que no scrollea. */
.acciones-pagina {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.seguir {
  background: var(--acento); color: #0c0f12; border: 1px solid var(--acento);
  border-radius: 6px; padding: 8px 16px; font: 700 13px "Archivo", sans-serif; cursor: pointer;
}
/* Ya siguiéndolo, el botón deja de ser una llamada a la acción y pasa a ser un
   estado: mismo lugar, mucho menos peso visual. */
.seguir.siguiendo { background: transparent; color: var(--ink-2); border-color: var(--line); font-weight: 500; }
.seguir.siguiendo:hover { border-color: var(--alta); color: var(--alta); }
.seguir:disabled { opacity: .6; cursor: default; }

/* --- Cuerpo --- */
.ficha { max-width: 720px; margin: 0 auto; padding: 22px 18px 40px; }

/* --- Lateral fija y contenido corriente ----------------------------------
   Solo esta página. Las otras seis que usan `.ficha` —fuentes, rankings, país—
   son documentos de lectura corrida y una columna angosta es lo correcto ahí.

   Acá no: la ficha de un activo son diecisiete tarjetas y en una sola columna
   medía 5.125 px —5,7 pantallas— usando el 48% del ancho de un monitor de 1512.
   Peor que el scroll era la mezcla: los avisos de SENAPRED aparecían en la
   posición 1 y otra vez en la 11, con 2.900 px entremedio, y el clima quedaba
   partido en tres pedazos con riesgo y avisos intercalados.

   El reparto no es por tamaño sino por FUNCIÓN. A la izquierda lo que se
   consulta mientras se lee lo demás —qué activo es, si hay alerta encima, qué
   avisos siguen vigentes, qué riesgos están encendidos—: es el marco, y un
   marco que se va con el scroll deja de serlo. A la derecha lo que se recorre.

   Antes de esto, a dos pantallas de scroll se leía "la plataforma elevadora
   está en baja" sin tener a la vista de qué activo se hablaba ni que había una
   Alerta Amarilla sobre la comuna. Eso es lo que arregla la lateral.

   Se probó antes un mosaico de tarjetas de anchos distintos y se descartó: con
   tarjetas de una, dos y tres columnas mezcladas, la página se leía desordenada
   —que es lo contrario de lo que se venía a arreglar—. La corriente es UNA
   columna: predecible, y con 880 px un gráfico o un mapa por fin caben. */
.ficha-activo { max-width: 1320px; }
.ficha-cols {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* `sticky` y no `fixed`: fixed la saca del flujo y habría que reservarle el
   hueco a mano. Los 65 px son los 55 de la barra —54 más su filete, y también
   es sticky— más aire. El `max-height` con su propio scroll es la parte que no
   se puede olvidar: con muchos riesgos encendidos la lateral es más alta que la
   ventana, y sin esto su parte de abajo queda inalcanzable para siempre. */
.lateral {
  position: sticky; top: 65px;
  max-height: calc(100vh - 80px);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.lateral:hover { scrollbar-color: var(--ink-3) transparent; }
.lateral::-webkit-scrollbar { width: 5px; }
.lateral::-webkit-scrollbar-track { background: transparent; }
.lateral::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.lateral > .bloque, .lateral > .estado, .lateral > .aviso-banda { margin-bottom: 12px; }
.lateral > :last-child { margin-bottom: 0; }

.familia { margin-bottom: 22px; }
.corriente > .familia:first-child { margin-top: 0; }
/* El rótulo de familia: separador a ancho completo. No es decorativo — es lo
   que convierte una pila de tarjetas en algo recorrible. */
.fam {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.fam-grupo { display: flex; flex-direction: column; gap: 12px; }
/* Dentro de la lateral, las tarjetas de UNA cifra van de a dos por fila. No es
   por estética: la lateral tiene un alto máximo —el de la ventana— y cada píxel
   que se ahorra es un píxel que no hay que scrollear dentro de algo que se
   llama fijo. La calidad del aire y los focos de calor son un número y su
   rótulo; a media lateral siguen leyéndose enteros. */
.lateral .fam-grupo { flex-direction: row; flex-wrap: wrap; }
.lateral .fam-grupo > * { flex: 1 1 100%; min-width: 0; }
.lateral .fam-grupo > .angosto { flex: 1 1 calc(50% - 6px); }
.fam-grupo > .bloque, .fam-grupo > .titular { margin-bottom: 0; }

/* Teléfono y tablet angosta: una sola columna y nada fijo. La lateral pasa a
   ser la primera pantalla —identidad, alerta y riesgos, que es lo que hay que
   ver primero— y detrás baja todo lo demás, como esta ficha funcionó siempre. */
@media (max-width: 900px) {
  .ficha-activo { max-width: 720px; }
  .ficha-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lateral {
    position: static; max-height: none; overflow: visible;
    margin-bottom: 22px;
  }
}

/* Quién opera el activo, entre el nombre y la coordenada. En versalitas y
   tenue: identifica sin competir con el nombre, que es de lo que trata la
   página. En texto y no como logo — esta ficha también dice "1° en exposición
   sísmica", y una marca ahí arriba se leería como que la empresa la firma. */
.operador {
  margin-top: 4px; font: 700 10.5px "Archivo", sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
}

/* El estado son DOS hechos, no un veredicto: el clima es un estado y el sismo un
   instante. El borde izquierdo toma el color del peor de los dos. */
.estado {
  display: flex; flex-direction: column; gap: 11px; margin: 18px 0;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--acento);
  border-radius: 10px; padding: 14px 15px;
}
.estado.critica { border-left-color: var(--critica); }
.estado.alta { border-left-color: var(--alta); }
.estado.media { border-left-color: var(--media); }
.estado.baja { border-left-color: var(--baja); }
.est-fila { display: flex; align-items: flex-start; gap: 10px; }
.est-fila > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.est-ico { flex: none; width: 17px; height: 17px; color: var(--ink-3); margin-top: 1px; }
.est-ico svg { width: 17px; height: 17px; display: block; }
.estado b { font-size: 15px; }
.estado em { font-style: normal; font-size: 12px; color: var(--ink-2); margin-top: 2px; }

/* El titular: el dato que vale un día tranquilo y el que se comparte. */
.titular {
  background: var(--panel); border: 1px solid var(--acento); border-radius: 10px;
  padding: 18px; margin-bottom: 14px;
}
.titular .grande { font-size: 44px; font-weight: 700; line-height: 1; color: var(--acento); letter-spacing: -.02em; }
.titular .grande span { font-size: 17px; color: var(--ink-2); font-weight: 500; }
.titular p { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.titular b { color: var(--ink); }

.bloque {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; margin-bottom: 12px;
}
.selector-lista-pagina { display:flex; align-items:center; gap:8px; margin-top:14px;
  font:500 11px "IBM Plex Mono", monospace; color:var(--ink-2); }
.selector-lista-pagina select { min-width:0; flex:1; background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line); border-radius:6px; padding:7px 8px; font:600 12px "Archivo", sans-serif; }
.selector-lista-pagina button { background:transparent; color:var(--acento); border:1px solid var(--acento);
  border-radius:6px; padding:7px 9px; font:600 12px "Archivo", sans-serif; cursor:pointer; }
/* Acá estaban `.listas-admin`, `.lista-admin-fila` y `.lista-nueva`: el bloque
   para administrar listas desde "Mi cuenta". Se fue con el bloque, el
   05-09-2026, cuando las listas pasaron a ser el primer nivel de la pestaña
   Seguimiento. Ojo si vuelve algo con ese nombre: `.lista-nueva` existe hoy en
   `styles.css` y es el botón de crear del panel del mapa — otra cosa, en otra
   hoja, con el mismo nombre. */
.bloque h2, .bloque h3 {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 600; margin-bottom: 13px;
}
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; }
.cifras b { font-size: 26px; font-weight: 700; display: flex; align-items: center; gap: 6px;
  line-height: 1.05; letter-spacing: -.02em; }
/* El icono ayuda a leer la cifra de un vistazo: cuatro números seguidos con
   etiquetas chicas obligan a leerlas todas para saber cuál es cuál. */
.cifras b svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.cifras span { font-size: 11px; color: var(--ink-2); display: block; margin-top: 3px; }

.spark { width: 100%; height: 54px; display: block; margin-top: 16px; }
.spark-ejes { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3); margin-top: 4px; }

/* --- La historia del activo: cinco fenómenos, cuatro ventanas ---------------
   Dos filas de controles y no una: el FENÓMENO y la VENTANA son dos preguntas
   distintas —qué miro y desde cuándo— y mezclarlas en una sola corrida de nueve
   píldoras obliga a leerlas todas para entender que son dos ejes. El fenómeno
   manda, así que va arriba y con su color; la ventana es el ajuste, y va abajo
   en tipografía más chica. */
.se-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.se-tab {
  display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line); color: var(--ink-2);
  font: 600 12.5px "Archivo", sans-serif; cursor: pointer; transition: color .12s, border-color .12s;
}
.se-tab i { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); flex: none; opacity: .55; transition: opacity .12s; }
.se-tab:hover { color: var(--ink); border-color: var(--ink-3); }
.se-tab.on { color: var(--ink); border-color: var(--ink-2); background: rgba(255,255,255,.05); }
.se-tab.on i { opacity: 1; }
.se-vent { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.se-v {
  padding: 4px 10px; border-radius: 6px; background: transparent; border: 1px solid transparent;
  color: var(--ink-3); font: 500 11.5px "IBM Plex Mono", monospace; cursor: pointer;
}
.se-v:hover { color: var(--ink-2); }
.se-v.on { color: var(--acento); border-color: var(--line); background: var(--panel-2); }
/* Qué se está mirando y el pico, en la misma línea: la pregunta a la izquierda
   y la respuesta corta a la derecha, para quien no va a leer el gráfico. */
.se-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; }
.se-que { font-size: 12px; color: var(--ink-2); }
.se-pico { font-size: 17px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.se-grafico { position: relative; height: 118px; margin-top: 8px; }
.se-vacio { font-size: 12px; color: var(--ink-3); padding-top: 46px; text-align: center; }

/* Barras: se leen contra el CERO —una cuenta y un acumulado tienen origen— y
   por eso se apoyan en la base. Crecen desde abajo al cambiar de pestaña, y
   escalonadas: el ojo sigue el orden del tiempo en vez de recibir el gráfico
   entero de golpe. */
.se-barras { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); }
.se-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
/* El puntero se lee sobre TODO el gráfico, no barra por barra: en el hueco
   entre dos barras también hay un período del que informar. */
.se-grafico { cursor: crosshair; touch-action: pan-y; }
.se-col i { display: block; width: 100%; border-radius: 2px 2px 0 0; animation: se-crece .42s cubic-bezier(.2,.7,.3,1) backwards; }
@keyframes se-crece { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.se-col i { transform-origin: bottom; }
/* Un período sin dato no es un cero, y tiene que VERSE distinto: una barra al
   ras se lee como "no llovió", y lo que pasa es que no lo medimos. El archivo
   ERA5 se carga hacia atrás contra una cuota, así que un activo dado de alta
   hace poco tiene años enteros sin serie — y eso hay que mostrarlo, no
   disimularlo con ceros. La trama diagonal es la convención de "sin dato". */
.se-col.sindato {
  position: relative;
  background: repeating-linear-gradient(45deg,
    rgba(139,150,163,.10) 0 2px, transparent 2px 5px);
  border-radius: 2px;
}
.se-col.sindato::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: var(--ink-3); opacity: .35;
}
/* Línea: una temperatura no se lee contra el cero, así que el eje va del mínimo
   al máximo de lo que se muestra y los dos extremos se rotulan. La línea se
   dibuja de izquierda a derecha, que es como se lee el tiempo. */
.se-linea svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.se-linea path { stroke-dasharray: 1000; animation: se-traza .55s ease-out backwards; }
@keyframes se-traza { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.se-linea .se-pts circle { animation: se-aparece .3s ease-out .35s backwards; }
@keyframes se-aparece { from { opacity: 0; } to { opacity: 1; } }
/* La tarjeta del período. Sale del puntero o del dedo, y no del `title` del
   navegador: en teléfono ese tooltip no existe, y es justo donde más falta
   hace saber de qué período es la barra que se está tocando. */
.se-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 3; pointer-events: none; white-space: nowrap;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.se-tip[hidden] { display: none; }
.se-tip-k { display: block; font: 500 10px "IBM Plex Mono", monospace; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .05em; }
.se-tip b { display: block; font-size: 14px; color: var(--ink); margin-top: 2px; }
.se-tip em { display: block; font-size: 11px; color: var(--ink-2); font-style: normal; margin-top: 2px; }
/* La guía marca el período exacto bajo el dedo. La tarjeta se corre en los
   bordes para no salirse de la ficha; la guía no, porque perdería su trabajo. */
.se-guia {
  position: absolute; top: 0; bottom: 0; width: 1px; z-index: 2; pointer-events: none;
  background: var(--ink-3); opacity: .45; transform: translateX(-.5px);
}
.se-guia[hidden] { display: none; }
.se-col.mira i { filter: brightness(1.25); }
.se-tope, .se-piso { position: absolute; right: 0; font-size: 10px; color: var(--ink-3); background: var(--panel); padding-left: 4px; }
.se-tope { top: -6px; } .se-piso { bottom: -6px; }
@media (prefers-reduced-motion: reduce) {
  .se-col i, .se-linea path, .se-linea .se-pts circle { animation: none; }
  .se-linea path { stroke-dasharray: none; }
}
/* Un rótulo por barra y no solo los extremos: en la ventana de un año o de
   diez, saber qué mes o qué año es cada barra es la mitad de la lectura. Las
   celdas van con el mismo `flex: 1` y el mismo gap que las barras, así el
   rótulo cae debajo de la suya; las que se saltan quedan vacías, no se
   colapsan. */
.se-eje { display: flex; gap: 2px; font-size: 9.5px; color: var(--ink-3); margin-top: 6px; }
/* `overflow: visible` a propósito: en la ventana de treinta días la celda mide
   diez píxeles y "05-08" no cabe. Como solo se rotula una de cada cinco, el
   texto se desborda sobre las cuatro celdas vacías vecinas, que es justo el
   espacio que hay. */
.se-eje span { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; }
/* La entradilla de un bloque: dice de qué es lo que viene abajo cuando el
   título no alcanza a decirlo solo. No es letra chica —va antes del dato, no
   después—, así que no usa el gris de `.pie`. */
.bl-lead { font-size: 12.5px; color: var(--ink-2); margin-top: -4px; margin-bottom: 12px; }
.bl-lead b { color: var(--ink); font-weight: 600; }

/* Lo grande es el CUÁNDO. Es lo que decide si esto es una noticia o un dato de
   archivo: "hace 2 h" y "hace 3 años" piden reacciones opuestas, y antes era lo
   más chico de la tarjeta mientras la distancia se llevaba los 26px. */
.sismo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sismo .cuando-grande { font-size: 26px; font-weight: 700; color: var(--media); letter-spacing: -.02em; }
.sismo .sismo-que { font: 400 13px "IBM Plex Mono", monospace; color: var(--ink-2); }

/* Los cinco fenómenos, con el vigente encendido y el resto apagado. Es lo que
   convierte "dentro de umbrales" en una lectura: se ve qué se vigila. */
.fenomenos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.fen {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 500 12px "Archivo", sans-serif; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-3);
}
.fen svg { width: 13px; height: 13px; }
.fen.on { color: var(--c); border-color: color-mix(in srgb, var(--c) 50%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent); }
.fen.off { opacity: .45; }

/* Minimapa de vecindad: contexto, no exploración. */
.minimapa { height: 190px; border-radius: 8px; margin-bottom: 12px; background: var(--bg);
  border: 1px solid var(--line); overflow: hidden; }
.minimapa .leaflet-control-zoom a {
  width: 24px; height: 24px; line-height: 24px; font-size: 14px;
  background: rgba(20,24,29,.94); color: var(--ink-2); border: none;
}
.minimapa .leaflet-control-zoom.leaflet-bar { border: 1px solid var(--line); }
.mm-yo { display: block; width: 14px; height: 14px; border-radius: 3px;
  transform: rotate(45deg); border: 2px solid var(--bg); }
/* El label ES el enlace: en un mapa chico, acertarle a un punto de 10 px con el
   dedo no funciona. */
.mm-vecino {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: rgba(12,15,18,.92); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 7px 2px 5px; font: 500 11px "Archivo", sans-serif;
  color: var(--ink); text-decoration: none;
}
.mm-vecino:hover { border-color: var(--acento); color: var(--acento); }
.mm-punto { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); flex: none; }
.mm-ir { color: var(--acento); font-size: 12px; }
.ref { font-size: 14px; margin-top: 6px; }
.detalle { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

.vecinos { list-style: none; }
.vecinos li { border-bottom: 1px solid var(--line); }
.vecinos li:last-child { border: 0; }
.vecinos a {
  display: flex; align-items: center; gap: 9px; padding: 11px 0;
  text-decoration: none; font-size: 14px;
}
.vecinos a:hover { color: var(--acento); }
.vecinos i { width: 9px; height: 9px; transform: rotate(45deg); flex: none; }
.vecinos span { margin-left: auto; color: var(--ink-2); font-size: 12px; }

.proc { list-style: none; }
.proc li { display: flex; gap: 9px; padding: 6px 0; font-size: 13px; color: var(--ink-2); }
.proc .si { color: var(--acento); }
.proc .no { color: var(--ink-3); }
.proc b { color: var(--ink); }

/* --- Avisos oficiales ---
   La banda va arriba del bloque de estado: no es una medición nuestra sino una
   autoridad diciendo que acá pasa algo. Se colorea con el color que el propio
   organismo le da al nivel (roja, amarilla, verde), no con nuestra escala de
   severidad — usar la nuestra encima de una figura administrativa ajena sería
   reinterpretar algo que no nos toca reinterpretar. */
.aviso-banda {
  display: flex; align-items: center; gap: 11px; margin-top: 16px;
  padding: 12px 13px; border-radius: 10px; text-decoration: none; color: inherit;
  background: color-mix(in srgb, var(--nv) 11%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--nv) 45%, transparent);
  border-left: 3px solid var(--nv);
}
.aviso-banda:hover { background: color-mix(in srgb, var(--nv) 18%, var(--panel)); }
.aviso-banda.roja { --nv: var(--critica); }
.aviso-banda.amarilla { --nv: var(--media); }
.aviso-banda.preventiva { --nv: var(--acento); }
.av-ico { flex: none; width: 19px; height: 19px; color: var(--nv); }
.av-ico svg { width: 19px; height: 19px; display: block; }
.av-txt { display: flex; flex-direction: column; min-width: 0; }
.av-txt b { font-size: 14px; color: var(--nv); }
.av-txt em { font-style: normal; font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.av-ir { margin-left: auto; color: var(--ink-3); flex: none; }
.aviso-banda:hover .av-ir { color: var(--nv); }

.avisos { list-style: none; }
.avisos .av { border-bottom: 1px solid var(--line); }
.avisos .av:last-child { border: 0; }
.avisos a {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  padding: 11px 0; text-decoration: none; color: inherit;
}
.avisos .av-nivel {
  grid-row: span 2; align-self: start; margin-top: 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  color: var(--nv); border: 1px solid color-mix(in srgb, var(--nv) 45%, transparent);
  background: color-mix(in srgb, var(--nv) 12%, transparent);
}
.avisos .roja { --nv: var(--critica); }
.avisos .amarilla { --nv: var(--media); }
.avisos .preventiva { --nv: var(--acento); }
.av-titulo { font-size: 13.5px; }
.avisos a:hover .av-titulo { color: var(--acento); }
.av-meta { font-size: 11px; color: var(--ink-3); }

/* --- Focos de calor ---
   La cifra grande es la DISTANCIA y no el brillo ni la potencia: es lo único
   que decide si el foco tiene algo que ver con este activo. */
.focos { display: flex; flex-direction: column; gap: 8px; }
.foco {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 11px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.foco .fo-ico { flex: none; width: 16px; height: 16px; color: #ff8a4d; }
.foco .fo-ico svg { width: 16px; height: 16px; display: block; }
/* La distancia NO se parte nunca: "3,8 km" cortado en dos líneas deja de
   leerse como una cantidad y pasa a leerse como dos cosas. */
.foco b { font-size: 17px; font-weight: 700; white-space: nowrap; }
.foco.baja { opacity: .6; }
.fo-meta { margin-left: auto; font-size: 11px; color: var(--ink-3); text-align: right; }
/* A 375 px los tres datos del detalle no caben junto a la distancia sin
   estrujarla. Bajan a su propia línea, alineados a la izquierda: es el mismo
   criterio del resto de la ficha, donde el móvil no comprime sino que apila. */
@media (max-width: 560px) {
  .fo-meta { margin-left: 26px; width: 100%; text-align: left; }
}
.vacio { font-size: 14px; color: var(--ink-2); }

.pie { font-size: 12px; color: var(--ink-3); margin-top: 11px; font-style: italic; }
.alerta { color: var(--alta); font-size: 13px; margin-top: 12px; font-weight: 500; }
.ok { color: var(--acento); font-size: 13px; margin-top: 12px; }

.ff {
  border-top: 1px solid var(--line); padding: 20px 18px 30px; text-align: center;
  display: flex; flex-direction: column; gap: 7px; align-items: center;
}
.ff a { color: var(--acento); text-decoration: none; font-size: 14px; font-weight: 500; }
.ff span { font-size: 11px; color: var(--ink-3); }
/* Dos enlaces en el pie —volver y novedades— en una sola línea. */
.ff .ff-links { display: flex; gap: 18px; align-items: baseline; }

/* --- Teléfono: el caso principal, no el ajuste ---
   No se reordena nada porque el orden del HTML ya es el de móvil: qué es, cómo
   está, el número que pesa, y recién después el detalle. */
@media (max-width: 560px) {
  .ficha { padding: 18px 14px 32px; }
  h1 { font-size: 23px; }
  .titular .grande { font-size: 38px; }
  .cifras { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cifras b { font-size: 23px; }
  .compartir { padding: 8px 14px; }
  .seguir { padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* --- Lista de seguimiento ---
   Ojo: `.vecinos span` lleva `margin-left:auto` para empujar la distancia a la
   derecha. Acá hay dos spans, así que el del nombre tiene que desarmar esa
   regla o queda flotando al medio de la fila. */
.vecinos.seguimiento a { padding: 13px 0; }
.vecinos.seguimiento .seg-nombre {
  margin-left: 0; margin-right: auto; display: flex; flex-direction: column;
  min-width: 0; font-size: 14px; color: var(--ink);
}
.seg-nombre em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.vecinos.seguimiento .seg-estado {
  margin-left: 12px; font-size: 11px; color: var(--acento); white-space: nowrap; flex: none;
}
.vecinos.seguimiento .seg-estado.con-alerta { color: var(--alta); }

/* --- El panel de la cuenta -------------------------------------------------
   Rail a la izquierda, contenido a la derecha. Antes las tres pantallas de la
   cuenta eran páginas sueltas que no se relacionaban entre sí; el rail es lo
   que las convierte en un lugar.

   En móvil el rail se vuelve una fila de pestañas que se arrastra y NO un menú
   hamburguesa: esconder detrás de un botón justo lo que esta pantalla vino a
   hacer visible sería repetir el error que la trajo. */
.panel-shell {
  display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 26px;
  max-width: 1040px; margin: 0 auto; padding: 24px 20px 60px;
}
/* El panel de administración es una tabla de mando y pide el ancho que tenía
   antes de entrar acá: con el rail al lado, 1040 lo ahogaba. */
.panel-shell.ancho { max-width: 1420px; }
.rail { position: sticky; top: 70px; align-self: start; display: flex; flex-direction: column; gap: 20px; }
.rl-grupo > p { font: 500 10px "IBM Plex Mono", monospace; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); padding: 0 10px 8px; }
.rail a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px;
  font-size: 13.5px; color: var(--ink-2); text-decoration: none; border-left: 2px solid transparent;
}
.rail a:hover { background: var(--panel); color: var(--ink); }
.rail a.on { background: var(--panel-2); color: var(--ink); border-left-color: var(--acento); font-weight: 600; }
.rail .ms-ico { width: 15px; height: 15px; flex: none; color: var(--ink-3); display: block; }
.rail .ms-ico svg { width: 15px; height: 15px; display: block; }
.rail a.on .ms-ico { color: var(--acento); }
/* --- El grupo "Tu cuenta" sin sesión: velado -------------------------------
   Los ítems de adentro son `<span>` y no `<a>`: el desenfoque es adorno, y lo
   que impide entrar es que no hay a dónde entrar. Ver `grupoSinCuenta`. */
.rl-velo { position: relative; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); padding: 10px 8px 12px; }
.rl-velo > p { padding-left: 6px; }
.rl-falso { display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  font-size: 13.5px; color: var(--ink-2); border-left: 2px solid transparent; }
.rl-velados { filter: blur(4px); opacity: .45; user-select: none; }
/* `pointer-events` sobre el grupo entero y no solo sobre lo velado: el cartel
   de encima tiene su propio enlace y ese sí tiene que recibir el clic. */
.rl-velados { pointer-events: none; }
.rl-oferta {
  position: absolute; left: 8px; right: 8px; top: 32px; bottom: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; text-align: center; padding: 0 4px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(20,24,29,.55), rgba(20,24,29,.92) 45%);
}
.rl-candado { width: 26px; height: 26px; border-radius: 999px; flex: none;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; }
.rl-candado svg { width: 14px; height: 14px; }
.rl-oferta p { font-size: 11.5px; line-height: 1.45; color: var(--ink-2); }
.rl-crear { border: 1px solid var(--acento); color: var(--acento); background: transparent;
  border-radius: 6px; padding: 6px 12px; font: 600 11.5px "Archivo", sans-serif;
  text-decoration: none; }
.rl-crear:hover { background: rgba(53,208,165,.12); color: var(--acento); }

.rl-pill { margin-left: auto; font: 600 10px "IBM Plex Mono", monospace; color: var(--ink-3);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; }
.rail a.on .rl-pill { background: var(--bg); }

/* Las páginas públicas —fuentes, novedades, rankings, administración— entraron
   al panel el 05-09-2026 (Rob: "bajo la lógica declarada todo debería quedar
   dentro de este sidebar"). Antes el rail las listaba y al tocarlas te sacaba
   de él: un índice que expulsa de su propio índice no es un índice.

   Traen su propia envoltura de documento, así que acá se les desarma el ancho
   y el centrado —el shell ya los pone— y se les deja la prosa a un largo de
   línea legible, que es lo que el 720 px de `.ficha` estaba resolviendo. */
.panel-cuerpo { min-width: 0; }
.panel-cuerpo > .tipo, .panel-cuerpo > h1, .panel-cuerpo > .bajada,
.panel-cuerpo > .coords, .panel-cuerpo > .sub { max-width: 70ch; }
.panel-cuerpo .bloque p:not(.pie):not(.frase) { max-width: 78ch; }
/* Tablas y rejillas anchas —los rankings— se desplazan dentro de su bloque y
   no empujan la página entera hacia el costado. */
.panel-cuerpo .bloque { overflow-x: auto; }
.panel-cuerpo h1 { font-size: 25px; line-height: 1.15; }
.panel-cuerpo .sub { color: var(--ink-2); font-size: 13.5px; margin-top: 7px; max-width: 66ch; }
.panel-cuerpo .bloque h2 .op { margin-left: auto; font: 400 10px "IBM Plex Mono", monospace;
  color: var(--ink-3); letter-spacing: .06em; text-transform: none; }
.panel-cuerpo .bloque h2 { display: flex; align-items: center; gap: 8px; }
.oculto { display: none !important; }

/* --- Botones del panel --- */
.mini {
  border: 1px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 6px;
  padding: 6px 10px; font: 500 11.5px "Archivo", sans-serif; cursor: pointer;
}
.mini:hover { color: var(--ink); border-color: var(--ink-3); }
.mini.rojo:hover { color: var(--critica); border-color: var(--critica); }
.mini:disabled { opacity: .5; cursor: default; }
/* Fondo y texto escritos ENTEROS en los dos estados. Heredar la mitad de un
   color es como se llegó una vez a texto verde sobre verde. */
.btn-solido {
  background: var(--acento); color: #08110d; border: 1px solid var(--acento); border-radius: 7px;
  padding: 9px 15px; font: 600 13px "Archivo", sans-serif; cursor: pointer;
}
.btn-solido:hover { background: #2bb992; border-color: #2bb992; color: #08110d; }
.btn-solido:disabled { background: var(--panel-2); border-color: var(--line); color: var(--ink-3); cursor: default; }

/* --- Formularios --- */
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo > span, .campo > label { font: 600 11px "Archivo", sans-serif; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2); }
.campo em { font-style: normal; font: 400 10px "IBM Plex Mono", monospace; color: var(--ink-3);
  text-transform: none; letter-spacing: 0; margin-left: 5px; }
.campo input, .campo select {
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px;
  color: var(--ink); font: 400 13.5px "Archivo", sans-serif; width: 100%;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--acento); }
.campo input::placeholder { color: var(--ink-3); }
.pf-arroba { display: flex; align-items: center; background: var(--bg);
  border: 1px solid var(--line); border-radius: 7px; }
.pf-arroba i { padding-left: 11px; color: var(--ink-3); font: 400 13.5px "IBM Plex Mono", monospace; font-style: normal; }
.pf-arroba input { border: 0; background: transparent; padding-left: 2px;
  font: 400 13px "IBM Plex Mono", monospace; }
.pf-arroba:focus-within { border-color: var(--acento); }
.pf-arroba input:focus { border-color: transparent; }

.pf-avatar { display: flex; align-items: center; gap: 15px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.pf-av { width: 62px; height: 62px; border-radius: 999px; flex: none; object-fit: cover;
  display: flex; align-items: center; justify-content: center; font: 700 20px "Archivo", sans-serif;
  color: #08110d; background: linear-gradient(140deg, var(--acento), #7fd8f0); }
.pf-av-acc { display: flex; flex-direction: column; gap: 7px; }
.pf-fila { display: flex; gap: 7px; }
.pf-av-acc small { font: 400 10.5px "IBM Plex Mono", monospace; color: var(--ink-3); }

.pf-ro { display: flex; align-items: center; gap: 9px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 7px 6px 11px; }
.pf-ro > span { font-size: 13px; margin-right: auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pf-ro-edit { display: flex; flex-direction: column; gap: 8px; }
.pf-msg { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); margin-top: 4px; }
.pf-msg.mal { color: var(--alta); }
.pf-guardar { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.pf-estado { font: 400 11.5px "IBM Plex Mono", monospace; color: var(--ink-3); }
.pf-estado.mal { color: var(--alta); }

/* --- Mis listas --- */
.lp-fila { display: flex; align-items: center; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lp-txt { min-width: 0; flex: 1 1 260px; }
.lp-txt b { font-size: 14.5px; font-weight: 600; display: block; }
.lp-txt em { font-style: normal; font: 400 11px "IBM Plex Mono", monospace; color: var(--ink-3);
  display: block; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-n { font: 500 11.5px "IBM Plex Mono", monospace; color: var(--ink-3); flex: none; }
.lp-acc { display: flex; gap: 6px; flex: none; margin-left: auto; }
.lp-editor { background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 15px; margin: 0 0 13px; }
.lp-editor .campo.ancho { margin-top: 14px; }
.lp-pie { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line); }
.lp-pie .ed-borrar { margin-left: auto; }
.ed-estado { font: 400 11.5px "IBM Plex Mono", monospace; color: var(--ink-3); }
.ed-estado.mal { color: var(--alta); }
.lp-nueva { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 13px;
  color: var(--acento); font-size: 13px; cursor: pointer; border: 1px dashed var(--line);
  border-radius: 8px; padding: 11px; }
.lp-nueva:hover { border-color: var(--acento); }

.ac-fichas { display: flex; flex-wrap: wrap; gap: 7px; }
.ac-vacio { font-size: 12.5px; color: var(--ink-3); }
.ac-ficha { display: inline-flex; align-items: center; gap: 7px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 5px 4px 10px;
  font-size: 12.5px; color: var(--ink); }
.ac-ficha i { width: 7px; height: 7px; transform: rotate(45deg); flex: none; }
.ac-ficha .x { border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  font-size: 11px; padding: 0 3px; line-height: 1; }
.ac-ficha .x:hover { color: var(--critica); }
.ac-buscar { position: relative; margin-top: 10px; }
.ac-buscar input { background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
  padding: 9px 11px; color: var(--ink); font: 400 13px "Archivo", sans-serif; width: 100%; }
.ac-buscar input:focus { outline: none; border-color: var(--acento); }
.ac-sug { list-style: none; margin-top: 7px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); overflow: hidden; max-height: 230px; overflow-y: auto; }
.ac-sug li { display: flex; align-items: center; gap: 9px; padding: 9px 11px; font-size: 13px;
  cursor: pointer; border-bottom: 1px solid var(--line); }
.ac-sug li:last-child { border: 0; }
.ac-sug li:hover { background: var(--panel-2); }
.ac-sug i { width: 7px; height: 7px; transform: rotate(45deg); flex: none; }
.ac-sug em { font-style: normal; font: 400 11px "IBM Plex Mono", monospace; color: var(--ink-3);
  margin-right: auto; }
.ac-sug .mas { color: var(--acento); font-size: 12px; flex: none; }

@media (max-width: 860px) {
  .panel-shell { grid-template-columns: 1fr; gap: 14px; padding: 14px 14px 50px; }
  .rail { position: static; flex-direction: row; gap: 6px; overflow-x: auto;
    padding-bottom: 12px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rl-grupo { display: flex; gap: 6px; }
  .rl-grupo > p { display: none; }
  .rail a { border-left: 0; border: 1px solid var(--line); border-radius: 999px;
    padding: 7px 12px; white-space: nowrap; font-size: 12.5px; }
  .rail a.on { border-color: var(--acento); color: var(--acento); background: transparent; }
  .rail .ms-ico, .rl-pill { display: none; }
  .rl-velo { border: 0; background: none; padding: 0; }
  .rl-velados { display: none; }
  .rl-oferta { position: static; flex-direction: row; gap: 8px; padding: 0;
    background: none; white-space: nowrap; }
  .rl-oferta p, .rl-candado { display: none; }
  .rl-crear { padding: 7px 12px; border-radius: 999px; font-size: 12.5px; }
  .campos { grid-template-columns: 1fr; }
  .panel-cuerpo h1 { font-size: 22px; }
  .lp-acc { width: 100%; margin-left: 0; }
}

/* --- Lista compartida ------------------------------------------------------
   Una lista que alguien te mandó no es una ficha: no la elegiste tú, no sabes
   qué hay adentro y lo primero que necesitas es una lectura de conjunto —
   cuánto de esto pide mirada— antes de leer ocho nombres uno por uno. Por eso
   la cabeza lleva la composición de la lista en una barra y la acción arriba,
   y no un h1 solo seguido de una tabla plana.

   **La calma no se pinta de verde.** `--acento` es también el color de la
   Alerta Temprana Preventiva de SENAPRED, así que ocho filas diciendo "sin
   señales activas" en verde eran ocho afirmaciones en el color con que este
   producto dice que algo pasa. Va en gris, como los puntos huecos del mapa. */
.compartida .lc-cabeza { margin-bottom: 18px; }
.lc-kicker {
  font: 500 10.5px "IBM Plex Mono", monospace; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.compartida h1 { line-height: 1.1; }
.lc-bajada { font-size: 13.5px; color: var(--ink-2); margin-top: 7px; }

/* La composición, de un vistazo. La incertidumbre va rayada y no en otro color:
   inventarle un color propio a "no sabemos" lo pondría en la misma escala que
   los estados que sí medimos. */
.lc-barra {
  display: flex; height: 5px; border-radius: 3px; overflow: hidden;
  background: var(--panel-2); margin-top: 15px;
}
.lc-barra span { display: block; height: 100%; }
.lc-barra span.urge { background: var(--alta); }
.lc-barra span.mudo {
  background: repeating-linear-gradient(135deg, var(--ink-3) 0 2px, transparent 2px 5px);
}
.lc-barra span.calma { background: #333c46; }
.lc-leyenda {
  list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px;
  font-size: 11.5px; color: var(--ink-3);
}
.lc-leyenda li { display: flex; align-items: baseline; gap: 5px; }
.lc-leyenda b { font: 600 13px "IBM Plex Mono", monospace; color: var(--ink-2); }
.lc-leyenda .urge b { color: var(--alta); }

.lc-accion { margin-top: 18px; }
.lc-btn {
  background: var(--acento); color: #08110d; border: 1px solid var(--acento);
  border-radius: 7px; padding: 10px 16px; cursor: pointer;
  font: 600 13.5px "Archivo", sans-serif;
}
/* El hover se escribe entero —fondo y texto— y no solo el fondo: heredar la
   mitad de un color es como se llegó una vez a texto verde sobre verde. */
.lc-btn:hover { background: #2bb992; color: #08110d; border-color: #2bb992; }
.lc-btn:disabled { background: var(--panel-2); border-color: var(--line); color: var(--ink-3); cursor: default; }
.lc-nota { font-size: 11.5px; line-height: 1.55; color: var(--ink-3); margin-top: 9px; max-width: 52ch; }

.compartida .bloque h3 { margin-top: 20px; }
.compartida .bloque h3:first-child { margin-top: 0; }
.lc-filas { list-style: none; }
.lc-filas li { border-bottom: 1px solid var(--line); }
.lc-filas li:last-child { border: 0; }
.lc-filas a {
  display: flex; align-items: center; gap: 11px; padding: 12px 0; text-decoration: none;
}
.lc-filas a:hover .lc-nombre { color: var(--acento); }
.lc-filas i { width: 9px; height: 9px; transform: rotate(45deg); flex: none; margin: 0 3px; }
/* El mismo número con que el mapa rotula el marcador de ese activo: la columna
   y el mapa señalan las mismas cosas y en el mismo orden. */
.lc-num {
  flex: none; width: 15px; height: 15px; border-radius: 3px; background: var(--alta);
  color: #1a1005; font: 700 10px "IBM Plex Mono", monospace;
  display: flex; align-items: center; justify-content: center;
}
.lc-nombre {
  display: flex; flex-direction: column; min-width: 0; margin-right: auto;
  font-size: 14px; color: var(--ink);
}
.lc-nombre em { font-style: normal; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.lc-estado {
  display: flex; flex-direction: column; align-items: flex-end; flex: none;
  margin-left: 12px; text-align: right; font-size: 12px;
}
.lc-estado em { font-style: normal; font: 400 10.5px "IBM Plex Mono", monospace;
  color: var(--ink-3); margin-top: 3px; }
.lc-motivo { color: var(--alta); }
.lc-mudo, .lc-calma { color: var(--ink-3); }
.lc-que { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.lc-ir { font-size: 13px; color: var(--acento); }

@media (max-width: 560px) {
  /* En 375 px el estado a la derecha ahoga el nombre: pasa debajo, alineado a
     la izquierda, y la fila se lee como dos líneas y no como dos columnas. */
  .lc-filas a { flex-wrap: wrap; row-gap: 5px; }
  .lc-estado { margin-left: 26px; align-items: flex-start; text-align: left; width: 100%; }
  .lc-nombre { margin-right: 0; }
}

/* --- Prensa y avisos -------------------------------------------------------
   Vivían en un panel sobre el mapa; se mudaron acá cuando la ficha pasó a ser
   el lugar donde está todo lo de un activo junto. Se cargan en el cliente, así
   que hay esqueleto: la página se sirve completa y la prensa aterriza después. */
.not-grupo { margin-top: 16px; }
.not-grupo:first-child { margin-top: 4px; }
.not-grupo h3 { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px; }
.not-item { display: block; padding: 9px 0; border-bottom: 1px dashed var(--line); text-decoration: none; }
.not-item:last-child { border-bottom: none; }
.not-item .t { font-size: 14px; line-height: 1.4; color: var(--ink); }
.not-item:hover .t { color: var(--acento); }
.not-item .m { font: 400 11px "IBM Plex Mono", monospace; color: var(--ink-3); margin-top: 4px; }
.not-vacio { font-size: 13px; line-height: 1.55; color: var(--ink-3); padding: 4px 0; }
.not-obsoleta { font-size: 10.5px; color: var(--media); margin-bottom: 8px; }
.sk { height: 12px; border-radius: 3px; margin: 10px 0;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--line) 50%, var(--panel-2) 75%);
  background-size: 200% 100%; animation: sk 1.3s ease-in-out infinite; }
.sk.corto { width: 55%; }
@keyframes sk { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* --- Contexto del país -----------------------------------------------------
   Por qué tiembla y por qué el clima no se resume en una sigla. Va arriba de
   "qué se monitorea" porque responde la pregunta anterior: alguien que llega a
   la ficha de un país pregunta qué es esto antes que cuántos activos tiene. */
.bandera { margin-right: 10px; }
.fuente-inline { color: var(--ink-3); }
.ctx-fila { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; }
.ctx-fila + .ctx-fila { border-top: 1px solid var(--line); }
.ctx-fila > div { min-width: 0; }
.ctx-ico { flex: none; width: 18px; height: 18px; color: var(--ink-3); margin-top: 2px; }
.ctx-ico svg { width: 18px; height: 18px; display: block; }
.ctx-fila b { font-size: 14px; display: block; }
.ctx-fila p { font-size: 13px; color: var(--ink-2); margin-top: 5px; line-height: 1.5; }
.ctx-fila a { color: var(--acento); }
.ctx-chip {
  display: inline-block; margin: 3px 4px 0 0; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2);
}

/* --- De dónde sale el umbral de una regla ---------------------------------
   Las reglas de clima son juicio de Atlas y hasta agosto de 2026 se mostraban
   sin decirlo, con la misma cara que el catálogo del CSN. Acá la distinción es
   visual y no textual, porque el que lee una ficha no lee las letras chicas:
   una fuente citable va en el color del enlace, y un umbral nuestro va tenue y
   con el borde punteado que en este producto ya significa "esto no es firme"
   (el mismo recurso del chip `inusual` del panel). */
.reglas { list-style: none; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.reglas li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; font-size: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.reglas li:last-child { border-bottom: 0; padding-bottom: 0; }
.rg-txt { color: var(--ink); }
/* Sin `nowrap`: la cita del USACE —"Norma · USACE ER 1110-2-1802 · Estados
   Unidos"— desbordaba la página a 375 px, y una ficha que se scrollea de lado
   en el teléfono está rota. Las citas largas van a ser la norma y no la
   excepción, así que la que se adapta es la regla, no la cita. */
.rg-fuente { font-size: 11px; text-decoration: none; }
.rg-norma { color: var(--acento); }
.rg-guia { color: var(--ink-2); }
.rg-propio { color: var(--ink-3); border-bottom: 1px dotted var(--ink-3); }

/* --- El chip de fuente ------------------------------------------------------
   Cierra el texto que afirma algo, y nunca lo encabeza: primero se lee el
   hecho, después quién lo respalda. En una ficha que nombra seis organismos,
   ponerlos delante convertiría cada párrafo en una fila de siglas.

   Con sesión es un enlace al catálogo; sin sesión es el mismo chip sin enlace.
   El nombre de la fuente se ve siempre — la procedencia es parte de la capa
   pública y esconderla rompería lo que hace creíble una ficha a la que alguien
   llega en frío desde un buscador. */
.chip-fuente {
  display: inline-block; margin-left: 6px; vertical-align: baseline;
  font: 500 10px/1.6 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  padding: 1px 7px; border-radius: 10px; white-space: nowrap;
  color: var(--acento); border: 1px solid color-mix(in srgb, var(--acento) 42%, transparent);
}
.chip-fuente:hover { background: rgba(53, 208, 165, .12); }
/* Sin sesión no hay a dónde ir, así que tampoco parece que lo hubiera: mismo
   chip, en el gris del texto secundario y sin respuesta al cursor. */
.chip-fuente.sin-sesion {
  color: var(--ink-2); border-color: var(--line); background: none;
}
/* --- El catálogo de fuentes ------------------------------------------------- */
.fuentes { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.fte { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.fte:last-child { padding-bottom: 0; border-bottom: 0; }
.fte-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fte-nombre { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.fte-ir { font: 400 11px "IBM Plex Mono", ui-monospace, monospace; color: var(--acento); text-decoration: none; }
.fte-org { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.fte-que { font-size: 14px; color: var(--ink-2); margin-top: 7px; }
.fte-via { font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.fte-via b { color: var(--ink-2); }
/* Con sesión el marcador de umbral propio también enlaza al catálogo, pero
   conserva su peso visual bajo: no es una cita, es una advertencia. El hover es
   lo único que lo delata como enlace. */
a.rg-propio:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }

/* --- Qué tiene un activo ----------------------------------------------------
   Tres estados y se distinguen a la vista, no por el texto: confirmado por una
   persona (acento), supuesto por el sistema (punteado, el mismo recurso que ya
   marca lo que no es firme en el resto del producto) y no lo tiene (apagado).
   Sin la distinción, una conjetura nuestra se leería como un hecho de la faena
   — exactamente lo que este bloque viene a evitar. */
.comps { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.cmp { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cmp:last-child { border-bottom: 0; }
.cmp-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cmp-label { font-size: 14px; font-weight: 600; }
.cmp-estado {
  font: 500 10px/1.6 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.cmp-que { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.cmp.conf .cmp-label { color: var(--ink); }
.cmp.conf .cmp-estado { color: var(--acento); }
.cmp.semb .cmp-label { color: var(--ink); }
.cmp.semb .cmp-estado { color: var(--ink-2); border-bottom: 1px dotted var(--ink-3); }
.cmp.no .cmp-label { color: var(--ink-3); }
.cmp.no .cmp-estado { color: var(--ink-3); }
.cmp.no .cmp-que { opacity: .5; }
.cmp-acc { display: flex; gap: 6px; margin-top: 8px; }
.cmp-acc button {
  background: transparent; color: var(--ink-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 10px; font: 500 11px "Archivo", sans-serif; cursor: pointer;
}
.cmp-acc button:hover:not(:disabled):not(.on) { border-color: var(--ink-2); color: var(--ink); }
.cmp-acc button:disabled { opacity: .5; cursor: default; }
/* El botón que refleja el estado actual va con fondo, no solo con borde: el
   "No lo tiene" activo quedaba en gris sobre gris, indistinguible de uno
   apagado, y el usuario no podía saber qué había elegido sin leer la etiqueta
   de la derecha. */
.cmp-acc button.on { background: rgba(255, 255, 255, .07); font-weight: 600; cursor: default; }
.cmp-si.on { color: var(--acento); border-color: var(--acento); }
.cmp-no.on { color: var(--ink); border-color: var(--ink-2); }

/* --- Qué se enciende --------------------------------------------------------
   Un filete de color a la izquierda con la severidad, igual que el aviso
   oficial: son las dos cosas de la ficha que dicen "acá hay algo que atender",
   y darles formas distintas obligaría a aprender dos códigos. */
.riesgos { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rg {
  border-left: 2px solid var(--c, var(--ink-3)); padding: 9px 0 9px 12px;
  background: rgba(255, 255, 255, .025);
}
.rg.critica { --c: var(--critica); }
.rg.alta    { --c: var(--alta); }
.rg.media   { --c: var(--media); }
.rg.baja    { --c: var(--baja); }
.rg-titulo { font-size: 14px; font-weight: 600; color: var(--ink); }
.rg-detalle { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
/* Flex con hueco: el nombre del componente y la cita venían pegados
   ("Retención hídricaNorma · USACE…") porque el chip de una regla, a diferencia
   del de una fuente, no trae margen propio. */
.rg-comp {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 7px;
}

/* --- El registro de un activo ---------------------------------------------- */
.aclara { font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 8px; }
.aclara b { color: var(--ink); }
.rango { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 18px 0; }
.rango label { display: flex; flex-direction: column; gap: 4px; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.rango input {
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 9px; font: 400 13px "IBM Plex Mono", ui-monospace, monospace;
}
.rango button {
  background: transparent; color: var(--acento); border: 1px solid var(--acento);
  border-radius: 6px; padding: 8px 16px; font: 600 13px "Archivo", sans-serif; cursor: pointer;
}
.registro { list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* El filete lleva el color del TIPO de hecho y no de su severidad: acá no se
   está priorizando qué mirar —para eso está la ficha— sino leyendo una lista
   cronológica, y en esa lectura lo que orienta es de qué habla cada línea. */
.rgt { border-left: 2px solid var(--c, var(--ink-3)); padding: 10px 0 10px 12px; background: var(--panel); }
.rgt-sismo { --c: var(--alta); }
.rgt-clima { --c: var(--baja); }
.rgt-aviso { --c: var(--media); }
/* Un correo cuyo hecho ya no está en la base. Va en el color del acento y no en
   uno de amenaza: lo que esa línea afirma no es que pasara algo grave, sino que
   algo salió de acá hacia la bandeja de alguien. */
.rgt-correo { --c: var(--acento); }
/* Un umbral del propio operador, en la bitácora. Mismo verde que el resto de lo
   que es suyo en esta ficha. */
.rgt-umbral { --c: var(--acento); }
.rgt-cab { display: flex; align-items: center; gap: 7px; color: var(--c); }
.rgt-ico svg { width: 14px; height: 14px; display: block; }
.rgt-cuando { font-size: 11px; }
.rgt-titulo { font-size: 14px; font-weight: 600; margin-top: 5px; }
.rgt-titulo a { color: var(--ink); text-decoration: none; }
.rgt-titulo a:hover { color: var(--acento); }
.rgt-detalle { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.rgt-regla { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.rgt-regla a { color: var(--acento); text-decoration: none; }
.rgt-pie { font-size: 10px; color: var(--ink-3); margin-top: 7px; }

/* Una fuente que una norma nombra y que todavía no tenemos. Se muestra tenue y
   dicha, no escondida: el hueco declarado es parte de lo que informa la página. */
.fte.pendiente .fte-nombre { color: var(--ink-2); }
.fte-falta {
  font: 500 10px/1 "IBM Plex Mono", ui-monospace, monospace; font-style: normal;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  border: 1px dashed var(--line); border-radius: 9px; padding: 2px 7px; margin-left: 8px;
}

/* --- El anillo de exposición ------------------------------------------------ */
.entorno { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ent { border-left: 2px solid var(--alta); padding: 9px 0 9px 12px; background: rgba(255,255,255,.025); }
.ent-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ent-cab b { font-size: 14px; font-weight: 600; }
.ent-km { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.ent-det { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.ent-pie { font-size: 10px; color: var(--ink-3); margin-top: 6px; }
.ent-pie a { color: var(--acento); text-decoration: none; }
/* Lo que resultó ser el propio activo: en el color del acento y no en el de una
   amenaza. No es el entorno, y pintarlo igual sería volver a confundir las dos
   cosas que este bloque separa. */
.ent-propio { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ent-propio-t { font-size: 12px; color: var(--ink-2); margin-bottom: 8px; }
.ent-propio .ent { border-left-color: var(--acento); }
.ent-resto { font-size: 12px; color: var(--ink-3); margin-top: 12px; }
.ent-resto b { color: var(--ink-2); }

/* --- El puntaje de entorno -------------------------------------------------- */
.pt { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.pt-num { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--alta); }
.pt-num span { font-size: 15px; color: var(--ink-3); font-weight: 500; margin-left: 6px; }
.pt-que { font-size: 12px; color: var(--ink-2); }
/* El desglose va en un `details` abierto por el usuario, no oculto: el número
   sin explicación no se muestra nunca, pero la tabla completa arriba del listado
   tampoco es lo primero que alguien quiere leer. */
.pt-des { margin: 10px 0 16px; }
.pt-des summary { font-size: 12px; color: var(--acento); cursor: pointer; }
/* La tabla tiene cinco columnas y a 375 px desborda la página entera, que es
   una ficha rota: se scrollea de lado en el teléfono. Scrollea LA TABLA dentro
   de su propio contenedor y no el documento, con `min-width` para que las
   columnas no se aplasten hasta ser ilegibles. */
.pt-scroll { overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }
.pt-tabla { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 12px; }
.pt-tabla th {
  text-align: left; font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; padding: 0 8px 6px 0; border-bottom: 1px solid var(--line);
}
.pt-tabla td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); color: var(--ink-2);
  vertical-align: top; }
.pt-tabla td:last-child, .pt-tabla th:last-child { text-align: right; padding-right: 0; color: var(--ink); }
.pt-tabla a { color: var(--ink); text-decoration: none; }
.pt-tabla a:hover { color: var(--acento); }
.pt-tabla .mono { color: var(--ink-3); }
/* --- Confirmar o descartar una dependencia --------------------------------- */
.ent-dep { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.ent-dep-est { font-size: 11px; color: var(--ink-3); }
.ent.conf .ent-dep-est { color: var(--acento); }
.ent-dep-acc { display: flex; gap: 6px; }
.ent-dep-acc button {
  background: transparent; color: var(--ink-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 9px; font: 500 11px "Archivo", sans-serif; cursor: pointer;
}
.ent-dep-acc button:hover:not(:disabled) { border-color: var(--ink-2); color: var(--ink); }
.ent-dep-acc button:disabled { opacity: .5; cursor: default; }
.dep-si.on { color: var(--acento); border-color: var(--acento); background: rgba(53,208,165,.1); }
.ent.yendose { opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .3s; }

/* --- Notas plegadas ------------------------------------------------------
   El 63% de la prosa de la ficha eran notas al pie: siete párrafos de entre 291
   y 514 caracteres explicando de dónde sale cada dato y qué NO afirma. Ninguna
   sobra —son lo que separa este sitio de un tablero que escupe números— pero
   todas juntas y siempre abiertas enterraban el dato que venían a explicar.

   `<details>` y no un tooltip: el hover no existe en teléfono y deja el texto
   fuera del alcance del teclado. Click y punteo funcionan con el mismo elemento
   y sin una línea de JavaScript. Y lo que importa para esta página en
   particular: el contenido plegado SIGUE en el HTML, así que un buscador o un
   modelo lo leen igual. Esconderlo del ojo no es esconderlo del documento. */
.nota { margin-top: 12px; }
.nota > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .04em; color: var(--ink-3);
  padding: 3px 0; user-select: none;
}
.nota > summary::-webkit-details-marker { display: none; }
/* El chevron lo dibuja el ::before y gira al abrir: es la única señal de que
   esto se despliega, así que tiene que estar siempre visible, no al pasar. */
.nota > summary::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 4px solid currentColor; border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent; transition: transform .18s ease;
}
.nota[open] > summary::before { transform: rotate(90deg); }
.nota > summary:hover { color: var(--ink-2); }
.nota > summary:focus-visible { outline: 1px solid var(--acento); outline-offset: 3px; border-radius: 3px; }
.nota .pie { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .nota > summary::before { transition: none; } }

/* --- Componentes en fichas ----------------------------------------------
   Diez componentes con descripción y dos botones medían 1.056 px: el 21% de la
   página, y siete de los diez suelen decir "no lo tiene". La nube responde de
   un vistazo qué TIENE esta faena; el resto vive en el desplegable de al lado,
   con las descripciones y —con sesión— los botones para corregir. */
.comps-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.cchip {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
  font-size: 12px; color: var(--ink); background: var(--panel-2);
}
.cchip em {
  font-style: normal; font-size: 10px; letter-spacing: .04em; color: var(--ink-3);
}
/* Confirmado y supuesto no se distinguen por color sino por el filete: el color
   en esta ficha ya significa severidad, y un verde acá se leería como "bien". */
.cchip.conf { border-color: var(--ink-3); }
.cchip.semb { border-style: dashed; }
.cchip.vacio { color: var(--ink-3); border-style: dashed; }
.comps-no { margin-top: 9px; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.comps-todo > summary { margin-top: 2px; }
.comps-todo .comps { margin-top: 10px; }

/* El rango de temperatura: dos números en una sola cifra. El separador va
   tenue y sin espacio de más — es un guion de rango, no un operador. */
.rango-temp b { flex-wrap: wrap; }
.rt-sep { color: var(--ink-3); font-weight: 400; margin: 0 1px; }

/* La procedencia del pronóstico, bajo su título. Va acá y no en una nota al pie
   porque cambia lo que la cifra AFIRMA: no es lo que mide un anemómetro en la
   faena, es lo que el modelo calcula para el punto de grilla más cercano —a 5,1
   km de mediana sobre el catastro, y hasta 12,6 en el peor caso—. Leer "30 km/h"
   creyendo que es una medición en sitio es un error que cuesta caro en una
   decisión de izaje. */
.sub-fuente {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 11px; color: var(--ink-3); line-height: 1.5;
  margin: -8px 0 13px;
}

/* Los interruptores de correo de /cuenta: una casilla por clase y, debajo, su
   perilla —el umbral del sismo, el nivel mínimo del aviso oficial—.

   La perilla se esconde con el atributo `hidden` y por eso necesita su propia
   regla: `[hidden]` viene del stylesheet del navegador y lo pisa CUALQUIER
   regla de autor que declare `display`, sea de clase o inline. Con la casilla
   apagada, la perilla seguía a la vista. Es el mismo remedio que ya usan
   `.pa-umbral`, `.se-tip` y `.ms-grupo`. */
.pref-casilla {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  cursor: pointer; font-size: 14px;
}
.pref-casilla input { width: 16px; height: 16px; accent-color: var(--acento); }
.pref-casilla + .pref-perilla { padding-top: 0; }
.pref-perilla {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 0 0 10px 26px; font-size: 14px; color: var(--ink-2);
}
.pref-perilla[hidden] { display: none; }
.pref-perilla select {
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 10px; font: 500 13px "Archivo", sans-serif;
}

/* Compartir: el botón es el `summary` de un `<details>`, así que la misma
   `.compartir` tiene que perder el triangulito que el navegador le pone a todo
   summary —en Safari por su pseudo-elemento propio, en el resto por
   `list-style`—. Sin esto el botón queda con una flecha que no significa nada.

   El menú va absoluto y colgando del `<details>`, que es lo único con posición
   en esta fila: dentro de `.acciones-pagina`, que es un flex, un menú en flujo
   empujaría los botones de al lado cada vez que se abre. */
.cmp { position: relative; }
.cmp > summary { list-style: none; }
.cmp > summary::-webkit-details-marker { display: none; }
.cmp[open] > summary { background: rgba(53, 208, 165, 0.12); }
.cmp-menu {
  position: absolute; z-index: 1200; top: calc(100% + 6px); left: 0; min-width: 172px;
  display: flex; flex-direction: column; padding: 5px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}
.cmp-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--ink-2); text-decoration: none; cursor: pointer;
  font: 500 13px "Archivo", sans-serif; text-align: left; width: 100%;
}
.cmp-item:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }

/* La nota de "seguido sin cuenta". Va debajo de la fila de acciones y ocupa la
   línea entera: es una consecuencia de lo que se acaba de tocar, no otra acción.
   Nace oculta y la enciende el script de la ficha al seguir. */
.seguir-nota {
  flex-basis: 100%; margin-top: 8px;
  font-size: 12px; line-height: 1.45; color: var(--ink-3);
}
.seguir-nota[hidden] { display: none; }
.seguir-nota a { color: var(--acento); text-decoration: none; font-weight: 500; }
.seguir-nota a:hover { text-decoration: underline; }

/* --- Avisos por correo: reglas y destinos ------------------------------------
   El sujeto pasó a ser la REGLA y la lista es uno de sus destinos. Ver
   `bloqueAvisosCorreo` en ficha.js. */
.clase { border-top: 1px solid var(--line); padding: 15px 0 6px; }
.clase:first-of-type { border-top: 0; padding-top: 0; }
.clase-cab { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 11px; cursor: pointer; }
.clase-cab input { width: 16px; height: 16px; accent-color: var(--acento); flex: none; }
/* Una clase apagada se atenúa pero NO se esconde: apagar los sismos no puede
   costar perder de vista cómo los tenías configurados. */
.clase.off .regla, .clase.off .mas-regla { opacity: .4; pointer-events: none; }
.clase.off .clase-cab { color: var(--ink-3); }

.regla { position: relative; border-left: 2px solid var(--c, var(--line));
  background: rgba(255,255,255,.025); border-radius: 0 7px 7px 0;
  padding: 11px 13px; margin: 0 0 8px 26px; }
.regla-linea { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-2); }
.regla select { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 7px; font: 600 12px "Archivo", sans-serif; }
.regla-x { margin-left: auto; background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.regla-x:hover { color: var(--critica); }

.destinos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; position: relative; }
/* El ícono dice de QUÉ CLASE es el destino: cuadro hueco para una lista, rombo
   para un activo suelto. Una lista es un conjunto que cambia sola cuando le
   agregas activos; un activo no, y esa diferencia es la que hace útil apuntarle
   a una lista. */
.destino { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 9px;
  font: 500 11.5px "Archivo", sans-serif; color: var(--ink); }
.destino .mk-lista { width: 8px; height: 8px; border: 1.5px solid var(--acento); border-radius: 2px; flex: none; }
.destino .mk-activo { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); flex: none; background: var(--ink-2); }
.destino .n { font: 400 10px "IBM Plex Mono", monospace; color: var(--ink-3); }
.destino .x { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; color: var(--ink-3); font-size: 11px; cursor: pointer; }
.destino .x:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.mas-destino, .mas-regla { background: none; cursor: pointer; }
.mas-destino { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed #2f3a45;
  border-radius: 999px; padding: 4px 11px; color: var(--ink-2); font: 500 11.5px "Archivo", sans-serif; }
.mas-destino:hover { color: var(--acento); border-color: var(--acento); }
.mas-regla { display: inline-flex; align-items: center; gap: 6px; margin-left: 26px; border: 0;
  color: var(--ink-3); font: 600 11.5px "Archivo", sans-serif; padding: 4px 0; }
.mas-regla:hover { color: var(--acento); }

/* El selector de destinos, anclado al botón que lo abrió. */
.picker { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 300px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,.6); overflow: hidden; }
.picker-grupo { font: 700 9.5px "Archivo", sans-serif; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3); padding: 11px 13px 6px; }
.picker-op { display: flex; align-items: center; gap: 9px; padding: 8px 13px; font-size: 13px;
  color: var(--ink-2); cursor: pointer; }
.picker-op:hover { background: var(--panel-2); color: var(--ink); }
.picker-op .mk-lista { width: 9px; height: 9px; border: 1.5px solid var(--acento); border-radius: 2px; flex: none; }
.picker-op .mk-activo { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); flex: none; background: var(--ink-2); }
.picker-op .n { margin-left: auto; font: 400 10px "IBM Plex Mono", monospace; color: var(--ink-3); }
.picker-vacio, .picker-pie { padding: 11px 13px; font: 400 10.5px "IBM Plex Mono", monospace;
  color: var(--ink-3); line-height: 1.5; }
.picker-pie { border-top: 1px solid var(--line); }

/* EL HUECO: una lista que ninguna regla alcanza. Con reglas, eso significa que
   deja de avisar — y antes seguir ya implicaba que te avisaran. Sin decirlo, el
   cambio de modelo rompería cosas del único modo que nadie reporta: en silencio. */
.hueco { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--media) 45%, var(--line));
  background: rgba(255,209,102,.07); border-radius: 8px; }
.hueco .ico { width: 15px; height: 15px; color: var(--media); flex: none; margin-top: 1px; }
.hueco b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 600; }
.hueco p { font-size: 12px; color: var(--ink-2); line-height: 1.5; margin-top: 3px; }

/* La frase de control: con reglas por destino, "¿qué me llega hoy?" deja de ser
   evidente. Es el problema de todo motor de reglas, y esta línea lo contesta en
   una oración que se arma sola. */
.frase { margin: 16px 0 0; padding: 12px 14px; background: var(--panel-2); border-radius: 8px;
  font: 400 12px "IBM Plex Mono", monospace; color: var(--ink-2); line-height: 1.7; }
.frase b { color: var(--ink); font-weight: 500; }
.frase .t { display: block; font: 700 9.5px "Archivo", sans-serif; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }