.pagina-login {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: var(--espacio-5) var(--espacio-4);
    color: var(--texto);
    background: var(--dashboard-fondo);
}

.tarjeta-login {
    width: min(420px, 100%);
    min-width: 0;
    overflow-wrap: anywhere;
    border: 1px solid var(--borde);
    border-radius: var(--radio-grande);
    background: var(--dashboard-superficie);
    padding: var(--espacio-6) var(--espacio-5);
    box-shadow: var(--sombra-elevada);
}

.tarjeta-login .sobrelinea {
    margin: 0;
    color: var(--dashboard-coral);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.tarjeta-login h1 {
    margin: var(--espacio-2) 0 var(--espacio-3);
    font-size: var(--texto-h1);
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

.introduccion,
.pie-login {
    color: var(--texto-secundario);
    font-size: 0.9rem;
    line-height: 1.5;
}

#formulario-login {
    display: grid;
    gap: var(--espacio-4);
    margin: var(--espacio-5) 0 var(--espacio-4);
}

#formulario-login label {
    display: grid;
    gap: var(--espacio-2);
    font-size: var(--texto-label);
    font-weight: 760;
}

#formulario-login input {
    min-height: var(--altura-control);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-control);
    background: var(--dashboard-superficie-suave);
    padding: 0 var(--espacio-3);
    color: var(--texto);
}

.aviso-login {
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--peligro) 40%, var(--borde));
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--peligro);
    font-size: 0.82rem;
}

.tarjeta-login .boton {
    width: 100%;
    min-width: 0;
    min-height: 44px;
}

#formulario-portal-login,
#formulario-portal-otp,
#formulario-portal-codigo {
    display: grid;
    gap: var(--espacio-4);
    margin: var(--espacio-5) 0 var(--espacio-4);
    min-width: 0;
}

#formulario-portal-login[hidden],
#formulario-portal-otp[hidden],
#formulario-portal-codigo[hidden] {
    display: none;
}

#formulario-portal-login label,
#formulario-portal-otp label,
#formulario-portal-codigo label {
    display: grid;
    gap: var(--espacio-2);
    min-width: 0;
    font-size: var(--texto-label);
    font-weight: 760;
}

#formulario-portal-login input,
#formulario-portal-otp input,
#formulario-portal-codigo input {
    width: 100%;
    min-width: 0;
    min-height: var(--altura-control);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-control);
    background: var(--dashboard-superficie-suave);
    padding: 0 var(--espacio-3);
    color: var(--texto);
}

#codigo-otp {
    letter-spacing: 0.28em;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

@media (max-width: 430px) {
    .tarjeta-login {
        padding: var(--espacio-5) var(--espacio-4);
    }
}