/* =========================================================
   AULA — hoja propia del curso. Fuente: mock-curso-aula.html
   Se carga SOLO en páginas con la plantilla page-curso.php
   (ver correctores_aula_enqueue en functions.php).

   Del sitio se conservan SOLO los tokens de color y las tres
   tipografías. La interfaz es otra cosa a propósito.
   Semántica de color, deliberada:
     índigo  = navegación, estado y progreso
     ámbar   = tu trabajo (fichas, dossier, diagnóstico)
     grises  = estructura

   DOS REGLAS AL EDITAR ESTE FICHERO:
   1. Todo va prefijado con .aula. No es cosmética: ds.css aplica
      un reset sobre .dsx (.dsx a{color:inherit}, .dsx p{margin:0},
      .dsx ul{list-style:none}, .dsx .btn{...}) con especificidad
      (0,1,1)/(0,2,0) que gana a un selector desnudo. Sin el prefijo,
      media hoja no pinta.
   2. Los tokens NO se redeclaran con hex: se mapean a los de ds.css,
      que es la fuente de verdad. Si allí cambia el índigo, cambia aquí.
   ========================================================= */

.aula{
  --ink:var(--ds-ink);
  --ink-soft:var(--ds-ink-soft);
  --ink-faint:var(--ds-ink-faint);
  --line:var(--ds-line);
  --paper:var(--ds-bg);
  --canvas:var(--ds-bg-alt);
  --nav:var(--ds-tech);
  --nav-soft:var(--ds-tech-soft);
  --work:var(--ds-human);
  --work-soft:var(--ds-human-soft);
  /* ámbares oscuros para texto sobre --work-soft: no existen en ds.css */
  --work-ink:#8a5b12;
  --work-ink-2:#6d4a10;
  --work-ink-3:#5f400d;
  --r:var(--ds-radius);
  --r-sm:var(--ds-radius-sm);
  --display:var(--ds-display);
  --sans:var(--ds-sans);
  --mono:var(--ds-mono);
}

html{scroll-behavior:smooth}

.aula{background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased}
.aula *{box-sizing:border-box}
.aula h1,.aula h2,.aula h3,.aula h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;margin:0}
.aula a{color:var(--nav);text-decoration:none}
.aula :focus-visible{outline:2px solid var(--nav);outline-offset:3px}

/* Reset acotado — NO es cosmética, es obligatorio.
   El theme padre (orbital/main.css) y la hoja inline del Customizer declaran
   estilos por TIPO de elemento: p{font-size:1.2rem;line-height:1.7;color:#183153},
   p,ul,ol,blockquote{1.125rem}, h1{3rem}, h2{2.25rem}… Una regla directa sobre el
   elemento gana siempre al valor heredado de .aula, así que sin esto el cuerpo
   del módulo sale a 19,2px en azul marino. ds.css hace exactamente lo mismo
   para .dsx; el mock no lo necesitaba por ser un fichero suelto.
   Va ANTES que los componentes: cualquier .aula .algo p (0,2,1) lo sobreescribe. */
.aula p,.aula ul,.aula ol,.aula li,.aula blockquote,.aula figure,.aula dl,.aula table{font-size:inherit;line-height:inherit;color:inherit;margin:0}
.aula h1,.aula h2,.aula h3,.aula h4{font-size:inherit;line-height:inherit;color:inherit}
.aula ul,.aula ol{padding:0;list-style:none}
/* orbital/main.css da a los botones line-height heredado y un margin propio */
.aula button{margin:0;line-height:normal}
/* orbital/main.css estiliza los campos con
   input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=file])
   — especificidad (0,4,1), que gana a .aula .ficha input (0,2,1). Para recuperar
   el control hay que igualar la forma del selector, no subir clases. */
.aula input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.aula textarea,.aula select{width:100%;font-family:var(--sans);font-size:15.5px;line-height:normal;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:none;background:var(--paper);color:var(--ink)}

.aula .mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- barra del aula (no es el header del sitio) ---------- */
.aula .aula-bar{position:sticky;top:0;z-index:20;background:var(--ink);color:#fff}
.aula .aula-bar .in{max-width:1320px;margin:0 auto;padding:0 28px;height:58px;display:flex;align-items:center;gap:22px}
.aula .aula-brand{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-weight:600;font-size:15.5px;color:#fff}
.aula .aula-brand small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--work)}
.aula .aula-back{margin-left:6px;font-size:13px;color:rgba(255,255,255,.5)}
.aula .aula-back:hover{color:#fff}
.aula .aula-meter{margin-left:auto;display:flex;align-items:center;gap:12px}
.aula .aula-meter .track{display:block;width:150px;height:5px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
/* display:block es imprescindible: .fill es un <span> y, en línea, ignora
   width/height — la barra se quedaba a cero por mucho que el JS la moviera. */
.aula .aula-meter .fill{display:block;height:100%;background:var(--nav);width:0;transition:width .3s ease}
.aula .aula-meter .pct{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.7);min-width:34px}
.aula .aula-user{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.22);font-size:13.5px;font-weight:600;color:#fff}
.aula a.aula-user:hover{border-color:#fff}
/* Cuando esta página no tiene trabajo al que saltar (el índice del curso), el
   marco pinta el mismo rótulo en un <span>: tiene que verse que no es pulsable,
   porque un botón que no hace nada al pulsarlo no se distingue de uno roto. */
.aula span.aula-user{border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.6);cursor:default}
.aula .aula-user .dot{width:22px;height:22px;border-radius:50%;background:var(--work);color:var(--ink);display:grid;place-items:center;font-family:var(--mono);font-size:11px}

/* ---------- estructura de aula ---------- */
.aula .shell{max-width:1320px;margin:0 auto;padding:26px 28px 60px;display:grid;grid-template-columns:296px minmax(0,1fr);gap:26px;align-items:start}
/* Los tres topes de anchura de una unidad, juntos y en un solo sitio para poder
   cambiarlos según el estado del raíl (ver el bloque de is-rail-oculto, abajo).
   Son tres y no uno porque cada uno responde a algo distinto: el cuerpo a la
   medida de lectura, la entradilla a la suya —va en otro cuerpo—, y el título a
   una decisión de composición: 24ch es lo que hace que un título largo caiga en
   dos líneas en vez de en una interminable a 42px. */
.aula .shell{
  --medida:68ch;          /* párrafos, listas y figuras del cuerpo */
  --medida-goal:66ch;     /* entradilla de la cabecera */
  --medida-titulo:24ch;   /* título: composición, no lectura (ver arriba) */
  --medida-regla:62ch;    /* [aula_regla], en las 17 unidades */
  --medida-ej:62ch;       /* intro de los ejercicios */
  --medida-exit:74ch;     /* párrafos del cierre */
}

/* ---------- panel lateral ---------- */
/* El panel es más alto que una ventana de portátil (barra 58 + 8 módulos +
   dossier). Sin límite, sticky lo ancla arriba y el dossier queda cortado por
   abajo, inalcanzable. Se limita a la altura visible y se le da scroll propio;
   overscroll-behavior evita que al llegar al final arrastre la página. */
.aula .rail{position:sticky;top:84px;max-height:calc(100vh - 84px - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;display:flex;flex-direction:column;gap:14px}
/* la barra de scroll del panel, discreta (WebKit) */
.aula .rail::-webkit-scrollbar{width:8px}
.aula .rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.aula .rail::-webkit-scrollbar-track{background:transparent}
/* los hijos no deben encogerse para caber: si no cabe, se scrollea */
.aula .rail > *{flex:none}
.aula .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.aula .rail-head{padding:20px 20px 18px}
.aula .rail-head .mono{color:var(--ink-faint);display:block;margin-bottom:9px}
.aula .rail-head h2{font-size:19px;line-height:1.24}
/* Nota junto a la barra de "Tu avance" (La segunda novela, 7-oct-2026). */
.aula .hoja-prog .nota{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:6px;line-height:1.4}
.aula .rail-prog{margin-top:16px}
.aula .rail-prog .lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:7px}
.aula .rail-prog .track{height:6px;border-radius:999px;background:var(--canvas);overflow:hidden}
.aula .rail-prog .fill{display:block;height:100%;width:0;background:var(--nav);transition:width .3s ease}

.aula .mods{list-style:none;margin:0;padding:8px}
.aula .mods a{display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:center;padding:9px 10px;border-radius:var(--r-sm);color:var(--ink-soft)}
.aula .mods a:hover{background:var(--canvas)}
.aula .mods .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;background:var(--canvas);color:var(--ink-faint);border:1px solid var(--line)}
.aula .mods .t{font-size:14.5px;font-weight:600;line-height:1.35}
/* módulo que todavía no existe: se ve, no se pulsa y no recibe foco */
.aula .mods .no-link{display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:center;padding:9px 10px;border-radius:var(--r-sm);color:var(--ink-faint);cursor:default}
.aula .mods .is-pendiente .n{opacity:.55}
.aula .mods .is-now a{background:var(--nav-soft);color:var(--nav)}
.aula .mods .is-now .n{background:var(--nav);color:#fff;border-color:var(--nav)}
.aula .mods .is-done .n{background:var(--nav-soft);color:var(--nav);border-color:var(--nav-soft)}

/* Tarjeta del trabajo del alumno. Se llamaba .dossier, que es el nombre que
   tiene en el curso de Amazon; ahora la pinta el marco compartido y la misma
   tarjeta dice «Tus ejercicios» en el curso de corrección. El nombre de la
   clase es el de la PIEZA, no el del curso: la variante viaja en .es-dossier /
   .es-ejercicios por si alguna vez hay que distinguirlas, no en la clase base. */
.aula .trabajo{padding:18px 20px;background:var(--work-soft);border-color:var(--work-soft)}
.aula .trabajo .mono{color:var(--work-ink);display:block;margin-bottom:8px}
.aula .trabajo p{margin:0 0 14px;font-size:14.5px;color:var(--work-ink-2)}
.aula .trabajo .count{font-family:var(--display);font-size:26px;font-weight:600;color:var(--ink);display:block;margin-bottom:2px}
.aula .trabajo .trabajo-link{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--work-ink)}
/* Sin enlace (el índice del curso no tiene trabajo al que saltar) el párrafo
   es lo último de la tarjeta: sin esto se queda el hueco del enlace que no hay. */
.aula .trabajo p:last-child{margin-bottom:0}

/* ---------- lienzo del módulo ---------- */
.aula .sheet{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:38px 44px 34px}
.aula .mod-num{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;color:var(--nav);display:block;margin-bottom:14px}
/* "Tu avance" del módulo, entre el rótulo y el H1. Compacta a propósito: a
   ancho completo, bajo un H1 grande, una barra parece un separador.
   El rótulo va en --ink-soft y no en el --ink-faint del panel: sobre blanco
   ese gris solo da 2,85:1, por debajo del 4,5:1 que pide un texto de 11px. */
.aula .hoja-prog{max-width:290px;margin:0 0 20px}
.aula .hoja-prog .lbl{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:7px}
.aula .hoja-prog .track{height:6px;border-radius:999px;background:var(--canvas);overflow:hidden}
.aula .hoja-prog .fill{display:block;height:100%;width:0;background:var(--nav);transition:width .3s ease}
/* al restaurar el progreso guardado, las barras deben aparecer ya en su sitio */
.aula.sin-transicion .hoja-prog .fill,
.aula.sin-transicion .aula-meter .fill{transition:none}
.aula .sheet h1{font-size:clamp(30px,3.4vw,42px);line-height:1.1;max-width:var(--medida-titulo,24ch)}
/* La entradilla iba en --ink-soft (#585C67), el mismo gris que cualquier texto
   secundario, y se leía como uno más. Sube un punto —no hasta --ink, que es el
   negro del cuerpo y la convertiría en un párrafo destacado— con un valor
   intermedio. Se sube el COLOR y no el peso: en negrita competiría con el h1
   que tiene justo encima. */
