/* /Areas/Admin/Views/BancoCursos/_ModalBancoCurso.cshtml.rz.scp.css */
/* Miniatura de la imagen que ya tiene el curso, junto al aviso de que subir otra la
   reemplaza. La altura se acota para que una imagen grande no estire el modal, y el
   ancho al de su contenedor para que una muy apaisada no lo desborde en el móvil. Los
   dos son topes, no medidas: la imagen conserva su proporción. */
.edu-banco-curso__imagen-actual[b-lc7mv3whcf] {
    max-height: 70px;
    max-width: 100%;
}
/* /Areas/Admin/Views/Ciclos/Crear.cshtml.rz.scp.css */
/* =====================================================
   Areas/Admin/Views/Ciclos/Crear.cshtml.css
   Lo propio del alta de ciclo. El esqueleto del formulario —bloques, cabeceras,
   rejilla y pie— vive en componentes/formulario-ciclo.css, que comparte con la
   edición.
   ===================================================== */

/* Aviso de que los cursos se agregan después de crear el ciclo. Es la duda que
   siempre aparece en el alta, así que se resalta en vez de dejarla en texto
   pequeño. */
.edu-ciclo-crear__aviso[b-pajpxi6d06] {
    background-color: #EFF6FF;
    border-left: 4px solid var(--edu-primario);
    border-radius: 0 var(--edu-radio-borde) var(--edu-radio-borde) 0;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #1E40AF;
}

/* El azul pastel sobre página oscura deslumbra y su texto azul marino se pierde:
   se invierte el par manteniendo la banda de color, que es lo que identifica el
   aviso. */
[data-tema="oscuro"] .edu-ciclo-crear__aviso[b-pajpxi6d06] {
    background-color: #10263A;
    color: #DBEAFE;
}
/* /Areas/Admin/Views/Ciclos/Editar.cshtml.rz.scp.css */
/* =====================================================
   Areas/Admin/Views/Ciclos/Editar.cshtml.css
   Lo propio de la edición de ciclo. El esqueleto del formulario vive en
   componentes/formulario-ciclo.css, que comparte con el alta.
   ===================================================== */

/* Miniatura de la imagen actual. El alto va aquí y no en un style del marcado:
   el CSS no se escribe dentro de la vista. */
.edu-ciclo-editar__miniatura[b-2w3vx0c5bg] {
    max-height: 120px;
    width: auto;
}
/* /Areas/Admin/Views/Ciclos/Index.cshtml.rz.scp.css */
/* =====================================================
   Areas/Admin/Views/Ciclos/Index.cshtml.css
   Estilos de la vista principal de Ciclos (admin)
   ===================================================== */
/* /Areas/Admin/Views/Cursos/Editar.cshtml.rz.scp.css */
/* =====================================================
   Areas/Admin/Views/Cursos/Editar.cshtml.css
   Estilos del formulario de edición de curso
   ===================================================== */
/* /Areas/Admin/Views/Historial/Index.cshtml.rz.scp.css */
/* =====================================================
   Areas/Admin/Views/Historial/Index.cshtml.css
   Estilos de la vista del historial de operaciones
   ===================================================== */
/* /Areas/Admin/Views/Instituciones/Index.cshtml.rz.scp.css */
/* =====================================================
   Areas/Admin/Views/Instituciones/Index.cshtml.css
   ===================================================== */
/* /Areas/Admin/Views/Temas/Crear.cshtml.rz.scp.css */
/* =====================================================
   Areas/Admin/Views/Temas/Crear.cshtml.css
   Estilos del formulario de creación de tema
   ===================================================== */
/* /Areas/Admin/Views/Temas/Editar.cshtml.rz.scp.css */
/* =====================================================
   Areas/Admin/Views/Temas/Editar.cshtml.css
   Estilos del formulario de edición de tema
   ===================================================== */
/* /Areas/Admin/Views/Usuarios/Detalle.cshtml.rz.scp.css */
/* =====================================================
   Areas/Admin/Views/Usuarios/Detalle.cshtml.css
   Estilos de la ficha de detalle de un usuario.

   Aquí solo van reglas para marcado que genera Razor en ESTA vista. Las dos tablas
   —clases o matrículas, y el log— las pinta el JS, y sus estilos viven en
   componentes/tablas.css, porque el CSS con scope no alcanza a los elementos creados
   en tiempo de ejecución.
   ===================================================== */

/* === Avatar de la ficha ===
   Reemplazan los style= en línea que tenía la vista, por la regla de separación del
   proyecto. El tamaño va aquí y no en utilidades de Bootstrap porque 96px no
   corresponde a ninguna. */
.edu-usuario-detalle__avatar[b-p1bl8epna8] {
    width: 96px;
    height: 96px;
}

/* Foto que se superpone al avatar por defecto. Recorta en lugar de deformar.
   Existe una regla igual en la cuenta del alumno, pero ese archivo tiene su propio
   scope y no alcanza a esta vista: cada .cshtml.css solo aplica a su marcado. */
.edu-usuario-detalle__foto[b-p1bl8epna8] {
    object-fit: cover;
}
/* /Areas/Admin/Views/Usuarios/Index.cshtml.rz.scp.css */
/* =====================================================
   Areas/Admin/Views/Usuarios/Index.cshtml.css
   Estilos de la gestión de usuarios (admin)
   ===================================================== */
/* /Areas/Alumno/Views/Cuenta/EditarPerfil.cshtml.rz.scp.css */
/* =====================================================
   Areas/Alumno/Views/Cuenta/EditarPerfil.cshtml.css
   Lo que queda propio de esta pantalla.

   La foto, el rótulo de sección y el prefijo del celular ya no están aquí: ese
   marcado se fue a las parciales compartidas de Shared, y el CSS con ámbito no
   alcanza a una parcial. Vive en componentes/perfil-editar.css, que la vista
   carga en su sección de estilos.

   Lo que pinta el JS —las filas de la lista de carreras— vive en
   componentes/carreras-alumno.css, por el mismo motivo.
   ===================================================== */

/* Ancho de la columna de la pantalla. Se queda aquí porque es el contenedor de
   ESTA vista, no de las parciales. */
.edu-editar-perfil[b-jwkmngl4v7] {
    max-width: 760px;
}
/* /Areas/Alumno/Views/Cuenta/Index.cshtml.rz.scp.css */
/* =====================================================
   Areas/Alumno/Views/Cuenta/Index.cshtml.css
   Estilos de la cuenta/billetera del alumno.

   Solo quedan las tres reglas de la foto de perfil: es el único marcado de esta vista
   que necesita CSS propio. La tarjeta de la billetera, el saldo y el botón de comprar
   se pintan con utilidades de Bootstrap.

   Lo que pinta el JS —las filas de las tres tablas— vive en componentes/tablas.css,
   porque el CSS con scope no alcanza a los elementos creados en tiempo de ejecución.
   ===================================================== */

/* Foto de perfil del alumno. Reemplaza el style="object-fit:cover" que estaba en
   línea en la vista, por la regla de separación del proyecto. */
.edu-alumno-cuenta__foto[b-ni8fch4zml] {
    object-fit: cover;
}

/* Recuadro que ocupa el lugar de la foto cuando el alumno no subió ninguna.
   Solo aporta el tamaño: el color y el centrado siguen viniendo de las
   utilidades de Bootstrap que ya usaba la vista, para no cambiar el aspecto.
   Mismo nombre de clase que en EditarPerfil.cshtml.css, donde cumple lo mismo: son
   dos archivos con scope distinto, así que cada vista necesita la suya. */
.edu-alumno-cuenta__avatar-vacio[b-ni8fch4zml] {
    width: 80px;
    height: 80px;
}

    .edu-alumno-cuenta__avatar-vacio .bi[b-ni8fch4zml] {
        font-size: 2rem;
    }
/* /Areas/Alumno/Views/Evaluaciones/Index.cshtml.rz.scp.css */
/* ═══ Evaluaciones del alumno: el armazón de la pantalla ════════════════════
   Solo el marcado fijo de la vista: la cabecera con sus selectores y los títulos de
   cada sección. Las tarjetas, las cifras y los avisos los pinta el JavaScript y su
   estilo vive en componentes/panel-evaluaciones.css: este archivo, aislado a la
   vista, no los alcanzaría.

   COLORES: de --edu-* y de --bs-primary-rgb, que el tema oscuro ya voltea.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   CABECERA
   ═══════════════════════════════════════════════════════════════════════════ */

.edu-eval-cabecera[b-tv5sk1u88t] {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(120deg, rgba(var(--bs-primary-rgb), .12), rgba(var(--bs-primary-rgb), .02) 65%);
}

    /* Un halo en la esquina: da profundidad sin competir con los selectores. */
    .edu-eval-cabecera[b-tv5sk1u88t]::after {
        content: "";
        position: absolute;
        top: -5rem;
        right: -4rem;
        width: 14rem;
        height: 14rem;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--bs-primary-rgb), .14), rgba(var(--bs-primary-rgb), 0) 70%);
        pointer-events: none;
    }

    /* Por encima del halo, para que los selectores se puedan usar. */
    .edu-eval-cabecera .card-body[b-tv5sk1u88t] {
        position: relative;
        z-index: 1;
    }

/* El emblema entra dando media vuelta: el mismo giro de la carta de la escena sin
   ciclo, que es el vocabulario de movimiento del módulo. */
.edu-eval-cabecera__emblema[b-tv5sk1u88t] {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: rgba(var(--bs-primary-rgb), .16);
    color: var(--edu-primario);
    font-size: 1.6rem;
    animation: edu-eval-emblema-b-tv5sk1u88t .9s cubic-bezier(.2, .7, .3, 1) backwards;
}

@keyframes edu-eval-emblema-b-tv5sk1u88t {
    from {
        opacity: 0;
        transform: rotateY(-180deg) scale(.8);
    }

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

.edu-eval-cabecera__ciclo[b-tv5sk1u88t] {
    display: inline-flex;
    align-items: center;
    margin-bottom: .2rem;
    padding: .1rem .65rem;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--edu-primario);
    font-size: .78rem;
    font-weight: 700;
}

/* Los selectores se apilan en el móvil y van en fila desde la tableta. */
.edu-eval-cabecera__filtros[b-tv5sk1u88t] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

@media (min-width: 36rem) {
    .edu-eval-cabecera__filtros[b-tv5sk1u88t] {
        flex-direction: row;
    }

    .edu-eval-cabecera__filtro[b-tv5sk1u88t] {
        min-width: 12rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TÍTULOS DE SECCIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

.edu-eval-seccion[b-tv5sk1u88t] {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.edu-eval-seccion__icono[b-tv5sk1u88t] {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--edu-primario);
    font-size: 1.05rem;
}

.edu-eval-seccion__titulo[b-tv5sk1u88t] {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-weight: 800;
    color: var(--edu-texto);
}

.edu-eval-seccion__ayuda[b-tv5sk1u88t] {
    margin: 0;
    font-size: .8rem;
    color: var(--edu-texto-suave);
}

.edu-eval-seccion__contador[b-tv5sk1u88t] {
    padding: .15rem .55rem;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), .14);
    color: var(--edu-primario);
    font-size: .72rem;
    font-weight: 700;
}

/* La fila de título de las de tema lleva el filtro de curso: se apila en el móvil
   y desde la tableta va a la derecha. */
.edu-eval-seccion-temas[b-tv5sk1u88t] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

@media (min-width: 48rem) {
    .edu-eval-seccion-temas[b-tv5sk1u88t] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .edu-eval-seccion-temas__filtro[b-tv5sk1u88t] {
        min-width: 14rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENOS MOVIMIENTO
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .edu-eval-cabecera__emblema[b-tv5sk1u88t] {
        animation: none;
    }
}
/* /Areas/Alumno/Views/Evaluaciones/Rendir.cshtml.rz.scp.css */
/* =====================================================
   Akcadmia — Areas/Alumno/Views/Evaluaciones/Rendir.cshtml.css
   Maquetación de la pantalla de rendir: la barra del examen, el cuadernillo, el
   panel de la ficha y el aviso de entrega. La ficha en sí vive en
   componentes/ficha-optica.css, porque la revisión la reutiliza y porque sus filas
   las pinta el JavaScript, que este archivo aislado no alcanza.

   La hoja A4 se escala sola al ancho de su columna —lo hace hoja-preguntas.js
   con un observador de tamaño—, así que aquí no se toca su tamaño: solo se le
   da el marco.

   El tema oscuro va con [data-tema="oscuro"] en el <html>, igual que el resto
   del sitio. El aislamiento de CSS de la vista añade su atributo al ÚLTIMO
   selector, así que la referencia al <html> del principio sigue funcionando.
   ===================================================== */

/* ═══ BARRA DEL EXAMEN ═════════════════════════════════════════════════════
   Fija arriba al desplazar: el reloj y el botón de finalizar no pueden quedarse
   atrás mientras el alumno baja por el cuadernillo. Por encima del contenido y por
   debajo de los modales y de la hoja de la ficha. */
.edu-examen__barra[b-3l5c208gut] {
    position: sticky;
    top: .5rem;
    z-index: 1020;
}

/* En el móvil, dos filas: el examen y su reloj arriba, el avance y el botón
   abajo. Desde lg, todo en una. */
.edu-examen__barra-fila[b-3l5c208gut] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "titulo reloj"
        "avance finalizar";
    align-items: center;
    gap: .75rem 1rem;
}

@media (min-width: 992px) {
    .edu-examen__barra-fila[b-3l5c208gut] {
        grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem) auto auto;
        grid-template-areas: "titulo avance reloj finalizar";
        gap: 1.25rem;
    }
}

.edu-examen__titulo[b-3l5c208gut] {
    grid-area: titulo;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.edu-examen__titulo-textos[b-3l5c208gut] {
    min-width: 0;
}

.edu-examen__emblema[b-3l5c208gut] {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    background: rgba(var(--bs-primary-rgb), .14);
    color: var(--edu-primario);
    font-size: 1.3rem;
}

/* Un título largo se recorta con puntos suspensivos: la barra no puede crecer en
   alto y empujar el cuadernillo. */
.edu-examen__nombre[b-3l5c208gut],
.edu-examen__detalle[b-3l5c208gut] {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edu-examen__nombre[b-3l5c208gut] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--edu-texto);
}

.edu-examen__detalle[b-3l5c208gut] {
    font-size: .8rem;
    color: var(--edu-texto-suave);
}

/* ── Avance ───────────────────────────────────────────────────────────────── */
.edu-examen__avance[b-3l5c208gut] {
    grid-area: avance;
    min-width: 0;
}

.edu-examen__avance-cifras[b-3l5c208gut] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem .5rem;
    margin-bottom: .35rem;
    font-size: .8rem;
    color: var(--edu-texto-suave);
}

    .edu-examen__avance-cifras strong[b-3l5c208gut] {
        font-size: .95rem;
        color: var(--edu-texto);
        font-variant-numeric: tabular-nums;
    }

/* La barra es un <progress>: su valor va en los atributos y aquí solo la forma. */
.edu-examen__progreso[b-3l5c208gut] {
    display: block;
    width: 100%;
    height: .45rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--edu-borde);
    appearance: none;
}

    .edu-examen__progreso[b-3l5c208gut]::-webkit-progress-bar {
        background: var(--edu-borde);
        border-radius: 999px;
    }

    .edu-examen__progreso[b-3l5c208gut]::-webkit-progress-value {
        background: var(--edu-primario);
        border-radius: 999px;
    }

    .edu-examen__progreso[b-3l5c208gut]::-moz-progress-bar {
        background: var(--edu-primario);
        border-radius: 999px;
    }

/* ── Estado del guardado ──────────────────────────────────────────────────── */
/* Los tonos -subtle y -emphasis de Bootstrap ya los voltea sitio.css en el tema
   oscuro. Vacío al empezar: hasta la primera marca no hay nada que contar. */
.edu-examen__guardado[b-3l5c208gut] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

    .edu-examen__guardado:empty[b-3l5c208gut] {
        display: none;
    }

.edu-examen__guardado--ok[b-3l5c208gut] {
    color: var(--bs-success-text-emphasis);
    background: var(--bs-success-bg-subtle);
}

.edu-examen__guardado--guardando[b-3l5c208gut] {
    color: var(--edu-texto-suave);
    box-shadow: inset 0 0 0 1px var(--edu-borde);
}

.edu-examen__guardado--reintentando[b-3l5c208gut] {
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
}

.edu-examen__guardado--error[b-3l5c208gut] {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    white-space: normal;
}

/* ── Reloj ────────────────────────────────────────────────────────────────── */
.edu-examen__reloj-caja[b-3l5c208gut] {
    grid-area: reloj;
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* El anillo mide 100 por pathLength: rendir.js escribe en su stroke-dasharray el
   porcentaje de tiempo que queda. Arranca arriba, como las agujas de un reloj. */
.edu-examen__anillo[b-3l5c208gut] {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    transform: rotate(-90deg);
}

    .edu-examen__anillo circle[b-3l5c208gut] {
        fill: none;
        stroke-width: 4;
    }

.edu-examen__anillo-pista[b-3l5c208gut] {
    stroke: var(--edu-borde);
}

.edu-examen__anillo-valor[b-3l5c208gut] {
    stroke: var(--edu-primario);
    stroke-linecap: round;
    transition: stroke-dasharray 1s linear, stroke .3s ease;
}

.edu-examen__reloj-etiqueta[b-3l5c208gut] {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--edu-texto-suave);
}

.edu-examen__reloj[b-3l5c208gut] {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--edu-texto);
}

/* Últimos cinco minutos: el reloj y su anillo pasan al rojo de la paleta. Es
   texto grande y en negrita, y el rojo da el contraste en los dos temas. */
.edu-examen__reloj-caja--apremio .edu-examen__reloj[b-3l5c208gut] {
    color: var(--edu-peligro);
}

.edu-examen__reloj-caja--apremio .edu-examen__anillo-valor[b-3l5c208gut] {
    stroke: var(--edu-peligro);
}

/* Último minuto: además late. */
.edu-examen__reloj-caja--final .edu-examen__reloj[b-3l5c208gut] {
    animation: edu-examen-late-b-3l5c208gut 1s ease-in-out infinite;
}

@keyframes edu-examen-late-b-3l5c208gut {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

.edu-examen__finalizar[b-3l5c208gut] {
    grid-area: finalizar;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding-inline: 1.1rem;
    border-radius: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ═══ CUADERNILLO ══════════════════════════════════════════════════════════
   El marco no lleva su propio desplazamiento: se desplaza la página, con la barra
   y la ficha fijas, y así no hay una barra de desplazamiento dentro de otra. */
.edu-examen__cuadernillo[b-3l5c208gut] {
    background-color: #F1F5F9;
    border: 1px solid var(--edu-borde, #DEE2E6);
    border-radius: .75rem;
    padding: .75rem;
}

/* ═══ FICHA ════════════════════════════════════════════════════════════════ */
.edu-examen__ayuda-ficha[b-3l5c208gut] {
    margin: 0 0 .75rem;
    font-size: .78rem;
    color: var(--edu-texto-suave);
}

/* Desde lg es un panel normal a la derecha, fijo debajo de la barra. */
@media (min-width: 992px) {
    .edu-examen__panel-ficha[b-3l5c208gut] {
        position: sticky;
        top: 7rem;
    }

    .edu-examen__ficha-tarjeta[b-3l5c208gut] {
        box-shadow: var(--edu-sombra);
    }
}

/* Por debajo de lg es una hoja que sube desde abajo. Con la hoja abierta la página
   gana su mismo alto por debajo, para que el final del cuadernillo pueda subir por
   encima de ella. */
@media (max-width: 991.98px) {
    .edu-examen__panel-ficha[b-3l5c208gut] {
        --bs-offcanvas-height: 55vh;
        border-top-left-radius: 1.25rem;
        border-top-right-radius: 1.25rem;
        box-shadow: var(--edu-sombra-hover);
    }

    .edu-examen--ficha-abierta[b-3l5c208gut] {
        padding-bottom: 55vh;
    }
}

/* El botón que abre la hoja en el móvil: flota abajo al centro, a mano del
   pulgar. Por debajo de la hoja, que lo tapa mientras está abierta. */
.edu-examen__abrir-ficha[b-3l5c208gut] {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.25rem;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: var(--edu-sombra-hover);
    transform: translateX(-50%);
}

/* Blanco translúcido en los dos temas: va sobre el índigo del botón, que es
   oscuro en los dos. */
.edu-examen__abrir-ficha-cifra[b-3l5c208gut] {
    padding: .05rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-variant-numeric: tabular-nums;
}

/* ═══ ENTREGA ══════════════════════════════════════════════════════════════
   Cubre la pantalla mientras se entrega: no se puede marcar nada más ni pulsar
   dos veces. El velo es oscuro y translúcido en los dos temas. */
.edu-examen__cierre[b-3l5c208gut] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
}

.edu-examen__cierre-caja[b-3l5c208gut] {
    width: 100%;
    max-width: 24rem;
    padding: 1rem .5rem;
    text-align: center;
    animation: edu-examen-cierre-b-3l5c208gut .4s cubic-bezier(.2, .7, .3, 1) backwards;
}

@keyframes edu-examen-cierre-b-3l5c208gut {
    from {
        opacity: 0;
        transform: perspective(40rem) rotateX(-18deg) translateY(1rem);
    }

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

/* El sobre gira sobre su eje mientras viaja: el vocabulario de rotación del
   módulo. */
.edu-examen__cierre-icono[b-3l5c208gut] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .75rem;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), .14);
    color: var(--edu-primario);
    font-size: 1.6rem;
    animation: edu-examen-envia-b-3l5c208gut 1.6s ease-in-out infinite;
}

@keyframes edu-examen-envia-b-3l5c208gut {
    0%, 100% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }
}

/* ═══ PANTALLAS ESTRECHAS ══════════════════════════════════════════════════ */
@media (max-width: 35.99rem) {
    .edu-examen__emblema[b-3l5c208gut] {
        display: none;
    }

    .edu-examen__anillo[b-3l5c208gut] {
        width: 2.25rem;
        height: 2.25rem;
    }

    .edu-examen__reloj[b-3l5c208gut] {
        font-size: 1.25rem;
    }

    .edu-examen__finalizar[b-3l5c208gut] {
        padding-inline: .9rem;
    }
}

/* ═══ MENOS MOVIMIENTO ═════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .edu-examen__reloj-caja--final .edu-examen__reloj[b-3l5c208gut],
    .edu-examen__cierre-caja[b-3l5c208gut],
    .edu-examen__cierre-icono[b-3l5c208gut] {
        animation: none;
    }

    .edu-examen__anillo-valor[b-3l5c208gut] {
        transition: none;
    }
}

/* === Modo oscuro ===
   El fondo del marco es un gris claro fijo, elegido para que la hoja blanca
   destaque; sobre página oscura hay que bajarlo o el cuadernillo queda flotando
   en una mancha clara. La hoja en sí se queda blanca a propósito: es papel.

   La hoja de la ficha en el móvil toma de Bootstrap el fondo de la página, que
   aquí no se voltea porque el interruptor del tema es data-tema: se le da el mismo
   fondo que akcadmia.css pone a las tarjetas en el tema oscuro. */
[data-tema="oscuro"] .edu-examen__cuadernillo[b-3l5c208gut] {
    background-color: #0B1220;
    border-color: #334155;
}

[data-tema="oscuro"] .edu-examen__panel-ficha[b-3l5c208gut] {
    --bs-offcanvas-bg: #1E293B;
    --bs-offcanvas-color: #CBD5E1;
}
/* /Areas/Alumno/Views/Evaluaciones/Revision.cshtml.rz.scp.css */
/* ═══ Revisión de una evaluación: el armazón de la pantalla ═════════════════
   Solo el marcado fijo de la vista: el resultado con su anillo y sus cifras, los
   títulos de cada sección, el marco del cuadernillo y la ficha fija. Lo que pintan
   los scripts —el resumen y el podio del ranking, las fichas de tus exámenes, la
   tarjeta para compartir— vive en componentes: este archivo, aislado a la vista, no
   alcanzaría a su marcado.

   MOVIMIENTO: el del módulo, rotación y revelado. El resultado entra girando sobre
   su eje horizontal como las tarjetas del panel, el anillo se llena hasta la nota y
   la barra de respuestas se descubre tramo a tramo. Nada se mueve en bucle: es una
   pantalla para leer con calma.

   COLORES: de --edu-* y de las variables de Bootstrap que sitio.css voltea en el tema
   oscuro. El marco del cuadernillo es la excepción, con su contraparte al final.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   CARGANDO
   ═══════════════════════════════════════════════════════════════════════════ */

.edu-revision__hueco-anillo[b-una17afy9z] {
    flex: 0 0 auto;
    width: 8rem;
    height: 8rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESULTADO
   ═══════════════════════════════════════════════════════════════════════════ */

.edu-revision__heroe[b-una17afy9z] {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(120deg, rgba(var(--bs-primary-rgb), .12), rgba(var(--bs-primary-rgb), .02) 65%);
    animation: edu-revision-entra-b-una17afy9z .6s cubic-bezier(.2, .7, .3, 1) backwards;
}

    /* Un halo detrás del anillo: da profundidad sin competir con la nota. */
    .edu-revision__heroe[b-una17afy9z]::after {
        content: "";
        position: absolute;
        top: -6rem;
        left: -5rem;
        width: 18rem;
        height: 18rem;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--bs-primary-rgb), .16), rgba(var(--bs-primary-rgb), 0) 70%);
        pointer-events: none;
    }

    /* Por encima del halo, para que el selector y los botones se puedan usar. */
    .edu-revision__heroe .card-body[b-una17afy9z] {
        position: relative;
        z-index: 1;
    }

