/**
 * CSS Variables para Temas
 * Define las variables de color que serán actualizadas dinámicamente
 */

:root {
    /* Colores Principales - Safari Natural (por defecto) */
    --color-primary: #2e7d32;
    --color-secondary: #ff6f00;
    --color-tertiary: #5d4037;
    
    /* Gradientes */
    --gradient-full: linear-gradient(135deg, #2e7d32 0%, #ff6f00 50%, #5d4037 100%);
    --gradient-primary: linear-gradient(135deg, #2e7d32 0%, #5d4037 100%);
    --gradient-secondary: linear-gradient(135deg, #ff6f00 0%, #5d4037 100%);
    --gradient-bg: linear-gradient(135deg, #e8f5e9 0%, #fff3e0 100%);
    
    /* Colores Claros */
    --color-primary-light: #e8f5e9;
    --color-secondary-light: #fff3e0;
    
    /* Sidebar - Colores Oscuros (se actualizan dinámicamente según tema) */
    --sidebar-bg: #0e250f;
    --sidebar-bg-secondary: #1c1410;
    --sidebar-gradient: linear-gradient(135deg, #0e250f 0%, #1c1410 100%);
    
    /* Sombras con color primario */
    --shadow-primary: 0 4px 12px rgba(46, 125, 50, 0.15);
    --shadow-primary-hover: 0 12px 32px rgba(46, 125, 50, 0.25);
}

/* Aplicar variables a elementos existentes */
body {
    background: var(--gradient-bg) !important;
}

/* Página de login */
.auth-page {
    background: var(--gradient-full) !important;
}

.dashboard-header {
    background: var(--gradient-full) !important;
}

.page-title,
.section-subtitle,
.header-logo,
.auth-logo {
    color: var(--color-primary) !important;
}

.stat-icon,
.main-card-icon {
    background: var(--gradient-full) !important;
}

.stat-card,
.main-card {
    box-shadow: var(--shadow-primary) !important;
    border-color: rgba(var(--color-primary-rgb), 0.1) !important;
}

.stat-card:hover,
.main-card:hover:not(.disabled) {
    box-shadow: var(--shadow-primary-hover) !important;
}

.nav-link.active {
    border-left-color: var(--color-secondary) !important;
}

.logout-btn {
    background: var(--gradient-secondary) !important;
}

.btn-save-theme {
    background: var(--gradient-primary) !important;
}

/* Input focus */
input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15) !important;
}

/* Botones principales */
.btn-primary {
    background: var(--gradient-primary) !important;
}

.btn-primary:hover {
    opacity: 0.9;
}