/**
 * Esquemas de color del portal.
 * Se aplican con clase en body: theme-azul | theme-verde | theme-rojo | theme-naranja
 *
 * UI/UX: Todas las interfaces deben usar estas variables (no colores fijos).
 * Textos: usar --theme-text-on-primary sobre fondos del tema para contraste.
 * Iconos: usar --theme-icon (flat monocolor); no gradientes ni múltiples colores en iconos.
 */

/* ========== AZUL (por defecto) ========== */
:root,
body.theme-azul {
    --theme-primary: #0066cc;
    --theme-primary-dark: #0052a3;
    --theme-primary-darker: #004499;
    --theme-primary-darkest: #003366;
    --theme-sidebar-bg: #0066cc;
    --theme-sidebar-header: #004499;
    --theme-sidebar-border: #003366;
    --theme-sidebar-hover: #0052a3;
    --theme-sidebar-active: #003366;
    --theme-gradient: linear-gradient(135deg, #0066cc 0%, #004499 100%);
    --theme-gradient-hover: linear-gradient(135deg, #0052a3 0%, #003366 100%);
    --theme-focus-rgba: 0, 102, 204;
    --primary-color: #0066cc;
    --gradient-primary: linear-gradient(135deg, #0066cc 0%, #004499 100%);
    /* Texto legible sobre fondos del tema */
    --theme-text-on-primary: #ffffff;
    --theme-text-on-light: #1a1a1a;
    /* Iconos: flat monocolor (un solo color por contexto) */
    --theme-icon: currentColor;
    --theme-icon-on-primary: #ffffff;
}

/* Iconos flat monocolor: un solo color por contexto (sin gradientes ni multicolor) */
.sidebar-menu .menu-link i,
.sidebar-header i,
.sidebar-menu .user-section i {
    color: var(--theme-icon-on-primary) !important;
}
.card-header i,
.btn-primary i,
.btn-secondary i,
.badge.bg-primary i,
.badge.bg-secondary i {
    color: var(--theme-icon-on-primary, #fff) !important;
}
/* Resto de iconos heredan del texto (monocolor) */
.nav-link i,
.btn:not(.btn-primary):not(.btn-secondary) i {
    color: inherit;
}

/* ========== VERDE ========== */
body.theme-verde {
    --theme-primary: #0d7d3d;
    --theme-primary-dark: #0a6532;
    --theme-primary-darker: #084d27;
    --theme-primary-darkest: #063d1e;
    --theme-sidebar-bg: #0d7d3d;
    --theme-sidebar-header: #084d27;
    --theme-sidebar-border: #063d1e;
    --theme-sidebar-hover: #0a6532;
    --theme-sidebar-active: #063d1e;
    --theme-gradient: linear-gradient(135deg, #0d7d3d 0%, #084d27 100%);
    --theme-gradient-hover: linear-gradient(135deg, #0a6532 0%, #063d1e 100%);
    --theme-focus-rgba: 13, 125, 61;
    --primary-color: #0d7d3d;
    --gradient-primary: linear-gradient(135deg, #0d7d3d 0%, #084d27 100%);
    --theme-text-on-primary: #ffffff;
    --theme-text-on-light: #1a1a1a;
    --theme-icon: currentColor;
    --theme-icon-on-primary: #ffffff;
}

/* ========== ROJO ========== */
body.theme-rojo {
    --theme-primary: #c0392b;
    --theme-primary-dark: #a93226;
    --theme-primary-darker: #922b21;
    --theme-primary-darkest: #641e16;
    --theme-sidebar-bg: #c0392b;
    --theme-sidebar-header: #922b21;
    --theme-sidebar-border: #641e16;
    --theme-sidebar-hover: #a93226;
    --theme-sidebar-active: #641e16;
    --theme-gradient: linear-gradient(135deg, #c0392b 0%, #922b21 100%);
    --theme-gradient-hover: linear-gradient(135deg, #a93226 0%, #641e16 100%);
    --theme-focus-rgba: 192, 57, 43;
    --primary-color: #c0392b;
    --gradient-primary: linear-gradient(135deg, #c0392b 0%, #922b21 100%);
    --theme-text-on-primary: #ffffff;
    --theme-text-on-light: #1a1a1a;
    --theme-icon: currentColor;
    --theme-icon-on-primary: #ffffff;
}

/* ========== NARANJA (negro, blanco, naranja, amarillo, gris) ========== */
body.theme-naranja {
    --theme-primary: #e67e22;
    --theme-primary-dark: #d35400;
    --theme-primary-darker: #bf4c00;
    --theme-primary-darkest: #1a1a1a;
    --theme-sidebar-bg: #1a1a1a;
    --theme-sidebar-header: #2c2c2c;
    --theme-sidebar-border: #000000;
    --theme-sidebar-hover: #e67e22;
    --theme-sidebar-active: #000000;
    --theme-gradient: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    --theme-gradient-hover: linear-gradient(135deg, #f1c40f 0%, #e67e22 100%);
    --theme-focus-rgba: 230, 126, 34;
    --primary-color: #e67e22;
    --gradient-primary: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    --theme-text-on-primary: #ffffff;
    --theme-text-on-light: #1a1a1a;
    --theme-icon: currentColor;
    --theme-icon-on-primary: #ffffff;
}