/* Responsive y accesibilidad del acceso administrativo. */
body { min-height: 100vh; min-height: 100svh; overflow-x: hidden; }
:is(a, button, input):focus-visible { outline: 3px solid rgba(37, 99, 235, .28); outline-offset: 3px; }
.login-card, .login-card form { min-width: 0; }
.alert { overflow-wrap: anywhere; }

@media (max-width: 480px) {
    .login-aside { min-height: 160px; padding: 22px 18px; }
    .aside-copy { margin: 22px 0 0; }
    .aside-copy h1 { font-size: clamp(27px, 8.5vw, 31px); }
    .login-panel { align-items: start; padding: 32px 16px; }
    .login-card h2 { font-size: 25px; }
    .login-card__heading { margin-bottom: 22px; }
    .login-card input { font-size: 16px; }
    .back-link { min-height: 44px; display: grid; place-items: center; margin-top: 15px; }
}

@media (max-width: 360px) {
    .login-aside { min-height: 145px; }
    .brand-mark { width: 39px; height: 39px; }
    .aside-copy { margin-top: 18px; }
    .aside-copy h1 { font-size: 26px; }
    .login-panel { padding: 26px 12px; }
    .lock { width: 48px; height: 48px; margin-bottom: 14px; }
    .login-card h2 { font-size: 23px; }
}

@media (max-height: 650px) and (min-width: 801px) {
    .login-aside { padding-block: 28px; }
    .aside-copy h1 { font-size: clamp(34px, 4vw, 50px); margin-block: 14px; }
    .login-panel { padding-block: 22px; }
    .login-card__heading { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}