/* =====================================================
   Akcadmia — css/componentes/acceso.css
   Diseño compartido de las páginas de acceso, registro e inicio de sesión: lienzo,
   tarjeta partida, panel de bienvenida con sus dos temas, insignia, mensaje,
   beneficios, ilustración, formulario y botón principal.

   Cada página lo carga desde su @section Estilos y deja en su propio .cshtml.css
   solo lo que tiene ella: el registro, los dos mensajes por perfil, el selector, la
   barra de avance y los requisitos de la contraseña; el inicio de sesión, su ancho
   y su ilustración. Es global y no aislado justamente para eso: las dos vistas usan
   las mismas reglas sin copiarlas.
   ===================================================== */

/* === Lienzo de la página ===
   Dos halos de la paleta sobre el fondo del tema para que la tarjeta no flote sobre
   un gris plano. Son capas de background-image del propio contenedor y no
   elementos sueltos: no añaden marcado ni pueden desbordar en móvil. En oscuro
   solo cambia la intensidad. */
.edu-acceso {
    --edu-acceso-halo-indigo: rgba(79, 70, 229, .13);
    --edu-acceso-halo-lima: rgba(132, 204, 22, .14);
    background-image: radial-gradient(46rem 30rem at 0% 0%, var(--edu-acceso-halo-indigo), transparent 70%), radial-gradient(40rem 28rem at 100% 100%, var(--edu-acceso-halo-lima), transparent 70%);
}

[data-tema="oscuro"] .edu-acceso {
    --edu-acceso-halo-indigo: rgba(99, 102, 241, .22);
    --edu-acceso-halo-lima: rgba(163, 230, 53, .07);
}

/* === Tarjeta ===
   Entra subiendo al cargar. La sombra lleva el índigo de la marca en claro; en
   oscuro una sombra de color no se ve, así que pasa a negra y más densa. */
.edu-acceso__tarjeta {
    max-width: 72rem;
    margin-inline: auto;
    box-shadow: 0 1.5rem 3.5rem rgba(49, 46, 129, .16);
    animation: edu-acceso-entrada .6s cubic-bezier(.2, .7, .2, 1) backwards;
}

[data-tema="oscuro"] .edu-acceso__tarjeta {
    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .55);
}

/* === Panel de bienvenida ===
   Sigue al tema, como el resto de la página: en claro es un degradado de lavanda,
   de la familia de --edu-claro, con el texto en índigo oscuro; en oscuro, el índigo
   profundo de la marca con el texto en blanco. Lleva una trama de puntos muy tenue
   para darle textura.

   Los tonos de cada pieza del panel —texto, insignia, iconos, destello, manchas y
   halo— salen de las variables --edu-acceso-panel-*, que el bloque del tema oscuro
   voltea: así ninguna regla de más abajo necesita su contraparte oscura. Los
   degradados van con colores fijos porque la paleta no tiene ninguno para estos
   fondos: --edu-oscuro y --edu-primario cambian de significado en el tema oscuro
   (gris pizarra e índigo luminoso) y no sirven de fondo bajo texto blanco. */
