/* =================================================================
   SIGEIM DASHBOARD - CSS
   Archivo: dashboard.css
   Estilo: Minimalista con fondo blanco
   ================================================================= */

/* Theme Variables - Alcaldía Libertador */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fc;
    --bg-card: #ffffff;
    --bg-hover: #eef1f7;
    --text-primary: #1a1a1a;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --border-color: #dde1ea;
    --shadow-color: rgba(27, 58, 92, 0.06);

    /* Colores Principales — Alcaldía Libertador */
    --primary-color: #1B3A5C;
    --primary-light: #2E6BA6;
    --primary-dark: #0F2740;
    --secondary-color: #D4A017;
    --secondary-light: #E8B838;
    --accent-color: #D4A017;
    --success-color: #16a34a;
    --warning-color: #D4A017;
    --danger-color: #dc3545;

    /* Gradientes oficiales — Libertador */
    --gradient-hero: linear-gradient(135deg, #1B3A5C 0%, #2E6BA6 100%);
    --gradient-service: linear-gradient(135deg, #1B3A5C 0%, #2E6BA6 100%);
    --gradient-accent: linear-gradient(90deg, #2E6BA6 0%, #D4A017 100%);
}

* {
    font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

html {
    overflow-x: clip;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: clip;
}

/* Navbar: prevent horizontal overflow but don't clamp width */
nav {
    width: 100%;
    box-sizing: border-box;
}



/* Sidebar Navigation - mantiene gradiente */
.sidebar {
    width: 70px;
    height: calc(100vh - 60px);
    max-height: calc(100vh - 60px);
    background: var(--gradient-hero);
    transition: all 0.3s ease;
    position: fixed;
    left: 0;
    top: 60px;
    z-index: 40;
    padding-top: 50px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}

.sidebar.expanded {
    width: 200px;
}

.sidebar.expanded .sidebar-item span {
    opacity: 1;
}

.sidebar:not(.expanded):hover {
    width: 200px;
}

.sidebar:not(.expanded):hover~.main-content {
    margin-left: 200px;
}

.sidebar:not(.expanded):hover .sidebar-item span {
    opacity: 1;
}

.sidebar-toggle {
    position: fixed;
    left: 10px;
    /* A la altura del banner superior (nav ~0-60px), en la esquina sup-izq vacía
       (el logo arranca en ~189px) — antes estaba en 70px, casi pegado al 1er ítem. */
    top: 18px;
    z-index: 60;
    width: 36px;
    height: 36px;
    background: var(--gradient-service);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(27, 58, 92, 0.3);
    transition: all 0.3s ease;
}

.sidebar-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(27, 58, 92, 0.4);
}

.sidebar-toggle i {
    transition: transform 0.3s ease;
}

.sidebar.expanded~.sidebar-toggle i,
.sidebar-toggle.rotated i {
    transform: rotate(180deg);
}

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    gap: 12px;
}

.sidebar-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.sidebar-item.active {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-left-color: var(--accent-color);
}

.sidebar-item i {
    min-width: 24px;
    font-size: 18px;
    text-align: center;
}

.sidebar-item span {
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.main-content {
    margin-left: 70px;
    transition: margin-left 0.3s ease;
    min-height: calc(100vh - 60px);
    background: var(--bg-primary);
    /* Holgura inferior: deja espacio bajo el último contenido/footer para que los
       botones flotantes (asistente + nueva alerta, fixed abajo-dcha) no lo tapen
       y la página tenga un cierre limpio. */
    padding-bottom: 110px;
}

.main-content.sidebar-expanded {
    margin-left: 200px;
}

@media (max-width: 768px) {
    .sidebar {
        width: 0;
        padding-top: 50px;
    }

    .sidebar.expanded {
        width: 200px;
    }

    .sidebar-toggle {
        left: 10px;
    }

    .main-content {
        margin-left: 0;
    }

    .main-content.sidebar-expanded {
        margin-left: 200px;
    }
}

@media (max-width: 480px) {
    .sidebar.expanded {
        width: 180px;
    }

    .main-content.sidebar-expanded {
        margin-left: 180px;
    }
}

.content-section {
    display: none;
    animation: fadeIn 0.3s ease;
}

.content-section.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cards minimalistas */
.bg-white {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px var(--shadow-color);
}

.bg-gray-50 {
    background: var(--bg-secondary) !important;
}

/* Secciones con bordes sutiles */
.rounded-lg,
.rounded-xl {
    border: 1px solid var(--border-color);
}

/* ============================================================
   FIX: Tailwind CSS preflight (img { max-width:100% }) breaks
   Leaflet tiles. These overrides restore correct tile rendering.
   ============================================================ */
.leaflet-container img {
    max-width: none !important;
    max-height: none !important;
}

.leaflet-tile-pane img {
    max-width: none !important;
    max-height: none !important;
}

.leaflet-container .leaflet-control-zoom,
.leaflet-container .leaflet-control-attribution {
    font-size: 12px;
}

/* El mapa llena SIEMPRE su tarjeta (`.hm-mapa`), que es quien tiene el alto.
   Antes el alto vivía aquí (480 px) y la tarjeta lo llevaba en línea (500 px):
   dos números que había que mantener a mano en sincronía y que impedían que el
   conjunto se ajustara al viewport. */
#map {
    height: 100%;
    width: 100%;
    min-height: 0;
    border-radius: 0.5rem;
    z-index: 1;
    border: 1px solid var(--border-color);
}

/* =================================================================
   ANCHO DE SECCIÓN — «hay espacio vacío en ambos lados»
   -----------------------------------------------------------------
   MEDIDO a 1836×856 con la barra lateral plegada (área útil 1766 px):
     · #section-heatmap con `container mx-auto` → 1536 px (tope 2xl de
       Tailwind): 115 px muertos a cada lado.
     · #section-info con `max-w-6xl`            → 1152 px CLAVADOS:
       342 px muertos a cada lado, el 37% de la pantalla.
   `sec-ancha` usa el ancho que hay y sólo pone tope en pantallas más
   anchas que cualquiera de las medidas, para que en un ultrawide el
   texto no se convierta en una línea de 3000 px.
   ================================================================= */
:root {
    --sec-ancha-max: 2200px;
}

.sec-ancha {
    width: 100%;
    max-width: var(--sec-ancha-max);
    margin-left: auto;
    margin-right: auto;
}

/* =================================================================
   MAPA DE CALOR — reparto elástico entre la cola y el mapa
   -----------------------------------------------------------------
   `.hm-split` es una rejilla de DOS pistas declaradas aquí, no
   `lg:grid-cols-3` + `col-span`. Motivo: con col-spans el ancho de la
   cola es un tercio inamovible; al plegarla el mapa seguía ocupando
   dos tercios y el tercio liberado quedaba en blanco. Con dos pistas
   basta cambiar la primera a la anchura del riel para que el mapa se
   quede con todo lo demás.

   ALTO: `--hm-alto` se ajusta al viewport en vez de los 500 px que
   estaban en línea. El descuento real es 21.5rem = 344 px (ver el
   `clamp` de abajo), MEDIDO: el bloque arranca en y=326 a 1836×856
   y en y=350 a 1280×800; con 344 px de descuento el bloque cierra
   18 px por encima del borde inferior en el primer caso, sin sacar
   barra horizontal. El `clamp` evita los dos extremos: en un
   portátil bajo no baja de 500 px (el mínimo que da la primera pista
   del `clamp`) y en un monitor 4K no pasa de 860 px (más alto que eso
   el operador ya no ve el mapa de un vistazo).
   ================================================================= */
:root {
    --hm-gap: 1.5rem;
    --hm-riel: 2.75rem;
    /* 44 px: el mínimo táctil de WCAG 2.5.5 */
    --hm-cola-min: 20rem;
    --hm-cola-frac: 27%;
    --hm-alto: clamp(500px, calc(100vh - 21.5rem), 860px);
    --hm-transicion: 300ms;
}

.hm-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hm-gap);
}

