/* Piezas propias del Sistema de Alerta Sísmica sobre el diseño del tablero
 * (tablero.css). Mismas reglas: ningún color literal, todo sale de tokens.css.
 */

/* Lo marcado con `hidden` siempre se oculta, aunque la regla del componente
   use display:flex o display:block. */
[hidden] {
    display: none !important;
}

/* =========================
   BANNER DE ALERTA
   ========================= */

.aviso-alerta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: color-mix(in srgb, var(--arpia-critical) 22%, var(--arpia-bg));
    border-bottom-color: var(--arpia-critical);
    color: var(--arpia-text);
    animation: alerta-latido 1.2s ease-in-out infinite;
}

.aviso-alerta[hidden] {
    display: none;
}

.aviso-alerta strong {
    color: var(--arpia-critical);
    letter-spacing: 0.06em;
}

@keyframes alerta-latido {
    50% { background: color-mix(in srgb, var(--arpia-critical) 34%, var(--arpia-bg)); }
}

/* =========================
   EVENTO ACTUAL (panel izquierdo)
   ========================= */

.pagina-tablero .ia {
    min-height: 0;
}

.pagina-tablero .evento-actual {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
}

.pagina-tablero .evento-actual.en-alerta {
    border-color: var(--arpia-critical);
    box-shadow: 0 0 28px color-mix(in srgb, var(--arpia-critical) 18%, transparent);
}

.magnitud {
    color: var(--arpia-text);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
}

.en-alerta .magnitud {
    color: var(--arpia-critical);
}

.datos-evento {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    margin-top: 12px;
    font-size: 13px;
}

.datos-evento dt {
    color: var(--arpia-text-muted);
}

.datos-evento dd {
    margin: 0;
    color: var(--arpia-text);
}

/* -- zonas en alerta -- */

.alertas-zona {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.alertas-zona:empty {
    display: none;
}

.tarjeta-alerta {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--arpia-critical) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--arpia-critical) 45%, transparent);
    border-left: 3px solid var(--arpia-critical);
    border-radius: 10px;
    font-size: 12px;
}

.tarjeta-alerta strong {
    color: var(--arpia-text);
    font-size: 13px;
}

.tarjeta-alerta p {
    color: var(--arpia-text-secondary);
}

/* =========================
   SIMULADOR
   ========================= */

.simulador {
    margin-top: 16px;
}

.menu-panel h3 {
    color: var(--arpia-space);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.simulador-ayuda {
    margin-top: 4px;
    color: var(--t-texto-suave);
    font-size: 11px;
}

.simulador-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.simulador-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--arpia-text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.simulador-form input {
    min-width: 0;
    padding: 9px 11px;
    background: color-mix(in srgb, var(--arpia-void) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--arpia-space) 15%, transparent);
    border-radius: 9px;
    color: var(--arpia-text);
    font: inherit;
    font-size: 13px;
    transition: border-color 0.2s ease;
}

.simulador-form select {
    min-width: 0;
    padding: 9px 11px;
    background: color-mix(in srgb, var(--arpia-void) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--arpia-space) 15%, transparent);
    border-radius: 9px;
    color: var(--arpia-text);
    font: inherit;
    font-size: 13px;
}

.simulador-form select option,
.simulador-form select optgroup {
    background: var(--arpia-void);
    color: var(--arpia-text);
}

.simulador-form select:focus {
    border-color: color-mix(in srgb, var(--arpia-space) 48%, transparent);
    outline: none;
}

/* Campo que ocupa las dos columnas (tipo de emergencia, nivel, base...) */
.simulador-form .simulador-ancho {
    grid-column: 1 / -1;
}

.simulador-form label small {
    color: var(--t-texto-suave);
    font-weight: 400;
}

.simulador-form input:focus {
    border-color: color-mix(in srgb, var(--arpia-space) 48%, transparent);
    outline: none;
}

.boton-simular {
    grid-column: 1 / -1;
    min-height: 40px;
    background: var(--arpia-critical);
    border: 1px solid color-mix(in srgb, var(--arpia-text) 18%, transparent);
    border-radius: 9px;
    color: var(--arpia-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.boton-simular:hover:not(:disabled) {
    background: color-mix(in srgb, var(--arpia-critical) 80%, var(--arpia-text));
    transform: translateY(-1px);
}

.boton-simular:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.simulador-mensaje {
    min-height: 1.4em;
    margin-top: 8px;
    color: var(--arpia-text-secondary);
    font-size: 12px;
}

.simulador-mensaje[data-tipo="ok"] { color: var(--arpia-success); }
.simulador-mensaje[data-tipo="error"] { color: var(--arpia-critical); }

/* =========================
   PANELES DE LA DERECHA
   ========================= */

.pagina-tablero .mapa-grande {
    height: 420px;
    filter: none;
}

.lista-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 2px;
}

.item {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--arpia-void) 35%, transparent);
    border: 1px solid var(--t-borde);
    border-left: 3px solid var(--color-item, var(--arpia-space));
    border-radius: 9px;
    font-size: 12px;
}

.item.en-alerta {
    --color-item: var(--arpia-critical);
    background: color-mix(in srgb, var(--arpia-critical) 10%, transparent);
}

.item-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.item-cabeza strong {
    color: var(--arpia-text);
    font-size: 13px;
    font-weight: 600;
}

.item p {
    margin-top: 3px;
    color: var(--t-texto-suave);
}

.item code {
    color: var(--arpia-evidence);
}

.pastilla {
    flex-shrink: 0;
    padding: 1px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.pastilla-ok { color: var(--arpia-success); }
.pastilla-off { color: var(--arpia-text-muted); }
.pastilla-alerta { color: var(--arpia-critical); }
.pastilla-info { color: var(--arpia-info); }
.pastilla-sim { color: var(--arpia-warning); }

.insignia-panel[data-origen="alerta"] { color: var(--arpia-critical); }

/* -- Leaflet con el tema del tablero -- */

.leaflet-container {
    background: var(--arpia-bg);
    font-family: var(--fuente);
}

/* OpenStreetMap en modo oscuro: se invierten solo los mosaicos, no las capas.
   El filtro va en cada mosaico y no en el panel entero: a pantalla completa en
   iPad el panel filtrado era una imagen gigante que Safari rehacía al desplazar
   el mapa, y se veía cortada o parpadeando. Son filtros de color, así que el
   resultado es idéntico. */
.leaflet-tile-pane .leaflet-tile {
    filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.6);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--arpia-elevated);
    color: var(--arpia-text);
    border: 1px solid var(--t-borde-hover);
}

.leaflet-popup-content {
    font-size: 12px;
    line-height: 1.5;
}

.leaflet-container a.leaflet-popup-close-button {
    color: var(--arpia-text-secondary);
}

.leaflet-control-attribution {
    background: color-mix(in srgb, var(--arpia-void) 70%, transparent) !important;
    color: var(--arpia-text-muted) !important;
}

.leaflet-control-attribution a {
    color: var(--arpia-text-secondary) !important;
}

.leaflet-bar a {
    background: var(--arpia-elevated);
    border-bottom-color: var(--arpia-border);
    color: var(--arpia-text);
}

.leaflet-bar a:hover {
    background: var(--arpia-surface);
}

@media (max-width: 700px) {
    .pagina-tablero .mapa-grande {
        height: 320px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aviso-alerta { animation: none; }
    .menu-panel { animation: none; }
}


/* =========================
   BARRA: NAVEGACIÓN Y MENÚ "SIMULAR SISMO"
   ========================= */

.pagina-tablero .marca {
    width: 600px;
    flex-shrink: 0;
}

.navegacion {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav-enlace[aria-current="page"] {
    background: var(--arpia-elevated);
    border-color: var(--arpia-space);
    color: var(--arpia-space);
}

.boton-alerta {
    background: color-mix(in srgb, var(--arpia-critical) 85%, var(--arpia-void));
    border-color: color-mix(in srgb, var(--arpia-text) 18%, transparent);
    color: var(--arpia-text);
}

.boton-alerta:hover,
.boton-alerta[aria-expanded="true"] {
    background: var(--arpia-critical);
}

.boton-peligro {
    background: transparent;
    border-color: color-mix(in srgb, var(--arpia-critical) 60%, transparent);
    color: var(--arpia-critical);
}

.boton-peligro:hover {
    background: color-mix(in srgb, var(--arpia-critical) 15%, transparent);
}

.menu {
    position: relative;
}

.menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 5000;  /* por encima del mapa de Leaflet */
    width: min(380px, calc(100vw - 32px));
    padding: 16px;
    background: linear-gradient(145deg, var(--arpia-elevated), var(--arpia-surface));
    border: 1px solid color-mix(in srgb, var(--arpia-space) 38%, transparent);
    border-radius: 14px;
    box-shadow: 0 22px 55px color-mix(in srgb, var(--arpia-void) 60%, transparent);
    animation: menu-entrada 160ms ease-out;
}

.menu-panel[hidden] {
    display: none;
}

.menu-panel a {
    color: var(--arpia-space);
    font-weight: 600;
}

@keyframes menu-entrada {
    from { opacity: 0; transform: translateY(-6px); }
}

.boton-texto-mini {
    color: var(--arpia-space);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.boton-texto-mini:hover {
    text-decoration: underline;
}

/* -- enlaces de envío manual por WhatsApp -- */

.enlaces-wa {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.enlace-wa {
    padding: 3px 10px;
    background: color-mix(in srgb, var(--arpia-success) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--arpia-success) 55%, transparent);
    border-radius: 999px;
    color: var(--arpia-success);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.enlace-wa:hover {
    background: color-mix(in srgb, var(--arpia-success) 26%, transparent);
}

/* -- listas con elementos seleccionables (estaciones, dispositivos) -- */

.item-boton {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: inherit;
    font-family: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.item-boton:hover {
    border-color: var(--t-borde-hover);
}

.item-boton[aria-current="true"] {
    border-color: var(--arpia-space);
    background: color-mix(in srgb, var(--arpia-space) 10%, transparent);
}

.item-linea {
    margin-top: 3px;
    color: var(--t-texto-suave);
}

.aviso-info {
    background: color-mix(in srgb, var(--arpia-warning) 10%, var(--arpia-bg));
    border-bottom-color: color-mix(in srgb, var(--arpia-warning) 40%, var(--arpia-bg));
    color: var(--arpia-text-secondary);
}

.aviso-info strong {
    color: var(--arpia-warning);
}

.aviso-info[hidden] {
    display: none;
}

/* =========================
   PÁGINA DE ESTACIONES
   ========================= */

.kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.kpi-mini {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: color-mix(in srgb, var(--arpia-void) 35%, transparent);
    border: 1px solid var(--t-borde);
    border-radius: 10px;
}

.kpi-mini[data-tipo="Banda ancha"] { border-top: 2px solid var(--arpia-space); }
.kpi-mini[data-tipo="Acelerógrafo"] { border-top: 2px solid var(--arpia-success); }
.kpi-mini[data-tipo="Corto periodo"] { border-top: 2px solid var(--arpia-warning); }

.kpi-mini-cifra {
    color: var(--arpia-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.kpi-mini-etiqueta {
    color: var(--t-texto-suave);
    font-size: 10px;
}

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 14px;
}

.conteo-lista {
    margin: 10px 0 6px;
    color: var(--t-texto-suave);
    font-size: 11px;
}

.lista-estaciones {
    flex: 1;
    max-height: 520px;
}

.lista-dispositivos {
    flex: 1;
    margin-top: 14px;
    max-height: 640px;
}

.pagina-tablero .mapa-estaciones {
    height: 640px;
    filter: none;
}

.interruptor {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--t-texto-suave);
    font-size: 11px;
    cursor: pointer;
}

.leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    color: var(--t-texto-suave);
    font-size: 11px;
}

.leyenda li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--arpia-space);
}

.punto-sismo {
    background: var(--arpia-critical);
}

.leaflet-tooltip {
    background: var(--arpia-elevated);
    border: 1px solid var(--t-borde-hover);
    color: var(--arpia-text);
    font-family: var(--fuente-mono);
    font-size: 11px;
}

.leaflet-tooltip-top::before {
    border-top-color: var(--arpia-elevated);
}

/* =========================
   PÁGINA DE DISPOSITIVOS
   ========================= */

.cabeza-seccion {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.perfil {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.perfil fieldset {
    /* Un fieldset crece por defecto hasta su contenido más largo (aquí, el
       título de un evento en la lista): en el celular se salía de la pantalla */
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--t-borde);
    border-radius: 12px;
    background: color-mix(in srgb, var(--arpia-void) 25%, transparent);
}

.perfil legend {
    padding: 0 6px;
    color: var(--arpia-space);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.perfil label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--arpia-text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.perfil input:not([type="checkbox"]),
.perfil select,
.perfil textarea {
    min-width: 0;
    padding: 9px 11px;
    background: color-mix(in srgb, var(--arpia-void) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--arpia-space) 15%, transparent);
    border-radius: 9px;
    color: var(--arpia-text);
    font: inherit;
    font-size: 13px;
    resize: vertical;
}

.perfil select option {
    background: var(--arpia-surface);
}

.perfil input:focus,
.perfil select:focus,
.perfil textarea:focus {
    border-color: color-mix(in srgb, var(--arpia-space) 48%, transparent);
    outline: none;
}

.perfil input:disabled {
    color: var(--arpia-text-muted);
    cursor: not-allowed;
}

.perfil .casilla {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--arpia-text);
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
}

.perfil .casilla input {
    width: 16px;
    height: 16px;
    accent-color: var(--arpia-space);
}

.perfil .ancho-completo {
    grid-column: 1 / -1;
}

.perfil-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.perfil-acciones [hidden] {
    display: none;
}

.perfil-acciones #eliminar {
    margin-left: auto;
}

/* =========================
   MENÚ PRINCIPAL (un solo desplegable con todos los botones)
   ========================= */

