/*
 LOGIN V4
 Mejora exclusivamente visual.
 No modifica autenticación, OTP, roles ni endpoints.
*/

body.login-v2-active {
    background: #010513 !important;
}

/* Fondo cinematográfico original, sin textos ni formularios duplicados */
body.login-v2-active .login-v2-background {
    background:
        radial-gradient(
            circle at 17% 22%,
            rgba(31, 111, 255, 0.32),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 29%,
            rgba(129, 67, 255, 0.30),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 50% 108%,
            rgba(15, 120, 255, 0.30),
            transparent 47%
        ),
        linear-gradient(
            135deg,
            #010511 0%,
            #03122d 40%,
            #071c4c 67%,
            #16093d 100%
        ) !important;
}

/* Nebulosas decorativas */
body.login-v2-active .login-v2-background::before {
    content: "";
    position: absolute;
    inset: -15%;
    opacity: 0.75;
    background:
        radial-gradient(
            ellipse at 12% 52%,
            rgba(25, 102, 255, 0.24),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 86% 48%,
            rgba(142, 54, 255, 0.22),
            transparent 33%
        ),
        radial-gradient(
            ellipse at 48% 95%,
            rgba(17, 119, 255, 0.18),
            transparent 38%
        );
    filter: blur(22px);
    animation: loginV4Nebula 14s ease-in-out infinite alternate;
}

/* Silueta de castillo de fantasía creada con CSS */
body.login-v2-active .login-v2-background::after {
    content: "♜";
    position: absolute;
    right: 6%;
    bottom: 4%;
    z-index: 1;

    color: rgba(67, 99, 203, 0.19);
    font-family: Georgia, serif;
    font-size: clamp(280px, 34vw, 560px);
    line-height: 0.8;

    text-shadow:
        0 0 35px rgba(54, 104, 255, 0.20),
        0 0 85px rgba(105, 55, 255, 0.18);

    transform: scaleX(0.72);
    transform-origin: bottom right;
    pointer-events: none;
}

/* Mantener estrellas, pero más suaves */
body.login-v2-active .login-v2-stars {
    opacity: 0.64 !important;
}

body.login-v2-active .login-v2-orb-left {
    opacity: 0.65 !important;
    filter: blur(8px);
}

body.login-v2-active .login-v2-orb-right {
    opacity: 0.70 !important;
    filter: blur(9px);
}

body.login-v2-active .login-v2-arc {
    opacity: 0.58 !important;
}

body.login-v2-active .login-v2-reflection {
    opacity: 0.45 !important;
}

/* Tarjeta premium */
body.login-v2-active .login-v2-card {
    width: min(510px, calc(100vw - 34px)) !important;
    padding: 36px 38px 30px !important;

    border: 1px solid rgba(108, 139, 255, 0.63) !important;
    border-radius: 26px !important;

    background:
        linear-gradient(
            145deg,
            rgba(18, 37, 82, 0.88),
            rgba(5, 13, 42, 0.94)
        ) !important;

    box-shadow:
        0 35px 105px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(107, 142, 255, 0.10),
        0 0 52px rgba(45, 105, 255, 0.24),
        0 0 90px rgba(109, 57, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;

    backdrop-filter: blur(27px) saturate(120%);
    -webkit-backdrop-filter: blur(27px) saturate(120%);
}

/* Brillo superior de la tarjeta */
body.login-v2-active .login-v2-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 13%;
    width: 74%;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(116, 181, 255, 0.90),
            rgba(143, 85, 255, 0.75),
            transparent
        );

    box-shadow: 0 0 18px rgba(79, 139, 255, 0.60);
}

/* Logo */
.login-v2-logo {
    border-color: rgba(147, 194, 255, 0.70) !important;

    background:
        linear-gradient(
            145deg,
            #1da8ff,
            #4267ff 52%,
            #8d45ff
        ) !important;

    box-shadow:
        0 0 30px rgba(48, 137, 255, 0.52),
        0 0 50px rgba(128, 67, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}

/* Marca */
.login-v2-title span {
    color: #8c5cff !important;
    text-shadow:
        0 0 18px rgba(140, 92, 255, 0.60),
        0 0 35px rgba(58, 131, 255, 0.24) !important;
}

.login-v2-divider {
    color: #7b63ff !important;
}

/* Campo de usuario y OTP */
body.login-v2-active .login-v2-card input {
    min-height: 57px !important;

    border-color: rgba(112, 145, 214, 0.52) !important;
    background:
        linear-gradient(
            135deg,
            rgba(3, 12, 37, 0.84),
            rgba(10, 17, 48, 0.78)
        ) !important;
}

body.login-v2-active .login-v2-card input:hover {
    border-color: rgba(105, 161, 255, 0.72) !important;
}

body.login-v2-active .login-v2-card input:focus {
    border-color: #579dff !important;

    box-shadow:
        0 0 0 4px rgba(48, 128, 255, 0.14),
        0 0 28px rgba(47, 115, 255, 0.20) !important;
}

/* Botón principal */
body.login-v2-active .login-v2-card button {
    min-height: 57px !important;

    background:
        linear-gradient(
            100deg,
            #169dff 0%,
            #3568ff 48%,
            #913dff 100%
        ) !important;

    box-shadow:
        0 15px 38px rgba(47, 95, 255, 0.40),
        0 0 26px rgba(131, 61, 255, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

body.login-v2-active .login-v2-card button:hover {
    transform: translateY(-2px) scale(1.006);

    box-shadow:
        0 19px 46px rgba(47, 95, 255, 0.49),
        0 0 34px rgba(131, 61, 255, 0.27),
        inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

/* Pie de página */
body.login-v2-active .login-v2-footer {
    padding: 9px 16px;
    border: 1px solid rgba(106, 145, 211, 0.18);
    border-radius: 999px;

    background: rgba(4, 12, 34, 0.34);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@keyframes loginV4Nebula {
    from {
        transform: translate3d(-1%, -1%, 0) scale(1);
    }

    to {
        transform: translate3d(2%, 1.5%, 0) scale(1.05);
    }
}

@media (max-width: 900px) {
    body.login-v2-active .login-v2-background::after {
        right: -13%;
        opacity: 0.52;
    }
}

@media (max-width: 620px) {
    body.login-v2-active .login-v2-card {
        width: calc(100vw - 26px) !important;
        padding: 29px 21px 25px !important;
    }

    body.login-v2-active .login-v2-background::after {
        right: -34%;
        bottom: 7%;
        font-size: 320px;
        opacity: 0.34;
    }
}