.hm-cola {
    /* Contenedor del riel plegado: `position` para que el texto vertical
       pueda centrarse contra la tarjeta entera. */
    position: relative;
    overflow: hidden;
}

/* A partir de 1024 px caben las dos columnas. Por debajo se apilan: medido a
   768 px, la regla antigua las ponía lado a lado y el mapa quedaba en 352 px
   de ancho — inservible. Apiladas, el mapa se lleva los 748 px completos. */
@media (min-width: 1024px) {
    .hm-split {
        grid-template-columns: minmax(var(--hm-cola-min), var(--hm-cola-frac)) minmax(0, 1fr);
        height: var(--hm-alto);
        /* El bloque vive dentro de un contenedor flex en columna: sin esto,
           `flex-shrink` lo comprimiría por debajo del alto pedido. */
        flex: 0 0 auto;
        transition: grid-template-columns var(--hm-transicion) ease;
    }

    /* `minmax()` en los DOS estados, y no `var(--hm-riel)` a secas: el
       navegador sólo interpola `grid-template-columns` cuando las dos pistas
       tienen la MISMA función de tamaño. MEDIDO con la versión anterior
       (`minmax(20rem, 27%)` → `44px`): la anchura se quedaba clavada en 468 px
       durante ~90 ms y luego SALTABA a 44 — una transición discreta, que es
       peor que ninguna (retardo muerto y tirón). Con minmax en ambos lados
       interpola de verdad. */
    .hm-split[data-cola="plegada"] {
        grid-template-columns: minmax(var(--hm-riel), var(--hm-riel)) minmax(0, 1fr);
    }

    /* `!important` a propósito y sólo aquí: `ajustarAlturaCola()` escribe un
       `height` EN LÍNEA sobre esta tarjeta (80 px + 130 px por ticket) cada vez
       que se cambia el desplegable «Mostrar». Con alto elástico ese cálculo
       sobra —la lista desborda dentro, que es lo que hace `#ticketList` con su
       `overflow-y:auto`— y si no se pisa, la tarjeta se sale de la rejilla. */
    .hm-split .hm-cola {
        height: 100% !important;
    }

    .hm-split .hm-mapa {
        height: 100%;
    }

    .hm-cola,
    .hm-mapa {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hm-split {
        transition: none;
    }
}

/* ── Riel de la cola plegada ─────────────────────────────────────────
   Qué cabe, medido: con el ancho de la cola desplegada en 485 px a
   1836 px de pantalla, plegarla a un riel de 44 px devuelve 441 px al
   mapa (de 977 a 1418, +45%). En 44 px de ancho no cabe texto
   horizontal legible al mínimo del proyecto (14 px), así que el rótulo
   va en vertical (`writing-mode`), que en un riel de 380-860 px de alto
   sobra sitio. El contador se queda porque es el dato que decide si
   merece la pena desplegar. */
.hm-cola__riel {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 700;
}

/* El plegado SÓLO existe a partir de 1024 px, que es donde hay ancho que
   recuperar. Estas dos reglas van dentro de la consulta de medios a propósito:
   la versión anterior las dejaba globales y las deshacía abajo con
   `display: revert`, y eso NO devuelve el `flex` de Tailwind —revierte al valor
   del navegador, que para un `div` es `block`— así que la cabecera de la cola
   se descuadraba a 768 px si la preferencia guardada era «plegada». Medido:
   la tarjeta pasaba de 149 a 174 px de alto con el contenido desalineado. */
@media (min-width: 1024px) {
    .hm-cola[data-plegada="true"] .hm-cola__riel {
        display: flex;
    }

    /* Con la cola plegada, TODO lo demás se retira: cabecera, lista y
       paginación. No se deja «un trozo» porque a 44 px nada de eso es
       legible ni pulsable. */
    .hm-cola[data-plegada="true"] > *:not(.hm-cola__riel) {
        display: none;
    }
}

.hm-cola__riel:hover {
    background: var(--bg-hover);
    color: var(--primary-light);
}

.hm-cola__riel:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: -2px;
}

