@charset "UTF-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
:root {

  /* ══════════════════════════════════════════════════════════════════════
     1. FUENTE — Colores editables
     ══════════════════════════════════════════════════════════════════════ */
  --aula-primary-base: #303651;
  --aula-secondary-base: #F8B716;

  /* ── Acentos (máx. 3) — derivados de los 2 colores de arriba, no editar ──
     Se derivan de *-base (no de --aula-primary), que no se reasigna en dark:
     así el acento se mantiene constante entre temas. */
  --aula-accent-1: color-mix(in srgb, var(--aula-primary-base) 45%, black);  /* extremo oscuro del degradado del banner */
  --aula-accent-2: color-mix(in srgb, var(--aula-secondary-base) 5%, color-mix(in srgb, black 2%, white)); /* fondo de página */

  /* Reparto por defecto de la ruta de trabajo: los pasos en una fila mientras quepan. Es token
     porque lo usan dos sitios —el respaldo de la base y la variante 4x1— y dos valores que deben
     ser el mismo no pueden vivir escritos por separado. */
  --aula-roadmap-4x1: repeat(auto-fit, minmax(9rem, 1fr));

  /* Fondo del banner. Arranca en el token de marca sin oscurecer: es el color de la alianza y
     tiene que verse tal cual, y así la variante con imagen —que parte del mismo token— coincide
     por construcción. Todo en `oklab`: en oklch el paso del morado al dorado recorre el círculo
     de tono y aparece un rosa que no está en la paleta. El dorado entra en el último tramo, de
     modo que la pieza se lee como morada con un acento cálido y el texto cae sobre lo morado. */
  --aula-banner-degradado: linear-gradient(115deg in oklab,
      var(--aula-primary-base) 0%,
      var(--aula-primary-base) 62%,
      color-mix(in oklab, var(--aula-secondary-base) 70%, var(--aula-primary-base)) 88%,
      var(--aula-secondary-base) 100%);

  /* ══════════════════════════════════════════════════════════════════════
     2. PALETA DERIVADA — No editar manualmente
     ══════════════════════════════════════════════════════════════════════ */

  /* ── Escala primario ── */
  --aula-primary-light: color-mix(in oklch, var(--aula-primary-base) 30%, white);
  --aula-primary:       var(--aula-primary-base);
  --aula-primary-dark:  color-mix(in oklch, var(--aula-primary-base) 70%, black);

  /* ── Secundario ── */
  /* El dorado de marca no sirve como color de texto: sobre blanco da 1.9:1. Este es el mismo
     tono llevado a un nivel legible, y se reasigna en oscuro como el resto de semanticos. */
  --aula-secondary: color-mix(in oklch, var(--aula-secondary-base) 48%, black);

  /* ── Neutros tintados ── */
  --aula-neutral-000: color-mix(in oklch, var(--aula-secondary-base) 4%, white);
  --aula-neutral-050: color-mix(in oklch, var(--aula-secondary-base) 4%, color-mix(in oklch, black  3%, white));
  --aula-neutral-100: color-mix(in oklch, var(--aula-secondary-base) 4%, color-mix(in oklch, black  7%, white));
  --aula-neutral-300: color-mix(in oklch, var(--aula-secondary-base) 3%, color-mix(in oklch, black 25%, white));
  --aula-neutral-400: color-mix(in oklch, var(--aula-secondary-base) 2%, color-mix(in oklch, black 40%, white));
  --aula-neutral-500: color-mix(in oklch, var(--aula-secondary-base) 2%, color-mix(in oklch, black 55%, white));
  --aula-neutral-600: color-mix(in oklch, var(--aula-secondary-base) 2%, color-mix(in oklch, black 68%, white));
  --aula-neutral-650: color-mix(in oklch, var(--aula-secondary-base) 3%, color-mix(in oklch, black 73%, white));   /* superficie de tarjeta en oscuro: entre 600 y 700 */
  --aula-neutral-700: color-mix(in oklch, var(--aula-secondary-base) 3%, color-mix(in oklch, black 78%, white));
  --aula-neutral-800: color-mix(in oklch, var(--aula-secondary-base) 3%, color-mix(in oklch, black 87%, white));
  --aula-neutral-900: color-mix(in oklch, var(--aula-secondary-base) 4%, color-mix(in oklch, black 93%, white));
  --aula-neutral-950: color-mix(in oklch, var(--aula-secondary-base) 4%, color-mix(in oklch, black 97%, white));

  /* ══════════════════════════════════════════════════════════════════════
     3. TOKENS SEMÁNTICOS
     ══════════════════════════════════════════════════════════════════════ */

  --aula-bg:        var(--aula-neutral-000);
  --aula-bg-raised: var(--aula-neutral-000);
  --aula-bg-subtle: var(--aula-neutral-050);
  --aula-text-on-accent: var(--aula-primary);   /* glifo y rótulo que se apoyan en --aula-bg-accent. Viaja con su fondo: en oscuro la pastilla se aclara para no perderse contra la tarjeta, así que lo de encima tiene que aclararse con ella o el par pierde contraste */
  --aula-bg-accent: color-mix(in srgb, var(--aula-primary) 10%, var(--aula-bg-raised));   /* tinte reutilizable: fondos de íconos, chips, realces. Se mezcla sobre la superficie, no sobre blanco: como un claro constante medía 1.15:1 contra la tarjeta en claro —el susurro buscado— pero 12.15:1 en oscuro, donde la pastilla acababa siendo lo más luminoso de la tarjeta. Así se recalcula solo, igual que --aula-bg-tint, y no necesita reasignarse en el bloque oscuro */
  --aula-bg-hover:  color-mix(in srgb, var(--aula-primary) 18%, var(--aula-bg-raised));   /* realce al pasar por encima: el mismo destino para toda superficie enlazada, parta del tinte verde o del blanco. Se recalcula solo en oscuro, porque bg-raised sí se reasigna */
  --aula-bg-tint:   color-mix(in srgb, var(--aula-primary) 18%, var(--aula-bg-raised));   /* tinte de marca sobre la superficie: avisos y apartado abierto. Mezcla --aula-primary, que se aclara en oscuro, y no el -base constante: medido, con el -base el aviso se quedaba a 1.04:1 de la tarjeta —invisible— y ni subiendo la proporción despegaba */
  --aula-bg-page:   var(--aula-accent-2); /* fondo de página — no viene en propiedades del proyecto */
  --aula-bg-secondary: color-mix(in srgb, var(--aula-secondary-base) 18%, var(--aula-bg-raised));   /* tinte dorado sobre la superficie: se recalcula solo en oscuro, como --aula-bg-tint */
  --aula-text-on-brand: color-mix(in srgb, var(--aula-neutral-000) 88%, transparent);   /* texto secundario sobre fondo de marca (banner, bloque de cierre) */
  --aula-bg-sobre-marca: color-mix(in srgb, #fff 22%, transparent);   /* pastilla clara para lo que vive sobre una superficie de marca —avatar del chat, ícono del cierre—. Constante en ambos temas a propósito: el fondo que tiene debajo tampoco cambia, así que seguir al tema la volvía gris sobre morado */

  --aula-text:           var(--aula-neutral-950);
  --aula-text-secondary: var(--aula-neutral-600);

  --aula-link:       var(--aula-primary);
  --aula-link-hover: var(--aula-primary-dark);

  --aula-border:        var(--aula-neutral-100);
  --aula-border-strong: var(--aula-neutral-300);

  --bs-body-bg:    var(--aula-bg);
  --bs-body-color: var(--aula-text);

  /* ══════════════════════════════════════════════════════════════════════
     4. UTILIDADES
     ══════════════════════════════════════════════════════════════════════ */

  --aula-radius-sm:   0.5rem;    /* 8px  — botones, íconos, chips */
  --aula-radius-md:   0.75rem;   /* 12px — tarjetas (base) */
  --aula-radius-lg:   1rem;      /* 16px — banner, contenedores grandes */
  --aula-radius-full: 9999px;    /* pills (badges) */

  --aula-space-xs:  0.25rem;
  --aula-space-sm:  0.5rem;
  --aula-space-row: 0.75rem;
  --aula-space-md:  1rem;
  --aula-list-indent: 1.25rem;   /* desplazamiento del texto respecto a su marcador; lo comparten .aula-lista y las <ol> */
  --aula-space-lg:  1.5rem;

  --aula-pad-control: 0.5rem 0.85rem;   /* par compartido por botón pequeño, botón fantasma y campo del chat */
  --aula-pad-floating: 0.25rem;         /* marco de la barra flotante y del panel de unidades: el mismo, para que se lean como una sola pieza */
  --aula-touch-target: 2.75rem;   /* 44px: objetivo táctil cómodo (WCAG 2.5.5 AAA / Apple HIG); lo comparten el menú flotante y las pestañas */

  --aula-shadow-soft: 0 4px 6px -2px color-mix(in oklch, var(--aula-neutral-950) 10%, transparent);
  --aula-shadow-hard: 0 8px 16px -4px color-mix(in oklch, var(--aula-neutral-950) 25%, transparent);

  /* ══════════════════════════════════════════════════════════════════════
     5. ESCALA TIPOGRÁFICA — única fuente de tamaños de texto
     Los tamaños de ícono NO van aquí: se dimensionan con su pastilla.
     ══════════════════════════════════════════════════════════════════════ */
  --aula-text-display: clamp(1.25rem, 4.5vw, 1.6rem);  /* título del banner */
  --aula-text-2xl:     clamp(1.15rem, 3.5vw, 1.4rem);  /* títulos de portada: bienvenida, contenido del curso, cierre */
  --aula-text-xl:      1.15rem;   /* título de tarjeta */
  --aula-text-lg:      1.05rem;   /* título de bloque dentro de una tarjeta */
  --aula-text-md:      1rem;      /* subtítulos, entradilla, etiqueta de apartado */
  --aula-text-sm:      0.9rem;    /* cuerpo */
  --aula-text-xs:      0.8rem;    /* texto de apoyo: descripciones, stats, subtítulos de fila */
  --aula-text-2xs:     0.7rem;    /* rótulos en versalitas, badges, cabeceras de tabla */

  /* ══════════════════════════════════════════════════════════════════════
     6. PASTILLAS DE ÍCONO — el glifo se deriva de la pastilla, no se fija aparte
     Cambiar --aula-pill-glyph reescala todos los íconos del tema de una vez.
     ══════════════════════════════════════════════════════════════════════ */
  --aula-pill-lg: 3rem;      /* bienvenida, quiz */
  --aula-pill-md: 2.5rem;    /* open class, foro, descarga */
  --aula-pill-sm: 2.25rem;   /* glosario, avatar y envío del chat */
  --aula-pill-xs: 2rem;      /* número de paso, recursos */
  --aula-pill-glyph: 0.42;   /* razón glifo/pastilla, constante en todas */

  --aula-velo: 1.25rem;   /* alto del velo de desplazamiento y del aire que lo recibe */
  --aula-transition-fast: 0.15s ease;
}

/* Botón fantasma en dark (ambiente de pruebas): mismo motivo de contraste que en el bloque de móvil */
/* ══════════════════════════════════════════════════════════════════════════
   ESTILOS BASE HTML
══════════════════════════════════════════════════════════════════════════ */

/* Modelo de caja: el padding no aumenta el ancho (evita desbordes con width:100%). Acotado al contenido del tema. */
.aula-pagina, .aula-pagina *, .aula-pagina *::before, .aula-pagina *::after { box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════════════════
   MODULOS / COMPONENTES
══════════════════════════════════════════════════════════════════════════ */

/* ── Base de página ── */
body { background-color: var(--aula-bg-page); min-height: 100vh; }
#content-body { background: var(--aula-bg-page); }
.aula-pagina {
  display: flex;
  flex-direction: column;
  gap: var(--aula-space-lg);
  padding: 0;
}

/* ── Banner ── (degradado verde constante light/dark, sin scrim; destello dorado a la derecha) */
.aula-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 8.5rem;
  margin: var(--aula-space-md) 0 0;   /* móvil/tablet: separación arriba, sin laterales (se quita en desktop) */
  padding: var(--aula-space-lg);
  border-radius: var(--aula-radius-lg);
  color: #fff;
  /* El color va aparte del degradado y no dentro del shorthand, porque es el respaldo real:
     si la variante con imagen no logra pintar la foto —no carga, la URL deja de estar
     permitida, o en una pantalla muy grande la imagen no cubre todo el alto— detrás queda el
     primario y el texto blanco sigue legible. De paso, al ser el mismo tono en que termina el
     degradado, la transición con la zona descubierta es continua y no deja huecos a la vista. */
  background-color: var(--aula-primary-base);
  background-image: var(--aula-banner-bg, var(--aula-banner-degradado));   /* el var() con respaldo deja que cada variante cambie solo el fondo, y un banner sin atributo se ve bien igualmente */
}
.aula-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* sin decoración propia: el acento dorado ya viene en el degradado. Las variantes usan esta misma capa para la suya. */
}
/* Variante con degradado: es la presentación de base, pero se declara igual. Que una variante
   fuera «la que no lleva atributo» obliga a saber de memoria cuál es la de por defecto, y en la
   migración no se distingue de un banner al que se le olvidó el atributo. No necesita reglas
   propias: hereda el fondo y el destello de .aula-banner. */
