/* EOPOS_ · Motor de exámenes · identidad «terminal»
   tinta #0B0B14 · violeta #7C5CFF · menta #2BE4B4 · coral #FF6B6B (solo avisos/errores) · blanco #F4F2FF */

@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-display: swap; src: url('/fuentes/space-grotesk/space-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url('/fuentes/space-grotesk/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('/fuentes/space-grotesk/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('/fuentes/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url('/fuentes/jetbrains-mono/jetbrains-mono-latin-700-normal.woff2') format('woff2'); }

:root {
  --tinta: #0B0B14;
  --tinta-2: #14141f;
  --tinta-3: #1d1d2b;
  --linea: #2a2a3d;
  --violeta: #7C5CFF;
  --violeta-suave: rgba(124, 92, 255, .16);
  --menta: #2BE4B4;
  --menta-suave: rgba(43, 228, 180, .12);
  --coral: #FF6B6B;
  --coral-suave: rgba(255, 107, 107, .12);
  --blanco: #F4F2FF;
  --gris: #a9a6c4;
  --titular: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --radio: 12px;
  /* Violeta para TEXTO (más claro que el de marca, para leerse sobre la tinta) y para el fondo de los botones
     (un punto más oscuro, para que el texto blanco se lea): contraste AA en los dos modos. */
  --violeta-texto: #A08CFF;
  --violeta-boton: #6A48F5;
  /* Borde de campos, botones secundarios y opciones: más visible que las líneas de separación. */
  --borde-control: #4A4766;
  --sombra-control: none;
  /* Fondo de las opciones de respuesta y de la lista de temas (en claro, blanco sobre el gris de la tarjeta). */
  --fondo-opcion: var(--tinta);
  color-scheme: dark;
}

/* Modo claro (botón «modo_claro» de la cabecera, public/tema.js). Mismas variables, otros valores: la marca
   se mantiene (violeta y menta), un punto más oscuros para que se lean bien sobre blanco. */
:root[data-tema="claro"] {
  --tinta: #F6F5FB;
  --tinta-2: #FFFFFF;
  --tinta-3: #EEEBF8;
  --linea: #CFCAE3;
  --violeta: #6A48F5;
  --violeta-suave: rgba(106, 72, 245, .10);
  --menta: #05664B;
  --menta-suave: rgba(6, 117, 86, .09);
  --coral: #B02E2E;
  --coral-suave: rgba(176, 46, 46, .08);
  --blanco: #16141F;
  --gris: #5D5978;
  --violeta-texto: #5A3BE0;
  --borde-control: #9590B5;
  --sombra-control: 0 1px 2px rgba(22, 20, 31, .08), 0 2px 6px rgba(22, 20, 31, .06);
  --fondo-opcion: #FFFFFF;
  color-scheme: light;
}
:root[data-tema="claro"] .barra-examen { background: rgba(246, 245, 251, .94); }
:root[data-tema="claro"] .confirmar-fondo { background: rgba(22, 20, 31, .35); }
:root[data-tema="claro"] .confirmar-caja { box-shadow: 0 12px 40px rgba(22, 20, 31, .18); }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--tinta); color: var(--blanco); }
body { font-family: var(--titular); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--menta); }
h1, h2, h3 { font-family: var(--titular); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
h2 { font-size: clamp(1.15rem, 3vw, 1.4rem); }
p { margin: 0 0 1em; }
.mono, code, kbd { font-family: var(--mono); }
.gris { color: var(--gris); }
.oculto { display: none !important; }

.contenedor { max-width: 860px; margin: 0 auto; padding: 16px 16px 48px; }

/* Cabecera */
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--linea); background: var(--tinta); }
.marca { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }
.marca .guion { color: var(--violeta); animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .marca .guion { animation: none; } }

/* Chips mono */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .78rem;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linea); color: var(--gris); background: var(--tinta-2); white-space: nowrap; }
.chip.violeta { color: var(--blanco); border-color: var(--violeta); background: var(--violeta-suave); }
.chip.menta { color: var(--menta); border-color: rgba(43, 228, 180, .5); background: var(--menta-suave); }
.chip.coral { color: var(--coral); border-color: rgba(255, 107, 107, .5); background: var(--coral-suave); }