@keyframes edu-revision-entra-b-una17afy9z {
    from {
        opacity: 0;
        transform: perspective(60rem) rotateX(-12deg) translateY(.75rem);
    }

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

/* Tres bloques: el anillo, los textos y las acciones. En el móvil se apilan
   centrados; desde md el anillo va a la izquierda y desde lg las acciones pasan a
   una columna a la derecha. */
.edu-revision__heroe-fila[b-una17afy9z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

@media (min-width: 48rem) {
    .edu-revision__heroe-fila[b-una17afy9z] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        text-align: left;
    }

    .edu-revision__textos[b-una17afy9z] {
        flex: 1 1 18rem;
        min-width: 0;
    }
}

@media (min-width: 62rem) {
    .edu-revision__heroe-fila[b-una17afy9z] {
        flex-wrap: nowrap;
    }
}

/* ── El anillo ───────────────────────────────────────────────────────────── */
.edu-revision__medidor[b-una17afy9z] {
    position: relative;
    flex: 0 0 auto;
    width: 9.5rem;
    height: 9.5rem;
}

/* Gira un cuarto para que el arco empiece arriba, como una esfera de reloj. */
.edu-revision__anillo[b-una17afy9z] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.edu-revision__anillo-pista[b-una17afy9z],
.edu-revision__anillo-valor[b-una17afy9z] {
    fill: none;
    stroke-width: 9;
}

.edu-revision__anillo-pista[b-una17afy9z] {
    stroke: rgba(var(--bs-primary-rgb), .14);
}

/* El tramo lleno sale del atributo stroke-dasharray que escribe revision.js; la
   animación solo declara de dónde parte, así que siempre termina en ese valor. */
.edu-revision__anillo-valor[b-una17afy9z] {
    stroke: url(#degradado-nota);
    stroke-linecap: round;
    animation: edu-revision-anillo-b-una17afy9z 1.1s cubic-bezier(.2, .7, .3, 1) .15s backwards;
}

@keyframes edu-revision-anillo-b-una17afy9z {
    from {
        stroke-dasharray: 0 100;
    }
}

/* Del índigo de la marca al lima de la acción: la nota va "hacia" el acento. */
.edu-revision__degradado-inicio[b-una17afy9z] {
    stop-color: var(--edu-primario);
}

.edu-revision__degradado-fin[b-una17afy9z] {
    stop-color: var(--edu-acento);
}

.edu-revision__nota-caja[b-una17afy9z] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.edu-revision__nota-etiqueta[b-una17afy9z] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--edu-texto-suave);
}

.edu-revision__nota[b-una17afy9z] {
    max-width: 7.5rem;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--edu-texto);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Una nota sobre 1000 o 2000 con decimales tiene siete caracteres: con el tamaño de
   siempre partiría en dos líneas dentro del anillo. */
.edu-revision__nota--larga[b-una17afy9z] {
    font-size: 1.5rem;
}

.edu-revision__nota-sobre[b-una17afy9z] {
    font-size: .85rem;
    font-weight: 600;
    color: var(--edu-texto-suave);
}

/* ── Textos ──────────────────────────────────────────────────────────────── */
.edu-revision__etiquetas[b-una17afy9z] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin-bottom: .5rem;
}

@media (min-width: 48rem) {
    .edu-revision__etiquetas[b-una17afy9z] {
        justify-content: flex-start;
    }
}

.edu-revision__tipo[b-una17afy9z],
.edu-revision__ciclo[b-una17afy9z],
.edu-revision__estado[b-una17afy9z] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}

.edu-revision__tipo[b-una17afy9z] {
    background: rgba(var(--bs-primary-rgb), .14);
    color: var(--edu-primario);
}

.edu-revision__ciclo[b-una17afy9z] {
    background: rgba(var(--bs-primary-rgb), .06);
    color: var(--edu-texto-suave);
}

    .edu-revision__ciclo:empty[b-una17afy9z] {
        display: none;
    }

.edu-revision__titulo[b-una17afy9z] {
    margin: 0 0 .2rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--edu-texto);
    overflow-wrap: anywhere;
}

.edu-revision__detalle[b-una17afy9z] {
    margin: 0 0 .6rem;
    font-size: .875rem;
    color: var(--edu-texto-suave);
}

.edu-revision__logro:empty[b-una17afy9z] {
    display: none;
}

/* ── Acciones ────────────────────────────────────────────────────────────── */
/* En el móvil cada acción ocupa el ancho entero, a mano del pulgar. En la tableta
   bajan a una fila propia debajo del anillo y los textos, repartiéndose el ancho; y
   desde lg vuelven a ser una columna a la derecha. */
.edu-revision__acciones[b-una17afy9z] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: 100%;
    text-align: left;
}

@media (min-width: 48rem) {
    .edu-revision__acciones[b-una17afy9z] {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

        .edu-revision__acciones > *[b-una17afy9z] {
            flex: 1 1 12rem;
        }
}

@media (min-width: 62rem) {
    .edu-revision__acciones[b-una17afy9z] {
        flex: 0 0 15rem;
        flex-direction: column;
        align-items: stretch;
    }

        .edu-revision__acciones > *[b-una17afy9z] {
            flex: 0 0 auto;
        }
}

/* El texto de los botones no se parte: en la fila de la tableta es el botón el que
   crece, y si no cabe, baja de línea entero. */
.edu-revision__boton[b-una17afy9z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-weight: 700;
    white-space: nowrap;
}

/* El icono de compartir da media vuelta al pasar el ratón: la invitación se mueve,
   el resto de la pantalla no. */
.edu-revision__compartir i[b-una17afy9z] {
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

@media (hover: hover) {
    .edu-revision__compartir:hover i[b-una17afy9z] {
        transform: rotateY(180deg);
    }
}

/* ── Cifras ──────────────────────────────────────────────────────────────── */
.edu-revision__cifras[b-una17afy9z] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1.5rem;
}

@media (min-width: 48rem) {
    .edu-revision__cifras[b-una17afy9z] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.edu-revision__cifra[b-una17afy9z] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem;
    border-radius: 1rem;
    background: rgba(var(--bs-primary-rgb), .05);
}

    .edu-revision__cifra > div[b-una17afy9z] {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.2;
    }

.edu-revision__cifra-icono[b-una17afy9z] {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .65rem;
    font-size: 1rem;
}

/* Verde, rojo y gris de Bootstrap en sus versiones suaves, que sitio.css remapea
   para el tema oscuro: el mismo significado que los círculos de la ficha. */
.edu-revision__cifra--acierto .edu-revision__cifra-icono[b-una17afy9z] {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.edu-revision__cifra--error .edu-revision__cifra-icono[b-una17afy9z] {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.edu-revision__cifra--blanco .edu-revision__cifra-icono[b-una17afy9z] {
    background: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary-text-emphasis);
}

.edu-revision__cifra--tiempo .edu-revision__cifra-icono[b-una17afy9z] {
    background: rgba(var(--bs-primary-rgb), .14);
    color: var(--edu-primario);
}

.edu-revision__cifra-valor[b-una17afy9z] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--edu-texto);
    font-variant-numeric: tabular-nums;
}

.edu-revision__cifra-etiqueta[b-una17afy9z] {
    font-size: .78rem;
    color: var(--edu-texto-suave);
}

.edu-revision__cifra-pie[b-una17afy9z] {
    font-size: .72rem;
    font-weight: 700;
    color: var(--edu-texto-suave);
    font-variant-numeric: tabular-nums;
}

    .edu-revision__cifra-pie:empty[b-una17afy9z] {
        display: none;
    }

/* ── Reparto de las respuestas ───────────────────────────────────────────── */
.edu-revision__reparto[b-una17afy9z] {
    display: flex;
    gap: 2px;
    height: .6rem;
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), .08);
}

/* Cada tramo crece con su variable y se descubre de izquierda a derecha, uno
   detrás de otro. Un tramo en cero no ocupa nada. */
.edu-revision__parte[b-una17afy9z] {
    flex: var(--edu-parte, 0) 1 0;
    min-width: 0;
    transform-origin: left center;
    animation: edu-revision-tramo-b-una17afy9z .7s cubic-bezier(.2, .7, .3, 1) backwards;
}

.edu-revision__parte--acierto[b-una17afy9z] {
    background: rgb(var(--bs-success-rgb));
    animation-delay: .25s;
}

.edu-revision__parte--error[b-una17afy9z] {
    background: rgb(var(--bs-danger-rgb));
    animation-delay: .4s;
}

.edu-revision__parte--blanco[b-una17afy9z] {
    background: var(--edu-borde);
    animation-delay: .55s;
}

@keyframes edu-revision-tramo-b-una17afy9z {
    from {
        transform: scaleX(0);
    }
}

/* ── Fecha, puntaje y monedas ────────────────────────────────────────────── */
.edu-revision__meta[b-una17afy9z] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    margin-top: .85rem;
    font-size: .8rem;
    color: var(--edu-texto-suave);
}

    .edu-revision__meta > span[b-una17afy9z] {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }

    .edu-revision__meta strong[b-una17afy9z] {
        color: var(--edu-texto);
        font-variant-numeric: tabular-nums;
    }

/* El dorado de la paleta significa monedas, y aquí son monedas. */
.edu-revision__meta-monedas i[b-una17afy9z] {
    color: var(--edu-moneda-cifra);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TÍTULOS DE SECCIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

.edu-revision__seccion[b-una17afy9z] {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
}

.edu-revision__seccion-icono[b-una17afy9z] {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--edu-primario);
    font-size: 1.05rem;
}

.edu-revision__seccion-titulo[b-una17afy9z] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--edu-texto);
}

.edu-revision__seccion-ayuda[b-una17afy9z] {
    margin: 0;
    font-size: .8rem;
    color: var(--edu-texto-suave);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RANKING Y TUS EXÁMENES
   ═══════════════════════════════════════════════════════════════════════════ */

/* El selector de alcance y el botón se apilan en el móvil y van en fila desde sm,
   con el botón a la derecha. */
.edu-revision__ranking-pie[b-una17afy9z] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.25rem;
}

@media (min-width: 36rem) {
    .edu-revision__ranking-pie[b-una17afy9z] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .edu-revision__alcance[b-una17afy9z] {
        min-width: 14rem;
    }

    .edu-revision__ranking-pie .edu-revision__boton[b-una17afy9z] {
        margin-left: auto;
    }
}

.edu-revision__aviso-intentos[b-una17afy9z] {
    display: flex;
    gap: .4rem;
    margin: 1rem 0 0;
    font-size: .78rem;
    color: var(--edu-texto-suave);
}

    .edu-revision__aviso-intentos i[b-una17afy9z] {
        color: var(--edu-primario);
    }

.edu-revision__accion-intentos[b-una17afy9z] {
    margin-top: auto;
    padding-top: 1rem;
}

    .edu-revision__accion-intentos:empty[b-una17afy9z] {
        display: none;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   CUADERNILLO Y FICHA
   ═══════════════════════════════════════════════════════════════════════════ */

/* El marco no lleva su propio desplazamiento: se desplaza la página y la ficha se
   queda fija a su lado, sin una barra de desplazamiento dentro de otra. */
.edu-revision__cuadernillo[b-una17afy9z] {
    background-color: #F1F5F9;
    border: 1px solid var(--edu-borde);
    border-radius: .75rem;
    padding: .75rem;
}

@media (min-width: 62rem) {
    .edu-revision__ficha[b-una17afy9z] {
        position: sticky;
        top: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA OSCURO
   ═══════════════════════════════════════════════════════════════════════════ */

/* El marco gris claro realza las hojas blancas sobre la página clara; sobre la
   oscura se baja, o el cuadernillo queda flotando en una mancha clara. La hoja se
   queda blanca a propósito: es papel. */
[data-tema="oscuro"] .edu-revision__cuadernillo[b-una17afy9z] {
    background-color: #0B1220;
    border-color: #334155;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENOS MOVIMIENTO
   ═══════════════════════════════════════════════════════════════════════════ */

/* Todo queda en su estado final: el anillo lleno, la barra entera. */
@media (prefers-reduced-motion: reduce) {
    .edu-revision__heroe[b-una17afy9z],
    .edu-revision__anillo-valor[b-una17afy9z],
    .edu-revision__parte[b-una17afy9z] {
        animation: none;
    }

    .edu-revision__compartir i[b-una17afy9z] {
        transition: none;
    }
}
/* /Areas/Alumno/Views/Horario/Calificaciones.cshtml.rz.scp.css */
/* =====================================================
   Areas/Alumno/Views/Horario/Calificaciones.cshtml.css
   Estilos de la página de calificación de clases del alumno.

   Solo lo que pinta Razor en ESTA vista. La tabla del historial se estila en
   wwwroot/css/componentes/tablas.css: su marcado vive en una parcial que se recarga
   por AJAX, y el CSS con scope no alcanza al HTML inyectado.
   ===================================================== */

/* === Icono de estado vacío === */
.edu-calificaciones__icono-vacio[b-i8cusin4y6] {
    font-size: 2.5rem;
}

/* === Estrellas de calificación === */
.edu-calificaciones__estrella[b-i8cusin4y6] {
    font-size: 1.5rem;
}

/* === Avatar del profesor en la tarjeta === */
.edu-calificaciones__avatar[b-i8cusin4y6] {
    width: 28px;
    height: 28px;
    object-fit: cover;
}

/* Placeholder redondo cuando el profesor no tiene foto de perfil. */
.edu-calificaciones__avatar--vacio .bi[b-i8cusin4y6] {
    font-size: .8rem;
}
/* /Areas/Alumno/Views/Horario/Index.cshtml.rz.scp.css */
/* =====================================================
   Areas/Alumno/Views/Horario/Index.cshtml.css
   Solo lo que pinta Razor en esta vista: encabezado y navegación de semana.

   La grilla NO se estila aquí: su marcado vive en la parcial compartida
   Views/Shared/_GrillaSemana.cshtml y se recarga por AJAX, así que el atributo
   b-xxxxx del CSS aislado no le aplicaría.
   Ver: wwwroot/css/componentes/horario.css y horario-alumno.css
   ===================================================== */

/* === Texto que solo se ve desde sm ===
   Por debajo de sm se aparta de la vista con el mismo recorte que .visually-hidden
   de Bootstrap, que no tiene variante por punto de corte: deja de ocupar sitio pero
   sigue en el texto del botón, y el lector de pantalla lo lee. Con d-none se
   perdería también para él. */
@media (max-width: 575.98px) {
    .edu-horario-alumno__texto-ancho[b-8kuiigpzhn] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* === Badge de ejemplo (+) del encabezado === */
.edu-horario-alumno__badge-ejemplo[b-8kuiigpzhn] {
    font-size: .65rem;
    line-height: 1.5;
    padding: 2px 5px;
}

/* === Semana: etiqueta e input ===
   El fondo blanco es fijo a propósito: la etiqueta no debe teñirse con el modo
   oscuro del sistema, igual que la grilla. */
#week-label[b-8kuiigpzhn] {
    min-width: 215px;
    background-color: #fff !important;
    color: #212529;
}

#week-input[b-8kuiigpzhn] {
    width: auto;
}
/* /Areas/Alumno/Views/Shared/_ModalComprarMonedas.cshtml.rz.scp.css */
/* =====================================================
   Areas/Alumno/Views/Shared/_ModalComprarMonedas.cshtml.css
   Estilos propios del modal de compra de monedas.
   ===================================================== */
/* /Areas/Profesor/Views/Cuenta/EditarPerfil.cshtml.rz.scp.css */
/* =====================================================
   Areas/Profesor/Views/Cuenta/EditarPerfil.cshtml.css
   Lo que queda propio de esta pantalla.

   La foto, el rótulo de sección y el prefijo del celular ya no están aquí: ese
   marcado se fue a las parciales compartidas de Shared, y el CSS con ámbito no
   alcanza a una parcial. Vive en componentes/perfil-editar.css, que la vista
   carga en su sección de estilos.

   Se fueron también, por no usarse en NINGUNA de las dos pestañas:
   __tarjeta, __foto, __foto-contenedor, __foto-placeholder, __seccion y
   __contador. Eran de versiones anteriores de esta pantalla.
   ===================================================== */

/* Ancho de la columna de la pantalla. Es el contenedor de ESTA vista, no de las
   parciales; sustituye al style="max-width:860px" que estaba en el marcado. */
.edu-editar-perfil[b-8j7igczt9t] {
    max-width: 860px;
}

/* === URL del perfil: campo único con modo lectura / edición === */

/* El "https://.../p/" que precede al campo. Algo más pequeño que el texto del
   input para que la dirección completa quepa sin partirse en dos líneas. */
.edu-editar-perfil__prefijo-url[b-8j7igczt9t] {
    font-size: .82rem;
}

#input-slug[readonly][b-8j7igczt9t] {
    cursor: text;
}

/* En modo edición el campo deja de verse apagado. Blanco fijo a propósito: los
   campos de formulario del proyecto se quedan claros también en tema oscuro. */
#input-slug:not([readonly])[b-8j7igczt9t] {
    background-color: #fff;
}

/* El feedback de validación del slug ocupa toda la fila del input-group. Solo
   alcanza al marcado de esta vista: el de la parcial de datos de cuenta se
   resuelve en su propio módulo, sin depender de ninguna regla de aquí. */
.input-group > .invalid-feedback[b-8j7igczt9t],
.form-control.is-invalid ~ .invalid-feedback[b-8j7igczt9t] {
    display: block;
    width: 100%;
}

/* === Pestaña de perfil público === */

/* La equis que quita un curso de la píldora. Sin la altura de línea forzada, el
   botón estira la píldora y la deja más alta que las de al lado. */
.edu-editar-perfil__quitar-curso[b-8j7igczt9t] {
    line-height: 1;
}

    /* El icono, algo menor que el texto de la píldora: a tamaño completo la equis
       pesa más que el nombre del curso, que es lo que se viene a leer. */
    .edu-editar-perfil__quitar-curso .bi[b-8j7igczt9t] {
        font-size: .9rem;
    }

/* La URL de cada red social, recortada con puntos suspensivos cuando no cabe.
   El límite es el ancho de su columna y no una medida fija: el max-width:300px
   que había en el marcado se salía en móvil, donde la fila no mide 300. El
   recorte lo hace .text-truncate del marcado; aquí solo se le pone el techo y se
   alinea con el nombre que lleva al lado. */
.edu-editar-perfil__enlace-red[b-8j7igczt9t] {
    max-width: 100%;
    vertical-align: middle;
}
/* /Areas/Profesor/Views/Cuenta/Index.cshtml.rz.scp.css */
/* =====================================================
   Areas/Profesor/Views/Cuenta/Index.cshtml.css
   Estilos del dashboard de cuenta del profesor.

   Aquí solo vive lo que es propio de esta pantalla y lo pinta Razor. Las filas de
   las cuatro tablas las crea el JavaScript, así que sus estilos van a
   componentes/tablas.css: el CSS con scope no alcanza a lo que no genera Razor.
   ===================================================== */

/* Recuadro que ocupa el lugar de la foto cuando el profesor no subió ninguna.
   Solo aporta el tamaño: el color, la forma y el centrado siguen viniendo de las
   utilidades de Bootstrap que ya usaba la vista.

   Los dos valores estaban en atributos style en el marcado. Van juntos aquí porque
   son lo mismo —el hueco de la foto y el icono que lo llena—, y el tamaño del icono
   solo tiene sentido en relación con el del recuadro: separarlos era garantizar que
   un día alguien cambiara uno y no el otro.

   Mismo nombre y misma función que en la cuenta del alumno; son dos archivos con
   scope distinto, así que cada vista necesita su propia declaración. */
.edu-profesor-cuenta__avatar-vacio[b-5qjdm5khh9] {
    width: 90px;
    height: 90px;
}

    .edu-profesor-cuenta__avatar-vacio .bi[b-5qjdm5khh9] {
        font-size: 2.5rem;
    }
/* /Areas/Profesor/Views/Cuenta/_ModalRetiro.cshtml.rz.scp.css */
/* =====================================================
   Areas/Profesor/Views/Cuenta/_ModalRetiro.cshtml.css
   Estilos con scope de la parcial del modal de solicitud de retiro.

   Este bloque vivía en el Index.cshtml.css de la vista y quedó sin efecto cuando el
   modal salió a esta parcial: el CSS con scope se aplica al marcado de SU propio
   .cshtml, y una parcial no recibe el atributo b-xxxxx de la vista que la invoca.
   Aquí sí, porque este archivo acompaña al .cshtml donde está el marcado.

   No hace falta cargar nada en la vista: el bundle con scope
   (~/Akcadmia.Web.styles.css) ya lo trae el layout.

   Sin prefijo #modal-retiro en el selector: el scope ya limita estas reglas a los
   elementos de esta parcial, así que acotar por id solo sumaría especificidad.
   ===================================================== */

/* === Placeholders del formulario ===
   Venían con el gris fuerte de Bootstrap y se leían como datos ya escritos: el
   profesor creía tener el formulario a medio llenar. Se aclaran para que se
   distingan de un valor real.

   No alcanza al campo de entidad: ese input lo crea ComboboxBuscable en tiempo de
   ejecución sobre el select retiro-entidad, y al no existir cuando Razor genera el
   marcado no lleva el atributo del scope. Si algún día molesta, la salida es la
   opción claseInput del componente, no mover esta regla. */
.form-control[b-ss4nrp9od5]::placeholder,
.form-control[b-ss4nrp9od5]::-webkit-input-placeholder {
    color: #b9bfc5;
    opacity: 1; /* Firefox aplica su propia opacidad al placeholder; se anula. */
    font-weight: 400;
    font-style: italic;
}

/* === Indicador de las tres fases ===
   Solo una línea de círculos con su rótulo. El paso activo se marca con el color
   de la marca; los otros quedan en gris, sin tachar ni atenuar de más: volver
   atrás es normal aquí y no debe parecer un error.

   Los tonos del paso INACTIVO salen de --edu-texto-suave, --edu-texto y
   --edu-borde, que la paleta voltea con el tema. Venían de --bs-secondary-color y
   --bs-secondary-rgb, que Bootstrap solo conmuta con data-bs-theme y aquí el
   interruptor es data-tema: el rótulo se quedaba en el gris casi negro del tema
   claro sobre el modal oscuro y los pasos sin seleccionar desaparecían. */
.edu-retiro__pasos[b-ss4nrp9od5] {
    display: flex;
    gap: .25rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

.edu-retiro__paso[b-ss4nrp9od5] {
    flex: 1 1 0;
    /* min-width 0: sin esto un rótulo largo estira su columna y las tres dejan de
       medir lo mismo. */
    min-width: 0;
    color: var(--edu-texto-suave);
    border-top: .2rem solid var(--edu-borde);
}

/* El paso ES un botón, pero no debe parecerlo: sin fondo, sin borde y heredando el
   color del <li>, que es quien lleva el estado. La disposición en fila y el relleno
   superior bajan aquí desde el <li> para que toda la cabecera sea zona pulsable y
   no solo las letras.

   Sin la clase .btn de Bootstrap a propósito: su :hover escribe
   background-color: var(--bs-btn-hover-bg), variable que solo definen las variantes
   de color, y en un botón sin variante esa declaración es inválida y el fondo cae a
   transparente. */
.edu-retiro__paso-btn[b-ss4nrp9od5] {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: .5rem 0 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
}

    /* Deshabilitado es el estado normal del paso en curso y de los que aún no
       tocan, así que no se atenúa: la opacidad volvería a dejar ilegible el rótulo
       que este bloque acaba de arreglar. */
    .edu-retiro__paso-btn:disabled[b-ss4nrp9od5] {
        cursor: default;
    }

    .edu-retiro__paso-btn:not(:disabled):hover[b-ss4nrp9od5],
    .edu-retiro__paso-btn:not(:disabled):focus-visible[b-ss4nrp9od5] {
        color: var(--bs-primary);
    }

.edu-retiro__paso span[b-ss4nrp9od5] {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--edu-borde);
    color: var(--edu-texto);
    font-weight: 700;
    font-size: .75rem;
}

.edu-retiro__paso--activo[b-ss4nrp9od5] {
    color: var(--bs-primary);
    border-top-color: var(--bs-primary);
    font-weight: 600;
}

    .edu-retiro__paso--activo span[b-ss4nrp9od5] {
        background: var(--bs-primary);
        color: #fff;
    }

/* === La cifra de la fase 2 ===
   Es el número que el profesor va a escribir en SUNAT, y el único que tiene que
   recordar de toda la pantalla: por eso va solo, grande y con el verde del dinero
   que la familia reserva para las cifras que se leen por sí mismas.

   El color sale de --edu-soles y no de --bs-success: aquel es el token de DINERO
   REAL de la paleta y la paleta lo voltea con el tema, mientras que el verde de
   Bootstrap se queda en el mismo #198754 sobre el modal oscuro, donde una cifra
   de este tamaño se sostiene por poco. El sentido además es el correcto: esto es
   un importe, no un mensaje de "correcto".

   tabular-nums alinea los dígitos a ancho fijo: sin eso, el número baila al
   repintarse si el profesor vuelve atrás y cambia el monto. */
.edu-retiro__cifra[b-ss4nrp9od5] {
    font-size: clamp(2rem, 1.4rem + 2.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--edu-soles);
    font-variant-numeric: tabular-nums;
    margin: 0 0 .25rem;
}

/* Por debajo de 26rem los tres rótulos no caben en una línea y se parten. Se
   quedan solo los círculos, que siguen diciendo en qué paso está. */
@media (max-width: 26rem) {
    .edu-retiro__paso-btn[b-ss4nrp9od5] {
        font-size: 0;
        gap: 0;
        justify-content: center;
    }

    .edu-retiro__paso span[b-ss4nrp9od5] {
        font-size: .75rem;
    }
}
/* /Areas/Profesor/Views/Horario/Index.cshtml.rz.scp.css */
/* =====================================================
   Areas/Profesor/Views/Horario/Index.cshtml.css
   Estilos propios de la vista: encabezado y navegación de semana.

   La grilla NO se estila aquí: su marcado vive en la parcial compartida
   Views/Shared/_GrillaSemana.cshtml y se recarga por AJAX, así que el atributo
   b-xxxxx del CSS aislado no le aplicaría.
   Ver: wwwroot/css/componentes/horario.css y horario-profesor.css
   ===================================================== */

/* === Semana: etiqueta e input ===
   Van aquí y no en componentes/horario.css porque los pinta Razor en esta vista.
   El fondo blanco es fijo a propósito: la etiqueta no debe teñirse con el modo
   oscuro del sistema, igual que la grilla. */
#week-label[b-rxs183z3k6] {
    min-width: 215px;
    background-color: #fff !important;
    color: #212529;
}

