/* cursos.css — tarjetas de curso, fichas y aula.
 * Se carga en las rutas públicas y en el campus, que comparten estos
 * componentes. Los valores salen de los tokens: nada de colores sueltos. */

/* ── Rejilla y tarjeta de curso ───────────────────────────────────────────── */

.esc-curso-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

.esc-curso-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-bg);
    border: var(--card-bd);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
}

.esc-curso-card:hover,
.esc-curso-card:focus-within {
    transform: var(--card-lift);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--color-accent);
}

.esc-curso-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.esc-curso-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.esc-curso-card:hover .esc-curso-card__media img { transform: scale(1.04); }

.esc-curso-card__ph {
    display: block;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.esc-curso-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px 26px;
    flex: 1;
}

.esc-curso-card__tipo {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.esc-curso-card__titulo { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.esc-curso-card__titulo a { color: var(--color-primary); }
.esc-curso-card__titulo a:hover { color: var(--color-accent); }

.esc-curso-card__resumen {
    margin: 0;
    font-size: .9375rem;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.esc-curso-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    color: var(--color-secondary);
}

.esc-curso-card__pct { margin: 0; font-size: .8125rem; color: var(--color-text-muted); }

/* ── Barra de progreso ────────────────────────────────────────────────────── */

.esc-progreso {
    height: 8px;
    border-radius: 99px;
    background: var(--color-bg-alt);
    overflow: hidden;
}

.esc-progreso__barra {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--color-gold);
    transition: width .4s ease;
}

/* ── Badges ───────────────────────────────────────────────────────────────── */

.esc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.esc-badge {
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid var(--color-border-light);
}

/* ── Barra de filtros del catálogo ────────────────────────────────────────── */

/* Barra de filtros compacta (2026-09-25: «minimizá y ordená mejor la barra de
   filtros, que no ocupe tanto espacio»). Una sola fila: los grupos de
   píldoras uno al lado del otro, separados por una línea, y la búsqueda a la
   derecha. En pantallas chicas los grupos se deslizan en horizontal. */
.esc-catalogo.esc-sec { padding-top: 32px; }
.esc-catalog-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--color-border);
}
.esc-catalog-bar .esc-filter-group { gap: 6px; flex-wrap: nowrap; }
.esc-catalog-bar .esc-filter-group + .esc-filter-group { padding-left: 16px; border-left: 1px solid var(--color-border); }
.esc-catalog-bar .esc-filter { padding: 5px 12px; font-size: 11px; white-space: nowrap; }
.esc-catalog-bar .esc-search { margin-left: auto; min-width: 0; width: 240px; padding: 6px 14px; }

.esc-count { margin: 0 0 20px; color: var(--color-secondary); font-size: .8125rem; }

/* ── Ficha de curso ───────────────────────────────────────────────────────── */

.esc-ficha__hero {
    position: relative;
    padding: 56px 0 56px;
    background: var(--color-primary);
    color: #fff;
    overflow: hidden;
}

.esc-ficha__hero-media { position: absolute; inset: 0; opacity: .28; }
.esc-ficha__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.esc-ficha__hero-body { position: relative; }
.esc-ficha__hero h1 { margin: 0; font-size: 3rem; line-height: 1.08; color: #fff; }
.esc-ficha__hero .page-subtitle { color: rgba(255, 255, 255, .85); }

.esc-ficha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
    padding: 64px 0 80px;
}

.esc-ficha__datos {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    padding: 28px;
    background: var(--color-bg);
    border: var(--card-bd);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.esc-ficha__datos-titulo { margin: 0 0 18px; font-size: 1.125rem; }
.esc-ficha__datos dl { margin: 0 0 22px; }
.esc-ficha__datos dt { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-secondary); }
.esc-ficha__datos dd { margin: 2px 0 14px; font-size: .9375rem; font-weight: 600; }
.esc-ficha__datos .btn + .btn { margin-top: 10px; }
.esc-ficha__datos-nota { margin: 10px 0 0; color: var(--color-secondary); text-align: center; }

.esc-programa { margin: 0 0 40px; padding: 0; list-style: none; counter-reset: modulo; }

.esc-programa__item {
    padding: 22px 0;
    border-bottom: 1px solid var(--color-border);
}

.esc-programa__item h3 { margin: 0 0 8px; font-size: 1.25rem; }
.esc-programa__n { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); }

/* ── Aula ─────────────────────────────────────────────────────────────────── */

.esc-aula-progreso { max-width: 420px; margin-top: 20px; }

/*
 * `color: inherit`, no blanco fijo — corregido el 2026-09-16.
 *
 * Esta línea decía `rgba(255,255,255,.82)` porque `.esc-pagehead` pinta una
 * banda azul. Dentro del campus, `paneles.css` la vuelve transparente para que
 * no quede un bloque de color pegado al carril, y entonces el «50% del curso
 * completado» quedaba blanco sobre blanco: invisible justo en la pantalla que
 * más se mira. Con `inherit` sirve en los dos fondos, que es la razón por la
 * que `paneles.css` pone `color: inherit` en la cabecera.
 */
.esc-aula-progreso p { margin: 8px 0 0; font-size: .875rem; color: inherit; opacity: .82; }

.esc-asistencia-bar { margin-bottom: 32px; }

/* Aviso fijo «Marcar como completada» (P-128): icono a la primera línea y un
   tamaño de texto que se lea en el teléfono, no el .9rem de las alertas. */
.au-aviso-completar { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; font-size: 1rem; line-height: 1.5; }
.au-aviso-completar .icon { flex: none; margin-top: 3px; }