.aula-banner[data-variant="degradado"] { --aula-banner-bg: var(--aula-banner-degradado); }

/* Variante geométrica: el mismo fondo con dos círculos encima, en CSS puro; sin imagen que subir
   ni recurso externo que se pueda perder al copiar el curso. Las dos paradas de cada círculo se
   separan 1px: con medio punto de diferencia el borde se rasteriza difuminado, y con corte exacto
   se dibuja en escalera; un píxel es el mínimo que el navegador puede suavizar. */
.aula-banner[data-variant="geometrico"] { --aula-banner-bg: none; }   /* fondo liso de marca: el acento lo ponen las formas, y sobre el degradado dorado el círculo se mezclaba y viraba a marrón */
.aula-banner[data-variant="geometrico"]::after {
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--aula-secondary-base) 55%, transparent) 0 calc(22% - 1px), transparent 22%),
    radial-gradient(circle at 72% 92%, color-mix(in srgb, var(--aula-neutral-000) 10%, transparent) 0 calc(30% - 1px), transparent 30%);
}

/* Variante con imagen de fondo. Mismo marcado y mismos id que la base: lo único que cambia es
   data-variant, así que la migración no la distingue y para cambiar de presentación basta el
   atributo. La foto entra por style="background-image" en el HTML (Canvas la admite inline
   siempre que la URL sea http/https), de modo que es editable por curso sin tocar el tema. */
.aula-banner[data-variant="imagen"] {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Aquí la capa decorativa deja de ser el destello radial y pasa a ser un degradado horizontal:
   macizo donde va el texto y abriéndose para dejar ver la foto a la derecha.

   El contraste lo da el tinte, no el desenfoque: difuminar no cambia la luminancia media de la
   foto. Medido con el accent-1 de este tema, el tramo al 90% da 11.8:1 para texto blanco sobre
   una foto blanca, que es el peor caso. El degradado no empieza a abrirse hasta pasado el ancho
   máximo del contenido (--aula-banner-safe), así que el texto nunca sale del tramo seguro. */
.aula-banner[data-variant="imagen"]::after {
  background: linear-gradient(100deg,
    var(--aula-primary-base) 0%,
    var(--aula-primary-base) 48%,
    color-mix(in srgb, var(--aula-primary-base) 72%, transparent) var(--aula-banner-safe, 72%),
    transparent 100%);
  /* Sin backdrop-filter: el contraste lo da el tinte del degradado, como explica el comentario de
     arriba. El blur estropeaba el detalle de la foto y la saturacion la alejaba del original; la
     imagen que sube cada curso se ve tal cual es. */
}
.aula-banner-content { position: relative; z-index: 1; }

/* El rotulo y el titulo son dos niveles distintos: el aire lo pone el banner, no el rotulo, que
   es generico y se usa tambien pegado a su contenido. */
.aula-banner .aula-rotulo { margin-bottom: var(--aula-space-md); }
.aula-banner-title {
  margin: 0;
  font-size: var(--aula-text-display);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.aula-banner-meta {
  margin: var(--aula-space-md) 0 0;
  display: inline-flex;
  align-items: center;
  gap: var(--aula-space-sm);
  font-size: var(--aula-text-sm);
  line-height: 1.35;
  color: var(--aula-text-on-brand);   /* el token que apuntaba aqui no existia: caia en heredado y se veia blanco por casualidad */
}
.aula-banner-meta i { color: var(--aula-secondary-base); }

/* ── Botón ── (patrón base para CTAs; usa -base constante para texto blanco legible en ambos temas) */
.aula-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--aula-space-sm);
  padding: 0.65rem 1.1rem;
  border-radius: var(--aula-radius-sm);
  font-size: var(--aula-text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;   /* Canvas subraya los <a>; forzamos sin subrayado (normal y hover) */
  transition: background var(--aula-transition-fast);
}
.aula-boton-primario { background: var(--aula-primary-base); color: #fff !important; }   /* !important: Canvas colorea los <a> (y el hover) en azul */
.aula-boton-primario:hover { background: color-mix(in oklch, var(--aula-primary-base) 85%, black); }
/* Ícono del botón: los glifos de Font Awesome ocupan el cuadrado em completo (≈15px de tinta a 14.4px
   de fuente), mientras las mayúsculas del texto miden ~10px. Con el mismo tamaño el ícono se lee un 50%
   más alto que las letras y su base cae por debajo de la línea base del texto. A 0.85em la tinta queda
   entre la altura de mayúsculas y la línea base. Selector de descendencia sobre el <i> que ya existe:
   no añade ni quita clases del HTML. */
.aula-boton i { font-size: 0.85em; }
/* Tamaño de botón pequeño (reutilizable en filas/tarjetas) */
.aula-boton-pequeno { padding: var(--aula-pad-control); font-size: var(--aula-text-xs); }
/* Fila de botones */
.aula-boton-fila { display: flex; flex-wrap: wrap; gap: var(--aula-space-sm); margin-top: var(--aula-space-md); }
/* Variante centrada: en las páginas de actividad, Canvas inyecta su propio botón (Responder,
   Enviar tarea…) alineado a la izquierda justo debajo del contenido. Un retorno también a la
   izquierda compite con él, así que se centra para que se lean como dos acciones distintas.
   margin-top: 0 porque el gap de .aula-pagina ya separa y en flex los márgenes no colapsan. */
.aula-boton-fila[data-variant="centrado"] { justify-content: center; margin-top: 0; }
/* Aire inferior de la fila que cierra la página: en las actividades Canvas mete el contenido en
   un contenedor .description de altura acotada, y el borde del último botón queda justo en el
   límite del recorte. El margen lo aparta de ese borde sin depender de estilos de Canvas. */
.aula-pagina > .aula-boton-fila:last-child { margin-bottom: var(--aula-space-sm); }
/* Tres niveles de accion, de mas a menos peso:
   primario   → fondo de marca, la accion que se espera que hagas en la pagina;
   secundario → el segundo color de marca, para lo que acompana sin competir (lo optativo);
   fantasma   → sin relleno, para lo auxiliar: descargas, rubricas, ir a un recurso. */

.aula-boton-fantasma {
  background: transparent;
  color: var(--aula-primary-base) !important;   /* -base constante (no se aclara en dark): fondo transparente = fondo claro real de Canvas web → contraste AA (~8:1). !important: Canvas colorea los <a> en azul */
  border: 1px solid var(--aula-border-strong);
  font-size: var(--aula-text-xs);
  padding: var(--aula-pad-control);
}
.aula-boton-fantasma:hover { border-color: var(--aula-primary); background: color-mix(in srgb, var(--aula-primary) 10%, transparent); }

.aula-boton:focus-visible { outline: 2px solid var(--aula-primary); outline-offset: 2px; }

/* ── Botón con URL externa al LMS ──
   Canvas detecta los enlaces que salen del aula y sobre esos <a>: (1) les añade la clase .external,
   (2) les inyecta al final un <span class="external_link_icon"> con un ícono SVG y estilo inline, y
   (3) subraya el texto en hover/focus/active con `a.external:hover span { text-decoration: underline }`.
   Como esa regla apunta al <span> interno y no al <a>, el `text-decoration: none` de .aula-boton
   no la alcanza: hay que apuntar también al span.
   Acotado a .aula-boton a propósito: en los enlaces de contenido (.aula-tarjeta p a, .aula-lista a) el
   subrayado y el ícono SÍ se conservan, porque ahí sí informan que el enlace sale del aula. */
.aula-boton.external:is(:hover, :focus, :active) span { text-decoration: none !important; }
/* El ícono no se elimina, se vuelve invisible en layout (receta visually-hidden): así desaparece de la
   vista y no suma el `gap` del botón (position:absolute lo saca del flujo flex), pero el
   <span class="screenreader-only">Links to an external site.</span> que Canvas mete dentro sigue
   anunciándose, de modo que el lector de pantalla no pierde el aviso de que el enlace es externo. */
.aula-boton .external_link_icon {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  margin: 0 !important;   /* !important: Canvas escribe margin-inline-start como estilo inline */
}

/* ── Contenido del curso ── (tarjetas de acceso a cada página. Grid auto-fit responsive) */
/* A PRUEBA (ver PRUEBAS.md): numero de columnas fijo en vez de auto-fit. En movil una, desde
   tablet dos, y tres solo cuando el menu del curso esta plegado y sobra ancho. */
.aula-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--aula-space-md);
}
.aula-ficha {
  display: flex;
  flex-direction: column;
  gap: var(--aula-space-xs);   /* el ritmo lo pone la ficha: sus partes ya no llevan margen propio */
  padding: var(--aula-space-md);
  background: var(--aula-bg-raised);
  border: 1px solid var(--aula-border);
  border-radius: var(--aula-radius-md);
  box-shadow: var(--aula-shadow-soft);
  transition: border-color var(--aula-transition-fast), transform var(--aula-transition-fast);
}
.aula-ficha:hover { border-color: var(--aula-primary); transform: translateY(-2px); }

.aula-ficha-accion { margin-top: var(--aula-space-lg); width: 100%; justify-content: center; }   /* la accion cierra la ficha: mas aire que el que separa sus textos */
/* El texto absorbe el espacio sobrante y empuja la accion al pie. Con margin-top:auto en el
   boton, una ficha de texto largo lo dejaba pegado: auto se come el margen minimo. */
.aula-ficha > .aula-texto { flex: 1; }

/* ── Tarjeta genérica ── (contenedor reutilizable de sección con título) */
.aula-tarjeta {
  background: var(--aula-bg-raised);
  border: 1px solid var(--aula-border);
  border-radius: var(--aula-radius-md);
  box-shadow: var(--aula-shadow-soft);
  padding: var(--aula-space-md);
}
.aula-tarjeta-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--aula-space-sm);
  /* La descripcion pertenece a la cabecera, asi que va cerca de ella: con space-md quedaba a
     16px de su titulo y a 0 del bloque siguiente, y se leia como entradilla de lo de abajo en
     vez de como descripcion de lo de arriba. El aire entre bloques lo abre el titulo siguiente. */
  margin-bottom: var(--aula-space-sm);
}

/* ── Media ── (video embebido 16:9, reutilizable) */
.aula-video {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--aula-radius-sm);
  background: linear-gradient(135deg, var(--aula-accent-1), var(--aula-primary-base));  /* fallback mientras carga el embed */
}
.aula-video-marco { display: block; width: 100%; height: 100%; border: 0; }