#week-input[b-rxs183z3k6] {
    width: auto;
}

/* === Badge de ejemplo (+) del encabezado === */
.edu-horario-prof__badge-ejemplo[b-rxs183z3k6] {
    font-size: .65rem;
    padding: 2px 5px;
}
/* /Areas/Profesor/Views/Preguntas/Index.cshtml.rz.scp.css */
/* ===================================================================
   Akcadmia — Profesor / Preguntas por Tema
   Estilos "scoped": SOLO aplican al marcado que Razor renderiza EN ESTA
   VISTA. Ni la tabla ni el panel de temas caben aquí: la tabla llega en
   una parcial (Razor no le pone el atributo de scope) y el panel lo pinta
   el JavaScript. Sus reglas viven en componentes/tablas.css y en
   componentes/preguntas-temas.css.

   Solo queda la previsualización de la imagen del formulario, que sí es
   marcado estático de la vista.
   =================================================================== */
/* /Views/CiclosPublicos/Index.cshtml.rz.scp.css */
/* Tarjetas del listado de landings.
   Todo el marcado lo pinta Razor, así que el CSS con ámbito sí lo alcanza y no
   hace falta llevarlo a un componente global. */

/* La tarjeta ENTERA es el enlace: así el área pulsable es toda ella y no solo el
   texto del pie, que en móvil es un blanco pequeño. Al ser un <a>, hay que
   desactivar el subrayado y heredar el color, o el título saldría azul. */
.edu-ciclo-publico[b-ag50k52671] {
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .edu-ciclo-publico:hover[b-ag50k52671] {
        color: inherit;
        transform: translateY(-6px);
        box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .14) !important;
    }

/* Alto fijo en la imagen y no relación de aspecto: las portadas las sube quien
   escribe cada landing y llegarán con proporciones distintas. Con object-fit se
   recortan al mismo alto y la rejilla no se descuadra.

   El alto va en rem y no en píxeles para que acompañe al tamaño de fuente. */
.edu-ciclo-publico__imagen[b-ag50k52671] {
    width: 100%;
    height: 11rem;
    object-fit: cover;
    display: block;
}

/* Respaldo cuando el índice no declara imagen. El color sale de las variables de
   Bootstrap, que ya tienen su valor en cada tema. */
.edu-ciclo-publico__imagen--vacia[b-ag50k52671] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: 2.5rem;
}

/* La flecha se separa un poco al pasar por encima: señal de que lleva a otro
   sitio, sin necesidad de subrayar nada. */
.edu-ciclo-publico__accion i[b-ag50k52671] {
    transition: transform .25s ease;
}

.edu-ciclo-publico:hover .edu-ciclo-publico__accion i[b-ag50k52671] {
    transform: translateX(.25rem);
}
/* /Views/Cuenta/AceptarTerminos.cshtml.rz.scp.css */
/* Estilos de la pantalla de re-aceptación de términos. */

/* El documento va en una caja con scroll propio: se ve que es un texto largo y el
   botón de aceptar sigue estando a la vista, sin obligar a recorrer el contrato
   entero para encontrarlo. */
.edu-terminos__texto[b-b9apdnwh3f] {
    max-height: 60vh;
    overflow-y: auto;
}

/* Contraparte oscura: el tema se activa por prefers-color-scheme, así que un
   borde o un fondo fijo necesitan su pareja o se quedan claros. */
@media (prefers-color-scheme: dark) {
    .edu-terminos__texto[b-b9apdnwh3f] {
        border-color: #334155 !important;
    }
}
/* /Views/Cuenta/Ingresar.cshtml.rz.scp.css */
/* =====================================================
   Views/Cuenta/Ingresar.cshtml.css
   Estilos propios de la página de inicio de sesión
   ===================================================== */

/* El diseño que comparte con el registro —lienzo, tarjeta partida, panel con sus
   dos temas, insignia, mensaje, ilustración, formulario y botón— vive en
   componentes/acceso.css, que la vista carga en su @section Estilos. Aquí queda lo
   que solo tiene el inicio de sesión: su ancho, la entrada de su mensaje y su
   ilustración. */

/* La tarjeta es más estrecha que la del registro: el formulario tiene la mitad de
   campos y, a todo el ancho, quedarían estirados de más. En móvil y tableta es una
   caja centrada; desde 992 px, partida con el panel al lado. */
.edu-ingresar__tarjeta[b-9npg0ngk7z] {
    max-width: 40rem;
}

@media (min-width: 992px) {
    .edu-ingresar__tarjeta[b-9npg0ngk7z] {
        max-width: 60rem;
    }
}

/* Un solo mensaje en el panel, que entra escalonado al cargar: título y después
   bajada, con la animación y los retrasos del componente. */
.edu-acceso__titulo[b-9npg0ngk7z],
.edu-acceso__bajada[b-9npg0ngk7z] {
    animation: edu-acceso-aparece .55s cubic-bezier(.2, .7, .2, 1) backwards;
    animation-delay: var(--edu-acceso-retraso, 0s);
}

/* Ilustración de bienvenida, la misma para alumno y profesor. Ruta relativa al
   paquete de estilos aislados, que se sirve desde la raíz de la aplicación
   (~/Akcadmia.Web.styles.css) y no desde la carpeta de esta vista: apunta a
   ~/images/login/ aunque la aplicación se publique bajo una subruta. Solo se
   declara desde 992 px, así que en móvil ni se descarga; si falta el archivo, queda
   el halo. */
@media (min-width: 992px) {
    .edu-ingresar__imagen[b-9npg0ngk7z] {
        background-image: url("images/login/ingresar.webp");
    }
}
/* /Views/Cuenta/RecuperarContrasena.cshtml.rz.scp.css */
/* =====================================================
   Akcadmia — Views/Cuenta/RecuperarContrasena.cshtml.css
   ===================================================== */

.contenedor-autenticacion[b-1e439rcgx2] {
    background: linear-gradient(160deg, #f4f6fb 0%, #e6ecf7 100%);
}

.tarjeta-autenticacion[b-1e439rcgx2] {
    overflow: hidden;
}

.encabezado-autenticacion[b-1e439rcgx2] {
    background: linear-gradient(135deg, #0d6efd 0%, #4a90ff 100%);
}

.icono-encabezado[b-1e439rcgx2] {
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 1.4rem;
}

.input-group-text[b-1e439rcgx2] {
    background-color: #fff;
    color: #6c757d;
}

.enlace-volver[b-1e439rcgx2] {
    color: #0d6efd;
    transition: color .15s ease;
}

    .enlace-volver:hover[b-1e439rcgx2] {
        color: #0a58ca;
    }
/* /Views/Cuenta/Registro.cshtml.rz.scp.css */
/* =====================================================
   Views/Cuenta/Registro.cshtml.css
   Estilos propios de la página de registro de usuario
   ===================================================== */

/* El diseño que comparte con el inicio de sesión —lienzo, tarjeta partida, panel con
   sus dos temas, insignia, mensaje, beneficios, ilustración, formulario y botón—
   vive en componentes/acceso.css, que la vista carga en su @section Estilos. Aquí
   queda lo que solo tiene el registro: los dos mensajes por perfil, el selector, la
   barra de avance, los requisitos de la contraseña y sus dos ilustraciones. */

/* === Mensaje de cada perfil ===
   Los dos ocupan la misma celda de la rejilla y data-perfil decide cuál se ve. Al
   ocultarse, visibility espera a que acabe el desvanecido; al mostrarse, cambia en
   el acto y las piezas del mensaje entran escalonadas (ver más abajo). */
.edu-registro__mensajes[b-supet9xf61] {
    display: grid;
}

.edu-registro__mensaje[b-supet9xf61] {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease, visibility 0s linear .2s;
}

.edu-registro[data-perfil="alumno"] .edu-registro__mensaje--alumno[b-supet9xf61],
.edu-registro[data-perfil="profesor"] .edu-registro__mensaje--profesor[b-supet9xf61] {
    visibility: visible;
    opacity: 1;
    transition: none;
}

    /* Entrada escalonada del mensaje activo. La animación vive en la regla del estado
   activo, así que se dispara al cargar y otra vez en cada cambio de perfil sin que
   el script la toque. La animación y el retraso de cada pieza salen del componente. */
    .edu-registro[data-perfil="alumno"] .edu-registro__mensaje--alumno .edu-acceso__titulo[b-supet9xf61],
    .edu-registro[data-perfil="alumno"] .edu-registro__mensaje--alumno .edu-acceso__bajada[b-supet9xf61],
    .edu-registro[data-perfil="alumno"] .edu-registro__mensaje--alumno .edu-acceso__beneficio[b-supet9xf61],
    .edu-registro[data-perfil="profesor"] .edu-registro__mensaje--profesor .edu-acceso__titulo[b-supet9xf61],
    .edu-registro[data-perfil="profesor"] .edu-registro__mensaje--profesor .edu-acceso__bajada[b-supet9xf61],
    .edu-registro[data-perfil="profesor"] .edu-registro__mensaje--profesor .edu-acceso__beneficio[b-supet9xf61] {
        animation: edu-acceso-aparece .55s cubic-bezier(.2, .7, .2, 1) backwards;
        animation-delay: var(--edu-acceso-retraso, 0s);
    }

/* === Selector de perfil ===
   La pista y la pastilla son las del selector de "¿Cómo funciona?" en la portada,
   para que quien llega desde ahí reconozca el mismo control. La pastilla se mueve
   con data-perfil; el blanco del texto, con la clase active que pone Bootstrap. */
.edu-registro__selector[b-supet9xf61] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1.5rem;
    padding: .3rem;
    border: 1px solid var(--edu-borde);
    border-radius: 999px;
    background-color: var(--edu-fondo);
}

/* El índigo de marca va fijo en los dos temas: con el luminoso del tema oscuro, el
   texto blanco de la opción no llegaría al contraste mínimo. */
.edu-registro__pastilla[b-supet9xf61] {
    position: absolute;
    top: .3rem;
    bottom: .3rem;
    left: .3rem;
    width: calc(50% - .3rem);
    border-radius: 999px;
    background-color: #4F46E5;
    box-shadow: 0 .4rem 1rem rgba(79, 70, 229, .35);
    transition: transform .35s cubic-bezier(.3, 1.3, .5, 1);
}

.edu-registro[data-perfil="profesor"] .edu-registro__pastilla[b-supet9xf61] {
    transform: translateX(100%);
}

.edu-registro__opcion[b-supet9xf61] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem .5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-weight: 700;
    color: var(--edu-texto-suave);
    white-space: nowrap;
    transition: color .25s ease;
}

    .edu-registro__opcion.active[b-supet9xf61] {
        color: #FFFFFF;
    }

    .edu-registro__opcion:focus-visible[b-supet9xf61] {
        outline: 3px solid var(--edu-primario);
        outline-offset: 3px;
    }

@media (hover: hover) {
    .edu-registro__opcion:not(.active):hover[b-supet9xf61] {
        color: var(--edu-texto);
    }
}

/* === Avance del registro ===
   Un <progress> nativo, que el navegador ya anuncia como barra de progreso. Se le
   quita el aspecto del sistema y se pinta por el pseudoelemento de cada motor; van
   en reglas separadas porque un pseudoelemento desconocido invalida la regla entera
   en el motor que no lo entiende. */
.edu-registro__avance[b-supet9xf61] {
    margin-bottom: 1.25rem;
}

.edu-registro__avance-cabecera[b-supet9xf61] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--edu-texto-suave);
}

.edu-registro__avance-cifra[b-supet9xf61] {
    color: var(--edu-primario);
    font-variant-numeric: tabular-nums;
    transition: color .3s ease;
}

.edu-registro__avance--completo .edu-registro__avance-cifra[b-supet9xf61] {
    color: var(--edu-acento-texto);
}

.edu-registro__avance-barra[b-supet9xf61] {
    display: block;
    width: 100%;
    height: .5rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background-color: var(--edu-claro);
    -webkit-appearance: none;
    appearance: none;
}

    .edu-registro__avance-barra[b-supet9xf61]::-webkit-progress-bar {
        border-radius: 999px;
        background-color: var(--edu-claro);
    }

    .edu-registro__avance-barra[b-supet9xf61]::-webkit-progress-value {
        border-radius: 999px;
        background-image: linear-gradient(90deg, #4F46E5, #84CC16);
        transition: width .45s cubic-bezier(.2, .7, .2, 1);
    }

    .edu-registro__avance-barra[b-supet9xf61]::-moz-progress-bar {
        border-radius: 999px;
        background-image: linear-gradient(90deg, #4F46E5, #84CC16);
    }

/* === Requisitos de la contraseña ===
   La marca de cada requisito se dibuja en CSS: un círculo vacío que se rellena de
   lima con la palomita cuando registro.js le pone --cumple. Sin JavaScript la lista
   sigue sirviendo de ayuda: los requisitos a la vista, sin marcar. Las columnas se
   reparten solas según el ancho (dos en móvil, todas en una fila cuando caben), y
   siempre alineadas entre filas. */
.edu-registro__requisitos[b-supet9xf61] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr));
    gap: .3rem .75rem;
    margin: .55rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    line-height: 1.3;
}

.edu-registro__requisito[b-supet9xf61] {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--edu-texto-suave);
    transition: color .2s ease;
}

    .edu-registro__requisito[b-supet9xf61]::before {
        content: "";
        flex: none;
        width: .95rem;
        height: .95rem;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        background: no-repeat center / .6rem;
        transition: background-color .2s ease, border-color .2s ease;
    }

.edu-registro__requisito--cumple[b-supet9xf61] {
    color: var(--edu-acento-texto);
}

    .edu-registro__requisito--cumple[b-supet9xf61]::before {
        border-color: var(--edu-acento);
        background-color: var(--edu-acento);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231A2E05' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
        animation: edu-registro-marca-b-supet9xf61 .35s cubic-bezier(.3, 1.6, .5, 1);
    }

/* === Tableta vertical (768–991 px) ===
   El panel sigue siendo franja de cabecera, pero ya hay ancho para dos columnas:
   título y bajada a la izquierda, beneficios a la derecha. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .edu-registro__mensaje[b-supet9xf61] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 2.5rem;
        align-items: center;
        align-content: center;
    }

    .edu-acceso__beneficios[b-supet9xf61] {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 0;
    }
}

/* === Ilustraciones del registro (desde 992 px) ===
   Las dos se apilan en el hueco del panel y data-perfil decide cuál se ve; la caja,
   la flotación y la transición del cambio las pone el componente.

   Ruta relativa al paquete de estilos aislados, que se sirve desde la raíz de la
   aplicación (~/Akcadmia.Web.styles.css) y no desde la carpeta de esta vista: así
   apunta a ~/images/registro/ aunque la aplicación se publique bajo una subruta.
   Las dos imágenes se piden en cuanto se aplica esta regla, de modo que el cambio
   de perfil no espera a ninguna descarga; si falta un archivo solo queda el halo. */
@media (min-width: 992px) {
    .edu-acceso__imagen[b-supet9xf61] {
        opacity: 0;
        transform: scale(.94);
    }

    .edu-registro__imagen--alumno[b-supet9xf61] {
        background-image: url("images/registro/registro-alumno.webp");
    }

    .edu-registro__imagen--profesor[b-supet9xf61] {
        background-image: url("images/registro/registro-profesor.webp");
    }

    .edu-registro[data-perfil="alumno"] .edu-registro__imagen--alumno[b-supet9xf61],
    .edu-registro[data-perfil="profesor"] .edu-registro__imagen--profesor[b-supet9xf61] {
        opacity: 1;
        transform: none;
    }
}

/* En los teléfonos más estrechos el icono de cada opción cede su sitio al texto,
   igual que en el selector de la portada. */
@media (max-width: 359.98px) {
    .edu-registro__opcion .bi[b-supet9xf61] {
        display: none;
    }
}

/* === Animaciones ===
   La única propia del registro: la marca de los requisitos. Las demás son del
   componente. */
@keyframes edu-registro-marca-b-supet9xf61 {
    0% {
        transform: scale(.5);
    }

    60% {
        transform: scale(1.25);
    }
}
/* /Views/Cuenta/RestablecerContrasena.cshtml.rz.scp.css */
/* ========================================================
   Akcadmia — Views/Cuenta/RestablecerContrasena.cshtml.css
   ======================================================== */

.contenedor-autenticacion[b-vz6vzvpkz6] {
    background: linear-gradient(160deg, #f4f6fb 0%, #e6ecf7 100%);
}

.tarjeta-autenticacion[b-vz6vzvpkz6] {
    overflow: hidden;
}

.encabezado-autenticacion[b-vz6vzvpkz6] {
    background: linear-gradient(135deg, #0d6efd 0%, #4a90ff 100%);
}

.icono-encabezado[b-vz6vzvpkz6] {
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 1.4rem;
}

.input-group-text[b-vz6vzvpkz6] {
    background-color: #fff;
    color: #6c757d;
}

/* Ancla para el botón de ojo (absoluto, fuera del flujo del input-group,
   para que el input siga siendo el último hijo y validaciones.js inserte
   el .invalid-feedback en la posición correcta). */
.input-group[b-vz6vzvpkz6] {
    position: relative;
}

.boton-ojo[b-vz6vzvpkz6] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    height: 100%;
    padding: 0 .9rem;
    border: 0;
    background: transparent;
    color: #6c757d;
    line-height: 1;
    cursor: pointer;
}

    .boton-ojo:hover[b-vz6vzvpkz6] {
        color: #0d6efd;
    }

/* Espacio para el ojo y anulación del icono de validación de Bootstrap,
   que quedaría debajo del botón. */
.campo-secreto[b-vz6vzvpkz6] {
    padding-right: 3rem;
    background-image: none !important;
}

.medidor-fortaleza[b-vz6vzvpkz6] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.pista-fortaleza[b-vz6vzvpkz6] {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: #e9ecef;
    overflow: hidden;
}

.barra-fortaleza[b-vz6vzvpkz6] {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background-color: transparent;
    transition: width .25s ease, background-color .25s ease;
}

    .barra-fortaleza.nivel-0[b-vz6vzvpkz6] {
        background-color: #dc3545;
    }

    .barra-fortaleza.nivel-1[b-vz6vzvpkz6] {
        background-color: #fd7e14;
    }

    .barra-fortaleza.nivel-2[b-vz6vzvpkz6] {
        background-color: #ffc107;
    }

    .barra-fortaleza.nivel-3[b-vz6vzvpkz6] {
        background-color: #20c997;
    }

    .barra-fortaleza.nivel-4[b-vz6vzvpkz6] {
        background-color: #198754;
    }

.texto-fortaleza[b-vz6vzvpkz6] {
    flex: 0 0 auto;
    min-width: 5.5rem;
    text-align: right;
    color: #6c757d;
}

.enlace-volver[b-vz6vzvpkz6] {
    color: #0d6efd;
    transition: color .15s ease;
}

    .enlace-volver:hover[b-vz6vzvpkz6] {
        color: #0a58ca;
    }
/* /Views/Home/Index.cshtml.rz.scp.css */
/* Degradado del hero: se queda dentro de la familia del índigo de marca en lugar de
   ir del azul al violeta. Los tres pasos son el mismo color a distinta profundidad,
   así que la portada se lee como la plataforma y no como otra página. */
.hero-section[b-j4i62n3fe5] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #3730A3 0%, #4F46E5 55%, #6366F1 100%);
    min-height: 85vh;
    display: flex;
    align-items: center;
}

/* En tema oscuro el degradado claro deslumbraría: es la franja más grande de la
   página y sería la única clara entre fondos oscuros. Baja un escalón sin salir de
   la familia del índigo. */
[data-tema="oscuro"] .hero-section[b-j4i62n3fe5] {
    background: linear-gradient(135deg, #1E1B4B 0%, #312E81 55%, #3730A3 100%);
}

/* El contenido va por encima de la capa decorativa. */
.hero-section > .container[b-j4i62n3fe5] {
    position: relative;
    z-index: 1;
}

/* === Fondo vivo del hero ===
   Dos halos de luz, lima y violeta —los colores de acción y de marca—, que derivan
   muy despacio, y una trama de puntos que se desvanece hacia abajo. Solo se anima
   transform, que el navegador mueve sin recalcular la página; nada de filtros de
   desenfoque, que en un móvil modesto cuestan cada fotograma. */
.hero-section[b-j4i62n3fe5]::before,
.hero-section[b-j4i62n3fe5]::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 55vmax;
    height: 55vmax;
    border-radius: 50%;
    pointer-events: none;
}

.hero-section[b-j4i62n3fe5]::before {
    top: -28vmax;
    right: -18vmax;
    background: radial-gradient(closest-side, rgba(163, 230, 53, .22), transparent);
    animation: edu-portada-deriva-a-b-j4i62n3fe5 22s ease-in-out infinite alternate;
}

.hero-section[b-j4i62n3fe5]::after {
    bottom: -32vmax;
    left: -22vmax;
    background: radial-gradient(closest-side, rgba(196, 181, 253, .3), transparent);
    animation: edu-portada-deriva-b-b-j4i62n3fe5 28s ease-in-out infinite alternate;
}

.edu-portada__aurora[b-j4i62n3fe5] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.6px);
    background-size: 1.75rem 1.75rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}

@keyframes edu-portada-deriva-a-b-j4i62n3fe5 {
    to {
        transform: translate3d(-8vmax, 6vmax, 0) scale(1.1);
    }
}

@keyframes edu-portada-deriva-b-b-j4i62n3fe5 {
    to {
        transform: translate3d(9vmax, -5vmax, 0) scale(1.08);
    }
}

/* === Entrada del hero ===
   Insignia, título, texto, botones y animación aparecen escalonados al cargar. Es
   CSS puro y no depende de ningún guion: el hero es lo primero que se ve y no
   puede esperar a que se descargue nada. */
.edu-portada__entrada[b-j4i62n3fe5] {
    animation: edu-portada-entrada-b-j4i62n3fe5 .7s cubic-bezier(.2, .7, .2, 1) both;
}

.edu-portada__entrada--2[b-j4i62n3fe5] {
    animation-delay: .08s;
}

.edu-portada__entrada--3[b-j4i62n3fe5] {
    animation-delay: .16s;
}

.edu-portada__entrada--4[b-j4i62n3fe5] {
    animation-delay: .24s;
}

.edu-portada__entrada--5[b-j4i62n3fe5] {
    animation-delay: .32s;
}