.aula{ --ink-entradilla:#3A3E4A; }
/* Subtítulo de una página de entrada de curso (`<p class="subtitulo">` entre el h1 y la
   entradilla). Ningún curso lo tenía: es pieza de plataforma, disponible para todos. */
.aula .sheet .subtitulo{margin:12px 0 0;font-family:var(--display);font-size:clamp(18px,2vw,22px);line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--ink-soft);max-width:var(--medida-goal,66ch)}
/* Carátula de la entrada (imagen justo después del subtítulo, ver
   entrada_curso_nuevo() en convertir_unidades.py): pegada al texto sin
   margen propio, se separa aquí. Por el hermano adyacente y no en el <img>
   suelto, para no afectar a las infografías de dentro de los módulos, que no
   van detrás de un subtítulo nunca. */
.aula .sheet .subtitulo + img{display:block;margin:28px 0 30px;border-radius:var(--r)}
.aula .sheet .goal{margin:18px 0 0;font-size:18.5px;line-height:1.6;color:var(--ink-entradilla);max-width:var(--medida-goal,66ch)}
.aula .chips{display:flex;flex-wrap:wrap;gap:8px;row-gap:9px;margin-top:22px;padding-bottom:26px;border-bottom:1px solid var(--line);list-style:none;padding-left:0}
.aula .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--canvas);color:var(--ink-soft)}
.aula .chip.work{background:var(--work-soft);color:var(--work-ink)}
/* Etiquetas de tema de «La segunda novela»: el índigo de la paleta (--ds-tech),
   que ds.css reserva para «curso». Contraste 4,96:1 (AA). Los otros dos cursos
   pintan sus etiquetas con `.chip.work` (ámbar) y no cambian. */
.aula .chip.curso-indigo{background:var(--nav-soft);color:var(--nav)}

/* [aula_tiempo]: mismo lenguaje visual que .chip, pero suelta dentro de un
   apartado (no en la fila de .chips de la cabecera) — por eso lleva su
   propio margen inferior en vez del gap de .chips. 8-oct-2026, AULA Empresas. */
.aula .aula-tiempo{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--canvas);color:var(--ink-soft);margin:0 0 16px}
.aula .aula-tiempo svg{width:13px;height:13px;stroke:currentColor;fill:none;flex:none}

/* ---------- índice interno de apartados ----------
   Pieza de plataforma: la pinta aula.js en cualquier curso cuya pieza pase del
   umbral de apartados (data-sumario-umbral). Va entre los chips y el camino,
   que es donde se decide si bajar o no.

   En ÍNDIGO y no en ámbar: es navegación y estado de lectura, como el raíl y
   las barras, no trabajo del alumno. Y sobre --canvas, no sobre --paper: la
   hoja del módulo ya es blanca, y un bloque blanco sobre blanco con borde se
   lee como el principio del contenido en vez de como un índice.

   La rejilla es auto-fill y no de dos columnas fijas: con nueve apartados de
   título corto sobra sitio para dos columnas, con once títulos largos no, y
   quién decide eso es el ancho disponible. */
.aula .sumario{margin:26px 0 2px;padding:16px 18px;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r)}
.aula .sumario .sum-tit{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 0 10px;padding:0 8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.aula .sumario .sum-cuenta{text-transform:none;letter-spacing:.04em;color:var(--nav)}
.aula .sumario ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px 16px}
.aula .sumario li > *{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:baseline;padding:7px 8px;border-radius:var(--r-sm);font-size:14.5px;line-height:1.4;color:var(--ink-soft)}
.aula .sumario li > span{cursor:default}   /* apartado sin id: no hay adónde ir */
.aula .sumario li > a:hover{background:var(--paper);color:var(--ink)}
.aula .sumario li .n{font-family:var(--mono);font-size:11px;color:var(--ink-faint);text-align:right}
/* Leído: el mismo índigo del resto del progreso, y un tick. No se atenúa el
   título —un apartado leído sigue siendo al que quieres volver—, solo se marca. */
.aula .sumario li.is-done .n{color:var(--nav)}
.aula .sumario li.is-done .t::after{content:" ✓";font-family:var(--mono);font-size:12px;color:var(--nav)}

/* ---------- control de tamaño de lectura ----------
   Va en la cabecera de la hoja, a la derecha de los chips. Son <button> de
   verdad: se tabula hasta ellos y el foco se ve (regla .aula :focus-visible). */
.aula .lectura{margin-left:auto;display:inline-flex;align-items:center;gap:7px}
.aula .lectura .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.aula .lectura button{font-family:var(--sans);font-weight:700;font-size:13px;line-height:1;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink-soft);cursor:pointer;transition:border-color .15s ease,color .15s ease}
.aula .lectura button:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.aula .lectura button:disabled{opacity:.38;cursor:not-allowed}

/* ---------- el camino: bloques numerados ---------- */
.aula .path{margin-top:8px}
.aula .blk{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:30px 0 4px}
/* Un .blk SIN raíl de números —prosa suelta en una hoja, como la página de
   entrada del curso— tiene que colocar su cuerpo a mano en la segunda columna.
   La rejilla son dos columnas y la primera es la del número: sin `.gutter`
   delante, el cuerpo se coloca solo en esa primera y el texto sale en una tira
   de 52 px partiendo las palabras por la mitad. Pasó en producción. */
.aula .blk > .body:first-child{grid-column:2}
.aula .gutter{position:relative;text-align:center}
.aula .gutter .bullet{position:relative;z-index:2;width:30px;height:30px;margin:0 auto;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.aula .gutter .line{position:absolute;left:50%;top:30px;bottom:-34px;width:1px;background:var(--line);transform:translateX(-.5px)}
.aula .blk:last-child .gutter .line{display:none}
.aula .blk.done .bullet{background:var(--nav);border-color:var(--nav);color:#fff}
.aula .blk h2{font-size:24px;line-height:1.22;margin-bottom:12px}
/* Subapartado dentro de una sección. No tenía ninguna regla propia, así que
   caía en el reset de arriba (font-size:inherit y margin:0) y salía del mismo
   cuerpo que el texto y pegado al párrafo siguiente: la unidad 2 lleva cuatro
   así. Se le da un escalón claro por debajo del h2 y aire por arriba. */
.aula .blk h3{font-size:18.5px;line-height:1.3;color:var(--ink);margin:26px 0 8px}
.aula .blk h3:first-child{margin-top:0}
/* Cuarto nivel. Lo pide la fusión del bloque de práctica, que mete un escalón
   más: sección (h2) → tipo de texto (h3) → subapartado (h4). Escala completa,
   24 → 18.5 → 17 → 16.5 del cuerpo; como el salto de tamaño ya es corto aquí,
   lo que separa este nivel del párrafo es el aire de arriba y el color pleno
   frente al --ink-soft del texto. */
.aula .blk h4{font-size:17px;line-height:1.35;color:var(--ink);margin:22px 0 6px}
.aula .blk h4:first-child{margin-top:0}
/* h5 y h6 no los usa el curso, pero el conversor sabe emitirlos y el reset de
   arriba solo alcanza hasta h4: sin esto saldrían con el tamaño diminuto del
   navegador. Es el mismo agujero por el que se coló el h3 hasta ahora. */
.aula .blk h5,.aula .blk h6{font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.35;color:var(--ink);margin:20px 0 6px}
.aula .body p{margin:0 0 16px;max-width:var(--medida,68ch)}
.aula .body p:last-child{margin-bottom:0}
/* Infografías del curso (SVG o PNG vía [aula_img]): a todo el ancho de la
   columna de lectura, sin marco ni recorte añadidos. */
.aula .body img{display:block;width:100%;max-width:var(--medida,68ch);height:auto;margin:28px 0}
/* Listas del cuerpo. El reset del aula quita viñetas y sangría a TODAS las
   listas (las necesitan así el panel y el índice), así que aquí hay que
   devolvérselas explícitamente a las del texto. */
.aula .body ul,.aula .body ol{margin:0 0 18px;padding-left:24px;max-width:var(--medida,68ch);display:flex;flex-direction:column;gap:10px}
.aula .body ul{list-style:disc}
.aula .body ol{list-style:decimal}
.aula .body li{line-height:1.6}
.aula .body li::marker{color:var(--nav)}

.aula .mark{margin-top:18px;display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink-soft);background:none;border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.aula .mark:hover{border-color:var(--ink);color:var(--ink)}
.aula .mark .tick{width:16px;height:16px;border-radius:50%;border:1px solid var(--ink-faint);display:grid;place-items:center;font-size:10px;color:transparent}
.aula .blk.done .mark{border-color:var(--nav);color:var(--nav)}
.aula .blk.done .mark .tick{background:var(--nav);border-color:var(--nav);color:#fff}

/* ---------- piezas dentro del módulo ---------- */
.aula .pull{border-left:3px solid var(--work);background:var(--work-soft);padding:20px 24px;margin:28px 0;font-size:17px;color:var(--work-ink-3)}
.aula .pull strong{color:var(--ink)}
/* el destacado admite varios párrafos cortos seguidos: el reset del aula deja
   los <p> a margin:0 y se pegarían unos a otros */
.aula .pull p{margin:0}
.aula .pull p + p{margin-top:14px}

.aula .causes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 4px}
.aula .cause{border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px;background:var(--paper)}
.aula .cause .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-faint);display:block;margin-bottom:7px}
.aula .cause h3{font-size:17.5px;margin-bottom:7px}
.aula .cause p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.aula .cause .to{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:11.5px;color:var(--nav)}

/* Antes/después a dos columnas del sistema. Iba con 4px arriba y 6 abajo:
   pegado al párrafo, igual que .pull y las tablas. A 28px como el resto de
   cajas del aula. */
.aula .ab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0}
.aula .ab>div{border:1px solid var(--line);border-radius:var(--r-sm);padding:20px}
.aula .ab .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:10px}
.aula .ab .after{border-color:var(--nav);background:var(--nav-soft)}
.aula .ab .after .tag{color:var(--nav)}
.aula .ab p{margin:0;font-size:15.5px;color:var(--ink-soft)}
.aula .ab .after p{color:var(--ink)}

/* ---------- soporte visual: figuras ----------
   .aula-figura   contenedor de imagen, SVG o vídeo mudo en bucle, con pie
                  opcional. Ancho de la columna de lectura (68ch), no de la hoja.
   .aula-captura  variante para capturas de pantalla: van sobre el lienzo gris y
                  con marco propio, porque una captura de fondo blanco sobre la
                  hoja blanca se confunde con la página.
   Siempre <figure> + <figcaption> de verdad, y alt obligatorio: la regla de
   abajo marca en rojo cualquier <img> sin alt o con alt vacío, para que no se
   escape ninguna a producción. */
.aula .aula-figura{margin:24px 0 8px;max-width:var(--medida,68ch);border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden}
.aula .aula-figura .medio{display:block;line-height:0}
.aula .aula-figura .medio > img,
.aula .aula-figura .medio > svg,
.aula .aula-figura .medio > video{display:block;width:100%;height:auto}
.aula .aula-figura figcaption{padding:13px 18px 15px;border-top:1px solid var(--line);font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--ink-soft);background:var(--canvas)}
.aula .aula-figura figcaption strong{color:var(--ink)}

.aula .aula-captura .medio{padding:14px;background:var(--canvas);line-height:0}
.aula .aula-captura .medio > img{border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(18,19,26,.09)}
.aula .aula-captura figcaption{border-top:1px solid var(--line)}

/* alt obligatorio: si falta, se ve. No es decoración, es un aviso. */
.aula .aula-figura img:not([alt]),
.aula .aula-figura img[alt=""]{outline:3px solid #B3261E;outline-offset:-3px}

/* Marcador de posición mientras no llega la imagen definitiva. */
.aula .aula-figura .placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:190px;padding:26px 22px;border:1px dashed var(--ink-faint);border-radius:8px;background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(149,153,163,.07) 9px,rgba(149,153,163,.07) 18px);text-align:center;line-height:1.5}
.aula .aula-figura .placeholder .rotulo{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--work-ink);background:var(--work-soft);padding:4px 10px;border-radius:999px}
.aula .aula-figura .placeholder .que{font-size:14.5px;color:var(--ink-soft);max-width:46ch}
.aula .aula-figura .placeholder .medida{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}

/* ---------- tablas del cuerpo ----------
   Equivalente en el aula a .compare-table de ds.css: misma idea (cabecera
   apoyada en el lienzo gris, filas separadas por línea, cifras en monoespaciada
   para que se comparen en vertical), con los tokens del aula.
   Se usa dentro de <figure class="aula-tabla"> con su <figcaption>. Una tabla
   NO lleva alt: lleva <th scope="col"> y un pie que diga qué se está mirando.
   Los estilos van explícitos porque orbital/main.css estila table/th/td por
   tipo de elemento y ganaría al valor heredado. */
.aula .aula-tabla{margin:28px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden}
.aula .aula-tabla .medio{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Aviso de desplazamiento (assets/js/aula.js): solo existe visible cuando la
   tabla desborda de verdad. El fundido va en un envoltorio propio para cubrir
   solo la tabla y no el pie; se apaga al llegar al final del desplazamiento. */
.aula .aula-tabla .tabla-aviso{margin:0;padding:11px 16px 0;font-size:13.5px;line-height:1.4;color:var(--ink-entradilla)}
.aula .aula-tabla .tabla-envoltorio{position:relative}
.aula .aula-tabla .tabla-fundido{position:absolute;top:0;right:0;bottom:0;width:44px;pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,0),var(--paper));opacity:0;transition:opacity .15s ease}
.aula .aula-tabla.desliza:not(.al-final) .tabla-fundido{opacity:1}
.aula .aula-tabla table{width:100%;min-width:520px;border-collapse:collapse;font-family:var(--sans)}
.aula .aula-tabla thead th{background:var(--canvas);border-bottom:1px solid var(--line);padding:13px 16px;text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;white-space:nowrap}
.aula .aula-tabla tbody td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-soft);vertical-align:top}
.aula .aula-tabla tbody tr:last-child td{border-bottom:0}
.aula .aula-tabla tbody tr:hover td{background:var(--canvas)}
.aula .aula-tabla .titulo{font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink);letter-spacing:-.01em}
.aula .aula-tabla .cifra{font-family:var(--mono);font-size:13.5px;color:var(--ink);white-space:nowrap}
.aula .aula-tabla figcaption{padding:13px 18px 15px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--ink-soft);background:var(--canvas)}
.aula .aula-tabla figcaption strong{color:var(--ink)}

/* ---------- DIAGRAMAS ----------
   Dirección B, editorial ilustrado. Las reglas completas (vías, numerales en
   marca de agua, composición asimétrica, nodo final oscuro, la nota ámbar para
   lo que no existe, tipografías y accesibilidad) están en
   docs/DIAGRAMAS-AULA.md, con esqueleto para copiar y lista de comprobación.
   Se aplican a TODOS los diagramas de los módulos 3 al 8.
   Aquí solo vive lo que es CSS: el ancho y el suelo de legibilidad.        */

/* Figura ancha: los diagramas traen un lienzo de ~960 unidades y dentro de la
   columna de lectura (68ch) su texto de apoyo se queda por debajo de 10px.
   Rompen la columna y ocupan todo el cuerpo del apartado. Ver
   docs/DIAGRAMAS-AULA.md, apartado "tamaño mínimo legible". */
.aula .aula-figura.ancha{max-width:none}
/* En pantalla estrecha un diagrama de 960 unidades caería a 3px de texto. Antes
   que servirlo ilegible, se le pone suelo y se desliza en horizontal, como hace
   ds.css con las tablas anchas (.matrix-scroll). */
@media (max-width:820px){
  .aula .aula-figura.ancha .medio{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .aula .aula-figura.ancha .medio > svg{min-width:720px}
  .aula .aula-figura.ancha figcaption::after{content:" Deslízalo en horizontal para verlo entero.";color:var(--ink-faint)}
}

/* miniatura al lado del antes/después: el tamaño real al que se decide */
.aula .ab-mini{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:16px;align-items:start;margin:28px 0}
.aula .ab-mini .ab{margin:0}
.aula .ab-mini .aula-figura{margin:0;max-width:none}
.aula .ab-mini .aula-figura .placeholder{min-height:150px;padding:14px 10px;gap:5px}
.aula .ab-mini .aula-figura .placeholder .que{font-size:12px}
.aula .ab-mini .aula-figura figcaption{padding:9px 11px;font-size:11.5px}

/* Movimiento: quien pide menos movimiento no lo recibe. La animación SVG se
   queda en su primer fotograma (pausada en el instante 0, no eliminada: si se
   quitara saltaría al estado final) y el vídeo no arranca (lo para aula.js). */

/* ---------- ficha del dossier ----------
   La caja donde el alumno responde sobre su libro. Sus datos NO viven en
   WordPress: van a la API de cuentas (ver aula-fichas.php y aula-ficha.js).
   Tres estados apilados en el HTML; solo se enseña uno, según haya sesión. */
/* Más compacta (8-oct-2026, "la ficha es enorme"): menos relleno de la
   tarjeta y menos separación entre campos — ver también .ficha-campo y el
   rows="2" en aula-fichas.php, que es lo que más altura quitaba. */
.aula .ficha{background:var(--paper);border:1.5px solid var(--nav);border-radius:16px;padding:24px 26px;margin:28px 0;box-shadow:0 8px 24px rgba(53,82,239,.09)}
.aula .ficha .ficha-cab{margin-bottom:16px}
.aula .ficha .ficha-cab .mono{display:block;color:var(--nav);margin-bottom:8px}
.aula .ficha h3{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.25;color:var(--ink);margin:0}
.aula .ficha .ficha-entrada{font-size:16px;line-height:1.6;color:var(--ink-soft);margin:10px 0 0}

/* Qué se ve en cada estado. Arranca en espera: enseñar el formulario de acceso
   a quien ya tiene sesion, aunque sea medio segundo, se ve como un parpadeo. */
.aula .ficha .ficha-cargando,.aula .ficha .ficha-acceso,.aula .ficha .ficha-form{display:none}
.aula .ficha.ficha-espera .ficha-cargando{display:block;font-size:15px;color:var(--ink-faint)}
.aula .ficha.ficha-anonima .ficha-acceso{display:block}
.aula .ficha.ficha-abierta .ficha-form{display:block}

.aula .ficha .ficha-acceso p{font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0 0 18px}
.aula .ficha .ficha-fila{display:flex;flex-wrap:wrap;gap:10px}
.aula .ficha .ficha-fila input{flex:1 1 220px;width:auto}
.aula .ficha .ficha-fila .btn{width:auto;flex:0 0 auto}
.aula .ficha .ficha-fila-nombre{margin-bottom:10px}
.aula .ficha .ficha-fila-nombre input{max-width:340px}
.aula .ficha .ficha-consent{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--ink-soft);cursor:pointer}
.aula .ficha .ficha-consent input{margin-top:3px;flex:0 0 auto;width:auto;accent-color:var(--nav)}

.aula .ficha .ficha-campo{margin:0 0 14px}
.aula .ficha .ficha-campo label{display:block;font-weight:600;font-size:15.5px;line-height:1.45;color:var(--ink);margin-bottom:6px}
.aula .ficha .ficha-campo .pista{display:block;font-size:13.5px;line-height:1.45;color:var(--ink-faint);margin-top:5px}
/* height:auto es la línea que de verdad arregla el tamaño: el tema padre
   (Orbital, main.css) pone "textarea{height:200px}" sin ningún ámbito, y
   puesto que es la propiedad "height" (no "min-height"), gana igual aunque
   esta regla sea más específica — min-height no pisa un height explícito.
   Encontrado el 8-oct-2026 al ver que rows="2" no cambiaba nada en pantalla. */
.aula .ficha textarea{resize:vertical;height:auto;min-height:54px}