.hm-cola__riel-texto {
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    white-space: nowrap;
}

.hm-cola__riel-chevron,
.hm-cola__riel-cuenta {
    flex: 0 0 auto;
}

.hm-cola__riel-cuenta {
    writing-mode: vertical-rl;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Botón de plegar de la cabecera. 32×32 con el icono centrado: comparte
   fila con el desplegable «Mostrar» y el contador, que ya iban ahí. */
.hm-cola__plegar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
}

.hm-cola__plegar:hover {
    background: var(--bg-hover);
    color: var(--primary-light);
}

.hm-cola__plegar:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: -2px;
}

/* Por debajo de 1024 px la cola y el mapa se apilan y el plegado no aporta
   nada (no hay ancho que recuperar: el mapa ya lo tiene todo). El botón se
   retira para no ofrecer un control que no hace nada útil. */
@media (max-width: 1023.98px) {
    .hm-cola__plegar {
        display: none;
    }

    /* Apilada, la cola crece con su contenido (antes eran 500 px clavados, que
       con la lista vacía dejaban un hueco blanco). El tope evita que con la
       lista llena se coma la pantalla entera: `#ticketList` ya desborda dentro
       con su propia barra, y la paginación se queda visible al pie. */
    .hm-cola {
        max-height: 70vh;
    }
}

/* =================================================================
   INFO EXTERNA — más columnas al ensanchar
   -----------------------------------------------------------------
   Quitar el tope de 1152 px sin tocar las columnas deja tarjetas de
   ~860 px: más ancho, peor lectura. A partir de 1536 px las rejillas
   cuyo contenido lo admite suben de columnas. Van con el id delante
   para ganarle en especificidad a las clases de Tailwind (que se carga
   ANTES que esta hoja) sin recurrir a `!important`.
   ================================================================= */
@media (min-width: 1536px) {
    #section-info .info-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* =================================================================
   PANELES FLOTANTES DEL MAPA (.map-panel)
   -----------------------------------------------------------------
   Cajas que flotan sobre el mapa: leyendas y acciones. TODAS son
   controles de Leaflet — las coloca `modules/map.js` en la esquina
   que declara `data-map-panel-corner`, y Leaflet apila las que
   comparten esquina. Aquí NO hay `position`, `top/left` ni
   `z-index`: ese fue exactamente el defecto que se corrigió (tres
   paneles con esquinas a mano y z-index 1000 tapando el panel de
   capas meteorológicas, que sí era un control y vive en z-index 800).

   TAMAÑOS EN VARIABLES, mínimo del proyecto 14px = 0.875rem con
   line-height 1.5. Las leyendas venían en 12px con encabezados de
   10px.
   ================================================================= */
:root {
    --map-panel-fs: 0.875rem;
    --map-panel-lh: 1.5;
    --map-panel-gap: 0.5rem;
    --map-panel-pad: 0.625rem;
    --map-panel-radius: 8px;
}

.map-panel {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);
    border-radius: var(--map-panel-radius);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
    color: var(--text-primary);
    font-size: var(--map-panel-fs);
    line-height: var(--map-panel-lh);
    /* El ancho se acota contra el viewport y no contra el contenedor: dentro
       de una esquina de Leaflet (ancho automático) un porcentaje no tiene
       contra qué resolverse. El descuento de 6.25rem deja libre la columna del
       control de zoom, que en un mapa estrecho comparte banda con los paneles
       de la derecha. */
    max-width: min(20rem, calc(100vw - 6.25rem));
}

