/* ============================================================================
   CORRECCIONES RESPONSIVE
   Archivo: styles-responsive-fixes.css
   - Widget del header responsive en móviles
   - Botones verticales del mapa ajustados para móviles
   ============================================================================ */

/* ===== CORRECCIÓN 1: WIDGET DEL HEADER EN MÓVILES ===== */

/* Mostrar versión compacta del widget en móviles */
@media (max-width: 768px) {
    .current-weather-widget {
        display: flex !important; /* Override del display: none */
        padding: 8px 12px;
        min-width: auto;
        width: auto;
        max-width: 180px;
    }
    
    /* Ocultar el contenido completo en móviles */
    .current-weather-widget .current-weather-content {
        display: none !important;
    }
    
    /* Ocultar loading y error en móviles */
    .current-weather-widget .current-weather-loading,
    .current-weather-widget .current-weather-error {
        display: none !important;
    }
    
    /* Mostrar versión compacta - solo icono e info básica */
    .current-weather-widget .current-weather-compact {
        display: flex !important;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .current-weather-widget:hover {
        background: rgba(255, 255, 255, 0.35);
        transform: scale(1.02);
    }
    
    .current-weather-compact-icon .material-symbols-outlined {
        font-size: 32px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40;
    }
    
    .current-weather-compact-data {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .current-weather-compact-temp {
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .current-weather-compact-info {
        font-size: 0.65rem;
        opacity: 0.9;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .current-weather-compact-info .material-symbols-outlined {
        font-size: 10px;
    }
}

/* Versión aún más compacta para móviles pequeños */
@media (max-width: 480px) {
    .current-weather-widget {
        padding: 6px 10px;
        max-width: 140px;
    }
    
    .current-weather-compact-icon .material-symbols-outlined {
        font-size: 28px;
    }
    
    .current-weather-compact-temp {
        font-size: 1.1rem;
    }
    
    .current-weather-compact-info {
        font-size: 0.6rem;
    }
}

/* ===== CORRECCIÓN 2: ALTURA DEL MAPA Y BOTONES VERTICALES EN MÓVILES ===== */

/* Aumentar altura del mapa en móviles para dar espacio a los botones */
@media (max-width: 768px) {
    .map-section {
        height: 600px !important; /* Aumentado de 500px a 600px */
    }
    
    /* Ajustar panel de botones verticales */
    .enhancement-panel-vertical {
        max-height: calc(100vh - 180px) !important; /* Más espacio para el contenido */
        top: 8px;
        left: 8px;
    }
    
    .enhancement-panel-content {
        max-height: calc(100vh - 180px) !important;
        min-height: 300px !important; /* Reducido de 400px */
    }
    
    /* Botones más compactos verticalmente */
    .enhancement-vertical-button {
        padding: 10px 12px !important;
        margin-bottom: 4px !important;
    }
    
    .enhancement-vertical-button .btn-icon {
        font-size: 22px !important;
    }
    
    .enhancement-vertical-button .btn-label {
        font-size: 12px !important;
    }
    
    /* Header del panel más compacto */
    .enhancement-panel-header {
        padding: 12px !important;
    }
    
    .panel-header-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .panel-header-icon .material-symbols-outlined {
        font-size: 20px !important;
    }
    
    .panel-title {
        font-size: 13px !important;
    }
    
    .panel-subtitle {
        font-size: 10px !important;
    }
    
    /* Footer más compacto */
    .enhancement-panel-footer {
        padding: 10px 12px !important;
    }
    
    .footer-text {
        font-size: 10px !important;
    }
}

/* Ajustes adicionales para móviles pequeños */
@media (max-width: 480px) {
    .map-section {
        height: 520px !important; /* Altura optimizada para móviles pequeños */
    }
    
    .enhancement-panel-vertical {
        max-height: calc(100vh - 160px) !important;
        top: 5px;
        left: 5px;
    }
    
    .enhancement-panel-content {
        max-height: calc(100vh - 160px) !important;
        min-height: 280px !important;
    }
    
    /* Botones aún más compactos */
    .enhancement-vertical-button {
        padding: 8px 10px !important;
        margin-bottom: 3px !important;
        gap: 10px !important;
    }
    
    .enhancement-vertical-button .btn-icon {
        font-size: 20px !important;
    }
    
    .enhancement-vertical-button .btn-label {
        font-size: 11px !important;
    }
    
    /* Botón de toggle más pequeño */
    .enhancement-panel-toggle {
        width: 28px !important;
        height: 28px !important;
    }
    
    .enhancement-panel-toggle .toggle-icon {
        font-size: 18px !important;
    }
    
    /* Panel colapsado más pequeño */
    .enhancement-panel-vertical.collapsed {
        width: 48px !important;
    }
    
    .enhancement-panel-vertical.collapsed .btn-icon {
        font-size: 22px !important;
    }
    
    /* Header más compacto */
    .enhancement-panel-header {
        padding: 10px !important;
    }
    
    .panel-header-icon {
        width: 32px !important;
        height: 32px !important;
    }
    
    .panel-header-icon .material-symbols-outlined {
        font-size: 18px !important;
    }
}

/* Landscape en móviles - optimizar espacio vertical */
@media (max-width: 768px) and (orientation: landscape) {
    .map-section {
        height: 450px !important;
    }
    
    .enhancement-panel-vertical {
        max-height: calc(100vh - 100px) !important;
    }
    
    .enhancement-panel-content {
        max-height: calc(100vh - 100px) !important;
        min-height: 250px !important;
    }
    
    .enhancement-vertical-button {
        padding: 7px 10px !important;
        margin-bottom: 3px !important;
    }
    
    .enhancement-panel-header {
        padding: 10px !important;
    }
    
    .enhancement-panel-footer {
        padding: 8px 10px !important;
    }
}

/* ===== ESTILOS PARA EL WIDGET COMPACTO (a añadir al HTML vía JS) ===== */

/* Estos estilos se aplicarán cuando se agregue dinámicamente el elemento compacto */
.current-weather-compact {
    display: none; /* Oculto por defecto, se mostrará en móviles */
}

/* Tooltip para el widget compacto */
.current-weather-widget[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    margin-bottom: 5px;
    z-index: 1000;
}

@media (max-width: 768px) {
    .current-weather-widget[title]:hover::after {
        content: 'Toca para más info';
    }
}

/* ===== MEJORAS ADICIONALES DE UX ===== */

/* Asegurar que los controles del mapa no interfieran con el panel */
@media (max-width: 768px) {
    .leaflet-top.leaflet-left {
        top: 10px !important;
        left: 75px !important; /* Desplazar hacia la derecha para no colisionar con el panel */
    }
    
    .leaflet-control-zoom {
        margin-top: 0 !important;
    }
}

@media (max-width: 480px) {
    .leaflet-top.leaflet-left {
        left: 60px !important;
    }
}

/* Evitar problemas con el scroll en iOS */
@media (max-width: 768px) {
    .enhancement-buttons-vertical {
        -webkit-overflow-scrolling: touch;
    }
    
    .map-section {
        -webkit-overflow-scrolling: touch;
    }
}

/* Fix para pantallas muy pequeñas (iPhone SE, etc.) */
@media (max-width: 375px) {
    .map-section {
        height: 480px !important;
    }
    
    .enhancement-panel-vertical {
        max-height: calc(100vh - 150px) !important;
    }
    
    .enhancement-panel-content {
        max-height: calc(100vh - 150px) !important;
        min-height: 260px !important;
    }
    
    .enhancement-panel-vertical.expanded {
        width: 220px !important;
    }
    
    .enhancement-vertical-button {
        padding: 7px 8px !important;
    }
    
    .enhancement-vertical-button .btn-label {
        font-size: 10.5px !important;
    }
}

/* ===== MEJORA PARA TABLETS ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Asegurar que todo funcione bien en tablets */
    .enhancement-panel-vertical.expanded {
        width: 300px;
    }
    
    .map-section {
        height: 650px;
    }
}

/* ===== ACCESIBILIDAD ===== */

/* Mejorar el área táctil en móviles */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    .enhancement-vertical-button {
        min-height: 44px; /* Tamaño mínimo táctil recomendado */
    }
    
    .current-weather-widget {
        min-height: 44px;
    }
    
    .enhancement-panel-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ===== DARK MODE - WIDGET COMPACTO ===== */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .current-weather-compact-temp {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
}