@keyframes edu-portada-entrada-b-j4i62n3fe5 {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

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

/* Texto de apoyo del hero: blanco atenuado, que sobre el índigo sigue por encima
   del contraste mínimo y deja al título como lo primero que se lee. */
.edu-portada__bajada[b-j4i62n3fe5] {
    color: rgba(255, 255, 255, .85);
}

/* En el teléfono los dos botones del hero se apilan a todo el ancho, igual que los
   del cierre: con su ancho natural quedaría uno largo sobre otro corto. */
@media (max-width: 575.98px) {
    .edu-portada__acciones .btn[b-j4i62n3fe5] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section[b-j4i62n3fe5]::before,
    .hero-section[b-j4i62n3fe5]::after,
    .edu-portada__entrada[b-j4i62n3fe5] {
        animation: none;
    }
}

/* .course-card se fue a componentes/portada-ciclos.css como .edu-ciclo: la
   pinta el JavaScript y aquí, con scope, nunca llegó a aplicarse.
   .teacher-card y .coin-badge se eliminaron: no las usa ningún elemento de
   esta vista. */

/* === Marco de la animación + estadísticas ===
   Un solo contenedor redondeado: el iframe 16:9 arriba y la franja de datos
   abajo, con el MISMO fondo que el interior de la animación para que se lean
   como una sola pieza — un "reproductor" con su barra de datos, no dos cajas.

   El tono es --edu-oscuro, el índigo PROFUNDO de la paleta, y el escalón importa
   tanto como la familia. Con el índigo medio, el mismo paso central del hero, el
   bloque se camuflaba con el fondo y la animación perdía su sitio; un peldaño
   por debajo se recorta contra la portada sin salirse del color de marca.

   Este valor va a la par del fondo del documento de la animación
   —hero-akcadmia.anim, donde está escrito cuatro veces—: si uno cambia y el otro
   no, vuelve a verse la costura entre el marco y el escenario. */
.edu-portada__marco[b-j4i62n3fe5] {
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    background-color: #312E81;
}

.edu-portada__animacion[b-j4i62n3fe5] {
    aspect-ratio: 16 / 9;
}

    .edu-portada__animacion iframe[b-j4i62n3fe5] {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

/* === Datos de la portada (alumnos, profesores, ciclos, clases) ===
   Franja horizontal bajo la animación. Por debajo de tableta pasa a 2×2: en
   cuatro columnas estrechas los textos de las ventajas se partirían en renglones.

   Hay dos con la misma rejilla: la de las ventajas, que es la que se ve, y la de
   las cifras, que la sustituye cuando todas superan su mínimo. El marco pasa a
   rejilla de una columna, con la animación en la primera fila y las DOS franjas
   en la misma celda de la segunda, una encima de otra; la que no toca se oculta
   con visibility. Así la fila mide siempre lo que la franja más alta y el cambio
   no mueve nada de la página, se parta o no algún texto. visibility, y no
   display, porque así la oculta sigue midiendo; además deja de recibir el foco y
   desaparece para el lector de pantalla, igual que con hidden. */
.edu-portada__marco[b-j4i62n3fe5] {
    display: grid;
}

    .edu-portada__marco > .edu-portada__datos[b-j4i62n3fe5] {
        grid-area: 2 / 1;
    }

.edu-portada__datos[b-j4i62n3fe5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.edu-portada__datos--oculta[b-j4i62n3fe5] {
    visibility: hidden;
}

@media (max-width: 767.98px) {
    .edu-portada__datos[b-j4i62n3fe5] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.edu-portada__dato[b-j4i62n3fe5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .85rem .5rem;
    color: #fff;
}

    .edu-portada__dato + .edu-portada__dato[b-j4i62n3fe5] {
        border-left: 1px solid rgba(255, 255, 255, .14);
    }

    .edu-portada__dato small[b-j4i62n3fe5] {
        color: rgba(255, 255, 255, .72);
    }

/* En 2×2 los filetes siguen a la rejilla: el vertical solo entre las dos columnas
   y uno horizontal entre las dos filas. */
@media (max-width: 767.98px) {
    .edu-portada__dato:nth-child(odd)[b-j4i62n3fe5] {
        border-left: 0;
    }

    .edu-portada__dato:nth-child(n + 3)[b-j4i62n3fe5] {
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    [data-tema="oscuro"] .edu-portada__dato:nth-child(n + 3)[b-j4i62n3fe5] {
        border-top-color: rgba(255, 255, 255, .1);
    }
}

.edu-portada__cifra[b-j4i62n3fe5] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    /* Lima luminoso: es el color de acción de la plataforma, y sobre el índigo
       del marco es esta versión la que da contraste, no la oscurecida. */
    color: #A3E635;
}

/* La cifra hecha palabra, en la franja de las ventajas: el mismo color y el mismo
   alto de renglón que el número al que cede el sitio, con un cuerpo menor porque
   una palabra ocupa más que una cifra. Así las dos franjas miden lo mismo siempre
   que ningún texto se parta. */
.edu-portada__cifra--texto[b-j4i62n3fe5] {
    font-size: 1rem;
    line-height: 1.485rem;
}

.edu-portada__icono[b-j4i62n3fe5] {
    font-size: 1.4rem;
    opacity: .85;
    color: rgba(255, 255, 255, .88);
}

/* Los dos datos navegables. color: inherit para que el enlace tome el color del
   dato en cada tema: con el azul de enlace por defecto no encajaría en ninguno
   de los dos. */
.edu-portada__dato--enlace[b-j4i62n3fe5] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

    .edu-portada__dato--enlace:hover[b-j4i62n3fe5] {
        color: inherit;
        background-color: rgba(255, 255, 255, .12);
    }

        /* Señal de que se puede pulsar: el icono se agranda un poco. */
        .edu-portada__dato--enlace:hover .edu-portada__icono[b-j4i62n3fe5] {
            opacity: 1;
            transform: scale(1.1);
        }

/* === Franja de los creadores ===
   Las mismas medidas que en /nosotros para que la cara se reconozca al pasar de
   una página a la otra. A color desde el principio, sin efectos: aquí la foto es
   un dato, no un adorno. */
.edu-portada__creador-foto[b-j4i62n3fe5] {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

/* La carrera, bajo el cargo. Un punto por debajo del .small del cargo, para que
   los tres renglones se lean en orden de importancia: nombre, qué hace, qué
   estudió. El tamaño va en una clase y no con una utilidad de Bootstrap porque
   la misma línea aparece en /nosotros y las dos tienen que verse igual. El color
   lo pone text-muted, que ya tiene su valor para cada tema. */
.edu-portada__creador-carrera[b-j4i62n3fe5] {
    font-size: .78rem;
    line-height: 1.35;
}

/* La tarjeta de cada creador en modo oscuro.
   Se pinta con la utilidad bg-body, y --bs-body-bg es una de las dos variables de
   Bootstrap que el tema oscuro NO remapea a propósito, así que la tarjeta se
   quedaba BLANCA mientras el nombre heredaba el texto claro de la sección: letras
   casi blancas sobre papel blanco. El cargo se leía a medias solo porque
   text-muted sí tiene su color propio en oscuro.

   El fondo va un punto por encima del de la sección para que la tarjeta siga
   siendo una tarjeta, y el filete interior sustituye a la sombra, que sobre fondo
   oscuro no se ve. Se hace con box-shadow y no con border para no sumar dos
   píxeles al alto solo en este tema. El !important es porque bg-body lo lleva. */
[data-tema="oscuro"] .edu-portada__creador[b-j4i62n3fe5] {
    background-color: #223047 !important;
    color: #E2E8F0;
    box-shadow: inset 0 0 0 1px #334155;
}

/* === Marco de la animación en modo oscuro ===
   El mismo criterio que akcadmia.css: el tema lo decide el atributo del <html>,
   que el visitante cambia desde la barra de navegación. Aquí solo se acompaña
   el marco; el interior de la animación lo resuelve animacion-hero.js, que
   reescribe la consulta de medios del documento antes de montarlo.

   Ahora que la variante clara también va sobre índigo, la mayoría de estas
   reglas coinciden con las de base y solo quedan las que de verdad cambian: el
   marco, su borde y el matiz del texto secundario. */
[data-tema="oscuro"] .edu-portada__marco[b-j4i62n3fe5] {
    border-color: rgba(255, 255, 255, .18);
    background-color: #141A38;
}

[data-tema="oscuro"] .edu-portada__datos[b-j4i62n3fe5] {
    border-top-color: rgba(255, 255, 255, .12);
}

[data-tema="oscuro"] .edu-portada__dato + .edu-portada__dato[b-j4i62n3fe5] {
    border-left-color: rgba(255, 255, 255, .1);
}

[data-tema="oscuro"] .edu-portada__dato small[b-j4i62n3fe5] {
    color: rgba(255, 255, 255, .65);
}

[data-tema="oscuro"] .edu-portada__dato--enlace:hover[b-j4i62n3fe5] {
    background-color: rgba(255, 255, 255, .1);
}
/* /Views/Home/_PortadaCierre.cshtml.rz.scp.css */
/* === Panel de cierre ===
   La familia del degradado del hero en un panel redondeado, con un halo lima en
   la esquina y la trama de puntos subiendo desde abajo. Es índigo en los dos
   temas: en el oscuro baja un escalón, igual que el hero, para no deslumbrar.

   En el claro empieza un paso más hondo que el hero y termina en el índigo de
   marca, sin llegar al #6366F1: aquí el texto va centrado y cruza el panel
   entero, y sobre ese extremo claro el blanco atenuado no llega a 4,5:1. */
.edu-portada-cierre[b-wpnkbsnvja] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
    border-radius: 1.75rem;
    background: linear-gradient(135deg, #312E81 0%, #3730A3 50%, #4F46E5 100%);
    box-shadow: 0 1.5rem 3rem rgba(49, 46, 129, .25);
    text-align: center;
}

[data-tema="oscuro"] .edu-portada-cierre[b-wpnkbsnvja] {
    background: linear-gradient(135deg, #1E1B4B 0%, #312E81 55%, #3730A3 100%);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .45);
}

/* El halo se centra en la esquina superior derecha y no en el panel: en plena
       superficie, el lima mezclado con el índigo se ve como una mancha grisácea;
       asomando por el borde se lee como luz. El desplazamiento va con transform
       porque sus porcentajes son del propio halo, y así cae en la esquina mida lo
       que mida el panel. */
.edu-portada-cierre[b-wpnkbsnvja]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: min(28rem, 70%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(163, 230, 53, .22), transparent);
    transform: translate(35%, -50%);
}

.edu-portada-cierre[b-wpnkbsnvja]::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.6px);
    background-size: 1.75rem 1.75rem;
    -webkit-mask-image: linear-gradient(to top, #000, transparent 75%);
    mask-image: linear-gradient(to top, #000, transparent 75%);
}

.edu-portada-cierre__titulo[b-wpnkbsnvja] {
    margin: 0 0 .75rem;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.edu-portada-cierre__texto[b-wpnkbsnvja] {
    max-width: 34rem;
    margin: 0 auto 2rem;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .85);
}

.edu-portada-cierre__acciones[b-wpnkbsnvja] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
}

/* En el teléfono los botones se apilan a todo el ancho. */
@media (max-width: 575.98px) {
    .edu-portada-cierre__acciones .btn[b-wpnkbsnvja] {
        width: 100%;
    }
}
/* /Views/Home/_PortadaComoFunciona.cshtml.rz.scp.css */
/* === Selector "Soy alumno / Soy profesor" ===
   Los botones de opción se ocultan sin salir del árbol de accesibilidad: siguen
   recibiendo el foco y las flechas del teclado. Lo visible son sus etiquetas. */
.edu-portada-pasos[b-cof3l6kz8h] {
    position: relative;
}

.edu-portada-pasos__radio[b-cof3l6kz8h] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* La pista: las dos etiquetas a partes iguales sobre el fondo de la página. En
   pantalla ancha mide lo que su contenido; en móvil, todo el ancho. */
.edu-portada-pasos__selector[b-cof3l6kz8h] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: .3rem;
    border: 1px solid var(--edu-borde);
    border-radius: 999px;
    background-color: var(--edu-fondo);
}

/* La pastilla mide media pista y, para pasar al otro lado, se desliza su propio
   ancho. El índigo de marca va fijo en los dos temas: con el luminoso del tema
   oscuro, el texto blanco de la etiqueta no llegaría al contraste mínimo. */
.edu-portada-pasos__pastilla[b-cof3l6kz8h] {
    position: absolute;
    top: .3rem;
    bottom: .3rem;
    left: .3rem;
    width: calc(50% - .3rem);
    border-radius: 999px;
    background-color: #4F46E5;
    box-shadow: 0 .4rem 1rem rgba(79, 70, 229, .35);
    transition: transform .35s cubic-bezier(.3, 1.3, .5, 1);
}

.edu-portada-pasos__opcion[b-cof3l6kz8h] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: .7rem 1.6rem;
    border-radius: 999px;
    font-weight: 700;
    color: var(--edu-texto-suave);
    white-space: nowrap;
    cursor: pointer;
    transition: color .25s ease;
}

    .edu-portada-pasos__opcion:hover[b-cof3l6kz8h] {
        color: var(--edu-texto);
    }

.edu-portada-pasos__radio--profesor:checked ~ .edu-portada-pasos__selector .edu-portada-pasos__pastilla[b-cof3l6kz8h] {
    transform: translateX(100%);
}

.edu-portada-pasos__radio--alumno:checked ~ .edu-portada-pasos__selector .edu-portada-pasos__opcion--alumno[b-cof3l6kz8h],
.edu-portada-pasos__radio--profesor:checked ~ .edu-portada-pasos__selector .edu-portada-pasos__opcion--profesor[b-cof3l6kz8h] {
    color: #FFFFFF;
}

/* El foco del teclado se dibuja en la etiqueta, porque el botón real no se ve. */
.edu-portada-pasos__radio--alumno:focus-visible ~ .edu-portada-pasos__selector .edu-portada-pasos__opcion--alumno[b-cof3l6kz8h],
.edu-portada-pasos__radio--profesor:focus-visible ~ .edu-portada-pasos__selector .edu-portada-pasos__opcion--profesor[b-cof3l6kz8h] {
    outline: 3px solid var(--edu-primario);
    outline-offset: 3px;
}

/* === Los pasos ===
   Tres columnas en pantalla ancha y una línea de tiempo vertical en móvil. Solo
   se ve la lista del perfil marcado; al cambiar, la nueva entra paso a paso (ver
   "Movimiento de los pasos", más abajo). */
.edu-portada-pasos__lista[b-cof3l6kz8h] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin: 3rem 0 0;
    padding: 0;
    list-style: none;
}

.edu-portada-pasos__lista--profesor[b-cof3l6kz8h],
.edu-portada-pasos__radio--profesor:checked ~ .edu-portada-pasos__lista--alumno[b-cof3l6kz8h] {
    display: none;
}

.edu-portada-pasos__radio--profesor:checked ~ .edu-portada-pasos__lista--profesor[b-cof3l6kz8h] {
    display: grid;
}

.edu-portada-pasos__paso[b-cof3l6kz8h] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    /* Tramo de línea de cada paso al siguiente, de borde a borde de los círculos.
       Va por tramos y no como una sola línea bajo la lista: así termina justo en el
       último círculo, mida lo que mida su texto. El 100% es el ancho del paso; se
       suma el hueco entre columnas y se resta un círculo entero. */
    .edu-portada-pasos__paso:not(:last-child)[b-cof3l6kz8h]::after {
        content: "";
        position: absolute;
        top: calc(2rem - 1px);
        left: calc(50% + 2rem);
        width: calc(100% - 2rem);
        height: 2px;
        background-color: #4F46E5;
        opacity: .55;
        transform-origin: left center;
    }

    /* El último tramo se funde con el lima de la meta. */
    .edu-portada-pasos__paso:nth-last-child(2)[b-cof3l6kz8h]::after {
        background-image: linear-gradient(90deg, #4F46E5, var(--edu-acento));
    }

.edu-portada-pasos__circulo[b-cof3l6kz8h] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background-color: #4F46E5;
    color: #FFFFFF;
    font-size: 1.6rem;
    box-shadow: 0 0 0 .45rem rgba(79, 70, 229, .14);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

[data-tema="oscuro"] .edu-portada-pasos__circulo[b-cof3l6kz8h] {
    box-shadow: 0 0 0 .45rem rgba(129, 140, 248, .2);
}

/* La meta: el último paso va en el lima de acción, con el texto oscuro que pide. */
.edu-portada-pasos__paso:last-child .edu-portada-pasos__circulo[b-cof3l6kz8h] {
    background-color: var(--edu-acento);
    color: var(--edu-acento-contraste);
    box-shadow: 0 0 0 .45rem rgba(132, 204, 22, .2);
}

.edu-portada-pasos__moneda[b-cof3l6kz8h] {
    width: 1.9rem;
    height: 1.9rem;
}

.edu-portada-pasos__numero[b-cof3l6kz8h] {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--edu-texto-suave);
}

.edu-portada-pasos__titulo[b-cof3l6kz8h] {
    margin: .25rem 0 .4rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.edu-portada-pasos__texto[b-cof3l6kz8h] {
    max-width: 17rem;
    margin: 0 auto;
    color: var(--edu-texto-suave);
}

/* === El paso que lleva al registro ===
   Solo sin sesión, porque lo decide la vista. El título se lee como enlace y una
   flecha avanza al pasar el cursor. stretched-link extiende la zona pulsable a
   todo el paso, y el foco del teclado se dibuja en esa misma zona para que se vea
   qué se va a abrir. */
.edu-portada-pasos__enlace[b-cof3l6kz8h] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--edu-primario);
    text-decoration: none;
}

    .edu-portada-pasos__enlace .bi[b-cof3l6kz8h] {
        font-size: .9em;
        transition: transform .25s ease;
    }

    .edu-portada-pasos__enlace:focus-visible[b-cof3l6kz8h] {
        outline: none;
    }

        .edu-portada-pasos__enlace:focus-visible[b-cof3l6kz8h]::after {
            outline: 3px solid var(--edu-primario);
            outline-offset: .4rem;
            border-radius: 1rem;
        }

/* === Movimiento de los pasos ===
   Todo arranca cuando js/home/aparicion-portada.js revela el bloque, y vuelve a
   empezar cada vez que se cambia de perfil: la lista que aparece pasa de
   display: none a verse, y el navegador reinicia sus animaciones. Sin el guion, o
   con la preferencia de menos movimiento, la clase no llega y todo queda quieto y
   a la vista.

   Primero la entrada: cada paso sube, su círculo aparece con un pequeño rebote,
   uno tras otro, y los tramos de línea se dibujan hacia el paso siguiente. Las
   entradas rellenan solo hacia atrás (backwards): al terminar sueltan el
   transform, y el realce del cursor puede usarlo.

   Después, en bucle, un pulso recorre los círculos 1, 2 y 3, y una chispa viaja
   por cada tramo justo antes del pulso del círculo al que llega, como guiando la
   lectura. Un ciclo dura 4,5 s y cada círculo pulsa en su tercio. */
.edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso[b-cof3l6kz8h] {
    animation: edu-portada-pasos-paso-b-cof3l6kz8h .6s cubic-bezier(.2, .7, .2, 1) .2s backwards;
}

.edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__circulo[b-cof3l6kz8h] {
    animation: edu-portada-pasos-circulo-b-cof3l6kz8h .55s cubic-bezier(.3, 1.4, .5, 1) .2s backwards;
}

.edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:nth-child(2)[b-cof3l6kz8h],
.edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:nth-child(2) .edu-portada-pasos__circulo[b-cof3l6kz8h] {
    animation-delay: .38s;
}

.edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:nth-child(3)[b-cof3l6kz8h],
.edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:nth-child(3) .edu-portada-pasos__circulo[b-cof3l6kz8h] {
    animation-delay: .56s;
}

.edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:not(:last-child)[b-cof3l6kz8h]::after {
    animation: edu-portada-pasos-tramo-b-cof3l6kz8h .5s ease-out .5s backwards;
}

.edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:nth-child(2)[b-cof3l6kz8h]::after {
    animation-delay: .7s;
}

/* El pulso: un anillo del color del círculo que crece y se desvanece. */
.edu-portada-pasos__circulo[b-cof3l6kz8h]::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #4F46E5;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

[data-tema="oscuro"] .edu-portada-pasos__circulo[b-cof3l6kz8h]::after {
    border-color: #818CF8;
}

.edu-portada-pasos__paso:last-child .edu-portada-pasos__circulo[b-cof3l6kz8h]::after {
    border-color: var(--edu-acento);
}

.edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__circulo[b-cof3l6kz8h]::after {
    animation: edu-portada-pasos-pulso-b-cof3l6kz8h 4.5s ease-out 1.4s infinite;
}

.edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:nth-child(2) .edu-portada-pasos__circulo[b-cof3l6kz8h]::after {
    animation-delay: 2.9s;
}

.edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:nth-child(3) .edu-portada-pasos__circulo[b-cof3l6kz8h]::after {
    animation-delay: 4.4s;
}

/* La chispa: un destello lima que recorre el tramo. Va en ::before, encima del
       tramo y con su misma caja, para que el tramo conserve su color y su
       degradado y solo se mueva la luz. Pasa por debajo de los círculos, que
       llevan el mismo z-index y van después en el marcado. */
.edu-portada-pasos__paso:not(:last-child)[b-cof3l6kz8h]::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(2rem - 2px);
    left: calc(50% + 2rem);
    width: calc(100% - 2rem);
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--edu-acento), transparent) no-repeat;
    background-size: 35% 100%;
    background-position: -60% 0;
    opacity: 0;
    pointer-events: none;
}

.edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:not(:last-child)[b-cof3l6kz8h]::before {
    animation: edu-portada-pasos-chispa-b-cof3l6kz8h 4.5s linear 1.55s infinite;
}

.edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:nth-child(2)[b-cof3l6kz8h]::before {
    animation-delay: 3.05s;
}

/* Al pasar el cursor el círculo se eleva. En el paso que lleva al registro,
   además, el título se subraya y la flecha avanza. */
@media (hover: hover) {
    .edu-portada-pasos__paso:hover .edu-portada-pasos__circulo[b-cof3l6kz8h] {
        transform: translateY(-.3rem) scale(1.05);
    }

    .edu-portada-pasos__paso--enlace:hover .edu-portada-pasos__enlace[b-cof3l6kz8h] {
        text-decoration: underline;
        text-underline-offset: .2em;
    }

        .edu-portada-pasos__paso--enlace:hover .edu-portada-pasos__enlace .bi[b-cof3l6kz8h] {
            transform: translateX(.25rem);
        }
}

@keyframes edu-portada-pasos-paso-b-cof3l6kz8h {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

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

@keyframes edu-portada-pasos-circulo-b-cof3l6kz8h {
    from {
        transform: scale(.6);
    }

    to {
        transform: none;
    }
}

@keyframes edu-portada-pasos-tramo-b-cof3l6kz8h {
    from {
        transform: scaleX(0);
    }

    to {
        transform: none;
    }
}

@keyframes edu-portada-pasos-tramo-vertical-b-cof3l6kz8h {
    from {
        transform: scaleY(0);
    }

    to {
        transform: none;
    }
}

@keyframes edu-portada-pasos-pulso-b-cof3l6kz8h {
    0% {
        transform: scale(1);
        opacity: .6;
    }

    30%, 100% {
        transform: scale(1.55);
        opacity: 0;
    }
}

@keyframes edu-portada-pasos-chispa-b-cof3l6kz8h {
    0% {
        background-position: -60% 0;
        opacity: 0;
    }

    4%, 22% {
        opacity: 1;
    }

    26%, 100% {
        background-position: 160% 0;
        opacity: 0;
    }
}

@keyframes edu-portada-pasos-chispa-vertical-b-cof3l6kz8h {
    0% {
        background-position: 0 -60%;
        opacity: 0;
    }

    4%, 22% {
        opacity: 1;
    }

    26%, 100% {
        background-position: 0 160%;
        opacity: 0;
    }
}

/* === Tableta vertical y móvil ===
   El selector ocupa todo el ancho y los pasos pasan a una línea de tiempo: el
   círculo a la izquierda, el texto a la derecha y el tramo bajando hasta el
   círculo siguiente. */
@media (max-width: 767.98px) {
    .edu-portada-pasos__selector[b-cof3l6kz8h] {
        width: 100%;
    }

    .edu-portada-pasos__opcion[b-cof3l6kz8h] {
        padding-inline: .5rem;
    }

    .edu-portada-pasos__lista[b-cof3l6kz8h] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
        margin-top: 2.25rem;
    }

    .edu-portada-pasos__paso[b-cof3l6kz8h] {
        display: grid;
        grid-template-columns: 4rem minmax(0, 1fr);
        column-gap: 1.1rem;
        align-items: start;
        text-align: left;
    }

        .edu-portada-pasos__paso:not(:last-child)[b-cof3l6kz8h]::after {
            top: 4rem;
            bottom: -1.75rem;
            left: calc(2rem - 1px);
            width: 2px;
            height: auto;
            transform-origin: center top;
        }

        /* La chispa baja por el tramo vertical. */
        .edu-portada-pasos__paso:not(:last-child)[b-cof3l6kz8h]::before {
            top: 4rem;
            bottom: -1.75rem;
            left: calc(2rem - 2px);
            width: 4px;
            height: auto;
            background-image: linear-gradient(180deg, transparent, var(--edu-acento), transparent);
            background-size: 100% 35%;
            background-position: 0 -60%;
        }

    .edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:not(:last-child)[b-cof3l6kz8h]::after {
        animation-name: edu-portada-pasos-tramo-vertical-b-cof3l6kz8h;
    }

    .edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:not(:last-child)[b-cof3l6kz8h]::before {
        animation-name: edu-portada-pasos-chispa-vertical-b-cof3l6kz8h;
    }

    .edu-portada-pasos__paso:nth-last-child(2)[b-cof3l6kz8h]::after {
        background-image: linear-gradient(180deg, #4F46E5, var(--edu-acento));
    }

    .edu-portada-pasos__circulo[b-cof3l6kz8h] {
        margin-bottom: 0;
    }

    .edu-portada-pasos__texto[b-cof3l6kz8h] {
        max-width: none;
        margin: 0;
    }
}

/* En los teléfonos más estrechos el icono de cada opción cede su sitio al texto. */
@media (max-width: 359.98px) {
    .edu-portada-pasos__opcion .bi[b-cof3l6kz8h] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .edu-portada-pasos__pastilla[b-cof3l6kz8h],
    .edu-portada-pasos__circulo[b-cof3l6kz8h],
    .edu-portada-pasos__enlace .bi[b-cof3l6kz8h] {
        transition: none;
    }

    .edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso[b-cof3l6kz8h],
    .edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__circulo[b-cof3l6kz8h],
    .edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__circulo[b-cof3l6kz8h]::after,
    .edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:not(:last-child)[b-cof3l6kz8h]::before,
    .edu-portada-pasos.edu-portada--revelado .edu-portada-pasos__paso:not(:last-child)[b-cof3l6kz8h]::after {
        animation: none;
    }
}
/* /Views/Home/_PortadaEvaluaciones.cshtml.rz.scp.css */
/* === Lo que ofrece ===
   Cada punto con su icono en una baldosa del tono claro de marca, que el tema
   oscuro voltea solo porque sale de --edu-claro y de --edu-primario. */
.edu-portada-practica__lista[b-p3thsvs6ms] {
    display: grid;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.edu-portada-practica__item[b-p3thsvs6ms] {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

    /* Tinte del punto bajo el cursor. Va en ::before y sobresale del punto: da aire
       alrededor sin mover el texto, y su transición no se mezcla con la de la
       aparición al desplazar, que es del propio elemento. No es un enlace, así que
       el cursor no cambia: acompaña la lectura, no invita a pulsar. */
    .edu-portada-practica__item[b-p3thsvs6ms]::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -.75rem;
        border-radius: 1rem;
        background-color: rgba(79, 70, 229, .06);
        opacity: 0;
        transition: opacity .25s ease;
    }

[data-tema="oscuro"] .edu-portada-practica__item[b-p3thsvs6ms]::before {
    background-color: rgba(129, 140, 248, .08);
}

.edu-portada-practica__icono[b-p3thsvs6ms] {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .85rem;
    background-color: var(--edu-claro);
    color: var(--edu-primario);
    font-size: 1.25rem;
    transition: background-color .25s ease, color .25s ease;
}

/* Bajo el cursor, el icono pasa al índigo de marca con un pequeño salto. El índigo
   va fijo en los dos temas: con el luminoso del oscuro, el blanco no se leería. */
@media (hover: hover) {
    .edu-portada-practica__item:hover[b-p3thsvs6ms]::before {
        opacity: 1;
    }

    .edu-portada-practica__item:hover .edu-portada-practica__icono[b-p3thsvs6ms] {
        background-color: #4F46E5;
        color: #FFFFFF;
    }

        .edu-portada-practica__item:hover .edu-portada-practica__icono .bi[b-p3thsvs6ms] {
            animation: edu-portada-practica-salto-b-p3thsvs6ms .6s cubic-bezier(.3, 1.4, .5, 1);
        }
}

@keyframes edu-portada-practica-salto-b-p3thsvs6ms {
    0% {
        transform: none;
    }

    35% {
        transform: translateY(-.3rem) rotate(-8deg);
    }

    65% {
        transform: translateY(.05rem) rotate(4deg);
    }

    100% {
        transform: none;
    }
}

.edu-portada-practica__titulo[b-p3thsvs6ms] {
    margin: 0 0 .25rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.edu-portada-practica__texto[b-p3thsvs6ms] {
    margin: 0;
    color: var(--edu-texto-suave);
}

/* === Ilustración del ranking ===
   Un panel con cinco filas: puesto, avatar y una barra. Las tres primeras van
   en índigo y la del alumno en el lima de acción, que es la que busca primero.
   Ningún dato es real: no hay nombres ni notas, solo la forma de la pantalla. */
.edu-portada-practica__escena[b-p3thsvs6ms] {
    position: relative;
    max-width: 30rem;
    margin-inline: auto;
}

    /* Lámina de color detrás del panel, un poco girada: da profundidad sin
       necesitar ninguna imagen. */
    .edu-portada-practica__escena[b-p3thsvs6ms]::before {
        content: "";
        position: absolute;
        inset: 6% -3% -5% 7%;
        border-radius: 1.75rem;
        background: linear-gradient(135deg, rgba(79, 70, 229, .2), rgba(132, 204, 22, .22));
        transform: rotate(3deg);
    }

/* En el teléfono la escena ocupa todo el ancho del contenedor y no queda margen
   para que la lámina asome por la derecha: se recoge hacia dentro, porque si no,
   girada, saldría de la pantalla y la página se desplazaría de lado. */
@media (max-width: 575.98px) {
    .edu-portada-practica__escena[b-p3thsvs6ms]::before {
        inset: 6% 3% -4% 5%;
    }
}

.edu-portada-practica__panel[b-p3thsvs6ms] {
    position: relative;
    padding: 1.5rem;
    border: 1px solid var(--edu-borde);
    border-radius: 1.5rem;
    background-color: #FFFFFF;
    box-shadow: 0 1.5rem 3rem rgba(49, 46, 129, .14);
}

[data-tema="oscuro"] .edu-portada-practica__panel[b-p3thsvs6ms] {
    background-color: #1E293B;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .45);
}

.edu-portada-practica__cabecera[b-p3thsvs6ms] {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.25rem;
}

.edu-portada-practica__marca[b-p3thsvs6ms] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .85rem;
    background-color: var(--edu-acento);
    color: var(--edu-acento-contraste);
    font-size: 1.25rem;
}

.edu-portada-practica__panel-titulo[b-p3thsvs6ms] {
    margin: 0;
    font-weight: 700;
    color: var(--edu-texto);
}

.edu-portada-practica__panel-sub[b-p3thsvs6ms] {
    margin: 0;
    font-size: .85rem;
    color: var(--edu-texto-suave);
}

.edu-portada-practica__ranking[b-p3thsvs6ms] {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.edu-portada-practica__fila[b-p3thsvs6ms] {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem 2rem minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .55rem .75rem;
    border: 1px solid transparent;
    border-radius: .9rem;
}

/* El resalte del alumno va en ::before y no en la propia fila: así sube con él
   cuando adelanta un puesto, mientras el número de la fila se queda donde está.
   inset: -1px lo extiende sobre el borde transparente de la fila. */
.edu-portada-practica__fila--tu[b-p3thsvs6ms] {
    isolation: isolate;
}

    .edu-portada-practica__fila--tu[b-p3thsvs6ms]::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -1px;
        border: 1px solid rgba(132, 204, 22, .55);
        border-radius: .9rem;
        background-color: rgba(132, 204, 22, .1);
    }

.edu-portada-practica__puesto[b-p3thsvs6ms] {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--edu-claro);
    color: var(--edu-texto);
    font-size: .8rem;
    font-weight: 700;
}

/* El podio va en índigo y no en dorado: en la plataforma el dorado significa
   monedas, y aquí no hay dinero de por medio. */
.edu-portada-practica__puesto--podio[b-p3thsvs6ms] {
    background-color: #4F46E5;
    color: #FFFFFF;
}

.edu-portada-practica__avatar[b-p3thsvs6ms] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--edu-claro);
    color: var(--edu-texto-suave);
}