/* Retirado por falta de sitio: en pantalla estrecha sólo cabe un panel
   desplegado (ver `exclusividad` en modules/map.js). */
.map-panel--oculto,
#capasMeteoPanel.map-panel--oculto {
    display: none !important;
}

/* Cabecera = botón de plegado. Es un <button> de verdad: teclado y
   lectores de pantalla salen gratis, con aria-expanded como estado. */
.map-panel__head {
    display: flex;
    align-items: center;
    gap: var(--map-panel-gap);
    width: 100%;
    padding: 0.375rem var(--map-panel-pad);
    background: none;
    border: 0;
    border-radius: var(--map-panel-radius);
    cursor: pointer;
    font-size: var(--map-panel-fs);
    line-height: var(--map-panel-lh);
    font-weight: 700;
    color: var(--text-secondary);
    text-align: left;
}

.map-panel__head:hover {
    background: var(--bg-hover);
}

.map-panel__head:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: -2px;
}

.map-panel__title {
    flex: 1 1 auto;
    min-width: 0;
}

.map-panel__ico {
    flex: 0 0 auto;
    color: var(--primary-light);
}

.map-panel__ico--alerta {
    color: #f97316;
}

.map-panel__chevron {
    flex: 0 0 auto;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.map-panel[data-abierto="false"] .map-panel__chevron {
    transform: rotate(-90deg);
}

.map-panel[data-abierto="false"] .map-panel__body {
    display: none;
}

/* El cuerpo desborda DENTRO (nunca hacia fuera del mapa): el gobernador de
   alturas de map.js le fija `max-height` según lo que quede libre. */
.map-panel__body {
    padding: 0 var(--map-panel-pad) 0.375rem var(--map-panel-pad);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Acción suelta (p. ej. «Centrar»): sin cabecera plegable. */
.map-panel--accion .map-panel__accion {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: none;
    border: 0;
    border-radius: var(--map-panel-radius);
    cursor: pointer;
    font-size: var(--map-panel-fs);
    line-height: var(--map-panel-lh);
    color: var(--text-secondary);
}

.map-panel--accion .map-panel__accion:hover {
    color: var(--primary-light);
    background: var(--bg-hover);
}

.map-panel--accion .map-panel__accion:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: -2px;
}

/* Encabezado de columna dentro de una leyenda. */
.map-legend-h {
    font-size: var(--map-panel-fs);
    line-height: var(--map-panel-lh);
    font-weight: 700;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.125rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

/* Leyenda de casos: prioridad y tipo, una al lado de la otra. */
.map-legend-dual {
    display: flex;
    gap: 0.875rem;
}

/* Leyenda de alertas: dos columnas para no crecer a lo alto. */
.map-legend-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.875rem;
    row-gap: 0.125rem;
    align-content: start;
}

/* Fila que cierra la lista (Emergencia): ocupa las dos columnas. */
.map-legend-cols .map-legend-sep {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-color);
    padding-top: 0.25rem;
    margin-top: 0.25rem;
}

/* Indicador de carga del botón «Actualizar ahora» del panel de capas
   meteorológicas (modules/capas_meteo.js). Es puramente decorativo
   (aria-hidden): quien no lo ve se entera por el rótulo del botón y por la
   región `role="status"` del panel. */
.cm-spin {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cm-spin 0.7s linear infinite;
}

@keyframes cm-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-panel__chevron {
        transition: none;
    }

    .cm-spin {
        animation: none;
    }
}

/* Map Markers — legacy (kept for compatibility, no longer used by main map) */
.marker-critical {
    animation: blink-critical 0.8s infinite ease-in-out;
}

@keyframes blink-critical {

    0%,
    100% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.9));
    }

    50% {
        opacity: 0.4;
        filter: drop-shadow(0 0 15px rgba(220, 38, 38, 1));
    }
}

/* ===========================================================
   SIGEIM — Sismo nuevo (flash al aparecer en el feed en vivo)
   =========================================================== */
.sigeim-sismo-nuevo {
    animation: sigeimSismoFlash 2.5s ease-out 1;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
}

@keyframes sigeimSismoFlash {
    0% {
        background: #fee2e2 !important;
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.45);
        transform: scale(1.02);
    }
    60% {
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
        transform: scale(1);
    }
}

