:root {
    --login-blue: #1677ff;
    --login-blue-light: #4badff;
    --login-purple: #7557ff;
    --login-card: rgba(8, 21, 54, 0.82);
    --login-border: rgba(91, 157, 255, 0.55);
    --login-text: #f8fbff;
    --login-muted: #aab9d8;
}

/*
 Solo se aplican estos estilos cuando el login está visible.
 El resto del panel conserva su diseño y funcionamiento actual.
*/
body.login-v2-active {
    min-height: 100vh;
    overflow: hidden;
    background: #020819 !important;
}

.login-v2-background {
    display: none;
}

body.login-v2-active .login-v2-background {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 8000;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 14% 18%,
            rgba(33, 102, 255, 0.30),
            transparent 28%
        ),
        radial-gradient(
            circle at 84% 28%,
            rgba(116, 71, 255, 0.27),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 50% 108%,
            rgba(0, 130, 255, 0.32),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #010614 0%,
            #03132d 43%,
            #071d48 72%,
            #020716 100%
        );
}

/* Estrellas */
.login-v2-stars,
.login-v2-stars::before,
.login-v2-stars::after {
    position: absolute;
    inset: -80px;
    content: "";
    opacity: 0.75;
    background-image:
        radial-gradient(circle, #fff 0 1px, transparent 1.7px),
        radial-gradient(circle, #78b9ff 0 1px, transparent 1.8px),
        radial-gradient(circle, #c2b5ff 0 1.1px, transparent 1.9px);
    background-position:
        20px 30px,
        120px 80px,
        220px 155px;
    background-size:
        260px 230px,
        310px 270px,
        370px 320px;
    animation: loginStarsMove 38s linear infinite;
}

.login-v2-stars::before {
    transform: rotate(33deg);
    opacity: 0.45;
}

.login-v2-stars::after {
    transform: rotate(-24deg);
    opacity: 0.34;
}

/* Brillos ambientales */
.login-v2-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(5px);
    animation: loginOrbFloat 10s ease-in-out infinite;
}

.login-v2-orb-left {
    width: 430px;
    height: 430px;
    left: -170px;
    top: 12%;
    background:
        radial-gradient(
            circle,
            rgba(29, 113, 255, 0.27),
            transparent 69%
        );
}

.login-v2-orb-right {
    width: 530px;
    height: 530px;
    right: -190px;
    top: 5%;
    animation-delay: -4s;
    background:
        radial-gradient(
            circle,
            rgba(125, 71, 255, 0.25),
            transparent 68%
        );
}

/* Arco luminoso */
.login-v2-arc {
    position: absolute;
    width: 62vw;
    height: 38vw;
    min-width: 730px;
    min-height: 440px;
    right: -18vw;
    top: 2vh;
    border-top: 2px solid rgba(72, 154, 255, 0.60);
    border-radius: 50%;
    transform: rotate(-8deg);
    opacity: 0.68;
    filter: drop-shadow(0 0 11px #3388ff);
}

.login-v2-arc::after {
    position: absolute;
    top: -5px;
    left: 28%;
    width: 9px;
    height: 9px;
    content: "";
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 10px #fff,
        0 0 25px #52a0ff,
        0 0 48px #315dff;
    animation: loginSpark 5s ease-in-out infinite;
}

/* Suelo/reflejo cinematográfico */
.login-v2-reflection {
    position: absolute;
    right: -5%;
    bottom: -16%;
    left: -5%;
    height: 42%;
    opacity: 0.66;
    background:
        repeating-linear-gradient(
            176deg,
            rgba(61, 134, 255, 0.13) 0 2px,
            transparent 2px 18px
        ),
        linear-gradient(
            to bottom,
            transparent,
            rgba(17, 74, 170, 0.18),
            rgba(2, 9, 27, 0.76)
        );
    transform: perspective(400px) rotateX(62deg);
    transform-origin: bottom;
}

/* Tarjeta central */
body.login-v2-active .login-v2-card {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 8100 !important;

    width: min(520px, calc(100vw - 34px)) !important;
    max-width: 520px !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 38px 38px 31px !important;

    overflow: hidden;
    transform: translate(-50%, -50%) !important;

    color: var(--login-text) !important;
    border: 1px solid var(--login-border) !important;
    border-radius: 25px !important;

    background:
        linear-gradient(
            145deg,
            rgba(17, 41, 86, 0.88),
            rgba(5, 15, 42, 0.93)
        ) !important;

    box-shadow:
        0 32px 95px rgba(0, 0, 0, 0.68),
        0 0 0 1px rgba(88, 156, 255, 0.12),
        0 0 50px rgba(25, 106, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

    backdrop-filter: blur(23px);
    -webkit-backdrop-filter: blur(23px);

    animation:
        loginCardEntry 0.65s cubic-bezier(.2, .85, .25, 1);
}

body.login-v2-active .login-v2-card::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.055) 37%,
            transparent 58%
        );
}

/* Oculta únicamente el título viejo del login */
body.login-v2-active .login-v2-card > h1:first-child,
body.login-v2-active .login-v2-card > h2:first-child {
    display: none !important;
}

.login-v2-brand,
.login-v2-welcome,
.login-v2-security {
    position: relative;
    z-index: 1;
}

.login-v2-brand {
    margin-bottom: 22px;
    text-align: center;
}

.login-v2-logo {
    position: relative;
    display: grid;
    width: 83px;
    height: 83px;
    margin: 0 auto 15px;
    place-items: center;

    border: 1px solid rgba(152, 209, 255, 0.72);
    border-radius: 50%;

    font-size: 39px;

    background:
        radial-gradient(
            circle at 34% 27%,
            #43c8ff,
            #176cff 47%,
            #292b82 100%
        );

    box-shadow:
        0 0 27px rgba(40, 145, 255, 0.48),
        inset 0 0 25px rgba(255, 255, 255, 0.12);
}

.login-v2-logo::after {
    position: absolute;
    inset: -8px;
    content: "";
    border: 1px solid rgba(109, 170, 255, 0.34);
    border-radius: 50%;
}

.login-v2-title {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 850;
    letter-spacing: 2.4px;
}

.login-v2-title span {
    color: #3789ff;
    text-shadow: 0 0 20px rgba(55, 137, 255, 0.57);
}

.login-v2-subtitle {
    margin-top: 7px;
    color: #aebbd7;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.login-v2-divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 23px 0 21px;
    color: #398bff;
}

.login-v2-divider::before,
.login-v2-divider::after {
    height: 1px;
    content: "";
    flex: 1;
    background:
        linear-gradient(
            to right,
            transparent,
            rgba(94, 145, 221, 0.40)
        );
}

.login-v2-divider::after {
    transform: rotate(180deg);
}

.login-v2-welcome {
    margin-bottom: 23px;
    text-align: center;
}

.login-v2-welcome h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 24px;
    font-weight: 750;
}