/*
 * Aula portada al prototipo — 2026-09-16 (P-29).
 *
 * Acá vivían `.esc-modulos`, `.esc-modulo*`, `.esc-clases` y `.esc-clase*`: un
 * segundo diseño del aula, escrito en el tema mientras el prototipo ya la tenía
 * resuelta con `au-module` / `au-lesson` / `au-att` y esos estilos ya estaban
 * portados en `components.css` sin que nadie los usara. Se borran en vez de
 * dejarlos «por las dudas»: CSS muerto con nombres parecidos es exactamente
 * cómo volvieron a competir dos diseños las dos veces anteriores.
 *
 * Sobrevive `.esc-modulo__aviso`, que lo sigue usando `publico-audiencia.php`.
 *
 * Lo que queda debajo son los ajustes que el aula real necesita y el prototipo
 * no: en el prototipo el reproductor va una vez por módulo, acá cada clase
 * tiene el suyo, así que la fila de clase deja de ser una línea centrada y
 * pasa a ser un bloque que crece.
 */

.au-modulos { display: flex; flex-direction: column; gap: 18px; }

/* Con video, texto o bibliografía adentro, centrar verticalmente dejaría el
   icono y el botón flotando a media altura de un bloque alto. */
.au-lesson { align-items: flex-start; }
.au-lesson__ico,
.au-lesson .au-att { margin-top: 2px; }

.au-lesson--locked { opacity: .72; }
.au-lesson--locked .au-lesson__ico { background: var(--color-bg-alt); color: var(--color-text-muted); }

.au-lesson__body .esc-prose { margin-top: 10px; font-size: .875rem; }
.au-lesson__body .au-doc-list { margin-top: 12px; }

/* El estado «Completada» ya no es un botón: es una etiqueta. Hereda el verde
   de `.au-att.done` del prototipo y solo pierde el cursor de acción. */
span.au-att.done { cursor: default; }

/* El candado del módulo bloqueado va centrado con su texto. En el prototipo
   el icono era una tipografía (Font Awesome) y `display:block` + `text-align`
   alcanzaban; acá los iconos son una máscara SVG, o sea una caja, y una caja
   en bloque se va contra el borde izquierdo si no se la centra a mano. */
.au-module__locknote .icon { margin-inline: auto; }

/* Lo usa `publico-audiencia.php` para el velo de confidencialidad. */
.esc-modulo__aviso {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--warning-soft);
    border: 1px solid rgba(230, 126, 34, .25);
    color: var(--warning);
    font-size: .875rem;
}

/* ── Aula con el diseño completo del prototipo — 2026-09-17 (P-08, D-1) ────
 *
 * `.esc-player` es del prototipo (components.css): el póster oscuro con
 * imagen, insignia y botón de play que anuncia la próxima clase en vivo. Acá
 * se llamaba igual un envoltorio 16:9 para iframes, y cursos.css (que carga
 * después) lo pisaba: dos diseños con el mismo nombre. El reproductor real
 * pasa a ser `.au-player`, y `.esc-player` vuelve a ser solo el póster.
 */

.au-aula { padding-top: 34px; }

.au-aula .pf-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; }

.au-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin-bottom: 24px;
}

.au-head__titulo .badge { margin-bottom: 8px; }
.au-head__titulo h1 { margin: 6px 0 0; font-size: 1.9rem; line-height: 1.15; }

.au-head__prog { min-width: 240px; max-width: 320px; margin: 0; }
.au-head__prog p { margin: 8px 0 0; font-size: .8125rem; color: var(--color-secondary); }
.au-head__prog p strong { color: var(--color-primary); }

/* Las pestañas del curso reutilizan la mecánica de app.js (.is-activo) sobre
   el aspecto del prototipo (.esc-course-tab.active). */
.esc-course-tab.is-activo { border-bottom-color: var(--color-primary); color: var(--color-primary); }
.esc-course-tab.is-activo i { color: var(--color-primary); }
.esc-course-tabs.esc-tabs { margin-bottom: 26px; }

.esc-lesson-tab.is-activo { border-color: var(--color-primary); background: var(--color-bg-alt); }
.esc-lesson-tab.is-activo i { color: var(--color-primary); }
.esc-lesson-tab[aria-selected] { cursor: pointer; }

/* 900 px de tope: a todo el ancho de la columna un 16:9 ocupa la pantalla
   entera y la lista de clases queda a dos desplazamientos de distancia.
   scroll-margin-top compensa el header fijo cuando aula.js sube hasta acá. */
.au-player { max-width: 900px; margin-bottom: 14px; scroll-margin-top: calc(var(--header-h) + 16px); }
.au-player + .au-cat-head,
.esc-player--poster + .au-cat-head { margin-top: 36px; }

.au-player__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: var(--card-shadow);
}

.au-player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.au-player__stage { position: absolute; inset: 0; }
.au-player__stage > div,
.au-player__stage iframe { width: 100%; height: 100%; border: 0; }

/* Reproductor propio (reproductor.js). El iframe de YouTube no recibe clics:
   la capa los toma, así que no hay enlaces ni menú contextual de YouTube. */
.au-player__box { border-radius: 10px; background: #000; box-shadow: var(--card-shadow); position: relative; }
.au-player__box .au-player__frame { box-shadow: none; border-radius: 10px 10px 0 0; }
.au-player__box:not(.is-yt) .au-player__frame { border-radius: 10px; }
.au-player__box.is-yt iframe { pointer-events: none; }
.au-player__box .au-player__frame { background-size: cover; background-position: center; }
.au-player__box.is-inicio iframe { visibility: hidden; }
/* Video servido por la plataforma (P-140): mismo trato que el iframe de YouTube.
   Los clics los toma la capa; antes del primer play se ve el póster del fondo. */
.au-player__stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; pointer-events: none; }
.au-player__box.is-inicio video { visibility: hidden; }
.au-player__capa { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 0; }
.au-player__box:not(.is-yt) .au-player__capa,
.au-player__box:not(.is-yt) .au-player__grande { display: none; }
.au-player__grande { position: absolute; z-index: 3; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; pointer-events: none; transition: opacity .15s; }
.au-player__grande svg { width: 30px; height: 30px; }
.au-player__box.is-reproduciendo .au-player__grande { opacity: 0; }

