:root {
    /* ===== COLORES FLOWERS GYM (BASE) ===== */
    --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-005: rgba(37, 99, 235, 0.05);
    --color-primario-rgba-01: rgba(37, 99, 235, 0.1);
    --color-primario-rgba-015: rgba(37, 99, 235, 0.15);
    --color-primario-rgba-02: rgba(37, 99, 235, 0.2);
    --color-primario-rgba-03: rgba(37, 99, 235, 0.3);
    --color-primario-rgba-04: rgba(37, 99, 235, 0.4);
    --color-primario-rgba-05: rgba(37, 99, 235, 0.5);
    --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: #f1f5f9;
    --color-texto-claro: #ffffff;
    --color-texto-suave: #94a3b8;
    --color-texto-nav: rgba(255, 255, 255, 0.85);

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

/* ============================================================
   1. MODO CLARO (LIGHT MODE) - Limpio, fresco y moderno
   ============================================================ */
:root.light-mode, body.light-mode {
    --color-fondo: #f5f7fc;
    --color-fondo-contenido: #ffffff;
    --color-texto-general: #334155;
    --color-texto-claro: #0f172a;
    --color-texto-suave: #64748b;
    --color-texto-nav: rgba(15, 23, 42, 0.85);
    --color-fondo-input: #ffffff;
    --color-fondo-nav: #ffffff;
    --color-fondo-contenido-rgba: rgba(255, 255, 255, 0.9);
    --color-fondo-card-gradient-1: #ffffff;
    --color-fondo-card-gradient-2: #ffffff;
    --texto-sobre-fondo: #0f172a;
    --texto-sobre-fondo-contenido: #0f172a;
    --card-border: rgba(0, 0, 0, 0.08);
}

/* ============================================================
   2. MODO OSCURO (DARK MODE) - Carbón grafito premium
   ============================================================ */
:root.dark-mode, body.dark-mode {
    --color-fondo: #121217;
    --color-fondo-contenido: #1c1c24;
    --color-texto-general: #e2e8f0;
    --color-texto-claro: #ffffff;
    --color-texto-suave: #94a3b8;
    --color-texto-nav: rgba(255, 255, 255, 0.85);
    --color-fondo-input: #15151d;
    --color-fondo-nav: #0d0d12;
    --color-fondo-contenido-rgba: rgba(28, 28, 36, 0.85);
    --color-fondo-card-gradient-1: #15151c;
    --color-fondo-card-gradient-2: #1c1c25;
    --texto-sobre-fondo: #ffffff;
    --texto-sobre-fondo-contenido: #ffffff;
    --card-border: var(--color-primario-rgba-02);
}

/* ============================================================
   3. MODO NEGRO PURO (BLACK / OLED MODE) - Alto contraste
   ============================================================ */
:root.black-mode, body.black-mode {
    --color-fondo: #000000;
    --color-fondo-contenido: #08080b;
    --color-texto-general: #ffffff;
    --color-texto-claro: #ffffff;
    --color-texto-suave: #a1a1aa;
    --color-texto-nav: rgba(255, 255, 255, 0.95);
    --color-fondo-input: #040406;
    --color-fondo-nav: #000000;
    --color-fondo-contenido-rgba: rgba(8, 8, 11, 0.95);
    --color-fondo-card-gradient-1: #000000;
    --color-fondo-card-gradient-2: #08080b;
    --texto-sobre-fondo: #ffffff;
    --texto-sobre-fondo-contenido: #ffffff;
    --card-border: rgba(255, 45, 133, 0.3);
}

/* Overrides para visibilidad en Modo Claro */
.light-mode table,
.light-mode td,
.light-mode th,
.light-mode input,
.light-mode select,
.light-mode textarea {
    color: var(--color-texto-claro) !important;
}

.light-mode .card {
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .table-responsive {
    background: #ffffff !important;
    box-shadow: none !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode table,
.light-mode table tbody,
.light-mode table tbody tr,
.light-mode table tbody td {
    background-color: #ffffff !important;
}


/* Overrides para Modo Negro Puro */
.black-mode .card {
    border-color: var(--color-primario-rgba-03) !important;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), 0 0 15px var(--color-primario-rgba-01) !important;
}

.black-mode .layout-header,
.black-mode .layout-footer {
    border-color: var(--color-primario-rgba-02) !important;
}