/* ---------------------------------------------------------------
   CINEZAP · aula de capacitación

   Los nombres `--aula-*` quedan porque los usan cientos de reglas de
   esta hoja, pero ya no tienen valores propios: apuntan a los de
   base.css. Antes eran otros —otro gris de fondo, otro borde y otro
   turquesa oscuro calculado por separado para el mismo problema de
   contraste—, y como el prefijo los separaba, no había manera de que
   un cambio de color llegara hasta acá.
   --------------------------------------------------------------- */

:root {
  --aula-navy: var(--navy);
  --aula-turquesa: var(--turquesa);
  --aula-turquesa-oscuro: var(--turquesa-texto);
  --aula-amarillo: var(--amarillo);
  --aula-fondo: var(--gris-fondo);
  --aula-borde: var(--gris-borde);
  --aula-texto-suave: var(--texto-suave);
  --aula-ancho: 76rem;
}

.aula-cuerpo { background: var(--aula-fondo); min-height: 100vh; }
.aula-cabecera { background: #fff; border-bottom: 1px solid var(--aula-borde); }
.aula-cabecera-interna {
  max-width: var(--aula-ancho); min-height: 76px; margin: 0 auto; padding: .65rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.aula-marca { display: flex; align-items: center; gap: .7rem; color: var(--aula-navy); text-decoration: none; }
.aula-marca:hover { text-decoration: none; }
.aula-marca img { width: 58px; height: 50px; object-fit: contain; }
.aula-marca strong, .aula-marca small { display: block; line-height: 1.2; }
.aula-marca strong { font-size: .95rem; }
.aula-marca small { color: var(--aula-texto-suave); font-size: .72rem; margin-top: .18rem; }
.aula-menu { margin-left: auto; display: flex; align-items: center; gap: .2rem; }
.aula-menu a {
  color: var(--aula-navy); text-decoration: none; font-size: .84rem; font-weight: 650;
  padding: .45rem .65rem; border-radius: 6px;
}
.aula-menu a:hover, .aula-menu a[aria-current="page"] { background: var(--gris-claro); text-decoration: none; }
.aula-menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--aula-turquesa); }
.aula-volver {
  margin-left: auto; color: var(--aula-navy); text-decoration: none; font-size: .82rem; font-weight: 650;
  padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--aula-borde); background: var(--aula-fondo);
}
.aula-volver:hover { background: var(--gris-claro); text-decoration: none; }
.aula-usuario { display: flex; align-items: center; gap: .7rem; padding-left: .8rem; border-left: 1px solid var(--aula-borde); }
.aula-usuario > span { font-size: .8rem; font-weight: 650; line-height: 1.2; }
.aula-usuario small { display: block; color: var(--aula-turquesa-oscuro); font-size: .67rem; text-transform: uppercase; letter-spacing: .04em; }
.aula-usuario form { margin: 0; }
.aula-salir { border: 1px solid var(--aula-borde); background: #fff; color: var(--aula-navy); border-radius: 6px; padding: .35rem .55rem; cursor: pointer; }

.aula-contenedor { max-width: var(--aula-ancho); margin: 0 auto; padding: 2.6rem 1.25rem 5rem; min-height: calc(100vh - 150px); }
.aula-pie { padding: 1.5rem 1.25rem; border-top: 1px solid var(--aula-borde); background: #fff; color: var(--aula-texto-suave); font-size: .8rem; }
.aula-pie div { max-width: var(--aula-ancho); margin: 0 auto; }
.aula-eyebrow { display: block; color: var(--aula-turquesa-oscuro); font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .4rem; }
.aula-chip { display: inline-block; color: var(--aula-navy); background: rgba(58,226,197,.25); border-radius: 999px; padding: .22rem .65rem; font-size: .72rem; font-weight: 750; }
.aula-chip-gris { background: var(--gris-claro); color: var(--aula-texto-suave); }

/* Una acción de fila —Editar, Duplicar, Eliminar— con la misma forma de
   píldora que los chips de estado, pero en gris: si fuera del mismo
   turquesa que «Publicado» o «Nuevo» se leería como un dato más de la
   fila y no como algo para apretar. */
.aula-chip-boton {
  display: inline-flex; align-items: center; color: var(--aula-navy);
  background: var(--gris-claro); border: 1px solid transparent;
  border-radius: 999px; padding: .22rem .65rem; font-size: .72rem; font-weight: 750;
  text-decoration: none; white-space: nowrap; cursor: pointer; font-family: inherit;
  margin-right: .3rem;
}
.aula-chip-boton:hover { background: #fff; border-color: var(--aula-borde); text-decoration: none; }
.aula-chip-boton-peligro { color: #a1001d; }
.aula-chip-boton-peligro:hover { background: #fdeaec; border-color: #f3c7cf; }

/* ---------------------------------------------------------------
   El interruptor de prendido y apagado.
   Mismo dibujo que CineZap\Helpers\Interruptor ya usa en el panel
   —admin.css, ahí con sus dos formas—. Acá el aula necesita las dos:
   CAMPO para el habilitado de un módulo (espera al «Guardar») y ENVÍO
   para prender o apagar una capacitación en el acto, desde el listado.
   --------------------------------------------------------------- */
.interruptor-campo {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  cursor: pointer; font-weight: 700; font-size: .8rem; color: var(--aula-texto-suave);
}
.interruptor-campo input[type="checkbox"]:checked ~ .interruptor-etiqueta { color: var(--aula-navy); }
.interruptor-forma { display: inline-flex; align-items: center; gap: .55rem; margin: 0; }
.interruptor-palabra { font-size: .82rem; font-weight: 600; color: var(--aula-texto-suave); }
.interruptor-forma .interruptor.prendido + .interruptor-palabra { color: var(--ok); }
.interruptor,
.interruptor-campo input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative;
  flex: 0 0 auto; width: 2.5rem; height: 1.4rem; margin: 0;
  border: 1px solid var(--aula-borde); background: #ececed; border-radius: 20px;
  cursor: pointer; padding: 0; transition: background-color .15s, border-color .15s;
}
.interruptor-perilla,
.interruptor-campo input[type="checkbox"]::after {
  content: ""; position: absolute; top: 50%; left: .15rem;
  width: 1rem; height: 1rem; margin-top: -.5rem;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(5,2,64,.3);
  transition: transform .15s;
}
.interruptor.prendido,
.interruptor-campo input[type="checkbox"]:checked { background: var(--ok); border-color: var(--ok); }
.interruptor.prendido .interruptor-perilla,
.interruptor-campo input[type="checkbox"]:checked::after { transform: translateX(1.1rem); }
.interruptor:hover,
.interruptor-campo:hover input[type="checkbox"] { border-color: var(--aula-navy); }
.interruptor:disabled { opacity: .55; cursor: default; }
.aula-contador { color: var(--aula-texto-suave); font-size: .85rem; font-weight: 500; }
.aula-boton, .aula-boton-secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border-radius: var(--boton-radio); padding: var(--boton-relleno);
  font: inherit; font-size: .88rem; font-weight: var(--boton-peso);
  text-decoration: none; cursor: pointer;
}
.aula-boton { background: var(--aula-navy); color: #fff; border: 1px solid var(--aula-navy); }
.aula-boton:hover { background: var(--navy-hover); color: #fff; text-decoration: none; }
.aula-boton-secundario { color: var(--aula-navy); background: #fff; border: 1px solid var(--aula-borde); }
.aula-boton-secundario:hover { border-color: var(--aula-navy); text-decoration: none; }
.aula-boton-secundario small { color: var(--aula-texto-suave); font-weight: 500; }
.aula-boton-ancho { width: 100%; margin-top: 1rem; }
.aula-enlace-flecha { font-weight: 750; text-decoration: none; }
.aula-enlace-flecha:hover { text-decoration: underline; }
.aula-ayuda { color: var(--aula-texto-suave); font-size: .8rem; margin: .3rem 0 .9rem; }

.aula-aviso { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; border-left: 4px solid var(--aula-turquesa-oscuro); background: #e9faf6; }
.aula-aviso-error { border-left-color: var(--error); background: #fff0f2; color: #7d0017; }
.aula-aviso-aviso { border-left-color: #b58c00; background: #fff9df; }

.aula-login-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr); gap: 4rem; align-items: center; min-height: 62vh; }
.aula-presentacion h1 { color: var(--aula-navy); font-size: clamp(2.1rem, 5vw, 4.5rem); line-height: 1.03; max-width: 12ch; margin: 0 0 1.4rem; }
.aula-presentacion > p { max-width: 44rem; font-size: 1.12rem; color: var(--aula-texto-suave); }
.aula-mini-recorrido { columns: 2; gap: 2.5rem; padding-left: 1.8rem; max-width: 44rem; margin-top: 2rem; }
.aula-mini-recorrido li { padding: .3rem 0; break-inside: avoid; font-weight: 650; color: var(--aula-navy); }
.aula-login-tarjeta { background: #fff; border: 1px solid var(--aula-borde); border-top: 5px solid var(--aula-turquesa); border-radius: 12px; padding: 2rem; box-shadow: 0 20px 45px -30px rgba(5,2,64,.55); }
.aula-login-tarjeta h2 { font-size: 1.45rem; }
.aula-login-tarjeta label, .aula-formulario label { display: block; color: var(--aula-navy); font-size: .82rem; font-weight: 700; margin: .85rem 0 .25rem; }
.aula-login-tarjeta input:not([type="checkbox"]):not([type="radio"]), .aula-formulario input:not([type="checkbox"]):not([type="radio"]), .aula-formulario select, .aula-formulario textarea, .aula-liberacion input[type="datetime-local"] {
  width: 100%; border: 1px solid var(--campo-borde); border-radius: 6px; background: #fff; color: #1a1a1f;
  padding: .65rem .7rem; font: inherit; font-size: .9rem;
}
.aula-portada { margin-bottom: 2.5rem; }
.aula-portada h1 { color: var(--aula-navy); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; margin: 0 0 .8rem; }
.aula-portada > p { max-width: 50rem; font-size: 1.08rem; color: var(--aula-texto-suave); margin: 0; }
.aula-portada-cursada { max-width: 58rem; }
.aula-portada-cursada .aula-chip { margin-bottom: .8rem; }
.aula-portada-cursada .aula-enlace-flecha { display: inline-block; margin-top: 1rem; }
.aula-cursadas { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.aula-cursada-tarjeta { background: #fff; border: 1px solid var(--aula-borde); border-radius: 10px; padding: 1.4rem; }
.aula-cursada-tarjeta h3 { font-size: 1.2rem; margin: .75rem 0 .5rem; }
.aula-cursada-tarjeta p { color: var(--aula-texto-suave); font-size: .9rem; }
/* Cerrada: sigue en «Mis aulas» para quien gestiona —para poder
   reabrirla sin ir a buscarla a Gestionar— pero se ve apagada. */
.aula-cursada-tarjeta.es-cerrada { background: var(--aula-fondo); }
.aula-cursada-tarjeta.es-cerrada h3 a { color: var(--aula-texto-suave); }
.aula-vacio, .aula-estado { background: #fff; border: 1px dashed #c6c6d3; border-radius: 12px; padding: 2.5rem; text-align: center; }
.aula-estado { max-width: 42rem; margin: 4rem auto; }
.aula-estado-icono { font-size: 2rem; margin-bottom: .5rem; }

/* Dashboard de cada aula */
.aula-dashboard-grid { display: grid; grid-template-columns: minmax(17rem,.75fr) minmax(20rem,1.25fr); gap: 1.5rem; align-items: start; }
.aula-dashboard-grid h2, .aula-tablero h2 { margin: .1rem 0 .5rem; color: var(--aula-navy); font-size: 1.25rem; }
.aula-dashboard-recorrido > p { color: var(--aula-texto-suave); font-size: .88rem; }
.aula-retomar { background: var(--aula-fondo); border-radius: 8px; padding: .8rem; margin: 1rem 0; }
.aula-retomar small, .aula-retomar strong, .aula-retomar span { display: block; }
.aula-retomar small, .aula-retomar span { color: var(--aula-texto-suave); font-size: .72rem; }
.aula-retomar strong { margin: .2rem 0; }
.aula-vacio-compacto { color: var(--aula-texto-suave); background: var(--aula-fondo); border-radius: 7px; padding: .8rem; font-size: .82rem; }
/* Las consultas por chat se sacaron —ver
   tools/migrar-aula-email-contacto.php—: los estilos de `.aula-chat`,
   `.aula-mensajes`, `.aula-hilo` y compañía se fueron con ellas.
   `.aula-consultas` sigue en pie, la usa el bloque de contacto que las
   reemplazó. */
.aula-no-leidos { display: inline-flex; align-items: center; gap: .32rem; margin-left: .45rem; color: #8a4700; background: #fff2cc; border-radius: 999px; padding: .18rem .48rem; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.aula-no-leidos i { display: block; width: .48rem; height: .48rem; border-radius: 50%; background: #f59e0b; }
.aula-buscador-corcho { display: flex; gap: .5rem; max-width: 42rem; margin-bottom: 1rem; }
.aula-buscador-corcho input { flex: 1; min-width: 0; border: 1px solid var(--campo-borde); border-radius: 7px; padding: .65rem .75rem; font: inherit; }
.aula-resultados-cortos { display: grid; grid-template-columns: repeat(auto-fill,minmax(15rem,1fr)); gap: .6rem; margin-bottom: 1.2rem; }
.aula-resultados-cortos article { display: grid; grid-template-columns: 5.3rem minmax(0,1fr) auto; align-items: center; gap: .65rem; min-width: 0; padding: .55rem; border: 1px solid var(--aula-borde); border-radius: 8px; background: #fff; }
.aula-resultados-cortos img, .aula-resultados-cortos .aula-tablero-sin-imagen { width: 5.3rem; aspect-ratio: 16/9; border-radius: 6px; object-fit: cover; }
.aula-resultados-cortos article > div { flex: 1; }
.aula-resultados-cortos strong, .aula-resultados-cortos small { display: block; }
.aula-resultados-cortos strong { font-size: .8rem; line-height: 1.25; }
.aula-resultados-cortos small { color: var(--aula-texto-suave); }
.aula-resultados-cortos form { margin: 0; }
.aula-favoritos { display: grid; grid-template-columns: repeat(auto-fill,minmax(13rem,1fr)); gap: .8rem; }
.aula-tablero-tarjeta { overflow: hidden; background: #fff; border: 1px solid var(--aula-borde); border-radius: 10px; }
.aula-tablero-imagen { display: block; aspect-ratio: 16/9; background: var(--aula-navy); }
.aula-tablero-imagen img { width: 100%; height: 100%; object-fit: cover; }
.aula-tablero-sin-imagen { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(145deg,var(--aula-navy),#292466); color: #fff; font-size: .67rem; font-weight: 850; letter-spacing: .12em; }
.aula-tablero-cuerpo { padding: .75rem; }
.aula-tablero-cuerpo > small { color: var(--aula-texto-suave); font-size: .68rem; }
.aula-favoritos h3 { font-size: .9rem; line-height: 1.25; margin: .15rem 0 .65rem; }
.aula-nota-recurso { margin: 0 0 .5rem; }
.aula-nota-recurso label { color: var(--aula-texto-suave); font-size: .7rem; }
.aula-nota-recurso textarea { min-height: 3.6rem; margin: .2rem 0 .3rem; padding: .5rem; font-size: .76rem; line-height: 1.35; resize: vertical; }

.aula-miga { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; color: var(--aula-texto-suave); font-size: .78rem; margin-bottom: 2rem; }
.aula-miga a { color: var(--aula-texto-suave); }
.aula-seccion-titulo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .5fr); gap: 2rem; align-items: end; margin-bottom: 1.2rem; }
.aula-seccion-titulo h2 { font-size: 1.55rem; margin: 0; }
.aula-seccion-titulo > p { color: var(--aula-texto-suave); font-size: .9rem; margin: 0; }
.aula-modulos { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.aula-modulo-tarjeta { display: flex; gap: 1rem; align-items: center; background: #fff; border: 1px solid var(--aula-borde); border-radius: 10px; padding: 1.1rem 1.2rem; }
.aula-modulo-tarjeta:not(.esta-bloqueado):hover { border-color: #9d9db5; box-shadow: 0 7px 22px -18px rgba(5,2,64,.8); }
.aula-numero { display: grid; place-items: center; flex: 0 0 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--aula-amarillo); color: var(--aula-navy); font-weight: 850; }
.aula-modulo-contenido { flex: 1; min-width: 0; }
.aula-modulo-contenido h3 { margin: 0 0 .2rem; font-size: 1.08rem; }
.aula-modulo-contenido h3 a { text-decoration: none; }
.aula-modulo-contenido p { color: var(--aula-texto-suave); font-size: .86rem; margin: 0; }
.aula-modulo-meta { color: var(--aula-turquesa-oscuro); font-size: .74rem; margin-top: .45rem; font-weight: 700; }
.aula-modulo-ir { font-size: 1.3rem; color: var(--aula-navy); }
.aula-modulo-tarjeta.esta-bloqueado { background: #eeeeF3; color: var(--aula-texto-suave); }
.aula-modulo-tarjeta.esta-bloqueado .aula-numero { background: #d9d9e1; color: #666674; }

.aula-lectura-layout { display: grid; grid-template-columns: 15rem minmax(0, 48rem); gap: 3rem; align-items: start; justify-content: center; }
.aula-lectura-layout.sin-indice { grid-template-columns: minmax(0, 48rem); }
.aula-recorrido-lateral { position: sticky; top: 1.5rem; background: #fff; border: 1px solid var(--aula-borde); border-radius: 10px; padding: 1rem; }
.aula-recorrido-lateral ol { margin: 0; padding-left: 1.7rem; color: var(--aula-texto-suave); }
.aula-recorrido-lateral li { padding: .3rem 0 .3rem .2rem; font-size: .77rem; }
.aula-recorrido-lateral a { color: var(--aula-texto-suave); text-decoration: none; }
.aula-recorrido-lateral .actual { color: var(--aula-navy); font-weight: 800; }
.aula-recorrido-lateral .actual a { color: var(--aula-navy); }
.aula-recorrido-lateral .bloqueado { opacity: .5; }
.aula-lectura { min-width: 0; background: #fff; border-radius: 12px; border: 1px solid var(--aula-borde); padding: clamp(1.35rem, 4vw, 3.2rem); }
.aula-modulo-cabecera { padding-bottom: 1.8rem; margin-bottom: 2rem; border-bottom: 3px solid var(--aula-turquesa); }
.aula-modulo-cabecera h1 { color: var(--aula-navy); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; margin: 0 0 1rem; }
.aula-modulo-cabecera p { color: var(--aula-texto-suave); font-size: 1.08rem; margin-bottom: .5rem; }
.aula-contenido-editorial { font-size: 1rem; line-height: 1.75; }
.aula-contenido-editorial h2 { color: var(--aula-navy); font-size: 1.7rem; margin-top: 3rem; padding-top: .6rem; border-top: 1px solid var(--aula-borde); }
.aula-contenido-editorial h3 { color: var(--aula-navy); font-size: 1.25rem; margin-top: 2.1rem; }
.aula-contenido-editorial h4 { color: var(--aula-navy); font-size: 1.05rem; margin-top: 1.6rem; }
.aula-contenido-editorial blockquote { border-left: 4px solid var(--aula-amarillo); background: #fffbea; padding: .8rem 1.1rem; margin: 1.4rem 0; }
.aula-contenido-editorial details { border: 1px solid var(--aula-borde); border-radius: 8px; padding: .7rem 1rem; margin: 1rem 0; }
.aula-contenido-editorial summary { color: var(--aula-navy); font-weight: 750; cursor: pointer; }
.aula-materiales { margin-top: 3.2rem; padding-top: 2rem; border-top: 4px solid var(--aula-amarillo); }
.aula-materiales h2 { margin-top: 0; }
.aula-materiales-lista { display: grid; gap: 1rem; }
.aula-material { border: 1px solid var(--aula-borde); border-radius: 9px; padding: 1.1rem; }
.aula-material h3 { margin: .3rem 0; font-size: 1.05rem; }
.aula-material p { color: var(--aula-texto-suave); font-size: .88rem; }
/* La tarjeta de un recurso en el lector abre con su marca de tipo. */
.aula-material .tipo-marca { margin-bottom: .5rem; }
.aula-video { position: relative; aspect-ratio: 16/9; margin: 1rem 0; background: #111; }
.aula-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.aula-material audio { width: 100%; margin: .8rem 0; }
.aula-creditos { margin-top: 2.5rem; padding: 1rem; border-radius: 8px; background: var(--aula-fondo); color: var(--aula-texto-suave); font-size: .78rem; }
.aula-creditos p { margin-bottom: 0; }
.aula-anterior-siguiente { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--aula-borde); }
.aula-anterior-siguiente > div:last-child { text-align: right; }
.aula-anterior-siguiente a { display: block; text-decoration: none; font-size: .82rem; font-weight: 700; }
.aula-anterior-siguiente small { display: block; color: var(--aula-texto-suave); font-weight: 500; }

/* Gestión */
.aula-gestion-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.aula-gestion-titulo h1 { margin: .15rem 0 .25rem; font-size: 2rem; }
.aula-gestion-titulo p { margin: 0; color: var(--aula-texto-suave); }
.aula-gestion-nav { display: flex; gap: .25rem; border-bottom: 1px solid var(--aula-borde); margin: 0 0 1.25rem; overflow-x: auto; }
.aula-gestion-nav a { color: var(--aula-texto-suave); font-size: .84rem; font-weight: 750; text-decoration: none; white-space: nowrap; padding: .7rem .85rem; border-bottom: 3px solid transparent; }
.aula-gestion-nav a:hover { color: var(--aula-navy); }
.aula-gestion-nav a[aria-current="page"] { color: var(--aula-navy); border-bottom-color: var(--aula-turquesa-oscuro); }
.aula-gestion-resumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.aula-gestion-resumen > * { background: #fff; border: 1px solid var(--aula-borde); border-radius: 9px; padding: 1rem; text-decoration: none; }
.aula-gestion-resumen strong, .aula-gestion-resumen span, .aula-gestion-resumen small { display: block; }
.aula-gestion-resumen strong { font-size: 1.7rem; color: var(--aula-navy); }
.aula-gestion-resumen span { font-weight: 750; }
.aula-gestion-resumen small { color: var(--aula-texto-suave); }
.aula-panel { background: #fff; border: 1px solid var(--aula-borde); border-radius: 10px; padding: 1.4rem; margin-bottom: 1.5rem; }
.aula-panel-titulo { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.aula-panel-titulo h2 { margin: 0; font-size: 1.2rem; }
.aula-panel-titulo p { color: var(--aula-texto-suave); font-size: .84rem; margin: .2rem 0 0; }
/* El texto de la izquierda puede achicarse y envolver; el botón de la
   derecha no —si no, un párrafo largo lo aprieta hasta partir «+ Nuevo
   módulo» en dos líneas—. */
.aula-panel-titulo > div:first-child { min-width: 0; flex: 1 1 auto; }
.aula-panel-titulo > a.aula-boton, .aula-panel-titulo > a.aula-boton-secundario { flex-shrink: 0; white-space: nowrap; }
.aula-tabla { width: 100%; border-collapse: collapse; font-size: .84rem; }
.aula-tabla th { color: var(--aula-texto-suave); text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.aula-tabla th, .aula-tabla td { border-bottom: 1px solid var(--aula-borde); padding: .65rem .5rem; }
.aula-tabla-acciones { text-align: right !important; white-space: nowrap; }
.aula-tabla-acciones form { display: inline; margin: 0; }
.aula-listado-gestion tbody tr:hover { background: #fafafd; }
/* El ancho mínimo es para la columna del nombre, que es la que necesita
   aire para no cortar títulos largos. Se escribió como `td:first-child`
   cuando el nombre iba siempre primero; en la biblioteca de recursos
   ahora arranca el tipo, así que se nombra por lo que es y no por dónde
   cae. */
.aula-listado-gestion td:first-child:not(.celda-tipo),
.aula-listado-gestion td.celda-tipo + td { min-width: 18rem; }
.aula-listado-gestion td small { display: block; max-width: 42rem; margin-top: .18rem; color: var(--aula-texto-suave); font-size: .73rem; line-height: 1.35; }
.aula-enlace-fila { color: var(--aula-navy); text-decoration: none; }
.aula-enlace-fila:hover { text-decoration: underline; }
.aula-listado-numero { display: inline-grid; place-items: center; min-width: 1.65rem; height: 1.65rem; margin-right: .5rem; border-radius: 50%; background: var(--aula-fondo); color: var(--aula-texto-suave); font-size: .7rem; font-weight: 800; }
.aula-listado-modulo { display: block; color: var(--aula-texto-suave); font-size: .7rem; }
.aula-accion-texto { border: 0; background: none; color: var(--aula-navy); padding: 0; cursor: pointer; font: inherit; font-size: .8rem; text-decoration: underline; }
.aula-filtros-gestion { display: grid; grid-template-columns: minmax(14rem,1fr) minmax(9rem,auto) minmax(10rem,auto) auto auto; gap: .55rem; align-items: center; margin: .2rem 0 1rem; padding: .75rem; border-radius: 8px; background: var(--aula-fondo); }
.aula-filtros-gestion input, .aula-filtros-gestion select { margin: 0; min-height: 2.35rem; }
.aula-filtros-gestion .aula-boton-secundario { min-height: 2.35rem; }
.aula-eliminar-bloque { margin-top: -1rem; text-align: right; }
.aula-formulario > label:first-of-type { margin-top: 0; }
.aula-form-fila { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.aula-form-fila-tres { grid-template-columns: repeat(3, minmax(0,1fr)); }
.aula-casilla { display: flex !important; align-items: center; gap: .45rem; font-weight: 600 !important; }
.aula-form-acciones { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.aula-liberaciones { display: grid; gap: .5rem; margin-bottom: 1rem; }
.aula-liberacion { background: var(--aula-fondo); border-radius: 8px; padding: .55rem .7rem; margin-bottom: .8rem; }
.aula-programacion { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; }
.aula-programacion label {
  display: inline-flex !important; align-items: center; gap: .35rem;
  font-size: .76rem; font-weight: 700; color: var(--aula-texto-suave); margin: 0;
}
.aula-programacion input[type="datetime-local"] { width: auto; padding: .32rem .5rem; font-size: .78rem; }
.aula-programacion small { flex-basis: 100%; color: var(--aula-texto-suave); font-size: .72rem; }
.aula-form-inscripcion { background: var(--aula-fondo); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.aula-peligro-texto { background: none; border: 0; color: #a1001d; text-decoration: underline; cursor: pointer; font: inherit; font-size: .8rem; }
.aula-modulos-gestion { display: grid; gap: .75rem; }
.aula-modulos-gestion article { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--aula-borde); border-radius: 9px; padding: 1rem; }
.aula-modulos-gestion article > div { flex: 1; }
.aula-modulos-gestion h2 { margin: 0 0 .2rem; font-size: 1.08rem; }
.aula-modulos-gestion p { color: var(--aula-texto-suave); font-size: .82rem; margin: 0 0 .4rem; }
.aula-recursos-gestion { border: 1px solid var(--aula-borde); border-radius: 8px; margin-bottom: 1.2rem; }
.aula-recursos-gestion > div { display: grid; grid-template-columns: 5rem minmax(12rem,1fr) auto auto; gap: .7rem; align-items: center; padding: .65rem .8rem; border-bottom: 1px solid var(--aula-borde); font-size: .8rem; }
.aula-recursos-gestion > div:last-child { border-bottom: 0; }
.aula-recursos-gestion strong, .aula-recursos-gestion small { display: block; }
.aula-form-recurso { background: var(--aula-fondo); border-radius: 8px; padding: 1rem; }
.aula-form-recurso h3 { margin-top: 0; }
.aula-selector-modulos { border: 1px solid var(--aula-borde); border-radius: 9px; padding: 1rem; margin: 1.2rem 0; }
.aula-selector-modulos legend { color: var(--aula-navy); font-weight: 800; padding: 0 .35rem; }
.aula-selector-modulos > p { color: var(--aula-texto-suave); font-size: .84rem; margin-top: 0; }
.aula-selector-modulos > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin-bottom: .8rem; }
.aula-selector-modulos label { display: flex !important; gap: .55rem; align-items: flex-start; background: var(--aula-fondo); border-radius: 7px; padding: .65rem; margin: 0 !important; }
.aula-selector-modulos label input { margin-top: .2rem; }
.aula-selector-modulos label strong, .aula-selector-modulos label small { display: block; }
.aula-selector-modulos label small { color: var(--aula-texto-suave); font-weight: 500; }
.aula-modulo-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--aula-texto-suave); font-size: .72rem; }
.aula-acciones-modulo { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto !important; flex-wrap: wrap; justify-content: flex-end; }
.aula-acciones-modulo form { margin: 0; }

@media (max-width: 900px) {
  .aula-cabecera-interna { flex-wrap: wrap; gap: .5rem 1rem; }
  .aula-menu { order: 3; width: 100%; overflow-x: auto; padding-top: .3rem; border-top: 1px solid var(--aula-borde); }
  .aula-usuario { margin-left: auto; }
  .aula-login-grid { grid-template-columns: 1fr; gap: 2rem; }
  .aula-dashboard-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .aula-presentacion h1 { max-width: none; }
  .aula-lectura-layout { grid-template-columns: 1fr; }
  .aula-recorrido-lateral { position: static; }
  .aula-recorrido-lateral ol { columns: 2; }
  .aula-cuenta-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .aula-contenedor { padding-top: 1.5rem; }
  .aula-marca span { display: none; }
  .aula-usuario > span { display: none; }
  .aula-mini-recorrido { columns: 1; }
  .aula-seccion-titulo, .aula-form-fila, .aula-form-fila-tres, .aula-gestion-resumen { grid-template-columns: 1fr; }
  .aula-selector-modulos > div { grid-template-columns: 1fr; }
  .aula-buscador-corcho { flex-direction: column; }
  .aula-modulo-tarjeta { align-items: flex-start; }
  .aula-modulo-ir { display: none; }
  .aula-lectura { padding: 1.2rem; }
  .aula-recorrido-lateral ol { columns: 1; }
  .aula-anterior-siguiente { grid-template-columns: 1fr; }
  .aula-anterior-siguiente > div:last-child { text-align: left; }
  /* En el celular el índice arranca plegado: si no, cada módulo empieza
     con la lista completa antes de la primera línea de la lectura. */
  .aula-indice-plegable:not([open]) { margin: 0; }
  .aula-modulo-fila { align-items: flex-start; }
  .aula-form-linea select { min-width: 0; width: 100%; }
  .aula-restablecer form { flex-direction: column; }
  .aula-gestion-titulo { flex-direction: column; }
  .aula-filtros-gestion { grid-template-columns: 1fr; }
  .aula-tabla-responsive { overflow-x: auto; }
  .aula-recursos-gestion > div { grid-template-columns: 4rem 1fr; }
  .aula-recursos-gestion > div > *:nth-child(n+3) { grid-column: 2; }
}

/* ---------------------------------------------------------------
   Agregados de la auditoría de UX (18/08/2026)
   --------------------------------------------------------------- */

/* Los avisos van pegados arriba: varias acciones del tablero vuelven a
   un ancla y el mensaje quedaba fuera de pantalla. */
.aula-avisos { position: sticky; top: .6rem; z-index: 30; display: grid; gap: .4rem; margin-bottom: 1.2rem; }

.aula-usuario-cuenta { display: block; text-decoration: none; color: inherit; border-radius: 7px; padding: .2rem .45rem; }
.aula-usuario-cuenta:hover { background: var(--aula-fondo); }
.aula-recordarme { margin: .6rem 0 .9rem !important; font-size: .8rem; font-weight: 400 !important; white-space: nowrap; }

/* Tarjetas de Mis aulas */
.aula-tarjeta-avisos { list-style: none; padding: 0; margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.aula-aviso-material { background: var(--aula-fondo); border-radius: 999px; padding: .18rem .6rem; font-size: .7rem; font-weight: 700; color: var(--aula-navy); }
.aula-aviso-material strong { font-weight: 850; }

/* Lista de módulos del aula: es la pantalla donde se entra a preguntar
   qué hay, qué es nuevo y dónde me quedé. */
.aula-modulos-lista { margin-bottom: 1.5rem; }
.aula-modulo-fila { display: flex; gap: 1rem; align-items: center; background: #fff; border: 1px solid var(--aula-borde); border-radius: 10px; padding: .95rem 1.1rem; }
.aula-modulo-fila:not(.bloqueado):hover { border-color: #9d9db5; box-shadow: 0 7px 22px -18px rgba(5,2,64,.8); }
.aula-modulo-fila.bloqueado { background: #eeeef3; color: var(--aula-texto-suave); }
.aula-modulo-fila.bloqueado .aula-numero { background: #d9d9e1; color: #666674; }
.aula-modulo-fila.es-novedad { border-color: var(--aula-turquesa-oscuro); box-shadow: inset 3px 0 0 var(--aula-turquesa-oscuro); }
.aula-modulo-fila h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.aula-modulo-fila h3 a { text-decoration: none; }
.aula-modulo-fila p { color: var(--aula-texto-suave); font-size: .84rem; margin: 0 0 .35rem; }
.aula-chip-nuevo { background: var(--aula-turquesa-oscuro); color: #fff; }
.aula-leido { color: var(--aula-turquesa-oscuro); font-size: .72rem; font-weight: 750; }

/* Tablero: guardar un corto, fijar un material o escribir una nota. */
.aula-tablero-agregar { display: grid; gap: .5rem; margin-bottom: 1.4rem; }
.aula-tablero-agregar > details { border: 1px solid var(--aula-borde); border-radius: 8px; background: #fff; padding: .7rem .9rem; }
.aula-tablero-agregar > details[open] { padding-bottom: 1rem; }
.aula-tablero-agregar summary { color: var(--aula-navy); font-weight: 700; font-size: .85rem; cursor: pointer; }
.aula-tablero-agregar > details[open] summary { margin-bottom: .8rem; }
.aula-form-linea { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.aula-form-linea select { flex: 1; min-width: 12rem; border: 1px solid var(--campo-borde); border-radius: 7px; padding: .6rem .7rem; font: inherit; }
.aula-tablero-nota .aula-tablero-cuerpo, .aula-tablero-recurso .aula-tablero-cuerpo { padding-top: .9rem; }
.aula-tablero-nota { border-left: 3px solid var(--aula-amarillo); }
.aula-tablero-recurso { border-left: 3px solid var(--aula-turquesa-oscuro); }
.aula-tablero-cuerpo > small { color: var(--aula-texto-suave); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

/* Índice interno del módulo: las lecturas rondan las 3.500 palabras. */
.aula-indice-plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .4rem; }
.aula-indice-plegable > summary::-webkit-details-marker { display: none; }
/* El triángulo se dibuja a mano para que se vea igual en todos lados y
   deje claro que se puede plegar, que es lo que importa en el celular. */
.aula-indice-plegable > summary::after { content: "▾"; margin-left: auto; color: var(--aula-texto-suave); font-size: .7rem; transition: transform .15s; }
.aula-indice-plegable:not([open]) > summary::after { transform: rotate(-90deg); }
.aula-indice-interno ul { list-style: none; margin: .35rem 0 0; padding: 0; }
.aula-indice-interno li { font-size: .75rem; padding: .22rem 0; }
.aula-indice-interno li.nivel-3 { padding-left: .8rem; font-size: .72rem; }
.aula-indice-interno a { color: var(--aula-texto-suave); text-decoration: none; }
.aula-indice-interno a:hover { color: var(--aula-navy); text-decoration: underline; }
/* El ancla no puede quedar tapada por el aviso pegado arriba. */
.aula-contenido-editorial h2, .aula-contenido-editorial h3 { scroll-margin-top: 4.5rem; }

/* Mi cuenta */
.aula-cuenta-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 1.5rem; align-items: start; }
.aula-datos { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0 0 1rem; font-size: .9rem; }
.aula-datos dt { color: var(--aula-texto-suave); font-size: .78rem; }
.aula-datos dd { margin: 0; font-weight: 650; }

/* Gestión: restablecer contraseña y orden de módulos */
.aula-restablecer { margin-bottom: .35rem; }
.aula-restablecer summary { color: var(--aula-navy); font-size: .76rem; font-weight: 700; cursor: pointer; }
.aula-restablecer form { display: flex; gap: .4rem; margin: .5rem 0 .3rem; }
.aula-restablecer input { border: 1px solid var(--campo-borde); border-radius: 7px; padding: .45rem .55rem; font: inherit; font-size: .78rem; min-width: 0; }
.aula-orden-modulo { flex: 0 0 3.2rem; width: 3.2rem; border: 1px solid var(--campo-borde); border-radius: 6px; padding: .3rem; font: inherit; font-size: .78rem; text-align: center; }

/* ---------------------------------------------------------------
   Resaltado de la lectura
   --------------------------------------------------------------- */

.aula-resaltado {
  background: #fff3b0; color: inherit; border-radius: 2px;
  padding: .06em 0; cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(201,162,0,.55);
}
.aula-resaltado:hover, .aula-resaltado:focus-visible { background: #ffe985; }

.aula-menu-resaltado {
  position: absolute; z-index: 60; display: flex; flex-direction: column;
  min-width: 13rem; padding: .3rem; border-radius: 9px;
  background: #fff; border: 1px solid var(--aula-borde);
  box-shadow: 0 14px 34px -14px rgba(5,2,64,.55);
}
.aula-menu-resaltado button {
  border: 0; background: none; font: inherit; font-size: .82rem; text-align: left;
  padding: .5rem .6rem; border-radius: 6px; cursor: pointer; color: var(--aula-navy);
}
.aula-menu-resaltado button:hover, .aula-menu-resaltado button:focus-visible { background: var(--aula-fondo); }
.aula-menu-resaltado button.es-peligro { color: #a4262c; }

/* Aviso flotante: el resaltado no recarga la página, así que el flash
   normal —que vive arriba del contenido— nunca se vería. */
.aula-aviso-flotante {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  z-index: 70; margin: 0; box-shadow: 0 14px 34px -16px rgba(5,2,64,.7);
}
.aula-pista-resaltado { margin-top: 1.4rem; padding-top: .9rem; border-top: 1px dashed var(--aula-borde); }

/* El resaltado en el tablero se lee como cita. */
.aula-tablero-resaltado { border-left: 3px solid #e0b400; }
.aula-tablero-cita {
  margin: .4rem 0 .2rem; padding: .5rem .7rem; border-radius: 6px;
  background: #fffbe9; color: var(--aula-navy);
  font-size: .82rem; line-height: 1.45; font-style: italic;
}

/* ---------------------------------------------------------------
   Módulo como contenedor
   Cada módulo agrupa sus elementos: la lectura es uno más. Plegado por
   defecto, para que un aula de seis módulos entre en una pantalla.
   --------------------------------------------------------------- */

.aula-modulos-cajas { display: grid; gap: .6rem; }
.aula-modulo-caja { background: #fff; border: 1px solid var(--aula-borde); border-radius: 10px; overflow: hidden; }
.aula-modulo-caja > summary {
  display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem;
  cursor: pointer; list-style: none;
}
.aula-modulo-caja > summary::-webkit-details-marker { display: none; }
.aula-modulo-caja > summary::after {
  content: "▾"; margin-left: .2rem; color: var(--aula-texto-suave);
  font-size: .75rem; transition: transform .15s;
}
.aula-modulo-caja[open] > summary { border-bottom: 1px solid var(--aula-borde); }
.aula-modulo-caja:not([open]) > summary::after { transform: rotate(-90deg); }
.aula-modulo-caja > summary:hover { background: var(--aula-fondo); }
.aula-modulo-caja-titulo { flex: 1; min-width: 0; display: grid; }
.aula-modulo-caja-titulo strong { font-size: 1rem; color: var(--aula-navy); }
.aula-modulo-caja-titulo small { color: var(--aula-texto-suave); font-size: .74rem; }
.aula-modulo-caja-estado { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }
.aula-modulo-caja.bloqueado { background: #eeeef3; }
.aula-modulo-caja.bloqueado .aula-numero { background: #d9d9e1; color: #666674; }
.aula-modulo-caja.es-novedad { border-color: var(--aula-turquesa-oscuro); box-shadow: inset 3px 0 0 var(--aula-turquesa-oscuro); }
.aula-modulo-caja-cuerpo { padding: .9rem 1rem 1rem; }
.aula-modulo-caja-cuerpo > p { color: var(--aula-texto-suave); font-size: .86rem; margin: 0 0 .8rem; }
/* Misma separación que entre un recurso y el siguiente: sin este empate
   de especificidad, la regla `> p` de arriba ganaba y dejaba el botón
   pegado al último recurso de la lista. */
.aula-modulo-caja-cuerpo > .aula-modulo-caja-agregar { margin-top: .4rem; }
.aula-agregar-de-biblioteca { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.aula-agregar-de-biblioteca select {
  min-width: 0; flex: 1 1 16rem; border: 1px solid var(--campo-borde); border-radius: 6px;
  background: #fff; color: #1a1a1f; padding: .5rem .6rem; font: inherit; font-size: .85rem;
}

.aula-elementos { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.aula-elemento {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: .8rem;
  padding: .55rem .7rem; border-radius: 8px; background: var(--aula-fondo);
}
.aula-elemento-lectura { background: #eef9f6; }
.aula-elemento-cuerpo { min-width: 0; display: grid; gap: .12rem; }
.aula-elemento-cuerpo strong { font-size: .88rem; color: var(--aula-navy); }
.aula-elemento-cuerpo small { color: var(--aula-texto-suave); font-size: .74rem; }
.aula-elemento-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .15rem; }
.aula-elemento-accion { font-size: .8rem; font-weight: 700; white-space: nowrap; }

/* Alcance del material, en el formulario de alta. */
.aula-alcance { background: var(--aula-fondo); border-radius: 8px; padding: .8rem .9rem; margin-bottom: 1.2rem; }
.aula-alcance strong { display: block; color: var(--aula-navy); font-size: .88rem; }
.aula-alcance p { margin: .25rem 0 0; color: var(--aula-texto-suave); font-size: .8rem; }

@media (max-width: 650px) {
  .aula-elemento { grid-template-columns: auto minmax(0,1fr); }
  .aula-elemento-accion { grid-column: 2; justify-self: start; }
  .aula-modulo-caja > summary { flex-wrap: wrap; gap: .5rem .7rem; }
  .aula-modulo-caja-estado { order: 3; width: 100%; }
}

/* ---------------------------------------------------------------
   Iconos de los tipos de material
   Un juego de nueve dibujos con la misma caja y el mismo trazo. Toman
   el color del contexto, así que el mismo SVG sirve sobre fondo claro,
   sobre el navy y en gris cuando el módulo está cerrado.
   --------------------------------------------------------------- */

.aula-icono { flex: 0 0 auto; width: 20px; height: 20px; vertical-align: -.25em; }

/* Los colores y el tamaño de cada tipo viven en iconos.css: son los
   mismos en el panel y en el aula, que cargan hojas distintas. Acá sólo
   quedan los ajustes propios del aula. */
.aula-modulo-caja.bloqueado .tipo-marca-modulo { opacity: .5; }
.aula-modulo-caja.es-novedad .tipo-marca-modulo { --tipo-color: var(--aula-turquesa-oscuro); }

/* Orden del módulo, en la gestión. */
.aula-orden-campo {
  display: inline-flex !important; align-items: center; gap: .4rem;
  font-size: .76rem; color: var(--aula-texto-suave); font-weight: 700;
}
.aula-orden-campo .aula-orden-modulo { flex: 0 0 3.2rem; }

/* ---------------------------------------------------------------
   Encabezado de una capacitación
   Un capacitador ve la misma aula de dos maneras y las dos se le
   parecen. Por eso las dos usan este mismo encabezado —etiqueta,
   título, presentación y pie— y lo único que cambia es la etiqueta, el
   botón que cruza a la otra vista y el color de la franja. Si cada
   vista tuviera su propia forma habría que volver a orientarse en cada
   salto.
   --------------------------------------------------------------- */

.aula-encabezado-aula {
  --aula-encabezado-color: var(--aula-turquesa-oscuro);
  border-left: 4px solid var(--aula-encabezado-color);
  padding-left: 1.1rem;
  margin-bottom: 2.2rem;
}
.aula-encabezado-aula.es-gestion { --aula-encabezado-color: var(--aula-navy); }

.aula-encabezado-aula h1 {
  color: var(--aula-navy);
  font-size: clamp(1.75rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  margin: .35rem 0 0;
}
.aula-encabezado-bajada {
  max-width: 48rem; margin: .6rem 0 0;
  color: var(--aula-texto-suave); font-size: 1rem; line-height: 1.55;
}
.aula-encabezado-pie {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem; margin-top: .9rem;
}
/* El botón que cruza de vista se corre al final: es la única acción del
   encabezado y no compite con los datos de la izquierda. */
.aula-cambiar-vista { margin-left: auto; }

.aula-tag-vista {
  display: inline-block; padding: .24rem .62rem;
  border-radius: 999px;
  background: var(--aula-encabezado-color, var(--aula-navy)); color: #fff;
  font-size: .68rem; font-weight: 850; letter-spacing: .05em;
  text-transform: uppercase; vertical-align: middle;
}

/* ---------------------------------------------------------------
   Datos de la capacitación
   Viven dentro de la pantalla del aula, plegados: se abren para
   corregir un dato y no obligan a pasar por otra pantalla.
   --------------------------------------------------------------- */

.aula-panel-datos { padding-top: .4rem; padding-bottom: .4rem; }
.aula-datos-cursada > summary {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  cursor: pointer; padding: .7rem 0; color: var(--aula-navy);
}
.aula-datos-cursada > summary small { color: var(--aula-texto-suave); font-size: .78rem; font-weight: 500; }
.aula-datos-cursada[open] > summary { border-bottom: 1px solid var(--aula-borde); margin-bottom: .9rem; }

/* Sumar a alguien al equipo: un desplegable y un botón, en el mismo
   renglón. El desplegable se lleva el espacio que sobra —los nombres con
   el correo al lado son largos— y el botón se queda con lo suyo. */
.aula-form-equipo { margin-bottom: 1rem; }
.aula-form-en-linea { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.aula-form-en-linea select { flex: 1 1 22rem; min-width: 0; }
.aula-form-en-linea .aula-boton { flex: 0 0 auto; }

/* Quién creó el aula y desde cuándo. Es lectura, no formulario: va
   arriba de los campos, en renglones de etiqueta y dato. */
.aula-ficha-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .3rem 1.4rem; margin: 0 0 1.1rem;
  padding: .75rem .9rem; border-radius: 8px;
  background: var(--aula-fondo);
}
.aula-ficha-datos dt {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--aula-texto-suave); margin: 0 0 .1rem;
}
.aula-ficha-datos dd { margin: 0; font-size: .92rem; }
.aula-ficha-datos dd small { display: block; color: var(--aula-texto-suave); font-size: .8rem; }

/* Sumar un módulo de la biblioteca al recorrido, sin salir de acá. */
.aula-agregar-modulo { border-top: 1px solid var(--aula-borde); margin-top: 1.1rem; padding-top: .4rem; }
.aula-agregar-modulo > summary { cursor: pointer; padding: .6rem 0; color: var(--aula-navy); }
.aula-selector-modulos-lista {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .5rem; margin: .8rem 0;
}
.aula-selector-modulos-lista label {
  display: flex; gap: .55rem; align-items: flex-start;
  background: var(--aula-fondo); border-radius: 7px; padding: .6rem; margin: 0;
}
.aula-selector-modulos-lista label strong,
.aula-selector-modulos-lista label small { display: block; }
.aula-selector-modulos-lista label small { color: var(--aula-texto-suave); font-weight: 500; font-size: .74rem; }

/* Mover un módulo dentro del recorrido, desde su propia fila. */
.aula-mover-modulo { flex: 0 0 auto; display: inline-flex; gap: .2rem; }
.aula-accion-icono {
  width: 1.7rem; height: 1.7rem; border: 1px solid var(--aula-borde);
  border-radius: 6px; background: #fff; color: var(--aula-navy);
  font-size: .8rem; line-height: 1; cursor: pointer;
}
.aula-accion-icono:hover:not(:disabled) { background: var(--aula-fondo); }
.aula-accion-icono:disabled { opacity: .35; cursor: default; }

/* Iconos en la biblioteca de módulos, donde antes iba un número que
   sólo significaba algo dentro de un aula. */

/* Encabezados que ordenan la tabla de recursos. */
.aula-orden-columna { color: var(--aula-texto-suave); font-weight: 800; text-decoration: none; white-space: nowrap; }
.aula-orden-columna:hover { color: var(--aula-navy); text-decoration: underline; }
.aula-orden-columna.es-activa { color: var(--aula-navy); }

/* Conversaciones de todas las capacitaciones, agrupadas por aula. */
.aula-grupo-conversaciones { margin-top: 1.4rem; }
.aula-grupo-titulo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--aula-borde); padding-bottom: .4rem; }
.aula-grupo-titulo h3 { margin: 0; font-size: .98rem; color: var(--aula-navy); }

@media (max-width: 650px) {
  .aula-selector-modulos-lista { grid-template-columns: 1fr; }
  .aula-mover-modulo { order: 2; }
}

/* La marca del tipo, en la primera columna de la biblioteca de recursos.
   `width: 1%` en una tabla al 100% es la forma de decir «lo más angosta
   que puedas»: la columna queda del ancho del icono, o del rótulo que
   ordena si ése es más ancho. */
/* Va con `.aula-tabla` adelante para pesar lo mismo que la regla que
   pone el padding a todas las celdas; si no, el relleno general gana y
   la columna queda más ancha de lo necesario. */
.aula-tabla th.celda-tipo,
.aula-tabla td.celda-tipo {
  width: 1%; white-space: nowrap; text-align: center;
  padding-left: .35rem; padding-right: .35rem;
}
/* Lo poco que sobra sobre el icono lo impone el rótulo que ordena, que
   tiene que seguir siendo legible y clicable. Centrado, esos milímetros
   se reparten a los dos lados y la columna se lee prolija en vez de
   parecer que le quedó aire de un lado. */
.celda-tipo .tipo-marca { display: grid; margin: 0 auto; }

@media (max-width: 650px) {
  .aula-encabezado-aula { padding-left: .85rem; margin-bottom: 1.6rem; }
  .aula-cambiar-vista { margin-left: 0; width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------
   Las dos bibliotecas
   El módulo es el contenedor y el material de lectura es el texto que
   va adentro. Cada uno tiene su encabezado con el color de su marca,
   para que se sepa en cuál de las dos bibliotecas se está parado.
   --------------------------------------------------------------- */

.aula-encabezado-aula.es-modulo { --aula-encabezado-color: var(--aula-navy); }
.aula-encabezado-aula.es-material { --aula-encabezado-color: #12776a; }

/* Con qué material está armado un módulo, en el listado. */
.aula-celda-armado span { display: inline-flex; align-items: center; }
.aula-celda-armado small { display: block; color: var(--aula-texto-suave); font-size: .74rem; margin-top: .15rem; }

/* Elegir el material de lectura del módulo. */
.aula-elegir-material {
  border: 1px solid var(--aula-borde); border-left: 4px solid #12776a;
  border-radius: 9px; padding: .9rem 1rem; margin: 1.3rem 0;
}
.aula-elegir-material legend { color: var(--aula-navy); font-weight: 800; padding: 0 .35rem; }
.aula-elegir-material select { width: 100%; }
.aula-elegir-material .aula-ayuda { margin-bottom: 0; }

/* A qué módulos les cambia el texto quien edita un material. */
.aula-material-usos ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; }
.aula-material-usos li { display: flex; align-items: center; gap: .1rem; }
.aula-material-usos strong { color: var(--aula-navy); }

/* La marca de tipo en la primera celda de un listado. */
/* La marca que acompaña a un nombre necesita separarse de él. La de la
   columna del tipo no: está sola en su celda y se centra. */
.aula-listado-gestion td:not(.celda-tipo) > .tipo-marca { margin-right: .55rem; vertical-align: -.75em; }

/* --- Los plegables, con altura animada --------------------------

   El aula ya tenía el triángulo que rota —era lo que le faltaba al
   panel, y ahora lo tiene—; lo que faltaba acá era que la caja se
   abriera en vez de aparecer abierta. Con el panel animando y el aula
   no, la diferencia se notaría al pasar de una a otra, que es
   exactamente lo que se está tratando de sacar.

   Es el mismo mecanismo, con las mismas razones escritas en admin.css:
   `::details-content` es lo de adentro del `<details>`, `interpolate-size`
   permite animar hasta una altura que todavía no se conoce, y donde no
   exista el `@supports` deja todo como estaba y el plegable abre de
   golpe. El `overflow: clip` con margen es para no comerse el anillo de
   foco del último campo de la caja. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .aula-indice-plegable::details-content,
  .aula-modulo-caja::details-content,
  .aula-datos-cursada::details-content,
  .aula-agregar-modulo::details-content,
  .aula-restablecer::details-content {
    height: 0;
    overflow: clip;
    overflow-clip-margin: .75rem;
    transition: height var(--transicion-suave),
                content-visibility var(--transicion-suave);
    transition-behavior: allow-discrete;
  }

  .aula-indice-plegable[open]::details-content,
  .aula-modulo-caja[open]::details-content,
  .aula-datos-cursada[open]::details-content,
  .aula-agregar-modulo[open]::details-content,
  .aula-restablecer[open]::details-content { height: auto; }
}

/* Las dos transiciones escritas a mano pasan a usar el mismo valor que
   el resto de la app. Eran .15s, que es justo lo que vale la ficha
   rápida: no cambia nada hoy y cambia todo junto mañana. */
.aula-indice-plegable > summary::after,
.aula-modulo-caja > summary::after { transition: transform var(--transicion-rapida); }

/* La misma levantada que las tarjetas del panel y las del sitio. */
.aula-cursada-tarjeta,
.aula-tablero-recurso {
  transition: transform var(--transicion-suave),
              box-shadow var(--transicion-suave),
              border-color var(--transicion-rapida);
}
.aula-cursada-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--elevacion-2); }

/* Filas de tabla: el aula tampoco tenía hover, y sus listados de gestión
   son los mismos ocho campos por fila que los del panel. */
.aula-tabla tbody tr { transition: background-color var(--transicion-rapida); }
.aula-tabla tbody tr:hover { background: rgba(5, 2, 64, .035); }