.au-ctl { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--color-primary); color: #fff; border-radius: 0 0 10px 10px; }
.au-ctl[hidden] { display: none; }
.au-ctl__btn { display: inline-flex; align-items: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; justify-content: center; }
.au-ctl__btn:hover { background: rgba(255,255,255,.14); }
.au-ctl__btn svg { width: 20px; height: 20px; }
.au-ctl__btn:focus-visible,
.au-player__capa:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.au-ctl__subs { border: 1px solid currentColor; }
.au-ctl__subs.is-activo { background: var(--color-gold); color: var(--color-primary); border-color: var(--color-gold); }
.au-ctl__reloj { font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-ctl__barra { flex: 1; min-width: 60px; accent-color: var(--color-gold); cursor: pointer; }

.au-ccmenu { position: absolute; right: 8px; bottom: calc(100% + 6px); z-index: 5; width: min(300px, calc(100% - 16px)); max-height: 60vh; overflow: auto; padding: 6px; border-radius: 10px; background: var(--color-primary); color: #fff; box-shadow: var(--card-shadow); }
.au-ccmenu[hidden] { display: none; }
.au-ccmenu__op { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.au-ccmenu__op:hover { background: rgba(255,255,255,.14); }
.au-ccmenu__op.is-activa { background: var(--color-gold); color: var(--color-primary); font-weight: 700; }
.au-ccmenu__op small { opacity: .75; font-size: .75rem; }
.au-ccmenu__tit { margin: 8px 10px 4px; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.au-ccmenu__nota { margin: 0; padding: 10px; font-size: .875rem; }
.au-ccmenu__aviso { margin-top: 4px; border-top: 1px solid rgba(255,255,255,.2); font-size: .75rem; opacity: .85; }
.au-player__aviso { margin: 0; padding: 8px 12px; font-size: .8125rem; color: var(--color-primary); background: var(--warning-soft); border-radius: 0 0 10px 10px; }
.au-player__aviso[hidden] { display: none; }
/* Falla del video (2026-09-28): se dice qué pasó en vez de dejar el indicador girando. */
.au-player__falla { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; color: #fff; background: var(--velo-primary-94); background: color-mix(in srgb, var(--color-primary) 94%, transparent); border-radius: 10px; }
.au-player__falla strong { font-size: 1.125rem; }
.au-player__falla span { max-width: 46ch; font-size: .9375rem; line-height: 1.5; opacity: .9; }
.au-player__falla p { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; }
/* Sobre el fondo azul del aviso el botón azul del aula no se ve: el principal va en dorado (acento) y el secundario en blanco. */
.au-player__falla .au-btn { background: var(--color-gold); color: var(--color-primary) !important; }
.au-player__falla .au-btn--ghost { background: transparent; color: #fff !important; border: 1px solid currentColor; }
.au-player__box.is-falla iframe,
.au-player__box.is-falla .au-player__capa,
.au-player__box.is-falla .au-player__grande { display: none; }
.au-player__box.is-falla .au-player__frame { border-radius: 10px; }
.au-ccmenu__sel { width: calc(100% - 20px); margin: 0 10px 6px; padding: 8px; border-radius: 6px; font: inherit; font-size: .875rem; }

.au-player__box:fullscreen { display: flex; flex-direction: column; border-radius: 0; }
.au-player__box:fullscreen .au-player__frame { flex: 1; aspect-ratio: auto; border-radius: 0; }
.au-player__box:fullscreen .au-ctl { border-radius: 0; }
.au-player__box:-webkit-full-screen { display: flex; flex-direction: column; border-radius: 0; }
.au-player__box:-webkit-full-screen .au-player__frame { flex: 1; aspect-ratio: auto; border-radius: 0; }

.au-player__meta { padding: 14px 4px 0; }
.au-player__sub { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-secondary); }
.au-player__titulo { margin: 4px 0 0; font-size: 1.25rem; }

/* El póster del prototipo, sin imagen de fondo cargada, muestra el degradé. */
.esc-player--poster { min-height: 260px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); margin-bottom: 14px; }
.esc-player--poster .text-small { margin-top: 12px; opacity: .8; }
.esc-player--poster[hidden] { display: none; }
/* «Agregar al calendario» sobre el póster oscuro: la variante ghost trae texto azul y se perdía. */
.esc-player--poster .ds-btn--ghost { color: inherit; border-color: currentColor; margin-right: 8px; }
.au-player[hidden] { display: none; }

/* La clase que está en el reproductor se distingue en la lista. */
.au-mlink.is-actual { color: var(--color-primary); font-weight: 800; }

.au-num--txt { font-size: 1rem; }

.au-cert-banner--pend { background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-text); }
.au-cert-banner--pend strong, .au-cert-banner--pend span { color: inherit; }
.au-cert-banner--pend .icon { color: var(--color-secondary); }

.au-check { padding-left: 0; list-style: none; counter-reset: paso; }
.au-check li { counter-increment: paso; }
.au-check li::before { content: counter(paso) '. '; font-weight: 800; color: var(--color-primary); }

/* ── Estadísticas del campus ──────────────────────────────────────────────── */

.esc-hero-stats { display: flex; flex-wrap: wrap; gap: 36px; margin: 24px 0 0; padding: 0; list-style: none; }
.esc-hero-stat { display: flex; flex-direction: column; }
.esc-hero-stat strong { font-size: 2.25rem; font-weight: 900; line-height: 1; color: #fff; }
.esc-hero-stat span { margin-top: 4px; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }

@media (max-width: 980px) {
    .esc-ficha { grid-template-columns: 1fr; gap: 40px; padding: 40px 0 56px; }
    .esc-ficha__datos { position: static; }
    .esc-ficha__hero h1 { font-size: 2.125rem; }
    .esc-catalog-bar .esc-search { width: 100%; margin-left: 0; }
    .esc-catalog-bar .esc-filter-group { overflow-x: auto; scrollbar-width: none; }
}

/* Los títulos de sección del prototipo miden 2.3rem en mayúsculas porque son
   encabezados de página; dentro de la ficha compiten con el título del curso. */
.esc-ficha__cuerpo .esc-sec-head { max-width: none; margin-bottom: 18px; }
.esc-ficha__cuerpo .esc-sec-head h2 { font-size: 1.5rem; text-transform: none; letter-spacing: -.02em; }

/* ── Contenido propio de cada clase — pedido del 2026-09-16 ────────────────
 * «Los módulos tienen clases dentro, cada clase tiene su propia bibliografía y
 * su propio texto de presentación y textos adicionales.» Secretaría señaló lo
 * mismo en su revisión: con la bibliografía de todo el curso junta en una
 * pestaña, el alumno no sabe qué leer para la clase que está cursando.
 *
 * La bibliografía de la clase pasó a pintarse con `au-doc-list` del prototipo
 * (P-29, 2026-09-16); lo que queda acá es la nota suelta, indentada respecto de
 * la clase y con una barra a la izquierda: se lee como algo que pertenece a esa
 * clase y no como una sección nueva del módulo.
 */

.esc-clase__nota {
    margin: 14px 0 0 0;
    padding: 14px 16px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: var(--glass-bg-tint);
}

.esc-clase__nota h5 {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 10px;
    color: var(--color-primary);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

    padding: 7px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: .875rem;
    line-height: 1.45;
}

.esc-clase__nota .esc-prose { font-size: .875rem; }
.esc-clase__nota .esc-prose p:last-child { margin-bottom: 0; }


/* ── Catálogo público con las píldoras del prototipo — 2026-09-17 (D-2) ─────
 * Los estilos de .esc-catalog-bar, .esc-filter y .esc-search son del prototipo
 * y viven en components.css. Acá solo lo que el prototipo no necesitaba. */

.esc-search .icon { width: 16px; flex: none; color: var(--color-secondary); }
.esc-search input[type=search] { border: 0; outline: 0; padding: 0; background: transparent; box-shadow: none; }
.esc-search:focus-within { border-color: var(--color-primary); }
.esc-filter { text-decoration: none; }
.esc-filter:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.esc-curso-grid .ds-card[hidden] { display: none; }
.esc-catalogo .esc-empty .btn { margin-top: 14px; }

/* ── Ficha interna del catálogo (/campus/catalogo/{slug}) — 2026-09-17 ─────── */

.esc-ficha-interna { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.esc-ficha-interna__cuerpo .esc-panel + .esc-panel { margin-top: 18px; }
.esc-ficha-interna__lateral { position: sticky; top: calc(var(--header-h) + 16px); }
.esc-ficha-interna .esc-ficha__datos h3.esc-ficha__datos-titulo { margin-top: 22px; }
.esc-ficha-interna .au-check li strong { font-weight: 700; }

@media (max-width: 1080px) {
    .esc-ficha-interna { grid-template-columns: 1fr; }
    .esc-ficha-interna__lateral { position: static; }
}

/* ── Filas de curso del campus (pf-card del prototipo) — 2026-09-17 (D-3) ─── */

.esc-filas-cursos { display: flex; flex-direction: column; gap: 14px; }
.pf-card--fila { display: block; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.pf-card--fila:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.pf-card--fila .pf-course { border: 0; padding: 0; }
.pf-course__ir { margin-left: auto; font-weight: 700; color: var(--color-primary); }
.esc-kpis--campus { margin-bottom: 30px; }

/* ── Ficha pública: volver y franja de datos (D-4) ────────────────────────── */

.pf-back--claro, .pf-back--claro:hover { color: #fff; }
.esc-ficha__hero-body .pf-back { margin-bottom: 18px; }
.esc-ficha__hero-body .esc-course-facts { margin-top: 28px; }

/* ── Ficha de docente sobre el usuario (decisión 3-A, 2026-09-17) ─────────── */

.esc-docente { display: flex; align-items: center; gap: 24px; }
.esc-docente__ava {
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
    background: #fff;
    box-shadow: var(--card-shadow);
}
.esc-docente__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }

@media (max-width: 980px) {
    .esc-docente__cuerpo { grid-template-columns: 1fr; }
}


/* ── Bienvenida, programa, lo que falta, certificado y encuesta (2026-09-18) ── */
.au-bienvenida { max-width: 70ch; margin-bottom: 20px; }
.au-paso-lista, .au-pasos-fin { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.au-paso { border: 1px solid var(--border, #e2e5ec); border-radius: var(--radius-md, 10px); background: #fff; }
/* Los dos accesos (Guía y Programa) son el MISMO botón (pedido 2026-09-25):
   ícono a la izquierda, texto que ocupa el ancho, flecha a la derecha. En la
   guía la flecha es un chevron que gira al abrir. */
.au-paso__det > summary, .au-paso__enlace { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; color: inherit; text-decoration: none; border-radius: inherit; transition: background var(--transition); }
.au-paso__det > summary:hover, .au-paso__enlace:hover { background: var(--color-bg-alt); }
.au-paso__det > summary::-webkit-details-marker { display: none; }
.au-paso__det > .esc-prose, .au-paso__det > .au-indice, .au-paso__det > .au-indice__intro { margin: 0 16px 16px; }
.au-paso__det[open] > summary { border-bottom: 1px solid var(--color-border); border-radius: inherit inherit 0 0; }
.au-paso__det > summary > span, .au-paso__enlace > span { flex: 1; min-width: 0; }
.au-paso small { display: block; color: var(--color-secondary); font-size: .8125rem; font-weight: 400; }
.au-paso .icon:first-child { color: var(--color-primary); font-size: 1.25rem; width: 24px; text-align: center; }
.au-paso .au-paso__flecha { color: var(--color-secondary); font-size: 1rem; transition: transform .2s ease; }
.au-paso__det[open] > summary .au-paso__flecha { transform: rotate(90deg); }
.au-paso__det .au-indice__fila { padding: 16px 0; }
.au-faltan { margin: 6px 0 0 1.1rem; padding: 0; font-size: .875rem; }
.au-module__locknote + .au-faltan { margin-left: 2.1rem; }

.au-prog { display: grid; gap: 14px; margin-bottom: 20px; }
.au-prog__mod { border-left: 3px solid var(--color-primary); padding: 2px 0 2px 14px; }
.au-prog__mod h4 { margin: 0 0 6px; }
.au-prog__clases { margin: 0; padding-left: 1.2rem; }
.au-prog__clases li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.au-prog__clases small { color: var(--color-secondary); font-variant-numeric: tabular-nums; }

.au-paso-fin { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--border, #e2e5ec); border-radius: var(--radius-md, 10px); background: #fff; }
.au-paso-fin > .icon { font-size: 1.4rem; margin-top: 2px; color: var(--color-secondary); }
.au-paso-fin > div { flex: 1; min-width: 0; }
.au-paso-fin > div > span { display: block; font-size: .875rem; color: var(--color-secondary); margin-top: 2px; }
.au-paso-fin.is-bloqueado { background: var(--gray-50, #f6f7f9); }
.au-paso-fin.is-revision { border-color: var(--color-gold); background: var(--warning-soft); }
.au-paso-fin.is-listo { background: var(--success-soft); }
.au-paso-fin.is-listo > .icon { color: var(--success, #2f7a4a); }

.au-encuesta { margin-top: 14px; display: grid; gap: 12px; }
.au-encuesta fieldset { border: 0; margin: 0; padding: 0; }
.au-encuesta legend { font-size: .9375rem; font-weight: 600; padding: 0; margin-bottom: 6px; }
.au-encuesta__escala { display: flex; gap: 8px; }
.au-encuesta__escala label { position: relative; cursor: pointer; }
.au-encuesta__escala input { position: absolute; opacity: 0; }
.au-encuesta__escala span { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--border, #cfd4de); border-radius: 8px; background: #fff; font-weight: 700; }
.au-encuesta__escala input:checked + span { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.au-encuesta__escala input:focus-visible + span { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.au-encuesta textarea { width: 100%; }
/* Bloques y numeración del cuestionario por curso (2026-09-25). */
.au-encuesta__bloque { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--color-accent); }
.au-encuesta__bloque:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.au-encuesta__n { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 4px; border-radius: 6px; background: var(--color-bg-alt); font-size: .6875rem; font-weight: 800; color: var(--color-accent); vertical-align: 1px; }
.au-encuesta__escala input:checked + span { box-shadow: 0 0 0 3px rgba(62, 90, 126, .18); }

/* ── Avatares con foto (pedido 2026-09-25) ───────────────────────────────────
   Cualquier avatar del sitio (.esc-rail__ava, .esc-userchip__ava, .au-person__ava,
   .esc-perfil-cabeza__ava, .esc-docente__ava) lleva .is-foto cuando la persona
   tiene imagen: la foto llena el círculo y las iniciales no se pintan. */
.is-foto { overflow: hidden; padding: 0; }
.is-foto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* ── Cierre del curso: «quedan N días» (pedido 2026-09-25) ──────────────── */
.au-head__cierre { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 6px 12px; border-radius: 99px; background: var(--glass-bg-tint); border: 1px solid var(--glass-border); font-size: .8125rem; font-weight: 600; color: var(--color-primary); }
.au-head__cierre.is-urgente { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.pf-course__cierre { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--color-text-muted); }
.pf-course__cierre.is-urgente { color: var(--warning); font-weight: 700; }
.esc-seguir__cierre { margin: 10px 0 0; font-size: .8125rem; color: rgba(255, 255, 255, .78); }
.esc-seguir__cierre .icon { color: var(--color-gold); margin-right: 4px; }

/* ── Docente y bibliografía dentro de la fila de clase ─────────────────── */
.au-lesson__meta { display: block; font-size: .8125rem; color: var(--color-secondary); }
.au-lesson__meta .icon { font-size: .75rem; margin-right: 2px; }
.au-lesson__biblio-t { margin: 14px 0 6px; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-secondary); }
.au-doc-item--bloqueado { opacity: .6; background: var(--color-bg-alt); }
.au-doc-item--bloqueado:hover { border-color: var(--color-border); box-shadow: none; }
.au-doc-go--off { color: var(--color-secondary); }

/* ── Índice (programa y guía) — referencia visual del 2026-09-25 ────────────
   Número pequeño · título grande y negro · descripción en versalitas a la
   derecha, filas separadas por una línea fina. Sin barras de color. */
.au-indice__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); }
.au-indice__titulo { margin: 0; font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: .95; color: var(--color-secondary); }
.au-indice__datos { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.au-indice__datos strong { color: var(--color-primary); }
.au-indice__intro { margin-bottom: 20px; }
.au-indice { list-style: none; margin: 0 0 30px; padding: 0; }
.au-indice__fila { display: grid; grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 24px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--color-border); }
.au-indice__fila:first-child { border-top: 1px solid var(--color-border); }
.au-indice__num { font-size: .875rem; font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; padding-top: 6px; }
.au-indice__nombre { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--color-primary); }
.au-indice__nombre .icon { font-size: .8em; margin-left: 6px; vertical-align: middle; color: var(--success); }
.au-indice__fila.is-bloqueado .au-indice__nombre { color: var(--color-text-muted); }
.au-indice__fila.is-bloqueado .au-indice__nombre .icon { color: var(--color-secondary); }
.au-indice__desc { margin: 0; padding-top: 6px; font-size: .75rem; line-height: 1.6; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.au-indice--guia .au-indice__desc { text-transform: none; letter-spacing: 0; font-size: .9rem; }
.au-indice--guia .au-indice__desc ul, .au-indice--guia .au-indice__desc ol { padding-left: 18px; margin: 0; }
.au-indice--guia .au-indice__desc p, .au-indice--guia .au-indice__desc li { margin: 0 0 6px; }
.au-indice__clases { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.au-indice__clases li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: .9rem; }
.au-indice__clases li::before { content: '—'; color: var(--color-secondary); }
.au-indice__clases li.is-hecha .au-indice__clase { color: var(--success); }
.au-indice__clases small { color: var(--color-secondary); font-size: .78rem; }
.au-indice__eval { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: .8125rem; color: var(--color-text-muted); }
.au-indice__eval .icon { color: var(--color-accent); margin-right: 4px; }
@media (max-width: 720px) {
    .au-indice__fila { grid-template-columns: 36px 1fr; }
    .au-indice__desc { grid-column: 2; padding-top: 0; }
}

/* ── Bibliografía por módulo y clase (P-53) ─────────────────────────────── */
.au-biblio { display: grid; gap: 28px; }
.au-biblio__mod-t { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--color-primary); }
.au-biblio__mod-t small { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--color-secondary); text-transform: uppercase; letter-spacing: .04em; }
.au-biblio__modulo.is-bloqueado .au-biblio__mod-t { color: var(--color-text-muted); }
.au-biblio__clase { margin: 0 0 14px; }
.au-biblio__clase h4 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 8px; font-size: .95rem; font-weight: 700; color: var(--color-primary); }
.au-biblio__clase h4 small { font-weight: 500; color: var(--color-secondary); font-size: .8125rem; }

/* ── Docentes de texto (P-53) ───────────────────────────────────────────── */
.au-person--texto { cursor: default; }
.au-person--texto::after { display: none; }
.au-person--texto:hover { transform: none; box-shadow: var(--card-shadow); }
.au-person__bio { font-size: .8125rem; color: var(--color-text-muted); line-height: 1.5; }
.au-person__bio p { margin: 0; }

/* ── Trabajo práctico (P-53) ────────────────────────────────────────────── */
.au-tarea { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--glass-border); border-radius: var(--card-radius); background: var(--glass-bg); }
.au-tarea__head { display: flex; align-items: flex-start; gap: 14px; }
.au-tarea__head > .icon { font-size: 1.5rem; color: var(--color-accent); margin-top: 2px; }
.au-tarea__head > div { flex: 1; min-width: 0; }
.au-tarea__head strong { display: block; font-size: 1rem; color: var(--color-primary); }
.au-tarea__head span { display: block; font-size: .8125rem; color: var(--color-secondary); margin-top: 2px; }
.au-tarea__consigna { margin: 14px 0 0; font-size: .9rem; }
.au-tarea__entrega { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--color-bg); border: 1px solid var(--color-border); }
.au-tarea__entrega p { margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; }
.au-tarea__entrega small { color: var(--color-secondary); }
.au-tarea__entrega .au-doc-go { display: inline-flex; gap: 6px; align-items: center; font-size: .875rem; color: var(--color-primary); font-weight: 700; text-decoration: none; margin-right: 14px; }
.au-tarea__devolucion { margin: 10px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--glass-bg-tint); font-size: .875rem; }
.au-tarea__devolucion p { margin: 4px 0 0; }
.au-tarea__form { margin-top: 14px; display: grid; gap: 12px; }
.au-tarea__form .esc-field { margin: 0; }
.au-tarea__form input[type="file"] { display: block; font-size: .875rem; }
.au-tarea__form button { justify-self: start; }

/* Reproductor: indicador mientras el video arranca (2026-09-25). */
.au-player__box.is-cargando .au-player__grande { opacity: 1; }
.au-player__box.is-cargando .au-player__grande svg { display: none; }
.au-player__box.is-cargando .au-player__grande::after { content: ''; width: 30px; height: 30px; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: au-gira .8s linear infinite; }
@keyframes au-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .au-player__box.is-cargando .au-player__grande::after { animation-duration: 2.4s; } }
.au-indice__abre { margin: 8px 0 0; font-size: .8125rem; font-weight: 600; color: var(--color-accent); } .au-module__ventana { color: var(--color-secondary); }

/* Subtítulos propios del curso, dibujados sobre el video (2026-09-25). */
.au-player__cc { position: absolute; z-index: 2; left: 50%; bottom: 7%; transform: translateX(-50%); max-width: 86%; padding: 6px 14px; border-radius: 6px; background: rgba(0, 0, 0, .74); color: #fff; font-size: clamp(.875rem, 2.1vw, 1.3rem); line-height: 1.4; text-align: center; white-space: pre-line; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.au-player__cc[hidden] { display: none; }
:fullscreen .au-player__cc, :-webkit-full-screen .au-player__cc { font-size: clamp(1.1rem, 2.4vw, 2rem); bottom: 10%; }
.au-ctl__subs.is-curso:not(.is-activo)::after { content: ''; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--color-gold); }

/* ── Encuesta en pasos, en popup (2026-09-25) ─────────────────────────────
   Una afirmación por pantalla; la barra y el estado muestran cuánto falta. */
.esc-encuesta-modal {
    position: fixed; inset: 0; z-index: 10060;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: var(--velo-primary-68); background: color-mix(in srgb, var(--color-primary) 68%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.esc-encuesta-modal[hidden] { display: none; }
.esc-encuesta-modal__card {
    position: relative; width: 100%; max-width: 620px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--color-bg); border-radius: var(--card-radius); box-shadow: var(--shadow-md);
    border-top: 4px solid var(--color-gold);
    padding: 36px 40px 30px;
}
.esc-encuesta-modal__cerrar {
    position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
    display: grid; place-items: center; border: 0; border-radius: 50%;
    background: var(--color-bg-alt); color: var(--color-primary); cursor: pointer;
}
.esc-encuesta-modal__cerrar:hover { background: var(--color-accent); color: var(--blanco); }
.esc-encuesta-modal__eyebrow { margin: 0 0 4px; font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--color-accent); padding-right: 40px; }
.esc-encuesta-modal__titulo { margin: 0 0 18px; font-size: 1.35rem; color: var(--color-primary); }
.esc-encuesta-modal__avance { height: 6px; border-radius: 99px; background: var(--color-bg-alt); overflow: hidden; }
.esc-encuesta-modal__avance span { display: block; height: 100%; width: 0; background: var(--color-gold); border-radius: inherit; transition: width .35s ease; }
.esc-encuesta-modal__estado { margin: 8px 0 22px; font-size: .8125rem; font-weight: 600; color: var(--color-text-muted); }

.is-pasos .au-encuesta { margin: 0; gap: 0; }
.is-pasos .au-encuesta__paso { min-height: 230px; animation: au-enc-entra .25s ease; }
.is-pasos .au-encuesta__paso[hidden] { display: none; }
@keyframes au-enc-entra { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .is-pasos .au-encuesta__paso { animation: none; } }

.is-pasos .au-encuesta__bloque { margin: 0 0 10px; padding: 0; border: 0; }
.is-pasos .au-encuesta legend { font-size: 1.125rem; line-height: 1.45; font-weight: 600; color: var(--color-text); margin-bottom: 22px; }
.is-pasos .au-encuesta__escala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.is-pasos .au-encuesta__escala label { display: block; }
.is-pasos .au-encuesta__escala span {
    width: 100%; height: auto; min-height: 88px; padding: 12px 6px;
    flex-direction: column; gap: 6px; text-align: center; border-radius: 10px;
    transition: border-color .15s, background .15s, color .15s;
}
.is-pasos .au-encuesta__escala span b { font-size: 1.25rem; }
.is-pasos .au-encuesta__escala span small { font-size: .6875rem; font-weight: 600; line-height: 1.25; color: var(--color-text-muted); }
.is-pasos .au-encuesta__escala label:hover span { border-color: var(--color-accent); }
.is-pasos .au-encuesta__escala input:checked + span small { color: inherit; }

.au-encuesta__paso--intro, .au-encuesta__paso--fin { text-align: center; }
.au-encuesta__paso--intro h3, .au-encuesta__paso--fin h3 { margin: 6px 0 12px; color: var(--color-primary); font-size: 1.2rem; }
.au-encuesta__paso--intro p, .au-encuesta__paso--fin p { margin: 0 auto 10px; max-width: 46ch; color: var(--color-text-muted); line-height: 1.6; }
.au-encuesta__sello { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--warning-soft); color: var(--color-gold-dark); font-size: 1.5rem; }
.au-encuesta__promesa { margin-top: 16px; color: var(--color-primary); }
.au-encuesta__paso--fin .btn { margin-top: 12px; }

/* Paso «¿Te comunicaste con nosotros?» (P-146): la casilla es un renglón
   entero, para que se toque fácil en el teléfono. */
.au-encuesta__paso--contacto h3 { margin: 0 0 10px; color: var(--color-primary); font-size: 1.125rem; }
.au-encuesta__paso--contacto > p:not([class]) { margin: 0 0 16px; color: var(--color-text-muted); line-height: 1.6; }
.au-encuesta__casilla { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 10px; font-weight: 600; color: var(--color-text); cursor: pointer; }
.au-encuesta__casilla:hover { border-color: var(--color-accent); }
.au-encuesta__casilla input { width: 18px; height: 18px; accent-color: var(--color-accent); flex: none; }

.au-encuesta__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.au-encuesta__nav [data-encuesta-sig], .au-encuesta__nav [data-encuesta-enviar] { margin-left: auto; }
.au-encuesta__nav [hidden] { display: none; }

@media (max-width: 600px) {
    .esc-encuesta-modal { padding: 0; align-items: stretch; }
    .esc-encuesta-modal__card { max-height: none; border-radius: 0; padding: 28px 16px 20px; }
    .is-pasos .au-encuesta__escala { grid-template-columns: 1fr; }
    .is-pasos .au-encuesta__escala span { min-height: 0; flex-direction: row; justify-content: flex-start; padding: 12px 14px; gap: 12px; }
    .is-pasos .au-encuesta__escala span small { font-size: .8125rem; }
    .is-pasos .au-encuesta__paso { min-height: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Auditoría móvil — 2026-10-07 (P-114)
 * ═══════════════════════════════════════════════════════════════════════════ */

/*
 * C-01 — La clase aplastada en el teléfono.
 *
 * .au-lesson es una fila flex sin wrap: icono 44 px + cuerpo + botón
 * «Marcar como completada» (white-space: nowrap, no encoge). A 390 px el
 * cuerpo quedaba con 78 px, la descripción salía una palabra por línea y una
 * clase llegó a medir 3311 px de alto. Bajo 640 px el botón baja a su propia
 * línea, alineado con el texto, y el cuerpo se queda con todo el ancho.
 */
@media (max-width: 640px) {
    .au-lesson { flex-wrap: wrap; padding: 12px; gap: 10px; }
    .au-lesson__ico { width: 36px; height: 36px; flex-basis: 36px; font-size: 15px; }
    .au-lesson__body { flex: 1 1 calc(100% - 46px); min-width: 0; }
    .au-lesson > .au-att { flex: 0 1 auto; margin: 2px 0 0 46px; white-space: normal; min-height: 44px; }
    .au-doc-item { flex-wrap: wrap; }
    .au-doc-item .au-doc-body { flex: 1 1 calc(100% - 36px); min-width: 0; }
    .au-doc-item a.au-doc-go,
    .au-doc-item .au-doc-go { margin-left: 34px; display: inline-flex; align-items: center; min-height: 44px; }
    .au-module__body { padding: 12px 14px 14px; }
    .au-tarea { padding: 14px; }
}

/*
 * C-06c — Controles del reproductor en el teléfono. A 390 px la barra de
 * avance quedaba en 60 px (imposible con el dedo) y el último botón se salía
 * del reproductor. La barra pasa a una fila propia, arriba de los botones.
 */
@media (max-width: 640px) {
    .au-ctl { flex-wrap: wrap; gap: 4px; padding: 6px 8px 8px; }
    .au-ctl__barra { flex: 1 1 100%; order: -1; height: 28px; margin: 0; }
    .au-ctl__btn { min-width: 44px; height: 44px; }
    .au-ctl__reloj { margin-right: auto; }
    .au-ctl__subs span { display: none; }
}

/* Volumen resaltado cuando iOS solo dejó arrancar el video sin sonido (C-06b). */
.au-ctl__mudo.is-aviso { background: var(--color-gold); color: var(--color-primary); }

/* «Continuar desde 23:10» (C-06d). */
.au-player__retomar { margin: 0; padding: 8px 10px; background: var(--color-bg-alt); border-radius: 0 0 10px 10px; }
.au-player__retomar[hidden] { display: none; }
.au-player__retomar-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); color: var(--color-primary); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.au-player__retomar-btn:hover { border-color: var(--color-accent); }
.au-player__box .au-ctl:has(+ .au-player__aviso:not([hidden])),
.au-player__box .au-ctl:has(~ .au-player__retomar:not([hidden])) { border-radius: 0; }

/*
 * C-06a — Pantalla completa sin la API (iPhone): la caja ocupa la ventana.
 * height en dos líneas: 100vh primero, 100dvh después para quien lo entienda
 * (en iPhone 100vh incluye la zona tapada por la barra del navegador).
 */
.au-player__box.is-ampliado {
    position: fixed; inset: 0; z-index: 10050;
    display: flex; flex-direction: column; justify-content: center;
    width: 100vw; height: 100vh; height: 100dvh; max-width: none;
    margin: 0; border-radius: 0; background: #000;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.au-player__box.is-ampliado .au-player__frame { flex: 0 1 auto; width: 100%; max-height: calc(100% - 100px); border-radius: 0; }
.au-player__box.is-ampliado .au-ctl,
.au-player__box.is-ampliado .au-player__retomar { border-radius: 0; }
html.cipdh-sin-scroll, html.cipdh-sin-scroll body { overflow: hidden; }

/* U-03 — Módulos plegables (los arma aula.js). Toda la cabecera abre y
   cierra; el botón con la flecha es el que lleva el estado accesible. */
.au-module__body[hidden] { display: none; }
.au-module.is-plegado .au-module__head { border-bottom-color: transparent; }
.au-modulos .au-module__head { cursor: pointer; }
.au-module__plegar {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: -8px -10px -8px auto;
    border: 0; border-radius: 50%; background: transparent; color: var(--color-primary); cursor: pointer;
}
.au-module__plegar:hover { background: rgba(35, 45, 79, .06); }
.au-module__plegar:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.au-module__plegar .icon { transition: transform .2s; }
.au-module.is-plegado .au-module__plegar .icon { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .au-module__plegar .icon { transition: none; } }
@media (max-width: 640px) {
    .au-module__head { flex-wrap: wrap; gap: 10px 12px; padding: 14px; }
    .au-module__t { flex: 1 1 calc(100% - 110px); min-width: 0; }
}

/* U-03 — Descripción de la clase en cuatro líneas, con «Ver más» (aula.js). */
.au-lesson__body > .esc-prose.is-recortada {
    display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.au-lesson__body > .esc-prose.is-recortada > * { display: inline; }
.au-lesson__body > .esc-prose.is-recortada > * + *::before { content: ' '; }
.au-lesson__mas {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0;
    border: 0; background: none; color: var(--color-accent); font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}

/* Audio / podcast en el reproductor (P-115, M-09): alto de reproductor de
   audio en vez del recuadro 16:9, que dejaba media pantalla vacía. */
.au-player__box.is-audio { background: transparent; box-shadow: none; }
.au-player__box.is-audio .au-player__frame { aspect-ratio: auto; height: 232px; background: transparent; box-shadow: none; border-radius: 12px; }
.au-player__box.is-audio .au-player__frame iframe { border-radius: 12px; }

/* P-139 (2026-10-21) — Tarjeta del multiple choice: «Ver mis respuestas» al
   lado de «Rendir» / «Volver a rendir». El contenedor no estira como el texto
   de la tarjeta (`.au-module__exam div { flex: 1 }` del prototipo). Sobre el
   degradé oscuro, el botón secundario y la fecha toman el color del texto:
   el gris de --color-secondary casi no se leía. */
.au-module__exam .au-module__exam-acc { flex: none; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.au-module__exam .au-btn--ghost { color: inherit !important; border-color: currentColor; }
.au-module__exam .au-btn--ghost:hover { background: var(--color-border-light); color: inherit !important; }
.au-module__exam .au-module__ventana { color: inherit; opacity: .9; }

/* P-139 — Fecha de apertura a la vista con el módulo bloqueado y plegado. */
.au-module__abre { color: var(--color-accent); font-weight: 700; white-space: nowrap; }

/* P-139 — Nota del multiple choice y «Ver mis respuestas» en la cabecera del
   módulo: se ve aunque el módulo esté plegado. */
.au-module__nota { display: block; margin-top: 4px; font-size: .8125rem; color: var(--color-secondary); }
.au-module__nota a { font-weight: 700; color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }