/* ==========================================================================
   Responsive Design (Móviles y Tablets)
   ========================================================================== */

@media (max-width: 768px) {
    /* Permitir scroll en la página entera */
    body {
        overflow-y: auto;
        height: auto;
    }

    .app-layout {
        height: auto;
        min-height: 100vh;
    }

    /* Apilar mapa y estadísticas verticalmente */
    .app-main {
        flex-direction: column;
        overflow: visible;
    }

    /* Panel Izquierdo flotante (Menú Lateral) */
    .panel-left {
        position: fixed;
        top: 60px; /* Debajo de la cabecera */
        left: 0;
        height: calc(100vh - 60px);
        width: 85% !important; /* Fuerza ancho frente al 'width:0' del desktop */
        max-width: 320px;
        z-index: 100;
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 15px rgba(0,0,0,0.1);
    }

    /* Ocultar menú lateral desplazándolo fuera de la pantalla */
    .panel-left.collapsed {
        transform: translateX(-110%);
        padding: 20px !important; /* Evita que el contenido interno se aplaste */
        border-right: 1px solid var(--color-border) !important;
    }

    /* Mapa en la parte superior */
    .map-area {
        height: 55vh;
        min-height: 350px;
        flex: none;
        width: 100%;
    }

    /* Panel Derecho (Estadísticas) debajo del mapa */
    .panel-right {
        width: 100%;
        height: auto;
        border-left: none;
        border-top: 1px solid var(--color-border);
        padding: 20px;
    }

    /* Ajustes visuales para botones flotantes del mapa en móvil */
    .map-controls {
        bottom: 15px;
        left: 15px;
        flex-direction: row; /* Botones apilados horizontalmente */
    }

    .legend {
        top: 15px;
        left: 15px;
        padding: 8px 12px;
        flex-direction: column; /* Leyendas apiladas */
        gap: 8px;
    }
    
    .action-buttons {
        flex-direction: column; /* Botones de Compartir/Reiniciar en vertical */
    }
    
    .app-header {
        padding: 0 16px;
    }
}