/* Pantalla de login — "Pizarra". A diferencia del resto del sitio, esta
   pantalla NO sigue los 10 temas elegibles (el selector de tema ni
   siquiera se muestra sin sesión iniciada, ver base.html): es una
   identidad fija, la sala de profesores anotando un problema en la
   pizarra. Por eso reescribe el mismo set de variables que usa toda la
   página (--fondo, --tinta, --nav-fondo...) en vez de vivir dentro de
   estilos.css — así el fondo, el nav y el botón de Google quedan
   coherentes sin duplicar cada selector, y la pizarra cubre la pantalla
   completa, no solo una tarjeta suelta encima. */

@font-face {
    font-family: 'Tiza';
    src: url('../fonts/NothingYouCouldDo-Regular.ttf');
    font-weight: 400;
    font-display: swap;
}

body.pagina-login {
    --fondo: #1D2621;
    --fondo-imagen:
        radial-gradient(ellipse at 12% 8%, rgba(255,255,255,.05), transparent 45%),
        radial-gradient(ellipse at 88% 94%, rgba(255,255,255,.045), transparent 50%),
        radial-gradient(ellipse at 60% 50%, rgba(255,255,255,.025), transparent 60%);
    --superficie: #263229;
    --tinta: #ECEFE8;
    --tinta-suave: #A7B3A9;
    --linea: rgba(236,239,232,.18);
    --acento: #E8D9A0;
    --acento-texto: #24312A;
    --radio: 10px;
    --radio-boton: 6px;
    --sombra: 0 12px 30px rgba(0,0,0,.35);
    --nav-fondo: #1D2621; --nav-imagen: none;
    --nav-texto: #ECEFE8; --nav-texto-suave: #93A096; --nav-borde: rgba(236,239,232,.14);
    --vidrio-blur: 0px;
}

.login-pizarra {
    position: relative;
    max-width: 30rem;
    min-height: min(58vh, 460px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-pizarra h1 {
    position: relative; z-index: 1;
    font-family: 'Tiza', cursive;
    font-weight: 400;
    font-size: clamp(2.4rem, 6vw, 3.2rem);
    line-height: 1.15;
    margin: 0 0 0.3rem;
    color: var(--tinta);
}

.login-subrayado { position: relative; z-index: 1; display: block; margin: 0 0 1.3rem; }
.login-subrayado path { stroke: var(--acento); stroke-width: 3; stroke-linecap: round; fill: none; }

.login-ejemplos {
    position: relative; z-index: 1; list-style: none;
    max-width: 32ch; color: var(--tinta-suave); font-size: 1rem; line-height: 1.7;
    margin: 0 0 0.6rem; padding: 0;
}
.login-ejemplos li { display: flex; align-items: baseline; gap: 0.5rem; }
.login-cta { position: relative; z-index: 1; color: var(--tinta); font-weight: 600; font-size: 1rem; margin: 0 0 1.4rem; }
.login-pizarra p { max-width: none; }

.login-mota { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--tinta-suave); opacity: 0; }
.login-mota.m1 { left: -2%; top: 10%; }
.login-mota.m2 { left: 92%; top: 55%; }
.login-mota.m3 { left: 60%; bottom: -4%; }
.login-mota.m4 { left: 22%; bottom: 8%; }
@media (prefers-reduced-motion: no-preference) {
    .login-mota { animation: loginMota 4s ease-in infinite; }
    .login-mota.m2 { animation-delay: 1s; }
    .login-mota.m3 { animation-delay: 2.1s; }
    .login-mota.m4 { animation-delay: 2.8s; }
}
@keyframes loginMota { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .6; } 100% { opacity: 0; transform: translateY(-70px); } }

.boton-google {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 0.65rem;
    background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea);
    padding: 0.7rem 1.4rem; font-weight: 700; font-size: 0.98rem;
    border-radius: var(--radio-boton); text-decoration: none; margin-top: 0.75rem;
    box-shadow: var(--sombra); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    width: fit-content;
}
.boton-google:hover { transform: translateY(-1px); border-color: var(--acento); color: var(--tinta); filter: none; }
.icono-google { flex-shrink: 0; }

@media (max-width: 480px) {
    .login-pizarra { min-height: 0; padding-top: 2rem; }
}