/* ── Video en 2 columnas ── (video a la izq., texto a la der. desde tablet) */
.aula-medio-par { display: flex; flex-direction: column; gap: var(--aula-space-md); }
.aula-medio-texto :is(h2, h3) { margin: 0 0 var(--aula-space-sm); font-size: var(--aula-text-lg); font-weight: 700; color: var(--aula-text); }
.aula-medio-texto p { margin: 0; color: var(--aula-text-secondary); font-size: var(--aula-text-sm); line-height: 1.6; }

/* ── Aviso ── (realce sobre fondo de acento: pregunta detonadora, advertencias) */
.aula-aviso {
  display: flex; align-items: center; gap: var(--aula-space-sm);   /* centrado: el icono es el distintivo del aviso, no la primera linea del texto */
  margin-top: var(--aula-space-md);
  padding: var(--aula-space-row) var(--aula-space-md);   /* el mismo relleno que la fila: dentro de una tarjeta los dos se alinean */
  border-radius: var(--aula-radius-sm);
  border-left: 3px solid var(--aula-primary);   /* el tinte de marca sobre la superficie apenas despega del fondo de la tarjeta —1.17:1 en claro, 1.05:1 en oscuro—, así que quien delimita el aviso es la banda: --aula-primary se aclara en oscuro y se ve en los dos temas */
  background: var(--aula-bg-tint);
  color: var(--aula-text);   /* ambos se reasignan en oscuro: con bg-accent y un texto oscuro constantes, el aviso se quedaba claro y saltaba sobre el resto de la página */
  font-size: var(--aula-text-xs); line-height: 1.5;
}   /* --aula-primary y no -base: este ícono es el único de marca que no va sobre pastilla clara, sino sobre el fondo del aviso. El -base es constante y oscuro, así que en oscuro se apagaba contra su propio fondo; --aula-primary sí se aclara. */

.aula-aviso + * { margin-top: var(--aula-space-md); }   /* lo que venga despues no se pega al aviso */

/* ── Embed portrait ── (iframe más alto que ancho: encuestas, Rise, formularios…) */
.aula-embed {
  margin-top: var(--aula-space-md);
  border: 1px solid var(--aula-border);
  border-radius: var(--aula-radius-md);
  overflow: hidden;
  box-shadow: var(--aula-shadow-soft);
  background: var(--aula-bg-raised);
}
/* Tres formatos de embebido, por atributo: el alto va acotado por la ventana y no por un
   aspect-ratio, porque a lo ancho de la columna de contenido un A4 real pediría casi 1000px de
   alto y obligaría a hacer scroll dentro del scroll. El SCORM pide más aire que el PDF: trae su
   propia barra de navegación debajo del contenido. El video no entra aquí, va en .aula-video. */
.aula-embed[data-variant="pdf"]   > .aula-embed-marco { height: min(80vh, 45rem); }
.aula-embed[data-variant="scorm"] > .aula-embed-marco { height: min(90vh, 56rem); }
.aula-embed-marco {
  display: block;
  width: 100%;
  height: min(85vh, 48rem);
  border: 0;
}
/* ── Entradilla ── (párrafo breve que da entrada al contenido, justo bajo el banner.
   Algo mayor que el cuerpo; ocupa todo el ancho disponible, igual que el resto del contenido.) */
.aula-intro { margin: 0; font-size: var(--aula-text-md); line-height: 1.6; color: var(--aula-text-secondary); }

.aula-lista { list-style: none; margin: 0; padding: 0 0 0 var(--aula-space-md); display: flex; flex-direction: column; gap: var(--aula-space-sm); }   /* sangría: subordina la lista a su rótulo en vez de alinearla con él */
/* Sin font-size ni color: los ítems son contenido, y el contenido lo tipografía Canvas.
   Fijarlos aquí dejaba la lista un escalón por debajo del párrafo vecino. */
.aula-lista li { position: relative; padding-left: var(--aula-list-indent); line-height: 1.5; }
.aula-lista li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--aula-primary); }

/* Ritmo de la tarjeta, de mayor a menor: el rótulo abre bloque separándose space-lg de lo
   anterior; su propio contenido queda a space-sm; los párrafos de un mismo bloque, a space-md;
   los ítems de una lista, a space-sm. Lo que agrupa es la diferencia entre esas medidas, así que
   la grande la aporta SOLO el rótulo: si también la usan los párrafos entre sí, dos párrafos del
   mismo bloque acaban más separados que un rótulo de su contenido y la jerarquía se invierte. */
/* Lista ordenada (pasos de una actividad): alinea su texto con el de .aula-lista y le da el
   mismo aire entre ítems. Va por elemento, no por clase: el inventario no crece. Sin flex
   a propósito —convertiría los <li> en flex items y perderían el marcador numérico—, así que
   el ritmo lo da li + li. El padding suma la sangría de la lista y el hueco del marcador
   para que una <ol> y una <ul> caigan en la misma vertical, y al fijarlo no dependemos del
   valor por defecto (que difiere entre el navegador y el aula). Se prefija con .aula-pagina
   para superar a .user_content ol de Canvas, que empata en especificidad con .aula-tarjeta ol
   y ganaría o perdería según el orden de carga. */
.aula-pagina .aula-tarjeta ol { margin: 0; padding-left: calc(var(--aula-space-md) + var(--aula-list-indent)); }
.aula-pagina .aula-tarjeta ol li + li { margin-top: var(--aula-space-sm); }

.aula-lista + p { margin-top: var(--aula-space-md); }   /* párrafo justo después de una lista: continúa el bloque */
/* El ritmo entre parrafos lo da .aula-prosa, que es donde vive un texto de varios parrafos.
   La regla de antes sumaba su margen al gap y dejaba 28px donde debia haber 12. */
.aula-tarjeta p + .aula-lista { margin-top: var(--aula-space-sm); }   /* lista justo después de su párrafo-rótulo */
/* Párrafos de una misma tarjeta (descripción de una actividad): el aire lo pone el tema. Hay que
   anular antes el margen propio del <p>, que el navegador deja en 1em y en el aula se sumaba al
   nuestro: el bloque se abría ~28px donde el diseño pide 12. Acotado a los párrafos sin clase,
   que son los de las actividades: los que llevan clase ya traen su propio margen y no se tocan.
   Se prefija con .aula-pagina para ganarle en especificidad a .user_content p, de Canvas, que
   empata con .aula-tarjeta p y se resolvería según el orden de carga. */
.aula-pagina .aula-tarjeta > p:not([class]) { margin: 0; }
.aula-pagina .aula-tarjeta > :is(p:not([class]), ol) + :is(p:not([class]), ol) { margin-top: var(--aula-space-md); }   /* la <ol> de pasos entra en el mismo ritmo: su margen ya está a 0 más arriba */
/* El rótulo abre bloque, así que se separa más de lo anterior que dos párrafos entre sí; y su
   propia lista va pegada a él. Es la diferencia entre las dos medidas la que agrupa. */
.aula-pagina .aula-tarjeta > * + .aula-rotulo[data-variant="linea"] { margin-top: var(--aula-space-lg); }
.aula-pagina .aula-tarjeta > .aula-rotulo[data-variant="linea"] + :is(ol, p) { margin-top: var(--aula-space-sm); }

/* Enlace inline dentro de contenido (no botones) */
.aula-tarjeta p a:not(.aula-boton), .aula-lista a {
  color: var(--aula-link) !important;   /* !important: gana a .user_content a de Canvas */
  font-weight: 700;
  text-decoration: underline !important;
  text-decoration-color: var(--aula-link) !important;
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.18em;
  transition: color var(--aula-transition-fast), text-decoration-thickness var(--aula-transition-fast);
}
.aula-tarjeta p a:not(.aula-boton):hover, .aula-lista a:hover {
  color: var(--aula-link-hover) !important;
  text-decoration-color: var(--aula-link-hover) !important;
  text-decoration-thickness: 0.2em;
}
.aula-tarjeta p a:not(.aula-boton):focus-visible, .aula-lista a:focus-visible {
  outline: 2px solid var(--aula-primary); outline-offset: 2px; border-radius: 2px;
}

.aula-divisor { border: 0; border-top: 1px solid var(--aula-border); margin: var(--aula-space-md) 0; }

/* ── Tabla ── */
.aula-tabla-marco { overflow-x: auto; }   /* tablas: scroll horizontal propio en móvil */
.aula-tabla { width: 100%; border-collapse: collapse; font-size: var(--aula-text-sm); }
.aula-tabla caption {   /* subtítulo accesible; se ve como un eyebrow */
  caption-side: top; text-align: left;
  font-size: var(--aula-text-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--aula-primary);
  margin-bottom: var(--aula-space-sm);
}
.aula-tabla th, .aula-tabla td { padding: 0.6rem 0.75rem !important; text-align: left; border-bottom: 1px solid var(--aula-border); }   /* !important: gana a .user_content table td de Canvas, que pisa el padding en el aula */
/* Encabezado: el tinte de marca y la regla gruesa lo separan de los datos; el gris de la cebra
   queda libre para las filas. Ambos tokens se reasignan en dark, así que no necesita excepción. */
.aula-tabla thead th {
  font-size: var(--aula-text-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--aula-text);
  background: color-mix(in srgb, var(--aula-primary) 8%, transparent);
  border-bottom: 2px solid var(--aula-border-strong);
}
.aula-tabla td { color: var(--aula-text-secondary); }
/* Encabezado de fila (1ª columna). Con rowspan agrupa varias filas: centrado vertical
   y !important porque Canvas fuerza vertical-align:top en .user_content table td/th. */
.aula-tabla tbody th { color: var(--aula-text); font-weight: 600; vertical-align: middle !important; white-space: nowrap; }
.aula-tabla tbody th[rowspan] { border-right: 1px solid var(--aula-border); }
/* ── Cebra ── separación visual entre filas */
.aula-tabla tbody tr:nth-child(even) { background: var(--aula-bg-subtle); }
/* Variante para tablas con filas agrupadas por rowspan="2" (p. ej. plan de evaluación):
   la banda cubre el grupo completo, no la fila suelta, para no partir la celda combinada. */
.aula-tabla-agrupada tbody tr:nth-child(even) { background: transparent; }
.aula-tabla-agrupada tbody tr:nth-child(4n+3),
.aula-tabla-agrupada tbody tr:nth-child(4n+4) { background: var(--aula-bg-subtle); }
.aula-tabla-numero { text-align: center !important; white-space: nowrap; }   /* !important: Canvas fuerza text-align:left en el aula */
.aula-tabla tfoot td, .aula-tabla tfoot th { font-weight: 700; color: var(--aula-text); background: var(--aula-bg-accent); border: 0; }   /* fila de total: tono de acento, sin bordes. El texto va por token semantico: con uno constante quedaba oscuro sobre el acento ya oscurecido */

/* ── Badge ── (pill; tinte de marca sobre la superficie, texto en el mismo primario que se reasigna) */
.aula-etiqueta {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--aula-radius-full);
  background: var(--aula-bg-accent);
  color: var(--aula-text-on-accent);
  font-size: var(--aula-text-2xs); font-weight: 700;
  white-space: nowrap;
}

/* ── Ruta de trabajo ── (mapa de pasos + resultados de aprendizaje) */
/* Las dos presentaciones declaran su atributo, también la de una fila: que una fuera «la que no
   lo lleva» obliga a saber de memoria cuál es la de por defecto, y en la migración no se
   distingue de un bloque al que se le olvidó el atributo. La base deja el reparto de 4x1 como
   respaldo del var(), así que una ruta sin atributo se sigue viendo bien. */