.login-v2-welcome p {
    margin: 0;
    color: var(--login-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* Campos existentes del sistema */
body.login-v2-active .login-v2-card input,
body.login-v2-active .login-v2-card select {
    position: relative;
    z-index: 2;

    width: 100% !important;
    min-height: 55px !important;
    box-sizing: border-box !important;

    margin: 0 0 14px !important;
    padding: 0 17px !important;

    outline: none !important;
    color: #fff !important;
    border: 1px solid rgba(101, 145, 214, 0.50) !important;
    border-radius: 13px !important;

    font-size: 15px !important;

    background: rgba(3, 12, 34, 0.72) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 6px 19px rgba(0, 0, 0, 0.18);

    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

body.login-v2-active .login-v2-card input::placeholder {
    color: #8493b1 !important;
}

body.login-v2-active .login-v2-card input:focus,
body.login-v2-active .login-v2-card select:focus {
    transform: translateY(-1px);
    border-color: #4297ff !important;
    box-shadow:
        0 0 0 4px rgba(40, 128, 255, 0.13),
        0 0 26px rgba(34, 119, 255, 0.16) !important;
}

/* Botones ya existentes */
body.login-v2-active .login-v2-card button {
    position: relative;
    z-index: 2;

    width: 100% !important;
    min-height: 55px !important;

    margin-top: 2px !important;

    cursor: pointer;

    color: #fff !important;
    border: 0 !important;
    border-radius: 13px !important;

    font-size: 15px !important;
    font-weight: 760 !important;

    background:
        linear-gradient(
            100deg,
            #165ee8 0%,
            #168bff 52%,
            #2857ed 100%
        ) !important;

    box-shadow:
        0 14px 34px rgba(18, 101, 255, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;

    transition:
        transform 0.20s ease,
        filter 0.20s ease,
        box-shadow 0.20s ease !important;
}

body.login-v2-active .login-v2-card button:hover {
    transform: translateY(-2px);
    filter: brightness(1.11);
    box-shadow:
        0 18px 42px rgba(18, 101, 255, 0.45),
        0 0 24px rgba(53, 145, 255, 0.21) !important;
}

body.login-v2-active .login-v2-card button:active {
    transform: translateY(0) scale(0.992);
}

.login-v2-security {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    margin-top: 19px;

    color: #5ba7ff;
    font-size: 13px;
}

.login-v2-footer {
    display: none;
}

body.login-v2-active .login-v2-footer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    z-index: 8100;

    display: block;

    color: rgba(192, 205, 231, 0.65);
    font-size: 12px;
    white-space: nowrap;

    transform: translateX(-50%);
}

@keyframes loginCardEntry {
    from {
        opacity: 0;
        transform:
            translate(-50%, calc(-50% + 24px))
            scale(0.975);
    }

    to {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}

@keyframes loginStarsMove {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-90px, 48px, 0);
    }
}

@keyframes loginOrbFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(25px) scale(1.05);
    }
}

@keyframes loginSpark {
    0%,
    100% {
        left: 22%;
        opacity: 0.25;
    }

    50% {
        left: 69%;
        opacity: 1;
    }
}

@media (max-width: 620px) {
    body.login-v2-active .login-v2-card {
        padding: 29px 21px 25px !important;
        border-radius: 20px !important;
    }

    .login-v2-logo {
        width: 68px;
        height: 68px;
        font-size: 32px;
    }

    .login-v2-title {
        font-size: 24px;
    }

    .login-v2-welcome h3 {
        font-size: 21px;
    }

    .login-v2-footer {
        bottom: 10px !important;
        font-size: 10px !important;
    }

    .login-v2-arc {
        opacity: 0.37;
    }
}