/* Ajustes del marco de Akcadmia CUANDO se pinta dentro de una landing de ciclo.

   Se carga solo ahí, después de akcadmia.css y sitio.css, y no toca nada del resto
   del sitio: todas sus reglas cuelgan de .edu-landing-marco, la clase que llevan la
   barra, la invitación al profesor, el pie y la mascota únicamente dentro de una
   landing.

   Reúne cuatro cosas: la barra maquetada sin el JavaScript de Bootstrap, la sección
   de invitar al profesor, el orden de capas frente a los elementos flotantes de
   cada landing y la esquina que esos elementos le dejan a la mascota.

   La barra, en concreto: dentro de la landing NO se carga el JavaScript de
   Bootstrap. El botón que colapsa el menú no responde, así que la barra se maqueta
   para que sus enlaces estén siempre a la vista y el botón no se pinte. */

.edu-landing-marco .navbar-toggler {
    display: none;
}

/* Sin el colapsable, el contenedor tiene que comportarse como si siempre estuviera
   desplegado: Bootstrap lo deja oculto con .collapse mientras no haya JavaScript
   que le añada .show. */
.edu-landing-marco .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
}

/* Por debajo del punto de corte los enlaces se apilan y el bloque de sesión pasa
   debajo, en lugar de quedarse en una fila que no cabe. */
@media (max-width: 991.98px) {
    .edu-landing-marco .navbar-collapse {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }

        .edu-landing-marco .navbar-collapse .navbar-nav {
            flex-direction: row;
            flex-wrap: wrap;
            margin-left: 0 !important;
        }
}

/* La landing trae su propio contenido a ancho completo y muchas empiezan con una
   portada a sangre. El pie necesita separarse de ella para no parecer parte de la
   última sección. */
.edu-landing-marco .edu-footer {
    margin-top: 0;
}

/* ── Orden de capas ───────────────────────────────────────────────────────────
   La invitación y el pie se pintan POR ENCIMA de los elementos flotantes de la
   landing, cuyas barras de registro van con z-index entre 1020 y 1040. Esas barras
   se retiran al llegar al cierre de la landing, pero con la invitación en medio el
   cierre sube y la barra vuelve a asomar sobre el pie. Con esta capa, al llegar al
   final la barra queda detrás. 1045 queda por debajo de los modales de Bootstrap,
   que empiezan en 1050. */
.edu-landing-marco.edu-landing-invitar,
.edu-landing-marco .edu-footer {
    position: relative;
    z-index: 1045;
}

/* La mascota, por encima de todo lo anterior. En el resto del sitio va en 1030
   (base.css), y aquí el pie y la invitación, en 1045, la taparían al llegar al
   final de la landing. 1046 la deja sobre ellos y sigue por debajo de los modales
   de Bootstrap. */
.edu-landing-marco .edu-mascota {
    z-index: 1046;
}

/* ── La esquina de la mascota ─────────────────────────────────────────────────
   La mascota vive abajo a la derecha, como en el resto del sitio, y esa esquina es
   suya: los elementos flotantes de cada landing van abajo a la IZQUIERDA y, si son
   anchos, terminan antes de llegar a ella. Cuánto ocupa lo publica esta variable,
   medida desde el borde derecho de la ventana y con un respiro incluido; las
   landings la usan como margen derecho de sus flotantes, con su propio respaldo, y
   así ninguna copia las medidas del animal.

   Solo se declara si el marco puso la mascota: con la mascota apagada en
   appsettings no hay animal, la regla no casa y cada landing cae en su respaldo.
   Por eso va con :has() sobre el documento y no en una regla fija.

   Las medidas son las del animal: 1.25rem de margen y 8.5rem de dibujo en base.css,
   y .6rem y 5.2rem en el bloque de pantallas estrechas de interfaz.css, con el mismo
   corte de 47.99rem. Si cambian allí, cambian aquí. */
:root:has(.edu-landing-marco > .edu-mascota) {
    --edu-landing-reserva-mascota: 10.5rem;
}

@media (max-width: 47.99rem) {
    :root:has(.edu-landing-marco > .edu-mascota) {
        --edu-landing-reserva-mascota: 6.4rem;
    }
}

/* ── Invitación al profesor ───────────────────────────────────────────────────
   La pone el marco antes del pie (Views/Shared/_LandingInvitarProfesor.cshtml).
   Los --edu-* los voltea sitio.css con [data-tema="oscuro"], y las -subtle y
   -emphasis de Bootstrap las remapea a mano el bloque oscuro de akcadmia.css: así
   la sección sigue el tema sin una regla oscura propia.

   El fondo va con var(--edu-fondo) y no con bg-body, porque --bs-body-bg no se
   remapea en oscuro. Lleva fondo propio sí o sí: es lo que tapa la barra flotante
   que queda detrás. */
.edu-landing-marco.edu-landing-invitar {
    padding-block: 3rem;
    border-top: 1px solid var(--edu-borde);
    background-color: var(--edu-fondo);
    color: var(--edu-texto);
}

