/* Rediseño fase 3 (Task 5): piel de la pantalla del ensayo y del resultado. Fuente visual: diseno/rediseno-oct/ensayo-plantilla.html
   (legible) y ensayo-17.html (armada). Solo presentación sobre el motor de app/app.js: el reloj, las respuestas, la corrección y
   el puntaje no cambian. Va después de ultra.css y de rd-ensayar.css (index.html y construir.js · MODULOS).
     · .ensayo.rd-ensayo.rd-oscuro: la vista del ensayo (todo modo salvo Estudiar y el repaso de hoy). No lleva fondo, isolation
       ni z-index propios: la página entera se oscurece y la antigravedad es la capa de página (app/rd-capa.css y .js), y la
       hoja de respuestas del celular sigue sobre la barra;
     · cabecera (la barra del ensayo de app.js · pintarBarra): la prueba en ceja lima, el reloj de anillo .rd-reloj con
       --rd-avance (lo que queda, de 1 a 0; ámbar .rd-reloj--alerta con menos de 10 min) y la línea .rd-avance de respondidas;
     · pregunta, alternativas en tarjetas siempre fijas abajo (.alternativas--fijas, lámina aprobada por Mario el 28-oct-2026),
       hoja de respuestas en filas hacia abajo (celular y computador) y el pie «‹ Marcar ›» del computador en píldoras;
     · .rd-resultados.rd-oscuro: el resultado del diagnóstico, con las cifras, la grilla .rd-grilla (verde correcta, roja incorrecta,
       gris omitida) y la revisión; lo que lleva a contenidos de Estudiar no se muestra (los errores llegan a Estudiar por dentro). El
       de los ensayos y su repaso son de app/rd-resultado.css (web v2, Task 13). */

/* La página oscura de las vistas del motor (rd-capa.css) también lleva oscuras la barra y las pestañas del rediseño: los
   mismos valores de :root[data-theme="dark"] en rd-nav.css, para el resultado en el tema claro */
html:has(.ensayo.rd-oscuro, #u-main.rd-oscuro) {
  --rd-lima: #D4F57B/*tema:fijo*/;
  --rd-tope: rgba(12, 14, 16, .78)/*tema:fijo*/;
  --rd-vidrio: rgba(12, 14, 16, .5)/*tema:fijo*/;
  --rd-suave: rgba(245, 245, 240, .08)/*tema:fijo*/;
  --rd-tabs: rgba(12, 14, 16, .84)/*tema:fijo*/;
  --rd-punto-brillo: 0 0 8px #D4F57B/*tema:fijo*/;
}

/* ================= Cabecera del ensayo ================= */
.barra--ensayo:has(~ .rd-ensayo) {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: transparent;
}
.barra--ensayo:has(~ .rd-ensayo) .barra-salir { background: var(--surface-2); color: var(--ink); border-radius: 999px; }
.barra--ensayo:has(~ .rd-ensayo) .barra-salir:hover { background: var(--surface-3); }
.barra--ensayo:has(~ .rd-ensayo) .barra-titulo b { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text, var(--accent)); }
.barra--ensayo:has(~ .rd-ensayo) .barra-titulo span { font-size: 16px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); }
/* Web v2 (Task 11, spec 4.10, lámina 07): la ceja («M1 · Tradicional») y el título corto («Inv 2026») alineados a la izquierda, uno sobre otro; en el
   computador el bloque va al centro de la barra */
.barra--ensayo:has(~ .rd-ensayo) .barra-titulo { justify-items: start; text-align: left; }
/* La ceja del diagnóstico (app/diagnostico.js · cabecera): la larga en el computador y la corta en el celular, en una línea */
.barra--ensayo .barra-titulo > b > span.rd-ceja-larga,
.barra--ensayo .barra-titulo > b > span.rd-ceja-corta { font: inherit; letter-spacing: inherit; color: inherit; white-space: nowrap; }
.barra--ensayo .barra-titulo > b > span.rd-ceja-corta { display: none; }
/* El reloj de anillo: el arco lima es lo que queda y se vacía con el tiempo. Web v2 (Task 11, [C23]): dentro, solo los minutos (.rd-reloj-min), los que
   quedan o, sin cuenta regresiva, los que lleva, con el anillo lleno. Mide 44 × 44, el alto de la barra del celular (53 px con sus 4 + 4 y el filete) */