.pagina-actual {
    padding: 4px 10px;
    border: 1px solid var(--t-borde);
    border-radius: 999px;
    color: var(--arpia-text-secondary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.boton-menu {
    min-height: 36px;
    padding: 0 16px;
    font-size: 14px;
}

.boton-menu[aria-expanded="true"] {
    background: var(--arpia-elevated);
    border-color: var(--arpia-space);
    color: var(--arpia-space);
}

.menu-panel-ancho {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.menu-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.menu-seccion {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-seccion h3 {
    margin: 6px 0 4px;
    color: var(--arpia-space);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.menu-seccion h3:not(:first-child) {
    margin-top: 14px;
}

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    background: color-mix(in srgb, var(--arpia-void) 35%, transparent);
    border: 1px solid var(--t-borde);
    border-radius: 9px;
    color: var(--arpia-text) !important;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.menu-item:hover {
    background: var(--arpia-elevated);
    border-color: var(--t-borde-hover);
}

.menu-item[aria-current="page"] {
    border-color: var(--arpia-space);
    background: color-mix(in srgb, var(--arpia-space) 12%, transparent);
    color: var(--arpia-space) !important;
}

.menu-item-alerta {
    background: color-mix(in srgb, var(--arpia-critical) 80%, var(--arpia-void));
    border-color: color-mix(in srgb, var(--arpia-text) 18%, transparent);
}

.menu-item-alerta:hover,
.menu-item-alerta[aria-expanded="true"] {
    background: var(--arpia-critical);
}

.menu-item-peligro {
    background: transparent;
    border-color: color-mix(in srgb, var(--arpia-critical) 55%, transparent);
    color: var(--arpia-critical) !important;
}

.menu-item-peligro:hover {
    background: color-mix(in srgb, var(--arpia-critical) 14%, transparent);
    border-color: var(--arpia-critical);
}

.menu-item:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.menu-seccion .simulador-mensaje:empty {
    display: none;
}

.menu-simulador {
    padding: 10px;
    border: 1px solid var(--t-borde);
    border-radius: 10px;
    background: color-mix(in srgb, var(--arpia-void) 25%, transparent);
}

.menu-simulador[hidden] {
    display: none;
}

/* =========================
   PÁGINAS DE DESASTRES
   ========================= */

.texto-ayuda {
    margin-top: 10px;
    color: var(--t-texto-suave);
    font-size: 12px;
}

.subtitulo-panel {
    margin-top: 18px;
    color: var(--arpia-text);
    font-size: 13px;
    font-weight: 600;
}

.vacio-mini {
    color: var(--t-texto-suave);
    font-size: 12px;
}

.kpi-nivel {
    border-top-width: 3px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.kpi-nivel[aria-pressed="true"] {
    border-color: var(--arpia-space);
    background: color-mix(in srgb, var(--arpia-space) 10%, transparent);
}

.pastilla-nivel {
    white-space: nowrap;
}

.item-zonas {
    color: var(--arpia-critical);
    font-weight: 600;
}

.item-extra p {
    margin-top: 3px;
    color: var(--t-texto-suave);
}

.item-extra a,
.item .boton-texto-mini {
    display: inline-block;
    margin-top: 4px;
}

.lista-eventos {
    max-height: 560px;
}

.fuente small {
    color: var(--arpia-text-muted);
}

.punto-zona {
    background: transparent;
    border: 2px solid var(--arpia-space);
}

.popup-imagen {
    display: block;
    width: 100%;
    max-height: 120px;
    margin-bottom: 6px;
    border-radius: 6px;
    object-fit: cover;
}

/* -- tarjetas del panorama -- */

.tarjetas-desastre {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.tarjeta-desastre {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--arpia-void) 35%, transparent);
    border: 1px solid var(--t-borde);
    border-radius: 12px;
    color: var(--arpia-text) !important;
    font-size: 12px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.tarjeta-desastre:hover {
    border-color: var(--t-borde-hover);
    background: var(--arpia-elevated);
    transform: translateY(-1px);
}

.tarjeta-desastre.en-alerta {
    border-color: color-mix(in srgb, var(--arpia-critical) 60%, transparent);
    background: color-mix(in srgb, var(--arpia-critical) 8%, transparent);
}

.tarjeta-cabeza {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tarjeta-cabeza strong {
    flex: 1;
    font-size: 14px;
}

.tarjeta-icono {
    font-size: 20px;
}

.barra-niveles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.nivel-cifra {
    padding: 3px 0;
    border-top: 3px solid var(--color-nivel);
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-nivel) 12%, transparent);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tarjeta-ir {
    color: var(--arpia-space);
    font-weight: 600;
}

.icono-desastre span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 2px solid var(--color-nivel);
    border-radius: 50%;
    background: color-mix(in srgb, var(--arpia-void) 70%, transparent);
    font-size: 14px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-nivel) 45%, transparent);
}

.icono-desastre span.en-alerta {
    animation: alerta-latido-icono 1.2s ease-in-out infinite;
}

@keyframes alerta-latido-icono {
    50% { transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
    .icono-desastre span.en-alerta { animation: none; }
}

/* =========================
   RESPONSIVE DE LA BARRA
   ========================= */

@media (max-width: 900px) {
    /* el menú se ancla a la barra completa, no al botón: nunca se sale de la pantalla */
    .barra {
        position: relative;
    }

    .navegacion .menu {
        position: static;
    }

    .menu-panel-ancho {
        left: 16px;
        right: 16px;
        top: calc(100% - 4px);
        width: auto;
    }
}

@media (max-width: 700px) {
    .menu-columnas {
        grid-template-columns: 1fr;
    }

    .pagina-actual {
        display: none;
    }
}

@media (max-width: 1100px) {
    .pagina-tablero .marca {
        width: 300px;
    }

    .pagina-tablero .marca-tablero {
        display: none;
    }
}

@media (max-width: 900px) {
    .barra {
        flex-wrap: wrap;
    }

    .navegacion {
        justify-content: flex-start;
    }

    .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .perfil fieldset {
        /* minmax(0, 1fr) y no 1fr: con 1fr la columna crecía hasta el texto
           más largo de la lista de eventos y se salía de la pantalla */
        grid-template-columns: minmax(0, 1fr);
    }

    .pagina-tablero .mapa-estaciones {
        height: 420px;
    }
}

/* -- llamada telefónica -- */

.enlace-llamada {
    background: color-mix(in srgb, var(--arpia-critical) 14%, transparent);
    border-color: color-mix(in srgb, var(--arpia-critical) 55%, transparent);
    color: var(--arpia-critical);
}

.enlace-llamada:hover {
    background: color-mix(in srgb, var(--arpia-critical) 26%, transparent);
}

.ayuda-perfil {
    color: var(--t-texto-suave);
    font-size: 11px;
}

/* =========================
   SESIÓN E INICIO DE SESIÓN
   ========================= */

.chip-usuario {
    padding: 5px 10px;
    border: 1px solid var(--t-borde);
    border-radius: 999px;
    background: color-mix(in srgb, var(--arpia-void) 35%, transparent);
    color: var(--arpia-text) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.chip-usuario:hover {
    border-color: var(--arpia-space);
}

.menu-item small {
    color: var(--arpia-text-muted);
    font-size: 10px;
    font-weight: 600;
}

.menu-item-bloqueado {
    border-style: dashed;
    color: var(--arpia-text-secondary) !important;
}

.pagina-tablero .tablero-login {
    grid-template-columns: minmax(0, 440px);
    justify-content: center;
    align-content: start;
}

.panel-login {
    gap: 10px;
    min-height: 0;
}

.formulario-login {
    margin-top: 12px;
}

.formulario-login[hidden] {
    display: none;
}

.boton-ancho {
    width: 100%;
    min-height: 40px;
}

@media (max-width: 900px) {
    .navegacion {
        flex-shrink: 1;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    /* en celulares el estado se ve solo con el punto de color */
    .navegacion .salud-texto {
        display: none;
    }
}

/* =========================
   ALARMAS DE SEGURIDAD
   ========================= */

.franja-alarma {
    position: sticky;
    top: 0;
    z-index: 4000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    padding: 12px 20px;
    background: var(--arpia-critical);
    color: var(--arpia-text);
    box-shadow: 0 6px 24px color-mix(in srgb, var(--arpia-critical) 45%, transparent);
    animation: franja-alarma 0.9s steps(2, end) infinite;
}

.franja-alarma[hidden] {
    display: none;
}

@keyframes franja-alarma {
    50% { background: color-mix(in srgb, var(--arpia-critical) 60%, var(--arpia-void)); }
}

.franja-alarma-fila {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.franja-alarma-titulo {
    font-size: 17px;
    letter-spacing: 0.04em;
}

.franja-alarma-base {
    font-size: 13px;
    font-weight: 600;
}

.franja-alarma-orden {
    font-size: 14px;
    font-weight: 700;
}

.franja-alarma-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tipos-alarma {
    grid-template-columns: 1fr !important;
}

.tipo-alarma {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background: color-mix(in srgb, var(--arpia-void) 35%, transparent);
    border: 2px solid var(--t-borde);
    border-radius: 12px;
    color: var(--arpia-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.tipo-alarma:hover {
    border-color: color-mix(in srgb, var(--arpia-critical) 60%, transparent);
}

.tipo-alarma[aria-pressed="true"] {
    border-color: var(--arpia-critical);
    background: color-mix(in srgb, var(--arpia-critical) 16%, transparent);
}

.tipo-alarma-icono {
    font-size: 26px;
}

.tipo-alarma-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tipo-alarma-texto small {
    color: var(--t-texto-suave);
    font-size: 11px;
}

.cercania {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.cercania[hidden] {
    display: none;
}

.boton-activar-alarma {
    min-height: 54px;
    background: var(--arpia-critical);
    border: 2px solid color-mix(in srgb, var(--arpia-text) 25%, transparent);
    border-radius: 12px;
    color: var(--arpia-text);
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--arpia-critical) 35%, transparent);
}

.boton-activar-alarma:hover:not(:disabled) {
    background: color-mix(in srgb, var(--arpia-critical) 80%, var(--arpia-text));
}

.boton-activar-alarma:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.boton-finalizar {
    margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .franja-alarma { animation: none; }
}

/* =========================
   MENÚ POR CATEGORÍAS
   ========================= */

.menu-categoria {
    border: 1px solid var(--t-borde);
    border-radius: 12px;
    background: color-mix(in srgb, var(--arpia-void) 25%, transparent);
}

.menu-categoria + .menu-categoria {
    margin-top: 10px;
}

.menu-categoria > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 0 12px;
    color: var(--arpia-space);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.menu-categoria > summary::-webkit-details-marker {
    display: none;
}

.menu-categoria > summary::after {
    content: "▸";
    color: var(--arpia-text-muted);
    transition: transform 0.2s ease;
}

.menu-categoria[open] > summary::after {
    transform: rotate(90deg);
}

.menu-categoria-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px 8px;
}

.menu-subcategoria {
    margin: 4px 0;
    border-color: color-mix(in srgb, var(--arpia-space) 30%, transparent);
    background: color-mix(in srgb, var(--arpia-space) 5%, transparent);
}

.menu-subcategoria > summary {
    min-height: 36px;
    color: var(--arpia-text);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

.menu-seccion .menu-categoria-cuerpo .simulador-mensaje:empty {
    display: none;
}

.boton-salir {
    min-height: 30px;
    font-size: 12px;
}

.boton-salir[hidden] {
    display: none;
}

.lista-permisos {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lista-permisos .casilla {
    align-items: flex-start;
}

.lista-permisos .casilla span {
    color: var(--arpia-text-secondary);
    font-size: 12px;
}

@media (max-width: 700px) {
    .boton-salir {
        padding: 0 8px;
    }
}

/* =========================
   NOVEDADES
   ========================= */

.niveles-novedad {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nivel-novedad {
    flex: 1;
    min-width: 110px;
    min-height: 44px;
    padding: 0 12px;
    background: color-mix(in srgb, var(--arpia-void) 35%, transparent);
    border: 2px solid var(--t-borde);
    border-radius: 10px;
    color: var(--arpia-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.nivel-novedad:hover {
    border-color: var(--t-borde-hover);
}

.nivel-novedad[data-nivel="bajo"][aria-pressed="true"] {
    border-color: var(--arpia-nivel-verde);
    background: color-mix(in srgb, var(--arpia-nivel-verde) 15%, transparent);
}

.nivel-novedad[data-nivel="medio"][aria-pressed="true"] {
    border-color: var(--arpia-nivel-amarilla);
    background: color-mix(in srgb, var(--arpia-nivel-amarilla) 15%, transparent);
}

.nivel-novedad[data-nivel="critico"][aria-pressed="true"] {
    border-color: var(--arpia-nivel-roja);
    background: color-mix(in srgb, var(--arpia-nivel-roja) 15%, transparent);
}

.perfil input[type="file"] {
    padding: 8px;
    background: color-mix(in srgb, var(--arpia-void) 42%, transparent);
    border: 1px dashed color-mix(in srgb, var(--arpia-space) 35%, transparent);
    border-radius: 9px;
    color: var(--arpia-text-secondary);
    font-size: 12px;
}

/* Evidencia: dos botones (galería y cámara) en lugar del campo de archivo */
.evidencia-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.evidencia-titulo {
    color: var(--arpia-text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.evidencia-botones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.perfil .evidencia-boton {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 9px 12px;
    background: color-mix(in srgb, var(--arpia-void) 42%, transparent);
    border: 1px dashed color-mix(in srgb, var(--arpia-space) 40%, transparent);
    border-radius: 9px;
    color: var(--arpia-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.perfil .evidencia-boton:hover,
.perfil .evidencia-boton:focus-within {
    border-color: var(--arpia-space);
    background: color-mix(in srgb, var(--arpia-space) 10%, transparent);
}

/* El campo real queda invisible pero activo: iOS abre el selector al tocar la etiqueta */
.perfil input.evidencia-entrada {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.evidencia-elegida .boton-texto-mini {
    padding: 4px 2px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--arpia-space);
    cursor: pointer;
}

.perfil select {
    max-width: 100%;
}

.evidencia-elegida {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    color: var(--arpia-text-secondary);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.vista-evidencia,
.miniatura-evidencia {
    display: block;
    width: 100%;
    max-height: 180px;
    margin-top: 8px;
    border: 1px solid var(--t-borde);
    border-radius: 10px;
    object-fit: cover;
}

.miniatura-evidencia {
    max-width: 240px;
}

.boton-registrar {
    min-height: 48px;
    background: var(--arpia-primary);
    border: 1px solid color-mix(in srgb, var(--arpia-text) 18%, transparent);
    border-radius: 10px;
    color: var(--arpia-text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.boton-registrar:hover:not(:disabled) {
    background: var(--arpia-electric);
}

.boton-registrar:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.lista-novedades {
    max-height: 620px;
}

.novedad.nivel-critico { --color-item: var(--arpia-nivel-roja); }
.novedad.nivel-medio { --color-item: var(--arpia-nivel-amarilla); }
.novedad.nivel-bajo { --color-item: var(--arpia-nivel-verde); }

.novedad-cerrada {
    opacity: 0.7;
}

.acciones-novedad {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.acciones-novedad .boton {
    min-height: 28px;
    font-size: 12px;
}

/* El evento de la línea de tiempo al que pertenece la novedad */
.novedad-evento {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 8px;
    padding: 7px 9px;
    border-radius: 9px;
    border: 1px dashed var(--arpia-border);
    font-size: 12px;
}

.novedad-evento.con-evento {
    border-style: solid;
    border-color: color-mix(in srgb, var(--arpia-space) 40%, transparent);
    background: color-mix(in srgb, var(--arpia-space) 7%, transparent);
}

.novedad-evento label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 260px;
    min-width: 0;
    color: var(--arpia-text-secondary);
    font-weight: 600;
}

.novedad-evento select {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--arpia-space) 18%, transparent);
    background: color-mix(in srgb, var(--arpia-void) 42%, transparent);
    color: var(--arpia-text);
    font: inherit;
    font-size: 12px;
}

.novedad-evento select option { background: var(--arpia-surface); }

.novedad-evento a {
    color: var(--arpia-space);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.texto-ayuda-campo {
    margin: -4px 0 0;
    font-size: 11px;
}

/* =========================
   LÍNEA DE TIEMPO DEL EVENTO
   ========================= */

.incidente-novedades {
    margin-top: 16px;
}

.incidente-novedades h4 {
    margin: 0 0 8px;
    color: var(--arpia-text);
    font-size: 14px;
}

.incidente-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.incidente-acciones .boton {
    text-decoration: none;
}

.incidente-acciones[hidden],
.incidente-acciones .boton[hidden] {
    display: none;
}

.linea-tiempo {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 520px;
    margin: 10px 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.paso {
    position: relative;
    display: grid;
    grid-template-columns: 74px 18px 1fr;
    align-items: start;
    gap: 10px;
    padding: 10px 0;
}

/* la línea que une los pasos */
.paso:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 82px;
    top: 26px;
    bottom: -6px;
    width: 2px;
    background: color-mix(in srgb, var(--arpia-space) 35%, transparent);
}

.paso-hora {
    color: var(--arpia-evidence);
    font-family: var(--fuente-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}

.paso-punto {
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border: 3px solid var(--arpia-space);
    border-radius: 50%;
    background: var(--arpia-bg);
}

.paso-automatico .paso-punto {
    border-color: var(--arpia-text-muted);
}

.paso-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.paso-detalle {
    color: var(--t-texto-suave);
    font-size: 12px;
}

.paso-pie {
    color: var(--arpia-text-muted);
    font-size: 11px;
}

.form-paso[hidden] {
    display: none;
}

.pasos-sugeridos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* =========================
   MODO LIGERO Y CELULARES
   =========================
 * comun.js pone la clase `ligero` en equipos modestos (pantalla pequeña, pocos
 * núcleos, poca memoria o ahorro de datos). Aquí se quitan los efectos que más
 * cuestan: desenfoques, sombras grandes, degradados y animaciones.
 */

.ligero .pagina-tablero .ia,
.ligero .pagina-tablero .grafico,
.ligero .ampliado {
    background: var(--arpia-surface);
    box-shadow: none;
}

.ligero .pagina-tablero .ia::before,
.ligero .pagina-tablero .grafico::before,
.ligero .pagina-tablero .ia::after,
.ligero .pagina-tablero .grafico::after {
    display: none;   /* halos y brillos decorativos */
}

.ligero .pagina-tablero .respuesta,
.ligero .pagina-tablero .pregunta,
.ligero .menu-panel,
.ligero .tarjeta-desastre,
.ligero .item,
.ligero .boton-activar-alarma {
    background: color-mix(in srgb, var(--arpia-void) 35%, transparent);
    box-shadow: none;
}

.ligero .menu-panel {
    background: var(--arpia-elevated);
}

.ligero .ampliado::backdrop {
    backdrop-filter: none;
}

.ligero .pagina-tablero .mapa {
    box-shadow: none;
    filter: none;
}

/* El filtro oscuro sobre el mapa se recalcula al mover: en equipos lentos se quita */
.ligero .leaflet-tile-pane .leaflet-tile {
    filter: brightness(0.75) saturate(0.7);
}

.ligero *,
.ligero *::before,
.ligero *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

/* La alarma sí debe notarse, pero con un parpadeo simple */
.ligero .franja-alarma {
    animation: franja-alarma 1.2s steps(2, end) infinite !important;
    animation-duration: 1.2s !important;
    animation-iteration-count: infinite !important;
    box-shadow: none;
}

.ligero .grafico:hover,
.ligero .tarjeta-desastre:hover,
.ligero .nodo:hover {
    transform: none;
}

@media (max-width: 820px) {
    /* Un fondo fijo obliga a repintar en cada desplazamiento: en el celular se deja quieto */
    body {
        background-attachment: scroll;
    }

    .pagina-tablero .tablero {
        padding: 12px;
        gap: 12px;
    }

    .pagina-tablero .ia {
        padding: 16px;
    }

    .pagina-tablero .grafico {
        padding: 12px;
    }

    .pagina-tablero .mapa-grande,
    .pagina-tablero .mapa-estaciones {
        height: 300px;
    }

    .lista-panel,
    .lista-estaciones,
    .lista-dispositivos,
    .lista-eventos,
    .lista-novedades,
    .linea-tiempo {
        max-height: 340px;
    }

    .magnitud {
        font-size: 38px;
    }

    /* Botones y campos más grandes para tocar con el dedo */
    .boton,
    .menu-item,
    .tipo-grafico,
    .perfil input:not([type="checkbox"]),
    .perfil select,
    .simulador-form input,
    .simulador-form select {
        min-height: 40px;
    }

    .paso {
        grid-template-columns: 62px 16px 1fr;
        gap: 8px;
    }

    .paso:not(:last-child)::before {
        left: 69px;
    }
}

@media (max-width: 520px) {
    .pagina-tablero .marca {
        width: 190px;
        height: 62px;
    }

    .marca-fac {
        width: 120px;
        height: 36px;
        top: 14px;
    }

    .marca-logo {
        width: 92px;
        height: 46px;
        left: 100px;
        top: 8px;
    }

    .barra {
        padding: 8px 12px;
    }

    .pagina-tablero .mapa-grande,
    .pagina-tablero .mapa-estaciones {
        height: 240px;
    }

    .kpis {
        gap: 6px;
    }

    .kpi-mini-cifra {
        font-size: 18px;
    }
}

/* ==========================================================
   ACERCA DEL PROYECTO (acerca.html)
   Página de lectura: una sola columna, ancha cómoda para texto.
   ========================================================== */

.acerca {
    /* ancho explícito: como hijo de un cuerpo en columna se ensanchaba de más
       en el celular y la página se desplazaba de lado */
    width: 100%;
    box-sizing: border-box;
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 20px 64px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ---------- Portada ---------- */

.acerca-portada {
    text-align: center;
    padding: 32px 20px;
    border: 1px solid var(--arpia-border);
    border-radius: 10px;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(53, 102, 204, .22), transparent 62%),
        var(--arpia-surface);
}

.acerca-etiqueta {
    margin: 0 0 8px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--arpia-space);
}

.acerca-titulo {
    margin: 0 0 14px;
    font-size: 30px;
    line-height: 1.2;
    color: var(--arpia-text);
}

.acerca-lema {
    max-width: 640px;
    margin: 0 auto;
    color: var(--arpia-text-secondary);
    line-height: 1.6;
}

.acerca-datos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--arpia-border);
}

.acerca-dato {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.acerca-cifra {
    font-size: 22px;
    font-weight: 700;
    color: var(--arpia-space);
}

.acerca-etiqueta-dato {
    font-size: 12px;
    color: var(--arpia-text-muted);
}

/* ---------- Bloques de texto ---------- */

.acerca-bloque h2 {
    margin: 0 0 14px;
    padding-bottom: 10px;
    font-size: 20px;
    border-bottom: 1px solid var(--arpia-border);
    color: var(--arpia-text);
}

.acerca-bloque h3 {
    margin: 22px 0 8px;
    font-size: 15px;
    color: var(--arpia-space);
}

.acerca-bloque p {
    margin: 0 0 12px;
    line-height: 1.7;
    color: var(--arpia-text-secondary);
}

.acerca-bloque strong {
    color: var(--arpia-text);
}

/* ---------- Objetivos ---------- */

.acerca-objetivo-general {
    padding: 18px 20px;
    border-left: 3px solid var(--arpia-primary);
    border-radius: 0 8px 8px 0;
    background: var(--arpia-elevated);
}

.acerca-objetivo-general h3 {
    margin-top: 0;
}

.acerca-objetivo-general p {
    margin: 0;
}

.acerca-lista-objetivos {
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.acerca-lista-objetivos li {
    line-height: 1.65;
    color: var(--arpia-text-secondary);
}

.acerca-lista-objetivos::marker,
.acerca-lista-objetivos li::marker {
    color: var(--arpia-space);
}

/* ---------- Tarjetas de "qué hace" ---------- */

.acerca-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
}

.acerca-tarjeta {
    padding: 18px;
    border: 1px solid var(--arpia-border);
    border-radius: 8px;
    background: var(--arpia-surface);
}

.acerca-tarjeta h3 {
    margin: 10px 0 6px;
    font-size: 15px;
    color: var(--arpia-text);
}

.acerca-tarjeta p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.acerca-icono {
    font-size: 24px;
    line-height: 1;
}

/* ---------- Pasos ---------- */

.acerca-pasos {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.acerca-pasos li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    align-items: start;
}

.acerca-paso-num {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--arpia-border-active);
    background: var(--arpia-elevated);
    color: var(--arpia-space);
    font-weight: 700;
}

.acerca-pasos h3 {
    margin: 6px 0 4px;
    font-size: 15px;
    color: var(--arpia-text);
}

.acerca-pasos p {
    margin: 0;
    font-size: 14px;
}

/* ---------- Tabla de criterios ---------- */

.acerca-tabla-envoltura {
    overflow-x: auto;                   /* en el celular la tabla se desliza */
    border: 1px solid var(--arpia-border);
    border-radius: 8px;
}

.acerca-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.acerca-tabla th,
.acerca-tabla td {
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--arpia-border);
}

.acerca-tabla th {
    background: var(--arpia-elevated);
    color: var(--arpia-text);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.acerca-tabla td {
    color: var(--arpia-text-secondary);
}

.acerca-tabla tbody tr:last-child td {
    border-bottom: 0;
}

/* ---------- Fuentes ---------- */

.acerca-fuentes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.acerca-fuentes li {
    padding: 12px 16px;
    border: 1px solid var(--arpia-border);
    border-radius: 8px;
    background: var(--arpia-surface);
    color: var(--arpia-text);
    font-size: 14px;
}

.acerca-fuentes span {
    display: block;
    margin-top: 4px;
    color: var(--arpia-text-muted);
    font-size: 13px;
}

/* ---------- Ficha técnica ---------- */

.acerca-ficha {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2px;
    border: 1px solid var(--arpia-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--arpia-border);
}

.acerca-ficha > div {
    padding: 12px 16px;
    background: var(--arpia-surface);
}

.acerca-ficha dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--arpia-text-muted);
}

.acerca-ficha dd {
    margin: 4px 0 0;
    color: var(--arpia-text);
    font-size: 14px;
}

.acerca-ficha dd[data-estado="ok"] { color: var(--arpia-success); }
.acerca-ficha dd[data-estado="degraded"] { color: var(--arpia-warning); }
.acerca-ficha dd[data-estado="down"] { color: var(--arpia-critical); }

.acerca-nota {
    margin-top: 16px !important;
    padding: 14px 16px;
    border-left: 3px solid var(--arpia-warning);
    border-radius: 0 8px 8px 0;
    background: var(--arpia-elevated);
    font-size: 13px;
}

/* ---------- Celular ---------- */

@media (max-width: 700px) {
    .acerca {
        padding: 16px 16px 48px;
        gap: 28px;
    }

    .acerca-portada {
        padding: 24px 16px;
    }

    .acerca-titulo {
        font-size: 23px;
    }

    .acerca-datos {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
    }

    .acerca-tabla th,
    .acerca-tabla td {
        padding: 9px 12px;
    }
}

/* Modo ligero: sin degradados ni sombras */
.ligero .acerca-portada {
    background: var(--arpia-surface);
}

/* ==========================================================
   PROTOCOLO DE ACTUACIÓN (columna izquierda del monitoreo)
   Contenido fijo: se lee aunque no haya servidor, que es
   justo cuando más falta hace.
   ========================================================== */

.pagina-tablero .protocolo {
    margin-top: 14px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--arpia-void) 25%, transparent);
    border: 1px solid color-mix(in srgb, var(--arpia-space) 10%, transparent);
    border-left: 2px solid var(--arpia-success);
    border-radius: 11px;
    font-size: 12px;
}

.pagina-tablero .protocolo > h3 {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--arpia-text);
}

.protocolo-bloque + .protocolo-bloque {
    margin-top: 8px;
}

.protocolo-bloque summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--arpia-elevated) 60%, transparent);
    color: var(--arpia-text-secondary);
    font-size: 11px;
    cursor: pointer;
    list-style: none;
}

.protocolo-bloque summary::-webkit-details-marker { display: none; }

.protocolo-bloque summary:hover {
    background: var(--arpia-elevated);
}

.protocolo-bloque[open] summary {
    margin-bottom: 4px;
}

.protocolo-fase {
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.protocolo-fase-durante {
    background: color-mix(in srgb, var(--arpia-critical) 22%, transparent);
    color: var(--arpia-nivel-naranja);
}

.protocolo-fase-despues {
    background: color-mix(in srgb, var(--arpia-success) 18%, transparent);
    color: var(--arpia-success);
}

.protocolo-pasos {
    margin: 0;
    padding: 4px 0 4px 26px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.protocolo-pasos li {
    color: var(--arpia-text-muted);
    line-height: 1.5;
}

.protocolo-pasos li::marker {
    color: var(--arpia-space);
    font-weight: 700;
}

.protocolo-pasos strong {
    color: var(--arpia-text-secondary);
}

.protocolo-punto {
    display: flex;
    gap: 8px;
    margin: 10px 0 0;
    padding: 9px 11px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--arpia-space) 12%, transparent);
    border: 1px dashed color-mix(in srgb, var(--arpia-space) 35%, transparent);
    color: var(--arpia-text-secondary);
    line-height: 1.5;
}

.protocolo-punto strong {
    color: var(--arpia-text);
}

.protocolo-enlace {
    display: inline-block;
    margin-top: 9px;
    color: var(--arpia-space);
    text-decoration: none;
    font-size: 11px;
}

.protocolo-enlace:hover {
    text-decoration: underline;
}

/* Columnas muy estrechas: que el encabezado envuelva y la lista no empuje */
.protocolo-bloque summary {
    flex-wrap: wrap;
}

.pagina-tablero .protocolo {
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .protocolo-pasos {
        padding-left: 20px;
    }
}

/* ==========================================================
   CLIMA DE LA BASE (clima.html)
   ========================================================== */

.clima-cabeza {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--arpia-border);
}

.clima-icono {
    font-size: 46px;
    line-height: 1;
}

.clima-temperatura {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--arpia-text);
}

.clima-descripcion {
    margin: 2px 0 0;
    color: var(--arpia-space);
    font-size: 14px;
}

.clima-sensacion {
    margin: 2px 0 0;
    color: var(--arpia-text-muted);
    font-size: 12px;
}

.clima-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}

.clima-rejilla-mini {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    margin-top: 10px;
}

.clima-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 11px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--arpia-elevated) 55%, transparent);
}

.clima-dato-etiqueta {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--arpia-text-muted);
}

.clima-dato-valor {
    font-size: 15px;
    font-weight: 600;
    color: var(--arpia-text);
}

.clima-dato-pie {
    font-size: 10px;
    color: var(--arpia-text-muted);
}

/* ---------- Avisos ---------- */

.clima-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid var(--color, var(--arpia-warning));
    background: color-mix(in srgb, var(--color, var(--arpia-warning)) 12%, transparent);
    color: var(--arpia-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

/* ---------- Pista ---------- */

.clima-pista {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--arpia-void) 25%, transparent);
    border: 1px solid color-mix(in srgb, var(--arpia-space) 10%, transparent);
    border-left: 2px solid var(--arpia-space);
}