@keyframes sigeimBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ===========================================================
   SIGEIM Dual-encoded case markers — TRIANGLE shape
   - Forma = TRIÁNGULO (▲) → distingue casos del directorio (círculo)
   - Color  = prioridad (--marker-color: rojo/amarillo/azul)
   - Ícono  = categoría (FontAwesome blanco al centro)
   - Tamaño = escalado por prioridad
   - Crítico: halo pulsante via drop-shadow (respeta la forma triangular)
   =========================================================== */
.sigeim-case-marker-wrapper {
    background: transparent !important;
    border: none !important;
}

.sigeim-case-marker {
    width: 100%;
    height: 100%;
    background: var(--marker-color, #3b82f6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Triángulo apuntando hacia arriba (▲) — convención de advertencia */
    clip-path: polygon(50% 4%, 96% 96%, 4% 96%);
    transition: transform 0.15s ease, filter 0.15s ease;
    cursor: pointer;
    /* Borde blanco "fake" via drop-shadow multidireccional (los borders no
       respetan clip-path) + sombra base de elevación */
    filter:
        drop-shadow(1.5px 0 0 white)
        drop-shadow(-1.5px 0 0 white)
        drop-shadow(0 1.5px 0 white)
        drop-shadow(0 -1.5px 0 white)
        drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.sigeim-case-marker:hover {
    transform: scale(1.18);
    z-index: 1000 !important;
}

.sigeim-case-marker i {
    font-size: 0.78rem;
    line-height: 1;
    /* Empujamos el ícono hacia el centroide visual del triángulo (~33% desde abajo) */
    transform: translateY(28%);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.sigeim-case-marker.critical i {
    font-size: 1rem;
    transform: translateY(25%);
}

/* Crítico: pulso rojo continuo (usa drop-shadow porque box-shadow ignora clip-path) */
.sigeim-case-marker.critical {
    animation: sigeim-pulse-tri-critical 1.4s ease-out infinite;
}

@keyframes sigeim-pulse-tri-critical {
    0% {
        filter:
            drop-shadow(1.5px 0 0 white) drop-shadow(-1.5px 0 0 white)
            drop-shadow(0 1.5px 0 white) drop-shadow(0 -1.5px 0 white)
            drop-shadow(0 0 0 rgba(220, 38, 38, 0.75))
            drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
    }
    70% {
        filter:
            drop-shadow(1.5px 0 0 white) drop-shadow(-1.5px 0 0 white)
            drop-shadow(0 1.5px 0 white) drop-shadow(0 -1.5px 0 white)
            drop-shadow(0 0 10px rgba(220, 38, 38, 0.9))
            drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
    }
    100% {
        filter:
            drop-shadow(1.5px 0 0 white) drop-shadow(-1.5px 0 0 white)
            drop-shadow(0 1.5px 0 white) drop-shadow(0 -1.5px 0 white)
            drop-shadow(0 0 0 rgba(220, 38, 38, 0))
            drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
    }
}

/* Alta: pulso amarillo más suave */
.sigeim-case-marker.high {
    animation: sigeim-pulse-tri-high 2.4s ease-out infinite;
}

@keyframes sigeim-pulse-tri-high {
    0% {
        filter:
            drop-shadow(1.5px 0 0 white) drop-shadow(-1.5px 0 0 white)
            drop-shadow(0 1.5px 0 white) drop-shadow(0 -1.5px 0 white)
            drop-shadow(0 0 0 rgba(234, 179, 8, 0.6))
            drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
    }
    70% {
        filter:
            drop-shadow(1.5px 0 0 white) drop-shadow(-1.5px 0 0 white)
            drop-shadow(0 1.5px 0 white) drop-shadow(0 -1.5px 0 white)
            drop-shadow(0 0 7px rgba(234, 179, 8, 0.8))
            drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
    }
    100% {
        filter:
            drop-shadow(1.5px 0 0 white) drop-shadow(-1.5px 0 0 white)
            drop-shadow(0 1.5px 0 white) drop-shadow(0 -1.5px 0 white)
            drop-shadow(0 0 0 rgba(234, 179, 8, 0))
            drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
    }
}

/* Tooltip estilizado para los casos */
.leaflet-tooltip.sigeim-case-tooltip {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    padding: 8px 10px;
    font-size: 12px;
    color: #1f2937;
    pointer-events: none;
}
.leaflet-tooltip.sigeim-case-tooltip::before {
    border-top-color: #e5e7eb;
}

.marker-high {
    animation: pulse-yellow 2s infinite;
}

@keyframes pulse-yellow {
    0% {
        filter: drop-shadow(0 0 0 rgba(234, 179, 8, 0.7));
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.8));
    }

    100% {
        filter: drop-shadow(0 0 0 rgba(234, 179, 8, 0.7));
    }
}

.marker-normal {
    filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.4));
}

.emergency-alert-pin {
    position: relative;
}

.emergency-alert-pin::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.3) 0%, transparent 70%);
    animation: emergency-pulse 1.5s infinite;
    pointer-events: none;
}

