/* =============================================================================
 * AULAFIT - Pantalla de acceso (login)
 * -----------------------------------------------------------------------------
 * Estilos de la vista login/index.php. Se escriben mobile-first: primero el
 * layout de celular (una columna, controles cómodos al tacto) y luego se agrega
 * complejidad hacia arriba con media queries de los breakpoints de Bootstrap 5.
 *
 * Estos estilos vivían inline en la vista; se movieron aquí para que la vista
 * quede solo con marcado y para poder cachearlos/versionarlos como el resto de
 * los assets.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * Fondo de la pantalla
 * estilos.css pinta el body con background.jpg y background-size:cover, pero sin
 * fijar repeat/position: en celulares altos el body es más corto que la pantalla
 * y la imagen se repetía dejando una costura visible a media pantalla. Se fija
 * aquí (y no en estilos.css) porque este archivo solo se carga en el login.
 * -------------------------------------------------------------------------- */
body {
    min-height: 100vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

/* -----------------------------------------------------------------------------
 * Contenedor de la tarjeta de acceso
 * En celular NO se fuerza alto mínimo: al abrir el teclado virtual el viewport
 * se achica y un min-height alto empujaría el formulario fuera de pantalla.
 * Desde tablet en adelante sí se centra verticalmente, que es como se veía
 * originalmente en escritorio.
 * -------------------------------------------------------------------------- */
.login-content {
    margin: 1.5rem auto 2rem;
}

/* -----------------------------------------------------------------------------
 * Logo adaptativo por dispositivo
 * El logo vertical (aulafit_vertical_800.png) escala proporcionalmente según el
 * ancho del dispositivo (celular, tablet, notebook, PC y pantalla grande) y en
 * pantallas de poca altura (landscape móvil).
 * -------------------------------------------------------------------------- */
.login-logo {
    width: 120px;
    max-width: 45%;
    height: auto;
    opacity: 0.95;
    transition: width 0.2s ease-in-out;
}

/* -----------------------------------------------------------------------------
 * Celular (< 576px)
 * Área de toque de ~44px en campos y botones, y font-size de 16px para evitar
 * que iOS Safari haga zoom automático al enfocar un input.
 * -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .login-logo {
        width: 110px;
        max-width: 40%;
    }

    .login-card .form-control,
    .login-card .form-select,
    .login-card .input-group-text,
    .login-card .btn {
        min-height: 44px;
        font-size: 1rem;
    }

    /* El padding p-4 (1.5rem) aprieta mucho en pantallas de 320-360px. */
    .login-card .card-body {
        padding: 1.25rem;
    }
}

/* -----------------------------------------------------------------------------
 * Tablet (576px – 991px)
 * Se recupera el centrado vertical de la tarjeta en la pantalla y se adapta el logo.
 * -------------------------------------------------------------------------- */
@media (min-width: 576px) {
    .login-content {
        min-height: 80vh;
        margin: 3rem auto 4rem;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .login-logo {
        width: 150px;
    }
}

/* -----------------------------------------------------------------------------
 * Notebook (992px – 1199px)
 * -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .login-logo {
        width: 175px;
    }
}

/* -----------------------------------------------------------------------------
 * PC / Desktop (1200px – 1399px)
 * -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .login-logo {
        width: 195px;
    }
}

/* -----------------------------------------------------------------------------
 * Pantallas grandes (>= 1400px)
 * En monitores muy anchos la tarjeta y el logo aumentan suavemente para
 * mantener la jerarquía visual.
 * -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
    .login-logo {
        width: 220px;
    }

    .login-card {
        min-width: 380px;
    }
}

/* -----------------------------------------------------------------------------
 * Viewport bajo (celular en horizontal, o ventana muy achatada <= 550px)
 * Va DESPUÉS del bloque de >=576px para poder anular su min-height: con 80vh y
 * el logo grande la tarjeta quedaba bajo el pliegue y obligaba a desplazarse.
 * -------------------------------------------------------------------------- */
@media (max-height: 550px) {
    .login-content {
        min-height: auto;
        margin: 1rem auto 1.5rem;
    }

    .login-logo {
        width: 75px;
    }
}

/* -----------------------------------------------------------------------------
 * Alerta de entorno de desarrollo
 * -------------------------------------------------------------------------- */
.login-dev-alert {
    background-color: #fff3cd;
    border-bottom: 2px solid #ffecb5 !important;
    font-size: 0.9rem;
    line-height: 1.4;
}

.login-dev-alert strong {
    color: #664d03;
}

.login-dev-alert .btn-warning {
    background-color: #ffc107;
    border-color: #ffb700;
    transition: all 0.2s ease-in-out;
}

.login-dev-alert .btn-warning:hover,
.login-dev-alert .btn-warning:focus {
    background-color: #ffca2c;
    border-color: #ffc720;
    transform: translateY(-1px);
}