.aula-pasos {
  display: grid;
  grid-template-columns: var(--aula-roadmap-cols, var(--aula-roadmap-4x1));
  gap: var(--aula-space-md);
  margin: var(--aula-space-md) 0;
}
.aula-pasos[data-variant="4x1"] { --aula-roadmap-cols: var(--aula-roadmap-4x1); }
/* El paso es un <a> a la pagina del apartado: superficie propia con marco. */
.aula-paso {
  display: block;   /* explicito: el <a> es inline; como item de rejilla ya se blockifica, pero no dependemos de eso */
  padding: var(--aula-space-md);
  border: 1px solid var(--aula-border);
  border-radius: var(--aula-radius-md);
  background: var(--aula-bg-raised);
  box-shadow: var(--aula-shadow-soft);
  text-decoration: none !important;   /* Canvas subraya los <a> */
  transition: border-color var(--aula-transition-fast), background var(--aula-transition-fast);
}
.aula-paso:hover { border-color: var(--aula-primary); background: var(--aula-bg-hover); }   /* tinte de fondo y no desplazamiento: mismo gesto que el resto de superficies del tema */
.aula-paso:focus-visible { outline: 2px solid var(--aula-primary); outline-offset: 2px; }
/* Variante de presentación: 2 columnas × 2 filas, con el número a la izquierda del texto.
   Mismo marcado y mismos id que la base — solo cambia el atributo data-variant, así que la
   migración no la distingue. Se usa grid dentro del paso para acomodar número | nombre+descripción
   sin añadir un contenedor: la colocación es explícita para no depender del auto-placement.
   Móvil arranca en 1 columna; las 2 columnas entran en el bloque de 768px. */
.aula-pasos[data-variant="2x2"] { --aula-roadmap-cols: 1fr; }
.aula-pasos[data-variant="2x2"] .aula-paso {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--aula-space-md);
  align-items: start;
}
/* align-self: center porque el paso lleva align-items:start (que el nombre y la descripción sí
   necesitan). Sin esto el círculo se ancla arriba y su centro no coincide ni con la primera línea
   ni con el bloque; al abarcar las dos filas, centrarlo lo alinea con el conjunto del texto. */
/* Numero del paso: pastilla redonda, no cuadrada como .aula-icono. En este tema un numero en
   circulo significa «uno de una serie», y el radio lo distingue del icono de recurso. */
.aula-paso-numero {
  display: inline-grid; place-items: center;
  width: var(--aula-pill-xs); height: var(--aula-pill-xs);
  border-radius: 50%;
  background: var(--aula-primary-base);
  color: var(--aula-neutral-000);
  font-weight: 700; font-size: calc(var(--aula-pill-xs) * var(--aula-pill-glyph));
  margin-bottom: var(--aula-space-xs);
}
.aula-pasos[data-variant="2x2"] .aula-paso-numero { grid-column: 1; grid-row: 1 / 3; align-self: center; margin-bottom: 0; }

/* ── Apartados de la página ── (secciones apiladas; la cabecera-etiqueta es ancla del menú) */
.aula-seccion { display: flex; flex-direction: column; gap: var(--aula-space-md); }   /* límite de altura + scroll */

/* ── Desplegable ── details con el summary de cabecera. El relleno va en el summary y en el
   cuerpo, no en el marco, para que toda la cabecera sea area tactil, y overflow recorta el fondo
   del hover al radio de la tarjeta que lo envuelve. */
.aula-desplegable { padding: 0; overflow: hidden; }
.aula-desplegable + .aula-desplegable { margin-top: var(--aula-space-sm); }   /* desplegables consecutivos: mismo aire que entre items de una lista */
.aula-desplegable > summary {
  display: flex; align-items: center; gap: var(--aula-space-sm);
  /* Una linea de texto no necesita 60px de alto: el relleno baja a space-sm y la pastilla a su
     tamano minimo. El area tactil la sostiene el propio summary, que sigue por encima de 44px. */
  padding: var(--aula-space-sm) var(--aula-space-md);
  list-style: none; cursor: pointer;
  font-size: var(--aula-text-sm); font-weight: 700; color: var(--aula-text);
}
.aula-desplegable > summary::-webkit-details-marker { display: none; }
.aula-desplegable > summary > span:not(.aula-icono) { flex: 1; min-width: 0; }   /* solo el texto crece: la pastilla tambien entraba aqui y empujaba el texto al centro */
.aula-desplegable > summary:hover { background: var(--aula-bg-subtle); }
.aula-desplegable > summary:hover .aula-desplegable-flecha { color: var(--aula-primary); }
/* Sobre el gris del hover la pastilla suave desaparece (medido: 1.06:1), asi que se enciende:
   el mismo tratamiento que la variante solida. */
.aula-desplegable > summary:hover .aula-icono { background: var(--aula-primary); color: var(--aula-bg-raised); }
.aula-desplegable[open] > summary { color: var(--aula-primary); }
.aula-desplegable-flecha { flex-shrink: 0; margin-left: auto; font-size: var(--aula-text-xs); color: var(--aula-text-secondary); transition: transform var(--aula-transition-fast); }
.aula-desplegable[open] > summary .aula-desplegable-flecha { transform: rotate(90deg); color: var(--aula-primary); }
/* El padding superior se suma al inferior del summary: sin el, el parrafo arranca pegado al titulo. */
.aula-desplegable-cuerpo { padding: var(--aula-space-sm) var(--aula-space-md) var(--aula-space-md); }
/* Un cuerpo puede llevar varios parrafos o una lista: sin esto heredan el margen del navegador
   (12.8px) y se despegan mas que el resto del tema. El primero y el ultimo no suman al relleno. */
.aula-desplegable-cuerpo > :is(p, ul, ol) { margin: var(--aula-space-row) 0 0; }
.aula-desplegable-cuerpo > :first-child { margin-top: 0; }

/* Lista: terminos encadenados dentro de un bloque —glosario, preguntas frecuentes—. Sin marco ni
   aire propios, porque el marco lo pone el bloque: los separa una linea. Abierto se marca entero
   con una barra al costado; con varios abiertos, el color del titulo no deja ver donde acaba cada
   uno. */
.aula-desplegable[data-variant="lista"] { border-bottom: 1px solid var(--aula-border); }
.aula-desplegable[data-variant="lista"] + .aula-desplegable[data-variant="lista"] { margin-top: 0; }
.aula-desplegable[data-variant="lista"]:last-child { border-bottom: 0; }
.aula-desplegable[data-variant="lista"][open] { background: var(--aula-bg-subtle); }
.aula-desplegable[data-variant="lista"][open] > summary,
.aula-desplegable[data-variant="lista"][open] > .aula-desplegable-cuerpo { box-shadow: inset 3px 0 0 var(--aula-primary); }
/* Cuerpo de texto y no texto de apoyo: una definicion son dos o tres lineas que se leen, no un
   subtitulo. Con xs (12.8px) quedaba por debajo del resto del tema sin motivo. */
.aula-desplegable[data-variant="lista"] > .aula-desplegable-cuerpo { font-size: var(--aula-text-sm); line-height: 1.55; color: var(--aula-text-secondary); }

/* ── Secuencia de etapas ── (los apartados de la unidad como pasos que se abren en su sitio)
   Cada etapa es un .aula-tarjeta.aula-desplegable: la superficie, el hover, la flecha giratoria y el
   color de abierto ya están resueltos ahí y no se repiten. Lo único que añade esta lista es la
   lectura de secuencia: la pastilla numerada en una canaleta propia y el hilo que la une con la
   siguiente. La canaleta va FUERA de la tarjeta a propósito: el hilo que atraviesa las etapas por
   el margen es lo que se lee como recorrido; metido en el hueco entre tarjetas se pierde.

   El número sale de un contador CSS y no del HTML: así el orden no puede desincronizarse al
   reordenar o quitar una etapa, y el marcado que se pega en cada curso no carga con él. Como la
   <ol> ya aporta la semántica de orden, el número es decoración y no se pierde nada. */
/* Pastilla numerada: sólido y no tinte, igual que el paso de la ruta de trabajo. primary-base no
   se reasigna entre temas y el texto va en blanco, así que se lee igual en claro y en oscuro y
   no necesita excepción en el bloque oscuro. El glifo se deriva de la pastilla.

   El margen superior la baja hasta la línea del título: la cabecera abre con su propio padding
   (space-row) y media línea de texto, así que media pastilla más medio escalón corto caen justo
   ahí. Se alinea con el título y no con el centro de la tarjeta, que al abrirse crece y dejaría
   el número flotando a mitad del contenido. */
/* Hilo hasta la etapa siguiente: arranca bajo la pastilla, cruza el hueco de la lista y muere en
   la de abajo. En la última no hay a dónde ir, así que no se dibuja: una línea que acaba en el
   aire sugeriría un paso que falta. */
/* Cabecera de la etapa: nombre + descripción a la izquierda, flecha a la derecha. Rejilla y no
   flex, para que la flecha quede centrada respecto a las DOS líneas de texto (grid-row 1/3) y la
   descripción caiga bajo el título sin envolverlos en otro elemento: el <summary> sigue sin
   bloques dentro, que es lo que hace al saneador del RCE reescribir el árbol al copiar el curso.
   El nombre sube a tamaño de título de tarjeta —es el rótulo de un apartado entero, no el de un
   desplegable de apoyo— y con interlineado corto, para que su descripción no se le despegue. */
/* Etapa abierta: la cabecera se tiñe para que se vea de un vistazo en cuál estás. El 90% de la
   mezcla es la superficie de la tarjeta, que sí se reasigna en dark, así que el tinte sigue al
   tema y no hace falta una excepción en el bloque oscuro. El 10% sale del -base constante y no
   del primario del tema a propósito: en claro son el mismo color, y en oscuro el base es el tono
   profundo, de modo que la cabecera se oscurece en vez de aclararse y el texto —que en dark sí se
   aclara— gana contraste en lugar de perderlo. */
/* El cuerpo de la etapa lleva bloques completos (tarjetas, descargas), no un párrafo como el
   desplegable de políticas: se comporta como un apartado, con el mismo aire entre bloques. */
.aula-secuencia {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--aula-space-md);
  counter-reset: aula-stage;
}
.aula-secuencia > li {
  position: relative;
  display: grid;
  grid-template-columns: var(--aula-pill-xs) 1fr;
  column-gap: var(--aula-space-sm);
  align-items: start;
}
.aula-secuencia > li::before {
  counter-increment: aula-stage;
  content: counter(aula-stage);
  /* Centrada con la cabecera, no con la tarjeta: la cabecera mide 63px —titulo y descripcion,
     siempre las dos— y la pastilla 32, asi que este margen la deja en su eje. Centrarla con la
     tarjeta entera no sirve: al abrirse crece y el numero quedaria flotando a mitad del contenido.
     Alineada solo con el titulo se veia alta, medido: 9px por encima del eje de la cabecera. */
  margin-top: var(--aula-space-md);
  display: grid;
  place-items: center;
  width: var(--aula-pill-xs);
  height: var(--aula-pill-xs);
  border-radius: var(--aula-radius-full);
  background: var(--aula-primary-base);
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--aula-pill-xs) * var(--aula-pill-glyph));
}
.aula-secuencia > li::after {
  content: "";
  position: absolute;
  left: calc(var(--aula-pill-xs) / 2);
  top: calc(var(--aula-space-md) + var(--aula-pill-xs));   /* justo debajo de la pastilla: arranca donde ella acaba, sin solaparla */
  bottom: calc((var(--aula-space-md) + var(--aula-space-md)) * -1);   /* el hueco de la lista MÁS lo que baja la pastilla siguiente: si solo cubre el hueco, el hilo muere un escalón antes y la secuencia se corta */
  width: 1px;
  background: var(--aula-border-strong);
}
.aula-secuencia > li:last-child::after { content: none; }
/* Etapa abierta: la pastilla pasa al dorado, el mismo par que marca la unidad en la que estás en
   el submenú —relleno secundario y número en primary-base, 4.9:1—. Los dos son constantes, así que
   se leen igual en claro y en oscuro y no suman una excepción al bloque oscuro. */