.edu-acceso__panel {
    --edu-acceso-panel-texto: var(--edu-oscuro);
    --edu-acceso-panel-cuerpo: var(--edu-texto);
    --edu-acceso-panel-resalte: var(--edu-primario);
    --edu-acceso-panel-subrayado: linear-gradient(transparent 62%, rgba(163, 230, 53, .6) 62%);
    --edu-acceso-panel-insignia: var(--edu-primario);
    --edu-acceso-panel-chispa: var(--edu-acento-texto);
    --edu-acceso-panel-icono: var(--edu-primario);
    --edu-acceso-panel-superficie: #FFFFFF;
    --edu-acceso-panel-borde-insignia: rgba(79, 70, 229, .18);
    --edu-acceso-panel-borde-icono: rgba(79, 70, 229, .14);
    --edu-acceso-panel-destello: rgba(79, 70, 229, .14);
    --edu-acceso-panel-halo: rgba(255, 255, 255, .75);
    --edu-acceso-panel-mezcla: normal;
    --edu-acceso-panel-mancha-1: rgba(165, 180, 252, .4);
    --edu-acceso-panel-mancha-2: rgba(163, 230, 53, .22);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.6rem 1.25rem 1.75rem;
    color: var(--edu-acceso-panel-texto);
    background-color: #EDEBFD;
    background-image: radial-gradient(rgba(79, 70, 229, .09) 1px, transparent 1.5px), linear-gradient(150deg, #E3E1FC 0%, #EDEBFD 45%, #F7F7FF 100%);
    background-size: 1.375rem 1.375rem, auto;
}

[data-tema="oscuro"] .edu-acceso__panel {
    --edu-acceso-panel-texto: #FFFFFF;
    --edu-acceso-panel-cuerpo: #E0E7FF;
    --edu-acceso-panel-resalte: #A3E635;
    --edu-acceso-panel-subrayado: none;
    --edu-acceso-panel-insignia: #FFFFFF;
    --edu-acceso-panel-chispa: #A3E635;
    --edu-acceso-panel-icono: #A3E635;
    --edu-acceso-panel-superficie: rgba(255, 255, 255, .12);
    --edu-acceso-panel-borde-insignia: rgba(255, 255, 255, .24);
    --edu-acceso-panel-borde-icono: rgba(255, 255, 255, .18);
    --edu-acceso-panel-destello: rgba(255, 255, 255, .38);
    --edu-acceso-panel-halo: rgba(255, 255, 255, .16);
    --edu-acceso-panel-mezcla: screen;
    --edu-acceso-panel-mancha-1: rgba(237, 235, 253, .24);
    --edu-acceso-panel-mancha-2: rgba(129, 140, 248, .5);
    background-color: #312E81;
    background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px), linear-gradient(150deg, #1E1B4B 0%, #312E81 60%, #3730A3 100%);
}

/* Dos manchas de luz que derivan despacio por detrás del texto. Solo se anima
   transform, que el navegador compone sin recalcular la página. Quedan en la capa
   -1 del contexto que abre isolation, entre el degradado y el texto.

   En oscuro se funden en modo screen, que solo aclara: con la mezcla normal, un
   color que no sea de la familia del índigo se ensucia hacia el gris al caer sobre
   el índigo profundo, y por eso allí las dos son tonos de la paleta (el lavanda
   claro y el índigo luminoso). Sobre la lavanda del tema claro screen no se vería;
   ahí van con mezcla normal, una índigo y otra lima. */
.edu-acceso__panel::before,
.edu-acceso__panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    mix-blend-mode: var(--edu-acceso-panel-mezcla);
    pointer-events: none;
}

.edu-acceso__panel::before {
    top: -9rem;
    right: -9rem;
    width: 22rem;
    height: 22rem;
    background: radial-gradient(circle, var(--edu-acceso-panel-mancha-1), transparent 68%);
    animation: edu-acceso-deriva 16s ease-in-out infinite alternate;
}

.edu-acceso__panel::after {
    bottom: -11rem;
    left: -10rem;
    width: 28rem;
    height: 28rem;
    background: radial-gradient(circle, var(--edu-acceso-panel-mancha-2), transparent 68%);
    animation: edu-acceso-deriva 20s ease-in-out -7s infinite alternate-reverse;
}

/* Insignia: la etiqueta corta que abre el panel ("Registro gratis", "Hola de
   nuevo") y lo primero que se lee. El destello la cruza cada pocos segundos para
   que el ojo vuelva a ella sin que nada parpadee. */
.edu-acceso__insignia {
    position: relative;
    overflow: hidden;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem;
    border: 1px solid var(--edu-acceso-panel-borde-insignia);
    border-radius: 999px;
    background-color: var(--edu-acceso-panel-superficie);
    color: var(--edu-acceso-panel-insignia);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    animation: edu-acceso-aparece .6s cubic-bezier(.2, .7, .2, 1) .15s backwards;
}

    .edu-acceso__insignia .bi {
        color: var(--edu-acceso-panel-chispa);
    }

    .edu-acceso__insignia::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, transparent 30%, var(--edu-acceso-panel-destello) 50%, transparent 70%);
        transform: translateX(-120%);
        animation: edu-acceso-destello 5s ease-in-out 1.5s infinite;
        pointer-events: none;
    }

