:root {
    --fondo-color: #1f1f1f;
    --base-color: #2c2c2c;
    --base-hover: #4d4d4d;
    --primario-color: #4000ff;
    --texto-color: #ebebeb;
    --texto-secundario: #999999;
    --boton-verde: #26cc2e;
    --fondo-verde: rgba(38, 204, 46, 0.2);
    --boton-rojo: #e84118;
    --alerta: #ffc107;
    --sombra-base: rgba(0, 0, 0, 0.6);
    --sombra-primario: rgba(63, 00, 255, 0.5);
    --hr: linear-gradient(90deg, transparent, #667eea, transparent);
    --sombra-primario-opaco: rgba(63, 0, 255, 0.05);
    --transicion: all 0.3s ease;
    --font-family: 'Inter', system-ui, 'Segoe UI', 'Helvetica Neue', sans-serif;
    --gradiente-fondo-foto: linear-gradient(135deg, #212b55 0%, #28153b 100%);
    --boton-radio: 25px;
    --modal-radio: 30px;
    --extra-radio: 15px;
    --scrollbar: none;
}

/* 🌞 MODO CLARO */
:root.light-mode {
    --fondo-color: #d4d5da;
    --base-color: #e7f5fa;
    --base-hover: #c3d0eb;

    --primario-color: #3e37bb;

    --texto-color: #0f2d58;
    --texto-secundario: #56678a;

    --blanco: #ffffff;

    --boton-verde: #22c55e;
    --boton-rojo: #ef4444;

    --alerta: #f59e0b;

    --sombra-base: rgba(0, 0, 0, 0.08);
    --sombra-primario: rgba(79, 70, 229, 0.25);
    --sombra-primario-opaco: rgba(79, 70, 229, 0.06);

    --transicion: all 0.3s ease;

    --font-family: 'Inter', system-ui, 'Segoe UI', 'Helvetica Neue', sans-serif;

    --gradiente-fondo-foto: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
}

:root.modo-azul {
    --base-color: #0a0a1a;
    --base-hover: #0f0f2a;        /* ← Fondo para hovers */
    --fondo-color: #050510;
    --primario-color: #3f00ff;
    --texto-color: #e0e0ff;
    --texto-secundario: #a0a0c0;  /* ← Texto menos intenso */
    --boton: #26cc2e;
    --boton-dos: #e84118;
    --transicion: all 0.3s ease;
}