/* Ventana tipo terminal */
.ventana { background: var(--tinta-2); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; margin: 16px 0; }
.ventana > .barra { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--linea);
  font-family: var(--mono); font-size: .78rem; color: var(--gris); background: var(--tinta-3); }
.semaforo { display: inline-flex; gap: 6px; margin-right: 6px; }
.semaforo i { width: 10px; height: 10px; border-radius: 50%; background: var(--linea); display: block; }
.semaforo i:nth-child(1) { background: var(--coral); }
.semaforo i:nth-child(2) { background: var(--violeta); }
.semaforo i:nth-child(3) { background: var(--menta); }
.ventana > .cuerpo { padding: 16px; }

.prompt::before { content: '> '; color: var(--violeta-texto); font-family: var(--mono); }

/* Formularios */
label.campo { display: block; margin: 0 0 14px; }
label.campo > span { display: block; font-family: var(--mono); font-size: .8rem; color: var(--gris); margin-bottom: 6px; }
input[type=text], input[type=number], input[type=password], input[type=email], input[type=datetime-local], select, textarea {
  width: 100%; font: inherit; color: var(--blanco); background: var(--tinta); border: 1px solid var(--borde-control);
  border-radius: 10px; padding: 10px 12px; }
textarea { font-family: var(--mono); font-size: .85rem; min-height: 160px; }
::placeholder { color: var(--gris); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .opcion:focus-within {
  outline: 2px solid var(--violeta); outline-offset: 2px; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .fila { grid-template-columns: 1fr; } }

/* Selector de modo */
.modos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.modos button { font-family: var(--mono); font-size: .85rem; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--borde-control); background: var(--tinta-2); color: var(--blanco); box-shadow: var(--sombra-control); }
.modos button:hover { border-color: var(--violeta); }
.modos button[aria-pressed=true] { border-color: var(--violeta); color: var(--violeta-texto); background: var(--violeta-suave); font-weight: 700; box-shadow: inset 0 0 0 1px var(--violeta); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--mono); font-weight: 700;
  font-size: .9rem; padding: 11px 18px; border-radius: 10px; border: 1px solid var(--violeta-boton); background: var(--violeta-boton);
  color: #FFFFFF; cursor: pointer; text-decoration: none; }
