/*
 * TAXCOM v4 — pantalla de acceso (R4).
 *
 * Hoja exclusiva del login: la carga únicamente el layout
 * resources/views/components/layouts/acceso.blade.php y ninguna otra pantalla
 * la pide. Aun así, todo cuelga de `.acceso` —la clase que ese layout pone en
 * el <body>— o de clases propias con el prefijo `acceso-`, de modo que si la
 * hoja llegara a quedarse en memoria tras una navegación SPA de Livewire no
 * pinta absolutamente nada fuera de esta pantalla.
 *
 * No se toca ningún estilo global de Bootstrap: lo que se afina de `.card`,
 * `.form-control` o `.btn` va siempre detrás de `.acceso-tarjeta`.
 *
 * El proyecto no compila CSS —no hay Vite ni package.json—, así que esto es
 * CSS plano servido desde public/.
 */

/* --------------------------------------------------------------- Estructura */

/*
 * El fondo se pinta en el propio <body> y no en un elemento aparte encima:
 * una capa posicionada por delante del contenido es una capa de composición
 * más, y el navegador puede acabar dibujándola sobre la tarjeta en vez de
 * detrás. Tampoco se usa `background-attachment: fixed`, que iOS no mueve con
 * el desplazamiento y deja la imagen descuadrada.
 *
 * Son tres capas, de arriba abajo:
 *
 *   1. el velo, que es lo que garantiza que el formulario se lea sobre
 *      cualquier fotografía;
 *   2. la imagen, que llega como variable --acceso-imagen desde el layout;
 *   3. un degradado con los colores de la marca, que es lo que se ve si la
 *      imagen falta o no carga. El color de fondo cubre incluso eso.
 */
.acceso {
    min-height: 100vh;
    /* dvh descuenta la barra del navegador móvil; vh queda de respaldo. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: #0f172a;
    background-image:
        linear-gradient(
            180deg,
            rgba(15, 23, 42, .74) 0%,
            rgba(15, 23, 42, .56) 45%,
            rgba(23, 10, 56, .80) 100%
        ),
        var(--acceso-imagen, none),
        linear-gradient(135deg, #1d4ed8 0%, #4c1d95 100%);
    background-position: center center;
    background-repeat: no-repeat;
    /* Recorta proporcionalmente en vez de deformar. */
    background-size: cover;
    color: #0f172a;
}

/*
 * `justify-content: center` recorta el contenido más alto que la pantalla
 * (no deja desplazarse hacia arriba). Con `margin: auto` en el hijo se centra
 * igual y, cuando no cabe, la página simplemente se desplaza.
 */
