/**
 * Dashboard VoiceBot ILUMNO v4.0
 * Responsive CSS
 */

/* ========================================
   DESKTOP GRANDE (1400px+)
   ======================================== */
@media (min-width: 1400px) {
    .metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .charts-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================
   DESKTOP (1200-1399px)
   ======================================== */
@media (max-width: 1399px) and (min-width: 1200px) {
    .metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   LAPTOP (1024-1199px)
   ======================================== */
@media (max-width: 1199px) and (min-width: 1024px) {
    .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   TABLET (768-1023px)
   ======================================== */
@media (max-width: 1023px) and (min-width: 768px) {
    .main-content {
        margin-left: 0;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width-expanded);
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    
    .mobile-menu-btn {
        display: flex;
    }
}

/* ========================================
   MÓVIL GRANDE (576-767px)
   ======================================== */
@media (max-width: 767px) and (min-width: 576px) {
    .main-content {
        margin-left: 0;
    }
    
    .main-wrapper {
        padding: var(--space-md);
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    .header-content {
        flex-wrap: wrap;
    }
    
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width-expanded);
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    
    .mobile-menu-btn {
        display: flex;
    }
}

/* ========================================
   MÓVIL (< 576px)
   ======================================== */
@media (max-width: 575px) {
    .main-content {
        margin-left: 0;
    }
    
    .main-wrapper {
        padding: var(--space-sm);
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .header {
        padding: var(--space-sm);
    }
    
    /* Header controls manejados por header.css con desktop-only y btn-filters-mobile */
    
    .btn-refresh {
        width: 36px;
        height: 36px;
    }
    
    .connection-badge {
        padding: var(--space-xs);
        font-size: 10px;
    }
    
    .connection-badge #connectionText {
        display: none;
    }
    
    .sidebar {
        transform: translateX(-100%) !important;
        width: var(--sidebar-width-expanded);
    }
    
    .sidebar.mobile-open {
        transform: translateX(0) !important;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    /* Métricas compactas en móvil */
    .metric-card {
        padding: var(--space-sm);
    }
    
    .metric-header {
        margin-bottom: 2px;
    }
    
    .metric-label {
        font-size: 8px;
    }
    
    .metric-icon {
        width: 24px;
        height: 24px;
    }
    
    .metric-icon svg {
        width: 12px;
        height: 12px;
    }
    
    .metric-value {
        font-size: var(--font-size-md);
    }
    
    .metric-subtitle {
        font-size: 9px;
    }
    
    .metric-change {
        font-size: 8px;
    }
    
    .metric-progress {
        margin-top: 4px;
    }
    
    .progress-bar {
        height: 2px;
    }
    
    /* Gráficos en móvil */
    .chart-card-header {
        padding: var(--space-xs) var(--space-sm);
    }
    
    .chart-card-title {
        font-size: 12px;
    }
    
    .chart-wrapper {
        height: 200px;
        padding: var(--space-sm);
    }
    
    /* Summary en móvil */
    .efficiency-banner {
        padding: var(--space-sm);
    }
    
    .efficiency-banner h3 {
        font-size: var(--font-size-sm);
    }
    
    .efficiency-details {
        flex-direction: column;
        gap: var(--space-xs);
    }
    
    .efficiency-details div {
        font-size: 11px;
    }
    
    .summary-text {
        font-size: var(--font-size-sm);
    }
    
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
        padding: var(--space-sm);
    }
    
    .summary-grid div {
        font-size: 11px;
    }
    
    /* Modales en móvil - FULLSCREEN */
    .modal {
        padding: 0;
    }
    
    .modal-content {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    
    .modal-content.modal-sm,
    .modal-content.modal-lg,
    .modal-content.modal-xl {
        max-width: 100%;
    }
    
    .modal-header {
        padding: var(--space-md);
    }
    
    .modal-header-icon {
        width: 36px;
        height: 36px;
    }
    
    .modal-header-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .modal-header-text h3 {
        font-size: var(--font-size-md);
    }
    
    .modal-header-text p {
        font-size: 11px;
    }
    
    .modal-body {
        padding: var(--space-sm);
    }
    
    .modal-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
    }
    
    .modal-stat-card {
        padding: var(--space-sm);
    }
    
    .modal-stat-icon {
        width: 32px;
        height: 32px;
        margin-bottom: var(--space-xs);
    }
    
    .modal-stat-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .modal-stat-value {
        font-size: var(--font-size-lg);
    }
    
    .modal-stat-label {
        font-size: 9px;
    }
    
    .modal-chart-section {
        margin-bottom: var(--space-md);
    }
    
    .modal-chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    .modal-chart-header h4 {
        font-size: var(--font-size-sm);
    }
    
    .modal-chart-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .modal-chart-actions button {
        flex: 1;
        font-size: 10px;
        padding: var(--space-xs);
    }
    
    .modal-chart-wrapper {
        height: 220px;
        padding: var(--space-sm);
    }
    
    .modal-insights {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .modal-insight-card {
        padding: var(--space-sm);
    }
    
    .modal-insight-card h5 {
        font-size: var(--font-size-sm);
    }
    
    .modal-insight-card p {
        font-size: 12px;
    }
    
    .modal-table-section h4 {
        font-size: var(--font-size-sm);
    }
    
    .modal-table-container {
        max-height: 200px;
    }
    
    .modal-table th,
    .modal-table td {
        padding: var(--space-xs) var(--space-sm);
        font-size: 11px;
    }
    
    .modal-footer {
        padding: var(--space-sm);
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .modal-footer-info {
        font-size: 11px;
        text-align: center;
    }
    
    .modal-footer-actions {
        width: 100%;
    }
    
    .modal-footer-actions .btn {
        width: 100%;
    }
    
    /* Footer en móvil */
    .footer {
        padding: var(--space-sm);
    }
    
    .footer-content {
        flex-direction: column;
        gap: var(--space-xs);
        text-align: center;
    }
    
    .footer-logo {
        height: 20px;
    }
    
    .footer-text {
        font-size: 11px;
    }
    
    /* Alerts en móvil */
    .alerts-container {
        top: 60px;
        right: var(--space-xs);
        left: var(--space-xs);
        max-width: none;
    }
    
    .alert {
        padding: var(--space-sm);
        font-size: 12px;
    }
    
    /* Active filters */
    .active-filters {
        font-size: 11px;
        padding: var(--space-xs) var(--space-sm);
    }
}

/* ========================================
   LANDSCAPE MODE
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .header {
        padding: var(--space-xs) var(--space-md);
    }
    
    .main-wrapper {
        padding: var(--space-sm);
    }
    
    .metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .chart-wrapper {
        height: 150px;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .sidebar,
    .mobile-menu-btn,
    .header-controls,
    .btn-refresh,
    .chart-card-btn {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .metric-card {
        break-inside: avoid;
    }
    
    .chart-card {
        break-inside: avoid;
    }
}

/* ========================================
   PREFERS REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   PREFERS COLOR SCHEME - DARK
   ======================================== */
@media (prefers-color-scheme: dark) {
    body:not(.light-mode) {
        --surface-bg: #0f172a;
        --surface-card: #1e293b;
        --surface-hover: #334155;
        --surface-active: #475569;
        
        --text-primary: #f1f5f9;
        --text-secondary: #94a3b8;
        --text-muted: #64748b;
        
        --border-color: #334155;
        --border-color-light: #1e293b;
    }
}