@keyframes emergency-pulse {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.filter-panel {
    transition: all 0.3s ease;
}

.filter-panel.collapsed {
    max-height: 0;
    overflow: hidden;
    padding: 0;
}

.sidebar-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: auto;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sidebar-help:hover {
    color: #f4c430;
    border-color: #f4c430;
    background: rgba(244, 196, 48, 0.2);
    transform: scale(1.15);
}

.toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    transition: .4s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

input:checked+.toggle-slider {
    background-color: var(--primary-color);
}

input:checked+.toggle-slider:before {
    transform: translateX(24px);
}

/* Scrollbar minimalista */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.heatmap-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 0 !important;
    background: var(--bg-primary) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.heatmap-fullscreen.sec-ancha {
    max-width: 100vw !important;
}

/* En pantalla completa desaparecen la barra de navegación, la lateral y la de
   filtros, así que sobre el bloque sólo quedan la cabecera del mapa y los KPIs.
   El descuento (17.5rem = 280 px) es lo que miden esos dos más los 16 px de
   padding de la sección. Se mantiene el plegado de la cola: el modo de pantalla
   completa es justo donde más se quiere el mapa ancho.
   SÓLO desde 1024 px: por debajo, `.hm-split` se apila en una columna (regla de
   arriba) y esta altura FIJA sobre la rejilla apilada dejaba a `.hm-cola` con
   las sobras — MEDIDO: cola de 500 px caía a 18-118 px entre 769 y 1023 px, con
   la lista y la paginación recortadas por el `overflow:hidden` de `.hm-cola`. */
@media (min-width: 1024px) {
    .heatmap-fullscreen .hm-split {
        height: calc(100vh - 17.5rem);
        min-height: 320px;
    }
}

/* Banda 769-1023 px: `.hm-split` ya no fuerza altura (regla de arriba), así que
   la cola recupera su alto natural (515 px medidos); pero `.hm-mapa` seguía
   clavado en 378 px por la regla `@media (max-width:1024px)` de más abajo, que
   en pantalla completa es demasiado poco. Se sube a 60vh + 16px de padding de
   la tarjeta — MEDIDO: el mapa pasa de 360 px a 478 px, por encima de la línea
   base (3327614) en los siete anchos de la banda. */
@media (min-width: 769px) and (max-width: 1023.98px) {
    .heatmap-fullscreen .hm-mapa {
        height: calc(60vh + 16px);
    }
}

.fullscreen-exit-btn {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    backdrop-filter: blur(4px);
}

.fullscreen-exit-btn:hover {
    background: rgba(220, 53, 69, 0.9);
    transform: scale(1.1);
}

.heatmap-fullscreen #fullscreenBtn {
    display: none !important;
}

.field-valid {
    border-color: var(--success-color) !important;
    background-color: rgba(22, 163, 74, 0.05) !important;
}

.field-invalid {
    border-color: var(--danger-color) !important;
    background-color: rgba(220, 53, 69, 0.05) !important;
}

.field-validating {
    border-color: var(--secondary-color) !important;
}

.helper-text {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.helper-text.error {
    color: var(--danger-color);
}

.helper-text.success {
    color: var(--success-color);
}

.validation-icon {
    width: 14px;
    height: 14px;
}

.swal2-input-group {
    margin-bottom: 12px;
}

.swal2-input-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.swal2-input-group .helper-text {
    min-height: 16px;
}

/* Inputs minimalistas */
input,
select,
textarea {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.15);
    outline: none;
}

/* Buttons minimalistas */
button {
    transition: all 0.2s ease;
}

/* Shadows sutiles */
.shadow-md {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.shadow-lg {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Header sections con bordes */
.border-b {
    border-bottom: 1px solid var(--border-color) !important;
}

/* Badges con estilo limpio */
.badge,
.px-2.py-1.rounded {
    font-weight: 500;
}

/* Fix para select en navbar - opciones visibles */
#roleSelect {
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 24px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0 center;
    background-repeat: no-repeat;
    background-size: 20px;
}

#roleSelect option {
    background-color: #ffffff;
    color: #1a1a1a;
    padding: 10px 12px;
    font-weight: 500;
}

#roleSelect option:hover,
#roleSelect option:focus,
#roleSelect option:checked {
    background-color: #e8eef6;
    color: #1a1a1a;
}

/* Otros selects en navbar */
nav select {
    background: transparent;
}

nav select option {
    background-color: #ffffff;
    color: #1a1a1a;
    padding: 8px 12px;
}

/* Fix global: opciones de select siempre visibles */
select option {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    padding: 8px 12px;
}

/* Selects dentro de headers con gradiente */
.content-section select {
    color: var(--text-primary);
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
    cursor: pointer;
}

/* Selects dentro de banners con gradiente (header de secciones) */
[class*="bg-gradient"] select {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 13px;
    cursor: pointer;
    -webkit-appearance: auto;
    appearance: auto;
}

[class*="bg-gradient"] select option {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

/* ============================================================
   MÓDULO MEDICAMENTOS — Tabs, Botones y Modales
   ============================================================ */

/* Botones de pestaña */
.med-tab {
    padding: .45rem 1rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    color: #374151;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.med-tab:hover {
    border-color: #1B3A5C;
    color: #1B3A5C;
    background: #eef2f8;
}

.med-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(27, 58, 92, 0.35);
}

/* Botón de acción principal */
.btn-ok {
    padding: .45rem 1rem;
    background: var(--primary-color);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.btn-ok:hover {
    background: var(--primary-dark);
    box-shadow: 0 3px 10px rgba(27, 58, 92, 0.4);
    transform: translateY(-1px);
}

/* Modal overlay */
.med-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(2px);
}

.med-modal-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.75rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    animation: fadeIn .2s ease;
}

.med-modal-box h3 {
    margin: 0 0 1.25rem;
    color: #1f2937;
    font-size: 1.1rem;
}

/* Botones dentro de modales */
.med-modal-box .btn-ok {
    width: 100%;
    padding: .65rem 1rem;
    font-size: .9rem;
    margin-top: .5rem;
}

/* ── Dropdown de Exportación Multi-Formato ─────────────────────────────── */
@keyframes exportDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.export-dropdown {
    animation: exportDropdownIn .16s ease forwards;
}

.export-dropdown button {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem 1.1rem;
    border: none;
    background: white;
    cursor: pointer;
    font-size: .87rem;
    font-weight: 500;
    color: #374151;
    text-align: left;
    transition: background .12s, color .12s;
    border-bottom: 1px solid #f3f4f6;
}

.export-dropdown button:last-child {
    border-bottom: none;
}

.export-dropdown button:hover {
    background: #eef2f8;
    color: #1B3A5C;
}

.export-dropdown button .fmt-icon {
    font-size: 1.1rem;
    width: 1.4rem;
    text-align: center;
}

/* =================================================================
   RESPONSIVE DESIGN — Mobile & Tablet Breakpoints
   ================================================================= */

/* --- TABLET (max-width: 1024px) --- */
@media (max-width: 1024px) {
    /* Stat cards: 2 columns instead of 4 */
    .grid.grid-cols-2.lg\:grid-cols-4,
    .grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Map height smaller. El alto lo lleva la TARJETA: 360 px de mapa + los
       16 px de su `p-2`. Antes estaba en `#map` y la tarjeta lo repetía en
       línea; ahora `#map` es siempre `height:100%` de su tarjeta. */
    .hm-mapa {
        height: 378px;
    }

    /* Reduce padding in sections */
    .content-section .p-6 {
        padding: 1rem !important;
    }
}