.aula-secuencia > li:has(> .aula-desplegable[open])::before {
  background: var(--aula-secondary-base);
  color: var(--aula-primary-base);
}
.aula-secuencia > li > .aula-desplegable > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--aula-space-row);
  font-size: var(--aula-text-xl);   /* tamaño de título de tarjeta: la etapa es exactamente eso */
  line-height: 1.15;
}
.aula-secuencia > li > .aula-desplegable > summary .aula-desplegable-flecha { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.aula-secuencia > li > .aula-desplegable[open] > summary { background: var(--aula-bg-tint); }
.aula-secuencia > li > .aula-desplegable > .aula-desplegable-cuerpo { display: flex; flex-direction: column; gap: var(--aula-space-md); }

/* ── Tutor IA (chat con los colores del proyecto) ──
   #tutor-ia lo localiza la integración de IA; #tutor-ia-messages es donde inyecta la conversación.
   Sin JS: es la carcasa visual; la IA la hace interactiva. */
.aula-conversacion {
  border: 1px solid var(--aula-border);
  border-radius: var(--aula-radius-md);
  overflow: hidden;
  box-shadow: var(--aula-shadow-soft);
  background: var(--aula-bg-raised);
}
.aula-conversacion-encabezado {
  display: flex; align-items: center; gap: var(--aula-space-sm);
  padding: var(--aula-space-row) var(--aula-space-md);
  background: var(--aula-primary-base);   /* verde constante */
  color: #fff;
}
.aula-conversacion-avatar {
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  width: var(--aula-pill-sm); height: var(--aula-pill-sm);
  border-radius: 50%;
  background: var(--aula-bg-sobre-marca);
  color: #fff;
  font-size: calc(var(--aula-pill-sm) * var(--aula-pill-glyph));
}
.aula-conversacion-encabezado-info { display: flex; flex-direction: column; min-width: 0; }
/* Isla de marca: el encabezado tine a sus hijos en vez de obligar a cada uno a declarar una
   variante inversa ademas de su tamano. */
.aula-conversacion-encabezado .aula-titulo { color: var(--aula-neutral-000); }
.aula-conversacion-encabezado .aula-texto { color: color-mix(in srgb, var(--aula-neutral-000) 85%, transparent); }
.aula-conversacion-cuerpo {
  display: flex; flex-direction: column; gap: var(--aula-space-sm);
  padding: var(--aula-space-md);
  min-height: 8rem; max-height: 22rem; overflow-y: auto;
  background: var(--aula-bg-subtle);
}
.aula-conversacion-mensaje {
  max-width: 82%;
  padding: 0.55rem 0.8rem;
  border-radius: var(--aula-radius-md);
  font-size: var(--aula-text-sm); line-height: 1.45;
}
.aula-conversacion-mensaje--tutor {
  align-self: flex-start;
  background: var(--aula-bg-raised);
  color: var(--aula-text);
  border-bottom-left-radius: 0.25rem;
}
.aula-conversacion-mensaje--estudiante {
  align-self: flex-end;
  background: var(--aula-primary-base);
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}
.aula-conversacion-entrada {
  display: flex; align-items: center; gap: var(--aula-space-sm);
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--aula-border);
  background: var(--aula-bg-raised);
}
.aula-conversacion-campo {
  flex: 1; min-width: 0;
  padding: var(--aula-pad-control);
  border-radius: var(--aula-radius-full);
  background: var(--aula-bg-subtle);
  color: var(--aula-text-secondary);   /* con --aula-text-muted el marcador daba 3.49:1 en claro y 2.73:1 en oscuro */
  font-size: var(--aula-text-xs);
}
.aula-conversacion-enviar {
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  width: var(--aula-pill-sm); height: var(--aula-pill-sm);
  border-radius: 50%;
  background: var(--aula-primary-base);
  color: #fff;
  font-size: calc(var(--aula-pill-sm) * var(--aula-pill-glyph));
}

/* ── Cierre de la unidad ── (tarjeta destacada con el degradado del banner; color constante = dark-safe) */
.aula-destacado {
  display: flex; flex-direction: column; gap: var(--aula-space-md);   /* el aire entre rotulo, titulo, items y accion lo pone el contenedor */
  background: linear-gradient(180deg, var(--aula-accent-1), var(--aula-primary-base));
  border-radius: var(--aula-radius-md);
  padding: var(--aula-space-lg);
  color: #fff;
}
/* El titulo ya declara su tamano en data-variant y el atributo no admite dos valores: el color
   claro lo pone el contexto, que es lo que de verdad lo exige —la isla de marca—. */
.aula-destacado .aula-titulo { color: var(--aula-neutral-000); }
/* La pastilla del cierre vive sobre el degradado de marca, que es el mismo en claro y en oscuro:
   si sigue al tema, en oscuro se vuelve gris sobre morado. Va con el par constante de las islas
   de marca —blanco translucido y glifo blanco—, que da 6.06:1 en el extremo oscuro del degradado
   y 4.03:1 en el morado. */