.edu-landing-marco .edu-landing-invitar__tarjeta {
    /* Recorta el panel de marca contra las esquinas redondeadas de la tarjeta. */
    overflow: hidden;
    box-shadow: var(--edu-sombra);
}

/* Panel de marca. --edu-oscuro es el índigo profundo de marca y NO se voltea con el
   tema, así que el texto blanco encima vale en claro y en oscuro. El halo, del
   primario de la marca, usa color-mix: donde no se admite, el navegador descarta la
   imagen y queda el índigo liso. */
.edu-landing-marco .edu-landing-invitar__marca {
    height: 100%;
    padding: 2.25rem 2rem;
    background-color: var(--edu-oscuro);
    background-image: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--bs-primary) 45%, transparent), transparent 60%);
    color: var(--bs-white);
}

.edu-landing-marco .edu-landing-invitar__antetitulo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--edu-acento);
}

/* Dos clases de especificidad: ganan a la regla h1..h6 de sitio.css, que pinta los
   títulos con --edu-oscuro (aquí sería índigo sobre índigo), y a la de títulos del
   tema oscuro de akcadmia.css. */
.edu-landing-marco .edu-landing-invitar__titulo {
    margin-bottom: .75rem;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-white);
}

.edu-landing-marco .edu-landing-invitar__texto {
    margin-bottom: 1.5rem;
}

.edu-landing-marco .edu-landing-invitar__ventajas {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .edu-landing-marco .edu-landing-invitar__ventajas li {
        display: flex;
        align-items: center;
        gap: .75rem;
        font-weight: 500;
    }

    .edu-landing-marco .edu-landing-invitar__ventajas .bi {
        display: inline-grid;
        place-items: center;
        flex: none;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        background-color: color-mix(in srgb, var(--edu-acento) 18%, transparent);
        color: var(--edu-acento);
        font-size: 1.1rem;
    }

/* El lado del mensaje: una conversación con una sola burbuja, la que va a recibir
   el profesor. Va sobre --edu-fondo y no sobre --edu-claro: en oscuro el texto
   atenuado del sitio no llega al contraste mínimo sobre --edu-claro. */
.edu-landing-marco .edu-landing-invitar__chat {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: 2.25rem 2rem;
    background-color: var(--edu-fondo);
}

.edu-landing-marco .edu-landing-invitar__contacto {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.edu-landing-marco .edu-landing-invitar__avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--edu-oscuro);
    color: var(--bs-white);
    font-size: 1.25rem;
}

.edu-landing-marco .edu-landing-invitar__burbuja {
    position: relative;
    max-width: 34rem;
    margin-left: .5rem;
    padding: .875rem 1rem;
    border: 1px solid var(--bs-success-border-subtle);
    border-radius: 0 1rem 1rem 1rem;
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

    /* La colita, del color de la burbuja, en la esquina sin redondear. */
    .edu-landing-marco .edu-landing-invitar__burbuja::before {
        content: "";
        position: absolute;
        top: 0;
        left: -.5rem;
        border-top: .75rem solid var(--bs-success-bg-subtle);
        border-left: .5rem solid transparent;
    }

    /* El foco se marca en la burbuja entera y no en el textarea, que no tiene borde
       propio: es donde lo deja el script al seleccionar el mensaje. */
    .edu-landing-marco .edu-landing-invitar__burbuja:focus-within {
        outline: 2px solid var(--bs-success);
        outline-offset: 2px;
    }

/* field-sizing hace que el textarea mida lo que su texto, sin barra de desplazamiento;
   donde no se admite manda el atributo rows. */
.edu-landing-marco .edu-landing-invitar__mensaje {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.55;
    resize: none;
    field-sizing: content;
}

    .edu-landing-marco .edu-landing-invitar__mensaje:focus {
        outline: none;
    }

.edu-landing-marco .edu-landing-invitar__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

/* Botón secundario con la paleta del sitio y no con btn-outline-secondary: su gris
   fijo se queda sin contraste sobre las superficies del tema oscuro. Se cambian las
   variables del propio botón de Bootstrap, así que sus estados siguen funcionando. */
.edu-landing-marco .edu-landing-invitar__copiar {
    --bs-btn-color: var(--edu-texto);
    --bs-btn-bg: var(--edu-fondo);
    --bs-btn-border-color: var(--edu-borde);
    --bs-btn-hover-color: var(--edu-texto);
    --bs-btn-hover-bg: var(--edu-fondo);
    --bs-btn-hover-border-color: var(--edu-texto-suave);
    --bs-btn-active-color: var(--edu-texto);
    --bs-btn-active-bg: var(--edu-fondo);
    --bs-btn-active-border-color: var(--edu-texto-suave);
}

@media (max-width: 575.98px) {
    .edu-landing-marco.edu-landing-invitar {
        padding-block: 2rem;
    }

    .edu-landing-marco .edu-landing-invitar__marca,
    .edu-landing-marco .edu-landing-invitar__chat {
        padding: 1.75rem 1.25rem;
    }
}