/* Parte 3 de 3 de login.css (tarea 4.6, 03/10/2026): responsive y
   accesibilidad (foco visible, movimiento reducido y alto contraste). Se
   carga después de login-formulario.css; las partes y su orden viven en
   AssetHelper::HOJAS_PARTIDAS. */

/* === RESPONSIVE - Tablet === */
@media (max-width: 768px) {
    body {
        padding: 0.75rem;
    }

    .login-box {
        padding: 2rem;
        border-radius: 16px;
    }

    .login-logo {
        width: 190px;
    }

    .login-title {
        font-size: 1.35rem;
    }
}

/* === RESPONSIVE - Móvil === */
@media (max-width: 480px) {
    body {
        padding: 0.5rem;
        background-attachment: scroll;
    }

    .login-box {
        padding: 1.5rem;
        border-radius: 14px;
        max-width: 100%;
    }

    .login-box:hover {
        transform: none;
    }

    .login-logo {
        width: 165px;
        margin-bottom: 0.75rem;
    }

    .login-title {
        font-size: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .login-box .form-label {
        font-size: 0.85rem;
    }

    .login-box .form-control {
        font-size: 16px;
        padding: 0.75rem 0.9rem;
        height: 48px;
    }

    .toggle-password {
        width: 48px;
        height: 48px;
    }

    .btn-login {
        font-size: 1rem;
        height: 50px;
    }

    .btn-login:hover {
        transform: none;
    }

    .security-indicator {
        font-size: 0.75rem;
        padding: 0.6rem 0.8rem;
    }

    .field-hint {
        font-size: 0.7rem;
        padding: 0.3rem 0.5rem;
    }

}

/* === RESPONSIVE - Móviles pequeños === */
@media (max-width: 360px) {
    .login-box {
        padding: 1.25rem;
    }

    .login-logo {
        width: 140px;
    }

    .login-title {
        font-size: 1.15rem;
    }

}

/* === Modo landscape en móvil === */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        align-items: flex-start;
        padding-top: 0.5rem;
    }

    .login-box {
        padding: 1rem 1.5rem;
    }

    .login-logo {
        width: 110px;
        margin-bottom: 0.5rem;
        animation: none;
    }

    .login-title {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    /* Load-bearing: `.mb-3` de Bootstrap es `!important` y tiene la misma
       especificidad. Medido a 900x460: sin la bandera el margen se queda en
       14px (1rem de Bootstrap) en vez de los 7px que pide esta media query,
       o sea la regla queda inerte. */
    .mb-3 {
        margin-bottom: 0.5rem !important;
    }

    .security-indicator {
        margin-top: 0.75rem;
        padding: 0.4rem 0.6rem;
    }

    .field-hint {
        display: none;
    }

}

/* === Focus visible para accesibilidad === */
.login-box *:focus-visible {
    outline: 3px solid var(--login-azul);
    outline-offset: 2px;
}

/* === Preferencia de movimiento reducido ===

   Load-bearing las tres. El selector universal tiene especificidad (0,0,0) y
   pierde ante cualquier regla con clase; las animaciones y transiciones del
   aviso, la casilla y el fondo usan selectores de mayor especificidad.
   Es el patron canonico de accesibilidad y no debe tocarse. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .login-logo {
        animation: none;
    }

    body::before {
        animation: none;
    }

}

/* === Alto contraste === */
@media (prefers-contrast: high) {
    .login-box {
        border: 3px solid #000;
        background: var(--surface);
    }

    .login-box .form-control {
        border-width: 3px;
    }

    .btn-login {
        border: 3px solid #000;
    }

    .login-title {
        -webkit-text-fill-color: var(--login-azul);
    }

}