.aula-destacado .aula-icono { background: var(--aula-bg-sobre-marca); color: #fff; }

/* En movil el icono no entra: es decorativo —un check que acompana al cierre— y al lado del
   parrafo le quitaba 52px de los 286 disponibles. Se retira y el texto ocupa el ancho entero;
   desde tablet vuelve, ya centrado con el bloque. */
.aula-destacado-item > .aula-icono { display: none; }
.aula-destacado-item {
  display: flex; gap: var(--aula-space-md); align-items: flex-start;
  padding: var(--aula-space-md);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--aula-radius-sm);
}
.aula-destacado-acciones { display: flex; flex-wrap: wrap; gap: var(--aula-space-sm); }
/* Botón claro sobre superficie de acento: texto en morado base constante (legible sobre blanco en ambos temas) */
.aula-boton-sobre-marca { background: #fff; color: var(--aula-primary-base) !important; }
/* Isla de marca deliberada: este botón vive sobre el banner, que es el mismo en claro y en oscuro,
   así que su hover no puede seguir a --aula-bg-accent, que ahora se oscurece con el tema. Valor
   literal y no token: es el único sitio que lo necesita. */
.aula-boton-sobre-marca:hover { background: color-mix(in srgb, var(--aula-primary-base) 10%, #fff); }

/* ── Consulta en ventana ── (glosario, recursos: material extenso que se consulta y se cierra.
   Es un <details> normal —Canvas no admite <script> ni <dialog>—, pero el cuerpo se saca del
   flujo, así que abrirlo no alarga la página ni mueve el sitio donde estaba el estudiante.
   El disparador es el propio <summary>: cerrado se ve como botón; abierto, sus pseudoelementos
   dibujan el fondo y la ✕, de modo que un clic en cualquiera de los dos lo cierra. El summary no
   sale del flujo, por eso la página de debajo no salta. El fondo va en neutral-950 y la ✕ en
   neutral-000, ambos constantes: la ventana se ve igual en claro y en oscuro, como las demás
   islas de marca, y no añade excepción al bloque oscuro.
   Límites asumidos: no cierra con Esc y no atrapa el foco, así que solo lleva material de
   consulta; el foco se queda en el summary y vuelve a su sitio al cerrar. */
/* Los bloques del cuerpo conservan su altura en vez de comprimirse: son ítems de un flex y, sin
   esto, encogen hasta caber —el cuerpo nunca desborda, no aparece la barra y el contenido queda
   recortado por el overflow del propio bloque—. Se vio en móvil apaisado, donde además el gesto
   de desplazar acababa moviendo la página del fondo. */
/* Cómo se sale, dicho en el propio panel: sin Esc ni foco atrapado, el usuario necesita que se
   le diga. Al pie y en el tamaño más pequeño de la escala, para no competir con el contenido. */
.aula-ventana > summary:focus-visible { outline: 2px solid var(--aula-primary); outline-offset: 2px; }
.aula-ventana > summary:hover .aula-boton-fantasma { border-color: var(--aula-primary); background: color-mix(in srgb, var(--aula-primary) 10%, transparent); }
.aula-ventana > summary { list-style: none; cursor: pointer; transition: border-color var(--aula-transition-fast), background var(--aula-transition-fast); }
.aula-ventana > summary::-webkit-details-marker { display: none; }
.aula-ventana[open] > summary::before {   /* fondo: cubre la página y cierra al tocar fuera */
  content: "";
  position: fixed; inset: 0; z-index: 900;
  background: color-mix(in oklch, var(--aula-neutral-950) 72%, transparent);
}
.aula-ventana[open] > summary::after {   /* cierre: esquina del viewport, como en un visor */
  content: "✕";
  position: fixed; z-index: 902; top: 1rem; right: 1rem;
  display: flex; align-items: center; justify-content: center;
  min-width: var(--aula-touch-target); min-height: var(--aula-touch-target);
  border-radius: var(--aula-radius-full);
  border: 1px solid color-mix(in oklch, var(--aula-neutral-000) 35%, transparent);
  background: color-mix(in oklch, var(--aula-neutral-950) 45%, transparent);
  font-size: var(--aula-text-lg); line-height: 1; font-weight: 700;
  color: var(--aula-neutral-000);
}
/* El disparador es una fila-enlace, y esa variante corre su chevron 0.2rem al pasar el cursor.
   Chevron y ✕ son el MISMO pseudo-elemento: al abrirse la ventana cambia de papel, pero seguia
   arrastrando el desplazamiento del anterior —medido: el boton de cierre se movia 3.2px en cuanto
   el cursor tocaba el velo, que tambien forma parte del summary—. Se prefija con :root para subir
   la especificidad a 0,4,1: la regla de la fila es 0,3,1 y aparece despues en el archivo. */
:root .aula-ventana[open] > summary:hover::after { background: var(--aula-neutral-950); translate: none; }
.aula-ventana > summary:hover,
.aula-ventana > summary:focus-visible {
  border-color: transparent;
  background: var(--aula-bg-hover);
}
.aula-ventana-disparadores { display: flex; flex-direction: column; gap: var(--aula-space-sm); }
.aula-ventana-panel {
  /* !important por lo mismo que el menú flotante: Canvas inyecta style="position: relative" en el
     marcado, y un estilo en línea gana a cualquier regla del archivo de tema. Sin él, el panel se
     queda en el flujo —alarga la tarjeta— y top/left lo desplazan en vez de centrarlo. */
  position: fixed !important; z-index: 901;
  /* Anclado arriba y no centrado en vertical: al abrir un termino el panel crece, y centrado
     crecia hacia los dos lados —medido: 50px de salto en movil y 31px en escritorio, con el
     texto moviendose bajo el dedo—. Desde arriba, el borde superior no se mueve y el panel
     crece solo hacia abajo hasta su tope. El 10dvh mas el 80dvh de alto maximo dejan aire
     por los dos lados. */
  top: 10dvh; left: 50%; translate: -50% 0;
  width: min(48rem, 92vw);   /* estable: con fit-content el panel se reajustaba al abrir un término.
                               48rem ≈ 768px: el tope por el que la línea de texto sigue siendo cómoda */
  max-height: 80dvh;
  overflow: hidden;   /* el panel no se desplaza: lo hace su cuerpo, y así la barra no parte el radio de las esquinas */
  display: flex; flex-direction: column;
  border-radius: var(--aula-radius-lg);
  border: 1px solid var(--aula-border);
  background: var(--aula-bg-raised);
  box-shadow: var(--aula-shadow-hard);
}
/* Cabecera, cuerpo y pie como en cualquier ventana: solo el cuerpo se desplaza, asi que con la
   lista mas larga siguen a la vista el titulo de lo que se consulta y la manera de salir. */
.aula-ventana-panel > .aula-bloque-cabecera { flex-shrink: 0; }
.aula-ventana-cuerpo > * { flex-shrink: 0; }
.aula-ventana-cuerpo {
  flex: 1; min-height: 0;   /* min-height: 0 es lo que le deja encoger y desplazarse dentro del flex */
  overflow-y: auto;
  scrollbar-gutter: stable;   /* la barra tiene su hueco: al aparecer no reajusta el contenido */
  display: flex; flex-direction: column; gap: var(--aula-space-md);
  padding: var(--aula-space-md);
}
/* Listas que traen su propio separador —los terminos del glosario y las referencias— van pegadas:
   el borde inferior de cada una es la linea que las divide. Con el gap del flex quedaban sueltas,
   el panel crecia sin necesidad y el realce del hover dejaba un hueco visible contra la de arriba.
   El relleno tambien se retira: cada fila ya trae el suyo y lo que pinta el hover es la fila entera. */
.aula-ventana-cuerpo:has(> .aula-desplegable[data-variant="lista"]),
.aula-ventana-cuerpo:has(> .aula-fila[data-variant="plana"]) { gap: 0; padding: 0; }
.aula-ventana-ayuda {
  flex-shrink: 0;   /* pie fijo: con la lista larga se quedaba fuera de la vista */
  margin: 0;
  padding: var(--aula-space-sm) var(--aula-space-md);
  border-top: 1px solid var(--aula-border);
  /* Texto pequeno sobre la superficie del panel: con --aula-text-muted daba 3.80:1 en claro y
     1.98:1 en oscuro, muy por debajo de AA. El secundario sube a 7.06:1 y 6.47:1. */
  font-size: var(--aula-text-2xs); color: var(--aula-text-secondary); text-align: center;
}

/* ── Menú flotante ── (inferior centrado. Translúcido; sólido al hover.
   Sin JS: son enlaces puros y las cabeceras tienen scroll-margin-top.) */
.aula-pagina:has(.aula-menu) { padding-bottom: 6rem; }   /* reserva espacio para no tapar el cierre. Medido: una fila son 54px (3.4rem) + 1rem de separación inferior; con las unidades en la barra pasa a dos filas, 104px (6.5rem), y ahí hacen falta 8rem */
.aula-menu {
  /* !important vence al style="position:relative" inline de Canvas. fixed = flotante real.
     Anclado por los dos lados y centrado con margen automático, no con left:50% + translate:
     anclado solo por la izquierda, el ancho que el navegador concede va del ancla al borde
     derecho —media pantalla—, así que en móvil la barra medía la mitad de lo que podía y se
     partía en tres filas. Medido a 390px: 195px y 3 filas antes, 366px y 2 filas ahora. */
  position: fixed !important; inset-inline: 0; bottom: 1rem;
  width: fit-content; margin-inline: auto;
  z-index: 100;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem;   /* compacto: el área táctil de 44px la da el propio ítem, no el hueco. Envuelve porque el número de unidades lo pone cada curso: con muchas, la barra pasa a dos filas en vez de desbordar el ancho */
  max-width: calc(100% - 1.5rem);
  padding: var(--aula-pad-floating);
  border-radius: var(--aula-radius-md);   /* menos radio que el banner: la barra es un control, y el perfil recto la separa de la ruta, donde todo lo numerado es redondo */
  border: 1px solid var(--aula-border);
  background: color-mix(in srgb, var(--aula-bg-raised) 48%, transparent);   /* translúcido en reposo */
  box-shadow: var(--aula-shadow-hard);
  transition: background var(--aula-transition-fast);
}
/* El desenfoque va en un pseudo y no en la barra: un elemento con backdrop-filter pasa a ser el
   bloque contenedor de sus descendientes fijos, y eso encogía el fondo de cierre del panel de
   unidades al tamaño de la propia barra —por eso tocar fuera no cerraba nada—. En el pseudo, el
   efecto es idéntico y la barra deja de secuestrar el posicionamiento fijo de lo que hay dentro. */
.aula-menu::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.aula-menu:hover { background: color-mix(in srgb, var(--aula-bg-raised) 85%, transparent); }   /* más sólido con el cursor encima */
.aula-menu-item {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--aula-space-sm);
  min-width: 2.25rem; min-height: var(--aula-touch-target);   /* 36x44: el alto sostiene el objetivo tactil comodo y el ancho se recorta al mismo 2.25rem que ya usaba el panel de unidades —sigue muy por encima del minimo de WCAG 2.5.8 (24px)—. Con 44 de ancho, siete items median 332px y la barra se partia en dos filas por debajo de 360px de pantalla: la flecha de siguiente caia sola a la segunda fila */
  padding: 0.4rem 0.55rem;   /* el área táctil la sostienen min-width y min-height, no este relleno */
  border-radius: var(--aula-radius-sm);   /* mismo radio que .aula-boton: el ítem se lee como botón */
  font-size: var(--aula-text-xs); font-weight: 600;
  color: var(--aula-text-secondary) !important;   /* !important: vence a .user_content a de Canvas, que si no pinta el ítem con su color de enlace */
  text-decoration: none !important;
  white-space: nowrap;
  transition: background var(--aula-transition-fast), color var(--aula-transition-fast);
}
.aula-menu-item i { font-size: 1.125em; }   /* razón respecto al texto del ítem, no tamaño absoluto: el ícono domina porque en móvil es lo único visible */
.aula-menu-item span { display: none; }   /* móvil: solo ícono para que quepan todos */
/* Unidad: pastilla con su número, el mismo lenguaje que el paso de la ruta —en este tema un
   número en pastilla ya significa «uno de una serie»—. Lleva delante la inicial de cómo está
   organizado el curso (U1, S1) para que no se confunda con la numeración de la ruta, que vive
   a un palmo. El radio completo y no el de botón: así se lee como serie y no como acción. */
.aula-menu-item[data-variant="unidad"] { font-size: var(--aula-text-sm); }


/* ── Unidades, tras un disparador ── (A PRUEBA, ver PRUEBAS.md, propuesta 9)
   Con seis unidades la barra ocupaba dos filas y 104px de alto en cualquier móvil. Aquí las
   unidades viven en un panel que abre sobre la barra: en reposo son cinco destinos en una fila
   y el salto directo a cualquier unidad sigue estando, a un toque.
   Misma técnica que la ficha de consulta: un <details> sin JS, con el propio <summary> haciendo
   de disparador y de zona de cierre. El fondo de cierre va transparente —esto es un menú, no una
   ventana: no tiene por qué oscurecer la página para recoger el toque de fuera. *   /* el panel se ancla aquí: si Canvas lo dejara en static, el panel buscaría otro contenedor *   /* el disparador se queda encendido mientras el panel está abierto: el mismo blanco constante que el hover de la barra */
.aula-menu-mas { position: relative !important; }
.aula-menu-mas > summary { list-style: none; cursor: pointer; }
.aula-menu-mas > summary::-webkit-details-marker { display: none; }
.aula-menu-mas[open] > summary { background: var(--aula-primary-base); color: #fff !important; }
.aula-menu-mas[open] > summary::before {
  content: "";
  position: fixed; inset: 0; z-index: 1;   /* sobre la página y bajo el panel: así el toque de fuera le llega y cierra. Con z-index negativo quedaba por debajo del contenido y el clic no lo alcanzaba */
}
.aula-menu-panel {
  position: absolute !important;   /* misma defensa que el panel de consulta: vence al style="position: relative" que inyecta Canvas */
  bottom: calc(100% + 0.5rem); left: 50%; translate: -50% 0;
  z-index: 2;   /* por encima del fondo de cierre */
  display: flex; gap: 0.1rem;   /* una sola fila, y el hueco al mínimo: las pastillas ya se separan por su propio relleno */
  padding: var(--aula-pad-floating);
  border-radius: var(--aula-radius-md);
  border: 1px solid var(--aula-border);
  background: var(--aula-bg-raised);
  box-shadow: var(--aula-shadow-hard);
}

/* Unidad en la que está el estudiante. Va en el secundario y no en el primario a propósito: la
   ruta de la página es morada de arriba abajo, así que un relleno morado aquí se leería como
   parte de lo mismo; el dorado dice «esto es otra cosa» sin salirse de la marca. El texto va en
   primary-base —el par dorado + morado del banner—, que da 4.9:1 sobre el relleno: AA para el
   cuerpo de 0.9rem. Ambos son constantes, así que se leen igual en claro y en oscuro y no suman
   una excepción al bloque oscuro. Va por atributo y no por una clase: aria-current es el que lo
   anuncia en el lector de pantalla, y data-current lo duplica porque el saneador de Canvas borra
   aria-current al guardar la página y el resaltado se perdía. */
.aula-menu-item[aria-current],
.aula-menu-item[data-current] {
  background: var(--aula-secondary-base);
  cursor: default;   /* el ítem actual no lleva href: el puntero no debe prometer navegación */
  color: var(--aula-primary-base) !important;   /* !important: el color base del ítem también lo es, para ganarle a Canvas */
}
.aula-menu-item:not([aria-current]):not([data-current]):hover,
.aula-menu-item:not([aria-current]):not([data-current]):focus-visible {
  background: var(--aula-primary-base);   /* color sólido al pasar el cursor / foco */
  color: #fff !important;   /* !important: vence al color base (que también es !important para ganarle a Canvas) → texto/ícono blanco sobre el fondo verde */
  outline: none;
}

/* ── Fila ── icono + cuerpo + accion en una linea. Absorbe seis componentes que solo se
   diferenciaban por su uso: descarga, foro, sesion en vivo, actividad, recurso y bienvenida. */
.aula-fila {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--aula-space-md);
  padding: var(--aula-space-row) var(--aula-space-md);
  border: 1px solid var(--aula-border);
  border-radius: var(--aula-radius-md);
  background: var(--aula-bg-raised);
}
/* El cuerpo apila sus partes: rotulo, titulo y texto quedan separados sin que cada uno lleve
   su propio margen, y los <span> dejan de caer en linea. */
.aula-fila-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--aula-space-xs); }
/* La accion baja a su linea en movil: en una sola, el texto quedaba en ~160px de 390. */
.aula-fila-accion { flex-shrink: 0; width: 100%; justify-content: center; }
/* Dos acciones en la misma fila: en movil se reparten el ancho en vez de quedarse centradas y
   pequenas, para que la fila se lea como las de una sola accion, que ocupan todo el ancho. */
.aula-fila-accion.aula-boton-fila > .aula-boton { flex: 1; justify-content: center; }

/* Enlace: la fila entera lleva a un sitio, sin boton dentro. Se anuncia en reposo —titulo en
   color de enlace y chevron— porque en tactil no hay hover que lo revele. */
.aula-fila[data-variant="enlace"] {
  text-decoration: none !important;
  transition: background var(--aula-transition-fast), border-color var(--aula-transition-fast);
}
.aula-fila[data-variant="enlace"] .aula-titulo { color: var(--aula-link); }
.aula-fila[data-variant="enlace"]::after {
  content: "\203A";
  font-size: 1.6rem; line-height: 1;   /* glifo, no texto: deja menos tinta que su caja */
  color: var(--aula-link);
  transition: translate var(--aula-transition-fast);
}
.aula-fila[data-variant="enlace"]:hover,
.aula-fila[data-variant="enlace"]:focus-visible { border-color: transparent; background: var(--aula-bg-hover); }
/* Sobre el tinte del hover la pastilla suave se apaga contra su propio fondo: se enciende, el
   mismo tratamiento que ya lleva el desplegable. */
.aula-fila[data-variant="enlace"]:hover .aula-icono,
.aula-fila[data-variant="enlace"]:focus-visible .aula-icono { background: var(--aula-primary); color: var(--aula-bg-raised); }
.aula-fila[data-variant="enlace"]:hover::after { translate: 0.2rem 0; }
.aula-fila[data-variant="enlace"]:focus-visible { outline: 2px solid var(--aula-primary); outline-offset: 2px; }