.boton:hover { filter: brightness(1.1); }
.boton.secundario { background: var(--tinta-2); color: var(--blanco); border-color: var(--borde-control); box-shadow: var(--sombra-control); }
.boton.menta { background: var(--menta); border-color: var(--menta); color: var(--tinta); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* Barra fija del examen */
.barra-examen { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: rgba(11, 11, 20, .94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linea); }
.reloj { font-family: var(--mono); font-size: 1.25rem; font-weight: 700; color: var(--menta); min-width: 5ch; }
.reloj.aviso { color: var(--coral); }

/* Preguntas */
.pregunta { background: var(--tinta-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; margin: 14px 0; }
.pregunta .num { font-family: var(--mono); font-size: .78rem; color: var(--violeta-texto); margin-bottom: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pregunta .enunciado { font-size: 1.05rem; margin-bottom: 12px; }
.pregunta .enunciado p:last-child { margin-bottom: 0; }
.opcion { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--borde-control); box-shadow: var(--sombra-control); border-radius: 10px;
  margin: 8px 0; cursor: pointer; background: var(--fondo-opcion); }
.opcion input { margin-top: 4px; accent-color: var(--violeta); flex: none; }
.opcion .letra { font-family: var(--mono); color: var(--gris); flex: none; }
.opcion:has(input:checked) { border-color: var(--violeta); background: var(--violeta-suave); }
.limpiar { font-family: var(--mono); font-size: .75rem; background: none; border: 0; color: var(--gris); cursor: pointer; padding: 4px 0; text-decoration: underline; }

/* Revisión */
.opcion.revision { cursor: default; }
.opcion.correcta { border-color: var(--menta); background: var(--menta-suave); }
.opcion.erronea { border-color: var(--coral); background: var(--coral-suave); }
.opcion .etiqueta { margin-left: auto; flex: none; }
.retro { font-size: .9rem; color: var(--gris); margin-top: 4px; }
.explicacion { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--violeta); background: var(--tinta); border-radius: 0 8px 8px 0; font-size: .95rem; }

/* Resultado */
.nota-grande { font-family: var(--mono); font-size: clamp(3rem, 14vw, 5rem); font-weight: 700; line-height: 1; margin: 8px 0 4px; }
.nota-grande.aprobado { color: var(--menta); }
.nota-grande.suspenso { color: var(--blanco); }
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
@media (max-width: 560px) { .cifras { grid-template-columns: repeat(2, 1fr); } }
.cifra { background: var(--tinta); border: 1px solid var(--linea); border-radius: 10px; padding: 10px; }
.cifra b { display: block; font-family: var(--mono); font-size: 1.4rem; }
.cifra span { font-family: var(--mono); font-size: .72rem; color: var(--gris); }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla th { font-family: var(--mono); font-weight: 400; font-size: .75rem; color: var(--gris); }
.tabla td.num { font-family: var(--mono); white-space: nowrap; }
.desplazable { overflow-x: auto; }

/* Avisos */
.aviso-caja { border: 1px solid rgba(255, 107, 107, .5); background: var(--coral-suave); color: var(--blanco); border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.aviso-caja::before { content: '! '; color: var(--coral); font-family: var(--mono); font-weight: 700; }
.ok-caja { border: 1px solid rgba(43, 228, 180, .5); background: var(--menta-suave); border-radius: 10px; padding: 10px 12px; margin: 12px 0; }

.lista-intentos { list-style: none; margin: 0; padding: 0; }
.lista-intentos li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.lista-intentos li .crece { flex: 1; min-width: 160px; }

/* Fase 2 · supuestos prácticos: el enunciado va en bloque antes de sus preguntas
   y, en cada pregunta, plegado («ver enunciado») para no tener que subir en el móvil. */
.supuesto { background: var(--tinta-3); border: 1px solid var(--violeta); border-radius: var(--radio); padding: 16px; margin: 22px 0 10px; }
.supuesto .etiqueta-supuesto { font-family: var(--mono); font-size: .78rem; color: var(--violeta-texto); margin-bottom: 8px; display: block; }
.supuesto .enunciado { max-height: 60vh; overflow-y: auto; }
details.recordatorio { margin: 0 0 12px; font-size: .92rem; }
details.recordatorio > summary { font-family: var(--mono); font-size: .78rem; color: var(--gris); cursor: pointer; }
details.recordatorio > .enunciado { margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--violeta); background: var(--tinta); border-radius: 0 8px 8px 0;
  max-height: 45vh; overflow-y: auto; }
.fila-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .fila-3 { grid-template-columns: 1fr; } }