.aula .ficha .ficha-pie{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.aula .ficha .ficha-pie .btn{width:auto}
.aula .ficha .ficha-estado{font-size:14px;color:var(--ink-faint)}
.aula .ficha .ficha-estado.es-ok{color:var(--nav)}
.aula .ficha .ficha-estado.es-error{color:#B4232A}
.aula .ficha .ficha-dossier{margin-left:auto;font-weight:700;font-size:15px;color:var(--nav)}
.aula .ficha .ficha-aviso{font-size:14.5px;line-height:1.5;color:var(--ink-soft);margin:14px 0 0}
.aula .ficha .ficha-aviso.es-ok{color:var(--nav)}
.aula .ficha .ficha-aviso.es-error{color:#B4232A}

@media (max-width:640px){
  .aula .ficha{padding:24px 20px}
  .aula .ficha .ficha-fila .btn,.aula .ficha .ficha-pie .btn{width:100%}
  .aula .ficha .ficha-dossier{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .aula .aula-figura svg *{animation-play-state:paused!important;animation-delay:0s!important}
}

/* ---------- nota / aparte destacado ----------
   Dirección B del mockup: tarjeta con icono, título real y botón sólido.
   A todo el ancho de la columna, como .aula-lecturas: a 460px quedaba corta y
   suelta en medio del blanco de la página, «descolgada» del texto. El fondo
   tintado (--nav-soft) es justo lo que le falta a esa versión estrecha: rompe
   el blanco sin salirse de la paleta —es el mismo índigo suave del borde—, y
   deja de necesitar la sombra, que existía para separarla de un fondo igual
   de blanco que ella.
   Alineada a la izquierda, no centrada: en el flujo de lectura, centrarla la
   convertiría en un corte. */
.aula .aula-lecturas{max-width:none;background:var(--paper);border:1.5px solid var(--nav);border-radius:16px;padding:30px 32px;margin:26px 0;box-shadow:0 8px 24px rgba(53,82,239,.09)}
.aula .aula-nota{max-width:none;background:var(--nav-soft);border:1.5px solid var(--nav);border-radius:16px;padding:30px 32px;margin:26px 0}
.aula .aula-nota .nota-cabecera,.aula .aula-lecturas .nota-cabecera{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.aula .aula-lecturas .nota-icono{width:34px;height:34px;border-radius:50%;background:var(--nav-soft);display:flex;align-items:center;justify-content:center;flex:none}
/* El círculo del icono, en .paper: sobre el fondo tintado de la propia
   tarjeta, --nav-soft se fundiría con la caja y el icono desaparecería. */
.aula .aula-nota .nota-icono{width:34px;height:34px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;flex:none}
.aula .aula-nota .nota-icono svg,.aula .aula-lecturas .nota-icono svg{width:18px;height:18px;stroke:var(--nav);fill:none}
.aula .aula-nota .nota-titulo,.aula .aula-lecturas .nota-titulo{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.aula .aula-nota .nota-cuerpo{font-size:17px;line-height:1.65;color:var(--ink-soft)}
.aula .aula-nota .nota-cuerpo p{margin:0 0 18px}
.aula .aula-nota .nota-cuerpo p:last-child{margin-bottom:18px}
.aula .aula-nota strong{color:var(--ink)}
/* el enlace es un botón sólido, no un enlace de texto suelto */
.aula .aula-nota .nota-enlace{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:16px;line-height:normal;color:#fff;background:var(--nav);padding:11px 20px;border-radius:999px;text-decoration:none}
.aula .aula-nota .nota-enlace::after{content:"→";transition:transform .15s ease}
.aula .aula-nota .nota-enlace:hover{background:var(--ink)}
.aula .aula-nota .nota-enlace:hover::after{transform:translateX(3px)}
/* Lecturas recomendadas ([aula_lecturas]): comparte caja y cabecera con la nota.
   Se diferencia en que va a todo el ancho de la columna —lleva una lista— y en
   el contenido: obra (autor en negrita, título en cursiva) y su comentario. */
.aula .aula-lecturas .nota-intro{margin:0 0 20px;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-soft)}
.aula .aula-lecturas .nota-intro strong{color:var(--ink)}
.aula .aula-lecturas .lec{margin:0 0 20px}
.aula .aula-lecturas .lec:last-child{margin-bottom:0}
.aula .aula-lecturas .lec-obra{font-family:var(--display);font-size:17.5px;line-height:1.35;color:var(--ink);letter-spacing:-.005em}
.aula .aula-lecturas .lec-obra strong{font-weight:700}
.aula .aula-lecturas .lec-obra em{font-style:italic}
.aula .aula-lecturas .lec-com{margin-top:5px;font-size:16px;line-height:1.6;color:var(--ink-soft)}
@media (max-width:520px){
  .aula .aula-nota,.aula .aula-lecturas{max-width:none;padding:24px 22px}
  .aula .aula-nota .nota-titulo,.aula .aula-lecturas .nota-titulo{font-size:19px}
}

/* ---------- vídeo del aula ([aula_video]) ----------
   Misma caja que .aula-nota (mismo aire, mismo radio de esquina): un vídeo
   complementario compite por la atención igual que un aparte de texto, así
   que lleva el mismo marco. Borde neutro (--line) y no el índigo de la
   nota, porque aquí el color ya lo pone la miniatura del vídeo.

   El reproductor NO existe hasta que se pulsa: antes solo hay una <img> (la
   miniatura de i.ytimg.com — una imagen suelta, no instala cookies) con un
   botón de reproducir encima. aula-video.js sustituye esa miniatura por un
   <iframe> de youtube-nocookie.com al pulsar: ahí, y no antes, es cuando
   puede entrar cualquier cookie del reproductor. RGPD: sin esto, cargar el
   widget de YouTube en cuanto se abre la página instalaría cookies de
   seguimiento sin que el alumno haya decidido nada todavía. */
.aula .aula-video{max-width:none;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:26px 28px;margin:26px 0}
.aula .aula-video .video-cabecera{margin-bottom:14px}
.aula .aula-video .video-titulo{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.3;color:var(--ink);letter-spacing:-.01em;margin:0}
.aula .aula-video .video-meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink-faint);margin:4px 0 0}
.aula .aula-video .video-idioma{font-size:14px;line-height:1.5;color:var(--ink-soft);background:var(--canvas);border-radius:8px;padding:9px 12px;margin:0 0 14px}
/* 16:9 con aspect-ratio: la caja ya tiene su alto reservado antes de que
   exista ningún hijo, así que no hay salto de maquetación al cargar el
   iframe (ni con la miniatura, que también es absolute dentro de esto). */
.aula .aula-video .video-marco{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--ink);margin:0}
.aula .aula-video .video-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.aula .aula-video .video-play{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:pointer;display:block}
.aula .aula-video .video-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aula .aula-video .play-boton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(20,20,26,.75);display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .15s ease}
.aula .aula-video .play-boton svg{width:24px;height:24px;color:#fff;margin-left:3px}
.aula .aula-video .video-play:hover .play-boton{background:var(--nav);transform:translate(-50%,-50%) scale(1.06)}
.aula .aula-video .video-comentario{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:14px 0 0}
@media (max-width:520px){
  .aula .aula-video{padding:20px 18px}
  .aula .aula-video .video-titulo{font-size:17.5px}
  .aula .aula-video .play-boton{width:50px;height:50px}
  .aula .aula-video .play-boton svg{width:20px;height:20px}
}

/* ---------- control de cambios ----------
   Varias versiones sucesivas del mismo fragmento, con las diferencias marcadas
   como las marcaría Word: lo quitado en rojo y tachado, lo añadido en verde y
   subrayado. Patrón fijo del curso, no apaño de una unidad: ya se usa en la 5,
   la 9, la 12 y la 14.

   El diff se calcula EN EL NAVEGADOR (assets/js/aula-cambios.js) a partir de
   los dos textos en plano. Se decidió así y no marcando a mano cada ejemplo por
   tres razones: el original en el .md sigue siendo texto legible y editable,
   añadir un ejemplo nuevo no cuesta nada, y no hay forma de que el marcado se
   desincronice del texto. Si el JS no corre, se ven las versiones enteras sin
   marcas, que es un degradado aceptable.

   Colores: --ds-edit-out / --ds-edit-in, categoría propia. Ni índigo ni ámbar,
   que ya significan otra cosa en el aula. */
.aula .aula-cambios{margin:28px 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.aula .aula-cambios .cb-version + .cb-version{border-top:1px solid var(--line)}
.aula .aula-cambios .cb-rotulo{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);padding:13px 20px 0}
/* pre-line: los saltos del original se conservan. Hace falta para los
   diálogos, donde cada intervención va en su renglón. El diff los preserva
   porque trocea() guarda los espacios como piezas propias. */
.aula .aula-cambios .cb-texto{padding:8px 20px 18px;font-size:16.5px;line-height:1.65;color:var(--ink-soft);white-space:pre-line}

/* Las marcas. <del> e <ins> son las etiquetas correctas: un lector de pantalla
   las anuncia como supresión y adición sin que haya que añadir nada. */
.aula .aula-cambios del,
.aula .aula-cambios ins{text-decoration:none;border-radius:3px;padding:1px 2px}
.aula .aula-cambios del{color:var(--ds-edit-out);background:var(--ds-edit-out-soft);text-decoration:line-through;text-decoration-thickness:1.5px}
.aula .aula-cambios ins{color:var(--ds-edit-in);background:var(--ds-edit-in-soft);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}

/* La versión de referencia no lleva marcas: es contra la que se comparan las
   demás, así que teñirla no diría nada. */
.aula .aula-cambios .cb-version.es-base .cb-texto{color:var(--ink)}
.aula .aula-cambios .cb-version.es-base .cb-rotulo{color:var(--ink-soft)}

/* ── Bloque de acceso ──────────────────────────────────────────────────────
   Ámbar del trabajo del alumno, como la caja de descarga: crear cuenta es para
   guardar lo que hace, no para navegar. Aparece en la entrada del curso y, si no
   hay sesión, debajo del ejercicio recién terminado. */
.aula .aula-acceso{margin:28px 0;padding:20px 22px;border:1px solid var(--work);border-left:3px solid var(--work);background:var(--work-soft);border-radius:0 var(--r) var(--r) 0}
.aula .aula-acceso .ac-rotulo{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--work-ink);margin-bottom:8px}
.aula .aula-acceso p{margin:0 0 14px;font-size:15.5px;line-height:1.6;color:var(--work-ink-2)}
.aula .aula-acceso .ac-fila{display:flex;gap:10px;flex-wrap:wrap}
.aula .aula-acceso .ac-correo{flex:1 1 220px;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-family:var(--sans);font-size:15px;color:var(--ink)}
.aula .aula-acceso .ac-correo:focus-visible{outline:2px solid var(--work-ink);outline-offset:1px}
.aula .aula-acceso .ac-pedir{flex:0 0 auto;padding:11px 22px;border:0;border-radius:999px;background:var(--work-ink);color:var(--paper);font-family:var(--sans);font-size:14.5px;font-weight:600;cursor:pointer;transition:background .15s ease}
.aula .aula-acceso .ac-pedir:hover{background:var(--ink)}
.aula .aula-acceso .ac-pedir:disabled{opacity:.55;cursor:default}
/* La casilla va DESMARCADA y separada del campo de correo: escribir el correo
   sirve para recibir el enlace, las novedades son otra cosa. Juntarlas sugeriría
   que van en el mismo paquete. */
.aula .aula-acceso .ac-consent{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--work-ink-2);cursor:pointer}
.aula .aula-acceso .ac-consent input{margin-top:3px;flex:0 0 auto;accent-color:var(--work-ink)}
.aula .aula-acceso .ac-turnstile{margin-top:14px}
.aula .aula-acceso .ac-turnstile:empty{margin-top:0}
.aula .aula-acceso .ac-aviso{margin:12px 0 0;font-size:14.5px;min-height:1.2em}
.aula .aula-acceso .ac-aviso.es-bien{color:var(--ds-edit-in,#12794F)}
.aula .aula-acceso .ac-aviso.es-mal{color:var(--ds-edit-out,#B3261E)}
/* Nombre: campo opcional, en su propia fila y con etiqueta VISIBLE. La del
   correo va oculta (.sr) porque el placeholder ya dice qué es; aquí no, porque
   un campo sin etiqueta al lado de otro obligatorio se lee como obligatorio. */
.aula .aula-acceso .ac-fila-nombre{display:block;margin-bottom:10px}
.aula .aula-acceso .ac-fila-nombre label{display:block;margin-bottom:5px;font-size:14.5px;color:var(--work-ink-2)}
.aula .aula-acceso .ac-opcional{color:var(--work-ink-2);opacity:.75;font-style:italic}
.aula .aula-acceso .ac-nombre{width:100%;max-width:340px;padding:11px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-family:var(--sans);font-size:15px;color:var(--ink)}
.aula .aula-acceso .ac-nombre:focus-visible{outline:2px solid var(--work-ink);outline-offset:1px}
/* Enviado: se apaga el formulario para que no se reintente por inercia. */
.aula .aula-acceso.es-enviado .ac-fila,.aula .aula-acceso.es-enviado .ac-consent,.aula .aula-acceso.es-enviado .ac-turnstile{opacity:.5;pointer-events:none}
/* Dentro de un ejercicio va más pegado: pertenece a ese ejercicio, no al texto. */
.aula .aula-motor .aula-acceso{margin:20px 0 4px}

/* ── Lectura complementaria ────────────────────────────────────────────────
   Hermana de la caja de descarga y distinta de ella en el color: índigo de
   navegación, no ámbar de trabajo. El ámbar del aula significa «esto lo haces
   tú» —fichas, ejercicios, materiales que te llevas— y una lectura de fuera no
   es eso: es un sitio al que se va. */
.aula .aula-lectura{margin:28px 0;padding:20px 24px;border:1px solid var(--line);border-left:3px solid var(--nav);background:var(--nav-soft);border-radius:0 var(--r) var(--r) 0}
.aula .aula-lectura .lc-rotulo{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--nav);margin-bottom:9px}
.aula .aula-lectura .lc-titulo{display:block;font-family:var(--display);font-weight:600;font-size:17.5px;line-height:1.3;color:var(--ink)}
.aula .aula-lectura .lc-fuente{display:block;margin-top:5px;font-size:14.5px;color:var(--ink-soft);font-style:italic}
.aula .aula-lectura p{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.aula .aula-lectura .lc-formato{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.aula .aula-lectura .lc-boton{display:inline-block;margin-top:16px;padding:10px 20px;border-radius:999px;background:var(--nav);color:var(--paper);font-family:var(--sans);font-size:14.5px;font-weight:600;text-decoration:none;transition:background .15s ease}
.aula .aula-lectura .lc-boton:hover{background:var(--ink)}
.aula .aula-lectura .lc-boton:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* «Se abre en una pestaña nueva» se dice para el lector de pantalla y no se
   pinta: la flecha ya lo indica a quien ve, y repetirlo en texto ensuciaría el
   botón. Se oculta sin display:none, que lo sacaría también del audio. */
.aula .aula-lectura .lc-fuera{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Caja de descarga ──────────────────────────────────────────────────────
   Mismo marco que las demás cajas del cuerpo (borde, radio, papel, 28px), pero
   con el ámbar del trabajo del alumno y no el índigo de la navegación: llevarse
   un material es trabajo suyo, igual que la ficha y el ejercicio. El botón es
   botón de verdad y no un enlace subrayado, porque un descargable es una acción
   y en medio de un párrafo un enlace no se distingue de una remisión más. */
.aula .aula-descarga{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:28px 0;padding:20px 22px;border:1px solid var(--work);border-left:3px solid var(--work);background:var(--work-soft);border-radius:0 var(--r) var(--r) 0}
.aula .aula-descarga .dl-icono{flex:0 0 auto;display:block;color:var(--work-ink);line-height:0}
.aula .aula-descarga .dl-icono svg{display:block}
.aula .aula-descarga .dl-texto{flex:1 1 260px;min-width:0}
.aula .aula-descarga .dl-titulo{display:block;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.3;color:var(--ink)}
.aula .aula-descarga p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--work-ink-2)}
.aula .aula-descarga .dl-formato{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--work-ink)}
.aula .aula-descarga .dl-boton{flex:0 0 auto;display:inline-block;padding:12px 22px;border-radius:999px;background:var(--work-ink);color:var(--paper);font-family:var(--sans);font-size:14.5px;font-weight:600;text-decoration:none;transition:background .15s ease}
.aula .aula-descarga .dl-boton:hover{background:var(--ink)}
.aula .aula-descarga .dl-boton:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:520px){
  /* En móvil el botón pasa a ocupar el ancho: un objetivo táctil de 22px de
     padding en una fila compartida se falla más de lo que se acierta. */
  .aula .aula-descarga .dl-boton{flex:1 1 100%;text-align:center}
}

/* ── Caja desplegable de consulta ─────────────────────────────────────────
   Mismo marco que la tabla y el control de cambios (borde, radio, papel, 28px):
   es la tercera caja de la misma familia y no estrena lenguaje visual. La
   cabecera reutiliza el rótulo mono en versalitas de .cb-rotulo.
   El <details> nativo no trae flecha propia utilizable, así que se oculta el
   marcador del navegador y se dibuja una. */
.aula .aula-toggle{margin:28px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden}
/* Título en negrita y al mismo tamaño que el texto de la lección (7-oct-2026,
   pedido de Nicolás, para TODOS los desplegables del sitio, no solo los de
   este curso): mismo valor y misma variable que ".path .body > p" en
   aula.css, para que crezca o encoja igual que el resto si alguien toca el
   control de tamaño de letra (A− / A+). 11px/400 se leía como un rótulo
   secundario, no como el único texto visible antes de abrir la caja. */
.aula .aula-toggle summary{display:flex;align-items:center;gap:10px;padding:13px 18px;cursor:pointer;background:var(--canvas);font-family:var(--mono);font-size:calc(16.5px * var(--cuerpo-escala,1));font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);list-style:none;user-select:none}
.aula .aula-toggle summary::-webkit-details-marker{display:none}
.aula .aula-toggle summary::marker{content:""}
.aula .aula-toggle summary:hover{color:var(--ink)}
/* El foco se ve: se navega con teclado y sin esto no se sabe dónde estás. */
.aula .aula-toggle summary:focus-visible{outline:2px solid var(--nav);outline-offset:-2px}
/* Flecha dibujada con bordes: gira 90° al abrir. */
.aula .aula-toggle summary::before{content:"";flex:0 0 auto;width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s ease}
.aula .aula-toggle[open] summary::before{transform:rotate(90deg)}
.aula .aula-toggle[open] summary{border-bottom:1px solid var(--line)}
.aula .aula-toggle .tg-cuerpo{padding:16px 18px}
/* Sin esto la caja abre con un hueco de 28px arriba, porque lo primero que
   suele haber dentro es otra caja con su propio margen. */
.aula .aula-toggle .tg-cuerpo>*:first-child{margin-top:0}
.aula .aula-toggle .tg-cuerpo>*:last-child{margin-bottom:0}
.aula .aula-toggle .tg-cuerpo p{font-size:15.5px;line-height:1.65;color:var(--ink-soft)}
/* Caja dentro de caja: la tabla y la cita de dentro pierden su marco y su
   radio, que ya los pone el desplegable. Se quedan solo con la separación. */
.aula .aula-toggle .tg-cuerpo .aula-tabla{border:0;border-radius:0;background:none;margin:0 -18px}
.aula .aula-toggle .tg-cuerpo blockquote{margin:14px 0;border-radius:0}
/* Dentro de una lista, el desplegable respira menos: 28px partirían el punto
   en dos y se perdería que la caja pertenece a ese punto. */
.aula li>.aula-toggle{margin:12px 0 4px}
/* Encontrado el 7-oct-2026 al abrir "Fuentes y libros recomendados" en
   móvil: una URL larga sin espacios (las notas de Fuentes las muestran tal
   cual, como texto del enlace) desbordaba TODA la página hacia los lados.
   Dentro de un .blk, la rejilla (minmax(0,1fr) en .aula .blk) recortaba esto
   sola; un [aula_toggle] SUELTO, fuera de esa rejilla por primera vez aquí,
   no tenía nada que lo hiciera — mismo arreglo que ya usa .aula code. */
.aula .aula-toggle{min-width:0}
.aula .aula-toggle .tg-cuerpo a{overflow-wrap:anywhere}

/* "Fuentes y libros recomendados", al final de todo (7-oct-2026, pedido de
   Nicolás, segunda vuelta): ya no entre Ejercicios y Ficha — tarjeta aparte,
   la última de la página, con la forma y la fuente de .step-nav (el pie
   Anterior/Siguiente) pero de otro color y a todo lo ancho de la columna, no
   partida en dos. SOLO esta instancia (clase .fl-cierre, puesta por el
   atributo clase="fl-cierre" del shortcode): el resto de [aula_toggle] del
   sitio —los de dentro de una lección— no cambian. */
.aula .aula-toggle.fl-cierre{margin:40px 0 8px;border:1px solid var(--nav);border-radius:var(--r);background:var(--nav)}
.aula .aula-toggle.fl-cierre summary{padding:20px 22px;background:transparent;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:normal;text-transform:none;color:#fff}
.aula .aula-toggle.fl-cierre summary:hover{color:#fff}
.aula .aula-toggle.fl-cierre summary::before{border-left-color:#fff}
.aula .aula-toggle.fl-cierre[open] summary{border-bottom:1px solid rgba(255,255,255,.3)}
.aula .aula-toggle.fl-cierre .tg-cuerpo{background:var(--paper);padding:26px 22px}
/* Fuentes y Libros recomendados, el mismo estilo de título cada uno, sin caja
   dentro de la caja: el recuadro propio de [aula_lecturas] (borde, sombra,
   cabecera con icono) se quita aquí — el título ya lo pone este <h3>, igual
   que el de "Fuentes", y el marco ya lo pone la tarjeta entera. */
.aula .aula-toggle.fl-cierre .tg-cuerpo h3{margin:0 0 12px;font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink)}
.aula .aula-toggle.fl-cierre .tg-cuerpo h3:not(:first-child){margin-top:32px}
.aula .aula-toggle.fl-cierre .tg-cuerpo .aula-lecturas{max-width:none;background:none;border:0;box-shadow:none;border-radius:0;padding:0;margin:0}
.aula .aula-toggle.fl-cierre .tg-cuerpo .aula-lecturas .nota-cabecera{display:none}
.aula .aula-toggle.fl-cierre .tg-cuerpo .aula-lecturas .nota-intro{margin:0 0 16px}
@media (max-width:520px){
  .aula .aula-toggle.fl-cierre summary{padding:16px 18px}
  .aula .aula-toggle.fl-cierre .tg-cuerpo{padding:20px 18px}
}

@media (max-width:520px){
  .aula .aula-cambios .cb-texto{font-size:16px;padding:8px 16px 16px}
  .aula .aula-cambios .cb-rotulo{padding:12px 16px 0}
}

/* ---------- muestras de texto (antes / después) ----------
   Los cincuenta ejemplos de las unidades salían como <blockquote> pelado, sin
   una sola regla: el navegador los sangraba un poco y nada más, así que se
   leían como un párrafo más del cuerpo. Son lo contrario: es texto de OTRO,
   puesto ahí para mirarlo, no para leerlo de corrido.

   No se inventa lenguaje visual. Se reutiliza la FORMA de .pull —barra a la
   izquierda, fondo tenue, mismo relleno— con el COLOR de .aula-regla, que es
   --nav. El reparto de colores del aula ya estaba decidido y conviene
   respetarlo: --work (ámbar) significa «tu trabajo» y estos ejemplos no lo son;
   --nav (índigo) es la voz del curso, que es justo lo que son.

   Margen de 28px arriba y abajo, por encima del mínimo de 25: son cajas altas y
   pegadas al párrafo no se distinguen del cuerpo. */
.aula .path blockquote{margin:28px 0;padding:20px 24px;border-left:3px solid var(--nav);background:var(--nav-soft);border-radius:0 var(--r) var(--r) 0;font-size:17px;line-height:1.6;color:var(--ink-soft)}
.aula .path blockquote p{margin:0}
.aula .path blockquote p + p{margin-top:14px}
/* Líneas seguidas de un recuadro que son etiquetas de una ficha («Título:», «Género:»,
   «Extensión:»): juntas, sin el aire entre párrafos. Lo pone el conversor (class="junto"). */
.aula .path blockquote p.junto{margin-top:4px}
/* El «Antes:» / «Después:» que abre cada muestra: es el rótulo de la caja. */
.aula .path blockquote strong{color:var(--ink)}
.aula .path blockquote em{color:var(--ink-soft)}

/* ---------- muestras de texto (antes / después) ----------
   Los cincuenta ejemplos de las unidades salían como <blockquote> pelado, sin
   una sola regla: el navegador los sangraba un poco y nada más, así que se
   leían como un párrafo más del cuerpo. Son lo contrario: es texto de OTRO,
   puesto ahí para mirarlo, no para leerlo de corrido.

   No se inventa lenguaje visual. Se reutiliza la FORMA de .pull —barra a la
   izquierda, fondo tenue, mismo relleno— con el COLOR de .aula-regla, que es
   --nav. El reparto de colores del aula ya estaba decidido y conviene
   respetarlo: --work (ámbar) significa «tu trabajo» y estos ejemplos no lo son;
   --nav (índigo) es la voz del curso, que es justo lo que son.

   Margen de 28px arriba y abajo, por encima del mínimo de 25: son cajas altas y
   pegadas al párrafo no se distinguen del cuerpo. */
.aula .path blockquote{margin:28px 0;padding:20px 24px;border-left:3px solid var(--nav);background:var(--nav-soft);border-radius:0 var(--r) var(--r) 0;font-size:17px;line-height:1.6;color:var(--ink-soft)}
.aula .path blockquote p{margin:0}
.aula .path blockquote p + p{margin-top:14px}
/* El «Antes:» / «Después:» que abre cada muestra: es el rótulo de la caja. */
.aula .path blockquote strong{color:var(--ink)}
.aula .path blockquote em{color:var(--ink-soft)}

/* ---------- etiquetas de unidad ----------
   Los temas de la unidad, al pie del artículo. Lista estática, no enlaces: para
   que fueran navegables haría falta una taxonomía con sus páginas de archivo, y
   eso es otro encargo. El marcado ya sirve para eso el día que se quiera.

   Van al final y en gris: son orientación, no contenido. Si compitieran con el
   texto, sobrarían. */
.aula .aula-etiquetas{margin:38px 0 8px;padding-top:20px;border-top:1px solid var(--line)}
.aula .aula-etiquetas .et-rotulo{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.aula .aula-etiquetas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.aula .aula-etiquetas li{font-family:var(--sans);font-size:14px;line-height:1;color:var(--ink-soft);background:var(--canvas);border:1px solid var(--line);border-radius:999px;padding:8px 14px}

/* ---------- anexos ----------
   Pieza del raíl que no es unidad de progresión: sale en el índice y en el
   panel, pero sin ficha, sin ejercicio y sin tocar el desbloqueo. Tipo
   reutilizable: 'tipo' => 'anexo' en el registro de aula.php.

   La pelota va RELLENA en ámbar y en TODOS los estados, no solo un borde ni
   solo el dígito. Las unidades en reposo son un círculo pálido y las visitadas
   azul claro; un anexo con fondo claro se perdía entre ellas. Relleno y con
   contraste se ve de un vistazo, que es para lo que está.

   Un color, una línea. */
.aula{ --aula-anexo:#D89D4E; }

/* Se listan is-now e is-done porque esas pintan la pelota de índigo y hay que
   ganarles: un anexo se ve igual antes y después de visitarlo. */
.aula .mods li.es-anexo .n,
.aula .mods li.es-anexo.is-now .n,
.aula .mods li.es-anexo.is-done .n{background:var(--aula-anexo);color:#fff;border-color:var(--aula-anexo);font-weight:700}

.aula .indice .mod-row.es-anexo .n,
.aula .indice .mod-row.es-anexo.pendiente .n{background:var(--aula-anexo);color:#fff;border-color:var(--aula-anexo);font-weight:700}

/* ---------- regla en una línea ----------
   Hermana pequeña de .aula-nota, y a propósito: mismo papel, mismo borde
   redondeado, misma familia. Lo que cambia es el PROPÓSITO, y por eso cambia
   la forma.

   .aula-nota es información complementaria: se puede saltar. Lleva cabecera,
   icono en círculo y varios párrafos, y ocupa como una tarjeta porque compite
   por la atención con el texto principal.

   .aula-regla es la síntesis de lo que se acaba de explicar: NO se puede
   saltar, porque es el texto principal comprimido. De ahí que no lleve
   cabecera ni icono —no anuncia nada, remata—, que sea de una sola frase y que
   vaya a ancho de lectura en vez de en columna estrecha: se lee de corrido,
   como el párrafo del que cuelga.

   La barra vertical en vez de caja cerrada es lo que la separa de la nota a un
   golpe de vista: la nota es un aparte con marco; la regla es el margen del
   propio texto. Va pegada arriba (margin-top corto) porque pertenece al
   párrafo que la precede. Se inserta a mano, justo después de una explicación
   densa; si se pusiera una cada dos párrafos dejaría de leerse. */
.aula .aula-regla{position:relative;max-width:var(--medida-regla,62ch);margin:6px 0 30px;padding:14px 0 14px 22px;border-left:3px solid var(--nav);font-family:var(--display);font-size:19.5px;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.aula .aula-regla strong{font-weight:700}
/* El rótulo va en versalita y a la izquierda del todo, fuera del flujo de
   lectura: dice qué es esto sin robarle el turno a la frase. */
.aula .aula-regla .regla-rotulo{display:block;font-family:var(--mono);font-size:12.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--nav);margin-bottom:7px}
@media (max-width:520px){
  .aula .aula-regla{font-size:18px;padding-left:18px}
}

/* ---------- glosario emergente ----------
   El término marcado y la burbuja con su definición. La mecánica está en
   assets/js/aula-glosario.js y los datos en aula-glosario.php.

   Es un <button>, así que hay que desmontarle el aspecto de botón entero: si
   no, el navegador le pone fondo, borde y su propia tipografía, y en mitad de
   un párrafo eso se ve como un parche.

   Subrayado de puntos y no de línea continua: la línea continua es de enlace, y
   esto no lleva a ninguna parte. El color del texto NO cambia por lo mismo. */
.aula .aula-termino{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:help;text-decoration:underline dotted;text-decoration-color:var(--nav);text-underline-offset:3px;text-decoration-thickness:1.5px}
.aula .aula-termino:hover,
.aula .aula-termino[aria-expanded="true"]{background:var(--nav-soft);border-radius:3px;box-shadow:0 0 0 2px var(--nav-soft)}
.aula .aula-termino:focus-visible{outline:2px solid var(--nav);outline-offset:2px;border-radius:2px}

/* La burbuja del glosario: emergente SUPERPUESTO. Se pinta encima del
   contenido y no desplaza nada, para que consultar una definición no mueva el
   párrafo que se está leyendo.

   Vive colgada de <body>, no dentro de .aula, para que ningún overflow del
   contenido la recorte. Y de ahí el detalle que costó un fallo real: las
   variables de color del aula (--ink, --nav, --mono) están definidas en
   `.aula{…}` y AQUÍ NO EXISTEN. Sin valor de reserva, `background:var(--ink)`
   no resuelve, la burbuja sale TRANSPARENTE y su texto blanco se lee encima
   del contenido de debajo: parece un problema de solape cuando lo que pasa es
   que no tiene fondo.
   Por eso se apoya en --ds-ink, --ds-sans y --ds-mono, que sí están en :root,
   y además lleva literales detrás. Regla general para cualquier cosa colgada
   de <body>: o hereda el ámbito, o se trae sus propios valores. */
.aula-glosario-burbuja{position:absolute;z-index:60;max-width:340px;background:#1c1a17;background:var(--ds-ink,#1c1a17);color:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 10px 30px rgba(20,20,30,.28);font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-family:var(--ds-sans,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);font-size:15px;line-height:1.5}
.aula-glosario-burbuja[hidden]{display:none}
.aula-glosario-burbuja .glo-termino{display:block;font-family:ui-monospace,Menlo,monospace;font-family:var(--ds-mono,ui-monospace,Menlo,monospace);font-size:12px;letter-spacing:.09em;text-transform:uppercase;opacity:.75;margin-bottom:5px}
/* Pico. Apunta hacia arriba por defecto (la burbuja va debajo del término) y se
   le da la vuelta cuando el JS la coloca encima por falta de sitio. */
.aula-glosario-burbuja::after{content:"";position:absolute;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom-color:#1c1a17;border-bottom-color:var(--ds-ink,#1c1a17);top:-14px}
.aula-glosario-burbuja.arriba::after{top:auto;bottom:-14px;border-bottom-color:transparent;border-top-color:#1c1a17;border-top-color:var(--ds-ink,#1c1a17)}
@media (max-width:520px){
  .aula-glosario-burbuja{max-width:calc(100vw - 24px);font-size:14.5px}
}
}
}
}

/* ---------- ejercicios ----------
   Piezas interactivas del aula. El aspecto vive aquí, la mecánica en
   assets/js/aula-ejercicios.js y los datos en aula-ejercicios.php: si se
   añade una mecánica nueva, casi todo esto se reaprovecha.
   Índigo, como la calculadora: es una herramienta, no trabajo del alumno. */
/* El contenedor va tintado y con borde índigo: dice "esto no es texto, esto se
   toca". Las dos piezas comparten exactamente el mismo envoltorio para que se
   reconozcan entre sí, y solo cambia el rótulo y su icono.
   REGLA que se deriva de eso: todo lo que dentro sea una superficie sobre la
   que se actúa (filas, opciones, el estímulo) va en BLANCO sólido. Si heredara
   el tinte se perdería el contraste y, en el revelado, el tachado dejaría de
   leerse. Por eso más abajo no queda ni un --nav-soft como fondo interior. */
.aula .aula-ejercicio{border:1px solid var(--nav);border-radius:var(--r);background:var(--nav-soft);padding:30px 32px;margin:26px 0 10px}
.aula .ej-rotulo{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--nav);margin-bottom:16px}
.aula .ej-rotulo svg{width:16px;height:16px;flex:none}
.aula .ej-intro{margin:0 0 18px;font-size:15.5px;color:var(--ink-soft);max-width:var(--medida-ej,62ch)}
.aula .ej-btn{font-family:var(--sans);font-weight:700;font-size:14.5px;line-height:normal;padding:11px 22px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.aula .ej-btn:hover:not(:disabled){border-color:var(--ink)}
.aula .ej-btn-principal{background:var(--ink);border-color:var(--ink);color:#fff}
.aula .ej-btn-principal:hover:not(:disabled){background:var(--nav);border-color:var(--nav)}
.aula .ej-btn:disabled{opacity:.4;cursor:not-allowed}

/* cronómetro */
.aula .ej-cuenta{font-family:var(--mono);font-size:52px;font-weight:600;color:var(--nav);line-height:1;text-align:center;margin-bottom:20px}
.aula .ej-estimulo{display:flex;gap:22px;align-items:flex-start;padding:22px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line)}
.aula .ej-portada{flex:none;width:100px;height:155px;border-radius:4px;background:#2B3A67;box-shadow:0 8px 18px rgba(18,19,26,.22);padding:12px 10px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.aula .ej-portada-titulo{font-family:var(--display);font-weight:700;font-size:12.5px;line-height:1.2;color:#fff}
.aula .ej-portada-autor{font-family:var(--sans);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.aula .ej-sinopsis{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}

/* preguntas */
.aula .ej-pregunta{margin-bottom:20px}
.aula .ej-enunciado{margin:0 0 10px;font-size:15.5px;font-weight:700;color:var(--ink)}
.aula .ej-opciones{display:flex;flex-wrap:wrap;gap:8px}
.aula .ej-opcion{font-family:var(--sans);font-size:14px;line-height:normal;padding:9px 15px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink-soft);cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.aula .ej-opcion:hover{border-color:var(--nav);color:var(--nav)}
.aula .ej-opcion.elegida{border-color:var(--nav);background:var(--nav);color:#fff;font-weight:700}

/* resultado */
.aula .ej-marcador{margin:0 0 16px;font-size:19px;color:var(--ink-soft)}
.aula .ej-marcador strong{font-family:var(--display);font-size:26px;color:var(--ink)}
.aula .ej-repaso{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}
.aula .ej-repaso li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.aula .ej-repaso li b{color:var(--ink)}
.aula .ej-marca{font-family:var(--mono);font-size:14px}
.aula .ej-repaso .bien .ej-marca{color:var(--nav)}
.aula .ej-repaso .mal .ej-marca{color:#B3261E}
.aula .ej-cierre{padding:16px 18px;border-radius:var(--r-sm);background:var(--work-soft);font-size:15px;line-height:1.6;color:var(--work-ink-2);margin-bottom:16px}
.aula .ej-cierre strong{color:var(--ink)}
.aula .ej-cierre.acierto{background:var(--paper);border:1px solid var(--nav);color:var(--ink)}

/* revelado: líneas elegibles */
.aula .ej-lineas{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.aula .ej-linea{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:baseline;text-align:left;font-family:var(--sans);padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--paper);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.aula .ej-linea:hover:not(:disabled){border-color:var(--nav);box-shadow:0 4px 14px rgba(53,82,239,.14)}
.aula .ej-linea:disabled{cursor:default}
.aula .ej-linea-tipo{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.aula .ej-linea-texto{font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.aula .ej-linea.es-historia .ej-linea-tipo{color:var(--nav)}
.aula .ej-linea.correcta{border-color:var(--nav);box-shadow:0 0 0 1px var(--nav)}
.aula .ej-linea.correcta .ej-linea-texto{color:var(--ink);font-weight:600}
.aula .ej-linea.fallada{border-color:#E5B4B1;background:#FDF3F2}
.aula .ej-linea.gastada{opacity:.5;text-decoration:line-through;text-decoration-color:var(--ink-faint)}
@media (max-width:640px){
  .aula .ej-linea{grid-template-columns:1fr;gap:5px}
  .aula .ej-estimulo{flex-direction:column;align-items:center;text-align:center}
  /* a 390px el ancho útil es de 198px y "EJERCICIO CRONOMETRADO" a 14px se
     partía en dos líneas, que en un eyebrow se lee como un fallo. Se recupera
     sitio con menos padding y se ajusta el rótulo lo justo para que entre. */
  .aula .aula-ejercicio{padding:22px 18px}
  .aula .ej-rotulo{font-size:12.5px;letter-spacing:.05em;gap:7px}
  .aula .ej-rotulo svg{width:15px;height:15px}
}
/* por debajo de 400px el rótulo más largo ("EJERCICIO CRONOMETRADO") todavía
   se comía el ancho justo: un escalón más y entra hasta en 320px */
@media (max-width:400px){
  .aula .aula-ejercicio{padding:20px 14px}
  .aula .ej-rotulo{font-size:11.5px;letter-spacing:.03em;gap:6px}
  .aula .ej-rotulo svg{width:14px;height:14px}
}
/* 320px (el iPhone SE viejo) deja 164px útiles y al rótulo largo le sobraba
   justo el espaciado entre letras */
@media (max-width:340px){
  /* En monoespaciada el avance por carácter es fijo, así que quitar espaciado
     apenas ahorra: el rótulo largo (22 caracteres) solo entra bajando el
     cuerpo. Medido: 164px útiles, hacen falta menos de 160. */
  .aula .ej-rotulo{font-size:10.5px;letter-spacing:0;gap:5px}
  .aula .ej-rotulo svg{width:13px;height:13px}
}

/* ---------- calculadora del módulo ----------
   Herramienta que usa el lector, no trabajo suyo: va en índigo, no en ámbar.
   Sin backend: la cuenta se hace en el navegador (ver aula.js). */
.aula .calc{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden;margin:22px 0 8px}
.aula .calc-cabecera{padding:16px 22px;border-bottom:1px solid var(--line);background:var(--canvas)}
.aula .calc-cabecera .mono{color:var(--nav);display:block;margin-bottom:5px}
.aula .calc-cabecera h3{font-family:var(--display);font-size:18px;color:var(--ink)}
.aula .calc-campos{padding:20px 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.aula .calc-campos label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.aula .calc-campos .pista{display:block;font-weight:400;font-size:12px;color:var(--ink-faint);margin-top:5px}
.aula .calc-salida{padding:0 22px 22px}
.aula .calc-linea{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.aula .calc-linea .et{font-size:14.5px;color:var(--ink-soft)}
.aula .calc-linea .va{font-family:var(--mono);font-size:19px;color:var(--ink);white-space:nowrap}
.aula .calc-linea.destacada .va{font-size:26px;font-weight:600}
.aula .calc-escalon{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:999px;background:var(--nav-soft);color:var(--nav)}
.aula .calc-escalon.bajo{background:var(--work-soft);color:var(--work-ink)}
.aula .calc-aviso{margin-top:14px;padding:13px 16px;border-radius:var(--r-sm);background:var(--work-soft);font-size:14px;line-height:1.55;color:var(--work-ink-2)}
.aula .calc-aviso strong{color:var(--ink)}
.aula .calc-legal{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--ink-faint)}

/* La ficha de cuenta REAL está más arriba, con las clases .ficha-*. Lo que
   había aquí era la maqueta estática (rejilla de dos columnas en ámbar, con
   una .box a la derecha) que sustituyó el shortcode [aula_ficha]. Se retira:
   venía DESPUÉS en el fichero, así que ganaba por orden y pintaba la caja
   nueva a dos columnas. */
/* line-height explícito: ds.css fija .dsx .btn{line-height:1} con la misma
   especificidad (0,2,0) y solo gana por orden de carga. Mejor no depender de eso. */
/* white-space:normal es obligatorio: ds.css fija .dsx .btn{white-space:nowrap}
   y el rótulo del botón no cabía a 390px, así que la ficha se desbordaba
   ~44px por dentro (no se veía en el scroll de la página, solo midiendo). */
.aula .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:15px;line-height:normal;white-space:normal;text-align:center;padding:12px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;background:var(--ink);color:#fff;width:100%}
.aula .btn:hover{background:var(--nav)}

/* ---------- índice del curso (la página padre /curso/) ----------
   Incluye el primer estado "bloqueado" del sistema: el módulo se ve, se lee de
   qué va y se entiende que todavía no se puede abrir. No es un <a>, así que no
   hay nada que pulsar ni foco que atrapar. */
.aula .indice{display:flex;flex-direction:column;gap:10px;margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}
.aula .mod-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 20px;background:var(--paper);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.aula .mod-row .num{display:inline-flex;align-items:center;gap:9px}
.aula a.mod-row:hover{border-color:var(--nav);box-shadow:0 10px 24px rgba(18,19,26,.06);transform:translateY(-2px)}
.aula .mod-row .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;background:var(--nav-soft);color:var(--nav)}
.aula .mod-row .info{display:block;min-width:0}
.aula .mod-row .tt{display:block;font-family:var(--display);font-weight:600;font-size:17.5px;line-height:1.28;letter-spacing:-.01em;color:var(--ink)}
.aula .mod-row .de{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.aula .mod-row .estado{justify-self:end;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--nav-soft);color:var(--nav);white-space:nowrap}
.aula .mod-row.pendiente{background:var(--canvas);border-style:dashed}
.aula .mod-row.pendiente .n{background:var(--paper);color:var(--ink-faint);border:1px solid var(--line)}
.aula .mod-row.pendiente .tt{color:var(--ink-soft)}
.aula .mod-row.pendiente .de{color:var(--ink-faint)}
.aula .mod-row.pendiente .estado{background:transparent;color:var(--ink-faint);border:1px solid var(--line)}
/* Distintivo de borrador. Solo lo ve quien puede editar la página (la decisión
   se toma en PHP por capacidad de usuario, nunca aquí). Va en ámbar, el color
   de "tu trabajo", para que no se confunda con un estado del lector. */
.aula .badge-borrador{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--work-soft);color:var(--work-ink);white-space:nowrap;vertical-align:middle}
.aula .mods .badge-borrador{margin-left:7px;font-size:9px;padding:2px 7px}
.aula a.mod-row.es-borrador{border-style:dashed;border-color:var(--work)}

.aula .indice-cta{margin-top:30px}
/* .btn nace a ancho completo (vive dentro de la caja de la ficha); suelto, no */
.aula .btn.btn-auto{width:auto;padding:14px 26px}
@media (max-width:640px){
  .aula .ab-mini{grid-template-columns:1fr}
  .aula .ab-mini .aula-figura{max-width:180px}
  .aula .mod-row{grid-template-columns:34px minmax(0,1fr);gap:14px}
  .aula .mod-row .estado{grid-column:2;justify-self:start;margin-top:8px}
  .aula .blk{grid-template-columns:34px minmax(0,1fr);gap:10px}
  .aula .sheet{padding:26px 18px}
}

/* ---------- pie de módulo ---------- */
.aula .mod-foot{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.aula .step-nav{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.aula .step-nav .mono{color:var(--ink-faint);display:block;margin-bottom:6px}
.aula .step-nav .tt{font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink)}
.aula .step-nav.next{background:var(--ink);border-color:var(--ink)}
.aula .step-nav.next .mono{color:var(--work)}
.aula .step-nav.next .tt{color:#fff}
/* Bloque de salida: la advertencia honesta + el enlace al servicio. Va fuera del
   camino de apartados y antes del pie de navegación. Deliberadamente neutro (no
   ámbar): es una advertencia, no una ficha de trabajo, y lleva el único enlace
   comercial del módulo — cuanto menos parezca un anuncio, mejor. */
.aula .exit{margin-top:26px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;font-size:14.5px;color:var(--ink-soft)}
.aula .exit h3{font-family:var(--display);font-size:17.5px;line-height:1.3;color:var(--ink);margin-bottom:12px}
.aula .exit p{margin:0 0 12px;max-width:var(--medida-exit,74ch)}
.aula .exit p:last-of-type{margin-bottom:0}
.aula .exit .salida-cta{display:inline-block;margin-top:16px;font-weight:700;font-size:14.5px}
.aula .exit .salida-cta:hover{text-decoration:underline}
/* Solo para lectores de pantalla. Un enlace que abre pestaña nueva tiene que
   decirlo: verlo es obvio, oírlo no. */
.aula .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* marca visual de que el enlace se va del sitio */
.aula .salida-cta[target="_blank"]::after{content:" ↗";font-weight:400}

/* ---------- escala de lectura ----------
   --cuerpo-escala la mueve el control (aula.js) y multiplica SOLO el texto de
   los apartados: ni la barra, ni el panel, ni el índice, ni las etiquetas de
   estado, ni la ficha. Los interlineados del aula son sin unidad, así que
   crecen solos en proporción y el texto no se apelmaza.
   Estas reglas van al final a propósito: pisan al componente por especificidad
   (.aula .path .x) y por orden. */
.aula{--cuerpo-escala:1}
.aula .path .body > p{font-size:calc(16.5px * var(--cuerpo-escala))}
.aula .path .body li{font-size:calc(16.5px * var(--cuerpo-escala))}
.aula .path .nota-cuerpo p{font-size:calc(17px * var(--cuerpo-escala))}
.aula .path .blk h2{font-size:calc(24px * var(--cuerpo-escala))}
.aula .path .blk h3{font-size:calc(18.5px * var(--cuerpo-escala))}
.aula .path .blk h4{font-size:calc(17px * var(--cuerpo-escala))}
.aula .path .pull{font-size:calc(17px * var(--cuerpo-escala))}
.aula .path .cause h3{font-size:calc(17.5px * var(--cuerpo-escala))}
.aula .path .cause p{font-size:calc(14.5px * var(--cuerpo-escala))}
.aula .path .ab p{font-size:calc(15.5px * var(--cuerpo-escala))}

/* ---------- colapsar el panel lateral ----------
   Los dos botones los crea aula.js, no la plantilla: sin JS no colapsa nada y un
   botón muerto es peor que ningún botón (mismo criterio que el control de tamaño
   de lectura). Aquí solo se define el aspecto y el estado.

   SOLO por encima de 1020px. Por debajo el panel deja de ser sticky y pasa a
   estático encima del contenido (ver la media query de abajo): ahí no compite con
   la lectura, así que el control sobra. Por eso los botones nacen en display:none
   y solo la media query de escritorio los enciende. */
.aula .rail-cerrar,.aula .rail-abrir{display:none}

@media (min-width:1021px){
  /* La transición va sobre el contenedor, no sobre el panel: lo que se anima es
     el reparto de columnas. column-gap entra en la transición porque si no, los
     26px de separación se quedarían ahí con el panel ya a cero — el "ancho
     fantasma" clásico de colapsar solo la columna. */
  .aula .shell{transition:grid-template-columns .28s ease,column-gap .28s ease}
  .aula .shell.is-rail-oculto{grid-template-columns:0 minmax(0,1fr);column-gap:0}

  /* Plegar el raíl ya ensanchaba la columna, pero el contenido no se enteraba:
     párrafos, listas y figuras estaban topados a 68ch a fuego, así que el sitio
     ganado se quedaba en blanco a la derecha. Al liberar la medida, el texto
     ocupa la columna entera y deja de haber borde dentado: hasta ahora una tabla
     llegaba al final de la columna —las cajas nunca tuvieron tope— y el párrafo
     de debajo se quedaba a media columna.
     Con el raíl abierto la medida sigue en 68ch a propósito: ahí no se ha pedido
     sitio y la línea larga solo perjudica la lectura.
     Se sueltan TODOS los topes de la unidad a la vez —título, entradilla,
     cuerpo, regla y cierre—, porque soltar unos y no otros es peor que no
     soltar ninguno: deja el borde derecho en escalera.
     Única excepción a propósito: .aula-nota, que no es una medida de lectura
     sino una tarjeta de 460px; estirada hasta el final de la columna sería un
     recuadro enorme medio vacío.
     Si algún día se prefiere ancho pero acotado, se cambian SOLO estos valores
     por unos con tope (p. ej. 88ch). Es el único sitio que hay que tocar. */
  .aula .shell.is-rail-oculto{
    --medida:none; --medida-goal:none; --medida-titulo:none;
    --medida-regla:none; --medida-ej:none; --medida-exit:none;
  }

  /* El panel se recorta mientras encoge, para que no se vea el texto
     comprimiéndose a medio camino. La visibilidad cae AL FINAL (delay = misma
     duración), y de paso es lo que lo saca del orden de tabulación: un panel
     invisible al que se puede tabular es una trampa para quien va con teclado. */
  .aula .shell.is-rail-oculto .rail{overflow:hidden;visibility:hidden;transition:visibility 0s linear .28s}

  /* Al cargar la página el estado guardado se aplica de golpe, sin animar: si no,
     cada módulo empezaría con el panel abierto y se cerraría solo delante de los
     ojos del lector. */
  .aula .shell.sin-animacion,.aula .shell.sin-animacion .rail{transition:none}

  .aula .rail-head{position:relative}
  /* el rótulo deja sitio al botón; el h2 va debajo y no lo alcanza */
  .aula .rail-head .mono{padding-right:32px}

  /* Aspecto común de los dos botones. Sin `display` a propósito: el de reabrir
     solo existe con el panel colapsado, y si se enciende aquí se queda visible
     (y tabulable) encima del contenido con el panel ya abierto. */
  .aula .rail-cerrar,.aula .rail-abrir{place-items:center;padding:0;width:26px;height:26px;
    border:1px solid var(--line);border-radius:999px;background:var(--paper);
    color:var(--ink-faint);cursor:pointer;transition:border-color .15s ease,color .15s ease}
  .aula .rail-cerrar:hover,.aula .rail-abrir:hover{border-color:var(--ink);color:var(--ink)}
  .aula .rail-cerrar{display:grid;position:absolute;top:14px;right:14px}

  /* El de reabrir vive dentro del contenido y no en la rejilla: un tercer hijo de
     .shell colocado en la celda 1/1 empujaría al panel y al main a otras celdas y
     desmontaría la portada entera. Sticky para que siga al lector mientras baja, y
     con margen inferior negativo igual a su altura para no ocupar ni un píxel de
     flujo: se apoya sobre el borde izquierdo de la hoja, mitad dentro y mitad
     fuera. Los -13px son la mitad de su ancho; a 1021px de ventana eso lo deja a
     15px del borde, así que no asoma por fuera ni provoca scroll horizontal. */
  .aula .shell.is-rail-oculto .rail-abrir{display:grid}
  .aula .rail-abrir{position:sticky;top:84px;z-index:6;
    margin:16px 0 -42px -13px;box-shadow:0 1px 4px rgba(24,49,83,.14)}
}

@media (max-width:1020px){
  .aula .shell{grid-template-columns:1fr;padding:18px 18px 48px}
  /* en una columna el panel deja de ser sticky: fuera límite y scroll interno */
  .aula .rail{position:static;max-height:none;overflow:visible}
  .aula .mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px}
  .aula .sheet{padding:28px 22px}
  .aula .causes,.aula .ab,.aula .mod-foot{grid-template-columns:1fr}
  .aula .aula-meter .track{width:80px}
  .aula .aula-back,.aula .aula-user span:not(.dot){display:none}
}
/* Un nombre de fichero largo en <code> («titulo_v02_corregido_NM.docx») no tiene
   dónde partirse y empujaba 4px la página de la unidad 4 en móvil. */
.aula code{overflow-wrap:anywhere}

/* La barra superior en móvil. A 390px la suma de marca + medidor + botón del
   trabajo pasaba en 7px del ancho de la pantalla (el padding de 28px y el hueco
   de 22px están pensados para escritorio) y toda página del aula se movía de
   lado. Se ajusta la barra, no se recorta nada: el punto del botón, la barra de
   progreso y el porcentaje siguen. Afecta a los tres cursos. */
@media (max-width:520px){
  .aula .aula-bar .in{padding:0 16px;gap:12px}
  .aula .aula-meter{gap:8px}
  .aula .aula-meter .track{width:56px}
  .aula .aula-meter .pct{min-width:0}
  .aula .aula-user{padding:7px 9px}
}
@media (prefers-reduced-motion:reduce){.aula *{transition:none!important}}

/* ---------- opinión del alumno ----------
   «¿Te ha servido este módulo?», al final de cada pieza. Ver aula-opinion.php
   (el marcado) y assets/js/aula-opinion.js (el motor).

   Misma forma que .aula-toggle —caja con borde, radio, fondo de página—
   porque es del mismo orden: material aparte, no cuerpo del curso. El color
   es --nav (índigo), la voz del curso, no --work (ámbar, «tu trabajo»):
   opinar no es una tarea del alumno sobre SU libro, es hablar del curso. */
.aula .aula-opinion{margin:34px 0;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.aula .opinion-pregunta{margin:0 0 14px;font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink)}
.aula .opinion-caras{display:flex;flex-wrap:wrap;gap:10px}
/* Botones de número, no de estrella ni de emoji: un emoji cambia de dibujo
   según el sistema operativo y una estrella en solitario no dice si 1 es
   "malo" o "poco lleno". El número con su aria-label es lo único que no deja
   ambigüedad, y el rótulo de cada uno («Nada»…«Mucho») ya la resuelve para
   quien lee con lector de pantalla. */
.aula .opinion-cara{width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:16px;font-weight:600;color:var(--ink-soft);background:var(--canvas);border:1.5px solid var(--line);border-radius:50%;cursor:pointer;transition:border-color .15s ease,color .15s ease,transform .15s ease}
.aula .opinion-cara:hover:not(:disabled){border-color:var(--nav);color:var(--nav)}
.aula .opinion-cara:focus-visible{outline:2px solid var(--nav);outline-offset:2px}
.aula .opinion-cara.is-elegida{background:var(--nav);border-color:var(--nav);color:#fff;transform:scale(1.08)}
/* Las no elegidas se atenúan tras el tap: sigue claro cuál se pulsó sin dejar
   los cinco círculos igual de vivos, que es lo que confundía en la prueba. */
.aula .opinion-cara:disabled:not(.is-elegida){opacity:.4}
.aula .opinion-cara:disabled{cursor:default}
.aula .opinion-aviso{margin:14px 0 0;font-size:14.5px;color:var(--ink-soft);min-height:1.4em}
.aula .opinion-mas{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.aula .opinion-mas summary{cursor:pointer;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--nav);list-style:none}
.aula .opinion-mas summary::-webkit-details-marker{display:none}
.aula .opinion-mas .opinion-texto{margin-top:12px;min-height:70px;resize:vertical}
.aula .opinion-pie{display:flex;align-items:center;gap:14px;margin-top:10px}
.aula .opinion-enviar{width:auto;padding:10px 20px;font-size:14px}
.aula .opinion-estado{font-size:13.5px;color:var(--ink-soft)}
@media (max-width:520px){
  .aula .aula-opinion{padding:18px}
  .aula .opinion-cara{width:40px;height:40px}
}

/* ---------- la fotocopia ----------
   Lecturas enlazadas por módulo, con diseño APARTE del resto del aula: papel
   color crema, borde izquierdo sepia, como una fotocopia de verdad. Variables
   propias del recuadro (no --ds-human/--work, que en la ficha significa «tu
   trabajo»; esto es material de fuera). Los dos tonos de texto gris
   (foto-meta/foto-contiene) y el sepia de la etiqueta están comprobados con
   AA (ratio ≥4.5:1) sobre --aula-fotocopia-papel — si cambias cualquiera de
   los dos, vuelve a comprobar el contraste. Ver aula-opinion para el mismo
   razonamiento de «color aparte» aplicado a otro componente. */
.aula .aula-fotocopia{
  --aula-fotocopia-papel:#F7F1E6;
  --aula-fotocopia-sepia:#9A5B2E;
  margin:34px 0;padding:26px 28px;background:var(--aula-fotocopia-papel);border-left:4px solid var(--aula-fotocopia-sepia);border-radius:var(--r-sm)
}
.aula .aula-fotocopia .foto-etiqueta{display:block;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--aula-fotocopia-sepia);margin-bottom:18px}
/* Separación entre lecturas con una raya fina, no con tarjetas aparte: con
   4 o 5 entradas, una caja dentro de otra caja se ve apelotonado. La raya
   basta para que el ojo sepa dónde empieza la siguiente. */
.aula .foto-lista{display:flex;flex-direction:column;gap:24px}
/* Explica qué es el recuadro y para qué sirve, antes de la lista: entra como
   primer hijo del flex (texto, raya, primera lectura, raya, siguiente...),
   así que NO es .foto-item y por eso la primera lectura de verdad ya no es
   :first-child — recibe su propia raya, que separa intro de lecturas. */
.aula .foto-intro{margin:0;font-family:var(--sans);font-size:14.5px;line-height:1.55;color:#4A3E28}
.aula .foto-intro strong{font-weight:700;color:#2B2308}
.aula .foto-item{padding-top:24px;border-top:1px solid rgba(154,91,46,.22)}
.aula .foto-item:first-child{padding-top:0;border-top:0}
.aula .foto-titulo{margin:0 0 5px;font-family:var(--display);font-size:17.5px;font-weight:600;line-height:1.3;letter-spacing:-.005em}
.aula .foto-titulo a{color:#2B2308;text-decoration:underline;text-decoration-color:rgba(154,91,46,.55);text-underline-offset:3px;text-decoration-thickness:1.5px}
.aula .foto-titulo a:hover{color:var(--aula-fotocopia-sepia);text-decoration-color:var(--aula-fotocopia-sepia)}
/* Etiqueta PDF: solo cuando el enlace es un PDF, nunca inventada. La pone el
   conversor, no el shortcode, a partir de la URL del .md. */
.aula .foto-pdf{display:inline-block;margin-left:7px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em;color:#7A4620;border:1px solid rgba(154,91,46,.45);border-radius:3px;padding:1px 5px;vertical-align:1px}
.aula .foto-meta{margin:0 0 10px;font-family:var(--sans);font-size:13.5px;color:#6F5E46}
.aula .foto-contiene{margin:0 0 10px;font-family:var(--sans);font-size:13.5px;color:#6F5E46;font-style:italic}
.aula .foto-fijate{margin:0;font-family:var(--sans);font-size:15.5px;line-height:1.62;color:#3D3420}
.aula .foto-fijate strong{font-weight:700;color:#2B2308}
@media (max-width:520px){
  .aula .aula-fotocopia{padding:20px 18px 20px 16px}
  .aula .foto-titulo{font-size:16.5px}
  .aula .foto-lista{gap:20px}
  .aula .foto-item{padding-top:20px}
}

/* SOLO AULA EMPRESAS (9-oct-2026): mensaje de cuenta atrás bajo el botón
   "Marcar como leído" mientras no se ha registrado, en servidor, el tiempo
   mínimo de ese apartado — lo pinta aula-empresas-curso.js, nunca
   aula.js. Los otros tres cursos (gratuitos, sin backend) no tienen tiempo
   mínimo y nunca generan este elemento, así que esta regla no les afecta
   en nada. Mismas variables que el resto de .blk (--ink-faint, --line) para
   no desentonar visualmente con un botón que SÍ es del aula gratuita. */
.aula .blk .mark:disabled{opacity:.55;cursor:default}
.aula .blk .mark:disabled:hover{border-color:var(--line);color:var(--ink-soft)}
.aula .ae-tiempo-min{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--ink-faint);max-width:38em}

/* SOLO AULA EMPRESAS (9-oct-2026): el cuestionario de "antes de empezar"
   (módulo 0) y "tu punto de llegada" (módulo 7) — [aula_cuestionario] en
   aula-empresas.php pinta el formulario, aula-empresas-cuestionario.js lo
   gestiona. Mismo criterio de aislamiento que .ae-tiempo-min: estas reglas
   no generan nunca elementos en los otros tres cursos. */
.aula .ae-cuestionario{margin-top:22px;display:flex;flex-direction:column;gap:22px}
.aula .ae-cuestionario-pregunta{border:0;padding:0;margin:0}
.aula .ae-cuestionario-pregunta legend{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);line-height:1.4;padding:0;margin:0 0 10px}
.aula .ae-cuestionario-opciones{display:flex;flex-wrap:wrap;gap:8px}
.aula .ae-cuestionario-opciones label{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.aula .ae-cuestionario-opciones label:has(input:checked){border-color:var(--nav);background:var(--nav-soft);color:var(--nav)}
.aula .ae-cuestionario-opciones input{margin:0}
.aula .ae-cuestionario-enviar{align-self:flex-start;margin-top:4px;font-family:var(--sans);font-size:14px;font-weight:700;color:#fff;background:var(--nav);border:0;border-radius:var(--r-sm);padding:11px 22px;cursor:pointer}
.aula .ae-cuestionario-enviar:disabled{opacity:.6;cursor:default}
.aula .ae-cuestionario-estado{margin-top:10px;font-family:var(--sans);font-size:13.5px;color:var(--ink-faint)}

.aula .ae-cuestionario-comparacion{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.aula .ae-cuestionario-comparacion h3{font-family:var(--display);font-size:17px;font-weight:600;margin:0 0 16px}
.aula .ae-comparacion-tabla{display:flex;flex-direction:column;gap:14px}
.aula .ae-comparacion-fila{padding:12px 14px;border-radius:var(--r-sm);background:var(--canvas)}
.aula .ae-comparacion-fila.ae-comparacion-mejora{background:var(--nav-soft)}
.aula .ae-comparacion-pregunta{margin:0 0 6px;font-family:var(--sans);font-size:13.5px;color:var(--ink);line-height:1.4}
.aula .ae-comparacion-valores{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;color:var(--ink-soft)}
.aula .ae-comparacion-flecha{color:var(--ink-faint);font-weight:700}
.aula .ae-comparacion-chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--nav);background:#fff;border:1px solid var(--nav);border-radius:999px;padding:2px 9px}
@media (max-width:520px){
  .aula .ae-cuestionario-opciones label{font-size:13px;padding:6px 12px}
}