/* Destacada: tinte sobre la superficie, no un claro constante, para que se recalcule en oscuro. */
.aula-fila[data-variant="destacada"] { border-color: var(--aula-primary); background: var(--aula-bg-accent); }

/* Plana: dentro de un bloque que ya pone el marco. */
.aula-fila[data-variant="plana"] { border: 0; border-radius: 0; background: transparent; }
.aula-fila[data-variant="plana"] + .aula-fila[data-variant="plana"] { border-top: 1px solid var(--aula-border); }
/* Referencia con accion: en una lista lo que no puede pasar es que unas filas pongan el boton al
   lado y otras debajo segun lo larga que sea la cita —que es lo que hacia el envoltorio del flex—.
   La cita ocupa la linea y la accion va debajo, alineada al final; desde tablet caben las dos en
   la misma linea. Asi la lista se lee igual sea cual sea el largo de cada entrada. */
.aula-fila[data-variant="plana"] > .aula-texto { flex: 1 1 100%; }
.aula-fila[data-variant="plana"] > .aula-boton { margin-left: auto; }
/* En una referencia, la negrita es el titulo de la obra: va en el color de marca y en cursiva
   —la convencion bibliografica para el titulo— y asi se distingue del resto de la cita
   —autor, ano, publicacion— sin cambiar de tamano. */
.aula-fila[data-variant="plana"] b { color: var(--aula-primary); font-style: italic; }

/* ── Icono ── pastilla cuadrada. El glifo se deriva del tamano: una variable reescala todo y dos
   pastillas iguales no pueden acabar con glifos distintos. */
.aula-icono {
  --aula-icono-tam: var(--aula-pill-md);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--aula-icono-tam); height: var(--aula-icono-tam);
  border-radius: var(--aula-radius-sm);
  background: var(--aula-bg-accent);
  color: var(--aula-text-on-accent);   /* sigue al tema junto con su pastilla: 7.27:1 en claro y 6.36:1 en oscuro. Antes ambos eran constantes y en oscuro la pastilla clara destacaba más que el texto */
  font-size: calc(var(--aula-icono-tam) * var(--aula-pill-glyph));
}
.aula-icono[data-variant="grande"]  { --aula-icono-tam: var(--aula-pill-lg); }
.aula-icono[data-variant="pequeno"] { --aula-icono-tam: var(--aula-pill-sm); }
.aula-icono[data-variant="minimo"]  { --aula-icono-tam: var(--aula-pill-xs); }
/* Solido: sobre una superficie ya tenida, la pastilla suave desaparece. */
.aula-icono[data-variant="solido"] { background: var(--aula-primary); color: var(--aula-bg-raised); }   /* pastilla encendida: el par primary + superficie da 8.54:1 en claro y 6.82:1 en oscuro. Con el morado constante la pastilla se quedaba a 1.64:1 de la tarjeta en oscuro y desaparecia */
/* Suelto: acompana a un texto, sin pastilla. */
/* Secundario: el dorado de marca distingue lo optativo de lo evaluado sin tocar la estructura
   de la fila. Lo comparten la pastilla y la etiqueta para que se lean como una misma señal. */
.aula-icono[data-variant="secundario"],
.aula-etiqueta[data-variant="secundario"] { background: var(--aula-bg-secondary); color: var(--aula-secondary); }
.aula-icono[data-variant="suelto"] {
  color: var(--aula-primary);   /* sin pastilla debajo va sobre la superficie: aqui si sigue al tema */
  width: auto; height: auto;
  border-radius: 0; background: none;
  font-size: 0.85em;   /* el glifo llena su caja em: junto a texto hay que bajarlo */
}

/* ── Titulo ── nombra un bloque. El tamano es la variante, no un componente distinto. */
.aula-titulo {
  display: flex; align-items: center; gap: var(--aula-space-sm);   /* admite un icono delante sin componente aparte */
  margin: 0;
  font-size: var(--aula-text-md); font-weight: 700; line-height: 1.3;
  color: var(--aula-text);
}
/* En movil el titulo grande reparte sus partes en dos lineas: el saludo arriba y la frase debajo,
   las dos alineadas contra la pastilla, que abarca ambas. Va por rejilla y no por un <br>: el salto
   es presentacion, y asi el HTML pegado en el aula no cambia si manana se decide otra cosa. El
   texto que sigue al resalte es un item anonimo —no necesita etiqueta propia para colocarse. */
.aula-titulo[data-variant="grande"] {
  display: grid; grid-template-columns: auto 1fr; row-gap: 0;
  font-size: var(--aula-text-2xl); line-height: 1.2;
}
.aula-titulo[data-variant="grande"] > .aula-icono { grid-row: 1 / span 2; }
.aula-titulo[data-variant="seccion"] { margin-bottom: var(--aula-space-sm); font-size: var(--aula-text-xl); }   /* encabeza un bloque: necesita aire debajo */
/* Un titulo de seccion que no abre la tarjeta separa dos bloques: el aire va arriba, donde hace
   falta, y no lo pone el parrafo anterior —que pertenece al bloque de antes—. */
.aula-tarjeta > .aula-titulo[data-variant="seccion"]:not(:first-child) { margin-top: var(--aula-space-md); }
.aula-titulo[data-variant="pequeno"] { font-size: var(--aula-text-sm); }
/* Sobre fondo de marca: el texto va claro constante, como el resto de la isla. */
.aula-titulo[data-variant="inverso"] { color: var(--aula-neutral-000); }
/* Parte resaltada dentro de un titulo: va en el segundo color de marca para que destaque del
   resto del titulo. Usa --aula-secondary y no el -base: el amarillo puro da 1.75:1 sobre la
   tarjeta en claro —ilegible—, mientras que el token semantico da 9.38:1 y 8.64:1 en oscuro. */
.aula-resalte { color: var(--aula-secondary); }

/* ── Texto ── cuerpo de apoyo: descripciones y subtitulos. */
.aula-texto {
  margin: 0;
  font-size: var(--aula-text-sm); line-height: 1.55;
  color: var(--aula-text-secondary);
}
.aula-texto[data-variant="pequeno"] { font-size: var(--aula-text-xs); line-height: 1.45; }
.aula-texto[data-variant="grande"] { max-width: 65ch; font-size: var(--aula-text-md); line-height: 1.6; }   /* max-width: es el unico parrafo que ocupa el ancho entero de su fila, y sin tope la linea llegaba a ~180 caracteres en escritorio. Literal y no token: no hay otro sitio con el que pueda desalinearse */
.aula-texto[data-variant="inverso"] { color: var(--aula-text-on-brand); }

/* Titulo y distintivo en la misma linea, dentro del cuerpo de una fila. */
.aula-fila-encabezado { display: flex; align-items: center; flex-wrap: wrap; gap: var(--aula-space-sm); }
/* El titulo va sin margen tambien en el aula: .aula-titulo ya lo declara, pero .user_content h2
   de Canvas le gana en especificidad y se lo devuelve. Como aqui se centran cajas y no lineas de
   texto, ese margen corria el eje del titulo y la etiqueta quedaba 4px descentrada respecto a el.
   Se prefija con .aula-pagina para ganarle a Canvas, igual que en los parrafos de la tarjeta. */
.aula-pagina .aula-fila-encabezado > .aula-titulo { margin: 0; }

/* El icono del aviso identifica el bloque: por eso pesa mas que un glifo en linea, que va al
   0.85em para no descuadrar la frase. */
.aula-aviso .aula-icono { font-size: 1.5em; }

/* ── Bloque ── marco con cabecera y cuerpo. Absorbe los dos contenedores que antes servian para
   recursos y para glosario: misma estructura, distinto contenido. */
.aula-bloque {
  border: 1px solid var(--aula-border);
  border-radius: var(--aula-radius-md);
  background: var(--aula-bg-raised);
  overflow: hidden;
}
.aula-bloque-cabecera {
  display: flex; align-items: center; gap: var(--aula-space-row);
  padding: var(--aula-space-row) var(--aula-space-md);
  border-bottom: 1px solid var(--aula-border);
}
.aula-bloque-cuerpo { display: flex; flex-direction: column; }
.aula-bloque-cuerpo > * { flex-shrink: 0; }
.aula-bloque-cuerpo > .aula-lista { padding: var(--aula-space-md); }
/* Desplazable: el cuerpo acota su alto y se desplaza dentro. El velo del pie va superpuesto
   —de fondo queda detras del texto y solo tine la fila— y el cuerpo le reserva el mismo aire
   debajo del ultimo item, para que al llegar al final se desvanezca sobre el fondo y no sobre
   una linea de texto. Sin scrollbar-gutter: reservaba el canal derecho incluso sin scroll. */
.aula-bloque[data-variant="desplazable"] { position: relative; }
.aula-bloque[data-variant="desplazable"] .aula-bloque-cuerpo {
  max-height: 18rem; overflow-y: auto;
  padding-bottom: var(--aula-velo);
}
/* Barra de desplazamiento de las tres zonas que se desplazan por dentro —el bloque desplazable,
   el chat y el cuerpo de la ventana—: la nativa mide ~15px y en oscuro el navegador la pinta clara, asi que era lo que mas
   destacaba de la seccion. `thin` la baja a ~8px y el pulgar se deriva del color de texto, que si
   se reasigna entre temas: el mismo 30% da un gris discreto sobre fondo claro y sobre fondo
   oscuro, sin necesidad de excepcion. Canal transparente: el hueco ya lo da la superficie. */
.aula-bloque[data-variant="desplazable"] .aula-bloque-cuerpo,
.aula-conversacion-cuerpo,
.aula-ventana-cuerpo {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--aula-text) 30%, transparent) transparent;
}
.aula-bloque[data-variant="desplazable"]::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: var(--aula-velo);
  background: linear-gradient(to bottom, transparent, var(--aula-bg-raised));
  pointer-events: none;
}

/* ── Prosa ── zona de parrafos cuyo numero depende del curso. El id va en el contenedor y no en
   cada parrafo: la migracion vacia el bloque y mete los que haga falta, sin tener que saber
   cuantos habia ni etiquetarlos uno a uno. Los <p> no llevan clase: los estiliza el contenedor. */
.aula-prosa { display: flex; flex-direction: column; gap: var(--aula-space-row); }   /* parrafos del mismo texto: menos aire que entre bloques */
.aula-prosa > p {
  margin: 0;
  font-size: var(--aula-text-sm); line-height: 1.55;
  color: var(--aula-text-secondary);
}

/* ── Rotulo ── versalitas que etiquetan lo que viene debajo. */
.aula-rotulo {
  margin: 0;
  font-size: var(--aula-text-2xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--aula-primary);
}
.aula-rotulo[data-variant="neutro"]  { color: var(--aula-text-secondary); }
.aula-rotulo[data-variant="grupo"]   { margin-bottom: var(--aula-space-sm); color: var(--aula-text-secondary); }   /* encabeza una rejilla o una lista */
/* En línea: encabeza una lista dentro del contenido de una actividad. Conserva el peso y el color
   de marca del rótulo, pero no su caja: hereda el tamaño que Canvas da al contenido, porque a
   0.7rem sobre un texto de 16px se leía como un pie y no como el encabezado de lo que sigue. */
.aula-rotulo[data-variant="linea"]   { font-size: inherit; letter-spacing: normal; text-transform: none; }
.aula-rotulo[data-variant="inverso"] { color: var(--aula-secondary-base); }   /* sobre fondo de marca: el mismo tono del icono de la meta, que es el distintivo con el que se destaca un texto */