.barra--ensayo .barra-crono.rd-reloj { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; gap: 0; border-radius: 50%; background: none; font-family: inherit; }
.barra--ensayo .barra-crono.rd-reloj .rd-reloj-min { position: relative; font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.barra--ensayo .barra-crono.rd-reloj .rd-reloj-anillo { position: absolute; inset: 0; width: 44px; height: 44px; }
.rd-reloj-anillo,
.barra--ensayo .barra-crono .rd-reloj-anillo {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--rd-avance, 1) * 360deg), var(--surface-3) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000/*tema:fijo*/ calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000/*tema:fijo*/ calc(100% - 3px));
}
/* Ámbar con menos de 10 minutos (también bajo 5, donde el motor marca .alerta) */
.barra--ensayo .barra-crono.rd-reloj--alerta .rd-reloj-min,
.barra--ensayo .barra-crono.rd-reloj.alerta .rd-reloj-min { color: var(--m-ranking); }
.rd-reloj--alerta .rd-reloj-anillo { background: conic-gradient(var(--m-ranking) calc(var(--rd-avance, 1) * 360deg), var(--surface-3) 0); }
/* La línea de abajo: el motor dibuja el tiempo en .barra-progreso, que ya muestra el anillo; aquí, el avance de respondidas */
.barra--ensayo:has(~ .rd-ensayo) > .barra-progreso { display: none; }
.barra--ensayo:has(~ .rd-ensayo) > div.rd-avance:not(.barra-progreso):not(.barra-crono) { display: block; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.rd-avance i { display: block; height: 100%; background: var(--accent); transition: width .4s var(--ease); }

/* ================= La pregunta ================= */
.rd-ensayo .panel-cab .panel-numero { font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--ink-3); }
.rd-ensayo:not(.ensayo--transporte) .panel-cab .panel-numero { text-transform: uppercase; }
.rd-ensayo .panel-cab .etiqueta { font-size: 12px; }
.rd-ensayo .enunciado { font-size: 18px; line-height: 1.55; }
/* Los exponentes y subíndices no bajan de 12 px con el enunciado de 16 px del celular */
.rd-ensayo :is(.enunciado, .alternativa) :is(sup, sub) { font-size: max(12px, .72em); }
/* Alternativas en tarjetas, como el prototipo: letra en círculo y la elegida en lima */
.rd-ensayo .alternativas { gap: 10px; overflow: visible; border: 0; border-radius: 0; background: none; }
.rd-ensayo .alternativa,
.rd-ensayo .alternativa:last-child { min-height: 56px; gap: 14px; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); font-size: 16px; transition: border-color .2s, background-color .2s, transform .15s; }
.rd-ensayo .alternativa:hover { border-color: var(--ink-3); background: var(--surface); }
.rd-ensayo .alternativa:active:not([disabled]) { transform: scale(.99); }
.rd-ensayo .alternativa-letra { width: 30px; height: 30px; border: 1.5px solid var(--ink-3); font-family: inherit; font-size: 13px; font-weight: 800; color: var(--ink); }
.rd-ensayo .alternativa[aria-pressed="true"] { border-color: var(--accent-text, var(--accent)); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: none; }
.rd-ensayo .alternativa[aria-pressed="true"] .alternativa-letra { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rd-ensayo .alternativa.correcta { border-color: var(--ok); background: var(--ok-soft); }
.rd-ensayo .alternativa.incorrecta { border-color: var(--bad); background: var(--bad-soft); }

/* ================= Hoja de respuestas ================= */
.rd-ensayo .hoja { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: none; }
.rd-ensayo .hoja-cab { padding: 14px 16px 10px; border-bottom: 0; background: none; }
.rd-ensayo .hoja-cab h4 { font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--ink); }
.rd-ensayo .hoja-cab .btn { min-height: 44px; border-radius: 999px; font-weight: 800; }
.rd-ensayo .hoja-pie { border-top: 0; background: none; font-family: inherit; font-size: 12px; color: var(--ink-3); }
/* Filas hacia abajo, como la hoja de la PAES, en el celular y en el computador (decisión de Mario, 28-oct-2026): filas de 44 px
   con el número y burbujas de 24 px; la respondida en lima y «para revisar» con el punto ámbar al final de la fila */
.rd-ensayo .hoja-fila { grid-template-columns: 30px minmax(0, 1fr) 8px; min-height: 44px; padding: 4px 10px; }
.rd-ensayo .hoja-fila .hoja-num { font-family: inherit; font-size: 12px; font-weight: 800; }
.rd-ensayo .hoja-burbujas { gap: 6px; }
.rd-ensayo .burbuja { width: 24px; height: 24px; border-width: 1.5px; font-family: inherit; font-size: 12px; font-weight: 800; }
.rd-ensayo .burbuja.llena { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rd-ensayo .hoja-fila[data-marcada="1"] .hoja-num::after { content: none; }
.rd-ensayo .hoja-fila[data-marcada="1"]::after { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--m-ranking); }
/* El rótulo de cada bloque (Ciencias: «Módulo Común», «Módulo Electivo · …») separa las filas, con la letra mínima de 12 px */
.rd-ensayo .hoja-rotulo { font-size: 12px; font-weight: 800; }

