/* ============================================================
   RESPONSIVE GLOBAL — Observatorio Regional de Seguridad Vial
   ============================================================
   Este archivo se carga DESPUÉS de todos los CSS específicos
   de cada versión (pública, muni, PNP, salud, GRTCLL). Contiene
   correcciones responsive que aplican transversalmente:
   - Refuerzo de breakpoints móviles (360, 390, 412, 768, 1024)
   - Prevención de overflow horizontal
   - Touch targets ≥ 44px
   - Ajustes específicos del banner GRTCLL, tabs, modales y mapa
   ============================================================ */

/* ═══════════════════ Reglas globales (todos los tamaños) ═══════════════════ */

/* Prevenir scroll horizontal accidental sin romper mapas ni Leaflet */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;  /* iOS no rescala texto al girar */
}
/* Los contenedores propios que sí necesitan overflow (tablas, mapas, treemaps)
   se manejan puntualmente más abajo. */

/* Fix específico para el mapa Leaflet: sus tiles pueden reportar overflow
   pero están recortados por el contenedor. Aseguramos eso. */
.mapa-cont-wrap, #mapa {
    max-width: 100%;
    overflow: hidden;
}

/* Imágenes y svgs nunca deben salir del contenedor por defecto */
img, svg, canvas {
    max-width: 100%;
}

/* Tablas: wrapper con scroll horizontal cuando el contenido es más ancho */
.tabla-scroll,
.ranking-tabla-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tabla-scroll .tabla-datos,
.ranking-tabla-wrap .ranking-tabla {
    min-width: max-content;
}

/* Touch targets: garantizar mínimo 44×44 en botones interactivos táctiles */
@media (hover: none) and (pointer: coarse) {
    .btn-descarga, .btn-expandir, .btn-descarga-tabla,
    .reporte-descarga, .btn-borrar, .btn-ficha-completa, .btn-ficha-descargar,
    .tab-pill, .filtros-muni select, .modal-cerrar {
        min-height: 44px;
    }
    .btn-descarga, .btn-expandir, .reporte-descarga {
        min-width: 44px;
    }
    /* En el mapa Leaflet, controles de zoom más grandes */
    .leaflet-touch .leaflet-bar a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
}

/* Modales: en móvil ocupan pantalla casi completa */
@media (max-width: 640px) {
    .modal-grafico { padding: 8px; }
    .modal-grafico-contenido {
        width: 100%; max-width: 100%;
        max-height: 90vh;
        border-radius: 10px;
    }
    .modal-grafico-area { min-height: 320px; }
    .modal-cerrar {
        width: 40px; height: 40px;
        font-size: 1.6rem;
    }
}

/* ═══════════════════ Banner GRTCLL — móvil ═══════════════════ */
/* Sin texto HTML del título (la imagen ya lo tiene). En móvil el
   escudo y la descripción se colocan al pie del banner sobre un
   overlay vertical, centrados. */
@media (max-width: 900px) {
    .banner-grtcll {
        height: 210px;
    }
    .banner-grtcll-img {
        object-position: center 40%;
    }
    .banner-grtcll-overlay {
        background: linear-gradient(180deg,
            rgba(0,48,96,0.05)  0%,
            rgba(0,48,96,0.15) 30%,
            rgba(0,48,96,0.65) 60%,
            rgba(0,48,96,0.95) 82%,
            #003060           100%) !important;
    }
    .banner-grtcll-contenido {
        top: auto; bottom: 14px; right: 16px; left: 16px;
        transform: none;
        max-width: 100%;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 14px;
    }
    .banner-grtcll-escudo { height: 66px; }
    .banner-grtcll-desc {
        font-size: 0.75rem;
        max-width: none;
        flex: 1;
        text-align: left;
    }
}
@media (max-width: 480px) {
    .banner-grtcll { height: 180px; }
    .banner-grtcll-escudo { height: 56px; }
    .banner-grtcll-desc { font-size: 0.7rem; }
    .banner-grtcll-contenido { bottom: 10px; right: 12px; left: 12px; gap: 10px; }
}

/* ═══════════════════ Tabs GRTCLL — scroll horizontal ═══════════════════ */
@media (max-width: 900px) {
    .tabs-nav {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap !important;
        gap: 8px;
        padding-bottom: 12px;
        margin-bottom: 12px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }
    .tabs-nav::-webkit-scrollbar { height: 4px; }
    .tabs-nav::-webkit-scrollbar-thumb { background: #cdd8e4; border-radius: 2px; }
    .tab-pill {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 10px 16px;
        font-size: 0.82rem;
        scroll-snap-align: start;
    }
}
@media (max-width: 480px) {
    .tab-pill { padding: 9px 14px; font-size: 0.78rem; }
}

/* ═══════════════════ KPIs — refuerzo en móvil ═══════════════════ */
/* Los CSS existentes cambian 4→2→1 en 1200/820 px. En pantallas medianas
   (600-900) queremos 2 columnas siempre. */
@media (max-width: 900px) and (min-width: 481px) {
    .fila-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
}
@media (max-width: 480px) {
    .fila-kpis { grid-template-columns: 1fr !important; gap: 10px; }
    .fila-kpis .kpi { padding: 12px 14px; }
    .kpi-icono { width: 42px; height: 42px; }
    .kpi-numero { font-size: 1.4rem; }
    .kpi-label { font-size: 0.75rem; }
    .kpi-vs, .kpi-vs-largo { font-size: 0.68rem; }
}

/* ═══════════════════ Grid del dashboard GRTCLL (tabs) ═══════════════════ */
@media (max-width: 900px) and (min-width: 601px) {
    .grid-tab { grid-template-columns: 1fr 1fr !important; }
    .grid-tab .tarj-full { grid-column: span 2 !important; }
    .grid-tab .tarj-mitad { grid-column: span 2 !important; }
}
@media (max-width: 600px) {
    .grid-tab { grid-template-columns: 1fr !important; }
    .grid-tab .tarj-full, .grid-tab .tarj-mitad { grid-column: span 1 !important; }
    .grid-tab .tarjeta { min-height: 260px !important; }
}

/* ═══════════════════ Grids PNP y Salud ═══════════════════ */
@media (max-width: 600px) {
    .pnp-f2, .salud-f2, .muni-f2 { grid-template-columns: 1fr !important; }
    .pnp-f2 .tarj-full, .pnp-f2 .tarj-mitad,
    .salud-f2 .tarj-full, .salud-f2 .tarj-mitad,
    .muni-f2 .tarj-full, .muni-f2 .tarj-mitad { grid-column: span 1 !important; }
}

/* ═══════════════════ Mapa Interactivo en móvil ═══════════════════ */
/* Layout dos columnas → apilado (mapa arriba, panel de detalle debajo).
   El breakpoint existente era 1080, pero el panel de detalle era muy alto
   en móvil pequeño. Ajustamos altura mínima. */
@media (max-width: 900px) {
    .mapa-grid { grid-template-columns: 1fr !important; gap: 12px; }
    .mapa-cont-wrap { min-height: 420px !important; }
    .detalle-panel {
        max-height: none !important;
        padding: 14px 16px !important;
    }
    .detalle-fila {
        grid-template-columns: 110px 1fr !important;
    }
}
@media (max-width: 480px) {
    .mapa-cont-wrap { min-height: 360px !important; }
    .detalle-panel { padding: 12px 14px !important; }
    .detalle-fila {
        grid-template-columns: 100px 1fr !important;
        font-size: 0.78rem !important;
    }
    /* Tooltip del mapa en móvil: reducir ancho */
    .datos-ligeros.leaflet-tooltip {
        width: min(280px, calc(100vw - 40px)) !important;
    }
    .dl-fila { grid-template-columns: 96px 1fr !important; font-size: 0.72rem !important; }
    /* Leyenda del mapa más compacta */
    .leyenda {
        min-width: 150px !important;
        padding: 8px 12px !important;
        font-size: 0.72rem !important;
    }
    .leyenda-item { margin-bottom: 3px !important; }
    .leyenda-titulo { font-size: 0.9rem !important; margin-bottom: 5px !important; }
    /* Botones de ficha del mapa */
    .detalle-botones { flex-direction: column; gap: 8px; }
    .btn-ficha-completa, .btn-ficha-descargar {
        flex: 1 1 auto;
        padding: 12px !important;
    }
}

/* ═══════════════════ Centro de datos — tablas ═══════════════════ */
@media (max-width: 900px) {
    /* La tabla ya tiene wrapper con overflow-x. Reforzamos tipografía. */
    .tabla-datos { font-size: 0.78rem; }
    .tabla-datos thead th { padding: 8px 10px; font-size: 0.72rem; }
    .tabla-datos tbody td { padding: 7px 10px; }
    .centro-cabecera { flex-direction: column; gap: 10px; align-items: stretch !important; }
    .btn-descargar-tabla { align-self: flex-end; }
}

/* ═══════════════════ Filtros del sidebar ═══════════════════ */
/* En < 900px el sidebar se convierte en drawer (ya existente). Cuando está
   abierto, sus filtros deben ser cómodos de tocar. */
@media (max-width: 900px) {
    .filtros-muni {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px 12px;
        align-items: center;
    }
    .filtros-muni label, .filtros-muni span:first-child { margin: 0; }
    .filtros-muni select {
        width: 100%;
        min-height: 40px;
        font-size: 0.9rem;
    }
    .btn-aplicar, .btn-borrar { min-height: 44px; }
}

/* ═══════════════════ Sección pública (dashboard, mapa) ═══════════════════ */
@media (max-width: 900px) {
    /* KPIs y bloques del dashboard público reorganizados */
    .kpi { padding: 14px 16px; }
    .fila-graficos { grid-template-columns: 1fr !important; }
    .fila-graficos .tarj-full,
    .fila-graficos .tarj-mitad,
    .fila-graficos .tarj-tercio { grid-column: span 1 !important; }
    /* Franja superior: título más pequeño */
    .franja-superior h1 { font-size: 1.15rem !important; }
    .franja-subtitulo { font-size: 0.85rem !important; }
}
@media (max-width: 480px) {
    .franja-superior { padding: 12px 16px !important; }
    .franja-superior h1 { font-size: 1.05rem !important; }
    .contenido { padding: 12px !important; }
    .viz { gap: 12px !important; padding: 0 !important; }
}

/* ═══════════════════ Accesos rápidos en móvil ═══════════════════ */
@media (max-width: 640px) {
    .accesos-rapidos {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .acceso-item {
        flex: 1 1 auto !important;
        min-height: 52px;
    }
}

/* ═══════════════════ Pie de página en móvil ═══════════════════ */
@media (max-width: 640px) {
    .pie {
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
        padding: 12px !important;
        font-size: 0.72rem !important;
    }
    .pie-redes { justify-content: center !important; }
}

/* ═══════════════════ Reportes GRTCLL en móvil ═══════════════════ */
@media (max-width: 640px) {
    .reporte-item {
        grid-template-columns: 60px 1fr !important;
        gap: 10px !important;
        padding: 10px 12px !important;
    }
    .reporte-icono { width: 50px !important; height: 50px !important; }
    .reporte-icono img { width: 26px; height: 26px; }
    .reporte-descarga {
        grid-column: 1 / -1;
        width: 100% !important;
        height: 40px !important;
        border-radius: 8px;
    }
    .reporte-info-titulo { font-size: 0.88rem !important; }
    .reporte-info-desc { font-size: 0.75rem !important; }
}

/* ═══════════════════ Correlaciones en móvil ═══════════════════ */
@media (max-width: 480px) {
    .corr-item {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .corr-item-valor { text-align: right; }
}

/* ═══════════════════ Gauge SVG en móvil ═══════════════════ */
@media (max-width: 480px) {
    .indice-cont { min-height: 200px !important; }
    .indice-svg { max-width: 260px !important; }
}

/* ═══════════════════ Franja superior: usuario en móvil ═══════════════════ */
@media (max-width: 640px) {
    .usuario-btn {
        padding: 6px 10px !important;
    }
    .usuario-nombre {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ═══════════════════ Drawer móvil — menú lateral ═══════════════════ */
/* Fix del bug reportado: el menú se veía translúcido celeste porque el
   backdrop (z-index 500) quedaba ENCIMA del menú (z-index 150) tiñéndolo.
   Solución: el menú-lateral pasa a z-index 600 y el backdrop se queda en 500.
   Además reforzamos el fondo blanco sólido para que no se transparente. */
.menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 20, 45, 0.55);
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.menu-backdrop.activo {
    opacity: 1;
    pointer-events: auto;
}
@media (min-width: 901px) {
    .menu-backdrop { display: none !important; }
    .menu-hamburguesa-d { display: none !important; }
}

/* Ajustes al drawer cuando la pantalla es móvil */
@media (max-width: 900px) {
    /* Menu-lateral debe estar POR ENCIMA del backdrop */
    .menu-lateral {
        z-index: 600 !important;
        background: #FFFFFF !important;    /* fondo blanco sólido, sin transparencias */
        box-shadow: 8px 0 24px rgba(0, 20, 45, 0.35);
        width: min(78vw, 320px) !important;
        max-width: 320px;
    }
    /* Encabezado (parte azul del menú) mantiene su color institucional */
    .menu-encabezado {
        background: #003060 !important;
    }
    /* Items del menú visibles con buen contraste */
    .menu-item a {
        min-height: 48px;   /* touch target */
        font-size: 0.95rem;
    }
    /* Al abrir el menú, deshabilita el scroll del body para no ver el
       contenido moverse debajo */
    body.menu-abierto { overflow: hidden; }
}

/* ═══════════════════ Menú hamburguesa (mejora táctil) ═══════════════════ */
@media (max-width: 900px) {
    .menu-hamburguesa-d {
        position: fixed;
        top: 12px; left: 12px;
        z-index: 700;
        width: 44px; height: 44px;
        display: grid; place-items: center;
        background: #003060;
        border: none;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,48,96,0.25);
        cursor: pointer;
    }
    .menu-hamburguesa-d span,
    .menu-hamburguesa-d span::before,
    .menu-hamburguesa-d span::after {
        content: "";
        display: block;
        width: 20px; height: 2px;
        background: #F6F7FB;
        border-radius: 1px;
        position: relative;
    }
    .menu-hamburguesa-d span::before { position: absolute; top: -6px; left: 0; }
    .menu-hamburguesa-d span::after  { position: absolute; top:  6px; left: 0; }
    /* Reservar espacio para el botón en la franja superior */
    .franja-superior { padding-left: 68px !important; }
}


/* ═══════════════════ Landing pública — hero móvil (set/2026 pase 3) ═══════════════════
   El fix del header móvil (grid explícito, ocultación fuerte del .menu-lado
   y padding-top del hero) se movió a styles.css para que viva junto al
   resto del CSS móvil de la landing y no dependa de este archivo — que
   antes se cargaba sin cache busting y llegaba stale al navegador.
   Aquí queda solo la parte del hero que sí es responsive-específica. */
@media (max-width: 768px) {
    .seccion-hero {
        background-position: center top;
    }
}