.clima-pista h3 {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--arpia-text);
}

.clima-pista-datos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: center;
}

.clima-pista-cifra {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--arpia-space);
}

.clima-pista-etiqueta {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--arpia-text-muted);
}

/* ---------- Próximas horas ---------- */

.clima-horas {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.clima-hora {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 58px;
    padding: 10px 8px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--arpia-elevated) 55%, transparent);
}

.clima-hora-reloj {
    font-size: 11px;
    color: var(--arpia-text-muted);
}

.clima-hora-icono {
    font-size: 18px;
    line-height: 1;
}

.clima-hora-temp {
    font-size: 14px;
    font-weight: 600;
    color: var(--arpia-text);
}

.clima-hora-lluvia {
    font-size: 10px;
    color: var(--arpia-space);
}

/* ---------- Próximos días ---------- */

.clima-dia {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    align-items: center;
}

.clima-dia-nombre {
    color: var(--arpia-text);
    font-size: 13px;
    text-transform: capitalize;
}

.clima-dia-temps {
    color: var(--arpia-text-secondary);
    font-size: 13px;
}

.clima-dia-lluvia {
    grid-column: 1 / -1;
    color: var(--arpia-text-muted);
    font-size: 11px;
}

/* ---------- METAR ---------- */

.clima-metar-cat {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--arpia-text);
}