/* ================= Pie del computador: ‹ Marcar › (la viajera: ‹ ›, con «Terminar» o «Ver resumen» en la última) ================= */
.rd-ensayo .panel-pie .btn { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 15px; font-weight: 800; }
.rd-ensayo .panel-pie .btn:hover:not([disabled]) { background: var(--surface-3); }
.rd-ensayo .panel-pie .btn[aria-pressed="true"] { background: color-mix(in srgb, var(--m-ranking) 18%, transparent); color: var(--m-ranking); }
.rd-ensayo .panel-pie .btn-primario,
.rd-ensayo .panel-pie .btn-primario:hover:not([disabled]) { background: var(--accent); color: var(--accent-ink); }
/* «‹» y «›», los mismos botones de ícono de la barra del celular (lámina aprobada, 28-oct-2026), de 48 × 48 */
.rd-ensayo .panel-pie .btn-icono { width: 48px; min-width: 48px; padding: 0; font-size: 26px; line-height: 1; }

/* Aviso de que hay más opciones abajo (Mario, 29-oct-2026, «3 si»): cuando el panel de las opciones fijas no cabe y queda contenido por recorrer, un degradé suave
   en su borde de abajo, del color del panel (--alts-fondo), lo avisa. app/app.js · avisarMas le pone .alternativas--mas al panel solo mientras queda algo abajo: se
   quita al llegar al final (no tapa ni le quita el toque a la última opción) y no se pone nunca si todo cabe. Es el ::after de la mitad que contiene al panel y no
   del panel: dentro de su grilla no podría quedarse pegado al borde. No suma alto (va fijo, o su margen negativo lo compensa) y no recibe toques. Cada panel lo
   coloca en su sitio: sobre la barra en el celular, sobre el pie en el computador y al pie de la mitad en Lectora. */
.rd-ensayo .panel-cuerpo:has(> .alternativas--mas)::after {
  content: ""; display: block; height: 28px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--alts-fondo, var(--bg)) 0%, transparent), var(--alts-fondo, var(--bg)));
}

/* ================= La pregunta larga (web v2, Task 11, [C22]; lámina B2 de la ronda 3) =================
   Al bajar por un enunciado largo, app/app.js · vigiaPregunta le pone .alts-chicas al panel de las alternativas fijas: el panel baja a una fila de letras
   (.alts-letras, A B C D y E si la hay, de 44 × 44, la marcada en lima) que responde como la alternativa, y las alternativas se desvanecen debajo. Vuelven
   al subir al tope o con el control de la esquina (.alts-control: «‹» girado hacia abajo para achicar y hacia arriba para ver), que va sobre el borde de
   arriba del panel. La animación es del alto máximo del panel y de la opacidad, 200 ms; con movimiento reducido no hay animación. La fila va encima del
   comienzo del panel (absoluta, sin sumar alto ni separación) y, mientras no se ve, tampoco se toca ni se enfoca (visibility). */
