/* ==========================================================================
   DASHBOARD RESPONSIVE - MEDIA QUERIES CONSOLIDADAS
   Todas las reglas responsive organizadas por breakpoint
   ========================================================================== */

/* ==========================================================================
   1. LARGE TABLETS (≤991.98px) - Bootstrap LG Breakpoint
   ========================================================================== */

@media (max-width: 991.98px) {
    /* --- LAYOUT CHANGES --- */
    /* Charts cambian a layout vertical */
    .chart-insights-container {
        flex-direction: column;
        min-height: auto;
    }

    .insights-panel {
        border-left: none !important;
        border-top: 1px solid var(--border-color);
        width: 100%;
        min-width: auto;
        order: 2;
    }

    .chart-area {
        order: 1;
        width: 100%;
    }

    /* --- COMPONENTS --- */
    .chart-container {
        border-radius: 0;
        margin: 0;
    }
    
    .chart-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .chart-footer .d-flex {
        align-self: flex-end;
    }

    /* --- METRICS --- */
    /* Métricas principales siguen en columna */
    .main-metrics-container {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    /* Grid secundario se mantiene 2x2 */
    .secondary-metrics-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   2. TABLETS (≤768px) - Bootstrap MD Breakpoint  
   ========================================================================== */

@media (max-width: 768px) {
    /* --- NAVIGATION --- */
    .container-fluid {
        padding-left: var(--spacing-lg) !important;
        padding-right: var(--spacing-lg) !important;
    }

    .col-12 {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .dashboard-header {
        margin-bottom: var(--spacing-2xl);
        margin-top: var(--spacing-lg);
        padding: 0 var(--spacing-sm);
    }

    .dashboard-header h2 {
        font-size: var(--font-4xl) !important;
    }

    .dashboard-header p {
        font-size: var(--font-lg);
    }

    .d-flex.justify-content-center.gap-3 {
        justify-content: flex-start !important;
        overflow-x: auto;
        padding: 0 var(--spacing-s);
        gap: var(--spacing-s) !important;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .d-flex.justify-content-center.gap-3::-webkit-scrollbar {
        display: none;
    }

    .indicador-tab {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-base);
        white-space: nowrap;
        flex-shrink: 0;
        min-width: max-content;
    }

    /* --- CHARTS --- */
    .chart-insights-container {
        flex-direction: column;
    }

    .chart-area {
        padding: var(--spacing-lg) !important;
    }

    .insights-panel {
        border-left: none !important;
        border-top: 1px solid var(--border-color);
        width: 100%;
    }

    .insights-content {
        padding: var(--spacing-lg) !important;
    }

    .insights-panel .p-3 {
        padding: var(--spacing-lg) !important;
    }

    .insights-panel .p-4 {
        padding: var(--spacing-lg) !important;
    }

    /* --- METRICS --- */
    .main-metrics-container {
        flex-direction: column;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }

    .main-metric-item {
        width: 100%;
        flex: none;
    }

    .main-metric-item .fw-bold {
        font-size: var(--font-2xl) !important;
    }

    .secondary-metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }

    .chart-area > div[id*="chart"] {
        min-height: var(--chart-height-sm);
    }

    /* --- CONTROLS --- */
    .filtro .d-flex.flex-wrap {
        gap: var(--spacing-lg) !important;
    }
    
    .filtro .d-flex.align-items-center {
        min-width: 180px;
    }
    
    .chart-tool-btn,
    .chart-type-btn,
    .dual-scale-btn,
    .timelapse-btn {
        height: var(--button-height-sm);
        width: var(--button-width-sm);
    }
    
    .variable-btn,
    .vista-btn {
        padding: 3px 6px;
        font-size: var(--font-sm);
    }
    
    .region-panel-formal {
        width: 95%;
        max-height: 85vh;
    }
    
    .region-grid {
        grid-template-columns: 1fr;
    }

    /* --- COMPONENTS --- */
    .chart-loading {
        padding: var(--spacing-lg);
    }
    
    .chart-nodata .bg-white {
        padding: var(--spacing-xl);
        max-width: 280px;
    }
    
    .alert-snp {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .alert-snp .text-warning {
        font-size: var(--font-base);
    }
    
    .chart-footer {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .chart-footer .text-muted {
        font-size: var(--font-sm);
    }
    
    .chart-footer small {
        font-size: var(--font-xs);
    }
}

/* ==========================================================================
   3. MOBILE (≤576px) - Bootstrap SM Breakpoint
   ========================================================================== */

@media (max-width: 576px) {
    /* --- NAVIGATION --- */
    .container-fluid {
        padding-left: var(--spacing-md) !important;
        padding-right: var(--spacing-md) !important;
    }

    .dashboard-header {
        padding: 0 var(--spacing-xs);
    }

    .dashboard-header h2 {
        font-size: var(--font-3xl) !important;
    }

    .dashboard-header p {
        font-size: var(--font-md);
    }

    .d-flex.justify-content-center.gap-3 {
        padding: 0 var(--spacing-xs);
        gap: var(--spacing-xs) !important;
    }

    .indicador-tab {
        padding: 6px 10px;
        font-size: var(--font-sm);
    }

    /* --- CHARTS --- */
    .chart-area > div[id*="chart"] {
        min-height: var(--chart-height-sm);
    }

    /* --- METRICS --- */
    .main-metrics-container {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .secondary-metrics-grid {
        gap: var(--spacing-xs);
    }

    .arclim-chart .display-6,
    .huella-comunal-chart .display-6 {
        font-size: var(--font-4xl);
    }

    /* --- CONTROLS --- */
    .filtro {
        padding: var(--spacing-md);
    }
    
    .filtro .form-label {
        font-size: var(--font-sm);
    }
    
    .download-actions {
        gap: var(--spacing-xs);
    }
    
    .btn-download {
        height: var(--button-height-sm);
        padding: 0 6px;
        font-size: var(--font-sm);
    }

    /* --- COMPONENTS --- */
    .chart-footer .d-flex {
        gap: var(--spacing-xs);
    }
    
    .chart-footer .btn {
        height: var(--button-height-sm);
        width: var(--button-width-sm);
        padding: 0;
    }
    
    .chart-footer .btn i {
        font-size: var(--font-sm);
    }
}

/* ==========================================================================
   4. SMALL MOBILE (≤480px) - Custom Breakpoint
   ========================================================================== */

@media (max-width: 480px) {
    /* --- EXTREME MOBILE ADJUSTMENTS --- */
    .container-fluid {
        padding-left: var(--spacing-sm) !important;
        padding-right: var(--spacing-sm) !important;
    }

    .dashboard-header h2 {
        font-size: var(--font-2xl) !important;
    }

    .chart-area > div[id*="chart"] {
        min-height: 250px;
    }

    .indicador-tab {
        padding: 4px 8px;
        font-size: var(--font-xs);
    }

    .main-metric-item .fw-bold {
        font-size: var(--font-xl) !important;
    }

    .secondary-metrics-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
}

/* ==========================================================================
   5. PRINT STYLES
   ========================================================================== */

@media print {
    .chart-insights-container {
        flex-direction: column;
    }

    .insights-panel {
        border-left: none;
        border-top: 1px solid var(--border-color);
        width: 100%;
    }

    .chart-footer,
    .filtro,
    .indicador-tab,
    .btn {
        display: none !important;
    }

    .chart-container {
        box-shadow: none;
        border: 1px solid var(--border-color);
    }
}

/* ==========================================================================
   6. HIGH CONTRAST / ACCESSIBILITY
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --border-color: #000000;
        --border-light: #333333;
        --bg-light: #f0f0f0;
        --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
    }

    .chart-tool-btn,
    .chart-type-btn,
    .dual-scale-btn,
    .timelapse-btn,
    .download-csv-btn {
        border-width: 2px;
    }
}

/* ==========================================================================
   7. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .tab-panel {
        animation: none;
    }

    .region-overlay-full-section,
    .region-panel-formal {
        transition: none;
    }
}