/* Confirmación dentro de la página (sustituye a confirm(), que falla en iframes con sandbox). */
.confirmar-fondo { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(11, 11, 20, .78); }
.confirmar-caja { max-width: 440px; width: 100%; background: var(--tinta-2); border: 1px solid var(--violeta);
  border-radius: 14px; padding: 20px 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.confirmar-caja p { margin: 0 0 18px; white-space: pre-line; line-height: 1.5; }
.confirmar-botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
/* Anclada al botón que la abre (top calculado en app.js): así nunca queda fuera de la vista
   aunque el iframe sea más alto que la ventana. */
.confirmar-fondo.anclado { align-items: flex-start; padding-top: 0; padding-bottom: 0; }
.confirmar-fondo.alineado { justify-content: flex-start; padding-left: 0; padding-right: 0; }

/* Chips con textos largos (rutas de temas): que puedan partirse en varias líneas en vez de salirse. */
.chip.largo { white-space: normal; max-width: 100%; border-radius: 12px; line-height: 1.35; }

/* ---------- Vista ancha y horizontal (≥ 1000 px) ----------
   En el móvil y en columnas estrechas se queda todo como arriba (una columna).
   --alto-barra: lo que ocupa la barra fija del examen, para que lo «sticky» quede debajo. */
:root { --alto-barra: 0px; }
body[data-vista="v-examen"] { --alto-barra: 62px; }
.cabecera-derecha { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.boton.chico { padding: 6px 12px; font-size: .78rem; font-weight: 400; }
.navegador { display: none; }
.pregunta { scroll-margin-top: calc(var(--alto-barra) + 14px); }
.pregunta .num .marcar { margin-left: auto; font-family: var(--mono); font-size: .75rem; background: none; border: 1px solid var(--linea);
  border-radius: 999px; color: var(--gris); padding: 2px 10px; cursor: pointer; }
.pregunta .num .marcar[aria-pressed=true] { color: var(--blanco); border-color: var(--violeta); background: var(--violeta-suave); }

@media (min-width: 1000px) {
  .contenedor { max-width: 1280px; padding: 20px 28px 56px; }
  .barra-examen { padding: 10px max(28px, calc((100% - 1280px) / 2 + 28px)); }
  /* Inicio en dos columnas: generar a la izquierda; exámenes e intentos a la derecha. */
  .inicio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .inicio > .ventana:first-child { grid-row: span 2; }
  .inicio > .ventana { margin: 8px 0; }

  /* Lectura: algo más grande y con interlineado cómodo. */
  body { font-size: 17px; }
  .pregunta { padding: 20px 22px; }
  .pregunta .enunciado { font-size: 1.18rem; line-height: 1.6; margin-bottom: 14px; }
  .opcion { font-size: 1.05rem; line-height: 1.5; padding: 12px 14px; }
  .explicacion { font-size: 1rem; line-height: 1.6; }

  /* Test: navegador de preguntas a la izquierda, preguntas a la derecha. */
  .examen-rejilla { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 24px; align-items: start; }
  .navegador { display: block; position: sticky; top: calc(var(--alto-barra) + 14px); max-height: calc(100vh - var(--alto-barra) - 28px);
    overflow-y: auto; background: var(--tinta-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; margin-top: 14px; }
  .titulo-nav { font-size: .75rem; margin-bottom: 8px; }
  .nav-numeros { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .nav-num { font-family: var(--mono); font-size: .8rem; padding: 6px 0; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--linea); background: var(--tinta); color: var(--gris); position: relative; }
  .nav-num:hover { border-color: var(--violeta); color: var(--blanco); }
  .nav-num.respondida { background: var(--violeta-suave); border-color: var(--violeta); color: var(--blanco); }
  .nav-num.marcada::after { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--menta); }
  .nav-num.actual { outline: 2px solid var(--menta); outline-offset: 1px; }
  .nav-leyenda { display: grid; gap: 4px; margin-top: 12px; font-size: .7rem; }
  .nav-leyenda .punto { display: inline-block; width: 9px; height: 9px; border-radius: 3px; border: 1px solid var(--linea); background: var(--tinta);
    margin-right: 6px; vertical-align: -1px; }
  .nav-leyenda .punto.respondida { background: var(--violeta-suave); border-color: var(--violeta); }
  .nav-leyenda .punto.marcada { background: var(--menta); border-color: var(--menta); border-radius: 50%; }

  /* Supuestos: enunciado fijo a la izquierda (con su scroll) y sus preguntas a la derecha. */
  .grupo-supuesto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; margin: 22px 0 10px; }
  .grupo-supuesto > .supuesto { position: sticky; top: calc(var(--alto-barra) + 14px); max-height: calc(100vh - var(--alto-barra) - 28px);
    overflow-y: auto; margin: 14px 0 0; }
  .grupo-supuesto > .supuesto .enunciado { max-height: none; overflow: visible; font-size: 1.08rem; line-height: 1.65; }
  .grupo-supuesto details.recordatorio { display: none; }
  .preguntas-supuesto > .pregunta:first-child { margin-top: 14px; }
}

/* Supuestos: nº por bloque (como «Elige cuántos supuestos por bloque» de esferatest) */
.por-bloque { border: 1px dashed var(--linea); border-radius: 10px; padding: 12px; margin: 0 0 14px; }
/* Reordenar exámenes arrastrando */
tr.arrastrable { cursor: grab; }
tr.arrastrando { opacity: .45; }
tr.destino td { border-top: 2px solid var(--violeta); }

/* Cupos por categoría y preguntas a mano (panel) */
.fila-cupo { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: center; margin: 0 0 8px; }
@media (max-width: 560px) { .fila-cupo { grid-template-columns: 1fr 90px; } .fila-cupo button { grid-column: 1 / -1; justify-self: start; } }
.fila-pregunta { align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--linea); font-family: var(--titular); font-size: .9rem; }