/* ══════════════════════════════════════════════════════════════════════════
   MEDIA QUERIES (mobile first)
══════════════════════════════════════════════════════════════════════════ */

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .aula-rejilla { grid-template-columns: repeat(2, 1fr); }

  /* Desde tablet el titulo grande cabe entero en una linea: vuelve a la fila unica. */
  .aula-titulo[data-variant="grande"] { display: flex; }

  /* Desde tablet la cita y su accion vuelven a la misma linea. La base es 0 y no auto: con auto
     el flex parte del ancho del texto —que en una cita larga es toda la fila— y el boton bajaba
     igual; con 0 la cita se reparte el espacio que queda tras reservar el boton. */
  .aula-fila[data-variant="plana"] > .aula-texto { flex: 1 1 0; min-width: 0; }

  /* El icono del destacado vuelve, y centrado: con el texto en varias lineas, arriba quedaba
     colgando del primer renglon en vez de acompanar al bloque. */
  .aula-destacado-item { align-items: center; }
  .aula-destacado-item > .aula-icono { display: inline-flex; }

  /* La accion vuelve a su tamano: el 100% es solo para movil, donde en una linea el texto
     quedaba en ~160px de 390. Es piso y no ancho fijo: si el texto crece, el boton crece. */
  .aula-fila-accion { width: auto; min-width: 7.5rem; }
  .aula-fila-accion.aula-boton-fila > .aula-boton { flex: 0 0 auto; }

  /* ── Banner con imagen ── (el banner crece con la pantalla, así que el título cede
     porcentaje: conserva un ancho de línea legible y deja ver más foto. La zona segura va
     siempre por delante del ancho del contenido, para que el texto no caiga donde el
     degradado ya se abre) */
  .aula-banner[data-variant="imagen"] { --aula-banner-safe: 58%; }
  .aula-banner[data-variant="imagen"] .aula-banner-content { max-width: 54%; }

  /* ── Banner ── (diagonal oscuro-izquierda; dorado arriba-derecha; texto acotado) */
  /* El degradado y el destello del banner ya no se rehacen por breakpoint: el fondo es el mismo
     token en todos los anchos, así que no puede quedar uno actualizado y otro con el valor viejo
     —que es justo lo que pasaba: aquí seguía el arranque en accent-1, el primario con un 45% de
     negro, y a partir de 768px pisaba al degradado de marca. */
  .aula-banner-content { max-width: 60%; }

  /* ── Ruta de trabajo, variante 2×2 ── (las dos columnas entran desde tablet) */
  .aula-pasos[data-variant="2x2"] { --aula-roadmap-cols: repeat(2, 1fr); }

  /* ── Video en 2 columnas ── (video a la izquierda, texto a la derecha, centrado vertical) */
  .aula-medio-par { flex-direction: row; align-items: center; gap: var(--aula-space-lg); }
  .aula-medio-par .aula-medio { flex: 1.3; min-width: 0; }
  .aula-medio-par .aula-medio-texto { flex: 1; min-width: 0; }

  /* ── Menú flotante ── (tablet+: se muestran las etiquetas junto al ícono) */
  .aula-menu-item span { display: inline; }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  /* ── Apartados en columnas ── (solo los que lo piden con data-variant, no todos: un apartado
     con un único bloque se lee mejor a lo ancho. auto-fit + minmax y no dos columnas fijas
     porque dentro del aula el contenido no tiene el ancho de la pantalla —la navegación del
     curso se lleva su parte—: si no caben dos columnas de verdad, vuelve sola a una.
     El orden del DOM no se altera, así que lo que ve el ojo y lo que recorre el teclado
     siguen coincidiendo. Sin align-items: las celdas de una misma fila se estiran a la altura
     de la más alta, que es el reparto por defecto de la rejilla; dos tarjetas contiguas con el
     borde a distinta altura se leen como un desajuste y no como contenidos de distinto largo. */
  .aula-secuencia > li > .aula-desplegable > .aula-desplegable-cuerpo[data-variant="columnas"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  }
  /* La entradilla dice qué hacer con el apartado: parte siempre de lado a lado. */
  .aula-secuencia > li > .aula-desplegable > .aula-desplegable-cuerpo[data-variant="columnas"] > .aula-intro { grid-column: 1 / -1; }
  /* El contenedor de disparadores desaparece de la rejilla y deja que sus fichas se repartan
     como un elemento más, en vez de ocupar una sola celda apiladas. */
  .aula-secuencia > li > .aula-desplegable > .aula-desplegable-cuerpo[data-variant="columnas"] > .aula-ventana-disparadores { display: contents; }
  /* La ficha visible es el <summary>, no el <details> que ocupa la celda: sin esto, dos fichas
     contiguas con texto de distinto largo acaban con el borde a distinta altura. */
  [data-variant="columnas"] .aula-ventana > summary { height: 100%; }
  /* El distintivo acompaña al título, no compite con él: junto a un texto que empieza en la
     misma línea, el relleno de color pesa más que la propia palabra. Se queda el contorno. */

  /* El chevron ocupa la tercera pista de la rejilla, a la altura del título. */
  [data-variant="columnas"] .aula-ventana:not([open]) > summary::after { grid-column: 3; grid-row: 1; align-self: center; }
  /* ── Banner con imagen ── (el banner crece con la pantalla, así que el título cede
     porcentaje: conserva un ancho de línea legible y deja ver más foto. La zona segura va
     siempre por delante del ancho del contenido, para que el texto no caiga donde el
     degradado ya se abre) */
  .aula-banner[data-variant="imagen"] { --aula-banner-safe: 69%; }
  .aula-banner[data-variant="imagen"] .aula-banner-content { max-width: 65%; }

  /* ── Banner ── (desktop: sin separación superior) */
  .aula-banner { margin-top: 0; }

  /* ── Menú flotante ── (desktop: ítems más compactos.
     El objetivo táctil de 44px solo hace falta en pantallas táctiles; aquí hay puntero,
     así que se reduce la altura para que el realce del hover no se vea desproporcionado.) */
  .aula-menu { padding: 0.25rem; }
  .aula-menu-item { min-height: 2.1rem; padding: 0.25rem 0.6rem; }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* ── Banner con imagen ── (el banner crece con la pantalla, así que el título cede
     porcentaje: conserva un ancho de línea legible y deja ver más foto. La zona segura va
     siempre por delante del ancho del contenido, para que el texto no caiga donde el
     degradado ya se abre) */
  .aula-banner[data-variant="imagen"] { --aula-banner-safe: 64%; }
  .aula-banner[data-variant="imagen"] .aula-banner-content { max-width: 60%; }

  /* ── Banner ── (texto un poco más ancho) */
  .aula-banner-content { max-width: 80%; }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  /* ── Banner con imagen ── (último escalón del porcentaje del título) */
  .aula-banner[data-variant="imagen"] { --aula-banner-safe: 59%; }
  .aula-banner[data-variant="imagen"] .aula-banner-content { max-width: 55%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TOOLTIP DEL MENÚ FLOTANTE — solo dispositivos con puntero
   Acotado a los ítems sin etiqueta visible (Inicio, Anterior, Siguiente): son
   los únicos que no llevan <span>, y `:not(:has(span))` los detecta sin marcar
   nada en el HTML. Los demás ítems ya muestran su texto desde 768px.

   · El texto sale de `attr(aria-label)`, que el ítem ya tiene → cero atributos
     nuevos en el HTML de contenido (el mismo que va a migración).
   · No hay doble lectura en lector de pantalla: el aria-label gana el cálculo
     del nombre accesible, así que el pseudo-elemento no se suma a él.
   · `(hover: hover)` y no un breakpoint de ancho: la condición real es tener
     puntero, no el tamaño. En táctil el menú se queda en modo ícono a
     propósito (el ancho no alcanza para los textos) y así se evita el
     "hover pegado" que deja el tooltip abierto tras tocar un ítem.
   · Se anima `translate`, no `transform`, igual que la entrada de secciones.
   · `visibility` además de `opacity`: mientras está oculto queda fuera del
     árbol de accesibilidad y no intercepta el puntero.
══════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) {
  .aula-menu-item:not(:has(span)) { position: relative; }
  .aula-menu-item:not(:has(span))::after {
    content: attr(aria-label);
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 50%;
    translate: -50% 0.25rem;
    z-index: 1;
    padding: 0.3rem 0.55rem;
    border-radius: var(--aula-radius-sm);
    background: var(--aula-primary-base);   /* constante en light/dark, como las demás islas de marca */
    color: #fff;
    box-shadow: var(--aula-shadow-hard);
    font-size: var(--aula-text-2xs);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--aula-transition-fast), translate var(--aula-transition-fast), visibility var(--aula-transition-fast);
  }
  .aula-menu-item:not(:has(span)):hover::after,
  .aula-menu-item:not(:has(span)):focus-visible::after {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
  }
}

/* ═══ CANVAS-OVERRIDES-DESKTOP · INICIO (correcciones del UI del aula; el compilador las deja solo en desktop.css) ═══ */

/* Migas de pan: fondo transparente para integrarse con el fondo de la página (Canvas lo pone blanco) */
#breadcrumbs { background-color: transparent; }

/* Barra de encabezado (.header-bar): fondo transparente para integrarse con la página (Canvas lo pone blanco).
   Solo se modifica el fondo; el resto de estilos de Canvas (min-height, padding, flex…) se conservan.
   !important para ganarle a la regla de Canvas (misma especificidad 0,1,0). */
.header-bar { background-color: transparent !important; }

/* Contenedor de grupos de ítems (.item-group-container): fondo transparente (Canvas lo pone blanco).
   Solo se modifica el fondo; el resto (padding, border) se conserva. */
.item-group-container { background-color: transparent !important; }

/* Descripción de la tarea (vista docente): quitar borde y padding para integrarla con el diseño.
   Se conservan overflow-y, border-radius y resize. Misma especificidad que Canvas (1,2,0) → gana por orden de carga. */
#assignment_show .description.teacher-version { padding: 0; border: 0; }

/* Descripción del quiz (vista docente): quitar borde y padding, y soltar la altura fija
   (Canvas fija height:200px + overflow-y:auto) para que se muestre toda la descripción sin scroll interno. */
#quiz_show .description.teacher-version { padding: 0; border: 0; height: auto; overflow-y: visible; }

/* Ícono de la nav de cursos (#section-tabs): quitar el fondo blanco del .nav-icon SOLO en ese menú.
   Acotado a #section-tabs (especificidad 1,1,0 > .nav-icon 0,1,0) para no afectar otros .nav-icon. */
#section-tabs .nav-icon { background-color: transparent; }

/* Botón "Publicado" del curso: quitar el fondo blanco del contenido.
   NO se usa la clase con hash (.css-XXXX-baseButton__content: cambia entre versiones de Canvas);
   se apunta por el id estable del contenedor + el sufijo estable de la clase. */
#course_publish_button [class*="baseButton__content"] { background-color: transparent; }

/* Navegación de módulos (Prev/Siguiente): quitar el fondo blanco del contenedor.
   El fondo lo pone una "View" genérica con hash usada en TODO Canvas
   → NO se targetea; se apunta por el id estable #module_sequence_footer_container + su div hijo directo. */
#module_sequence_footer_container > div { background-color: transparent; }

/* Footer de navegación de módulos (variante clásica .module-sequence-footer): quitar el fondo blanco del contenido.
   Clases estables; solo se cambia el fondo (se deja el border-top). Gana por igual especificidad + orden (el CSS del tema carga tras el core). */
.module-sequence-footer .module-sequence-footer-content { background-color: transparent; }

/* Con el menu del curso plegado el contenido gana casi 200px: cabe una columna mas. Canvas no
   marca ese estado con una clase, sino cambiando el style inline de #left-side entre
   display:block y display:none, asi que se lee ese atributo. Solo vive en el archivo de
   escritorio: en movil el menu no existe. */
body:has(#left-side[style*="display: none"]) .aula-rejilla,
body:has(#left-side[style*="display:none"]) .aula-rejilla { grid-template-columns: repeat(3, 1fr); }

/* ═══ CANVAS-OVERRIDES-DESKTOP · FIN ═══ */