/* Variables CSS - Paleta de colores y configuración */
:root {
    /* Colores Primarios - Paleta Oficial Rakam */
    --azul-principal: #0A2A4E;
    --turquesa-acento: #22A2B8;
    
    /* Colores Neutros - Modo Claro */
    --texto-principal: #1F2937;
    --texto-secundario: #6B7280;
    --texto-terciario: #9CA3AF;
    --bordes-divisores: #D1D5DB;
    --fondo-elementos: #F3F4F6;
    --fondo-principal: #FFFFFF;
    --fondo-card: #FFFFFF;

    /* Colores Semánticos */
    --exito: #10B981;
    --advertencia: #F59E0B;
    --error: #EF4444;
    --informacion: #3B82F6;
    
    /* Gradientes Corporativos */
    --gradiente-principal: linear-gradient(135deg, #0A2A4E 0%, #22A2B8 100%);
    --gradiente-acento: linear-gradient(135deg, #22A2B8 0%, #0EA5E9 100%);
    --gradiente-fondo: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 50%, #CBD5E1 100%);
    --gradiente-card: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    
    /* Espaciado */
    --espaciado-xs: 0.5rem;
    --espaciado-sm: 1rem;
    --espaciado-md: 1.5rem;
    --espaciado-lg: 2rem;
    --espaciado-xl: 3rem;
    
    /* Bordes */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    
    /* Sombras */
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    
    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}