/* ─────────────────────────────────────────────────────────────────────────────
   Pantallas de acceso: iniciar sesión, pedir el enlace y poner la contraseña.

   Son páginas sueltas, fuera del layout de la aplicación, así que se plantan
   ellas solas. Estos estilos estaban escritos dentro de login.blade.php; al
   aparecer las dos pantallas de contraseña se sacaron aquí para no tener la
   misma tarjeta copiada tres veces.
   ──────────────────────────────────────────────────────────────────────────── */

body {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: var(--e-5);
    background: var(--c-50);
    position: relative;
    overflow-x: hidden;
}

/* Dos halos del color de la marca, sacados del propio logo: el ajo lavanda
   arriba a la izquierda, la cebolla melocotón abajo a la derecha. Rompe el
   blanco plano sin meter un degradado de 45°. */
body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}
body::before {
    width: 30rem; height: 30rem;
    top: -12rem; left: -10rem;
    background: var(--a-200);
    opacity: .55;
}
body::after {
    width: 26rem; height: 26rem;
    bottom: -11rem; right: -8rem;
    background: var(--c-200);
    opacity: .6;
}

.acceso {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 25rem;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-xl);
    padding: var(--e-10) var(--e-8) var(--e-8);
    box-shadow: var(--s-lg);
    text-align: center;
    animation: subir var(--t-lento) var(--curva-salida) both;
}

.acceso-logo {
    display: block;
    width: 15rem;
    max-width: 100%;
    height: auto;
    margin: 0 auto var(--e-6);
}

.acceso-titulo {
    font-size: var(--txt-xl);
    font-weight: var(--peso-semi);
    color: var(--texto);
    margin-bottom: var(--e-2);
}

.acceso-sub {
    font-size: var(--txt-sm);
    color: var(--texto-tenue);
    margin-bottom: var(--e-8);
    text-wrap: balance;
    line-height: var(--alto-normal);
}

/* ── Avisos ─────────────────────────────────────────────────────────────── */

.acceso-error,
.acceso-aviso {
    display: flex; align-items: flex-start; gap: var(--e-2);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-md);
    margin-bottom: var(--e-5);
    font-size: var(--txt-sm);
    text-align: left;
    line-height: var(--alto-normal);
}
.acceso-error {
    background: var(--er-50);
    border: 1px solid var(--er-200);
    color: var(--er-800);
}
.acceso-aviso {
    background: var(--ok-50);
    border: 1px solid var(--ok-200);
    color: var(--ok-800);
}
.acceso-error .ico,
.acceso-aviso .ico { flex: none; margin-top: 1px; }

/* ── Formulario ─────────────────────────────────────────────────────────── */

.acceso-form { text-align: left; }
.acceso-form .campo:last-of-type { margin-bottom: var(--e-6); }

.acceso-btn {
    width: 100%;
    padding-block: var(--e-3);
    font-size: var(--txt-md);
    border-radius: var(--r-md);
}

.btn-google {
    width: 100%;
    gap: var(--e-3);
    padding-block: var(--e-3);
    font-size: var(--txt-md);
    border-radius: var(--r-md);
}
.btn-google:hover { box-shadow: var(--s-md); }

/* Requisitos de la contraseña. Se enseñan antes de escribir, no después de
   fallar: nadie adivina que hacen falta doce caracteres y un símbolo. */
.acceso-requisitos {
    margin-top: calc(var(--e-1) * -1);
    margin-bottom: var(--e-6);
    padding: var(--e-3) var(--e-4);
    background: var(--n-50);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    font-size: var(--txt-xs);
    color: var(--texto-tenue);
    line-height: var(--alto-suelto);
    text-align: left;
}
.acceso-requisitos strong {
    display: block;
    margin-bottom: var(--e-1);
    color: var(--n-700);
    font-weight: var(--peso-semi);
}
.acceso-requisitos ul { margin: 0; padding-left: var(--e-4); }

/* ── Separador y pie ────────────────────────────────────────────────────── */

.acceso-nota,
.acceso-separador {
    margin-top: var(--e-6);
    font-size: var(--txt-xs);
    color: var(--texto-tenue);
    display: flex; align-items: center; gap: var(--e-3);
}
.acceso-nota::before, .acceso-nota::after,
.acceso-separador::before, .acceso-separador::after {
    content: ''; flex: 1; height: 1px; background: var(--borde);
}
.acceso-separador { margin-block: var(--e-6); }

.acceso-pie {
    margin-top: var(--e-6);
    font-size: var(--txt-sm);
}

.acceso-olvide {
    display: block;
    margin-top: calc(var(--e-2) * -1);
    margin-bottom: var(--e-6);
    font-size: var(--txt-xs);
    text-align: right;
}

@media (max-width: 30rem) {
    .acceso { padding: var(--e-8) var(--e-5) var(--e-6); border-radius: var(--r-lg); }
}