/* Supuestos elegidos a mano */
.fila-supuesto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.fila-supuesto:last-child { border-bottom: 0; }
.fila-supuesto .casilla { flex: 1; min-width: 200px; font-family: var(--titular); }
.fila-supuesto .vista-previa { flex-basis: 100%; font-size: .88rem; }
.fila-supuesto .vista-previa summary { cursor: pointer; font-family: var(--mono); font-size: .75rem; color: var(--violeta-texto); }

/* Seguimiento del tutor y conversación de corrección */
.seguimiento .evento { padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: .94rem; }
.seguimiento .evento:last-child { border-bottom: 0; }
details.conversacion { margin-top: 10px; }

/* Alumno: casillas de temas por bloque */
.lista-temas { max-height: 340px; overflow: auto; border: 1px solid var(--borde-control); border-radius: 10px; padding: 8px 12px; background: var(--fondo-opcion); box-shadow: var(--sombra-control); }
.grupo-temas-alumno { border: 0; border-bottom: 1px solid var(--linea); margin: 0; padding: 6px 0 10px; }
.grupo-temas-alumno:last-of-type { border-bottom: 0; }
.grupo-temas-alumno legend { font-size: .9rem; padding: 6px 0; }
.grupo-temas-alumno .casilla { font-family: var(--titular); font-size: .92rem; padding: 4px 0; align-items: flex-start; }
.grupo-temas-alumno .casilla input { margin-top: 2px; flex: none; }
.etiqueta-temas { display: block; font-size: .8rem; margin-bottom: 6px; }

/* Temas a redactar: grupos del formulario del profesorado y opciones de la IA */
.grupo-temas { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 8px; align-items: center; margin: 0 0 8px; }
.grupo-temas select { min-width: 0; }
.violeta-texto { color: var(--violeta-texto); font-size: .8rem; }
@media (max-width: 560px) { .grupo-temas { grid-template-columns: 1fr; } .grupo-temas > span:nth-of-type(2) { display: none; } }
.opciones-ia { border: 1px dashed var(--linea); border-radius: 10px; padding: 12px; margin: 12px 0; }
.criterios-ia { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; }
.casilla { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: .85rem; cursor: pointer; }
.casilla input { accent-color: var(--violeta); width: 18px; height: 18px; }
.lista-por-bloque { display: grid; gap: 8px; }
.fila-bloque { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.fila-bloque .nombre-bloque { flex: 1; min-width: 0; }
.fila-bloque select { width: 6.5em; flex: none; }
.total-bloques { font-family: var(--mono); font-size: .8rem; }
.total-bloques.pasado { color: var(--coral); }

/* Adjuntos de desarrollo */
.adjuntos { margin-top: 12px; }
.titulo-adjuntos { font-size: .78rem; margin-bottom: 6px; }
.lista-adjuntos { list-style: none; margin: 0 0 8px; padding: 0; }
.lista-adjuntos li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--linea); font-size: .92rem; overflow-wrap: anywhere; }
.lista-adjuntos li .crece { flex: 1; min-width: 160px; }
.acciones-adjuntos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vista-adjunto { display: block; flex: 0 0 100%; width: 100%; max-height: 70vh; object-fit: contain; object-position: left top; margin: 8px 0; border-radius: 8px; }

