/**
 * SISTEMA DE CONTROL V3 - VARIABLES CSS
 * Archivo centralizado de variables para fácil personalización
 * Para cambiar el esquema de colores, simplemente modifique estas variables
 */

:root {
    /* ==========================================
       COLORES PRINCIPALES
       ========================================== */
    --primary-color: #2c3e50;          /* Azul oscuro corporativo */
    --primary-dark: #1a252f;           /* Azul más oscuro */
    --primary-light: #34495e;          /* Azul claro */

    --secondary-color: #3498db;        /* Azul brillante */
    --secondary-dark: #2980b9;         /* Azul brillante oscuro */
    --secondary-light: #5dade2;        /* Azul brillante claro */

    --accent-color: #e74c3c;           /* Rojo acento */
    --accent-dark: #c0392b;            /* Rojo oscuro */
    --accent-light: #ec7063;           /* Rojo claro */

    /* ==========================================
       COLORES DE ESTADO
       ========================================== */
    --success-color: #27ae60;          /* Verde éxito */
    --success-dark: #229954;
    --success-light: #52be80;

    --warning-color: #f39c12;          /* Naranja advertencia */
    --warning-dark: #d68910;
    --warning-light: #f5b041;

    --danger-color: #e74c3c;           /* Rojo peligro */
    --danger-dark: #c0392b;
    --danger-light: #ec7063;

    --info-color: #3498db;             /* Azul información */
    --info-dark: #2980b9;
    --info-light: #5dade2;

    /* ==========================================
       COLORES DE FONDO
       ========================================== */
    --bg-primary: #ffffff;             /* Fondo principal */
    --bg-secondary: #f8f9fa;           /* Fondo secundario */
    --bg-tertiary: #ecf0f1;            /* Fondo terciario */
    --bg-dark: #2c3e50;                /* Fondo oscuro */
    --bg-light: #ffffff;               /* Fondo claro */

    /* ==========================================
       COLORES DE TEXTO
       ========================================== */
    --text-primary: #2c3e50;           /* Texto principal */
    --text-secondary: #7f8c8d;         /* Texto secundario */
    --text-muted: #95a5a6;             /* Texto apagado */
    --text-white: #ffffff;             /* Texto blanco */
    --text-dark: #000000;              /* Texto oscuro */

    /* ==========================================
       COLORES DE BORDE
       ========================================== */
    --border-color: #dee2e6;           /* Borde normal */
    --border-light: #e9ecef;           /* Borde claro */
    --border-dark: #adb5bd;            /* Borde oscuro */

    /* ==========================================
       SOMBRAS
       ========================================== */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --shadow-xl: 0 2rem 4rem rgba(0, 0, 0, 0.2);

    /* ==========================================
       TIPOGRAFÍA
       ========================================== */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    --font-size-base: 1rem;            /* 16px */
    --font-size-sm: 0.875rem;          /* 14px */
    --font-size-lg: 1.125rem;          /* 18px */
    --font-size-xl: 1.25rem;           /* 20px */

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-base: 1.5;
    --line-height-sm: 1.25;
    --line-height-lg: 2;

    /* ==========================================
       ESPACIADO
       ========================================== */
    --spacing-xs: 0.25rem;             /* 4px */
    --spacing-sm: 0.5rem;              /* 8px */
    --spacing-md: 1rem;                /* 16px */
    --spacing-lg: 1.5rem;              /* 24px */
    --spacing-xl: 2rem;                /* 32px */
    --spacing-xxl: 3rem;               /* 48px */

    /* ==========================================
       BORDER RADIUS
       ========================================== */
    --radius-sm: 0.25rem;              /* 4px */
    --radius-md: 0.375rem;             /* 6px */
    --radius-lg: 0.5rem;               /* 8px */
    --radius-xl: 1rem;                 /* 16px */
    --radius-full: 9999px;             /* Círculo completo */

    /* ==========================================
       TRANSICIONES
       ========================================== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* ==========================================
       Z-INDEX
       ========================================== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ==========================================
       LAYOUT
       ========================================== */
    --sidebar-width: 260px;
    --header-height: 60px;
    --footer-height: 50px;

    /* ==========================================
       BREAKPOINTS (para referencia)
       ========================================== */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

/* ==========================================
   TEMA OSCURO (opcional para futuro)
   ========================================== */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --border-color: #404040;
}