.edu-portada-practica__avatar--tu[b-p3thsvs6ms] {
    background-color: var(--edu-acento);
    color: var(--edu-acento-contraste);
    font-size: .72rem;
    font-weight: 800;
}

.edu-portada-practica__barra[b-p3thsvs6ms] {
    display: block;
    height: .6rem;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--edu-claro);
}

.edu-portada-practica__relleno[b-p3thsvs6ms] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-image: linear-gradient(90deg, #4F46E5, #818CF8);
    transform-origin: left center;
}

.edu-portada-practica__fila--tu .edu-portada-practica__relleno[b-p3thsvs6ms] {
    background-image: linear-gradient(90deg, #65A30D, var(--edu-acento));
}

.edu-portada-practica__relleno--1[b-p3thsvs6ms] {
    width: 94%;
}

.edu-portada-practica__relleno--2[b-p3thsvs6ms] {
    width: 86%;
}

.edu-portada-practica__relleno--3[b-p3thsvs6ms] {
    width: 79%;
}

.edu-portada-practica__relleno--4[b-p3thsvs6ms] {
    width: 71%;
}

.edu-portada-practica__relleno--5[b-p3thsvs6ms] {
    width: 62%;
}

/* Las barras crecen una tras otra cuando la ilustración entra en pantalla. Solo
   con la portada animada: sin el guion de aparición se ven ya llenas. */
.edu-portada--animada .edu-portada-practica__relleno[b-p3thsvs6ms] {
    transform: scaleX(0);
    transition: transform 1s cubic-bezier(.2, .7, .2, 1) .35s;
}

.edu-portada--animada .edu-portada-practica__fila:nth-child(2) .edu-portada-practica__relleno[b-p3thsvs6ms] {
    transition-delay: .45s;
}

.edu-portada--animada .edu-portada-practica__fila:nth-child(3) .edu-portada-practica__relleno[b-p3thsvs6ms] {
    transition-delay: .55s;
}

.edu-portada--animada .edu-portada-practica__fila:nth-child(4) .edu-portada-practica__relleno[b-p3thsvs6ms] {
    transition-delay: .65s;
}

.edu-portada--animada .edu-portada-practica__fila:nth-child(5) .edu-portada-practica__relleno[b-p3thsvs6ms] {
    transition-delay: .75s;
}

.edu-portada--animada .edu-portada--revelado .edu-portada-practica__relleno[b-p3thsvs6ms] {
    transform: none;
}

/* === Subida en el ranking ===
   Cuando el panel entra en pantalla, la barra del alumno sigue creciendo después
   de llenarse hasta superar a la del tercero; entonces los dos se cruzan, el
   alumno pasa al tercer puesto y aparece la insignia de la subida. Se mueven las
   personas —avatar, barra y resalte— y no los puestos: cada número sigue en su
   fila, así que no hay que cambiar ninguno. Ocurre una sola vez. Sin el guion de
   aparición, o con menos movimiento, el panel se queda en su estado de partida,
   que es coherente por sí solo: la barra del cuarto es más corta que la del
   tercero.

   El paso es la distancia de una fila a la siguiente: su alto (2rem de contenido,
   .55rem de relleno arriba y abajo, 1px de borde a cada lado) más el hueco entre
   filas. Si cambia alguna de esas medidas, cambia aquí. */
.edu-portada-practica__ranking[b-p3thsvs6ms] {
    --edu-practica-paso: calc(3.65rem + 2px);
}

/* La barra del alumno se llena con las demás y luego crece hasta el 81 %, por
   encima del 79 % del tercero: con la escala, y no con el ancho, porque así el
   estado de partida conserva su 71 %. */
.edu-portada--animada .edu-portada--revelado .edu-portada-practica__fila--tu .edu-portada-practica__relleno[b-p3thsvs6ms] {
    animation: edu-portada-practica-crece-b-p3thsvs6ms 2.5s cubic-bezier(.2, .7, .2, 1) forwards;
}

.edu-portada--animada .edu-portada--revelado .edu-portada-practica__fila--tu .edu-portada-practica__avatar[b-p3thsvs6ms],
.edu-portada--animada .edu-portada--revelado .edu-portada-practica__fila--tu .edu-portada-practica__barra[b-p3thsvs6ms] {
    animation: edu-portada-practica-sube-b-p3thsvs6ms .6s cubic-bezier(.5, 0, .2, 1) 2.5s forwards;
}

/* El resalte sube con el alumno y, ya en su sitio, respira despacio. */
.edu-portada--animada .edu-portada--revelado .edu-portada-practica__fila--tu[b-p3thsvs6ms]::before {
    animation: edu-portada-practica-sube-b-p3thsvs6ms .6s cubic-bezier(.5, 0, .2, 1) 2.5s forwards, edu-portada-practica-brillo-b-p3thsvs6ms 2.8s ease-in-out 3.6s infinite;
}

.edu-portada--animada .edu-portada--revelado .edu-portada-practica__fila:nth-child(3) .edu-portada-practica__avatar[b-p3thsvs6ms],
.edu-portada--animada .edu-portada--revelado .edu-portada-practica__fila:nth-child(3) .edu-portada-practica__barra[b-p3thsvs6ms] {
    animation: edu-portada-practica-baja-b-p3thsvs6ms .6s cubic-bezier(.5, 0, .2, 1) 2.5s forwards;
}

/* Insignia de la subida. Se coloca respecto a la fila del alumno, un paso más
   arriba, que es donde él queda tras el cruce, y aparece al terminar. */
.edu-portada-practica__subida[b-p3thsvs6ms] {
    position: absolute;
    top: 50%;
    right: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background-color: var(--edu-acento);
    color: var(--edu-acento-contraste);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(calc(-50% - var(--edu-practica-paso)));
}

.edu-portada--animada .edu-portada--revelado .edu-portada-practica__subida[b-p3thsvs6ms] {
    animation: edu-portada-practica-insignia-b-p3thsvs6ms .5s cubic-bezier(.3, 1.4, .5, 1) 3.1s forwards;
}

/* Terminada la escena, el panel flota despacio sobre su lámina. Va en el panel y
   no en la escena, que es la que se revela al desplazar: las dos cosas en el
   mismo elemento se pisarían el transform. */
.edu-portada--animada .edu-portada--revelado .edu-portada-practica__panel[b-p3thsvs6ms] {
    animation: edu-portada-practica-flota-b-p3thsvs6ms 7s ease-in-out 3.6s infinite;
}

@keyframes edu-portada-practica-crece-b-p3thsvs6ms {
    0%, 26% {
        transform: scaleX(0);
    }

    66%, 80% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(1.14);
    }
}

@keyframes edu-portada-practica-sube-b-p3thsvs6ms {
    to {
        transform: translateY(calc(-1 * var(--edu-practica-paso)));
    }
}

@keyframes edu-portada-practica-baja-b-p3thsvs6ms {
    to {
        transform: translateY(var(--edu-practica-paso));
    }
}

@keyframes edu-portada-practica-brillo-b-p3thsvs6ms {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(132, 204, 22, 0);
    }

    50% {
        box-shadow: 0 0 0 .3rem rgba(132, 204, 22, .18);
    }
}

@keyframes edu-portada-practica-insignia-b-p3thsvs6ms {
    from {
        opacity: 0;
        transform: translateY(calc(-50% - var(--edu-practica-paso) + .5rem)) scale(.6);
    }

    to {
        opacity: 1;
        transform: translateY(calc(-50% - var(--edu-practica-paso))) scale(1);
    }
}

