/* ==========================================================================
   DASHBOARD VARIABLES - VARIABLES CSS CENTRALIZADAS  
   Variables reutilizables para todo el sistema de dashboard
   ========================================================================== */

:root {
    /* ==========================================================================
       1. COLORES PRINCIPALES
       ========================================================================== */
    
    /* Colores primarios del sistema */
    --primary-color: #0d6efd;
    --primary-light: rgba(13, 110, 253, 0.1);
    --primary-border: #86b7fe;
    --primary-shadow: rgba(13, 110, 253, 0.25);
    
    /* Colores secundarios */
    --secondary-color: #6c757d;
    --secondary-light: #adb5bd;
    --secondary-dark: #495057;
    
    /* Colores de fondo */
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-lighter: #f1f3f4;
    --bg-dark: #343a40;
    
    /* Colores de borde */
    --border-color: #dee2e6;
    --border-light: #e9ecef;
    --border-medium: #ced4da;
    
    /* Colores de estado */
    --success-color: #28a745;
    --success-light: rgba(40, 167, 69, 0.1);
    --warning-color: #ffc107;
    --warning-light: #fff3cd;
    --warning-border: #ffeaa7;
    --warning-text: #856404;
    --danger-color: #dc3545;
    --info-color: #17a2b8;
    
    /* ==========================================================================
       2. TIPOGRAFÍA
       ========================================================================== */
    
    /* Tamaños de fuente */
    --font-xs: 0.65rem;        /* 10.4px */
    --font-sm: 0.7rem;         /* 11.2px */
    --font-base: 0.8rem;       /* 12.8px */
    --font-md: 0.85rem;        /* 13.6px */
    --font-lg: 0.9rem;         /* 14.4px */
    --font-xl: 1rem;           /* 16px */
    --font-2xl: 1.2rem;        /* 19.2px */
    --font-3xl: 1.4rem;        /* 22.4px */
    --font-4xl: 1.5rem;        /* 24px */
    --font-5xl: 2rem;          /* 32px */
    
    /* Pesos de fuente */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Alturas de línea */
    --line-height-tight: 1.1;
    --line-height-snug: 1.2;
    --line-height-normal: 1.3;
    --line-height-relaxed: 1.4;
    --line-height-loose: 1.5;
    
    /* ==========================================================================
       3. ESPACIADO Y DIMENSIONES
       ========================================================================== */
    
    /* Espaciado base */
  /*   --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --spacing-3xl: 3rem;  */
    
    /* Dimensiones de componentes */
    --button-height-sm: 24px;
    --button-height: 28px;
    --button-height-lg: 32px;
    --button-width-sm: 24px;
    --button-width: 28px;
    --button-width-lg: 32px;
    
    /* Contenedores */
    --container-max-width: 1600px;
    --panel-width: 220px;
    --panel-min-height: 500px;
    --insight-panel-width: 25%;
    --insight-panel-min-width: 280px;
    
    /* ==========================================================================
       4. BORDES Y RADIO
       ========================================================================== */
    
    /* Radio de bordes */
    --border-radius-sm: 0.25rem;    /* 4px */
    --border-radius: 0.375rem;      /* 6px */
    --border-radius-md: 0.5rem;     /* 8px */
    --border-radius-lg: 0.75rem;    /* 12px */
    --border-radius-xl: 1rem;       /* 16px */
    --border-radius-full: 50%;
    
    /* Grosor de bordes */
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-width-thicker: 3px;
    --border-width-accent: 4px;
    
    /* ==========================================================================
       5. SOMBRAS Y EFECTOS
       ========================================================================== */
    
    /* Sombras */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    
    /* Sombras específicas de componentes */
    --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-chart: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    
    /* Efectos hover */
    --shadow-button-hover: 0 2px 8px rgba(0, 0, 0, 0.15);
    --transform-hover: translateY(-1px);
    
    /* ==========================================================================
       6. TRANSICIONES Y ANIMACIONES
       ========================================================================== */
    
    /* Duraciones */
    --duration-fast: 0.1s;
    --duration-normal: 0.2s;
    --duration-slow: 0.3s;
    
    /* Easing functions */
    --ease-in: ease-in;
    --ease-out: ease-out;
    --ease-in-out: ease-in-out;
    
    /* Transiciones comunes */
    --transition-base: all var(--duration-normal) var(--ease-in-out);
    --transition-colors: color var(--duration-normal) var(--ease-in-out), 
                        background-color var(--duration-normal) var(--ease-in-out), 
                        border-color var(--duration-normal) var(--ease-in-out);
    --transition-transform: transform var(--duration-normal) var(--ease-in-out);
    --transition-opacity: opacity var(--duration-normal) var(--ease-in-out);
    --transition-shadow: box-shadow var(--duration-normal) var(--ease-in-out);
    
    /* ==========================================================================
       7. Z-INDEX LEVELS
       ========================================================================== */
    
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* ==========================================================================
       8. BREAKPOINTS (para usar en JS)
       ========================================================================== */
    
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    
    /* ==========================================================================
       9. VARIABLES ESPECÍFICAS DE GRÁFICOS
       ========================================================================== */
    
    /* Colores de gráficos */
    --chart-color-primary: #0d6efd;
    --chart-color-success: #28a745;
    --chart-color-warning: #ffc107;
    --chart-color-danger: #dc3545;
    --chart-color-info: #17a2b8;
    --chart-color-secondary: #6c757d;
    
    /* Específicos para tipos de gráfico */
    --chart-emissions-color: #2ed573;
    --chart-temperature-color: #dc3545;
    --chart-precipitation-color: #0d6efd;
    --chart-snow-color: #17a2b8;
    
    /* Alturas de gráficos */
    --chart-height-sm: 300px;
    --chart-height: 400px;
    --chart-height-lg: 500px;
    
    /* ==========================================================================
       10. VARIABLES DE LOADING Y ESTADOS
       ========================================================================== */
    
    /* Loading */
    --loading-bg: rgba(255, 255, 255, 0.9);
    --loading-backdrop: rgba(0, 0, 0, 0.1);
    --spinner-size: 2rem;
    --spinner-size-sm: 0.875rem;
    
    /* Estados de componentes */
    --component-bg: var(--bg-white);
    --component-border: var(--border-color);
    --component-shadow: var(--shadow-sm);
    --component-radius: var(--border-radius);
}