/* === Mensaje del panel ===
   Título, bajada y beneficios. Cómo y cuándo entra cada pieza lo decide cada
   página —el registro la vuelve a animar al cambiar de perfil—; aquí solo queda el
   retraso de cada una, en --edu-acceso-retraso, para que entren escalonadas con la
   misma cadencia en todas. */
.edu-acceso__titulo {
    margin: 0 0 .5rem;
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance;
}

/* En claro el resalte va en el índigo de marca sobre una franja lima, como pasado
   con rotulador: el lima como color de letra no llega al contraste sobre la
   lavanda. En oscuro es el lima luminoso, sin franja. clone repite la franja en
   cada línea cuando el resalte se parte en dos. */
.edu-acceso__resalte {
    color: var(--edu-acceso-panel-resalte);
    background-image: var(--edu-acceso-panel-subrayado);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.edu-acceso__bajada {
    --edu-acceso-retraso: .08s;
    margin: 0;
    color: var(--edu-acceso-panel-cuerpo);
}

/* En móvil los beneficios se esconden: el título y la bajada ya dicen lo esencial y
   así el formulario queda a la vista sin desplazar. Vuelven desde 576 px. */
.edu-acceso__beneficios {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.edu-acceso__beneficio {
    --edu-acceso-retraso: .18s;
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: .95rem;
    line-height: 1.45;
    color: var(--edu-acceso-panel-cuerpo);
}

    .edu-acceso__beneficio:nth-child(2) {
        --edu-acceso-retraso: .28s;
    }

    .edu-acceso__beneficio:nth-child(3) {
        --edu-acceso-retraso: .38s;
    }

.edu-acceso__beneficio-icono {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--edu-acceso-panel-borde-icono);
    border-radius: .75rem;
    background-color: var(--edu-acceso-panel-superficie);
    font-size: 1.05rem;
    color: var(--edu-acceso-panel-icono);
    transition: background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1);
}

@media (hover: hover) {
    .edu-acceso__beneficio:hover .edu-acceso__beneficio-icono {
        background-color: var(--edu-acento);
        color: var(--edu-acento-contraste);
        transform: rotate(-8deg) scale(1.08);
    }
}

/* La ilustración solo existe en pantalla ancha (ver el bloque de 992 px). */
.edu-acceso__ilustracion {
    display: none;
}

/* Mientras el panel es franja de cabecera, el texto lo ocupa casi entero y
   cualquiera de las dos manchas, al derivar, acaba detrás de la bajada o de los
   beneficios; sobre el índigo del tema oscuro los deja por debajo del contraste
   mínimo. Ahí la franja se queda con el degradado y la trama, en los dos temas; las
   manchas vuelven en pantalla ancha, donde el panel es alto y derivan por zonas sin
   texto. */
@media (max-width: 991.98px) {
    .edu-acceso__panel::before,
    .edu-acceso__panel::after {
        display: none;
    }
}

/* === Formulario === */
.edu-acceso__formulario {
    padding: 1.5rem 1rem 1.75rem;
}

.edu-acceso__encabezado {
    margin-bottom: 1.25rem;
}

.edu-acceso__encabezado-titulo {
    margin: 0 0 .25rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.edu-acceso__encabezado-texto {
    margin: 0;
    color: var(--edu-texto-suave);
}

/* === Botón principal ===
   El lima de acción del proyecto (edu-boton-acento), con un brillo que lo cruza
   cada pocos segundos y la flecha que se adelanta al pasar el cursor. Los estados
   pulsado, deshabilitado y de foco de teclado los pone edu-boton-acento, en
   sitio.css. */
.edu-acceso__enviar {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    text-wrap: balance;
}

    .edu-acceso__enviar .bi {
        transition: transform .25s ease;
    }

    .edu-acceso__enviar::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%);
        transform: translateX(-110%);
        animation: edu-acceso-destello 5s ease-in-out 2.5s infinite;
        pointer-events: none;
    }