@keyframes edu-portada-practica-flota-b-p3thsvs6ms {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: translateY(-.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .edu-portada--animada .edu-portada-practica__relleno[b-p3thsvs6ms] {
        transform: none;
        transition: none;
    }

    .edu-portada-practica__item[b-p3thsvs6ms]::before,
    .edu-portada-practica__icono[b-p3thsvs6ms] {
        transition: none;
    }

    .edu-portada-practica__item:hover .edu-portada-practica__icono .bi[b-p3thsvs6ms],
    .edu-portada--animada .edu-portada--revelado .edu-portada-practica__fila--tu .edu-portada-practica__relleno[b-p3thsvs6ms],
    .edu-portada--animada .edu-portada--revelado .edu-portada-practica__fila--tu .edu-portada-practica__avatar[b-p3thsvs6ms],
    .edu-portada--animada .edu-portada--revelado .edu-portada-practica__fila--tu .edu-portada-practica__barra[b-p3thsvs6ms],
    .edu-portada--animada .edu-portada--revelado .edu-portada-practica__fila--tu[b-p3thsvs6ms]::before,
    .edu-portada--animada .edu-portada--revelado .edu-portada-practica__fila:nth-child(3) .edu-portada-practica__avatar[b-p3thsvs6ms],
    .edu-portada--animada .edu-portada--revelado .edu-portada-practica__fila:nth-child(3) .edu-portada-practica__barra[b-p3thsvs6ms],
    .edu-portada--animada .edu-portada--revelado .edu-portada-practica__subida[b-p3thsvs6ms],
    .edu-portada--animada .edu-portada--revelado .edu-portada-practica__panel[b-p3thsvs6ms] {
        animation: none;
    }
}
/* /Views/Home/_PortadaProfesores.cshtml.rz.scp.css */
/* === Panel de la sección ===
   Un degradado muy suave del índigo al lima: la misma pareja de marca y acción
   del resto de la portada, rebajada hasta ser una superficie. */
.edu-portada-docentes[b-g7tab2r0nc] {
    padding: clamp(1.75rem, 4vw, 3.25rem);
    border: 1px solid var(--edu-borde);
    border-radius: 1.75rem;
    background: linear-gradient(135deg, #EEF0FF 0%, #F7F7FF 55%, #F4FBE6 100%);
}

[data-tema="oscuro"] .edu-portada-docentes[b-g7tab2r0nc] {
    background: linear-gradient(135deg, #1E1B4B 0%, #172036 55%, #1A2A1C 100%);
}

.edu-portada-docentes__lista[b-g7tab2r0nc] {
    display: grid;
    gap: .75rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

    .edu-portada-docentes__lista li[b-g7tab2r0nc] {
        display: flex;
        align-items: flex-start;
        gap: .65rem;
    }

    .edu-portada-docentes__lista .bi[b-g7tab2r0nc] {
        flex: 0 0 auto;
        margin-top: .15rem;
        color: var(--edu-acento-texto);
    }

.edu-portada-docentes__acciones[b-g7tab2r0nc] {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

/* En el teléfono los botones se apilan a todo el ancho: uno al lado del otro no
   caben y uno de ellos acabaría partido en dos renglones. */
@media (max-width: 575.98px) {
    .edu-portada-docentes__acciones .btn[b-g7tab2r0nc] {
        width: 100%;
    }
}

/* === Ilustración del perfil ===
   La forma de una tarjeta de profesor: avatar, renglones de nombre y cargo,
   estrellas, materias y una semana con clases. Los renglones son barras, no
   texto, así que no aparenta ser el perfil de nadie. */
.edu-portada-docentes__escena[b-g7tab2r0nc] {
    position: relative;
    max-width: 22rem;
    margin-inline: auto;
    padding-block: 1rem 1.75rem;
}

.edu-portada-docentes__tarjeta[b-g7tab2r0nc] {
    padding: 1.25rem;
    border: 1px solid var(--edu-borde);
    border-radius: 1.25rem;
    background-color: #FFFFFF;
    box-shadow: 0 1.5rem 3rem rgba(49, 46, 129, .16);
    transform: rotate(-2deg);
}

[data-tema="oscuro"] .edu-portada-docentes__tarjeta[b-g7tab2r0nc] {
    background-color: #1E293B;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .5);
}

.edu-portada-docentes__perfil[b-g7tab2r0nc] {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1rem;
}

.edu-portada-docentes__avatar[b-g7tab2r0nc] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #4F46E5, #818CF8);
    color: #FFFFFF;
    font-size: 1.5rem;
}

.edu-portada-docentes__lineas[b-g7tab2r0nc] {
    display: grid;
    flex: 1 1 auto;
    gap: .45rem;
}

.edu-portada-docentes__linea[b-g7tab2r0nc] {
    display: block;
    height: .6rem;
    border-radius: 999px;
    background-color: var(--edu-claro);
}

.edu-portada-docentes__linea--nombre[b-g7tab2r0nc] {
    width: 75%;
    height: .75rem;
    background-color: #C7D2FE;
}

[data-tema="oscuro"] .edu-portada-docentes__linea--nombre[b-g7tab2r0nc] {
    background-color: #475569;
}

.edu-portada-docentes__linea--corta[b-g7tab2r0nc] {
    width: 50%;
}

/* Estrellas en el índigo de marca: el dorado está reservado para las monedas. */
.edu-portada-docentes__estrellas[b-g7tab2r0nc] {
    display: flex;
    gap: .2rem;
    margin-bottom: 1rem;
    color: var(--edu-primario);
}

.edu-portada-docentes__chips[b-g7tab2r0nc] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1rem;
}

.edu-portada-docentes__chip[b-g7tab2r0nc] {
    display: block;
    width: 4.5rem;
    height: 1.4rem;
    border-radius: 999px;
    background-color: var(--edu-claro);
}

.edu-portada-docentes__chip--corto[b-g7tab2r0nc] {
    width: 3rem;
}

/* Una semana de siete días y tres turnos: índigo las clases publicadas y lima
   las que ya tienen alumnos. */
.edu-portada-docentes__semana[b-g7tab2r0nc] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .3rem;
    margin-bottom: 1.1rem;
}

.edu-portada-docentes__celda[b-g7tab2r0nc] {
    display: block;
    aspect-ratio: 1;
    border: 1px solid var(--edu-borde);
    border-radius: .35rem;
    background-color: var(--edu-fondo);
}

.edu-portada-docentes__celda--clase[b-g7tab2r0nc] {
    border-color: #4F46E5;
    background-color: #4F46E5;
}

.edu-portada-docentes__celda--llena[b-g7tab2r0nc] {
    border-color: var(--edu-acento);
    background-color: var(--edu-acento);
}

.edu-portada-docentes__boton[b-g7tab2r0nc] {
    display: block;
    height: 2.25rem;
    border-radius: .6rem;
    background-image: linear-gradient(90deg, #4F46E5, #6366F1);
}

/* Aviso flotante de una reseña nueva: se mece despacio para dar vida a la
   tarjeta. Queda dentro de la escena para no desbordar la columna en móvil. */
.edu-portada-docentes__aviso[b-g7tab2r0nc] {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .9rem;
    border: 1px solid var(--edu-borde);
    border-radius: 999px;
    background-color: #FFFFFF;
    box-shadow: 0 .75rem 1.5rem rgba(49, 46, 129, .18);
    font-size: .85rem;
    font-weight: 700;
    color: var(--edu-texto);
    animation: edu-portada-docentes-flota-b-g7tab2r0nc 4s ease-in-out infinite;
}

    .edu-portada-docentes__aviso .bi[b-g7tab2r0nc] {
        color: var(--edu-primario);
    }

[data-tema="oscuro"] .edu-portada-docentes__aviso[b-g7tab2r0nc] {
    background-color: #223047;
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .45);
}

@keyframes edu-portada-docentes-flota-b-g7tab2r0nc {
    50% {
        transform: translateY(-.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .edu-portada-docentes__aviso[b-g7tab2r0nc] {
        animation: none;
    }
}
/* /Views/Home/_PortadaVentajas.cshtml.rz.scp.css */
/* === Franja de "¿Por qué elegir Akcadmia?" ===
   Dos halos muy suaves sobre el índigo, uno blanco arriba y uno lima abajo, para
   que la franja tenga profundidad y no sea un bloque plano. Van como imagen de
   fondo: bg-primary solo fija el color, así que no se pisan. El blanco se queda
   en .08: en el teléfono cae detrás de la cabecera, y más claro bajaría el
   contraste del antetítulo por debajo del mínimo. */
.edu-portada-ventajas[b-kfxbh5bjnp] {
    background-image: radial-gradient(48rem 26rem at 88% 0%, rgba(255, 255, 255, .08), transparent 62%), radial-gradient(40rem 24rem at 0% 100%, rgba(163, 230, 53, .12), transparent 60%);
}

/* La franja en modo oscuro.
   La sección se pinta con bg-primary, y en tema oscuro el primario de Bootstrap
   pasa al índigo LUMINOSO (#818CF8), que es el que se lee sobre fondo oscuro
   cuando se usa para texto o para un botón pequeño. Como fondo de una franja
   entera hace lo contrario de lo que debe: aclara media pantalla y deja el texto
   blanco y los iconos lima flotando sin contraste.

   Aquí la franja va al índigo profundo de marca, el mismo --edu-oscuro de la
   paleta. Así el bloque sigue siendo el acento de color de la portada, pero por
   debajo del texto en vez de por encima, y el blanco y el lima recuperan el
   mismo contraste que tienen en modo claro.

   Lleva !important porque bg-primary es una utilidad de Bootstrap y también lo
   lleva; la especificidad sola no le gana. */
[data-tema="oscuro"] .edu-portada-ventajas[b-kfxbh5bjnp] {
    background-color: #312E81 !important;
}

/* === Tarjeta de cada razón ===
   Vidrio translúcido sobre la franja: el índigo se ve a través, así que las
   tarjetas pertenecen a la franja y sirven igual en los dos temas, porque la
   franja es índigo en ambos. overflow: hidden recorta la barra de lectura a las
   esquinas redondeadas. */
.edu-portada-ventajas__tarjeta[b-kfxbh5bjnp] {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 1.4rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 1.1rem;
    background-color: rgba(255, 255, 255, .07);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.edu-portada-ventajas__icono[b-kfxbh5bjnp] {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: .85rem;
    background-color: rgba(163, 230, 53, .16);
    color: #A3E635;
    font-size: 1.3rem;
    transition: background-color .3s ease, color .3s ease;
}

.edu-portada-ventajas__titulo[b-kfxbh5bjnp] {
    margin: 0 0 .4rem;
    font-size: 1.02rem;
    font-weight: 700;
}

/* Blanco a .9 y no más atenuado: la tarjeta aclara un poco el índigo de detrás, y
   por debajo de este valor el texto pequeño no llega a 4,5:1 en el tema claro. */
.edu-portada-ventajas__texto[b-kfxbh5bjnp] {
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
}

/* === Tarjeta con el foco ===
   La marca js/home/ventajas-portada.js, que la va pasando de una tarjeta a la
   siguiente; con el cursor encima, el foco salta a la tarjeta señalada. Se eleva,
   el borde toma el lima de acción y el icono pasa a lima sólido con un pequeño
   salto. El fondo no cambia a propósito: un vidrio más claro bajaría el texto de
   la tarjeta por debajo de 4,5:1 en el tema claro.

   Sin el guion, el cursor sigue dando el mismo realce. */
.edu-portada-ventajas__tarjeta--activa[b-kfxbh5bjnp] {
    transform: translateY(-4px);
    border-color: rgba(163, 230, 53, .6);
    box-shadow: 0 1rem 2rem rgba(17, 12, 66, .28);
}

    .edu-portada-ventajas__tarjeta--activa .edu-portada-ventajas__icono[b-kfxbh5bjnp] {
        background-color: #A3E635;
        color: #1A2E05;
        animation: edu-portada-ventajas-icono-b-kfxbh5bjnp .7s cubic-bezier(.3, 1.4, .5, 1);
    }

@media (hover: hover) {
    .edu-portada-ventajas__tarjeta:hover[b-kfxbh5bjnp] {
        transform: translateY(-4px);
        border-color: rgba(163, 230, 53, .6);
        box-shadow: 0 1rem 2rem rgba(17, 12, 66, .28);
    }

        .edu-portada-ventajas__tarjeta:hover .edu-portada-ventajas__icono[b-kfxbh5bjnp] {
            background-color: #A3E635;
            color: #1A2E05;
        }
}

/* Barra de lectura: se llena mientras la tarjeta tiene el foco y, al llenarse, el
   guion pasa el foco a la siguiente. El ritmo vive SOLO aquí, en la duración de
   la animación: el guion no lleva tiempos, espera a que termine. Con la sección
   en pausa —cursor encima o fuera de la pantalla— la barra se detiene, y con ella
   el recorrido. */
.edu-portada-ventajas__lectura[b-kfxbh5bjnp] {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-image: linear-gradient(90deg, #A3E635, #D9F99D);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

.edu-portada-ventajas__tarjeta--activa .edu-portada-ventajas__lectura[b-kfxbh5bjnp] {
    animation: edu-portada-ventajas-lectura-b-kfxbh5bjnp 3.5s linear forwards;
}

.edu-portada-ventajas--en-pausa .edu-portada-ventajas__lectura[b-kfxbh5bjnp] {
    animation-play-state: paused;
}

@keyframes edu-portada-ventajas-lectura-b-kfxbh5bjnp {
    to {
        transform: none;
    }
}

@keyframes edu-portada-ventajas-icono-b-kfxbh5bjnp {
    0% {
        transform: scale(.85) rotate(-10deg);
    }

    60% {
        transform: scale(1.08) rotate(4deg);
    }

    100% {
        transform: none;
    }
}

/* En el teléfono las ocho tarjetas van en una sola columna, y con el icono encima
   del título cada una ocuparía media pantalla. El icono pasa a la izquierda y el
   texto a su lado, y la sección se recorre en la mitad de desplazamiento.

   Aquí no hay recorrido: tiene el foco la tarjeta que cruza el centro de la
   pantalla mientras se desplaza, así que la barra de lectura sobra. */
@media (max-width: 575.98px) {
    .edu-portada-ventajas__tarjeta[b-kfxbh5bjnp] {
        display: grid;
        grid-template-columns: 2.75rem minmax(0, 1fr);
        column-gap: 1rem;
        align-items: start;
    }

    .edu-portada-ventajas__icono[b-kfxbh5bjnp] {
        grid-row: span 2;
        margin-bottom: 0;
    }

    .edu-portada-ventajas__lectura[b-kfxbh5bjnp] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .edu-portada-ventajas__tarjeta[b-kfxbh5bjnp],
    .edu-portada-ventajas__icono[b-kfxbh5bjnp] {
        transition: none;
    }

        .edu-portada-ventajas__tarjeta:hover[b-kfxbh5bjnp],
        .edu-portada-ventajas__tarjeta--activa[b-kfxbh5bjnp] {
            transform: none;
        }

            .edu-portada-ventajas__tarjeta--activa .edu-portada-ventajas__icono[b-kfxbh5bjnp] {
                animation: none;
            }
}
/* /Views/Legal/ConsultarReclamacion.cshtml.rz.scp.css */
/* Estilos propios de la pantalla de consulta. Los de la hoja no están aquí: los
   comparte una parcial y viven en wwwroot/css/componentes/hoja-reclamacion.css,
   porque el CSS aislado se aplica por vista y no alcanza a una parcial. */

/* El resumen de validación se pinta siempre; ASP.NET le añade
   .validation-summary-valid cuando no hay errores. Sin esto, la caja roja
   aparecería vacía al abrir la página. */
.edu-consulta__errores.validation-summary-valid[b-wl63525832] {
    display: none;
}

.edu-consulta__errores ul[b-wl63525832] {
    margin-bottom: 0;
    padding-left: 1.1rem;
}
/* /Views/Legal/Reclamaciones.cshtml.rz.scp.css */
/* Estilos de la vista del Libro de Reclamaciones.
   Van co-ubicados (CSS isolation) porque solo los usa esta página: cargarlos en
   sitio.css se los haría descargar también a quien entra al login o al horario.
   El _Layout ya incluye Akcadmia.Web.styles.css, así que no hace falta declarar
   ningún <link> aquí. */

/* El resumen de validación se pinta siempre; ASP.NET le añade
   .validation-summary-valid cuando no hay errores. Sin esto, la caja roja
   aparecería vacía al abrir el formulario. */
.edu-reclamo__errores.validation-summary-valid[b-bgqcgbzx9p] {
    display: none;
}

.edu-reclamo__errores ul[b-bgqcgbzx9p] {
    margin-bottom: 0;
    padding-left: 1.1rem;
}

/* Fondo apenas distinto del de la tarjeta para que el bloque del proveedor se
   lea como un dato de cabecera y no como una sección más. El valor claro solo
   vale en modo claro: la contraparte oscura está al final del archivo. */
.edu-reclamo__proveedor[b-bgqcgbzx9p] {
    background-color: #f8f9fa;
}

    .edu-reclamo__proveedor dt[b-bgqcgbzx9p] {
        font-weight: 600;
    }

/* El bloque del apoderado aparece y desaparece según la casilla de menor de
   edad. El borde lateral deja claro que depende de la casilla de arriba. */
.edu-reclamo__apoderado[b-bgqcgbzx9p] {
    border-left: 3px solid var(--bs-primary);
    margin-left: 0;
    padding-bottom: .5rem;
}

.edu-reclamo__texto[b-bgqcgbzx9p] {
    resize: vertical;
    min-height: 6rem;
}

/* Campo trampa. Se saca de la pantalla en vez de usar display:none porque
   algunos programas descartan lo que está oculto con display y así se les
   escapa la trampa. Para la persona el efecto es el mismo: no existe. */
.edu-reclamo__trampa[b-bgqcgbzx9p] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ─── MODO OSCURO ─────────────────────────────────────────────────────────
   El tema oscuro del sitio se activa por prefers-color-scheme en akcadmia.css,
   no por una clase ni por data-bs-theme, así que todo color claro fijo necesita
   aquí su contraparte o se queda claro cuando el resto de la página no lo está.

   Esto era justo lo que fallaba: la tarjeta del proveedor conservaba su fondo
   #f8f9fa mientras .card pasaba el texto a gris claro, y el encabezado lleva
   .text-muted, que en oscuro es #94a3b8 con !important. Gris claro sobre casi
   blanco: las letras parecían medio borradas.

   El fondo elegido es #334155, el mismo que akcadmia.css usa para las
   superficies claras reconvertidas (.badge.bg-light, .table-light), para que el
   bloque siga distinguiéndose de la tarjeta (#1e293b) igual que en modo claro. */
@media (prefers-color-scheme: dark) {
    .edu-reclamo__proveedor[b-bgqcgbzx9p] {
        background-color: #334155;
    }

        /* El encabezado lleva .text-muted, que en oscuro viene con !important:
       para ganarle hace falta !important también, no más especificidad. */
        .edu-reclamo__proveedor h2[b-bgqcgbzx9p] {
            color: #cbd5e1 !important;
        }

        .edu-reclamo__proveedor dt[b-bgqcgbzx9p] {
            color: #f1f5f9;
        }

        .edu-reclamo__proveedor dd[b-bgqcgbzx9p] {
            color: #e2e8f0;
        }
}
/* /Views/Legal/ReclamacionRegistrada.cshtml.rz.scp.css */
/* /Views/Nosotros/Index.cshtml.rz.scp.css */
/* =====================================================
   Views/Nosotros/Index.cshtml.css
   Estilos de la página de los creadores
   ===================================================== */

/* === Franja de apertura ===
   La superficie, las manchas que derivan y la entrada escalonada son las del componente
   de apertura de las páginas públicas (componentes/franja-marca.css): el mismo lienzo
   del registro y del inicio de sesión, sin foto de archivo, para que cargue al instante
   y no compita con lo único que importa aquí, que son las dos personas. En este archivo
   queda lo propio de la página: la etiqueta que precede al título y el ancho de lectura
   de los dos párrafos. */
.edu-nosotros__etiqueta[b-aov1ayccc6] {
    letter-spacing: .12em;
    font-size: .75rem;
    color: var(--edu-primario);
}

.edu-nosotros__intro[b-aov1ayccc6] {
    max-width: 60ch;
}

/* === Tarjetas de los creadores ===
   Entran justo después de la apertura, la segunda un poco más tarde, y al pasar el
   cursor la tarjeta se eleva y el aro de la foto se abre. La elevación solo existe
   con un puntero que pueda pasar por encima: en pantalla táctil el primer toque
   dejaría la tarjeta levantada. */
.edu-creador[b-aov1ayccc6] {
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
    animation: edu-acceso-entrada .6s cubic-bezier(.2, .7, .2, 1) .25s backwards;
}

.col-lg-6:nth-child(2) > .edu-creador[b-aov1ayccc6] {
    animation-delay: .37s;
}

@media (hover: hover) {
    .edu-creador:hover[b-aov1ayccc6] {
        transform: translateY(-4px);
        box-shadow: var(--edu-sombra-hover) !important;
    }

        .edu-creador:hover .edu-creador__foto[b-aov1ayccc6] {
            outline-color: rgba(79, 70, 229, .5);
            outline-offset: 5px;
        }

        .edu-creador:hover .edu-creador__especialidad[b-aov1ayccc6] {
            border-color: rgba(79, 70, 229, .35);
        }
}

/* Las fotos van a color, que es lo que esta página quiere enseñar: las dos caras. El
   aro de la marca va separado de la foto por outline-offset, que deja ver el fondo de
   la tarjeta en el hueco; así el mismo trazo sirve en los dos temas sin calcular el
   color de ese hueco. El realce al pasar el ratón se queda en la sombra de la
   tarjeta. */
.edu-creador__foto[b-aov1ayccc6] {
    width: 96px;
    height: 96px;
    object-fit: cover;
    outline: 3px solid rgba(79, 70, 229, .22);
    outline-offset: 3px;
    transition: outline-color .35s ease, outline-offset .35s ease;
}

.edu-creador__rol[b-aov1ayccc6] {
    color: var(--edu-primario);
    font-weight: 600;
    font-size: .9rem;
}

/* La carrera, bajo el cargo. Va un punto por debajo de él y en gris, para que la
   cabecera de la tarjeta se lea en orden de importancia: nombre, qué hace, qué
   estudió. Mismo tamaño que en la franja de la portada, que muestra los mismos
   tres renglones. */
.edu-creador__carrera[b-aov1ayccc6] {
    font-size: .78rem;
    line-height: 1.35;
}

/* Especialidades: etiquetas cortas bajo la cabecera, para que el perfil técnico de
   cada uno se lea de un vistazo antes del resumen. Fondo, borde y texto salen de la
   paleta, que ya trae su versión oscura. */
.edu-creador__especialidad[b-aov1ayccc6] {
    padding: .25rem .7rem;
    border: 1px solid var(--edu-borde);
    border-radius: 999px;
    background-color: var(--edu-fondo);
    color: var(--edu-texto);
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.4;
    transition: border-color .35s ease;
}

.edu-creador__credenciales li + li[b-aov1ayccc6] {
    margin-top: .5rem;
}

/* Ancho fijo para que el texto de las tres credenciales arranque alineado aunque
   los iconos tengan anchos distintos. */
.edu-creador__icono[b-aov1ayccc6] {
    color: var(--edu-primario);
    width: 1.1rem;
    flex-shrink: 0;
    text-align: center;
}

.edu-creador__red[b-aov1ayccc6] {
    width: 2.25rem;
}

/* Nota de trayectoria bajo las tarjetas. Ancho de lectura acotado: en pantalla ancha
   una sola línea de punta a punta se lee mal y parece un pie legal. */
.edu-nosotros__aviso[b-aov1ayccc6] {
    max-width: 62ch;
}

/* === Franja de la misión === */
.edu-nosotros__mision[b-aov1ayccc6] {
    background-color: var(--edu-claro);
}

.edu-nosotros__mision-cabecera[b-aov1ayccc6] {
    max-width: 40rem;
}

/* Los tres compromisos como tarjetas de la misma altura sobre la franja: el borde
   superior es una barra de la marca que, en reposo, solo asoma por la izquierda y se
   completa al pasar el cursor, mientras la tarjeta se eleva y la baldosa del icono se
   rellena. */
.edu-nosotros__compromiso[b-aov1ayccc6] {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1.5rem 1.6rem;
    border: 1px solid rgba(79, 70, 229, .12);
    border-radius: 1rem;
    background-color: #FFFFFF;
    box-shadow: 0 .5rem 1.5rem rgba(49, 46, 129, .07);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}

    .edu-nosotros__compromiso[b-aov1ayccc6]::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        background: linear-gradient(90deg, var(--edu-primario), var(--edu-acento));
        transform: scaleX(.2);
        transform-origin: left;
        transition: transform .5s cubic-bezier(.2, .7, .2, 1);
    }

/* Cada icono en su baldosa, como los de los beneficios del registro: le da peso sin
   agrandarlo y alinea las tres tarjetas por arriba. El rebote del giro sale de la
   curva, que pasa de largo y vuelve. */
.edu-nosotros__icono-mision[b-aov1ayccc6] {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(79, 70, 229, .14);
    border-radius: .85rem;
    background-color: var(--edu-claro);
    font-size: 1.4rem;
    color: var(--edu-primario);
    transition: background-color .3s ease, color .3s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1);
}

@media (hover: hover) {
    .edu-nosotros__compromiso:hover[b-aov1ayccc6] {
        transform: translateY(-6px);
        border-color: rgba(79, 70, 229, .3);
        box-shadow: 0 1.25rem 2.5rem rgba(49, 46, 129, .14);
    }

        .edu-nosotros__compromiso:hover[b-aov1ayccc6]::before {
            transform: scaleX(1);
        }

        .edu-nosotros__compromiso:hover .edu-nosotros__icono-mision[b-aov1ayccc6] {
            background-color: var(--edu-primario);
            color: #FFFFFF;
            transform: rotate(-6deg) scale(1.06);
        }
}

/* Entrada ligada al scroll: cada columna sube y aparece mientras entra en pantalla, y
   las tres se escalonan desplazando su tramo. Va sobre la columna y no sobre la
   tarjeta, que tiene su propio transform para la elevación. Solo donde el navegador
   entiende animation-timeline: en los demás, las tarjetas están quietas y visibles
   desde el principio. El tramo termina cuando la columna ya entró entera, así que nunca
   se queda a medio aparecer al final de la página. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .edu-nosotros__columna[b-aov1ayccc6] {
            animation: edu-nosotros-revela-b-aov1ayccc6 linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 80%;
        }

            .edu-nosotros__columna:nth-child(2)[b-aov1ayccc6] {
                animation-range: entry 10% entry 90%;
            }

            .edu-nosotros__columna:nth-child(3)[b-aov1ayccc6] {
                animation-range: entry 20% entry 100%;
            }
    }
}

/* === Llamada final ===
   Panel índigo con dos manchas que derivan, el mismo índigo profundo del panel del
   registro en tema oscuro. Es igual en los dos temas a propósito: es una superficie de
   marca, como la barra de navegación, y su texto claro y el botón lima mantienen el
   contraste tanto sobre la página clara como sobre la oscura. */
.edu-nosotros__cierre[b-aov1ayccc6] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 3rem 1.25rem;
    border-radius: 1.5rem;
    color: #E0E7FF;
    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%);
    background-size: 1.375rem 1.375rem, auto;
    box-shadow: 0 1.5rem 3.5rem rgba(49, 46, 129, .28);
}

    .edu-nosotros__cierre h2[b-aov1ayccc6] {
        color: #FFFFFF;
    }

    .edu-nosotros__cierre[b-aov1ayccc6]::before,
    .edu-nosotros__cierre[b-aov1ayccc6]::after {
        content: "";
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        mix-blend-mode: screen;
        pointer-events: none;
    }

    .edu-nosotros__cierre[b-aov1ayccc6]::before {
        top: -9rem;
        right: -7rem;
        width: 22rem;
        height: 22rem;
        background: radial-gradient(circle, rgba(237, 235, 253, .24), transparent 68%);
        animation: edu-acceso-deriva 14s ease-in-out infinite alternate;
    }

    .edu-nosotros__cierre[b-aov1ayccc6]::after {
        bottom: -11rem;
        left: -8rem;
        width: 26rem;
        height: 26rem;
        background: radial-gradient(circle, rgba(129, 140, 248, .5), transparent 68%);
        animation: edu-acceso-deriva 18s ease-in-out -6s infinite alternate-reverse;
    }

/* El texto del panel hereda su color claro; aquí solo se acota la línea. La de la
   empresa también lo hereda: un tono más apagado no se sostenía sobre la mancha que
   deriva por la esquina inferior. */
.edu-nosotros__cierre-texto[b-aov1ayccc6] {
    max-width: 38rem;
}

/* El secundario, en blanco sobre el índigo; al pasar el cursor se rellena de blanco y
   su texto toma el índigo del panel en vez del negro por defecto de btn-outline-light. */
.edu-nosotros__secundario[b-aov1ayccc6] {
    --bs-btn-hover-color: #312E81;
    --bs-btn-active-color: #312E81;
    font-weight: 600;
}

/* El foco de teclado del botón lima: sitio.css lo dibuja en el índigo de marca, que
   sobre este panel índigo apenas se distingue; aquí el trazo va en blanco. */
.edu-nosotros__cierre .edu-boton-acento:focus-visible[b-aov1ayccc6] {
    outline-color: #FFFFFF;
}

/* En móvil los dos botones van apilados y a todo el ancho; el secundario baja al
   mismo cuerpo que el principal, que acceso.css ya reduce en esta franja. */
@media (max-width: 575.98px) {
    .edu-nosotros__secundario[b-aov1ayccc6] {
        --bs-btn-font-size: 1.0625rem;
    }
}

@media (min-width: 576px) {
    .edu-nosotros__cierre[b-aov1ayccc6] {
        padding: 3.5rem 2.5rem;
    }
}

@media (min-width: 992px) {
    .edu-nosotros__cierre[b-aov1ayccc6] {
        padding: 4rem 3rem;
    }
}

/* === MODO OSCURO ─────────────────────────────────────────────────────────
   Va por el atributo data-tema del <html>, que es quien decide el tema en el
   proyecto, y no por prefers-color-scheme: con el sistema en un tema y la plataforma
   en el otro, la franja y sus textos tienen que cambiar juntos.

   La franja de apertura la voltea su componente al índigo profundo del panel del
   registro. El índigo luminoso del tema oscuro se queda corto para la etiqueta sobre
   ese fondo y para los iconos de la misión, así que los dos llevan un tono más claro.
   La franja de la misión usa var(--edu-claro), que ya se voltea en sitio.css; sus
   tarjetas pasan a la superficie oscura de las tarjetas del proyecto. */
[data-tema="oscuro"] .edu-nosotros__etiqueta[b-aov1ayccc6] {
    color: #C7D2FE;
}

[data-tema="oscuro"] .edu-creador__foto[b-aov1ayccc6] {
    outline-color: rgba(129, 140, 248, .45);
}

[data-tema="oscuro"] .edu-nosotros__icono-mision[b-aov1ayccc6] {
    border-color: rgba(255, 255, 255, .12);
    color: #C7D2FE;
}

[data-tema="oscuro"] .edu-nosotros__compromiso[b-aov1ayccc6] {
    border-color: rgba(255, 255, 255, .08);
    background-color: #1E293B;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
}

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

@media (hover: hover) {
    [data-tema="oscuro"] .edu-creador:hover .edu-creador__foto[b-aov1ayccc6] {
        outline-color: rgba(165, 180, 252, .75);
    }

    [data-tema="oscuro"] .edu-creador:hover .edu-creador__especialidad[b-aov1ayccc6] {
        border-color: rgba(165, 180, 252, .45);
    }

    [data-tema="oscuro"] .edu-nosotros__compromiso:hover[b-aov1ayccc6] {
        border-color: rgba(165, 180, 252, .35);
        box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .55);
    }

        [data-tema="oscuro"] .edu-nosotros__compromiso:hover .edu-nosotros__icono-mision[b-aov1ayccc6] {
            background-color: #4F46E5;
            color: #FFFFFF;
        }
}

/* === Animaciones ===
   La entrada ligada al scroll es propia de esta página; las demás (entrada, deriva y
   brillo del botón) son las globales de componentes/acceso.css. */
@keyframes edu-nosotros-revela-b-aov1ayccc6 {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
}

/* Con movimiento reducido todo queda quieto y en su sitio desde el principio: sin
   entradas, derivas, brillo ni elevaciones. El !important gana a las reglas de cada
   pieza sin repetirlas una por una. */
@media (prefers-reduced-motion: reduce) {
    .edu-nosotros *[b-aov1ayccc6],
    .edu-nosotros *[b-aov1ayccc6]::before,
    .edu-nosotros *[b-aov1ayccc6]::after {
        animation: none !important;
        transition: none !important;
    }
}
/* /Views/Pago/IniciarPago.cshtml.rz.scp.css */
/* =====================================================
   Views/Pago/IniciarPago.cshtml.css
   Espera mientras se abre la ventana de pago de Niubiz.

   Es CSS aislado y no un componente: el marcado lo pinta Razor en esta vista y no
   se repite en ninguna otra. El JS solo lo retira, no lo crea.
   ===================================================== */

/* === Círculo de carga ===
   Bastante más grande que el spinner-border por defecto, que a 2rem se pierde en una
   tarjeta de este ancho. Aquí no es un adorno: es lo único que hay en pantalla
   mientras el SDK de Niubiz descarga y monta su ventana, y si no se ve, la espera
   parece un cuelgue. El trazo se engorda en proporción para que el giro se lea a
   ese tamaño.

   Gana a la regla de Bootstrap sin !important porque el atributo del scope suma
   especificidad. */
.edu-pago__spinner[b-t5foz4f2qt] {
    width: 3.5rem;
    height: 3.5rem;
    border-width: .3em;
}
/* /Views/Pago/Pasarelas/Niubiz/PagoEfectivo.cshtml.rz.scp.css */
/* =====================================================
   Views/Pago/Pasarelas/Niubiz/PagoEfectivo.cshtml.css
   El CIP es el dato que el alumno tiene que copiar o anotar a mano, así que se
   muestra grande, monoespaciado y con las cifras separadas para que no se
   confunda un 0 con una O al dictarlo por teléfono.
   ===================================================== */

.edu-pagoefectivo__cip[b-gedzd935hx] {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--edu-primario);
    user-select: all;
    word-break: break-all;
}
/* /Views/Perfil/Profesor.cshtml.rz.scp.css */
/* =====================================================
   Views/Perfil/Profesor.cshtml.css
   Lo que pinta Razor en esta vista: las secciones del perfil, la tarjeta del
   horario y la navegación de semana. La apertura, las cifras y la barra flotante
   son parciales con su propio CSS aislado (_AperturaPerfil, _CifrasPerfil y
   _BarraMatricula), igual que las reseñas (_ListaResenasPerfil).

   El horario NO se estila aquí: su marcado vive en la parcial compartida
   Views/Shared/_GrillaSemana.cshtml y se recarga por AJAX, así que el atributo
   b-xxxxx del CSS aislado no le aplicaría.
   Ver: wwwroot/css/componentes/horario.css y horario-perfil-publico.css
   ===================================================== */

/* === Secciones ===
   Cada tarjeta lleva su icono en una baldosa de la marca, como los beneficios del
   registro, y sube a su sitio mientras entra en pantalla. La entrada va ligada al
   desplazamiento, así que solo existe donde el navegador entiende
   animation-timeline; en los demás las tarjetas están quietas y visibles desde el
   principio. El horario no la lleva: su grilla se mide y se recoloca con JavaScript
   y no conviene moverla mientras tanto. */
.edu-perfil__seccion-icono[b-3nhwtibvgy] {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    margin-right: .65rem;
    border-radius: .6rem;
    background-color: var(--edu-claro);
    color: var(--edu-primario);
    font-size: 1rem;
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .edu-perfil__seccion[b-3nhwtibvgy] {
            animation: edu-perfil-revela-b-3nhwtibvgy linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }
    }
}

/* === Presentación: respeta los saltos de línea que escribió el profesor === */
.edu-perfil__presentacion[b-3nhwtibvgy] {
    white-space: pre-line;
}

/* Plegada, unas siete líneas que se desvanecen por abajo. La máscara recorta la
   transparencia del propio texto, así que funciona sobre la tarjeta de cualquier tema
   sin repetir su color. La altura se anima entre la plegada y la real, que
   perfil/profesor-vitrina.js mide en el momento porque depende del ancho. */
.edu-perfil__presentacion-marco[b-3nhwtibvgy] {
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.2, .7, .2, 1);
}

.edu-perfil__presentacion-marco--plegado[b-3nhwtibvgy] {
    max-height: 11.5rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.edu-perfil__leer-mas .bi[b-3nhwtibvgy] {
    display: inline-block;
    transition: transform .3s ease;
}

.edu-perfil__leer-mas[aria-expanded="true"] .bi[b-3nhwtibvgy] {
    transform: rotate(180deg);
}

/* === Reseñas ===
   Las tarjetas de cada reseña son de su parcial. El botón de "Cargar más" se
   deshabilita mientras llega el siguiente lote (perfil/profesor.js) y en ningún otro
   momento, así que el estado deshabilitado es el que enseña el indicador de carga. */
.edu-perfil__girador[b-3nhwtibvgy] {
    display: none;
}

.edu-perfil__mas-resenas:disabled .edu-perfil__girador[b-3nhwtibvgy] {
    display: inline-block;
}

/* === Cursos que enseña === */
.edu-perfil__curso[b-3nhwtibvgy] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border: 1px solid var(--edu-borde);
    border-radius: 999px;
    background-color: var(--edu-fondo);
    color: var(--edu-texto);
    font-size: .85rem;
    font-weight: 500;
    transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

    .edu-perfil__curso .bi[b-3nhwtibvgy] {
        color: var(--edu-primario);
    }

@media (hover: hover) {
    .edu-perfil__curso:hover[b-3nhwtibvgy] {
        transform: translateY(-2px);
        border-color: rgba(79, 70, 229, .4);
        background-color: var(--edu-claro);
    }
}

/* === Cómo tomar sus clases ===
   Los números salen de un contador de CSS: la lista ya es <ol> para los lectores de
   pantalla, y el círculo con la cifra es solo dibujo. La línea entre un número y el
   siguiente dice que es un recorrido. */
.edu-perfil__pasos[b-3nhwtibvgy] {
    counter-reset: paso;
}

.edu-perfil__paso[b-3nhwtibvgy] {
    position: relative;
    display: flex;
    gap: .9rem;
    counter-increment: paso;
}

    .edu-perfil__paso + .edu-perfil__paso[b-3nhwtibvgy] {
        margin-top: 1.1rem;
    }

    .edu-perfil__paso:not(:last-child)[b-3nhwtibvgy]::after {
        content: "";
        position: absolute;
        top: 2.35rem;
        bottom: -.85rem;
        left: 1rem;
        width: 2px;
        transform: translateX(-50%);
        background-color: var(--edu-borde);
    }

.edu-perfil__paso-numero[b-3nhwtibvgy] {
    display: grid;
    place-items: center;
    flex: 0 0 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #4F46E5;
    color: #FFFFFF;
    font-size: .85rem;
    font-weight: 700;
}

    .edu-perfil__paso-numero[b-3nhwtibvgy]::before {
        content: counter(paso);
    }

.edu-perfil__paso-texto[b-3nhwtibvgy] {
    color: var(--edu-texto-suave);
}

/* === Cursos y ciclos en curso ===
   Cada uno con un punto lima que late: está pasando ahora. */
.edu-perfil__activo[b-3nhwtibvgy] {
    padding: .7rem .9rem;
    border: 1px solid var(--edu-borde);
    border-radius: .85rem;
    background-color: var(--edu-fondo);
}

.edu-perfil__pulso[b-3nhwtibvgy] {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background-color: var(--edu-acento);
}

    .edu-perfil__pulso[b-3nhwtibvgy]::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background-color: inherit;
        animation: edu-perfil-pulso-b-3nhwtibvgy 1.8s ease-out infinite;
    }