.rd-ensayo .alternativas--fijas { transition: max-height .2s var(--ease); }
.rd-ensayo .alternativas--fijas > .alternativa { transition: border-color .2s, background-color .2s, transform .15s, opacity .2s, visibility 0s; }
.rd-ensayo .alternativas--fijas.alts-chicas { overflow: hidden; }
.rd-ensayo .alternativas--fijas.alts-chicas > .alternativa { opacity: 0; visibility: hidden; transition: border-color .2s, background-color .2s, transform .15s, opacity .2s, visibility 0s .2s; }
.rd-ensayo .alts-letras { position: absolute; top: 12px; left: 16px; right: 16px; z-index: 1; display: flex; justify-content: center; gap: 16px; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.rd-ensayo .alternativas--fijas.alts-chicas > .alts-letras { opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s; }
.rd-ensayo .alts-letra { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--ink-3); border-radius: 50%; background: var(--surface); color: var(--ink); font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; }
.rd-ensayo .alts-letra[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.rd-ensayo .alts-letra:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rd-ensayo .alts-control { display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 2px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 26px; font-weight: 800; line-height: 1; cursor: pointer; transition: transform .2s var(--ease); }
.rd-ensayo .alts-control[aria-expanded="true"] { transform: rotate(-90deg); }
.rd-ensayo .alts-control[aria-expanded="false"] { transform: rotate(90deg); }
.rd-ensayo .alts-control[hidden] { display: none; }
.rd-ensayo .alts-control:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Task 15, M-7, R51 y R52: abierto, la mitad de abajo del control (22 px) entraba en el panel y tapaba la esquina de la alternativa A, que empieza 12 px
   bajo el borde: un toque ahí achicaba en vez de responder. Mientras el control se ve sobre el panel abierto, la A empieza 30 px bajo el borde, 8 px bajo el
   control, en el celular y en el computador. Con margen en la A y no con relleno en el panel: si el panel abierto mide menos que su alto máximo, crece, y el
   control lo sigue con --rd-alts, que app/app.js · reservarAlts toma de un ResizeObserver del contenido, que no ve el relleno */
.rd-ensayo .alts-control:not([hidden])[aria-expanded="true"] + .alternativas--fijas > .alts-letras + .alternativa { margin-top: 18px; }
/* achicado, el aviso de «hay más» no corresponde: lo que queda abajo son las alternativas escondidas */
.rd-ensayo .panel-cuerpo:has(> .alts-chicas)::after { content: none; }

@media (max-width: 900px) {
  .ensayo.rd-ensayo { grid-template-columns: minmax(0, 1fr); }
  .barra--ensayo .barra-titulo > b > span.rd-ceja-larga { display: none; }
  .barra--ensayo .barra-titulo > b > span.rd-ceja-corta { display: inline; }
  .barra--ensayo:has(~ .rd-ensayo) > div.rd-avance:not(.barra-progreso):not(.barra-crono) { left: 12px; right: 12px; }
  /* Solo en la barra de una práctica de Estudiar (.barra-titulo--nivel, que pone app/app.js · pintarBarra: el nivel va en la ceja). Un eje de nombre largo («Viajera ·
     Probabilidad y estadística», «Práctica · Historia: Mundo, América y Chile») no cabe en una línea junto al cronómetro: el título va en hasta dos líneas, parejas y sin puntos
     suspensivos, y la ceja («Ciencias · Todos los niveles») siempre en una (ruling R32, 29-oct-2026). La barra crece lo que haga falta y el contenido baja con ella, porque va en el
     flujo (sticky). El texto es el mismo. Los títulos de la Biblioteca («<ensayo> · Evaluación», de 70 caracteres o más) y los de las demás barras siguen en una línea, como antes. */
  .barra--ensayo:has(~ .rd-ensayo) .barra-titulo--nivel b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra--ensayo:has(~ .rd-ensayo) .barra-titulo--nivel > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; text-wrap: balance; }
  /* El alto de la lectura de Lectora (más abajo: 196 y 234 px) se calcula con la barra de una línea, de 53 px: en Lectora el título se queda en una línea, con puntos suspensivos si
     no cabe, aunque sea de una práctica de Estudiar. Hoy ningún eje de Lectora parte («Interpretar» es el más largo), pero así la tarjeta no queda bajo la barra de abajo pase lo que pase. */
  .barra--ensayo:has(~ .ensayo--lectura) .barra-titulo--nivel > span { display: block; white-space: nowrap; }
  .rd-ensayo .enunciado { font-size: 16px; }
  .rd-ensayo .alternativa,
  .rd-ensayo .alternativa:last-child { min-height: 60px; }
  /* Opciones siempre fijas abajo (lámina aprobada por Mario, 28-oct-2026): un panel de lado a lado justo sobre la barra (61 px:
     8 + 44 + 8 y el filete), con alto máximo y desplazamiento propio si son largas; el enunciado y su figura corren por arriba.
     El panel de la pregunta deja abajo lo que mide el panel (--rd-alts, de app.js · reservarAlts; si no, su alto máximo), así
     el final del enunciado no queda tapado. Va bajo la barra (45), la hoja (70) y su velo (60). En Lectora van al pie de la
     mitad de la pregunta (más abajo). */
  .rd-ensayo .alternativas--fijas {
    position: fixed; left: 0; right: 0; bottom: calc(61px + env(safe-area-inset-bottom, 0px)); z-index: 40;
    max-height: 46vh; max-height: 46dvh; overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 12px 16px 10px; gap: 8px; border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 -12px 30px var(--velo);
  }
  .rd-ensayo .alternativas--fijas .alternativa,
  .rd-ensayo .alternativas--fijas .alternativa:last-child { min-height: 52px; }
  .rd-ensayo .panel--fijas { padding-bottom: var(--rd-alts, 46vh); }
  /* el degradé de «hay más» queda fijo sobre el borde de abajo del panel, un nivel sobre él */
  .rd-ensayo .panel-cuerpo:has(> .alternativas--mas)::after { position: fixed; left: 0; right: 0; bottom: calc(61px + env(safe-area-inset-bottom, 0px)); z-index: 41; --alts-fondo: var(--bg); }
  /* La pregunta larga (Task 11): achicado, el panel baja a la fila de letras (el filete, 12 + 44 + 10) y el panel de la pregunta reserva solo eso
     (--rd-alts lo sigue), así el final del enunciado se lee entero. El control va sobre el borde de arriba del panel, a la derecha, sobre el panel (40)
     y su aviso (41) y bajo la barra (45) */
  .rd-ensayo .alternativas--fijas.alts-chicas { max-height: 67px; overflow: hidden; }
  .rd-ensayo .alts-control { position: fixed; right: 16px; bottom: calc(61px + env(safe-area-inset-bottom, 0px) + var(--rd-alts, 46dvh) - 22px); z-index: 42; }
  /* Lectora dividida: la mitad de la pregunta termina justo sobre la barra, donde van sus opciones fijas. La cabecera del rediseño
     baja la lectura a 135 px (la barra de arriba, el costado vacío y el número) y la barra de abajo mide 61: 196 px y no los 176 de
     estilos.css, que la dejaban 20 px bajo la barra. */
  .rd-ensayo .lectura-doble { height: calc(100vh - 196px); height: calc(100dvh - 196px - env(safe-area-inset-bottom, 0px)); }
  /* en la viajera, los segmentos del avance bajan la lectura 38 px más, a 173 px, y con la barra de abajo (61) el descuento es de 234 px */
  .rd-ensayo.ensayo--transporte .lectura-doble { height: calc(100vh - 234px); height: calc(100dvh - 234px - env(safe-area-inset-bottom, 0px)); }
  /* El pie: ‹ | Hoja N/M | Marcar | ›, con «‹» y «›» como el mismo botón de ícono de 44 × 44 (decisión de Mario, 28-oct-2026;
     maqueta v3): el de volver gris y el de avanzar en lima. «‹» es el 2.º hijo del motor y order lo lleva a la primera columna. */
  .rd-ensayo .barra-movil { background: color-mix(in srgb, var(--bg) 84%, transparent); border-top-color: var(--line); }
  /* Hoja con lo que queda y Marcar a la medida de su rótulo («Marcada»); en la última pregunta «Entregar» también va a su
     medida: a 360 nada se parte en dos líneas ni se sale del botón (pruebas/ui_test_rd_ensayo.py) */
  .rd-ensayo .barra-movil:not(.barra-movil--transporte) { grid-template-columns: 44px minmax(0, 1fr) max-content 44px; gap: 6px; }
  .rd-ensayo .barra-movil--ultima:not(.barra-movil--transporte) { grid-template-columns: 44px minmax(0, 1fr) max-content max-content; }
  .rd-ensayo .barra-movil:not(.barra-movil--transporte) > .btn:nth-child(2) { order: -1; }
  .rd-ensayo .barra-movil:not(.barra-movil--transporte) > .btn { white-space: nowrap; font-size: 13px; }
  .rd-ensayo .barra-movil:not(.barra-movil--transporte) > .btn-hoja { gap: 6px; }
  .rd-ensayo .barra-movil:not(.barra-movil--transporte) > .btn-icono { width: 44px; padding: 0; font-size: 22px; line-height: 1; }
  .rd-ensayo .barra-movil .btn { min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 14px; font-weight: 800; }
  .rd-ensayo .barra-movil .btn[aria-pressed="true"] { background: color-mix(in srgb, var(--m-ranking) 18%, transparent); color: var(--m-ranking); }
  .rd-ensayo .barra-movil .btn-primario { background: var(--accent); color: var(--accent-ink); }
  .rd-ensayo .barra-movil .btn-fantasma { background: none; box-shadow: inset 0 0 0 1.5px var(--line); }
  .rd-ensayo .hoja { border-radius: var(--r-xl) var(--r-xl) 0 0; }
}
/* A 360 px el ancho que deja el cronómetro de la viajera (220 px) no alcanza para «Ciencias · Todos los niveles» con el espaciado de siempre (226 px): la ceja lo aprieta y sigue en una línea */
@media (max-width: 370px) {
  .barra--ensayo:has(~ .rd-ensayo) .barra-titulo--nivel b { letter-spacing: .04em; }
}

