/* ============================================================
   MAPA INTERACTIVO — Observatorio Regional de Seguridad Vial
   ============================================================ */

/* ============================================================
   FILA 2 — Mapa + Columna derecha (rankings)
   ============================================================ */
.fila-mapa {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
    align-items: start;  /* Que el mapa NO crezca cuando ranking expande */
}

/* ─── Bloque principal del mapa ──────────────────────── */
.bloque-mapa-principal {
    background: var(--c-blanco);
    border-radius: var(--radius);
    box-shadow: var(--shadow-tarjeta);
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    height: 620px;          /* Altura fija — no varía al expandir rankings */
    display: flex;
    flex-direction: column;
}

.bloque-mapa-titulo {
    font-family: var(--f-sub);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--c-azul-principal);
    margin-bottom: 8px;
    position: relative;
    z-index: 5;
    text-align: center;
}

/* ─────────────────────────────────────────────────────
   FONDO DECORATIVO DEL MAPA — FONDO_MAPA.svg original
   
   Usamos el SVG original del cliente (forma orgánica de costa)
   embebido inline con preserveAspectRatio="xMinYMin slice" para
   anclarlo a la esquina superior-izquierda y recortar lo que
   sobra. Así mantenemos la silueta de costa intacta sin
   deformarla, y al hacer zoom del navegador la correlación
   con el contenedor se mantiene perfecta.
   ───────────────────────────────────────────────────── */

/* Capa de tierra — color gris cálido base (queda detrás del fondo de mar) */
.mapa-fondo-tierra {
    position: absolute;
    inset: 0;
    background: #C7C3BB;
    opacity: 0;  /* desactivada: el fondo de olas ya cubre todo */
    z-index: 0;
    pointer-events: none;
}

/* Contenedor del fondo de olas — cubre TODO el bloque */
.mapa-fondo-olas {
    position: absolute;
    inset: 0;          /* top:0 right:0 bottom:0 left:0 — cubre todo */
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

/* El SVG inline llena el contenedor estirándose libremente.
   Con preserveAspectRatio="none" en el propio SVG, las olas
   se adaptan a cualquier proporción sin desfase. */
.mapa-fondo-olas > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Contenedor del mapa SVG */
.mapa-svg-cont {
    flex: 1;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 80px;
}
.mapa-svg-cont svg {
    width: 100%;
    height: 100%;
    max-height: 480px;
    overflow: visible;
}

/* Estilos de las provincias */
.mapa-prov {
    cursor: pointer;
    stroke: #fff;
    stroke-width: 2;
    stroke-linejoin: round;
    transition: filter 0.15s;
}
.mapa-prov:hover {
    filter: brightness(1.06) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
}
.mapa-prov.activa {
    filter: brightness(1.08) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.22));
}

/* Etiquetas (nombre + número) */
.mapa-etiquetas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.mapa-etiqueta {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: var(--f-texto);
    line-height: 1.1;
    white-space: nowrap;        /* nombres cortos en una sola línea */
}
.mapa-etiqueta-nombre {
    font-weight: 500;
    font-size: 12px;
    color: var(--c-azul-principal);
    text-align: center;
}
/* Para nombres partidos en dos líneas (Sánchez/Carrión, Santiago/de Chuco)
   se permite el salto y el alto de línea queda compacto */
.mapa-etiqueta-nombre.mapa-etiqueta-multilinea {
    white-space: normal;
    line-height: 1.05;
}
.mapa-etiqueta-numero {
    font-family: var(--f-sub);
    font-weight: 600;
    font-size: 11px;
    margin-top: 1px;
    text-align: center;
}

/* ─── Bloque Leyenda ─────────────────────────────────── */
.mapa-leyenda {
    position: absolute;
    bottom: 18px;
    left: 22px;
    background: var(--c-blanco);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    z-index: 6;
    min-width: 170px;
}
.mapa-leyenda-titulo {
    font-family: var(--f-texto);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--c-azul-principal);
    margin-bottom: 8px;
}
.mapa-leyenda-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    font-family: var(--f-texto);
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--c-azul-principal);
}
.mapa-leyenda-color {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ─── Tooltip flotante (datos ligeros al hover) ──────── */
.mapa-tooltip {
    position: absolute;
    background: rgba(246, 247, 251, 0.92);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 8px 22px rgba(0, 48, 96, 0.15);
    pointer-events: none;
    z-index: 12;
    opacity: 0;
    transition: opacity 0.18s;
    font-family: var(--f-texto);
    font-weight: 600;
    color: var(--c-azul-principal);
    min-width: 200px;
}
.mapa-tooltip.visible { opacity: 1; }
.mapa-tooltip-titulo {
    font-family: var(--f-texto);
    font-weight: 600;
    font-size: 1.4rem;
    margin-bottom: 6px;
}
.mapa-tooltip-fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.88rem;
    padding: 2px 0;
}
.mapa-tooltip-fila span:last-child {
    font-weight: 700;
}

/* ─── Bloque Detalle (al hacer click) ────────────────── */
.mapa-detalle {
    position: absolute;
    bottom: 18px;
    left: 220px;
    right: 22px;
    max-width: 760px;
    background: rgba(246, 247, 251, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 16px 22px 14px;
    box-shadow: 0 10px 28px rgba(0, 48, 96, 0.18);
    z-index: 7;
    display: none;
    grid-template-columns: 0.9fr 0.7fr 1.4fr;
    gap: 18px;
    align-items: stretch;
}
.mapa-detalle.visible { display: grid; }

/* Cada columna del detalle */
.mapa-detalle-info,
.mapa-detalle-checks,
.mapa-detalle-grafico {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.mapa-detalle.visible { display: grid; }

.mapa-detalle-info-titulo {
    font-family: var(--f-texto);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--c-azul-principal);
    margin-bottom: 8px;
}
.mapa-detalle-fila {
    display: flex;
    gap: 8px;
    font-size: 0.82rem;
    margin-bottom: 4px;
}
.mapa-detalle-fila-label {
    font-family: var(--f-sub);
    font-weight: 700;
    color: var(--c-azul-principal);
}
.mapa-detalle-fila-valor {
    font-family: var(--f-texto);
    font-weight: 500;
    color: var(--c-azul-principal);
}

.mapa-detalle-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mapa-detalle-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-texto);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--c-azul-principal);
    cursor: pointer;
}
.mapa-detalle-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--c-azul-principal);
    cursor: pointer;
}