@media (hover: hover) {
    .edu-acceso__enviar:hover .bi {
        transform: translateX(.3rem);
    }
}

.edu-acceso__nota {
    margin: .6rem 0 0;
    font-size: .8rem;
    text-align: center;
    color: var(--edu-texto-suave);
}

/* En móvil el texto del botón va un punto más pequeño, lo justo para que el más
   largo, "Crear mi cuenta de profesor", quepa en una línea desde 360 px. Se cambia
   la variable que lee .btn y no font-size, para seguir dentro del sistema de
   tamaños de Bootstrap. */
@media (max-width: 575.98px) {
    .edu-acceso__enviar {
        --bs-btn-font-size: 1.0625rem;
    }
}

/* === Desde 576 px ===
   Vuelven los beneficios y los márgenes del formulario crecen. */
@media (min-width: 576px) {
    .edu-acceso__panel {
        padding: 2rem;
    }

    .edu-acceso__beneficios {
        display: grid;
        gap: .75rem;
        margin-top: 1.25rem;
    }

    .edu-acceso__formulario {
        padding: 2rem 2rem 2.25rem;
    }
}

/* === Pantalla ancha (desde 992 px) ===
   El panel pasa a columna con la ilustración ocupando lo que dejan los textos; la
   imagen se centra en ese hueco sin deformarse. Sin relleno inferior para que el
   dibujo llegue hasta el borde de la tarjeta. Qué imagen va en cada página lo pone
   su .cshtml.css: aquí solo están la caja, la flotación y la transición. */
@media (min-width: 992px) {
    .edu-acceso__panel {
        gap: 1.5rem;
        padding: 2.75rem 2.25rem 0;
    }

    .edu-acceso__beneficios {
        gap: 1rem;
        margin-top: 1.75rem;
    }

    .edu-acceso__ilustracion {
        position: relative;
        display: block;
        flex: 1 1 auto;
        min-height: 16rem;
        margin-inline: -1rem;
    }

        /* Halo bajo el dibujo: le da suelo sobre el degradado y, mientras las
           imágenes no estén subidas, deja la zona como un claro intencionado. */
        .edu-acceso__ilustracion::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: min(100%, 26rem);
            aspect-ratio: 1;
            border-radius: 50%;
            background: radial-gradient(circle, var(--edu-acceso-panel-halo), transparent 66%);
            transform: translate(-50%, -50%);
        }

    /* La flotación va por la propiedad translate y la entrada por transform: son
       propiedades distintas, así que una página puede animar la entrada de su
       imagen sin pisar la flotación. */
    .edu-acceso__imagen {
        position: absolute;
        inset: 0 0 1.5rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
        animation: edu-acceso-flota 7s ease-in-out .6s infinite;
    }

    .edu-acceso__formulario {
        padding: 2.5rem 2.5rem 2.75rem;
    }
}

@media (min-width: 1200px) {
    .edu-acceso__panel {
        padding: 3.25rem 2.75rem 0;
    }

    .edu-acceso__formulario {
        padding: 3rem 3.25rem;
    }
}

/* === Animaciones ===
   Globales y con el prefijo del componente: las páginas las usan también desde su
   CSS aislado, que solo renombra las animaciones que declara él mismo. */
@keyframes edu-acceso-entrada {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
}

@keyframes edu-acceso-aparece {
    from {
        opacity: 0;
        transform: translateY(.6rem);
    }
}

@keyframes edu-acceso-deriva {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-3rem, 2.5rem, 0) scale(1.15);
    }
}

@keyframes edu-acceso-destello {
    0%, 70% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

@keyframes edu-acceso-flota {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -.65rem;
    }
}

/* Con movimiento reducido todo cambia en el acto: sin derivas, destellos ni
   entradas. El !important es deliberado: tiene que ganar a las reglas de estado
   activo de cada página, que son más específicas, sin repetirlas aquí una por una. */
@media (prefers-reduced-motion: reduce) {
    .edu-acceso *,
    .edu-acceso *::before,
    .edu-acceso *::after {
        animation: none !important;
        transition: none !important;
    }
}