.clima-metar-crudo {
    margin: 10px 0 6px;
    padding: 9px 11px;
    border-radius: 7px;
    background: var(--arpia-void);
    border: 1px solid var(--arpia-border);
    color: var(--arpia-space);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .clima-temperatura { font-size: 28px; }
    .clima-icono { font-size: 38px; }
    .clima-rejilla { grid-template-columns: repeat(2, 1fr); }
}

/* Capas de nubes reportadas en el METAR */
.clima-nubes {
    margin: 12px 0 0;
    padding: 9px 11px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--arpia-elevated) 45%, transparent);
    color: var(--arpia-text-secondary);
    font-size: 12px;
}

/* ==========================================================
   CAPAS DE SATÉLITE SOBRE EL MAPA
   Van en su propio panel de Leaflet (createPane "clima"), fuera de
   .leaflet-tile-pane, que es el que lleva la inversión del mapa
   oscuro. Así conservan el color real de la fuente y, sobre todo,
   se mezclan bien: invertirlas antes de componerlas volvía marrones
   los verdes de la lluvia.
   ========================================================== */

/* Aeródromo: torre de control con el color de su categoría de vuelo
   (verde VFR, amarillo MVFR, naranja IFR, rojo LIFR) */
.aerodromo {
    display: grid;
    place-items: end center;
    color: var(--color-vuelo);
}

.aerodromo svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    /* contorno oscuro: sobre nubes claras la torre seguiría leyéndose */
    filter: drop-shadow(0 0 1.2px rgba(0, 0, 0, .95))
            drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

/* La base propia: un halo para encontrarla entre las 54 */
.aerodromo-base svg {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .95))
            drop-shadow(0 0 7px var(--arpia-space));
}

.ligero .aerodromo svg {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9));
}

/* Hora de cada capa, bajo la leyenda del mapa */
.capas-hora {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--arpia-text-muted);
}

.capas-hora strong {
    color: var(--arpia-text-secondary);
    font-weight: 600;
}

/* Control de capas de Leaflet, en los colores del tablero */
.leaflet-control-layers {
    background: var(--arpia-surface) !important;
    border: 1px solid var(--arpia-border) !important;
    border-radius: 8px !important;
    color: var(--arpia-text-secondary);
    font-size: 12px;
}

.leaflet-control-layers-expanded {
    padding: 8px 10px !important;
}

.leaflet-control-layers label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0;
    cursor: pointer;
}

.leaflet-control-layers-toggle {
    background-color: var(--arpia-surface) !important;
}

/* ==========================================================
   BARRA DE CAPAS (debajo del mapa, en vez del control de Leaflet)
   ========================================================== */

/* Va debajo del mapa, como un bloque más: sobre el mapa tapaba la vista */
.barra-capas {
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.barra-capas-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--arpia-void) 45%, transparent);
    border: 1px solid var(--arpia-border);
}

.barra-capas-titulo {
    color: var(--arpia-text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 0 2px;
}

.chip-capa {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--arpia-border);
    background: var(--arpia-surface);
    color: var(--arpia-text-muted);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.chip-capa:hover {
    border-color: var(--arpia-border-active);
    color: var(--arpia-text-secondary);
}

.chip-capa-activa {
    background: color-mix(in srgb, var(--arpia-primary) 30%, var(--arpia-surface));
    border-color: var(--arpia-space);
    color: var(--arpia-text);
}

.chip-capa-cargando {
    opacity: .6;
    cursor: progress;
}

.chip-capa-fallida {
    border-color: var(--arpia-critical);
    color: var(--arpia-text-muted);
}

.chip-capa-nota {
    color: var(--arpia-space);
    font-size: 9px;
}

.chip-capa-activa .chip-capa-nota {
    color: var(--arpia-text-secondary);
}

@media (max-width: 700px) {
    .barra-capas {
        margin: 6px 0 0;
    }

    .barra-capas-fila {
        gap: 4px;
        padding: 4px 5px;
    }

    .chip-capa {
        padding: 3px 7px;
        font-size: 10px;
    }

    /* en el celular las notas sobran: el espacio es del nombre */
    .chip-capa-nota { display: none; }
}

/* ==========================================================
   MARCADORES DEL MAPA (js/marcadores.js)
   Un dibujo por tipo de desastre, con el color del nivel.
   En modo rendimiento se ve la misma figura, sin movimiento.
   ========================================================== */

.marcador {
    position: relative;
    display: grid;
    place-items: center;
    color: var(--color-nivel);
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--arpia-void) 88%, transparent) 55%,
        color-mix(in srgb, var(--arpia-void) 40%, transparent) 100%);
    border: 1.5px solid var(--color-nivel);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-nivel) 45%, transparent),
                inset 0 0 6px color-mix(in srgb, var(--color-nivel) 20%, transparent);
}

.marcador svg {
    width: 68%;
    height: 68%;
    overflow: visible;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
}

/* El anillo que late en los eventos que dispararon alerta */
.marcador-pulso {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--color-nivel);
    opacity: 0;
}

.marcador-vivo .marcador-pulso {
    animation: marcador-pulso 1.8s ease-out infinite;
}

.marcador-quieto.marcador-alerta {
    /* sin animación, la alerta se distingue por un borde más grueso */
    border-width: 3px;
}

@keyframes marcador-pulso {
    0% { transform: scale(.75); opacity: .85; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- Movimiento por tipo (solo en modo normal) ---------- */

.marcador-quieto .mov { animation: none !important; }

/* Los quietos sin sombra en el dibujo: son cientos y cada sombra se vuelve a
   pintar con el zoom. El brillo del borde se mantiene. */
.marcador-quieto svg { filter: none; }

/* Arrastrando o haciendo zoom: todo quieto, para que el mapa vaya fluido */
.mapa-moviendo .marcador-vivo *,
.mapa-moviendo .marcador-pulso,
.mapa-moviendo .avion-fac::before,
.mapa-moviendo .avion-emergencia {
    animation-play-state: paused !important;
}

/* Sismo: las ondas salen del epicentro */
.marcador-vivo .onda {
    transform-origin: 12px 15px;
    animation: onda-sismo 2s ease-out infinite;
}

.marcador-vivo .onda-2 { animation-delay: .45s; }

@keyframes onda-sismo {
    0% { transform: scale(.35); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* Incendio: la llama tiembla */
.marcador-vivo .llama {
    transform-origin: 12px 20px;
    animation: llama-tiembla 1.1s ease-in-out infinite;
}

.marcador-vivo .llama-2 { animation-duration: .8s; animation-delay: .15s; }

@keyframes llama-tiembla {
    50% { transform: scaleY(1.12) scaleX(.94) translateY(-.4px); }
}

/* Agua: las olas corren */
.marcador-vivo .ola {
    animation: ola-corre 2.2s linear infinite;
}

.marcador-vivo .ola-2 { animation-duration: 3s; animation-direction: reverse; }

@keyframes ola-corre {
    to { transform: translateX(-7.2px); }
}

/* Volcán: el humo sube */
.marcador-vivo .humo {
    transform-origin: 12px 8px;
    animation: humo-sube 2.4s ease-out infinite;
}

@keyframes humo-sube {
    0% { transform: translateY(2px) scale(.7); opacity: 0; }
    40% { opacity: 1; }
    100% { transform: translateY(-3px) scale(1.15); opacity: 0; }
}

/* Deslizamiento: el material cae */
.marcador-vivo .caida {
    animation: material-cae 2.6s ease-in infinite;
}

.marcador-vivo .caida-2 { animation-delay: .3s; }
.marcador-vivo .caida-3 { animation-delay: .6s; }

@keyframes material-cae {
    0%, 70% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(1.5px, 3px); opacity: .35; }
}

/* Huracán: el espiral gira */
.marcador-vivo .giro {
    transform-origin: 12px 12px;
    animation: espiral-gira 6s linear infinite;
}

@keyframes espiral-gira {
    to { transform: rotate(360deg); }
}

/* Quien pidió menos movimiento en su sistema, no lo tiene */
@media (prefers-reduced-motion: reduce) {
    .marcador .mov,
    .marcador-pulso {
        animation: none !important;
    }
}

/* Modo ligero: sin resplandores ni degradados */
.ligero .marcador {
    background: color-mix(in srgb, var(--arpia-void) 85%, transparent);
    box-shadow: none;
}

.ligero .marcador svg { filter: none; }

/* ==========================================================
   CENTRO DE MONITOREO (pantalla completa del mapa)

   Ojo con los nombres: la GUI original ya tenía una clase `.centro`
   (tablero.css) que coloca elementos en mitad de la pantalla. Por eso
   todo aquí se llama `monitor-*`.
   ========================================================== */

.envoltura-mapa {
    position: relative;
}

.boton-pantalla {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 500;                 /* sobre los controles de Leaflet (400) */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 8px;
    border: 1px solid var(--arpia-border);
    background: color-mix(in srgb, var(--arpia-void) 85%, transparent);
    color: var(--arpia-text-secondary);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.boton-pantalla:hover {
    border-color: var(--arpia-space);
    color: var(--arpia-text);
}

/* ---------- En pantalla completa ---------- */

.envoltura-mapa:fullscreen,
.envoltura-mapa.sin-api-pantalla {
    width: 100vw;
    height: 100vh;
    background: var(--arpia-void);
}

.envoltura-mapa.sin-api-pantalla {
    position: fixed;
    inset: 0;
    z-index: 9000;
}

.envoltura-mapa:fullscreen .mapa,
.envoltura-mapa.sin-api-pantalla .mapa {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    border: 0;
}

/* En pantalla completa el botón cede el sitio al encabezado */
.envoltura-mapa:fullscreen .boton-pantalla,
.envoltura-mapa.sin-api-pantalla .boton-pantalla {
    display: none;
}

/*
   Maqueta: el encabezado ocupa todo el ancho pegado arriba y las alertas
   quedan pegadas al borde izquierdo, debajo de él. El centro del mapa
   queda libre, que es lo que uno mira.

        ┌──────────────────────────────┐
        │ encabezado                   │
        ├─────────┬────────────────────┤
        │ alertas │        mapa        │
        └─────────┴────────────────────┘
*/
.monitor {
    position: absolute;
    inset: 0;
    pointer-events: none;         /* el mapa sigue usable por debajo */
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: auto 1fr;
    z-index: 600;
}

/*
   Con el monitor abierto, el resto de la página sobra y además estorba:

   - la barra superior se veía a través del encabezado translúcido;
   - las tarjetas del tablero se pintaban ENCIMA del mapa a pantalla completa,
     porque `.grafico` tiene `isolation: isolate` y eso crea un contexto de
     apilamiento que encierra el z-index de la envoltura.

   Se ocultan los dos, y la envoltura recupera la visibilidad (`visibility`
   se hereda, pero un descendiente puede volver a encenderla). Así no hay que
   mover nada del DOM, que con Leaflet es pedir problemas.
*/
body.con-monitor header.barra {
    display: none;
}

body.con-monitor main.tablero {
    visibility: hidden;
}

/* Los controles de Leaflet viven en la esquina superior: con el encabezado
   del monitor encima quedaban tapados. Se bajan mientras dure la vista. */
body.con-monitor .leaflet-top .leaflet-control {
    margin-top: 88px;
}

body.con-monitor .envoltura-mapa {
    visibility: visible;
}

.monitor-cabeza {
    grid-column: 1 / -1;
    grid-row: 1;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 18px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--arpia-void) 96%, transparent),
        color-mix(in srgb, var(--arpia-void) 80%, transparent));
    border-bottom: 1px solid var(--arpia-border);
}

/* Los logos institucionales: en pantalla completa la barra de la página
   desaparece, así que esta vista tiene que identificarse sola. */
.monitor-marcas {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding-right: 16px;
    margin-right: 2px;
    border-right: 1px solid var(--arpia-border);
}

.monitor-fac {
    height: 34px;
    width: auto;
    object-fit: contain;
}

.monitor-arpia {
    height: 42px;
    width: 42px;
    object-fit: contain;
    border-radius: 6px;
}

.monitor-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 0 1 auto;          /* cede espacio antes que las cifras y el reloj */
}

/*
   Pantallas intermedias (tablet en horizontal, portátiles chicos): en una
   sola fila caben justo, y el título —lo único que puede encoger— se quedaba
   en «Panor…». Se recorta lo accesorio para devolverle sitio.
*/
@media (max-width: 1150px) {
    .monitor-fecha {
        display: none;            /* el reloj ya da la referencia */
    }

    .monitor-cabeza {
        gap: 12px;
        padding: 10px 14px;
    }

    .monitor-marcas {
        gap: 9px;
        padding-right: 12px;
    }

    .monitor-fac { height: 27px; }
    .monitor-arpia { height: 34px; width: 34px; }

    .monitor-reloj { font-size: 23px; }

    /* Los botones se quedan con su icono: el texto costaba 120 px.
       Va con el contenedor delante porque el estilo base aparece más
       abajo en el archivo y, a igual especificidad, ganaba aquel. */
    .monitor-cabeza .monitor-boton {
        font-size: 0;
        padding: 6px 9px;
    }

    .monitor-cabeza .monitor-boton::first-letter {
        font-size: 14px;
    }
}

/* El bloque interno también tiene que poder encogerse, si no el título
   crece y se monta sobre los contadores (se veía en iPad horizontal). */
.monitor-titulo > div {
    min-width: 0;
}

.monitor-titulo h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    color: var(--arpia-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitor-fecha {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--arpia-text-muted);
    white-space: nowrap;          /* partida en tres líneas estrujaba el título */
    overflow: hidden;
    text-overflow: ellipsis;
}

.monitor-punto {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--arpia-success);
    box-shadow: 0 0 10px var(--arpia-success);
}

:root:not(.ligero) .monitor-punto {
    animation: monitor-latido 2s ease-in-out infinite;
}

@keyframes monitor-latido {
    50% { opacity: .35; }
}

.monitor-contadores {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;        /* envueltos estiraban el encabezado a 140 px */
    flex-shrink: 0;
}

.monitor-contador {
    min-width: 70px;
    padding: 6px 11px;
    border-radius: 9px;
    border: 1px solid var(--arpia-border);
    background: color-mix(in srgb, var(--arpia-surface) 75%, transparent);
    text-align: center;
}

.monitor-contador-alerta {
    border-color: var(--arpia-critical);
    background: color-mix(in srgb, var(--arpia-critical) 16%, transparent);
}

.monitor-cifra {
    display: block;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--arpia-text);
}

.monitor-etiqueta {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--arpia-text-muted);
}

.monitor-derecha {
    display: flex;
    align-items: center;
    gap: 14px;
}

.monitor-reloj {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--arpia-space);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.monitor-acciones {
    display: flex;
    gap: 6px;
}

.monitor-boton {
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid var(--arpia-border);
    background: var(--arpia-surface);
    color: var(--arpia-text-secondary);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}

.monitor-boton:hover {
    border-color: var(--arpia-space);
    color: var(--arpia-text);
}

/* ---------- Verificación en dos pasos (login y Usuarios) ---------- */

/* El código de 6 dígitos: grande y espaciado, que se lea de un vistazo */
.perfil input.campo-codigo {
    font-family: Consolas, "Cascadia Mono", "Roboto Mono", monospace;
    font-size: 22px;
    letter-spacing: .25em;
    text-align: center;
}

.dosfa {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.dosfa .texto-ayuda { margin: 0; }

.dosfa-alerta {
    padding: 8px 10px;
    border-left: 3px solid var(--arpia-warning);
    border-radius: 6px;
    background: color-mix(in srgb, var(--arpia-warning) 10%, transparent);
}

.dosfa-pasos {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: var(--arpia-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* El QR va sobre blanco: las cámaras lo leen mal sobre fondo oscuro */
.dosfa-qr {
    width: min(220px, 70vw);
    margin: 10px 0 6px;
    padding: 6px;
    border-radius: 10px;
    background: #fff;
}

.dosfa-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.dosfa-manual summary {
    color: var(--arpia-space);
    font-size: 12px;
    cursor: pointer;
}

.dosfa-manual p {
    margin: 6px 0 0;
    font-size: 12px;
}

.dosfa-secreto {
    font-size: 13px;
    letter-spacing: .06em;
    user-select: all;
}

.dosfa-codigos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    margin: 0;
    padding: 12px 12px 12px 34px;
    border: 1px dashed var(--arpia-border-active);
    border-radius: 10px;
    background: color-mix(in srgb, var(--arpia-void) 45%, transparent);
    color: var(--arpia-text-muted);
}

.dosfa-codigos code {
    color: var(--arpia-text);
    font-size: 15px;
    letter-spacing: .05em;
    user-select: all;
}

.dosfa-confirmar {
    margin-top: 4px;
}

.formulario-login .boton-texto-mini {
    justify-self: center;
    border: 0;
    background: none;
    cursor: pointer;
}

@media (max-width: 520px) {
    .dosfa-codigos { grid-template-columns: 1fr; }
}

/* ---------- Tráfico aéreo (capa del mapa) ---------- */

.avion {
    background: none;
    border: 0;
}

.avion svg {
    display: block;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8));
    transition: transform .6s ease;
}

/* Bloque de datos debajo de cada avión: siglas, altitud y velocidad */
.leaflet-tooltip.avion-etiqueta {
    --color-avion: #54B1DC;
    display: grid;
    padding: 1px 6px 2px;
    border: 0;
    border-left: 2px solid var(--color-avion);
    border-radius: 3px;
    background: rgba(5, 4, 13, .82);
    box-shadow: none;
    color: #F0F6FC;
    font-family: Consolas, "Cascadia Mono", "Roboto Mono", monospace;
    font-size: 10px;
    line-height: 1.25;
    white-space: nowrap;
    pointer-events: none;
}

.leaflet-tooltip.avion-etiqueta::before {
    display: none;            /* sin la flechita de los tooltips de Leaflet */
}

.avion-etiqueta b {
    font-size: 11px;
    letter-spacing: .03em;
}

.avion-etiqueta span {
    color: #A1A5A9;
}

.avion-etiqueta-emergencia {
    background: rgba(127, 29, 29, .9) !important;
}

/* Aeronaves de la FAC: más grandes, doradas y con un halo que late */
.avion-fac {
    position: relative;
}

.avion-fac::before {
    content: "";
    position: absolute;
    inset: -7px;
    border: 2px solid #FBBF24;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(251, 191, 36, .6);
}

:root:not(.ligero) .avion-fac::before {
    animation: avion-fac-halo 2s ease-out infinite;
}

@keyframes avion-fac-halo {
    0% { transform: scale(.8); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.avion-fac svg {
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, .9));
}

.leaflet-tooltip.avion-etiqueta-fac {
    border-left-color: #FBBF24;
    background: rgba(66, 45, 4, .92);
}

.avion-etiqueta-fac b {
    color: #FDE68A;
}

.pastilla-fac {
    background: rgba(251, 191, 36, .18);
    color: #FBBF24;
    font-weight: 700;
}

/* Etiqueta de los aeropuertos de origen y destino de la aeronave elegida */
.leaflet-tooltip.avion-aeropuerto {
    border-left-color: #F0F6FC;
}

/* Bloque de ruta dentro de la ficha de la aeronave */
.avion-ruta {
    display: grid;
    gap: 2px;
    margin: 6px 0;
    padding: 6px 8px;
    border-left: 3px solid #54B1DC;
    border-radius: 4px;
    background: rgba(84, 177, 220, .1);
    line-height: 1.4;
}

.avion-ruta small {
    opacity: .8;
}

.avion-ruta-vacia {
    border-left-color: #6A737C;
    background: rgba(106, 115, 124, .1);
}

/* Squawk 7500/7600/7700: imposible de pasar por alto */
.avion-emergencia svg {
    filter: drop-shadow(0 0 6px #EF4444);
}

:root:not(.ligero) .avion-emergencia {
    animation: avion-emergencia 1s ease-in-out infinite;
}

@keyframes avion-emergencia {
    50% { opacity: .35; }
}

/* ---------- Encabezado: semáforo, clima, avisos y hora Zulu ---------- */

/* Semáforo de la base: una palabra que se lee desde lejos */
.monitor-semaforo {
    --color-semaforo: var(--arpia-text-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--color-semaforo) 55%, transparent);
    background: color-mix(in srgb, var(--color-semaforo) 13%, var(--arpia-void));
    cursor: pointer;
    /* es un botón: sin el aspecto del navegador */
    font: inherit;
    color: inherit;
    text-align: left;
    transition: border-color .15s, background-color .15s;
}

.monitor-semaforo:hover,
.monitor-semaforo[aria-expanded="true"] {
    border-color: var(--color-semaforo);
    background: color-mix(in srgb, var(--color-semaforo) 22%, var(--arpia-void));
}

.monitor-semaforo:focus-visible {
    outline: 2px solid var(--color-semaforo);
    outline-offset: 2px;
}

.monitor-semaforo small i {
    font-style: normal;
    opacity: .8;
}

/* ---------- ¿Por qué? Detalle del estado de la base ---------- */

.monitor-porque {
    --color-semaforo: var(--arpia-text-muted);
    position: absolute;
    z-index: 5;
    top: var(--monitor-alto-cabeza, 76px);
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100% - 24px));
    max-height: calc(100% - var(--monitor-alto-cabeza, 76px) - 16px);
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    pointer-events: auto;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-semaforo) 50%, var(--arpia-border));
    background: var(--arpia-elevated);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    overflow: hidden;
}

.monitor-porque[hidden] { display: none; }

/* Abierta, queda por encima de la barra de capas y los controles del mapa */
.monitor.porque-abierto { z-index: 1100; }

.monitor-porque[data-nivel="normal"]   { --color-semaforo: var(--arpia-nivel-verde); }
.monitor-porque[data-nivel="atencion"] { --color-semaforo: var(--arpia-nivel-naranja); }
.monitor-porque[data-nivel="alerta"]   { --color-semaforo: var(--arpia-nivel-roja); }

.monitor-porque-cabeza {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--color-semaforo) 14%, var(--arpia-void));
    border-bottom: 1px solid var(--arpia-border);
}

.monitor-porque-cabeza > div { flex: 1; min-width: 0; display: grid; line-height: 1.15; }

.monitor-porque-cabeza small {
    color: var(--arpia-text-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.monitor-porque-cabeza b {
    color: var(--color-semaforo);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .06em;
}

.monitor-porque-cabeza p {
    margin: 2px 0 0;
    color: var(--arpia-text-muted);
    font-size: 11px;
}

.monitor-porque-cerrar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--arpia-border);
    background: var(--arpia-surface);
    color: var(--arpia-text-secondary);
    font: inherit;
    cursor: pointer;
}

.monitor-porque-cuerpo {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px 14px;
    display: grid;
    gap: 10px;
}

.monitor-porque-intro {
    margin: 0;
    color: var(--arpia-text-secondary);
    font-size: 13px;
}

.monitor-razon {
    --color-razon: var(--arpia-nivel-verde);
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--arpia-border);
    border-left: 3px solid var(--color-razon);
    background: color-mix(in srgb, var(--color-razon) 7%, var(--arpia-surface));
}

.monitor-razon[data-nivel="atencion"] { --color-razon: var(--arpia-nivel-naranja); }
.monitor-razon[data-nivel="alerta"]   { --color-razon: var(--arpia-nivel-roja); }

.monitor-razon h4 {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 4px;
    color: var(--arpia-text);
    font-size: 14px;
}

.monitor-razon h4 em {
    margin-left: auto;
    color: var(--color-razon);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .12em;
    white-space: nowrap;
}

.monitor-razon > p {
    margin: 0 0 6px;
    color: var(--arpia-text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.monitor-razon ul {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    display: grid;
    gap: 5px;
}

.monitor-razon li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12px;
}

.monitor-razon li b {
    display: block;
    color: var(--arpia-text);
    font-weight: 600;
}

.monitor-razon li small {
    display: block;
    color: var(--arpia-text-muted);
    font-size: 11px;
}

.monitor-razon-punto {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--color-nivel);
}

.monitor-razon-mas {
    margin: 0 0 6px;
    color: var(--arpia-text-muted);
    font-size: 11px;
}

.monitor-razon a,
.monitor-porque-informe {
    color: var(--arpia-space);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.monitor-porque-reglas {
    font-size: 12px;
    color: var(--arpia-text-secondary);
}

.monitor-porque-reglas summary {
    cursor: pointer;
    color: var(--arpia-text-muted);
}

.monitor-porque-reglas ul {
    margin: 6px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
}

.monitor-porque-informe {
    justify-self: start;
    padding: 8px 12px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--arpia-space) 45%, transparent);
    background: color-mix(in srgb, var(--arpia-space) 10%, transparent);
}

.monitor-semaforo[data-nivel="normal"]   { --color-semaforo: var(--arpia-nivel-verde); }
.monitor-semaforo[data-nivel="atencion"] { --color-semaforo: var(--arpia-nivel-naranja); }
.monitor-semaforo[data-nivel="alerta"]   { --color-semaforo: var(--arpia-nivel-roja); }

.monitor-semaforo-luz {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-semaforo);
    box-shadow: 0 0 12px var(--color-semaforo);
}

.monitor-semaforo-texto {
    display: grid;
    line-height: 1.1;
}

.monitor-semaforo small,
.monitor-bloque small {
    color: var(--arpia-text-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.monitor-semaforo b {
    color: var(--color-semaforo);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .06em;
    white-space: nowrap;
}

/* En ALERTA el semáforo late: tiene que verse aunque nadie esté mirando */
:root:not(.ligero) .monitor-semaforo[data-nivel="alerta"] {
    animation: monitor-semaforo-alerta 1.2s ease-in-out infinite;
}

@keyframes monitor-semaforo-alerta {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--arpia-nivel-roja) 0%, transparent); }
    50% { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--arpia-nivel-roja) 55%, transparent); }
}

/* Clima y avisos, a la derecha de los contadores */
.monitor-extras {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.monitor-bloque {
    display: grid;
    gap: 3px;
    padding: 6px 11px;
    border-radius: 9px;
    border: 1px solid var(--arpia-border);
    background: color-mix(in srgb, var(--arpia-surface) 75%, transparent);
    min-width: 0;
}

.monitor-clima-dato {
    color: var(--arpia-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.monitor-clima-dato b {
    color: var(--arpia-text);
    font-size: 16px;
}

.monitor-avisos-titulo[data-estado="atrasado"] {
    color: var(--arpia-warning) !important;
}

.monitor-canales {
    display: flex;
    gap: 5px;
    font-size: 11px;
}

.monitor-canal {
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

.monitor-canal[data-estado="listo"] {
    background: color-mix(in srgb, var(--arpia-nivel-verde) 16%, transparent);
    color: var(--arpia-nivel-verde);
}

.monitor-canal[data-estado="fallando"],
.monitor-canal[data-estado="sin_proveedor"] {
    background: color-mix(in srgb, var(--arpia-nivel-roja) 16%, transparent);
    color: var(--arpia-nivel-roja);
}

/* Reloj de Colombia y, debajo, la hora Zulu; los botones al lado */
.monitor-derecha {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
}

.monitor-reloj { grid-column: 1; grid-row: 1; text-align: right; }

.monitor-zulu {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    color: var(--arpia-text-muted);
    font-size: 11px;
    letter-spacing: .08em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.monitor-zulu b {
    color: var(--arpia-text);
    font-size: 13px;
    letter-spacing: .02em;
}

.monitor-acciones { grid-column: 2; grid-row: 1 / span 2; }

/* Clima y avisos no se aprietan: cede el título, que tiene puntos suspensivos.
   Van apilados (uno encima del otro) para dejarle sitio al título. */
.monitor-extras { flex-shrink: 0; flex-direction: column; gap: 4px; }
.monitor-bloque {
    min-width: auto;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 8px;
    padding: 3px 9px;
}
/* El título nunca se corta con "…": si no cabe en una línea, pasa a dos */
.monitor-titulo { flex: 1 1 auto; min-width: 215px; }
.monitor-cabeza .monitor-titulo h2 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.15;
    text-wrap: balance;
}

/* Portátiles: botones solo con icono */
@media (max-width: 1700px) {
    .monitor-cabeza { gap: 12px; }
    .monitor-cabeza .monitor-boton { font-size: 0; padding: 6px 9px; }
    .monitor-cabeza .monitor-boton::first-letter { font-size: 14px; }
}

/* Portátiles chicos: sin fecha ni clima, cifras más compactas */
@media (max-width: 1400px) {
    .monitor-cabeza .monitor-fecha { display: none; }
    .monitor-cabeza .monitor-titulo h2 { font-size: 16px; }
    .monitor-clima { display: none; }
    /* la etiqueta del SGC solo aparece si se atrasó */
    .monitor-avisos-titulo:not([data-estado="atrasado"]) { display: none; }
    .monitor-semaforo { padding: 6px 12px 6px 10px; }
    .monitor-semaforo small { display: none; }
    .monitor-semaforo b { font-size: 15px; }
    .monitor-contador { min-width: 58px; padding: 4px 8px; }
    .monitor-cifra { font-size: 20px; }
    .monitor-etiqueta { font-size: 9px; }
}

/* Tablet: quedan el semáforo y las cifras */
@media (max-width: 1150px) {
    .monitor-extras { display: none; }
}

/* Encabezado que no cabe: centro-monitoreo.js va agregando estas clases
   (de menos a más) hasta que cabe entero. Nunca se corta el reloj. */
.monitor.compacto-clima .monitor-clima,
.monitor.compacto-avisos .monitor-extras,
.monitor.compacto-marca .monitor-arpia {
    display: none;
}

.monitor.compacto-marca .monitor-marcas {
    padding-right: 10px;
}

.monitor.compacto-cifras .monitor-contador {
    min-width: 52px;
    padding: 3px 7px;
}

.monitor.compacto-cifras .monitor-cifra { font-size: 18px; }
.monitor.compacto-cifras .monitor-etiqueta { font-size: 8px; }

.monitor.compacto-semaforo .monitor-semaforo small { display: none; }
.monitor.compacto-semaforo .monitor-semaforo b { font-size: 13px; }

/* El reloj y la hora Zulu nunca se parten ni se encogen */
.monitor-derecha {
    flex-shrink: 0;
}

/* En iPad y celular, 100vh incluye la zona detrás de las barras del
   navegador y el borde de abajo quedaba tapado: dvh es lo que se ve */
@supports (height: 100dvh) {
    .envoltura-mapa:fullscreen,
    .envoltura-mapa.sin-api-pantalla {
        height: 100dvh;
    }
}

/* ---------- Últimas emergencias, pegadas al borde izquierdo ---------- */

/* También en body: los controles de zoom del mapa viven fuera de .monitor
   y usan este ancho para quedar a la derecha de las alertas. */
.monitor,
body.con-monitor {
    --monitor-ancho: 340px;
}

.monitor-lateral {
    grid-column: 1;
    grid-row: 2;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    width: var(--monitor-ancho);
    max-width: 42vw;
    min-height: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--arpia-bg) 94%, transparent),
        color-mix(in srgb, var(--arpia-void) 92%, transparent));
    border-right: 1px solid var(--arpia-border);
    box-shadow: 8px 0 24px color-mix(in srgb, var(--arpia-void) 45%, transparent);
}

.monitor-lateral-cabeza {
    flex: none;
    display: grid;
    gap: 9px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--arpia-border);
}

.monitor-lateral-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.monitor-lateral h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--arpia-text);
}

.monitor-envivo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--arpia-critical) 45%, transparent);
    background: color-mix(in srgb, var(--arpia-critical) 12%, transparent);
    color: var(--arpia-critical);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.monitor-envivo::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

:root:not(.ligero) .monitor-envivo::before {
    animation: monitor-latido 1.6s ease-in-out infinite;
}

/* Pestañas: alertas enviadas / últimos sismos */
.monitor-pestanas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--arpia-void) 70%, transparent);
    border: 1px solid var(--arpia-border);
}

.monitor-pestanas button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 4px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--arpia-text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.monitor-pestanas button:hover {
    color: var(--arpia-text);
}

.monitor-pestanas button[aria-selected="true"] {
    background: var(--arpia-elevated);
    color: var(--arpia-text);
    box-shadow: inset 0 0 0 1px var(--arpia-border-active);
}

.monitor-cuenta {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--arpia-space) 18%, transparent);
    color: var(--arpia-space);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
}

.monitor-cuenta:empty {
    display: none;
}

/* Filtro por clase de emergencia */
.monitor-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.monitor-filtros button {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--arpia-border);
    background: transparent;
    color: var(--arpia-text-secondary);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}

.monitor-filtros button:hover {
    border-color: var(--arpia-border-active);
    color: var(--arpia-text);
}

.monitor-filtros button[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--arpia-space) 60%, transparent);
    background: color-mix(in srgb, var(--arpia-space) 14%, transparent);
    color: var(--arpia-text);
}

.monitor-actualizado {
    margin: 0;
    color: var(--arpia-text-muted);
    font-size: 10px;
}

.monitor-actualizado[data-estado="error"] {
    color: var(--arpia-warning);
}

/* Lista: solo ella se desliza; la cabecera queda fija */
.monitor-alertas {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 12px 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--arpia-border) transparent;
}

.monitor-alertas .vacio {
    margin: 18px 4px;
    color: var(--arpia-text-muted);
    font-size: 12px;
    text-align: center;
}

/* "Hoy", "Ayer"... */
.monitor-dia {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 10px 2px 6px;
    background: linear-gradient(180deg, var(--arpia-bg) 70%, transparent);
    color: var(--arpia-space);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.monitor-alerta {
    --color-nivel: var(--arpia-space);
    margin-bottom: 7px;
    border-radius: 10px;
    border: 1px solid var(--arpia-border);
    border-left: 3px solid var(--color-nivel);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--color-nivel) 9%, var(--arpia-surface)),
        color-mix(in srgb, var(--arpia-surface) 70%, transparent));
    transition: border-color .15s, transform .15s;
}

.monitor-alerta:hover {
    border-color: color-mix(in srgb, var(--color-nivel) 55%, var(--arpia-border));
    border-left-color: var(--color-nivel);
}

/* Toda la tarjeta es el botón (o el enlace a su página) */
.monitor-alerta-boton {
    display: flex;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

button.monitor-alerta-boton,
a.monitor-alerta-boton {
    cursor: pointer;
}

.monitor-alerta-icono {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-nivel) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-nivel) 40%, transparent);
    font-size: 16px;
    line-height: 1;
}

.monitor-alerta-cuerpo {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.monitor-alerta-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.monitor-nivel {
    color: var(--color-nivel);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.monitor-insignia {
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.monitor-insignia-nueva {
    background: var(--arpia-space);
    color: var(--arpia-void);
}

.monitor-insignia-activa {
    background: var(--arpia-critical);
    color: var(--arpia-text);
}

.monitor-insignia-sim {
    border: 1px dashed color-mix(in srgb, var(--arpia-warning) 70%, transparent);
    color: var(--arpia-warning);
}

.monitor-alerta strong {
    display: block;
    color: var(--arpia-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.monitor-alerta-detalle {
    color: var(--arpia-text-secondary);
    font-size: 11px;
}

.monitor-alerta-hora {
    color: var(--arpia-text-muted);
    font-size: 11px;
}

.monitor-alerta-hora time {
    color: var(--arpia-space);
    font-variant-numeric: tabular-nums;
}

/* Lo que acaba de llegar se ve distinto un par de minutos */
.monitor-alerta-nueva {
    border-color: color-mix(in srgb, var(--arpia-space) 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--arpia-space) 25%, transparent),
                0 0 18px color-mix(in srgb, var(--arpia-space) 18%, transparent);
}

/* La entrada se ve una sola vez: antes se repetía cada vez que la lista se
   rehacía (cada 10 s) y en iPad, desplazándola, la hacía parpadear */
:root:not(.ligero) .monitor-alerta-entra {
    animation: monitor-entrada .5s ease-out;
}

/* Con el monitor abierto la página de atrás no se mueve: en iPad, arrastrar
   el dedo sobre el panel desplazaba la página de debajo y la vista temblaba.
   La lista de la izquierda se desplaza sola, sin arrastrar a nadie. */
html.con-monitor,
body.con-monitor {
    overflow: hidden;
    overscroll-behavior: none;
}

.monitor-alertas {
    overscroll-behavior: contain;
}

@keyframes monitor-entrada {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: none; }
}

/* El zoom del mapa queda a la derecha de las alertas, no encima */
body.con-monitor .leaflet-top.leaflet-left .leaflet-control,
body.con-monitor .leaflet-bottom.leaflet-left .leaflet-control {
    margin-left: calc(min(var(--monitor-ancho), 42vw) + 12px);
}

/* La barra de capas pasa a la derecha: la izquierda es de las alertas */
.envoltura-mapa:fullscreen .barra-capas,
.envoltura-mapa.sin-api-pantalla .barra-capas {
    position: absolute;
    right: 14px;
    bottom: 14px;
    left: auto;
    z-index: 700;
    margin: 0;
    max-width: calc(100% - 380px);
    align-items: flex-end;
}

/* ---------- Pantallas pequeñas ---------- */

@media (max-width: 900px) {
    .boton-pantalla-texto { display: none; }

    .monitor {
        grid-template-columns: 1fr;
    }

    /*
       Dos filas: arriba identificación y control, abajo las cifras.
       En una sola fila no caben y se encimaban unas con otras.
    */
    .monitor-cabeza {
        display: grid;
        /* minmax(0,...) es imprescindible: con `1fr` a secas la columna crece
           con el título y se monta encima del reloj y los botones. */
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "marcas titulo acciones"
            "semaforo cifras cifras";
        align-items: center;
        gap: 6px 10px;
        padding: 7px 10px;
    }

    .monitor-marcas {
        grid-area: marcas;
        gap: 7px;
        padding-right: 9px;
    }

    .monitor-fac { height: 22px; }
    .monitor-arpia { height: 26px; width: 26px; }

    .monitor-titulo { grid-area: titulo; gap: 8px; min-width: 0; }

    /* que el recorte lo haga el título, para que salgan los puntos suspensivos */
    .monitor-titulo > div { min-width: 0; }
    .monitor-titulo h2 { font-size: 13px; }
    .monitor-fecha { display: none; }          /* el reloj ya dice el día */
    .monitor-punto { width: 9px; height: 9px; }

    .monitor-derecha {
        grid-area: acciones;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
    }

    .monitor-reloj { font-size: 17px; }
    .monitor-boton { padding: 3px 7px; font-size: 10px; }

    /* Las cifras en su propia fila y, si no caben, se deslizan */
    .monitor-contadores {
        grid-area: cifras;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .monitor-contadores::-webkit-scrollbar { display: none; }

    .monitor-cifra { font-size: 16px; }
    .monitor-contador { min-width: 56px; padding: 3px 8px; }
    .monitor-etiqueta { font-size: 8px; }

    /* con dos filas el encabezado es más alto: el zoom baja otro tanto */
    body.con-monitor .leaflet-top .leaflet-control {
        margin-top: 118px;
    }

    /* En el celular las alertas van abajo, que es donde llega el pulgar */
    .monitor-lateral {
        grid-row: 2;
        align-self: end;
        width: 100%;
        max-width: none;
        max-height: 40%;
        border-right: 0;
        border-top: 1px solid var(--arpia-border);
    }

    body.con-monitor .leaflet-top.leaflet-left .leaflet-control,
    body.con-monitor .leaflet-bottom.leaflet-left .leaflet-control {
        margin-left: 10px;
    }

    /* En el celular: semáforo, cifras, reloj y Zulu; clima y avisos se ven en el computador */
    .monitor-extras {
        display: none;
    }

    .monitor-cabeza .monitor-zulu {
        font-size: 9px;
        line-height: 1;
    }

    .monitor-cabeza .monitor-zulu b {
        font-size: 11px;
    }

    .monitor-semaforo {
        grid-area: semaforo;
        gap: 6px;
        padding: 3px 9px 3px 7px;
    }

    .monitor-semaforo-luz { width: 10px; height: 10px; }
    .monitor-titulo { min-width: 0; }
    .monitor-cabeza .monitor-titulo h2 { font-size: 13px; }
    .monitor-semaforo small { display: none; }
    .monitor-semaforo b { font-size: 12px; }

    .monitor-cabeza .monitor-derecha {
        display: flex;
    }

    .envoltura-mapa:fullscreen .barra-capas,
    .envoltura-mapa.sin-api-pantalla .barra-capas {
        display: none;   /* el espacio es para el mapa */
    }
}

/* ==========================================================
   CELULAR: pantalla completa, muescas y toques
   ========================================================== */

/* Instalada como aplicación, la página llega hasta los bordes: hay que
   respetar la muesca y la barra inferior de gestos. */
.barra {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    padding-top: max(10px, env(safe-area-inset-top));
}

.monitor-cabeza {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
}

.monitor-lateral {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
}

@media (max-width: 700px) {
    .tablero {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    /* Objetivos de toque: en el dedo, un botón de 20 px no se acierta */
    .chip-capa,
    .boton-texto-mini,
    .menu-item,
    .tipo-grafico,
    .filtros button {
        min-height: 34px;
    }

    .chip-capa {
        padding-left: 10px;
        padding-right: 10px;
    }

    .boton-pantalla {
        min-height: 36px;
        min-width: 36px;
        justify-content: center;
    }

    /* El mapa se aprovecha mejor alto que ancho en un teléfono */
    .pagina-tablero .mapa-grande {
        height: 300px;
    }
}

/* Teléfono muy estrecho: se sacrifica lo accesorio */
@media (max-width: 520px) {
    .monitor-marcas {
        padding-right: 7px;
        gap: 5px;
    }

    .monitor-fac { height: 18px; }
    .monitor-arpia { height: 22px; width: 22px; }
    .monitor-titulo h2 { font-size: 12px; }
    .monitor-reloj { font-size: 15px; }

    /* Los botones se quedan en su icono: el texto no cabe y empujaba el título */
    .monitor-boton {
        font-size: 0;
        padding: 5px 8px;
        min-height: 26px;
    }

    .monitor-boton::first-letter {
        font-size: 13px;
    }
}

/* Teléfono en horizontal: el mapa manda */
@media (max-height: 480px) and (orientation: landscape) {
    .pagina-tablero .mapa-grande {
        height: 78vh;
    }

    .monitor-lateral {
        max-height: 55%;
    }
}

/* Pasos para instalar la aplicación (menú) */
.menu-instalar {
    padding: 4px 2px 8px;
}

.pasos-instalar {
    margin: 6px 0 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--arpia-text-muted);
}

.pasos-instalar li::marker {
    color: var(--arpia-space);
}

.pasos-instalar strong {
    color: var(--arpia-text-secondary);
}

/* ==========================================================
   GUÍA DE INSTALACIÓN EN IPHONE
   Safari no deja lanzar la instalación desde un botón: no existe
   esa API. Lo único posible es señalar dónde tocar, y hacerlo
   abajo, que es donde Safari pone el botón Compartir.
   ========================================================== */

.hoja-ios {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .25s ease;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.hoja-ios-visible {
    opacity: 1;
}

.hoja-ios-cuerpo {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 20px 20px 26px;
    border-radius: 16px;
    background: var(--arpia-surface);
    border: 1px solid var(--arpia-border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
    transform: translateY(14px);
    transition: transform .25s ease;
}

.hoja-ios-visible .hoja-ios-cuerpo {
    transform: translateY(0);
}

.hoja-ios-cuerpo h2 {
    margin: 0 0 6px;
    font-size: 17px;
    color: var(--arpia-text);
}

.hoja-ios-cuerpo p {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--arpia-text-secondary);
}

.hoja-ios-pasos {
    margin: 0 0 16px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--arpia-text-secondary);
}

.hoja-ios-pasos li::marker {
    color: var(--arpia-space);
    font-weight: 700;
}

.hoja-ios-pasos strong {
    color: var(--arpia-text);
}

/* El glifo de Compartir, dibujado igual que el de iOS */
.hoja-ios-icono {
    width: 17px;
    height: 17px;
    vertical-align: -3px;
    color: var(--arpia-space);
}

.hoja-ios-acciones {
    display: flex;
    justify-content: flex-end;
}

/* Señala hacia abajo, donde está la barra de Safari */
.hoja-ios-flecha {
    position: absolute;
    left: 50%;
    bottom: -26px;
    transform: translateX(-50%);
    font-size: 26px;
    line-height: 1;
    color: var(--arpia-space);
    animation: hoja-ios-señala 1.4s ease-in-out infinite;
}

@keyframes hoja-ios-señala {
    50% { transform: translate(-50%, 6px); opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .hoja-ios-flecha { animation: none; }
}

/* =========================
   PIE DE PÁGINA
   =========================
 * Franja oscura al final de todas las páginas (js/menu.js, montarPie):
 * nombre del sistema a la izquierda, derechos y autor al centro, enlaces
 * legales y de contacto a la derecha. En el celular se apila centrado.
 */
.pie-sistema {
    margin-top: auto;              /* el cuerpo es flex en columna: queda abajo */
    background: var(--arpia-void);
    border-top: 1px solid var(--arpia-border);
    color: var(--arpia-text-secondary);
    font-size: 12.5px;
}

.pie-contenido {
    width: min(1500px, 100%);
    margin: 0 auto;
    padding: 22px 24px calc(22px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px 28px;
}

.pie-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pie-logo-fac {
    height: 40px;
    width: auto;
    display: block;
}

.pie-logo-arpia {
    height: 46px;
    width: 46px;
    display: block;
    border-radius: 8px;            /* la imagen trae fondo negro: se integra al pie */
}

.pie-separador {
    width: 1px;
    height: 34px;
    background: var(--arpia-border);
}

.pie-nombre {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    color: var(--arpia-text);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pie-derechos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}

.pie-autor {
    font-size: 11.5px;
    color: var(--arpia-text-muted);
}

.pie-sistema a {
    color: var(--arpia-text-secondary);
    text-decoration: none;
    transition: color .15s;
}

.pie-sistema a:hover,
.pie-sistema a:focus-visible {
    color: var(--arpia-space);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pie-autor a {
    color: var(--arpia-space);
}

.pie-enlaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 22px;
}

@media (max-width: 820px) {
    .pie-contenido {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    }

    .pie-enlaces {
        justify-content: center;
    }

    .pie-marca {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pie-nombre {
        flex-basis: 100%;
        text-align: center;
    }
}

/* Ni en pantalla completa ni al imprimir un informe */
body.con-monitor .pie-sistema {
    display: none;
}

@media print {
    .pie-sistema {
        display: none !important;
    }
}

/* =========================
   PÁGINA LEGAL
   ========================= */
.legal {
    width: 100%;
    box-sizing: border-box;
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 20px 56px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.legal-indice {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.legal-seccion {
    scroll-margin-top: 90px;
    padding: 22px 24px;
    border: 1px solid var(--t-borde);
    border-radius: var(--t-radio);
    background: color-mix(in srgb, var(--arpia-surface) 82%, transparent);
}

.legal-seccion h2 {
    margin: 0 0 10px;
    font-size: 20px;
    color: var(--arpia-text);
}

.legal-seccion h3 {
    margin: 18px 0 6px;
    font-size: 14.5px;
    color: var(--arpia-space);
}

.legal-seccion p,
.legal-seccion li {
    color: var(--arpia-text-secondary);
    font-size: 14px;
    line-height: 1.65;
}

.legal-seccion ol,
.legal-seccion ul {
    padding-left: 22px;
    margin: 6px 0;
}

.legal-seccion strong {
    color: var(--arpia-text);
}

.legal-seccion a {
    color: var(--arpia-space);
}

.legal-normas li {
    margin-bottom: 6px;
}

.legal-actualizado {
    font-size: 12px;
    color: var(--arpia-text-muted);
}

@media (max-width: 820px) {
    .legal-seccion {
        padding: 18px 16px;
    }
}

/* Bases aéreas y militares: estrella dorada sobre la torre */
.aerodromo-militar {
    position: relative;
}

.aerodromo-militar::after {
    content: "★";
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 10px;
    line-height: 1;
    color: #FBBF24;
    text-shadow: 0 0 2px rgba(0, 0, 0, .95), 0 0 1px rgba(0, 0, 0, .95);
}

/* Ficha del aeródromo */
.aero-militar {
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #FBBF24;
}

.aero-linea {
    margin-top: 3px;
}

.aero-categoria {
    margin-top: 4px;
    font-weight: 700;
    color: var(--color-vuelo);
}

.aero-crudo {
    display: block;
    margin-top: 5px;
    font-family: var(--fuente-mono);
    font-size: 10.5px;
    color: var(--arpia-text-muted);
    word-break: break-word;
}

/* Borrar un paso de la línea de tiempo (solo root) */
.paso:has(.paso-eliminar) .paso-cuerpo {
    padding-right: 36px;
}

.paso-eliminar {
    position: absolute;
    top: 6px;
    right: 4px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: .45;
    transition: opacity .15s, border-color .15s, background .15s;
}

.paso:hover .paso-eliminar,
.paso-eliminar:focus-visible {
    opacity: 1;
}

.paso-eliminar:hover {
    opacity: 1;
    border-color: color-mix(in srgb, var(--arpia-critical) 60%, transparent);
    background: color-mix(in srgb, var(--arpia-critical) 14%, transparent);
}

/* En pantallas táctiles no hay "pasar el mouse": se ve siempre */
@media (hover: none) {
    .paso-eliminar { opacity: .8; }
}

/* ==========================================================
   ESTADÍSTICAS (estadisticas.html) y gráficas (js/graficas.js)
   ========================================================== */
.estadisticas {
    width: 100%;
    box-sizing: border-box;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px 56px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.est-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 20px;
}

.est-titulo {
    margin: 0;
    font-size: 26px;
    color: var(--arpia-text);
}

.est-subtitulo {
    margin: 4px 0 0;
    color: var(--arpia-text-secondary);
    font-size: 13px;
}

/* Filtros: una fila arriba de todo */
.est-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 22px;
    padding: 14px 16px;
    border: 1px solid var(--t-borde);
    border-radius: var(--t-radio);
    background: color-mix(in srgb, var(--arpia-surface) 82%, transparent);
}

.est-filtro {
    display: grid;
    gap: 6px;
}

.est-filtro-titulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--arpia-text-muted);
}

.est-filtro-titulo small {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.est-filtro-tipos {
    flex: 1 1 420px;
}

.est-tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.est-tipo,
.est-leyenda-boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--t-borde);
    background: transparent;
    color: var(--arpia-text-secondary);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.est-tipo b,
.est-leyenda-boton b {
    color: var(--arpia-text);
}

.est-tipo[aria-pressed="false"] {
    opacity: .45;
    text-decoration: line-through;
}

.est-tipo:hover,
.est-leyenda-boton:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--arpia-space) 45%, transparent);
}

.est-muestra {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.est-simulacros {
    align-self: center;
}

/* Cifras de resumen */
.est-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.est-kpi {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--t-borde);
    border-radius: var(--t-radio);
    background: color-mix(in srgb, var(--arpia-surface) 82%, transparent);
}

.est-kpi-etiqueta {
    font-size: 12px;
    color: var(--arpia-text-muted);
}

.est-kpi-valor {
    font-size: 28px;
    font-weight: 600;
    color: var(--arpia-text);
    line-height: 1.15;
}

.est-kpi-detalle {
    font-size: 12px;
    color: var(--arpia-text-secondary);
}

/* Rejilla de gráficas */
.est-rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    transition: opacity .2s;
}

.est-rejilla.est-cargando {
    opacity: .55;          /* se mantiene lo anterior mientras llega lo nuevo */
}

.est-rejilla > .grafico {
    min-width: 0;
}

.est-ancho {
    grid-column: 1 / -1;
}

.est-nota {
    margin: 2px 0 8px;
    font-size: 12px;
    color: var(--arpia-text-muted);
}

.est-ayuda {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--arpia-text-muted);
}

.est-grafica {
    position: relative;
}

.est-vista .tipo-grafico[aria-pressed="true"],
.est-filtros .periodos .tipo-grafico[aria-pressed="true"] {
    border-color: var(--arpia-space);
    color: var(--arpia-text);
    background: color-mix(in srgb, var(--arpia-space) 16%, transparent);
}

.est-dona {
    display: grid;
    grid-template-columns: minmax(150px, 220px) 1fr;
    align-items: center;
    gap: 16px;
}

.est-leyenda-nivel {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.est-leyenda-boton {
    width: 100%;
    border-radius: 10px;
}

.est-leyenda-boton span {
    flex: 1;
    text-align: left;
}

.est-leyenda-boton small {
    color: var(--arpia-text-muted);
    min-width: 38px;
    text-align: right;
}

.est-leyenda-boton[aria-pressed="true"] {
    border-color: var(--arpia-space);
    background: color-mix(in srgb, var(--arpia-space) 12%, transparent);
}

.est-leyenda-boton:disabled {
    opacity: .5;
    cursor: default;
}

/* Marcas de las gráficas: responden al puntero */
.grafica-svg {
    display: block;
    overflow: visible;
}

.grafica-svg .marca {
    transition: opacity .12s, filter .12s;
    cursor: pointer;
}

.grafica-svg [data-tip-valor]:focus {
    outline: none;
}

.grafica-svg .marca.activa,
.grafica-svg .activa .marca,
.grafica-svg [data-tip-valor]:focus-visible .marca,
.grafica-svg .marca:focus-visible {
    filter: brightness(1.25);
}

.grafica-svg .marca.elegida {
    filter: brightness(1.3);
    stroke: var(--arpia-text);
    stroke-width: 1.5;
}

.grafica-lineas .franja-cruz {
    cursor: pointer;
}

.grafica-dona {
    max-width: 220px;
}

/* Cuadro emergente: el valor manda, la etiqueta acompaña */
.grafica-globo {
    position: fixed;
    z-index: 12000;
    display: grid;
    gap: 3px;
    max-width: 280px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid var(--arpia-border-active);
    background: var(--arpia-elevated);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    pointer-events: none;
    font-size: 12px;
    color: var(--arpia-text-secondary);
}

.grafica-globo[hidden] {
    display: none;
}

.grafica-globo strong {
    font-size: 15px;
    color: var(--arpia-text);
}

.grafica-globo-fila {
    display: flex;
    align-items: center;
    gap: 7px;
}

.grafica-globo-llave {
    width: 12px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

.grafica-globo small {
    color: var(--arpia-text-muted);
    line-height: 1.4;
}

/* Tabla de detalle */
.est-tabla-marco {
    max-height: 460px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--t-borde);
    border-radius: 10px;
}

.est-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.est-tabla th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--arpia-elevated);
    text-align: left;
}