.acceso-centro {
    flex: 1 1 auto;
    display: flex;
    padding: 2rem 1rem;
    /* Hueco para la barra inferior de los teléfonos con pantalla completa. */
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

.acceso-caja {
    margin: auto;
    width: 100%;
    max-width: 27rem;
}

/* ------------------------------------------------------------------ Tarjeta */

.acceso-tarjeta {
    background-color: rgba(255, 255, 255, .97);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 1.25rem;
    box-shadow: 0 1.5rem 3rem rgba(2, 6, 23, .38);
    padding: 2rem 1.75rem;
    animation: acceso-entra .28s ease-out both;
}

.acceso-marca {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.acceso-marca .marca-logo {
    width: 46px;
    height: 46px;
    font-size: .88rem;
    border-radius: .8rem;
}

.acceso-marca-nombre {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    color: #0f172a;
}

.acceso-marca-plantel {
    font-size: .78rem;
    line-height: 1.25;
    color: #64748b;
}

.acceso-titulo {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #0f172a;
    margin-bottom: .35rem;
}

.acceso-ayuda {
    font-size: .9rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------- Campos */

.acceso-tarjeta .form-label {
    font-size: .84rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: .35rem;
}

.acceso-tarjeta .form-control {
    min-height: 3rem;
    padding: .7rem .9rem;
    border-radius: .75rem;
    border-color: #dbe0e8;
    background-color: #fbfcfe;
    color: #0f172a;
    /* 16px o más: por debajo, iOS hace zoom al enfocar el campo. */
    font-size: 1rem;
    box-shadow: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
    /* Para que el navegador no pegue el campo al borde al desplazarlo a la vista. */
    scroll-margin-block: 1.5rem;
}

.acceso-tarjeta .form-control:hover {
    border-color: #c7cedb;
}

.acceso-tarjeta .form-control:focus {
    border-color: #0d6efd;
    background-color: #fff;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .18);
}

.acceso-tarjeta .form-control.is-invalid {
    border-color: #dc3545;
    background-color: #fff;
}

.acceso-tarjeta .form-control.is-invalid:focus {
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .18);
}

.acceso-tarjeta .form-text {
    font-size: .8rem;
    color: #64748b;
}

.acceso-error {
    font-size: .82rem;
    font-weight: 500;
    color: #b02a37;
    margin-top: .4rem;
}

.acceso-tarjeta .codigo-otp {
    font-weight: 600;
}

/* ------------------------------------------------------------------ Botones */

.acceso-tarjeta .btn {
    min-height: 3rem;
    border-radius: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .7rem 1.1rem;
    transition: transform .12s ease-out, box-shadow .15s ease-in-out, filter .15s ease-in-out;
}

.acceso-tarjeta .btn-primary {
    border: 0;
    background-image: linear-gradient(135deg, #0d6efd 0%, #7c3aed 100%);
    box-shadow: 0 .5rem 1rem rgba(13, 110, 253, .24);
}

.acceso-tarjeta .btn-primary:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: 0 .65rem 1.25rem rgba(13, 110, 253, .3);
}

.acceso-tarjeta .btn-primary:active:not(:disabled) {
    transform: translateY(1px);
}

.acceso-tarjeta .btn-primary:disabled {
    background-image: linear-gradient(135deg, #0d6efd 0%, #7c3aed 100%);
    box-shadow: none;
    opacity: .72;
}

.acceso-tarjeta .btn-outline-secondary {
    border-color: #cbd5e1;
    color: #475569;
}

.acceso-tarjeta .btn-outline-secondary:hover {
    background-color: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.acceso-tarjeta .btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .3);
}

/* ------------------------------------------------------------------ Enlaces */

.acceso-enlaces {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(15, 23, 42, .08);
    text-align: center;
    font-size: .86rem;
    color: #64748b;
}

.acceso-enlaces p {
    margin-bottom: 0;
}

.acceso-enlaces p + p {
    margin-top: .5rem;
}

.acceso-enlaces a {
    color: #0d6efd;
    font-weight: 600;
    text-decoration: none;
}

.acceso-enlaces a:hover,
.acceso-enlaces a:focus {
    text-decoration: underline;
}

/* ------------------------------------------------------- Avisos y pie */

.acceso-aviso {
    border: 0;
    border-radius: .9rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    box-shadow: 0 .75rem 1.5rem rgba(2, 6, 23, .25);
}

.acceso-pie {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .78rem;
    color: rgba(255, 255, 255, .78);
    text-shadow: 0 1px 2px rgba(2, 6, 23, .5);
}

.acceso-pie span {
    display: block;
}

/* ------------------------------------------------------------- Adaptaciones */

@media (max-width: 575.98px) {
    .acceso-centro {
        padding: 1.25rem .9rem;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }

    .acceso-tarjeta {
        padding: 1.5rem 1.25rem;
        border-radius: 1rem;
    }

    .acceso-titulo {
        font-size: 1.3rem;
    }
}

/* Pantallas de poca altura: en lugar de centrar, se trabaja desde arriba. */
@media (max-height: 640px) {
    .acceso-centro {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .acceso-caja {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@keyframes acceso-entra {
    from {
        opacity: 0;
        transform: translateY(.75rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .acceso-tarjeta {
        animation: none;
    }

    .acceso-tarjeta .btn,
    .acceso-tarjeta .form-control {
        transition: none;
    }
}