.edu-perfil__ciclo[b-3nhwtibvgy] {
    font-size: .75rem;
}

/* === Horario ===
   La tarjeta destella al llegar desde un botón "Ver horario", para señalar dónde está
   lo que se buscaba. El destello espera a que termine el desplazamiento y va en
   outline, porque la sombra la fija shadow-sm con !important. Su color sale de una
   variable para que el tema oscuro lo aclare sin repetir la animación. */
.edu-perfil__horario[b-3nhwtibvgy] {
    --edu-perfil-resalte: 79, 70, 229;
}

.edu-perfil__horario--resaltado[b-3nhwtibvgy] {
    animation: edu-perfil-resalta-b-3nhwtibvgy 1.4s ease-out .45s;
}

/* El título es el destino del enlace #horario. Recibe el foco por programa al
   llegar, y el anillo de foco solo se ve cuando se llegó con teclado. */
#horario[b-3nhwtibvgy] {
    scroll-margin-top: 1.5rem;
}

    #horario:focus:not(:focus-visible)[b-3nhwtibvgy] {
        outline: none;
    }

.edu-perfil__horario-ayuda[b-3nhwtibvgy] {
    color: var(--edu-texto-suave);
}

/* El turno activo, en el índigo de la marca y no en el azul con el que Bootstrap
   compila nav-pills. El mismo tono en los dos temas: con el índigo luminoso del tema
   oscuro, el texto blanco no llega al contraste mínimo. */
#prof-nav-segs[b-3nhwtibvgy] {
    --bs-nav-pills-link-active-bg: #4F46E5;
}

/* Muestra del "+" con la forma y el color del botón real de las tarjetas: el lima de
   acción con el "+" oscuro (componentes/horario-perfil-publico.css). El botón real no
   cambia con el tema, porque la grilla es una isla clara, así que la muestra tampoco:
   sobre la tarjeta oscura el lima destaca igual. */
.edu-perfil__mas-muestra[b-3nhwtibvgy] {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0 .1rem;
    border-radius: 50%;
    background-color: #84CC16;
    color: #1A2E05;
    font-size: 1rem;
    vertical-align: -.3rem;
}

/* === Semana: etiqueta e input ===
   El fondo blanco es fijo a propósito: la etiqueta no debe teñirse con el modo
   oscuro del sistema, igual que la grilla. */
#prof-week-label[b-3nhwtibvgy] {
    min-width: 215px;
    background-color: #fff !important;
    color: #212529;
}

#prof-week-input[b-3nhwtibvgy] {
    width: auto;
}

/* === Tema oscuro === */
[data-tema="oscuro"] .edu-perfil__seccion-icono[b-3nhwtibvgy] {
    background-color: rgba(129, 140, 248, .14);
    color: #C7D2FE;
}

[data-tema="oscuro"] .edu-perfil__horario[b-3nhwtibvgy] {
    --edu-perfil-resalte: 165, 180, 252;
}

@media (hover: hover) {
    [data-tema="oscuro"] .edu-perfil__curso:hover[b-3nhwtibvgy] {
        border-color: rgba(165, 180, 252, .45);
    }
}

/* === Animaciones === */
@keyframes edu-perfil-revela-b-3nhwtibvgy {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }
}

@keyframes edu-perfil-pulso-b-3nhwtibvgy {
    from {
        transform: scale(1);
        opacity: .65;
    }

    to {
        transform: scale(2.8);
        opacity: 0;
    }
}

@keyframes edu-perfil-resalta-b-3nhwtibvgy {
    from {
        outline: 3px solid rgba(var(--edu-perfil-resalte), .7);
        outline-offset: 0;
    }

    to {
        outline: 3px solid rgba(var(--edu-perfil-resalte), 0);
        outline-offset: 14px;
    }
}

/* Con movimiento reducido todo queda quieto: sin pulsos, destellos ni
   deslizamientos. */
@media (prefers-reduced-motion: reduce) {
    .edu-perfil__pulso[b-3nhwtibvgy]::after,
    .edu-perfil__horario--resaltado[b-3nhwtibvgy] {
        animation: none;
    }

    .edu-perfil__presentacion-marco[b-3nhwtibvgy],
    .edu-perfil__leer-mas .bi[b-3nhwtibvgy],
    .edu-perfil__curso[b-3nhwtibvgy] {
        transition: none;
    }
}
/* /Views/Perfil/Profesores.cshtml.rz.scp.css */
/* =====================================================
   Akcadmia — Views/Perfil/Profesores.cshtml.css
   ===================================================== */

/* === Apertura ===
   La superficie, las manchas y la entrada escalonada son las de la franja de marca
   (componentes/franja-marca.css); aquí solo va lo propio de esta página. */
.edu-profesores__bajada[b-e3vuqv5fnj] {
    max-width: 38rem;
}

/* === Buscador ===
   Sobre la franja, elevado con una sombra para que se lea como lo primero que se
   usa. El grupo es blanco en los dos temas porque los campos del proyecto lo son
   (acadmia.css los deja claros a propósito): por eso sus colores van fijos y sin
   contraparte oscura. */
.caja-busqueda[b-e3vuqv5fnj] {
    min-width: 16rem;
    max-width: 26rem;
    flex: 1 1 16rem;
}

    /* El radio del grupo y el del icono son los del botón Buscar (edu-boton-acento),
       para que las cuatro esquinas y la sombra coincidan. */
    .caja-busqueda .input-group[b-e3vuqv5fnj] {
        border-radius: var(--edu-radio-borde);
        box-shadow: 0 .75rem 1.75rem rgba(49, 46, 129, .12);
        transition: box-shadow .25s ease;
    }

    .caja-busqueda .input-group-text[b-e3vuqv5fnj] {
        background-color: #fff;
        border-right: 0;
        border-radius: var(--edu-radio-borde);
        color: #4F46E5;
    }

    .caja-busqueda .form-control[b-e3vuqv5fnj] {
        border-left: 0;
    }

        .caja-busqueda .form-control:focus[b-e3vuqv5fnj] {
            border-color: #dee2e6;
            box-shadow: none;
        }

    /* El foco se dibuja sobre todo el grupo, no solo sobre el input, en el índigo de
       la marca y sin perder la sombra que lo eleva. */
    .caja-busqueda .input-group:focus-within[b-e3vuqv5fnj] {
        box-shadow: 0 0 0 .25rem rgba(79, 70, 229, .25), 0 .75rem 1.75rem rgba(49, 46, 129, .12);
    }

    /* El botón de limpiar, blanco como el resto del grupo. Con el fondo transparente
       de btn-outline-secondary se veía la franja a través de él: un hueco oscuro en
       tema oscuro. Va por las variables del botón para que Bootstrap siga resolviendo
       los estados. */
    .caja-busqueda .btn-outline-secondary[b-e3vuqv5fnj] {
        --bs-btn-bg: #FFFFFF;
        --bs-btn-color: #6B6B8A;
        --bs-btn-border-color: #dee2e6;
        --bs-btn-hover-bg: #EDEBFD;
        --bs-btn-hover-color: #4F46E5;
        --bs-btn-hover-border-color: #dee2e6;
        --bs-btn-active-bg: #E0DFF7;
        --bs-btn-active-color: #312E81;
        --bs-btn-active-border-color: #dee2e6;
    }

    /* Oculta la "x" nativa de <input type="search">: ya hay un botón propio. */
    .caja-busqueda input[type="search"][b-e3vuqv5fnj]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

/* === Tabla ===
   Los colores de la cabecera los pone table-light, que acadmia.css lleva a lavanda en
   claro y a gris pizarra en oscuro; aquí solo su tipografía, igual en los dos temas.
   El margen lateral de la primera y la última columna va aquí y no en utilidades del
   marcado, y solo mientras la tabla es tabla: en móvil la fila-tarjeta pone el suyo. */
.tabla-profesores thead th[b-e3vuqv5fnj] {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* En tableta la tabla va justa de ancho: el margen lateral se queda en 1rem y la
   cabecera "Clases dictadas" puede partirse en dos líneas, y ese ancho lo gana la
   columna del nombre. Desde escritorio hay sitio para todo y la cabecera va en una
   línea: sin nowrap, un nombre muy largo haría que la tabla la partiera para ganar
   ancho. */
@media (min-width: 768px) {
    .tabla-profesores > :not(caption) > * > :first-child[b-e3vuqv5fnj] {
        padding-left: 1rem;
    }

    .tabla-profesores > :not(caption) > * > :last-child[b-e3vuqv5fnj] {
        padding-right: 1rem;
    }
}

@media (min-width: 992px) {
    .tabla-profesores thead th[b-e3vuqv5fnj] {
        white-space: nowrap;
    }

    .tabla-profesores > :not(caption) > * > :first-child[b-e3vuqv5fnj] {
        padding-left: 1.5rem;
    }

    .tabla-profesores > :not(caption) > * > :last-child[b-e3vuqv5fnj] {
        padding-right: 1.5rem;
    }
}

.tabla-profesores tbody td[b-e3vuqv5fnj] {
    padding-top: .85rem;
    padding-bottom: .85rem;
}

/* Las filas entran escalonadas al cargar, con la animación de componentes/acceso.css.
   Las diez primeras se escalonan y el resto entra con la última: en una página larga,
   una cascada completa haría esperar a quien busca más abajo. */
.fila-profesor[b-e3vuqv5fnj] {
    cursor: pointer;
    animation: edu-acceso-aparece .5s cubic-bezier(.2, .7, .2, 1) backwards;
}

    .fila-profesor:nth-child(2)[b-e3vuqv5fnj] {
        animation-delay: .04s;
    }

    .fila-profesor:nth-child(3)[b-e3vuqv5fnj] {
        animation-delay: .08s;
    }

    .fila-profesor:nth-child(4)[b-e3vuqv5fnj] {
        animation-delay: .12s;
    }

    .fila-profesor:nth-child(5)[b-e3vuqv5fnj] {
        animation-delay: .16s;
    }

    .fila-profesor:nth-child(6)[b-e3vuqv5fnj] {
        animation-delay: .2s;
    }

    .fila-profesor:nth-child(7)[b-e3vuqv5fnj] {
        animation-delay: .24s;
    }

    .fila-profesor:nth-child(8)[b-e3vuqv5fnj] {
        animation-delay: .28s;
    }

    .fila-profesor:nth-child(9)[b-e3vuqv5fnj] {
        animation-delay: .32s;
    }

    .fila-profesor:nth-child(n+10)[b-e3vuqv5fnj] {
        animation-delay: .36s;
    }

/* Foto con aro de la marca separado por outline-offset, que deja ver el fondo de la
   fila en el hueco y así sirve igual en los dos temas. Al pasar por la fila el aro se
   abre y se intensifica. */
.avatar-profesor[b-e3vuqv5fnj],
.avatar-vacio[b-e3vuqv5fnj] {
    outline: 2px solid rgba(79, 70, 229, .2);
    outline-offset: 2px;
    transition: outline-color .25s ease, outline-offset .25s ease;
}

.avatar-profesor[b-e3vuqv5fnj] {
    object-fit: cover;
}

/* Sin foto: el degradado índigo de la marca, igual en los dos temas porque lleva su
   propio icono blanco encima. */
.avatar-vacio[b-e3vuqv5fnj] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #4F46E5 0%, #818CF8 100%);
    flex: 0 0 auto;
}

/* El !important gana a text-body, que lo lleva en Bootstrap. */
.enlace-profesor:hover[b-e3vuqv5fnj] {
    color: var(--edu-primario) !important;
}

/* Las estrellas y el botón no se parten: con un nombre largo, la tabla estrechaba esas
   columnas hasta dejar media estrella o la flecha del botón en otra línea. El ancho que
   falte lo cede el nombre, que sí puede ir en dos líneas. */
.estrellas[b-e3vuqv5fnj] {
    color: #ffc107;
    font-size: .8rem;
    letter-spacing: -.05em;
    white-space: nowrap;
}

.edu-profesores__ver[b-e3vuqv5fnj] {
    white-space: nowrap;
}

    .edu-profesores__ver .bi[b-e3vuqv5fnj] {
        display: inline-block;
        transition: transform .25s ease;
    }

/* Pasar por cualquier parte de la fila la marca entera como enlace: barra índigo que
   crece a la izquierda, aro de la foto abierto, nombre en el color de la marca y el
   botón relleno con la flecha adelantada. El botón toma sus colores de hover de las
   variables de btn-outline-primary, que acadmia.css ya ajusta en tema oscuro. Solo
   con puntero que pueda pasar por encima y con la tabla como tabla: en la vista de
   tarjetas de móvil la barra caería en medio de la tarjeta. */
@media (min-width: 768px) and (hover: hover) {
    .fila-profesor > td:first-child[b-e3vuqv5fnj] {
        position: relative;
    }

        .fila-profesor > td:first-child[b-e3vuqv5fnj]::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 3px;
            background-color: var(--edu-primario);
            transform: scaleY(0);
            transition: transform .25s ease;
        }

    .fila-profesor:hover > td:first-child[b-e3vuqv5fnj]::before {
        transform: scaleY(1);
    }

    .fila-profesor:hover .avatar-profesor[b-e3vuqv5fnj],
    .fila-profesor:hover .avatar-vacio[b-e3vuqv5fnj] {
        outline-color: rgba(79, 70, 229, .6);
        outline-offset: 3px;
    }

    .fila-profesor:hover .enlace-profesor[b-e3vuqv5fnj] {
        color: var(--edu-primario) !important;
    }

    .fila-profesor:hover .edu-profesores__ver[b-e3vuqv5fnj] {
        border-color: var(--bs-btn-hover-border-color);
        background-color: var(--bs-btn-hover-bg);
        color: var(--bs-btn-hover-color);
    }

        .fila-profesor:hover .edu-profesores__ver .bi[b-e3vuqv5fnj] {
            transform: translateX(3px);
        }
}

/* === Móvil: cada fila, una tarjeta ===
   Por debajo de 768 px la tabla de cinco columnas obligaba a desplazar de lado. Cada
   fila pasa a tarjeta: foto y nombre arriba, debajo los tres datos con su rótulo (el
   de data-etiqueta, porque la cabecera ya no está encima) y el botón a todo el ancho.
   Las celdas pierden su fondo: las filas alternas de acadmia.css pintan cada celda por
   separado, y en la tarjeta quedarían como parches; el !important gana a esa regla,
   que es más específica. */
@media (max-width: 767.98px) {
    .tabla-profesores[b-e3vuqv5fnj],
    .tabla-profesores tbody[b-e3vuqv5fnj] {
        display: block;
    }

        .tabla-profesores thead[b-e3vuqv5fnj] {
            display: none;
        }

        .tabla-profesores tbody tr[b-e3vuqv5fnj] {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: .75rem 1.25rem;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--bs-table-border-color);
        }

            .tabla-profesores tbody tr:last-child[b-e3vuqv5fnj] {
                border-bottom: 0;
            }

            .tabla-profesores tbody tr > td[b-e3vuqv5fnj] {
                display: block;
                padding-left: 0;
                padding-right: 0;
                border: 0;
                box-shadow: none;
                background-color: transparent !important;
            }

        .tabla-profesores tbody td[b-e3vuqv5fnj] {
            padding-top: 0;
            padding-bottom: 0;
        }

        .tabla-profesores tbody tr > td:first-child[b-e3vuqv5fnj],
        .tabla-profesores tbody tr > td:last-child[b-e3vuqv5fnj] {
            flex: 1 1 100%;
        }

        .tabla-profesores tbody td[data-etiqueta][b-e3vuqv5fnj]::before {
            content: attr(data-etiqueta);
            display: block;
            margin-bottom: .2rem;
            font-size: .68rem;
            font-weight: 600;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--edu-texto-suave);
        }

    /* En la tarjeta no hay puntero que pase por encima y rellene el botón, así que va
       con el fondo suave de la marca: se lee como la acción de la tarjeta sin el peso
       de una columna de botones sólidos seguidos. */
    .edu-profesores__ver[b-e3vuqv5fnj] {
        --bs-btn-bg: var(--edu-claro);
        width: 100%;
    }
}

/* === Paginación ===
   Botones sueltos y redondeados con los colores de la marca, por las variables de la
   paginación de Bootstrap; sin ellas, en tema oscuro quedaban casillas blancas sobre
   la página oscura. La página activa es índigo sólido y las demás se elevan un poco
   al pasar el cursor. */
.edu-profesores__paginacion[b-e3vuqv5fnj] {
    --bs-pagination-color: var(--edu-primario);
    --bs-pagination-bg: #FFFFFF;
    --bs-pagination-border-color: var(--edu-borde);
    --bs-pagination-hover-color: var(--edu-oscuro);
    --bs-pagination-hover-bg: var(--edu-claro);
    --bs-pagination-hover-border-color: var(--edu-borde);
    --bs-pagination-focus-color: var(--edu-oscuro);
    --bs-pagination-focus-bg: var(--edu-claro);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(79, 70, 229, .25);
    --bs-pagination-active-color: #FFFFFF;
    --bs-pagination-active-bg: #4F46E5;
    --bs-pagination-active-border-color: #4F46E5;
    --bs-pagination-disabled-color: var(--edu-texto-suave);
    --bs-pagination-disabled-bg: #FFFFFF;
    --bs-pagination-disabled-border-color: var(--edu-borde);
    gap: .4rem;
}

    .edu-profesores__paginacion .page-link[b-e3vuqv5fnj] {
        min-width: 2.5rem;
        margin-left: 0;
        border-radius: .65rem;
        text-align: center;
        transition: transform .2s ease, color .2s ease, background-color .2s ease;
    }

@media (hover: hover) {
    .edu-profesores__paginacion .page-item:not(.active):not(.disabled) .page-link:hover[b-e3vuqv5fnj] {
        transform: translateY(-2px);
    }
}

/* En un móvil estrecho los siete botones (anterior, cinco páginas y siguiente) caben en
   una fila con casillas algo más pequeñas; flex-wrap queda de red si no caben. */
@media (max-width: 575.98px) {
    .edu-profesores__paginacion[b-e3vuqv5fnj] {
        --bs-pagination-padding-x: .5rem;
        gap: .3rem;
    }

        .edu-profesores__paginacion .page-link[b-e3vuqv5fnj] {
            min-width: 2.25rem;
        }
}

/* === Tema oscuro === */
[data-tema="oscuro"] .caja-busqueda .input-group[b-e3vuqv5fnj] {
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .35);
}

    [data-tema="oscuro"] .caja-busqueda .input-group:focus-within[b-e3vuqv5fnj] {
        box-shadow: 0 0 0 .25rem rgba(165, 180, 252, .35), 0 .75rem 1.75rem rgba(0, 0, 0, .35);
    }

[data-tema="oscuro"] .avatar-profesor[b-e3vuqv5fnj],
[data-tema="oscuro"] .avatar-vacio[b-e3vuqv5fnj] {
    outline-color: rgba(129, 140, 248, .35);
}

@media (min-width: 768px) and (hover: hover) {
    [data-tema="oscuro"] .fila-profesor:hover .avatar-profesor[b-e3vuqv5fnj],
    [data-tema="oscuro"] .fila-profesor:hover .avatar-vacio[b-e3vuqv5fnj] {
        outline-color: rgba(165, 180, 252, .8);
    }
}

[data-tema="oscuro"] .edu-profesores__paginacion[b-e3vuqv5fnj] {
    --bs-pagination-color: #A5B4FC;
    --bs-pagination-bg: #1E293B;
    --bs-pagination-border-color: #334155;
    --bs-pagination-hover-color: #FFFFFF;
    --bs-pagination-hover-bg: #334155;
    --bs-pagination-hover-border-color: #475569;
    --bs-pagination-focus-color: #FFFFFF;
    --bs-pagination-focus-bg: #334155;
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(165, 180, 252, .35);
    --bs-pagination-disabled-color: #64748B;
    --bs-pagination-disabled-bg: #1E293B;
    --bs-pagination-disabled-border-color: #334155;
}

/* Con movimiento reducido las filas aparecen en su sitio y nada se desliza: sin
   entrada, sin barra que crece ni flecha que avanza. */
@media (prefers-reduced-motion: reduce) {
    .tabla-profesores *[b-e3vuqv5fnj],
    .tabla-profesores *[b-e3vuqv5fnj]::before,
    .edu-profesores__paginacion .page-link[b-e3vuqv5fnj] {
        animation: none !important;
        transition: none !important;
    }
}
/* /Views/Perfil/_AperturaPerfil.cshtml.rz.scp.css */
/* =====================================================
   Views/Perfil/_AperturaPerfil.cshtml.css
   Apertura del perfil público: foto, nombre, credenciales, redes y la llamada a
   tomar sus clases.

   La superficie de la franja, sus manchas y la entrada escalonada son las de
   componentes/franja-marca.css; aquí va lo propio de esta apertura. Lo que va
   directamente sobre la franja toma sus colores de variables que el tema oscuro
   voltea abajo, porque ahí la franja pasa de lavanda a índigo profundo.
   ===================================================== */

.edu-perfil__hero[b-g22ocot2ux] {
    --edu-perfil-hero-acento: var(--edu-primario);
    --edu-perfil-chip-fondo: rgba(255, 255, 255, .72);
    --edu-perfil-chip-borde: rgba(79, 70, 229, .16);
    --edu-perfil-chip-texto: var(--edu-texto);
    --edu-perfil-red-fondo: #FFFFFF;
    --edu-perfil-red-icono: #4F46E5;
    --edu-perfil-hueco: #FFFFFF;
    /* Abajo sobra sitio a propósito: la tarjeta de cifras (_CifrasPerfil) sube 3rem
       sobre la franja con un margen negativo, y este relleno se lo deja libre. */
    padding-top: 2rem;
    padding-bottom: 5rem;
}

@media (min-width: 768px) {
    .edu-perfil__hero[b-g22ocot2ux] {
        padding-top: 3rem;
        padding-bottom: 5.5rem;
    }
}

/* === Foto ===
   El aro es un degradado cónico de la marca que gira despacio por detrás. Gira el
   pseudo-elemento y no la foto, que se queda quieta; el borde de la foto, del tono de
   la franja, hace de hueco entre los dos. */
.edu-perfil__avatar[b-g22ocot2ux] {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 8.25rem;
    height: 8.25rem;
    border-radius: 50%;
}

    .edu-perfil__avatar[b-g22ocot2ux]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: 50%;
        background: conic-gradient(#4F46E5, #A5B4FC, #84CC16, #4F46E5);
        animation: edu-perfil-gira-b-g22ocot2ux 14s linear infinite;
    }

.edu-perfil__foto[b-g22ocot2ux],
.edu-perfil__foto-vacia[b-g22ocot2ux] {
    width: 7.5rem;
    height: 7.5rem;
    border: 4px solid var(--edu-perfil-hueco);
    box-shadow: 0 .75rem 1.75rem rgba(49, 46, 129, .22);
}

.edu-perfil__foto[b-g22ocot2ux] {
    object-fit: cover;
}

/* Sin foto: el degradado índigo de la marca con la silueta en blanco, igual en los dos
   temas. */
.edu-perfil__foto-vacia[b-g22ocot2ux] {
    background: linear-gradient(135deg, #4F46E5 0%, #818CF8 100%);
    color: #FFFFFF;
}

    .edu-perfil__foto-vacia .bi[b-g22ocot2ux] {
        font-size: 3.25rem;
    }

/* === Nombre y credenciales === */
.edu-perfil__identidad[b-g22ocot2ux] {
    min-width: 0;
}

.edu-perfil__materias[b-g22ocot2ux] {
    font-weight: 600;
    color: var(--edu-perfil-hero-acento);
}

/* Cada título, una credencial: el tipo en el color de la marca y la institución y el
   año un punto por detrás. Esquinas de 1rem y no de píldora: un título largo pasa a
   dos líneas en móvil y la píldora se deformaría. */
.edu-perfil__credencial[b-g22ocot2ux] {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    max-width: 100%;
    padding: .35rem .8rem;
    border: 1px solid var(--edu-perfil-chip-borde);
    border-radius: 1rem;
    background-color: var(--edu-perfil-chip-fondo);
    color: var(--edu-perfil-chip-texto);
    font-size: .8rem;
    line-height: 1.4;
    text-align: left;
}

    .edu-perfil__credencial .bi[b-g22ocot2ux] {
        color: var(--edu-perfil-hero-acento);
    }

.edu-perfil__credencial-tipo[b-g22ocot2ux] {
    font-weight: 700;
    color: var(--edu-perfil-hero-acento);
}

.edu-perfil__credencial-detalle[b-g22ocot2ux] {
    opacity: .8;
}

/* === Redes ===
   Botones redondos que se elevan y se rellenan de índigo al pasar el cursor. */
.edu-perfil__red[b-g22ocot2ux] {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--edu-perfil-red-fondo);
    color: var(--edu-perfil-red-icono);
    font-size: 1.1rem;
    text-decoration: none;
    box-shadow: 0 .35rem .9rem rgba(49, 46, 129, .12);
    transition: transform .25s ease, background-color .25s ease, color .25s ease;
}

    .edu-perfil__red:focus-visible[b-g22ocot2ux] {
        outline: 3px solid var(--edu-perfil-hero-acento);
        outline-offset: 2px;
    }

