:root {
    /* ===== COLORES PRINCIPALES ===== */
    --color-primario: #2563eb;
    --color-secundario: #1d4ed8;
    --color-fondo: #0f172a;
    --color-fondo-contenido: #1e293b;

    /* ===== RGB COMPONENTS ===== */
    --primario-r: 37;
    --primario-g: 99;
    --primario-b: 235;
    --secundario-r: 29;
    --secundario-g: 78;
    --secundario-b: 216;
    --fondo-r: 15;
    --fondo-g: 23;
    --fondo-b: 42;

    /* ===== COLORES DERIVADOS ===== */
    --color-primario-hover: #467aee;
    --color-primario-oscuro: #1e4fbc;
    --color-secundario-hover: #3f69de;
    --color-primario-rgba-03: rgba(37, 99, 235, 0.3);
    --color-primario-rgba-02: rgba(37, 99, 235, 0.2);
    --color-primario-rgba-01: rgba(37, 99, 235, 0.1);
    --color-primario-rgba-05: rgba(37, 99, 235, 0.5);
    --color-primario-rgba-04: rgba(37, 99, 235, 0.4);
    --color-primario-rgba-06: rgba(37, 99, 235, 0.6);
    --color-primario-rgba-09: rgba(37, 99, 235, 0.9);
    --color-secundario-rgba-02: rgba(29, 78, 216, 0.2);
    --color-secundario-rgba-03: rgba(29, 78, 216, 0.3);

    /* ===== CONTRASTE DE TEXTO ===== */
    --texto-sobre-primario: #ffffff;
    --texto-sobre-secundario: #ffffff;
    --texto-sobre-fondo: #ffffff;
    --texto-sobre-fondo-contenido: #ffffff;
    --color-texto-general: #2563eb;
    --color-texto-claro: #ffffff;
    --color-texto-suave: #cccccc;
    --color-texto-nav: rgba(255, 255, 255, 0.75);

    /* ===== FONDOS ===== */
    --color-fondo-input: #1e293b;
    --color-fondo-nav: #0D0D0D;
    --color-fondo-contenido-rgba: rgba(30, 41, 59, 0.8);
    --color-fondo-card-gradient-1: #0f172a;
    --color-fondo-card-gradient-2: #1e293b;
}

/* ===== SOPORTE DINÁMICO DE PANTALLA CLARA Y OSCURA ===== */

/* ===== OVERRIDES PARA MODO CLARO ===== */
:root.light-mode, body.light-mode {
    --color-fondo: #f4f6f9;
    --color-fondo-contenido: #ffffff;
    --color-texto-general: #333333;
    --color-texto-claro: #1a1a1a;
    --color-texto-suave: #666666;
    --color-texto-nav: rgba(0, 0, 0, 0.75);
    --color-fondo-input: #f8f9fa;
    --color-fondo-nav: #f0f0f0;
    --color-fondo-contenido-rgba: rgba(255, 255, 255, 0.75);
    --color-fondo-card-gradient-1: #f4f6f9;
    --color-fondo-card-gradient-2: #ffffff;
    --texto-sobre-fondo: #1a1a1a;
    --texto-sobre-fondo-contenido: #1a1a1a;
}

/* ===== OVERRIDES PARA MODO OSCURO ===== */
:root.dark-mode, body.dark-mode {
    --color-fondo: #0f172a;
    --color-fondo-contenido: #1e293b;
    --color-texto-general: var(--color-primario);
    --color-texto-claro: #ffffff;
    --color-texto-suave: #cccccc;
    --color-texto-nav: rgba(255, 255, 255, 0.75);
    --color-fondo-input: #1e293b;
    --color-fondo-nav: #0D0D0D;
    --color-fondo-contenido-rgba: rgba(30, 41, 59, 0.8);
    --color-fondo-card-gradient-1: #0f172a;
    --color-fondo-card-gradient-2: #1e293b;
    --texto-sobre-fondo: #ffffff;
    --texto-sobre-fondo-contenido: #ffffff;
}

/* ===== AUTOMATIC HIGH CONTRAST OVERRIDES FOR LIGHT MODE ===== */
body.light-mode table,
body.light-mode td,
body.light-mode input,
body.light-mode select,
body.light-mode textarea,
body.light-mode .modal-content,
.light-mode table,
.light-mode td,
.light-mode input,
.light-mode select,
.light-mode textarea,
.light-mode .modal-content {
    color: var(--color-texto-claro) !important;
}