.login-pagina {
    --login-fondo: #020617;
    --login-panel: #0c223b;
    --login-cian: #55d8ff;
    --login-verde: #4dff62;
    --login-texto: #f2f9ff;
    --login-texto-suave: #a8c4d7;
    --login-error: #ff9b9b;
    --login-fuente-pixel: "gridlite-pe-variable", "Silkscreen", monospace;
    --login-fuente-cuerpo: "itc-avant-garde-gothic-pro", "Segoe UI", Arial, sans-serif;
}

    .login-pagina,
    .login-pagina *,
    .login-pagina *::before,
    .login-pagina *::after {
        box-sizing: border-box;
    }

/* ========================= FONDO DIGITAL ========================= */

.login-pagina {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: clamp(32px, 5vh, 68px) 20px;
    overflow: hidden;
    background: #020617;
    color: var(--login-texto);
    font-family: var(--login-fuente-cuerpo);
}

    .login-pagina::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(ellipse 48% 54% at 50% 49%, rgba(16, 81, 130, .24), transparent 81%), radial-gradient(ellipse 60% 35% at 14% 20%, rgba(0, 80, 155, .11), transparent 80%), radial-gradient(ellipse 52% 34% at 85% 88%, rgba(4, 70, 132, .15), transparent 80%), linear-gradient(120deg, #020617 0%, #06152a 54%, #020617 100%);
    }

    .login-pagina::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(2, 6, 23, .24), transparent 22%, transparent 78%, rgba(2, 6, 23, .24)), linear-gradient(180deg, rgba(2, 6, 23, .38), transparent 23%, transparent 80%, rgba(2, 6, 23, .20));
    }

.login-particulas-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    opacity: .96;
    filter: drop-shadow(0 0 2px rgba(85, 216, 255, .26));
}

/* ============================ PANEL ============================ */

.login-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    margin: auto;
    padding: clamp(30px, 3.5vw, 43px);
    border: 1px solid rgba(85, 216, 255, .32);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(13, 35, 59, .96), rgba(5, 19, 36, .975));
    box-shadow: 0 26px 92px rgba(0, 0, 0, .58), 0 0 60px rgba(30, 143, 219, .10), inset 0 1px 0 rgba(216, 250, 255, .07);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

    .login-container::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 17%;
        right: 17%;
        height: 2px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, #55d8ff, transparent);
        box-shadow: 0 0 13px rgba(85, 216, 255, .63);
    }

/* ========================= ENCABEZADO ========================= */

.login-header {
    margin-bottom: 26px;
    text-align: center;
}

.login-eyebrow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 19px;
    color: #62dbff;
    font-family: var(--login-fuente-pixel);
    font-variation-settings: "wght" 700, "BACK" 1, "RECT" 1, "ELSH" 3;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .10em;
    text-transform: uppercase;
    text-shadow: 0 0 9px rgba(85, 216, 255, .40);
}

    .login-eyebrow::before,
    .login-eyebrow::after {
        content: "";
        width: clamp(13px, 4vw, 33px);
        height: 1px;
        background: rgba(85, 216, 255, .48);
    }

.login-eyebrow-separador {
    color: rgba(255, 255, 255, .60);
}

.login-header h1 {
    margin: 0;
    color: #f6fdff;
    font-family: var(--login-fuente-pixel);
    font-size: clamp(28px, 3vw, 34px);
    font-weight: 900;
    font-variation-settings: "wght" 900, "BACK" 1, "RECT" 1, "ELSH" 3;
    line-height: 1.33;
    letter-spacing: .065em;
    text-transform: uppercase;
    text-shadow: 0 0 7px rgba(250, 255, 255, .36), 0 0 24px rgba(85, 216, 255, .25);
    -webkit-font-smoothing: antialiased;
}

    .login-header h1 span {
        color: var(--login-verde);
        text-shadow: 0 0 8px rgba(77, 255, 98, .75), 0 0 23px rgba(77, 255, 98, .38);
    }

.login-divider {
    height: 1px;
    margin: 0 0 27px;
    background: linear-gradient(90deg, transparent, rgba(85, 216, 255, .28), transparent);
}

/* =========================== CAMPOS =========================== */

.login-form {
    width: 100%;
}

.login-form-group {
    margin-bottom: 19px;
}

    .login-form-group > label {
        display: block;
        margin-bottom: 9px;
        color: #e4f6ff;
        font-family: var(--login-fuente-cuerpo);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .02em;
    }

.login-input-wrap {
    position: relative;
    width: 100%;
}

