/* ==============================
   Efecto de cursor: una luz suave que sigue al mouse.
   Se inyecta vía cursor-fx.js — solo en dispositivos con mouse real
   (se desactiva solo en touch, ver el JS).
   ============================== */

/* El login no carga app.css, así que --primary/--primary-rgb no existen ahí
   — se define un valor propio tomado de la paleta azul de auth.css
   (--blue-2), para que el efecto se vea igual de bien en esa pantalla. */
body.pagina-login {
    --primary: #1e3a8a;
    --primary-rgb: 30, 58, 138;
}
[data-theme="oscuro"] body.pagina-login {
    --primary: #3b82f6;
    --primary-rgb: 59, 130, 246;
}

.cursor-fx-light {
    position: fixed;
    top: 0;
    left: 0;
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    transform: translate3d(-9999px, -9999px, 0);
    opacity: 0;
    transition: opacity 0.25s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease;

    /* Modo claro: se ve como un resplandor tenue que se funde con la
       tarjeta/fondo — mix-blend-mode: multiply oscurece un poco en vez de
       "pintar" un círculo plano encima. */
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.35) 0%, rgba(var(--primary-rgb), 0) 68%);
    mix-blend-mode: multiply;
}

body.cursor-fx-active .cursor-fx-light { opacity: 1; }

/* Mientras se escribe en un campo, la luz molesta más de lo que ayuda —
   se atenúa bastante (no se apaga del todo, para no sentirse "roto"). */
body.cursor-fx-typing .cursor-fx-light {
    opacity: 0.18;
    width: 55px;
    height: 55px;
    margin: -27.5px 0 0 -27.5px;
}
[data-theme="oscuro"] body.cursor-fx-typing .cursor-fx-light {
    width: 65px;
    height: 65px;
    margin: -32.5px 0 0 -32.5px;
}

.cursor-fx-light.is-hover {
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
}

/* Modo oscuro: antes casi no se notaba — aquí es donde una "luz" real debe
   brillar. mix-blend-mode: screen aclara lo que hay debajo (efecto linterna)
   en vez de solo poner un círculo translúcido que se pierde en el fondo oscuro. */
[data-theme="oscuro"] .cursor-fx-light {
    width: 95px;
    height: 95px;
    margin: -47.5px 0 0 -47.5px;
    background: radial-gradient(circle, rgba(180, 210, 255, 1) 0%, rgba(143, 187, 255, 0.3) 38%, rgba(143, 187, 255, 0) 68%);
    mix-blend-mode: screen;
}
[data-theme="oscuro"] .cursor-fx-light.is-hover {
    width: 130px;
    height: 130px;
    margin: -65px 0 0 -65px;
}

/* Nunca en touch/tablet — ahí no hay puntero real que seguir. */
@media (hover: none), (pointer: coarse) {
    .cursor-fx-light { display: none !important; }
}