/**
 * Variables CSS - OMI Delega
 * Paleta de colores y configuración del proyecto
 */

:root {
    /* === ALTURA DEL NAVBAR === */
    --navbar-height: 50px;
    
    /* === COLORES PRINCIPALES === */
    

    --primary: #395888;              /* Azul corporativo oscuro */
    --primary-light: #3B82F6;        /* Azul corporativo claro */
    --primary-dark: #1E293B;         /* Azul muy oscuro */
    --secondary: #0F766E;            /* Verde azulado */ 
    --secondary-light: #14B8A6;      /* Teal claro */
    --accent: #F59E0B;               /* Ámbar (destacados) */
    
    /* === ESTADOS === */
    --success: #10B981;              /* Verde */
    --success-bg: #D1FAE5;
    --success-border: #6EE7B7;
    
    --warning: #F59E0B;              /* Ámbar */
    --warning-bg: #FEF3C7;
    --warning-border: #FCD34D;
    
    --danger: #EF4444;               /* Rojo */
    --danger-bg: #FEE2E2;
    --danger-border: #FCA5A5;
    
    --info: #395888;                 /* Azul */
    --info-bg: #DBEAFE;
    --info-border: #93C5FD;
    
    --completed: #6B7280;            /* Gris */
    --completed-bg: #F3F4F6;
    --completed-border: #D1D5DB;
    
    /* === FONDOS === */
    --bg-primary: #F8FAFC;
    --bg-secondary: #F1F5F9;
    --bg-card: #FFFFFF;
    --bg-hover: #EFF6FF;
    --bg-overlay: rgba(15, 23, 42, 0.75);
    
    /* === TEXTOS === */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --text-white: #FFFFFF;
    
    /* === BORDES === */
    --border-color: #E2E8F0;
    --border-color-dark: #CBD5E1;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    
    /* === SOMBRAS === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* === ESPACIADO === */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* === TIPOGRAFÍA === */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Courier New", Courier, monospace;
    
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* === TRANSICIONES === */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms 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;
}

/* === MODO OSCURO (Futuro) === */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #0F172A;
        --bg-secondary: #1E293B;
        --bg-card: #395888;
        --text-primary: #F8FAFC;
        --text-secondary: #CBD5E1;
        --border-color: #475569;
    }
}