.login-form .login-input {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid rgba(147, 207, 239, .28);
    border-radius: 9px;
    background: rgba(1, 10, 23, .72);
    color: #f8fcff;
    font-family: var(--login-fuente-cuerpo);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

    .login-form .login-input::placeholder {
        color: #8aa9bc;
        opacity: .75;
    }

    .login-form .login-input:hover {
        border-color: rgba(85, 216, 255, .55);
    }

    .login-form .login-input:focus {
        border-color: #55d8ff;
        background: rgba(4, 21, 39, .95);
        box-shadow: 0 0 0 3px rgba(85, 216, 255, .11), 0 0 18px rgba(85, 216, 255, .12);
    }

    .login-form .login-input.input-validation-error {
        border-color: var(--login-error);
    }

/* Ojo de contraseña, integrado al campo sin cambios de autenticación */
.login-form .login-input-password {
    padding-right: 55px;
}

.login-toggle-password {
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #9ac7dc;
    background: transparent;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

    .login-toggle-password:hover,
    .login-toggle-password[aria-pressed="true"] {
        color: #55d8ff;
        background: rgba(85, 216, 255, .08);
    }

    .login-toggle-password:focus-visible {
        outline: 2px solid #55d8ff;
        outline-offset: 2px;
    }

    .login-toggle-password svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ========================== VALIDACIÓN ========================== */

.login-form .field-validation-error,
.login-form .field-validation-error span,
.login-form .login-error.field-validation-error {
    display: block;
    margin-top: 7px;
    color: var(--login-error);
    font-family: var(--login-fuente-cuerpo);
    font-size: 12px;
    line-height: 1.5;
}

.login-form .field-validation-valid,
.login-form .validation-summary-valid {
    display: none;
}

.login-form .validation-summary-errors {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 155, 155, .32);
    border-radius: 8px;
    background: rgba(255, 100, 100, .08);
    color: #ffc5c5;
    font-size: 12px;
    line-height: 1.5;
}

    /* ERRORES SIN VIÑETAS */

    .login-form .validation-summary-errors ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .login-form .validation-summary-errors li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

/* ======================== BOTÓN DE ACCESO ======================== */

.login-form .login-btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 53px;
    margin: 26px 0 0;
    padding: 14px 19px;
    border: 1px solid var(--login-verde);
    border-radius: 11px;
    background: var(--login-verde);
    color: #062517;
    font-family: var(--login-fuente-cuerpo);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .065em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 11px rgba(77, 255, 98, .40), 0 0 29px rgba(77, 255, 98, .18);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .login-form .login-btn-submit:hover:not(:disabled) {
        background: #8cff97;
        transform: translateY(-2px);
        box-shadow: 0 0 18px rgba(77, 255, 98, .55), 0 0 38px rgba(77, 255, 98, .27);
    }

    .login-form .login-btn-submit:focus-visible {
        outline: 2px solid #55d8ff;
        outline-offset: 4px;
    }

    .login-form .login-btn-submit:disabled {
        border-color: rgba(155, 181, 203, .26);
        background: #647a90;
        color: #d1d9e2;
        opacity: .58;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* =========================== RESPONSIVE =========================== */

@media (min-width: 768px) and (max-width: 1199px) {
    .login-container {
        max-width: 550px;
        padding: 38px;
    }
}

@media (max-width: 767px) {
    .login-pagina {
        align-items: center;
        padding: max(24px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom));
    }

    .login-container {
        max-width: 540px;
        padding: clamp(22px, 5vw, 30px);
        border-radius: 16px;
    }

    .login-eyebrow {
        gap: 5px;
        margin-bottom: 14px;
        font-size: 10px;
        letter-spacing: .045em;
    }

    .login-header h1 {
        font-size: clamp(21px, 5.7vw, 30px);
    }

    .login-header {
        margin-bottom: 21px;
    }

    .login-divider {
        margin-bottom: 23px;
    }

    .login-form .login-input {
        height: 49px;
        font-size: 16px;
    }

    .login-form .login-btn-submit {
        font-size: 13px;
        min-height: 50px;
    }
}

@media (max-width: 380px) {
    .login-container {
        padding: 23px 17px;
    }

    .login-header h1 {
        font-size: 20px;
    }

    .login-eyebrow {
        font-size: 9.5px;
        gap: 4px;
        letter-spacing: .025em;
    }

        .login-eyebrow::before, .login-eyebrow::after {
            width: 12px;
        }
}

@media (max-height: 690px) {
    .login-pagina {
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-pagina *,
    .login-pagina *::before,
    .login-pagina *::after {
        transition: none !important;
        animation: none !important;
    }

    .login-particulas-canvas {
        opacity: .60;
    }
}