.mapa-detalle-grafico {
    position: relative;
}
.mapa-detalle-grafico-titulo {
    font-family: var(--f-sub);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--c-azul-principal);
    margin-bottom: 4px;
}
.mapa-detalle-grafico-canvas {
    width: 100% !important;
    height: 90px !important;
    max-height: 90px !important;
}

.mapa-detalle-cerrar {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: transparent;
    color: var(--c-azul-principal);
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    transition: background 0.2s;
    cursor: pointer;
    z-index: 10;
}
.mapa-detalle-cerrar:hover { background: var(--c-azul-accion); }

/* ============================================================
   COLUMNA DERECHA — Rankings (Siniestros/Fallecidos/Heridos)
   ============================================================ */
.col-rankings {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bloque-ranking {
    background: var(--c-blanco);
    border-radius: var(--radius);
    box-shadow: var(--shadow-tarjeta);
    overflow: hidden;
    transition: all 0.3s;
}

.bloque-ranking-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    transition: background 0.2s;
}
.bloque-ranking-cabecera:hover {
    background: var(--c-azul-fondo);
}
.bloque-ranking-titulo {
    font-family: var(--f-sub);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--c-azul-principal);
}
.bloque-ranking-flecha {
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
}
.bloque-ranking.abierto .bloque-ranking-flecha {
    transform: rotate(180deg);
}

/* Si está cerrado: solo se ve el texto "Presiona para ver" */
.bloque-ranking-contraido {
    padding: 0 18px 12px;
}
.bloque-ranking-contraido-texto {
    font-family: var(--f-texto);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--c-azul-claro);
    cursor: pointer;
}
.bloque-ranking-contraido-texto:hover {
    text-decoration: underline;
}

.bloque-ranking.abierto .bloque-ranking-contraido { display: none; }

.bloque-ranking-cuerpo {
    padding: 4px 18px 16px;
    display: none;
}
.bloque-ranking.abierto .bloque-ranking-cuerpo { display: block; }

/* Items del ranking */
.ranking-item {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    gap: 8px;
    align-items: baseline;
    padding: 6px 0 4px;
    font-family: var(--f-sub);
}
.ranking-pos {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--c-azul-principal);
}
.ranking-nombre {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--c-azul-principal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ranking-valor {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--c-azul-principal);
}
.ranking-barra-bg {
    grid-column: 2 / -1;
    height: 5px;
    background: #EEF1F5;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 2px;
}
.ranking-barra-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Botón "ver todas las provincias" */
.bloque-ranking-vermas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 0 4px;
    font-family: var(--f-texto);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--c-azul-claro);
    cursor: pointer;
    transition: opacity 0.2s;
}
.bloque-ranking-vermas:hover { opacity: 0.7; }
.bloque-ranking-vermas img {
    width: 12px;
    height: 12px;
    transition: transform 0.3s;
}
.bloque-ranking-vermas.expandido img {
    transform: rotate(180deg);
}

/* ─── Bloque Vehículos involucrados (no contraíble) ──── */
.bloque-vehiculos {
    background: var(--c-blanco);
    border-radius: var(--radius);
    box-shadow: var(--shadow-tarjeta);
    padding: 16px 18px;
}
.bloque-vehiculos-titulo {
    font-family: var(--f-sub);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--c-azul-principal);
    margin-bottom: 10px;
}
.bloque-vehiculos-cuerpo {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    align-items: center;
}
.bloque-vehiculos-grafico {
    position: relative;
    height: 110px;
    /* v1.11.1 — Fix: tooltip de Chart.js quedaba debajo de la leyenda
       hermana. Aislamos stacking: gráfico por encima, leyenda debajo. */
    z-index: 10;
}
.bloque-vehiculos-grafico canvas {
    position: relative;
    z-index: 1;
}
.bloque-vehiculos-leyenda {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vehiculo-item-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-sub);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--c-azul-principal);
}
.vehiculo-item-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.vehiculo-item-porcentaje {
    font-family: var(--f-texto);
    font-weight: 500;
    font-size: 1.1rem;
    margin-left: 20px;
    margin-top: 2px;
}

/* v1.11.1 — Tooltip HTML externo del bloque vehículos.
   Posicionado por Chart.js con coords del viewport (position:fixed);
   no se recorta por canvas ni por overflow de ancestros. */
.chartjs-tooltip-vehic {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    background: #003060;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: var(--f-texto, sans-serif);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    transform: translate(-50%, calc(-100% - 10px));
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1300px) {
    .fila-mapa {
        grid-template-columns: 1fr 300px;
    }
    .mapa-detalle {
        left: 22px;
        right: 22px;
        max-width: none;
        grid-template-columns: 1fr 1fr 2fr;
    }
}

@media (max-width: 1024px) {
    .fila-mapa {
        grid-template-columns: 1fr;
    }
    .bloque-mapa-principal { min-height: 480px; }
    .mapa-detalle {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .mapa-leyenda {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 12px;
    }
    .mapa-svg-cont { padding: 0 20px; }
}