/* Repaso de supuestos fallados: marca discreta en la revisión */
.chip.fallada-antes { color: var(--gris); border-style: dashed; }

/* Revisión: importante e informar de un error; hilos de conversación (reportes) */
.acciones-revision { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin-top: 8px; }
.acciones-revision .limpiar[aria-pressed="true"] { color: var(--menta); text-decoration: none; }
.form-reporte { flex-basis: 100%; display: grid; gap: 6px; justify-items: start; }
.form-reporte textarea, .reporte textarea, .hilo-form textarea { width: 100%; min-height: 70px; font-family: inherit; font-size: .92rem; }
.reporte { border-bottom: 1px solid var(--linea); padding: 8px 0; }
.reporte summary { cursor: pointer; }
.hilo { display: grid; gap: 6px; margin: 8px 0; }
.mensaje { padding: 8px 10px; border-radius: 8px; background: var(--tinta); border: 1px solid var(--linea); max-width: 92%; justify-self: start; }
.mensaje.profesor { border-color: var(--violeta); justify-self: end; }
/* Corrección inmediata: la elegida en coral si falló (gana a la marca violeta de «elegida») */
.opcion.erronea:has(input:checked) { border-color: var(--coral); background: var(--coral-suave); }
.opcion.correcta:has(input:checked) { border-color: var(--menta); background: var(--menta-suave); }
.opcion:has(input:disabled) { cursor: default; }
.correccion-inmediata .chip { margin-right: 6px; }

/* Mis resultados: barras sobre 10 (comparativa con el grupo) */
.barra-progreso { margin-top: 10px; }
.barra-progreso .pista { height: 8px; border-radius: 4px; background: var(--tinta); border: 1px solid var(--linea); overflow: hidden; margin-top: 4px; }
.barra-progreso .pista i { display: block; height: 100%; background: var(--violeta); }
.cifra .menta, td.menta, div.menta { color: var(--menta); }
.cifra .coral, td.coral, div.coral, p.coral { color: var(--coral); }
tr.gris td { color: var(--gris); }
.boton.peligro { border-color: var(--coral); color: var(--coral); }

/* Antiplagio: sin selección en el examen y la revisión (los cuadros de texto sí) */
body.antiplagio #v-examen, body.antiplagio #v-revision { -webkit-user-select: none; user-select: none; }
body.antiplagio #v-examen textarea, body.antiplagio #v-examen input, body.antiplagio #v-revision textarea { -webkit-user-select: text; user-select: text; }
@media print { body.antiplagio #v-examen, body.antiplagio #v-revision { display: none !important; } }

/* Marca blanca (marca.ts): logo y nombre de la academia en la cabecera. */
.marca { display: inline-flex; align-items: center; gap: 10px; }
.marca-logo { height: 36px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.marca-nombre { font-family: var(--titular); font-weight: 700; }
.marca-logo-vista { height: 56px; width: auto; max-width: 260px; object-fit: contain; background: var(--tinta-3); border-radius: 8px; padding: 6px; }
.fila-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fila-color { display: flex; gap: 8px; align-items: center; }
.fila-color input[type=color] { width: 48px; height: 42px; padding: 2px; border: 1px solid var(--borde-control); border-radius: 10px; background: var(--tinta); flex: none; }

/* Vídeo de corrección (video.ts): plegado hasta que el alumno lo abre. */
.video-correccion { margin-top: 8px; }
.video-correccion summary { cursor: pointer; font-family: var(--mono); font-size: .85rem; color: var(--violeta-texto); }
.video-marco { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 8px; border-radius: 10px; overflow: hidden; border: 1px solid var(--borde-control); background: #000; }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-bloqueado { font-size: .85rem; margin-top: 6px; }

/* Modo prueba (prueba.ts): aviso con lo que queda y el botón de compra. */
.prueba-caja { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--violeta); background: var(--violeta-suave); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }