/* ===== mapa.css =====
   Sección de mapas territoriales del dashboard.
   ============================================================ */

.mapa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.mapa-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.025);
}

.mapa-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.mapa-card-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
}

/* Badges */
.mapa-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
.mapa-badge--activos {
    background: rgba(26,111,191,.20);
    color: var(--cielo, #5BAAE0);
    border: 1px solid rgba(26,111,191,.32);
}
.mapa-badge--riesgo {
    background: rgba(192,40,64,.20);
    color: #e05878;
    border: 1px solid rgba(192,40,64,.32);
}

/* -----------------------------------------------------------------------
   Contenedor del SVG
   overflow:visible asegura que ningún path quede recortado.
   El aspect-ratio se delega al viewBox del propio SVG.
----------------------------------------------------------------------- */
.mapa-wrap {
    position: relative;
    width: 100%;
    /* Fondo claro para que el blanco de los estados sin casos sea visible */
    background: rgba(255,255,255,.04);
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 0;
}

.mapa-svg {
    display: block;
    width: 100%;
    height: auto;
    /* preserveAspectRatio="xMidYMid meet" en el propio SVG
       garantiza que todo el territorio quepa sin recortar */
}

/* Paths */
.mapa-estado {
    cursor: pointer;
    transition: filter .15s ease;
}
.mapa-estado:hover {
    filter: brightness(.82) drop-shadow(0 0 3px rgba(0,0,0,.35));
}

/* Tooltip */
.mapa-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    padding: 9px 13px;
    background: rgba(7,12,22,.95);
    border: 1px solid var(--stroke-strong);
    border-radius: var(--radius-xs);
    font-size: 12px;
    line-height: 1.55;
    color: var(--text);
    min-width: 160px;
    max-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,.40);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
    backdrop-filter: blur(8px);
}
.mapa-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.mapa-tooltip strong { color: var(--text); font-weight: 800; display: block; margin-bottom: 2px; }
.mapa-tooltip b      { color: var(--cielo, #5BAAE0); font-weight: 900; }
.mapa-tooltip span   { color: var(--text-muted); font-size: 11px; }

/* -----------------------------------------------------------------------
   Escala de color
   Izquierda = blanco (sin casos) → Derecha = color pleno
----------------------------------------------------------------------- */
.mapa-escala {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mapa-escala-label {
    font-size: 12px;
    color: var(--text-muted);
}
.mapa-escala-label strong { color: var(--text-soft); font-weight: 700; }

.mapa-escala-bar {
    height: 10px;
    border-radius: 99px;
    width: 100%;
    border: 1px solid rgba(255,255,255,.08);
}
/* Escala: blanco (izquierda, sin casos) → color (derecha, máximo) */
.mapa-escala-bar--activos {
    background: linear-gradient(90deg, #f0f4f8 0%, #1A6FBF 100%);
}
.mapa-escala-bar--riesgo {
    background: linear-gradient(90deg, #f0f4f8 0%, #C02840 100%);
}

.mapa-escala-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
}

/* -----------------------------------------------------------------------
   Light mode
----------------------------------------------------------------------- */
body.light .mapa-card {
    background: rgba(255,255,255,.85);
    border-color: var(--stroke);
}
body.light .mapa-wrap {
    background: rgba(220,230,240,.30);
}
body.light .mapa-tooltip {
    background: rgba(255,255,255,.97);
    border-color: var(--stroke-strong);
    color: #172033;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
body.light .mapa-tooltip strong { color: #172033; }
body.light .mapa-tooltip b      { color: var(--azul, #1A6FBF); }
body.light .mapa-tooltip span   { color: #64748b; }
body.light .mapa-escala-bar {
    border-color: rgba(0,0,0,.08);
}
/* En light mode los estados sin casos van en gris muy claro */
body.light .mapa-svg path.mapa-estado[data-total="0"] {
    fill: #e8eef4 !important;
    stroke: #c0cdd8 !important;
}

/* -----------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------- */
@media (max-width: 960px) {
    .mapa-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------
   Botón Ampliar
----------------------------------------------------------------------- */
.mapa-card-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mapa-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--stroke-strong);
    background: rgba(255,255,255,.05);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    white-space: nowrap;
    font-family: inherit;
}
.mapa-expand-btn:hover {
    background: rgba(255,255,255,.10);
    color: var(--text);
    border-color: var(--stroke-strong);
}
.mapa-expand-btn:focus-visible {
    outline: 2px solid var(--cielo, #5BAAE0);
    outline-offset: 2px;
}

body.light .mapa-expand-btn {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.14);
    color: #64748b;
}
body.light .mapa-expand-btn:hover {
    background: rgba(0,0,0,.08);
    color: #172033;
}

/* -----------------------------------------------------------------------
   Modal de mapa ampliado
----------------------------------------------------------------------- */

/* Bloquear scroll del body cuando el modal está abierto */
body.mapa-modal-open { overflow: hidden; }

.mapa-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mapa-modal[hidden] { display: none; }

/* Backdrop */
.mapa-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 5, 18, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: mapaFadeIn .18s ease;
}

/* Caja del modal */
.mapa-modal-box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 90vw;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 22px;
    border: 1px solid var(--stroke-strong);
    background: rgba(10, 16, 28, .97);
    box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
    overflow: hidden;
    animation: mapaSlideUp .22s cubic-bezier(.4,0,.2,1);
}

/* Cabecera del modal */
.mapa-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--stroke);
    flex-shrink: 0;
}
.mapa-modal-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.mapa-modal-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}

/* Botón cerrar */
.mapa-modal-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.05);
    color: var(--text-muted);
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
    font-family: inherit;
}
.mapa-modal-close:hover {
    background: rgba(255,255,255,.12);
    color: var(--text);
}
.mapa-modal-close:focus-visible {
    outline: 2px solid var(--cielo, #5BAAE0);
    outline-offset: 2px;
}

/* Cuerpo del modal */
.mapa-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px 20px;
    height: calc(90vh - 65px - 36px);
    box-sizing: border-box;
    overflow: hidden;
}

/* Contenedor del SVG: altura concreta para que el JS pueda leer clientHeight */
.mapa-modal-wrap {
    width: 100%;
    height: calc(90vh - 65px - 36px - 60px - 14px);
    position: relative;
    background: rgba(255,255,255,.03);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El SVG recibe width/height en px desde JS — no sobreescribir */
.mapa-modal-wrap .mapa-svg {
    display: block;
    flex-shrink: 0;
}

/* Animaciones */
@keyframes mapaFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mapaSlideUp {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Light mode modal */
body.light .mapa-modal-backdrop {
    background: rgba(15, 28, 56, .55);
}
body.light .mapa-modal-box {
    background: rgba(245, 248, 255, .98);
    border-color: var(--stroke);
    box-shadow: 0 32px 80px rgba(0,0,0,.22);
}
body.light .mapa-modal-head {
    border-bottom-color: var(--stroke);
}
body.light .mapa-modal-close {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.12);
    color: #64748b;
}
body.light .mapa-modal-close:hover {
    background: rgba(0,0,0,.10);
    color: #172033;
}
body.light .mapa-modal-wrap {
    background: rgba(220,230,240,.30);
}

/* Responsive: modal en pantallas pequeñas */
@media (max-width: 600px) {
    .mapa-modal { padding: 12px; }
    .mapa-modal-box {
        width: 96vw;
        max-width: 96vw;
        max-height: 92vh;
        border-radius: 18px;
    }
    .mapa-modal-head { padding: 14px 16px; }
    .mapa-modal-title { font-size: 13px; }
    .mapa-modal-body {
        height: calc(92vh - 65px - 36px);
        padding: 12px 14px 16px;
    }
    .mapa-modal-wrap {
        height: calc(92vh - 65px - 36px - 60px - 12px);
    }
}