.est-tabla th button {
    width: 100%;
    padding: 9px 10px;
    border: 0;
    background: transparent;
    color: var(--arpia-text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: inherit;
    cursor: pointer;
}

.est-tabla th button[data-activo="desc"]::after { content: " ▾"; }
.est-tabla th button[data-activo="asc"]::after { content: " ▴"; }

.est-tabla td {
    padding: 8px 10px;
    border-top: 1px solid var(--t-borde);
    color: var(--arpia-text-secondary);
    vertical-align: top;
}

.est-tabla .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.est-tabla .est-fecha {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.est-kpi.nivel-roja { box-shadow: inset 3px 0 0 #be4b40; }
.est-kpi.nivel-naranja { box-shadow: inset 3px 0 0 #c27c45; }
.est-kpi.nivel-amarilla { box-shadow: inset 3px 0 0 #b89a45; }
.est-kpi.nivel-verde { box-shadow: inset 3px 0 0 #6e8f5a; }

@media (max-width: 900px) {
    .est-rejilla {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .estadisticas {
        padding: 16px 12px 40px;
    }

    .est-dona {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .est-kpi-valor {
        font-size: 24px;
    }
}

/* Lectura del periodo (estadísticas): frases + indicadores */
.est-lectura-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.est-frases {
    margin: 0;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--arpia-text, #e6edf3);
}

.est-frases li + li {
    margin-top: 6px;
}

.est-indicadores {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.est-indicadores th,
.est-indicadores td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    text-align: left;
    vertical-align: top;
}

.est-indicadores th {
    font-weight: 500;
    color: var(--arpia-text-muted);
    white-space: nowrap;
}

.est-indicadores td.num {
    white-space: nowrap;
    color: var(--arpia-text, #e6edf3);
}

.est-indicadores td:last-child {
    color: var(--arpia-text-muted);
}

@media (max-width: 760px) {
    .est-lectura-cuerpo { grid-template-columns: 1fr; }
    .est-indicadores th { white-space: normal; }
}

.est-muestra-grande {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    vertical-align: 0.05em;
}

/* ==========================================================
   ESCUDOS DE LAS UNIDADES AÉREAS
   ========================================================== */

/* En el mapa: el escudo dentro de un anillo del color de la categoría de
   vuelo (verde VFR, amarillo MVFR, naranja IFR, rojo LIFR) */
.aerodromo-escudo {
    box-sizing: border-box;
    border-radius: 50%;
    padding: 2px;
    background: var(--color-vuelo);
    box-shadow: 0 0 0 1.5px rgba(5, 4, 13, .9), 0 2px 6px rgba(0, 0, 0, .55);
    transition: transform .15s ease;
}

.aerodromo-escudo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0b1220;
    object-fit: contain;
    -webkit-user-drag: none;
}

.aerodromo-escudo:hover {
    transform: scale(1.18);
}

/* La base propia: halo para encontrarla primero */
.aerodromo-escudo-base {
    box-shadow: 0 0 0 1.5px rgba(5, 4, 13, .9), 0 0 0 5px rgba(84, 177, 220, .35), 0 2px 8px rgba(0, 0, 0, .6);
}

/* Escudo en la ficha emergente */
.aero-escudo {
    float: right;
    width: 56px;
    height: 56px;
    margin: 0 0 4px 10px;
    object-fit: contain;
}

/* Página de clima: franja con todos los escudos */
.pagina-tablero .unidades-fac {
    grid-column: 1 / -1;
    padding: 20px 22px 22px;
    border: 1px solid var(--arpia-border);
    border-radius: 18px;
    background: var(--arpia-surface, rgba(15, 27, 48, .85));
}

.unidades-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.unidad {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--arpia-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .02);
}

.unidad img {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.unidad-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.3;
}

.unidad-texto strong {
    font-size: 15px;
    letter-spacing: .02em;
}

.unidad-texto span:not(.pastilla) {
    font-size: 12.5px;
}

.unidad-texto small {
    font-size: 11.5px;
    color: var(--arpia-text-muted);
}

.unidad-texto .pastilla {
    align-self: flex-start;
    margin-top: 4px;
}

.unidad-propia {
    border-color: rgba(84, 177, 220, .55);
    box-shadow: inset 3px 0 0 #54B1DC;
}

@media (max-width: 520px) {
    .unidades-lista { grid-template-columns: 1fr; }
    .unidad img { width: 60px; height: 60px; }
}

/* ==========================================================
   ÍCONOS DE DESASTRES Y TORRES (img/desastres, img/torres)
   ========================================================== */

/* En los textos: el emoji del tipo se cambia por su imagen (js/iconos.js) */
.icono-desastre {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    vertical-align: -0.28em;
    object-fit: contain;
    -webkit-user-drag: none;
}

/* En el mapa: la imagen del tipo dentro del círculo del color del nivel */
/* Desastres con imagen: el ícono ya trae el color del nivel de alerta, así
   que va solo, sin círculo, como las torres de control. Una sombra oscura
   lo separa del mapa (satélite o calles). */
.marcador-imagen,
.ligero .marcador-imagen {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.marcador-imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .85)) drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

/* Alerta sin animación: el anillo queda fijo alrededor del ícono */
.marcador-imagen.marcador-quieto.marcador-alerta .marcador-pulso {
    opacity: .9;
    inset: -5px;
}

/* En la tabla de eventos el ícono va en línea con el nombre del nivel */
.est-tabla .icono-leyenda {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
}

/* Ícono de nivel en las leyendas del mapa (en lugar del punto de color) */
.icono-leyenda {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: none;
    -webkit-user-drag: none;
}

.marcador-vivo.marcador-imagen img {
    animation: marcador-latido 1.6s ease-in-out infinite;
}

@keyframes marcador-latido {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Torres de control: la imagen ya trae el color de la categoría */
.aerodromo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 1.2px rgba(0, 0, 0, .9)) drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
    -webkit-user-drag: none;
}

.aerodromo-base img {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .95)) drop-shadow(0 0 7px var(--arpia-space));
}

.ligero .aerodromo img,
.ligero .marcador-vivo.marcador-imagen img {
    animation: none;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9));
}

@media (prefers-reduced-motion: reduce) {
    .marcador-vivo.marcador-imagen img { animation: none; }
}

/* Leaflet pone «width: auto» a toda imagen de marcador (.leaflet-container
   .leaflet-marker-pane img), y con eso las imágenes salían a su tamaño real
   (96 px). Aquí se les devuelve el tamaño del marcador. */
.leaflet-container .leaflet-marker-pane .aerodromo img,
.leaflet-container .leaflet-marker-pane .aerodromo-escudo img {
    width: 100% !important;
    height: 100% !important;
}

.leaflet-container .leaflet-marker-pane .marcador-imagen img {
    width: 100% !important;
    height: 100% !important;
}

.con-icono {
    display: inline;
}

.con-icono .icono-desastre {
    margin-right: .15em;
}

/* En pestañas y botones cortos el ícono no debe empujar el texto a otra línea */
button .con-icono,
.menu-item .con-icono {
    white-space: nowrap;
}

/* =========================
   MENÚ: PIE DISCRETO (acerca, términos, tutorial)
   ========================= */

.menu-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--t-borde);
}

.menu-pie .menu-item {
    width: auto;
    flex: 1 1 auto;
    min-height: 32px;
    font-size: 12px;
}

.menu-tutorial {
    padding: 4px 8px;
    border: 0;
    background: none;
    color: var(--arpia-text-muted);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.menu-tutorial:hover,
.menu-tutorial:focus-visible {
    color: var(--arpia-text-secondary);
}

.menu-item small.menu-desactivada {
    padding: 1px 6px;
    border: 1px solid color-mix(in srgb, var(--arpia-warning) 60%, transparent);
    border-radius: 999px;
    color: var(--arpia-warning);
}

/* =========================
   PÁGINA DESACTIVADA POR EL ADMINISTRADOR
   ========================= */

body.con-pagina-bloqueada {
    overflow: hidden;
}

.pagina-bloqueada {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: color-mix(in srgb, var(--arpia-void) 88%, transparent);
    backdrop-filter: blur(6px);
    animation: bloqueo-entra 0.25s ease-out;
}

.pagina-bloqueada-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 440px;
    padding: 28px 24px;
    border: 1px solid var(--t-borde);
    border-radius: 18px;
    background: var(--arpia-surface);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.pagina-bloqueada-caja img {
    border-radius: 14px;
}

.pagina-bloqueada-caja h2 {
    margin: 4px 0 0;
    font-size: 22px;
}

.pagina-bloqueada-caja p {
    margin: 0;
    color: var(--arpia-text-secondary);
}

.pagina-bloqueada-nota {
    font-size: 12px;
}

.pagina-desactivada-root {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

@keyframes bloqueo-entra {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =========================
   ACTIVAR / DESACTIVAR PÁGINAS (paginas.html, solo root)
   ========================= */

.paginas-grupos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 16px;
}

.paginas-grupo h3 {
    margin: 0 0 8px;
    color: var(--arpia-space);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pagina-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--t-borde);
    border-radius: 10px;
    background: color-mix(in srgb, var(--arpia-void) 35%, transparent);
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

.pagina-fila[data-activa="no"] {
    border-color: color-mix(in srgb, var(--arpia-warning) 50%, transparent);
}

.pagina-fila[data-activa="no"] .pagina-nombre {
    color: var(--arpia-text-muted);
    text-decoration: line-through;
}

.pagina-nombre {
    font-weight: 600;
}

.pagina-estado {
    display: block;
    color: var(--arpia-text-muted);
    font-size: 11px;
}

.interruptor {
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
    border: 0;
    border-radius: 999px;
    background: var(--arpia-border);
    cursor: pointer;
    transition: background 0.2s ease;
}

.interruptor::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--arpia-text);
    transition: transform 0.2s ease;
}

.interruptor[aria-checked="true"] {
    background: var(--arpia-success);
}

.interruptor[aria-checked="true"]::after {
    transform: translateX(20px);
}

.interruptor:disabled {
    opacity: 0.5;
    cursor: wait;
}

.paginas-admin {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 20px 16px 40px;
}

/* Clima: ¿llueve en la base? y qué tan reciente es la observación */
.clima-lluvia {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--arpia-info) 55%, transparent);
    background: color-mix(in srgb, var(--arpia-info) 14%, transparent);
    font-size: 14px;
}

.clima-lluvia[data-lluvia="cerca"] {
    border-color: color-mix(in srgb, var(--arpia-warning) 55%, transparent);
    background: color-mix(in srgb, var(--arpia-warning) 12%, transparent);
}

.clima-frescura {
    margin: 0 0 10px;
    color: var(--arpia-text-secondary);
    font-size: 12px;
}

.clima-frescura[data-viejo="si"] {
    color: var(--arpia-warning);
}