/* =============================================
   GenesysCore — Sistema de Temas y Skins
   Controlado por data-skin y data-tema en <html>
   ============================================= */

:root {
    /* ── Tokens base (comunes a todos los skins) ── */

    /* Neutros modo claro */
    --color-bg:             #f5f6fa;
    --color-bg-card:        #ffffff;
    --color-bg-suave:       #f9fafb;
    --color-texto:          #111827;
    --color-texto-suave:    #6b7280;
    --color-texto-tenue:    #9ca3af;
    --color-borde:          #e5e7eb;
    --color-borde-suave:    #f0f1f3;

    /* Estados (fijos en todos los skins) */
    --color-exito:          #16a34a;
    --color-exito-bg:       #dcfce7;
    --color-error:          #dc2626;
    --color-error-bg:       #fee2e2;
    --color-advertencia:    #d97706;
    --color-advertencia-bg: #fef3c7;
    --color-info:           #0284c7;
    --color-info-bg:        #e0f2fe;

    /* Layout */
    --sidebar-ancho:        260px;
    --sidebar-ancho-min:    68px;   /* colapsado (solo iconos) */

    /* Tipografía */
    --fuente:               'Inter', 'Segoe UI', system-ui, sans-serif;
    --fuente-mono:          'JetBrains Mono', 'Consolas', monospace;
    --texto-xs:             0.75rem;
    --texto-sm:             0.875rem;
    --texto-base:           1rem;
    --texto-lg:             1.125rem;
    --texto-xl:             1.25rem;
    --texto-2xl:            1.5rem;
    --texto-3xl:            1.875rem;

    /* Espaciado — redondez reducida (aspecto recto/personalizado) */
    --radio:                4px;
    --radio-lg:             6px;
    --radio-xl:             8px;
    --sombra:               0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --sombra-md:            0 4px 12px rgba(0,0,0,.08);
    --sombra-lg:            0 12px 32px rgba(0,0,0,.12);

    /* Transiciones */
    --transicion:           150ms ease;
    --transicion-md:        250ms ease;

    /* ── Skin por defecto: ORIGINAL (azul corporativo) ── */
    --color-primario:       #1d4ed8;
    --color-primario-dark:  #1e40af;
    --color-primario-light: #eff6ff;
    --color-primario-rgb:   29, 78, 216;
    --color-acento:         #0d9488;

    --sidebar-bg:           #111827;
    --sidebar-bg2:          #0b101c;
    --sidebar-texto:        #9ca3af;
    --sidebar-titulo:       #f9fafb;
    --sidebar-activo:       #1d4ed8;
    --sidebar-hover:        rgba(255,255,255,.06);
    --sidebar-borde:        rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════
   SKIN: ROSA (femenino)
   ═══════════════════════════════════════════════ */
:root[data-skin="rosa"] {
    --color-primario:       #db2777;
    --color-primario-dark:  #be185d;
    --color-primario-light: #fdf2f8;
    --color-primario-rgb:   219, 39, 119;
    --color-acento:         #a855f7;

    --sidebar-bg:           #4a1133;
    --sidebar-bg2:          #350c25;
    --sidebar-texto:        #e9b9d2;
    --sidebar-titulo:       #ffffff;
    --sidebar-activo:       #db2777;
    --sidebar-hover:        rgba(255,255,255,.08);
    --sidebar-borde:        rgba(255,255,255,.08);
}

/* ═══════════════════════════════════════════════
   SKIN: MASCULINO (grafito + oro)
   ═══════════════════════════════════════════════ */
:root[data-skin="masculino"] {
    --color-primario:       #c99700;
    --color-primario-dark:  #a67c00;
    --color-primario-light: #fffbe8;
    --color-primario-rgb:   201, 151, 0;
    --color-acento:         #b8860b;

    --sidebar-bg:           #1a1814;
    --sidebar-bg2:          #0e0c09;
    --sidebar-texto:        #b8b09e;
    --sidebar-titulo:       #fdfbf5;
    --sidebar-activo:       #c99700;
    --sidebar-hover:        rgba(255,255,255,.06);
    --sidebar-borde:        rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════
   SKIN: VERDE
   ═══════════════════════════════════════════════ */
:root[data-skin="verde"] {
    --color-primario:       #059669;
    --color-primario-dark:  #047857;
    --color-primario-light: #ecfdf5;
    --color-primario-rgb:   5, 150, 105;
    --color-acento:         #0891b2;

    --sidebar-bg:           #0f2922;
    --sidebar-bg2:          #0a1d18;
    --sidebar-texto:        #9ac3b4;
    --sidebar-titulo:       #f0fdf4;
    --sidebar-activo:       #059669;
    --sidebar-hover:        rgba(255,255,255,.06);
    --sidebar-borde:        rgba(255,255,255,.07);
}

/* ═══════════════════════════════════════════════
   SKIN: AZUL (cielo)
   ═══════════════════════════════════════════════ */
:root[data-skin="azul"] {
    --color-primario:       #0284c7;
    --color-primario-dark:  #0369a1;
    --color-primario-light: #f0f9ff;
    --color-primario-rgb:   2, 132, 199;
    --color-acento:         #6366f1;

    --sidebar-bg:           #0c2a42;
    --sidebar-bg2:          #081e30;
    --sidebar-texto:        #94bdd6;
    --sidebar-titulo:       #f0f9ff;
    --sidebar-activo:       #0284c7;
    --sidebar-hover:        rgba(255,255,255,.07);
    --sidebar-borde:        rgba(255,255,255,.07);
}

/* ═══════════════════════════════════════════════
   SKIN: FUTURISTA (negro profundo + azul corporativo)
   Base muy oscura con transparencias estilo macOS
   ═══════════════════════════════════════════════ */
:root[data-skin="futurista"] {
    /* Cian Tron: cian eléctrico brillante sobre negro azulado */
    --color-primario:       #18e0ff;
    --color-primario-dark:  #06b6d4;
    --color-primario-light: rgba(24, 224, 255, .16);
    --color-primario-rgb:   24, 224, 255;
    --color-acento:         #3b82f6;

    /* Neutros: negro azulado muy oscuro */
    --color-bg:             #050a16;
    --color-bg-card:        rgba(15, 23, 42, .62);
    --color-bg-suave:       rgba(24, 224, 255, .09);
    --color-texto:          #eaf6ff;
    --color-texto-suave:    #a9c2d8;
    --color-texto-tenue:    #7b93ac;
    --color-borde:          rgba(24, 224, 255, .24);
    --color-borde-suave:    rgba(120, 160, 200, .12);

    --color-exito-bg:       rgba(16, 185, 129, .16);
    --color-error-bg:       rgba(239, 68, 68, .16);
    --color-advertencia-bg: rgba(245, 158, 11, .16);
    --color-info-bg:        rgba(24, 224, 255, .14);

    /* Sidebar: letras más claras para buena legibilidad */
    --sidebar-bg:           rgba(6, 12, 24, .72);
    --sidebar-bg2:          #03070f;
    --sidebar-texto:        #c3d6e8;
    --sidebar-titulo:       #ffffff;
    --sidebar-activo:       rgba(24, 224, 255, .24);
    --sidebar-hover:        rgba(24, 224, 255, .13);
    --sidebar-borde:        rgba(24, 224, 255, .20);

    /* Glow cian Tron: doble halo más amplio y luminoso */
    --glow:                 0 0 0 1px rgba(24,224,255,.45), 0 0 18px rgba(24,224,255,.40), 0 0 42px rgba(24,224,255,.28);
    --sombra:               0 2px 14px rgba(0,0,0,.6);
    --sombra-md:            0 6px 26px rgba(0,0,0,.65);
    --sombra-lg:            0 20px 60px rgba(0,0,0,.75);
}

/* ═══════════════════════════════════════════════
   SKIN: FUTURISTA ROJO (negro profundo + rojo neón)
   Mismo efecto cristal que el futurista azul, en rojo
   ═══════════════════════════════════════════════ */
:root[data-skin="futurista-rojo"] {
    /* Rojo Tron: escarlata brillante sobre vino profundo */
    --color-primario:       #ff1838;
    --color-primario-dark:  #c20019;
    --color-primario-light: rgba(255, 24, 56, .16);
    --color-primario-rgb:   255, 24, 56;
    --color-acento:         #ff5e3a;

    /* Neutros: negro carbón frío neutro (contrasta elegante con el rojo) */
    --color-bg:             #070709;
    --color-bg-card:        rgba(20, 20, 24, .62);
    --color-bg-suave:       rgba(255, 24, 56, .08);
    --color-texto:          #f4f5f7;
    --color-texto-suave:    #c2c4cc;
    --color-texto-tenue:    #8a8d96;
    --color-borde:          rgba(255, 24, 56, .24);
    --color-borde-suave:    rgba(130, 135, 150, .14);

    --color-exito-bg:       rgba(16, 185, 129, .16);
    --color-error-bg:       rgba(239, 68, 68, .16);
    --color-advertencia-bg: rgba(245, 158, 11, .16);
    --color-info-bg:        rgba(255, 24, 56, .14);

    /* Sidebar: negro carbón frío con letras claras */
    --sidebar-bg:           rgba(12, 12, 15, .78);
    --sidebar-bg2:          #050507;
    --sidebar-texto:        #cfd1d9;
    --sidebar-titulo:       #ffffff;
    --sidebar-activo:       rgba(255, 24, 56, .24);
    --sidebar-hover:        rgba(255, 24, 56, .13);
    --sidebar-borde:        rgba(255, 24, 56, .20);

    /* Glow rojo Tron: doble halo más amplio y luminoso */
    --glow:                 0 0 0 1px rgba(255,24,56,.45), 0 0 18px rgba(255,24,56,.40), 0 0 42px rgba(255,24,56,.28);
    --sombra:               0 2px 14px rgba(0,0,0,.6);
    --sombra-md:            0 6px 26px rgba(0,0,0,.65);
    --sombra-lg:            0 20px 60px rgba(0,0,0,.75);
}

/* ═══════════════════════════════════════════════
   SKIN: FUTURISTA ORO (negro carbón frío + ámbar/oro Tron)
   ═══════════════════════════════════════════════ */
:root[data-skin="futurista-oro"] {
    /* Oro Tron: dorado cálido encendido sobre negro frío */
    --color-primario:       #ffc837;
    --color-primario-dark:  #e0a000;
    --color-primario-light: rgba(255, 200, 55, .16);
    --color-primario-rgb:   255, 200, 55;
    --color-acento:         #ffab2e;

    /* Neutros: negro carbón frío neutro */
    --color-bg:             #070709;
    --color-bg-card:        rgba(20, 20, 24, .62);
    --color-bg-suave:       rgba(255, 200, 55, .08);
    --color-texto:          #f7f6f2;
    --color-texto-suave:    #c7c6bd;
    --color-texto-tenue:    #8f8d83;
    --color-borde:          rgba(255, 200, 55, .24);
    --color-borde-suave:    rgba(150, 145, 125, .14);

    --color-exito-bg:       rgba(16, 185, 129, .16);
    --color-error-bg:       rgba(239, 68, 68, .16);
    --color-advertencia-bg: rgba(245, 158, 11, .16);
    --color-info-bg:        rgba(255, 200, 55, .14);

    /* Sidebar: negro carbón frío con letras claras */
    --sidebar-bg:           rgba(12, 12, 15, .78);
    --sidebar-bg2:          #050507;
    --sidebar-texto:        #d6d4cb;
    --sidebar-titulo:       #ffffff;
    --sidebar-activo:       rgba(255, 200, 55, .24);
    --sidebar-hover:        rgba(255, 200, 55, .13);
    --sidebar-borde:        rgba(255, 200, 55, .20);

    /* Glow oro Tron: doble halo amplio y luminoso */
    --glow:                 0 0 0 1px rgba(255,200,55,.45), 0 0 18px rgba(255,200,55,.40), 0 0 42px rgba(255,200,55,.28);
    --sombra:               0 2px 14px rgba(0,0,0,.6);
    --sombra-md:            0 6px 26px rgba(0,0,0,.65);
    --sombra-lg:            0 20px 60px rgba(0,0,0,.75);
}

/* ═══════════════════════════════════════════════
   SKIN: FUTURISTA VERDE (negro carbón frío + verde neón Tron)
   ═══════════════════════════════════════════════ */
:root[data-skin="futurista-verde"] {
    /* Verde Tron: esmeralda neón encendido sobre negro frío */
    --color-primario:       #1fe88a;
    --color-primario-dark:  #06b866;
    --color-primario-light: rgba(31, 232, 138, .16);
    --color-primario-rgb:   31, 232, 138;
    --color-acento:         #14c9a8;

    /* Neutros: negro carbón frío neutro */
    --color-bg:             #070709;
    --color-bg-card:        rgba(20, 20, 24, .62);
    --color-bg-suave:       rgba(31, 232, 138, .08);
    --color-texto:          #f2f7f5;
    --color-texto-suave:    #bdc7c3;
    --color-texto-tenue:    #838f8a;
    --color-borde:          rgba(31, 232, 138, .24);
    --color-borde-suave:    rgba(125, 150, 140, .14);

    --color-exito-bg:       rgba(16, 185, 129, .16);
    --color-error-bg:       rgba(239, 68, 68, .16);
    --color-advertencia-bg: rgba(245, 158, 11, .16);
    --color-info-bg:        rgba(31, 232, 138, .14);

    /* Sidebar: negro carbón frío con letras claras */
    --sidebar-bg:           rgba(12, 12, 15, .78);
    --sidebar-bg2:          #050507;
    --sidebar-texto:        #cbd9d3;
    --sidebar-titulo:       #ffffff;
    --sidebar-activo:       rgba(31, 232, 138, .24);
    --sidebar-hover:        rgba(31, 232, 138, .13);
    --sidebar-borde:        rgba(31, 232, 138, .20);

    /* Glow verde Tron: doble halo amplio y luminoso */
    --glow:                 0 0 0 1px rgba(31,232,138,.45), 0 0 18px rgba(31,232,138,.40), 0 0 42px rgba(31,232,138,.28);
    --sombra:               0 2px 14px rgba(0,0,0,.6);
    --sombra-md:            0 6px 26px rgba(0,0,0,.65);
    --sombra-lg:            0 20px 60px rgba(0,0,0,.75);
}

/* ═══════════════════════════════════════════════
   SKIN: FUTURISTA ROSA (negro carbón frío + magenta neón Tron)
   ═══════════════════════════════════════════════ */
:root[data-skin="futurista-rosa"] {
    /* Rosa Tron: magenta/rosa encendido sobre negro frío */
    --color-primario:       #ff3ca8;
    --color-primario-dark:  #d4147f;
    --color-primario-light: rgba(255, 60, 168, .16);
    --color-primario-rgb:   255, 60, 168;
    --color-acento:         #e24bd6;

    /* Neutros: negro carbón frío neutro */
    --color-bg:             #070709;
    --color-bg-card:        rgba(20, 20, 24, .62);
    --color-bg-suave:       rgba(255, 60, 168, .08);
    --color-texto:          #f7f2f5;
    --color-texto-suave:    #c7bdc3;
    --color-texto-tenue:    #8f838a;
    --color-borde:          rgba(255, 60, 168, .24);
    --color-borde-suave:    rgba(150, 125, 140, .14);

    --color-exito-bg:       rgba(16, 185, 129, .16);
    --color-error-bg:       rgba(239, 68, 68, .16);
    --color-advertencia-bg: rgba(245, 158, 11, .16);
    --color-info-bg:        rgba(255, 60, 168, .14);

    /* Sidebar: negro carbón frío con letras claras */
    --sidebar-bg:           rgba(12, 12, 15, .78);
    --sidebar-bg2:          #050507;
    --sidebar-texto:        #d9cbd3;
    --sidebar-titulo:       #ffffff;
    --sidebar-activo:       rgba(255, 60, 168, .24);
    --sidebar-hover:        rgba(255, 60, 168, .13);
    --sidebar-borde:        rgba(255, 60, 168, .20);

    /* Glow rosa Tron: doble halo amplio y luminoso */
    --glow:                 0 0 0 1px rgba(255,60,168,.45), 0 0 18px rgba(255,60,168,.40), 0 0 42px rgba(255,60,168,.28);
    --sombra:               0 2px 14px rgba(0,0,0,.6);
    --sombra-md:            0 6px 26px rgba(0,0,0,.65);
    --sombra-lg:            0 20px 60px rgba(0,0,0,.75);
}

/* ═══════════════════════════════════════════════
   SKIN: GLASS (glassmorphism) — se adapta a claro/oscuro
   Vidrio esmerilado sobre fondo degradado sobrio (sin blobs).
   Variante CLARA por defecto; la oscura va más abajo.
   ═══════════════════════════════════════════════ */
:root[data-skin="glass"] {
    /* Azul profesional */
    --color-primario:       #2563eb;
    --color-primario-dark:  #1d4ed8;
    --color-primario-light: rgba(37, 99, 235, .12);
    --color-primario-rgb:   37, 99, 235;
    --color-acento:         #0ea5e9;

    /* Neutros claros grisáceos (fondo sobrio neutro); superficies translúcidas */
    --color-bg:             #e4e7ec;
    --color-bg-card:        rgba(255, 255, 255, .55);
    --color-bg-suave:       rgba(255, 255, 255, .40);
    --color-texto:          #121824;
    --color-texto-suave:    #44505f;
    --color-texto-tenue:    #6b7686;
    --color-borde:          rgba(255, 255, 255, .65);
    --color-borde-suave:    rgba(148, 163, 184, .28);

    --color-exito-bg:       rgba(16, 185, 129, .16);
    --color-error-bg:       rgba(239, 68, 68, .14);
    --color-advertencia-bg: rgba(245, 158, 11, .16);
    --color-info-bg:        rgba(37, 99, 235, .12);

    /* Sidebar: vidrio claro */
    --sidebar-bg:           rgba(255, 255, 255, .45);
    --sidebar-bg2:          rgba(255, 255, 255, .30);
    --sidebar-texto:        #41506a;
    --sidebar-titulo:       #16233b;
    --sidebar-activo:       rgba(37, 99, 235, .18);
    --sidebar-hover:        rgba(255, 255, 255, .55);
    --sidebar-borde:        rgba(255, 255, 255, .6);

    /* Vidrio: brillo de borde + sombra suave difusa */
    --glow:                 inset 0 1px 0 rgba(255,255,255,.65), 0 8px 32px rgba(31, 59, 110, .14);
    --sombra:               0 2px 10px rgba(31, 59, 110, .10);
    --sombra-md:            0 8px 28px rgba(31, 59, 110, .14);
    --sombra-lg:            0 20px 56px rgba(31, 59, 110, .20);
}

/* Glass — variante OSCURA (cuando el usuario activa tema oscuro) */
:root[data-skin="glass"][data-tema="oscuro"] {
    --color-primario:       #3b82f6;
    --color-primario-dark:  #2563eb;
    --color-primario-light: rgba(59, 130, 246, .16);
    --color-primario-rgb:   59, 130, 246;
    --color-acento:         #38bdf8;

    --color-bg:             #121419;
    --color-bg-card:        rgba(38, 42, 52, .48);
    --color-bg-suave:       rgba(55, 60, 72, .35);
    --color-texto:          #eef1f6;
    --color-texto-suave:    #a7b1c0;
    --color-texto-tenue:    #727c8c;
    --color-borde:          rgba(255, 255, 255, .14);
    --color-borde-suave:    rgba(148, 163, 184, .16);

    --color-exito-bg:       rgba(16, 185, 129, .18);
    --color-error-bg:       rgba(239, 68, 68, .18);
    --color-advertencia-bg: rgba(245, 158, 11, .18);
    --color-info-bg:        rgba(59, 130, 246, .16);

    --sidebar-bg:           rgba(17, 25, 40, .55);
    --sidebar-bg2:          rgba(17, 25, 40, .40);
    --sidebar-texto:        #b8c6da;
    --sidebar-titulo:       #ffffff;
    --sidebar-activo:       rgba(59, 130, 246, .24);
    --sidebar-hover:        rgba(255, 255, 255, .08);
    --sidebar-borde:        rgba(255, 255, 255, .12);

    --glow:                 inset 0 1px 0 rgba(255,255,255,.14), 0 8px 32px rgba(0, 0, 0, .40);
    --sombra:               0 2px 10px rgba(0,0,0,.35);
    --sombra-md:            0 8px 28px rgba(0,0,0,.45);
    --sombra-lg:            0 20px 56px rgba(0,0,0,.6);
}

/* ═══════════════════════════════════════════════
   MODO OSCURO — aplica sobre cualquier skin
   Cambia solo los neutros, respeta el color primario
   ═══════════════════════════════════════════════ */
:root[data-tema="oscuro"] {
    --color-bg:             #0f1117;
    --color-bg-card:        #1a1d27;
    --color-bg-suave:       #22262f;
    --color-texto:          #f1f3f5;
    --color-texto-suave:    #9ca3af;
    --color-texto-tenue:    #6b7280;
    --color-borde:          #2d323d;
    --color-borde-suave:    #22262f;

    --color-exito-bg:       #052e16;
    --color-error-bg:       #450a0a;
    --color-advertencia-bg: #451a03;
    --color-info-bg:        #082f49;

    --sombra:               0 1px 3px rgba(0,0,0,.4);
    --sombra-md:            0 4px 12px rgba(0,0,0,.45);
    --sombra-lg:            0 12px 32px rgba(0,0,0,.55);
}

/* Transición suave al cambiar tema/skin */
* {
    transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}