@media (hover: hover) {
    .edu-perfil__red:hover[b-g22ocot2ux] {
        transform: translateY(-3px);
        background-color: #4F46E5;
        color: #FFFFFF;
    }
}

/* === Llamada ===
   Tarjeta propia sobre la franja, con la sombra más marcada de la apertura: es lo
   que hay que pulsar. */
.edu-perfil__llamada[b-g22ocot2ux] {
    box-shadow: 0 1.25rem 2.75rem rgba(49, 46, 129, .18);
}

.edu-perfil__llamada-etiqueta[b-g22ocot2ux] {
    font-size: .72rem;
    letter-spacing: .1em;
    color: var(--edu-acento-texto);
}

    /* La antena late: un pulso de opacidad que dice "en vivo" sin moverse de sitio. */
    .edu-perfil__llamada-etiqueta .bi[b-g22ocot2ux] {
        font-size: .95rem;
        animation: edu-perfil-emite-b-g22ocot2ux 2.2s ease-in-out infinite;
    }

.edu-perfil__llamada-texto[b-g22ocot2ux] {
    color: var(--edu-texto-suave);
}

/* === Próxima clase ===
   Recuadro dentro de la llamada con la clase concreta que se puede tomar. Su día va en
   una píldora: hoy y mañana en el lima de acción con un punto que late, porque están al
   caer; el resto de fechas, en el lavanda de la marca. */
.edu-perfil__proxima[b-g22ocot2ux] {
    padding: .85rem 1rem;
    border: 1px solid var(--edu-borde);
    border-radius: .85rem;
    background-color: var(--edu-fondo);
}

.edu-perfil__proxima-etiqueta[b-g22ocot2ux] {
    font-size: .7rem;
    letter-spacing: .08em;
    color: var(--edu-texto-suave);
}

.edu-perfil__proxima-dia[b-g22ocot2ux] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background-color: var(--edu-claro);
    color: var(--edu-oscuro);
    font-size: .75rem;
    font-weight: 700;
}

.edu-perfil__proxima-dia--pronto[b-g22ocot2ux] {
    background-color: var(--edu-acento);
    color: var(--edu-acento-contraste);
}

    .edu-perfil__proxima-dia--pronto[b-g22ocot2ux]::before {
        content: "";
        width: .45rem;
        height: .45rem;
        border-radius: 50%;
        background-color: currentColor;
        animation: edu-perfil-emite-b-g22ocot2ux 1.6s ease-in-out infinite;
    }

.edu-perfil__proxima-enlace[b-g22ocot2ux] {
    color: var(--edu-primario);
}

    .edu-perfil__proxima-enlace .bi[b-g22ocot2ux] {
        display: inline-block;
        transition: transform .25s ease;
    }

@media (hover: hover) {
    .edu-perfil__proxima-enlace:hover .bi[b-g22ocot2ux] {
        transform: translateX(3px);
    }
}

/* El botón con el cuerpo que componentes/acceso.css le da en móvil, en todos los
   anchos: así "Ver horario y matricularme" cabe en una línea dentro de la tarjeta, y
   btn-lg conserva el alto y el relleno de un botón principal. */
.edu-perfil__llamada .edu-acceso__enviar[b-g22ocot2ux] {
    --bs-btn-font-size: 1.0625rem;
}

.edu-perfil__invitacion[b-g22ocot2ux] {
    border-top: 1px dashed var(--edu-borde);
}

/* === Tema oscuro === */
[data-tema="oscuro"] .edu-perfil__hero[b-g22ocot2ux] {
    --edu-perfil-hero-acento: #C7D2FE;
    --edu-perfil-chip-fondo: rgba(255, 255, 255, .08);
    --edu-perfil-chip-borde: rgba(255, 255, 255, .14);
    --edu-perfil-chip-texto: #E0E7FF;
    --edu-perfil-red-fondo: rgba(255, 255, 255, .1);
    --edu-perfil-red-icono: #E0E7FF;
    --edu-perfil-hueco: #1E1B4B;
}

[data-tema="oscuro"] .edu-perfil__foto[b-g22ocot2ux],
[data-tema="oscuro"] .edu-perfil__foto-vacia[b-g22ocot2ux] {
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .45);
}

[data-tema="oscuro"] .edu-perfil__red[b-g22ocot2ux] {
    box-shadow: none;
}

[data-tema="oscuro"] .edu-perfil__llamada[b-g22ocot2ux] {
    box-shadow: 0 1.25rem 2.75rem rgba(0, 0, 0, .45);
}

/* --edu-oscuro es aquí un gris pizarra pensado para fondos: el texto de la píldora del
   día pasa al del tema. */
[data-tema="oscuro"] .edu-perfil__proxima-dia[b-g22ocot2ux] {
    color: var(--edu-texto);
}

[data-tema="oscuro"] .edu-perfil__proxima-dia--pronto[b-g22ocot2ux] {
    color: var(--edu-acento-contraste);
}

/* === Animaciones === */
@keyframes edu-perfil-gira-b-g22ocot2ux {
    to {
        transform: rotate(360deg);
    }
}

@keyframes edu-perfil-emite-b-g22ocot2ux {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

/* Con movimiento reducido el aro, la antena y el punto del día quedan quietos, las
   redes no se elevan y el botón no destella: la regla de componentes/acceso.css que lo
   apaga solo alcanza a los botones del registro y del inicio de sesión. */
@media (prefers-reduced-motion: reduce) {
    .edu-perfil__avatar[b-g22ocot2ux]::before,
    .edu-perfil__llamada-etiqueta .bi[b-g22ocot2ux],
    .edu-perfil__proxima-dia--pronto[b-g22ocot2ux]::before,
    .edu-acceso__enviar[b-g22ocot2ux]::after {
        animation: none;
    }

    .edu-perfil__red[b-g22ocot2ux],
    .edu-perfil__proxima-enlace .bi[b-g22ocot2ux],
    .edu-acceso__enviar .bi[b-g22ocot2ux] {
        transition: none;
    }
}
/* /Views/Perfil/_BarraMatricula.cshtml.rz.scp.css */
/* =====================================================
   Views/Perfil/_BarraMatricula.cshtml.css
   Barra flotante del perfil público con el botón de ir al horario.

   Fija abajo, a todo el ancho en móvil y como píldora centrada desde tableta.
   Oculta, se baja fuera de la pantalla y deja de existir para el foco y los
   lectores (visibility); la clase --visible, que pone perfil/profesor-vitrina.js, la
   sube. La visibilidad cambia al final de la salida y al principio de la entrada,
   para que el deslizamiento se vea en los dos sentidos.
   ===================================================== */

.edu-perfil__barra[b-waqpkzn9ap] {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--edu-borde);
    background-color: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 -.75rem 2rem rgba(49, 46, 129, .12);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .35s;
}

.edu-perfil__barra--visible[b-waqpkzn9ap] {
    transform: none;
    visibility: visible;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}

.edu-perfil__barra-cuerpo[b-waqpkzn9ap] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* En el móvil más estrecho solo cabe el botón; quién es y su nota vuelven desde
   576 px. */
.edu-perfil__barra-quien[b-waqpkzn9ap] {
    display: none;
    min-width: 0;
    line-height: 1.3;
}

.edu-perfil__barra-nota[b-waqpkzn9ap] {
    color: var(--edu-texto-suave);
}

    .edu-perfil__barra-nota .bi[b-waqpkzn9ap] {
        color: #ffc107;
    }

.edu-perfil__barra-boton[b-waqpkzn9ap] {
    flex: 1 1 auto;
}

@media (min-width: 576px) {
    .edu-perfil__barra-quien[b-waqpkzn9ap] {
        display: block;
        flex: 1 1 auto;
    }

    .edu-perfil__barra-boton[b-waqpkzn9ap] {
        flex: 0 0 auto;
    }
}

@media (min-width: 768px) {
    .edu-perfil__barra[b-waqpkzn9ap] {
        right: auto;
        bottom: 1.25rem;
        left: 50%;
        width: min(38rem, calc(100% - 2rem));
        padding: .75rem .75rem .75rem 1.25rem;
        border: 1px solid var(--edu-borde);
        border-radius: 1.25rem;
        transform: translate(-50%, calc(100% + 2rem));
    }

    .edu-perfil__barra--visible[b-waqpkzn9ap] {
        transform: translate(-50%, 0);
    }
}

/* === Tema oscuro === */
[data-tema="oscuro"] .edu-perfil__barra[b-waqpkzn9ap] {
    background-color: rgba(30, 41, 59, .94);
    box-shadow: 0 -.75rem 2rem rgba(0, 0, 0, .45);
}

@media (min-width: 768px) {
    [data-tema="oscuro"] .edu-perfil__barra[b-waqpkzn9ap] {
        box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .55);
    }
}

/* Con movimiento reducido aparece y desaparece en el sitio, sin deslizarse, y su
   botón no destella: la regla de componentes/acceso.css que lo apaga solo alcanza a
   los botones del registro y del inicio de sesión. */
@media (prefers-reduced-motion: reduce) {
    .edu-perfil__barra[b-waqpkzn9ap],
    .edu-perfil__barra--visible[b-waqpkzn9ap],
    .edu-acceso__enviar .bi[b-waqpkzn9ap] {
        transition: none;
    }

    .edu-acceso__enviar[b-waqpkzn9ap]::after {
        animation: none;
    }
}
/* /Views/Perfil/_CifrasPerfil.cshtml.rz.scp.css */
/* =====================================================
   Views/Perfil/_CifrasPerfil.cshtml.css
   Tarjeta de cifras del perfil público.
   ===================================================== */

/* Sube 3rem sobre el borde inferior de la apertura, que deja ese sitio libre, y
   queda por encima de ella. */
.edu-perfil__cifras[b-mwls8mzyau] {
    position: relative;
    z-index: 1;
    margin-top: -3rem;
    box-shadow: 0 1rem 2.5rem rgba(49, 46, 129, .12);
}

/* Cada cifra en columna y alineada por arriba: iconos y números quedan a la misma
   altura en toda la fila. */
.edu-perfil__cifra[b-mwls8mzyau] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

/* Divisores solo cuando las cifras van en una fila: en móvil van de dos en dos y la
   separación ya la da el hueco de la rejilla. */
@media (min-width: 768px) {
    .edu-perfil__cifra + .edu-perfil__cifra[b-mwls8mzyau] {
        border-left: 1px solid var(--edu-borde);
    }
}

.edu-perfil__cifra-icono[b-mwls8mzyau] {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: .35rem;
    border-radius: .8rem;
    background-color: var(--edu-claro);
    color: var(--edu-primario);
    font-size: 1.15rem;
    transition: background-color .3s ease, color .3s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1);
}

.edu-perfil__cifra-icono--estrella[b-mwls8mzyau] {
    color: #F59E0B;
}

/* Dígitos tabulares: mientras la cifra cuenta, todos miden lo mismo y el número no
   baila. */
.edu-perfil__cifra-valor[b-mwls8mzyau] {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--edu-oscuro);
    font-variant-numeric: tabular-nums;
}

.edu-perfil__cifra-etiqueta[b-mwls8mzyau] {
    font-size: .8rem;
    line-height: 1.3;
    color: var(--edu-texto-suave);
}

.edu-perfil__estrellas[b-mwls8mzyau] {
    color: #ffc107;
    font-size: .75rem;
    letter-spacing: .05em;
}

/* La escala del nivel, del tamaño de las estrellas de la calificación: las dos filas
   que acompañan a una cifra pesan lo mismo. Los cuadros y sus colores los pone la
   parcial _NivelProfesor, que no lleva hoja propia; de aquí solo heredan el tamaño. */
.edu-perfil__cifra-escala[b-mwls8mzyau] {
    font-size: .75rem;
}

@media (hover: hover) {
    .edu-perfil__cifra:hover .edu-perfil__cifra-icono[b-mwls8mzyau] {
        transform: translateY(-3px) rotate(-6deg);
        background-color: var(--edu-primario);
        color: #FFFFFF;
    }
}

/* === Tema oscuro ===
   --edu-oscuro es aquí un gris pizarra pensado para fondos, no para texto: la cifra
   pasa al blanco de los títulos del tema. */
[data-tema="oscuro"] .edu-perfil__cifras[b-mwls8mzyau] {
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .4);
}

[data-tema="oscuro"] .edu-perfil__cifra-icono[b-mwls8mzyau] {
    background-color: rgba(129, 140, 248, .14);
    color: #C7D2FE;
}

[data-tema="oscuro"] .edu-perfil__cifra-icono--estrella[b-mwls8mzyau] {
    color: #FBBF24;
}

[data-tema="oscuro"] .edu-perfil__cifra-valor[b-mwls8mzyau] {
    color: #F1F5F9;
}

@media (prefers-reduced-motion: reduce) {
    .edu-perfil__cifra-icono[b-mwls8mzyau] {
        transition: none;
    }
}
/* /Views/Perfil/_ListaResenasPerfil.cshtml.rz.scp.css */
/* =====================================================
   Views/Perfil/_ListaResenasPerfil.cshtml.css
   Cada reseña del perfil público, como tarjeta.

   Va en el CSS aislado de la parcial y no en el de la vista: el de Profesor.cshtml
   no alcanza el marcado de una parcial, y este lote además llega por AJAX al pulsar
   "Cargar más reseñas". Lo pinta Razor igual en los dos casos, así que el atributo
   de ámbito de esta parcial viaja con él y las reglas le llegan también al lote
   nuevo, que entra con la misma animación.
   ===================================================== */

/* Tarjeta hundida sobre la de la sección: el fondo de la página dentro de una
   tarjeta se lee como un bloque citado, en los dos temas. */
.edu-resena[b-5i56s6y83a] {
    position: relative;
    padding: 1.1rem 1.25rem 1rem;
    border: 1px solid var(--edu-borde);
    border-radius: 1rem;
    background-color: var(--edu-fondo);
    animation: edu-acceso-aparece .5s cubic-bezier(.2, .7, .2, 1) backwards;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

    /* Comillas grandes y casi transparentes en la esquina: dicen "esto lo escribió
       un alumno" sin un icono más que leer. */
    .edu-resena[b-5i56s6y83a]::before {
        content: "\201C";
        position: absolute;
        top: -.55rem;
        right: .9rem;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 4.5rem;
        line-height: 1;
        color: var(--edu-primario);
        opacity: .14;
        pointer-events: none;
    }

    /* Cada lote entra en cascada, una reseña detrás de otra. */
    .edu-resena:nth-child(2)[b-5i56s6y83a] {
        animation-delay: .06s;
    }

    .edu-resena:nth-child(3)[b-5i56s6y83a] {
        animation-delay: .12s;
    }

    .edu-resena:nth-child(4)[b-5i56s6y83a] {
        animation-delay: .18s;
    }

    .edu-resena:nth-child(n+5)[b-5i56s6y83a] {
        animation-delay: .24s;
    }

@media (hover: hover) {
    .edu-resena:hover[b-5i56s6y83a] {
        transform: translateY(-2px);
        border-color: rgba(79, 70, 229, .35);
        box-shadow: 0 .75rem 1.5rem rgba(49, 46, 129, .08);
    }
}

.edu-resena__estrellas[b-5i56s6y83a] {
    color: #ffc107;
    font-size: .9rem;
    letter-spacing: .05em;
}

/* Un comentario puede traer saltos de línea o una palabra larguísima: se respetan
   los primeros y la segunda se parte antes que desbordar la tarjeta en móvil. */
.edu-resena__texto[b-5i56s6y83a] {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.edu-resena__origen[b-5i56s6y83a] {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--edu-texto-suave);
}

    .edu-resena__origen .bi[b-5i56s6y83a] {
        color: var(--edu-primario);
    }

/* === Tema oscuro === */
[data-tema="oscuro"] .edu-resena[b-5i56s6y83a] {
    background-color: rgba(15, 23, 42, .55);
}

@media (hover: hover) {
    [data-tema="oscuro"] .edu-resena:hover[b-5i56s6y83a] {
        border-color: rgba(165, 180, 252, .45);
        box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .edu-resena[b-5i56s6y83a] {
        animation: none;
        transition: none;
    }
}
/* /Views/Perfil/_RepartoCalificaciones.cshtml.rz.scp.css */
/* =====================================================
   Views/Perfil/_RepartoCalificaciones.cshtml.css
   Resumen de calificaciones a la cabeza de las reseñas del perfil público.
   ===================================================== */

/* Una línea lo separa de las reseñas que tiene debajo, como un encabezado. */
.edu-reparto[b-bdmxfmx527] {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--edu-borde);
}

/* Dígitos tabulares: mientras la nota cuenta, todos miden lo mismo y no baila. */
.edu-reparto__valor[b-bdmxfmx527] {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--edu-oscuro);
    font-variant-numeric: tabular-nums;
}

/* El amarillo de las estrellas de la tarjeta de cifras, igual en los dos temas. */
.edu-reparto__estrellas[b-bdmxfmx527] {
    margin-top: .4rem;
    color: #ffc107;
    font-size: .9rem;
    letter-spacing: .05em;
}

.edu-reparto__total[b-bdmxfmx527] {
    margin-top: .25rem;
    color: var(--edu-texto-suave);
}

/* La nota y el porcentaje con ancho propio en em: no empujan la barra, así que las
   cinco empiezan y acaban a la misma altura. */
.edu-reparto__nota[b-bdmxfmx527] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    min-width: 2.1em;
    font-size: .85rem;
    font-weight: 600;
    color: var(--edu-texto);
}

    .edu-reparto__nota .bi[b-bdmxfmx527] {
        color: #ffc107;
        font-size: .75em;
    }

.edu-reparto__porcentaje[b-bdmxfmx527] {
    min-width: 3.4em;
    text-align: end;
    font-size: .8rem;
    color: var(--edu-texto-suave);
    font-variant-numeric: tabular-nums;
}

/* La pista es del envoltorio y el relleno es del <meter>, que pierde su aspecto nativo
   y su pista propia y pinta solo el tramo de su valor en el índigo de la marca. Así la
   pista se queda quieta mientras el relleno entra. Chrome y Safari dibujan el relleno
   con sus pseudoelementos -webkit-; Firefox, con -moz-meter-bar. */
.edu-reparto__pista[b-bdmxfmx527] {
    display: block;
    height: .55rem;
    border-radius: 999px;
    background-color: var(--edu-claro);
    overflow: hidden;
}

.edu-reparto__barra[b-bdmxfmx527] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

    .edu-reparto__barra[b-bdmxfmx527]::-webkit-meter-bar {
        height: 100%;
        border: 0;
        background: transparent;
    }

    .edu-reparto__barra[b-bdmxfmx527]::-webkit-meter-optimum-value,
    .edu-reparto__barra[b-bdmxfmx527]::-webkit-meter-suboptimum-value,
    .edu-reparto__barra[b-bdmxfmx527]::-webkit-meter-even-less-good-value {
        border-radius: 999px;
        background: var(--edu-primario);
    }

    .edu-reparto__barra[b-bdmxfmx527]::-moz-meter-bar {
        border-radius: 999px;
        background: var(--edu-primario);
    }

/* Las barras se llenan de izquierda a derecha al entrar en pantalla, ligadas al
   desplazamiento como las secciones del perfil. Solo donde el navegador entiende
   animation-timeline y no se pidió reducir el movimiento; en los demás casos están
   llenas desde el principio.

   La línea de tiempo es el bloque entero y no cada barra: una barra mide medio
   centímetro y entraría en pantalla de golpe. Así las cinco se llenan mientras el
   resumen asoma por abajo y quedan llenas en cuanto está entero a la vista, también si
   ya lo está al cargar la página. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .edu-reparto[b-bdmxfmx527] {
            view-timeline-name: --edu-reparto;
        }

        .edu-reparto__barra[b-bdmxfmx527] {
            animation: edu-reparto-llena-b-bdmxfmx527 linear both;
            animation-timeline: --edu-reparto;
            animation-range: entry 25% entry 100%;
        }
    }
}

@keyframes edu-reparto-llena-b-bdmxfmx527 {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/* === Tema oscuro ===
   --edu-oscuro es aquí un gris pizarra pensado para fondos: la nota pasa al blanco de
   las cifras del perfil. */
[data-tema="oscuro"] .edu-reparto__valor[b-bdmxfmx527] {
    color: #F1F5F9;
}
/* /Views/Shared/_Layout.cshtml.rz.scp.css */
/* =====================================================
   Views/Shared/_Layout.cshtml.css
   Estilos globales del layout principal (navbar, footer, alertas)
   ===================================================== */

/* === Navbar === */
.edu-navbar[b-4lbx4m07ju] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.edu-navbar__marca[b-4lbx4m07ju] {
    letter-spacing: -0.5px;
    font-weight: 700;
}

/* Logotipo de la barra. Se acota la ALTURA y no el ancho: la barra tiene su propia
   altura y un SVG sin acotar la estiraría; con el ancho en automático, el logo
   conserva su proporción sea cuadrado o alargado.

   El width en auto es necesario aunque parezca redundante: sin él, un SVG sin
   viewBox declarado toma el ancho del contenedor. */
.edu-navbar__logo[b-4lbx4m07ju] {
    height: 2rem;
    width: auto;
    /* Baja un pelo el logo para alinear su centro óptico con el de la palabra, que
       las mayúsculas del texto dejan más arriba. */
    vertical-align: -0.25rem;
}

.edu-navbar__icono-monedas[b-4lbx4m07ju] {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 80px;
    text-align: center;
}

/* === Alertas globales (TempData) === */
.edu-alerta-global[b-4lbx4m07ju] {
    border-radius: var(--edu-radio-borde);
    border-left: 4px solid transparent;
    animation: edu-fadeIn 300ms ease forwards;
}

    .edu-alerta-global.alert-success[b-4lbx4m07ju] {
        border-left-color: var(--edu-secundario);
    }

    .edu-alerta-global.alert-danger[b-4lbx4m07ju] {
        border-left-color: var(--edu-peligro);
    }

    .edu-alerta-global.alert-warning[b-4lbx4m07ju] {
        border-left-color: var(--edu-acento);
    }

/* === Footer ===
   La clase .edu-footer NO estaba puesta en el elemento: estas reglas llevaban
   tiempo sin aplicarse a nada. Ahora el <footer> la lleva. */
.edu-footer[b-4lbx4m07ju] {
    font-size: 0.875rem;
}

    /* Los títulos de las columnas del pie ("Explorar", "Legal", "Contacto") caen
       bajo la regla global de encabezados de sitio.css, que les pone el color de
       título del tema. Sobre el fondo oscuro del pie eso los apagaba hasta casi
       desaparecer, y en modo claro el índigo se comía por completo.

       Se les da el color del propio pie, un poco más marcado que el de los enlaces
       para que sigan leyéndose como encabezado. */
    .edu-footer h1[b-4lbx4m07ju], .edu-footer h2[b-4lbx4m07ju], .edu-footer h3[b-4lbx4m07ju],
    .edu-footer h4[b-4lbx4m07ju], .edu-footer h5[b-4lbx4m07ju], .edu-footer h6[b-4lbx4m07ju] {
        color: #F1F5F9;
    }

    .edu-footer a:hover[b-4lbx4m07ju] {
        color: #fff !important;
        transition: var(--edu-transicion);
    }

/* Listas de enlaces del pie. El interlineado justo va aquí y no con clases de
   Bootstrap porque son tres bloques y repetirlo en cada uno invita a que se
   descuadren entre ellos. */
.edu-footer__lista li + li[b-4lbx4m07ju] {
    margin-top: 0.15rem;
}

/* Logotipo del pie, más pequeño que el de la barra: aquí es una firma, no la
   marca principal. La altura la marca la línea del texto que lleva al lado. */
.edu-footer__logo[b-4lbx4m07ju] {
    height: 1.25rem;
    width: auto;
    flex-shrink: 0;
}

/* El aviso del Libro comparte renglón con el copyright, pero no debe estirarse
   hasta pegarse a él en pantallas medianas. */
.edu-footer__aviso[b-4lbx4m07ju] {
    max-width: 70ch;
}

/* === Main content area === */
.edu-main[b-4lbx4m07ju] {
    min-height: calc(100vh - 60px - 100px);
}

/* === Breadcrumb global === */
.edu-breadcrumb[b-4lbx4m07ju] {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: 0.85rem;
}

    .edu-breadcrumb .breadcrumb-item + .breadcrumb-item[b-4lbx4m07ju]::before {
        color: var(--edu-texto-suave);
    }

/* === Hover lift utility === */
.hover-lift[b-4lbx4m07ju] {
    transition: var(--edu-transicion);
}

    .hover-lift:hover[b-4lbx4m07ju] {
        transform: translateY(-3px);
        box-shadow: var(--edu-sombra-hover);
    }