/* ══════════════════════════════════════════════════════════
   LOGIN THEMES — Módulo visual independiente
   ──────────────────────────────────────────────────────────
   Para QUITAR este módulo completamente:
     1. Elimina este archivo.
     2. En login.php elimina la línea <link login-themes.css>.
     3. En login.php elimina los scripts login-sauna.js/login-dress.js.
     4. En login.php elimina la llamada applyTheme().
   No afecta ningún otro componente del sistema (dashboard,
   admin, reportes, gestor, cliente, root).
   ══════════════════════════════════════════════════════════ */

/* ── TEMA SAUNA ─────────────────────────────────────────── */
body.theme-sauna {
    background: #1a1210;
    overflow:   hidden;
}
/* Imagen de fondo — sube tu foto a: public/assets/img/themes/sauna-bg.jpg
   Se usa un elemento fijo a pantalla completa con aceleración GPU para
   evitar cortes o parpadeos en tablets y móviles. */
body.theme-sauna::before {
    content:    '';
    position:   fixed;
    top: 0; left: 0;
    width:      100vw;
    height:     100vh;
    height:     100dvh;            /* viewport dinámico: cubre aunque cambie la barra del navegador */
    background: url('../img/themes/sauna-bg.jpg') center center / cover no-repeat;
    opacity:    0.52;
    z-index:    0;
    transform:  translateZ(0);     /* fuerza capa GPU = sin tearing */
    will-change: opacity;
}

/* Partículas de vapor */
.steam-wrap {
    position:       fixed;
    inset:          0;
    pointer-events: none;
    z-index:        1;
    overflow:       hidden;
    transform:      translateZ(0);
}
.steam-particle {
    position:      absolute;
    bottom:        -90px;
    border-radius: 50%;
    /* Color crema cálido — contrasta sobre madera oscura */
    background:    radial-gradient(circle,
                       rgba(248, 238, 220, 0.72) 0%,
                       rgba(240, 228, 205, 0.45) 45%,
                       rgba(230, 215, 190, 0)    100%);
    filter:        blur(6px);
    animation:     steam-rise linear infinite;
    will-change:   transform, opacity;
    transform:     translateZ(0);  /* cada partícula en su propia capa GPU */
    backface-visibility: hidden;
}

/* En pantallas medianas/tablets: menos blur (operación GPU más cara) */
@media (max-width: 1100px) {
    .steam-particle { filter: blur(4px); }
}
/* Usuarios que prefieren menos movimiento: sin animación de vapor */
@media (prefers-reduced-motion: reduce) {
    .steam-particle { animation: none; opacity: 0.25; }
}
@keyframes steam-rise {
    0%   { transform: translateY(0)      scaleX(1.0) scaleY(1.0); opacity: 0;    }
    6%   { opacity: 0.85; }
    30%  { transform: translateY(-28vh)  scaleX(1.4) scaleY(1.1); opacity: 0.65; }
    65%  { transform: translateY(-60vh)  scaleX(1.9) scaleY(1.3); opacity: 0.30; }
    90%  { opacity: 0.08; }
    100% { transform: translateY(-108vh) scaleX(2.6) scaleY(1.5); opacity: 0;    }
}

/* Login card sobre el fondo */
body.theme-sauna .login-body {
    position:   relative;
    z-index:    2;
    min-height: 100vh;
    display:    flex;
    align-items:    center;
    justify-content: center;
}
body.theme-sauna .login-card {
    background:      rgba(20, 10, 7, 0.84);
    backdrop-filter: blur(16px) saturate(1.3);
    border:          1px solid rgba(255, 175, 100, 0.18);
    box-shadow:      0 8px 52px rgba(0, 0, 0, 0.78);
    position:        relative;
    z-index:         2;
}
body.theme-sauna .login-icon    { filter: drop-shadow(0 0 8px rgba(255,180,100,.6)); }
body.theme-sauna .login-header h1 { color: #f5bf72; }
body.theme-sauna .login-header p  { color: #c09070; }
body.theme-sauna label            { color: #c8a47a; }
body.theme-sauna input,
body.theme-sauna select {
    background:   rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 170, 90, 0.28);
    color:        #f0e0cc;
}
body.theme-sauna input::placeholder { color: rgba(255, 210, 160, 0.38); }
body.theme-sauna .btn-primary {
    background:   rgba(190, 105, 40, 0.88);
    border:       1px solid rgba(255, 155, 70, 0.35);
}
body.theme-sauna .btn-primary:hover { background: rgba(200, 115, 50, 1); }
body.theme-sauna .login-footer a    { color: #f5bf72; }

/* ── TEMA VESTIDO (DRESS) ────────────────────────────────── */
body.theme-dress {
    background: #0c0008;
    overflow:   hidden;
}

/* Wrapper SVG del vestido — izquierda, verticalmente centrado */
#dress-svg-wrap {
    position:   fixed;
    left:       -3%;
    top:        50%;
    transform:  translateY(-50%);
    width:      44vw;
    max-width:  470px;
    min-width:  190px;
    z-index:    0;
    pointer-events: none;
    /* Brillo rojizo alrededor del vestido */
    filter: drop-shadow(0 0 35px rgba(180, 10, 50, 0.45))
            drop-shadow(0 30px 20px rgba(0, 0, 0, 0.55));
}

/* Login card desplazada a la derecha */
body.theme-dress .login-body {
    position:        relative;
    z-index:         2;
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: flex-end;   /* card a la derecha */
    padding-right:   7%;
}

/* Pantallas estrechas: vestido queda detrás del card centrado */
@media (max-width: 720px) {
    #dress-svg-wrap {
        left:      50%;
        transform: translate(-50%, -50%);
        width:     90vw;
        opacity:   0.18;
    }
    body.theme-dress .login-body {
        justify-content: center;
        padding-right:   0;
    }
}

body.theme-dress .login-card {
    background:      rgba(12, 3, 18, 0.83);
    backdrop-filter: blur(16px) saturate(1.3);
    border:          1px solid rgba(220, 90, 150, 0.22);
    box-shadow:      0 8px 52px rgba(0, 0, 0, 0.85);
    position:        relative;
    z-index:         2;
}
body.theme-dress .login-icon      { filter: drop-shadow(0 0 10px rgba(255, 80, 140, 0.55)); }
body.theme-dress .login-header h1 { color: #ff88b5; }
body.theme-dress .login-header p  { color: #b86898; }
body.theme-dress label            { color: #c07898; }
body.theme-dress input,
body.theme-dress select {
    background:   rgba(255, 255, 255, 0.06);
    border-color: rgba(220, 90, 150, 0.28);
    color:        #f0d0e0;
}
body.theme-dress input::placeholder { color: rgba(255, 165, 200, 0.35); }
body.theme-dress .btn-primary {
    background:   rgba(175, 40, 105, 0.88);
    border:       1px solid rgba(220, 75, 145, 0.35);
}
body.theme-dress .btn-primary:hover { background: rgba(185, 50, 115, 1); }
body.theme-dress .login-footer a    { color: #ff88b5; }