/* --- MOBILE (max-width: 768px) --- */
@media (max-width: 768px) {
    /* Header: stack elements vertically */
    nav.flex {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 60px;
        padding: 8px 12px !important;
        gap: 6px;
    }

    /* Hide verbose header elements on small screens */
    nav .hidden-mobile,
    nav .text-xs.text-gray-300 {
        display: none !important;
    }

    /* Role select: compact */
    #roleSelect {
        font-size: 11px;
        padding: 2px 6px;
        max-width: 120px;
    }

    /* Username/role badges: truncate */
    nav .truncate,
    nav [class*="font-semibold"] {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Main content: full width */
    .main-content {
        margin-left: 0 !important;
    }

    /* Stat cards: 2 columns on mobile */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4,
    .grid.md\:grid-cols-2,
    .grid.md\:grid-cols-3,
    .grid.md\:grid-cols-4,
    .grid.lg\:grid-cols-3,
    .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Map: shorter on mobile (280 px de mapa + 16 px de padding de la tarjeta) */
    .hm-mapa {
        height: 298px;
    }

    /* Heatmap fullscreen map */
    .heatmap-fullscreen .hm-split {
        height: auto;
    }

    .heatmap-fullscreen .hm-mapa {
        height: calc(45vh + 16px);
    }

    /* Filter panels: vertical stack */
    .filter-panel .flex,
    .flex.gap-2,
    .flex.gap-3,
    .flex.gap-4 {
        flex-wrap: wrap !important;
    }

    /* Buttons: full width on mobile */
    .filter-panel button,
    .filter-panel select {
        min-width: 100% !important;
    }

    /* Section headers with gradient: stack */
    [class*="bg-gradient-to"] .flex {
        flex-wrap: wrap !important;
        gap: 8px;
    }

    /* Floating action buttons: stack vertically on right edge */
    .fixed.bottom-6.right-6,
    .fixed.bottom-20.right-6,
    .fixed.bottom-24.right-6 {
        right: 10px !important;
        bottom: auto;
        z-index: 50;
    }

    /* AI Assistant button */
    .fixed.bottom-6.right-6 {
        bottom: 12px !important;
        right: 10px !important;
    }

    /* Alerts panel button */
    .fixed.bottom-20.right-6,
    .fixed.bottom-24.right-6 {
        bottom: 70px !important;
        right: 10px !important;
    }

    /* Floating panels: full width */
    .fixed.bottom-20.right-6 > div,
    .fixed[class*="right-6"] > .bg-white {
        width: calc(100vw - 20px) !important;
        max-width: 100% !important;
        right: 10px !important;
    }

    /* Modals: full width with padding */
    .med-modal-box {
        max-width: calc(100vw - 24px) !important;
        padding: 1.25rem !important;
    }

    /* SweetAlert2 modals responsive */
    .swal2-popup {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 1rem !important;
        font-size: 14px !important;
    }

    /* Table: horizontal scroll */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    table thead, table tbody, table tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    /* Tab navigation: scrollable */
    .med-tab {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
    }

    /* Cards text: slightly smaller */
    .text-2xl {
        font-size: 1.25rem !important;
    }

    .text-3xl {
        font-size: 1.5rem !important;
    }

    /* Padding reductions */
    .p-6 {
        padding: 0.75rem !important;
    }

    .p-4 {
        padding: 0.65rem !important;
    }

    .px-6 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* --- SMALL MOBILE (max-width: 480px) --- */
@media (max-width: 480px) {
    /* Stat cards: single column for very small screens */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4,
    .grid.md\:grid-cols-2,
    .grid.md\:grid-cols-3,
    .grid.md\:grid-cols-4,
    .grid.lg\:grid-cols-3,
    .grid.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Header: minimal */
    nav.flex {
        padding: 6px 8px !important;
    }

    /* Logo text: hide */
    nav .text-lg,
    nav .text-xl {
        font-size: 0.85rem !important;
    }

    /* Map even shorter (220 px de mapa + 16 px de padding de la tarjeta) */
    .hm-mapa {
        height: 238px;
    }

    /* Section title text */
    .text-xl {
        font-size: 1rem !important;
    }

    .text-lg {
        font-size: 0.9rem !important;
    }
}

/* =================================================================
   RIESGO HIDROLÓGICO — procedencia del inventario de sectores
   -----------------------------------------------------------------
   Lo pinta cargarRiesgoHidrologico() en js/modules/external.js con la
   respuesta de /api/v1/riesgo-hidrologico. Las clases viven aquí (y no
   como estilos en línea sueltos) porque los TAMAÑOS son tokens: el
   mínimo del proyecto es 14px = 0.875rem con line-height ~1.5, y el
   panel venía usando 0.68-0.72rem.
   ================================================================= */
#hydro-risk-panel {
    --hydro-fs-nota: 0.875rem;
    /* 14px */
    --hydro-fs-sector: 0.9375rem;
    /* 15px */
    --hydro-fs-meta: 0.875rem;
    --hydro-fs-chip: 0.875rem;
    --hydro-lh: 1.5;
    --hydro-nota-bg: #fffbeb;
    --hydro-nota-borde: #f59e0b;
    --hydro-nota-texto: #78350f;
    --hydro-vacio-borde: #cbd5e1;
    --hydro-vacio-texto: #475569;
}

/* Aviso de procedencia: una sola caja con las líneas que apliquen, en vez
   de un aviso por fila (con TODOS los sectores provisionales, marcar cada
   fila es ruido y deja de distinguir nada). */
#hydro-risk-panel .hydro-nota {
    background: var(--hydro-nota-bg);
    border-left: 4px solid var(--hydro-nota-borde);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.75rem;
    font-size: var(--hydro-fs-nota);
    line-height: var(--hydro-lh);
    color: var(--hydro-nota-texto);
}

#hydro-risk-panel .hydro-nota-titulo {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

#hydro-risk-panel .hydro-nota-linea+.hydro-nota-linea {
    margin-top: 0.3rem;
}

/* Estado VACÍO (el servidor no devolvió sectores / quebradas). */
#hydro-risk-panel .hydro-vacio {
    background: #ffffff;
    border: 1px dashed var(--hydro-vacio-borde);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-bottom: 1.25rem;
    text-align: center;
    font-size: var(--hydro-fs-nota);
    line-height: var(--hydro-lh);
    color: var(--hydro-vacio-texto);
}

#hydro-risk-panel .hydro-sector-nombre {
    font-weight: 600;
    font-size: var(--hydro-fs-sector);
    line-height: var(--hydro-lh);
}

#hydro-risk-panel .hydro-sector-meta {
    font-size: var(--hydro-fs-meta);
    line-height: var(--hydro-lh);
}

#hydro-risk-panel .hydro-sector-score {
    font-size: var(--hydro-fs-meta);
    line-height: var(--hydro-lh);
    font-weight: 700;
    white-space: nowrap;
}

/* Marca de fila PROVISIONAL (sólo cuando hay mezcla de confirmados y sin
   confirmar: es entonces cuando distinguir fila a fila informa). */
#hydro-risk-panel .hydro-chip-prov {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.4rem;
    border-radius: 9999px;
    border: 1px solid #fcd34d;
    background: #fef3c7;
    color: #92400e;
    font-size: var(--hydro-fs-chip);
    line-height: var(--hydro-lh);
    font-weight: 700;
    cursor: help;
}

/* Marca ≈ de valor por defecto (no medido). */
#hydro-risk-panel .hydro-est {
    cursor: help;
}