/* Computador: la hoja va a la izquierda de la pregunta en todo tipo de ensayo (decisión de Mario, 28-oct-2026), en la grilla
   base de .ensayo de estilos.css: el costado de 272 px (--rail-w), la pregunta de hasta 780 px y el canal de la miniatura al
   borde. Las filas caben en el costado; la columna de 384 px de la derecha era para 8 celdas de 44 px. */
@media (min-width: 901px) {
  .barra--ensayo:has(~ .rd-ensayo) .barra-titulo span { font-size: 20px; }
  /* la X sola también aquí (Task 11), en un círculo de 44 × 44 */
  .barra--ensayo:has(~ .rd-ensayo) .barra-salir { width: 44px; padding: 0; }
  /* Las opciones pegadas sobre el pie de la columna de la pregunta (lámina aprobada, 28-oct-2026): el pie mide 73 px (12 + 48 +
     12 y el filete) y las opciones se pegan a esa altura, con el fondo de la página para que el enunciado y la figura pasen por
     debajo, y con alto máximo y su desplazamiento si son largas. El relleno de los lados deja entero el foco de cada alternativa. */
  .rd-ensayo .alternativas--fijas { position: sticky; bottom: 73px; z-index: 20; max-height: 50vh; overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 12px 8px 8px; background: var(--u-bg, var(--bg)); }
  /* y el degradé de «hay más», pegado a la misma altura y del mismo ancho, sobre el borde de abajo del panel */
  .rd-ensayo .panel-cuerpo:has(> .alternativas--mas)::after { position: sticky; bottom: 73px; z-index: 21; margin: -28px -8px 0; --alts-fondo: var(--u-bg, var(--bg)); }
  /* Web v2 (Task 11, spec 4.10 y [C23]): el alto justo. «La hoja de respuestas y el panel de la pregunta llegan al mismo borde de abajo, con las alternativas
     al nivel de la hoja y una separación de 24 px sobre el borde de la ventana; el cuerpo de la pregunta se desplaza por dentro»: con las alternativas fijas,
     la vista mide el alto de la ventana menos la barra de 64 px (la página ya no se desplaza), el costado y el panel llenan ese alto, y entre el número de
     la pregunta y «‹ Marcar ›» el cuerpo tiene su propio desplazamiento, con las alternativas pegadas a su pie. La viajera ya respondida (la corrección en
     el flujo, que app.js · bajarAlVeredicto alcanza desplazando la página), Lectora y las sesiones del motor de Estudiar siguen como antes. */
  .barra--ensayo:has(~ .rd-ensayo > .panel--fijas) { border-bottom-width: 0; }
  .rd-ensayo:has(> .panel--fijas) { height: calc(100vh - 64px); height: calc(100dvh - 64px); grid-template-rows: minmax(0, 1fr); align-items: stretch; padding-bottom: 24px; }
  .rd-ensayo:has(> .panel--fijas) > .ensayo-costado { position: static; display: flex; flex-direction: column; min-height: 0; }
  .rd-ensayo:has(> .panel--fijas) > .ensayo-costado > .hoja,
  .rd-ensayo:has(> .panel--fijas) > .ensayo-costado > .ronda { flex: 1 1 auto; min-height: 0; }
  .rd-ensayo:has(> .panel--fijas) .hoja { position: static; display: flex; flex-direction: column; }
  .rd-ensayo:has(> .panel--fijas) .hoja-cuerpo { flex: 1 1 auto; min-height: 0; max-height: none; }
  .rd-ensayo:has(> .panel--fijas) .ronda { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  /* la tarjeta de la ronda no se ensancha con una ronda larga (una PAES entera en Práctica: los 74 espacios de 4 px de sus segmentos no caben en
     272 px) ni su tabla se sale de ella: la columna toma el ancho del costado, como la hoja */
  .rd-ensayo .ronda { grid-template-columns: minmax(0, 1fr); }
  .rd-ensayo:has(> .panel--fijas) .ronda-tabla { min-height: 0; max-height: none; }
  /* sin el relleno de abajo del panel (22 px de cuenta.css · .panel): «‹ Marcar ›» termina en el mismo borde que la hoja */
  .rd-ensayo:has(> .panel--fijas) > .panel--fijas { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
  /* el cuerpo se corre 10 px a cada lado, con el mismo relleno, para que las alternativas (y su foco) no se salgan de lo que se desplaza. Los 8 px de
     arriba van de margen y no de relleno (Task 15, M-7): el borde donde se corta el texto al desplazarse queda a 8 px de «PREGUNTA N DE M», la misma
     separación que sin desplazar */
  .rd-ensayo:has(> .panel--fijas) > .panel--fijas > .panel-cuerpo { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; margin: 8px -10px 0; padding: 0 10px 0; scrollbar-width: thin; }
  .rd-ensayo:has(> .panel--fijas) > .panel--fijas > .panel-pie { position: static; flex: none; margin-top: 12px; }
  .rd-ensayo:has(> .panel--fijas) .alternativas--fijas { bottom: 0; }
  .rd-ensayo:has(> .panel--fijas) .panel-cuerpo:has(> .alternativas--mas)::after { bottom: 0; }
  /* La pregunta larga (Task 11): achicado, el panel baja a la fila de letras (12 + 44 + 8); el control va pegado con las alternativas, sobre su borde de
     arriba, a la derecha (--rd-alts es lo que miden) */
  .rd-ensayo .alternativas--fijas.alts-chicas { max-height: 64px; overflow: hidden; }
  .rd-ensayo:has(> .panel--fijas) .alts-control { position: sticky; bottom: calc(var(--rd-alts, 0px) - 22px); z-index: 22; margin: -22px 2px -22px auto; }
}
/* Lectora (lámina aprobada, 28-oct-2026), dividida o lado a lado: la mitad de la pregunta (.panel-cuerpo--fijas, app.js) va en
   columna y las opciones toman lo que queda de su alto, con su propio desplazamiento si son largas, así el enunciado sigue a la
   vista. Si el enunciado es muy largo, las opciones guardan un alto mínimo y quedan pegadas al pie de la mitad mientras el
   enunciado corre. Cada fila mide lo que su texto (max-content): con el alto que le da la columna, la grilla las achicaba a
   52 px y el texto se salía. En lugar del panel fijo del celular y de la altura del pie del computador. */
.rd-ensayo .lectura-doble > .panel-cuerpo--fijas { display: flex !important; flex-direction: column; }
.rd-ensayo .lectura-doble .alternativas--fijas { position: sticky; left: auto; right: auto; bottom: 0; z-index: 1; flex: 0 1 auto; min-height: min(9rem, 60%); max-height: none; overflow-y: auto; grid-auto-rows: max-content; margin: 0 -8px; padding: 10px 8px 8px; border-top: 1px solid var(--line); background: var(--surface); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* En Lectora el degradé de «hay más» queda al pie de la mitad, sobre el borde de abajo de las opciones (del color de esa mitad) */
.rd-ensayo .lectura-doble > .panel-cuerpo--fijas:has(> .alternativas--mas)::after { position: sticky; left: auto; right: auto; bottom: 0; z-index: 2; flex: none; margin: -28px -8px 0; --alts-fondo: var(--surface); }
/* Al imprimir desde la pregunta, las opciones van en su lugar, bajo el enunciado (fijas se repetirían en cada hoja) */
@media print {
  .rd-ensayo .alternativas--fijas,
  .rd-ensayo .lectura-doble .alternativas--fijas { position: static; min-height: 0; max-height: none; overflow: visible; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .rd-ensayo .lectura-doble > .panel-cuerpo--fijas { display: block !important; }
  .rd-ensayo .panel--fijas { padding-bottom: 0; }
  .rd-ensayo .panel-cuerpo:has(> .alternativas--mas)::after { display: none; }
  /* y van todas, aunque estuvieran achicadas en la fila de letras (pregunta larga) */
  .rd-ensayo .alternativas--fijas.alts-chicas { max-height: none; overflow: visible; }
  .rd-ensayo .alternativas--fijas.alts-chicas > .alternativa { opacity: 1; visibility: visible; }
  .rd-ensayo .alts-letras, .rd-ensayo .alts-control { display: none; }
}

/* ================= Resultado ================= */
.rd-resultados .res-cab .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--accent-text, var(--accent)); }
.rd-resultados .res-cifra { border-color: var(--line); background: var(--surface); }
/* La grilla: verde la correcta, roja la incorrecta y gris la omitida; la piloto, más tenue. Cada celda abre su pregunta. */
.rd-grilla { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; width: min(600px, 100%); }
.rd-grilla button { min-width: 0; min-height: 44px; padding: 0; border: 1.5px solid var(--line); border-radius: 8px; background: none; color: var(--ink-3); font: inherit; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; transition: transform .15s; }
.rd-grilla button:hover { transform: translateY(-1px); }
.rd-grilla button.ok { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.rd-grilla button.mal { border-color: #E2725B/*tema:fijo*/; background: #E2725B/*tema:fijo*/; color: var(--bad-ink); }
.rd-grilla button.omitida { border-color: var(--line); background: var(--surface-2); color: var(--ink-3); }
.rd-grilla button.piloto { opacity: .45; }
.rd-grilla button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rd-resultados .rev-item { scroll-margin-top: 88px; }
/* la cabecera de cada pregunta de la revisión («Incorrecta», el eje) con la letra mínima de 12 px (base: 11 px) */
.rd-resultados .rev-cab :is(.rev-estado, .etiqueta) { font-size: 12px; }
/* El primer resultado de una práctica también respeta el mínimo de lectura. */
.rd-resultados.vista--ronda .plan-etq { font-size: 12px; }
.rd-resultados .acciones .btn { min-height: 48px; border-radius: 999px; font-weight: 800; }
/* Lo que lleva a contenidos de Estudiar no se muestra en el resultado: el error viaja a Estudiar por dentro (spec) */
.rd-resultados .rd-res-estudiar,
.rd-resultados .estudio-error-acciones { display: none !important; }
/* sin «Esta alternativa confunde…», la caja del error queda sin contenido visible: tampoco se muestra */
.rd-resultados .estudio-error:not(:has(> :not(.estudio-error-acciones))) { display: none; }
@media (max-width: 900px) {
  .rd-grilla { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .rd-avance i, .rd-ensayo .alternativa, .rd-grilla button { transition: none; }
  /* la pregunta larga se achica y se abre sin animación */
  .rd-ensayo .alternativas--fijas,
  .rd-ensayo .alternativas--fijas > .alternativa,
  .rd-ensayo .alternativas--fijas.alts-chicas > .alternativa,
  .rd-ensayo .alts-letras,
  .rd-ensayo .alternativas--fijas.alts-chicas > .alts-letras,
  .rd-ensayo .alts-control { transition: none; }
}

/* ================= Diagnóstico (Task 6) =================
   La pantalla del diagnóstico es la del ensayo (cabecera «Diagnóstico gratis · …» / «Tu diagnóstico» de app/diagnostico.js,
   con el reloj de anillo de 40 minutos y la línea de avance). En su resultado, arriba y al centro va el puntaje estimado de app/diagnostico.js
   (.diag-bloque), grande como el del ensayo y con su rango. Con la estructura del prototipo (app/diagnostico.js · armarRd):
   en la misma caja, «k de n correctas · min», la grilla y «Revisar preguntas» / «Volver a Ensayar»; luego la carrera, los
   ejes y las ofertas; después «Para repasar» y lo demás. La .res-cab del motor (el anillo con el 12/20, que ya dice la
   línea de las correctas) y las acciones de la ronda que el prototipo no tiene no se muestran. */
.rd-diagnostico > .diag-bloque { order: -1; }
.rd-diagnostico:has(> .diag-bloque .rd-grilla) > .res-cab,
.rd-diagnostico .rd-res-modo,
.rd-diagnostico .rd-res-imprimir { display: none; }
.rd-diagnostico .plan-etq { font-size: 12px; }
.rd-diagnostico .diag-cifras { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; margin: 18px 0 0; font-size: 16px; color: var(--ink-2); text-align: center; }
.rd-diagnostico .diag-cifras b { font-size: 20px; font-weight: 900; color: var(--ink); }
.rd-diagnostico .diag-cifras-sep { color: var(--ink-3); }
.rd-diagnostico .diag-res .rd-grilla { margin: 18px auto 0; }
.rd-diagnostico .diag-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 0; }
.rd-diagnostico .diag-res > .panel-cab { justify-content: center; border-bottom: 0; background: none; }
.rd-diagnostico .diag-res .panel-numero { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text, var(--accent)); }
.rd-diagnostico .diag-res .panel-cab .etiqueta { font-size: 12px; }
.rd-diagnostico .diag-res .res-titular { justify-content: center; align-items: flex-end; gap: 12px 40px; }
.rd-diagnostico .diag-res .res-titular .hero-numero { display: grid; justify-items: center; text-align: center; }
.rd-diagnostico .diag-res .res-titular .hero-numero:first-child b { font-family: inherit; font-size: clamp(88px, 12vw, 140px); font-weight: 900; font-variation-settings: normal; letter-spacing: -.06em; line-height: .85; color: var(--ink); }
.rd-diagnostico .diag-res .res-titular .hero-numero small { margin-top: 10px; }
.rd-diagnostico .diag-res .diag-rango b { font-family: inherit; font-weight: 900; font-variation-settings: normal; letter-spacing: -.03em; color: var(--ink-2); }
.rd-diagnostico .diag-res .panel-cuerpo > .leyenda-nota { max-width: 680px; margin-inline: auto; text-align: center; }
@media (min-width: 901px) {
  .rd-diagnostico.vista--ronda > .diag-bloque { grid-column: 1 / -1; grid-row: 1; }
  .rd-diagnostico.vista--ronda > .res-cab,
  .rd-diagnostico.vista--ronda > .seccion--repasar { grid-row: 2; }
  .rd-diagnostico.vista--ronda > .acciones--ronda,
  .rd-diagnostico.vista--ronda > .seccion--eje { grid-row: 3; }
  .rd-diagnostico.vista--ronda:has(> .diag-bloque .rd-grilla) > .acciones--ronda { grid-row: 2; }
}

/* El ensayo gratis usa el resultado sin revisión: conserva los mismos mínimos táctiles y de lectura. La grilla del resultado
   queda fuera: sus celdas siguen el ancho de su pista (min-width: 0) para no salirse de su columna ni comerse la separación. */
.rd-resultados .plan-etq { font-size: 12px; }
.rd-resultados :is(button, .btn, .chip-meta):not(.rd-grilla button) { min-height: 44px; min-width: 44px; }