/*
 * Paleta en tonos suaves y cálidos. Nada de blanco puro: una pantalla de examen
 * se mira una hora seguida, muchas veces desde un celular a pleno sol, y el
 * blanco #FFF cansa. Los colores de estado (bien / atención / mal) son pasteles
 * apagados, pero el texto sobre ellos mantiene contraste suficiente para leerse.
 */
:root{
  --ink:#33313D; --ink-2:#5C5A69;
  /* #7E7B8A daba 3.96 de contraste: por debajo del mínimo. Es el gris de las
     ayudas y las reglas —letra chica que igual hay que poder leer— así que se
     oscurece hasta pasar los 4.5 sobre la tarjeta Y sobre el papel. */
  --ink-3:#6A6777;
  --paper:#F1EEE9; --surface:#FCFAF7;
  --line:#DED8CF; --line-soft:#EBE6DF;
  --hover:#F0EBE4;
  /* Colores saturados a fondo, pero elegidos con una máquina, no a ojo: de cada
     tono se buscó la versión MÁS saturada que todavía pasara el contraste
     mínimo (4.5) en los tres lugares donde se usa. Todos quedaron entre 0.92 y
     1.00 de saturación. Lo que NO se toca sigue siendo el fondo y la tinta: la
     pantalla se mira 45 minutos, a veces con sol. */
  --accent:#0074B8; --accent-fuerte:#005C93; --accent-soft:#E9F5FB;
  --signal:#BD4B00; --signal-soft:#FCF0E9;
  --ok:#05853A; --ok-soft:#E6FFF0;
  --bad:#D60039; --bad-fuerte:#AB002E; --bad-soft:#FBE9EE;

  /* Los seis del arcoíris, para distinguir un grupo de preguntas del que sigue.
     Acá el color es información: de un vistazo sabés que cambiaste de tema.

     Hay DOS familias de fondo porque hacen trabajos distintos:
       «-soft»  lleva texto encima (las píldoras del panel), así que tiene que
                ser pálido o el texto deja de leerse. No hay vuelta con eso.
       «-tinte» no lleva nada encima: son las manchas del fondo de la entrada.
                Ahí sí se satura a fondo, porque no compite con ninguna lectura. */
  --g1:#0074B8; --g1-soft:#E9F5FB; --g1-tinte:#8FD6FF;
  --g2:#05853A; --g2-soft:#E6FFF0; --g2-tinte:#8FFFBE;
  --g3:#BD4B00; --g3-soft:#FCF0E9; --g3-tinte:#FFBC8F;
  --g4:#A800F0; --g4-soft:#F6E9FB; --g4-tinte:#DD8FFF;
  --g5:#D60039; --g5-soft:#FBE9EE; --g5-tinte:#FF8FAD;
  --g6:#068084; --g6-soft:#E6FEFE; --g6-tinte:#8FFBFF;
  /* Los comentarios del final: amarillo, fuera del arcoíris de los grupos para
     que no se confundan con una pregunta más. La tinta pasa 6.6 sobre el
     pálido y 5.6 sobre el fuerte. */
  --com:#7A4E00; --com-borde:#E0A100; --com-soft:#FFF6D6; --com-fuerte:#FFE08A;
  --codigo:#F7F4EF;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans:"Archivo", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* El doble tap rápido en el iPhone agranda la página, y en la calculadora eso
   pasa todo el tiempo: apretar «7 7» o «0 0» rápido es un doble tap para iOS, y
   al alumno se le va el zoom en mitad de una cuenta.

   `touch-action: manipulation` apaga **sólo** el gesto de doble tap sobre estos
   elementos. Lo que NO hace, y por eso se usa esto y no `user-scalable=no` en el
   viewport: sigue dejando agrandar con dos dedos. Eso no se toca —hay alumnos
   que lo necesitan para leer—, y además iOS ignora `user-scalable=no` desde
   hace años, justamente para que nadie pueda sacarles el zoom.

   Va sobre `#calc` entero y no sólo sobre sus teclas: entre tecla y tecla hay 6
   px de separación, y dos taps rápidos que caigan ahí volvían a agrandar. */
button,label,summary,
.opcion,.botonFalso,.vistas,
#calc,#calcFab{touch-action:manipulation}

button{font-family:var(--sans);font-size:12.5px;font-weight:600;padding:7px 14px;
  border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  cursor:pointer;transition:background .12s,border-color .12s}
button:hover:not(:disabled){background:var(--hover);border-color:var(--ink-3)}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.45;cursor:not-allowed}
button.pri{background:var(--accent);border-color:var(--accent);color:#fff}
button.pri:hover:not(:disabled){background:var(--accent-fuerte);border-color:var(--accent-fuerte)}
button.alerta{background:var(--bad);border-color:var(--bad);color:#fff}
button.alerta:hover:not(:disabled){background:var(--bad-fuerte);border-color:var(--bad-fuerte)}
button.fant{border:none;color:var(--ink-3);padding:7px 9px;background:none}
button.fant:hover:not(:disabled){background:var(--hover);color:var(--ink)}

input[type=text],input[type=password],textarea{
  font-family:var(--sans);font-size:14px;padding:9px 11px;border:1px solid var(--line);
  border-radius:4px;background:var(--surface);color:var(--ink);width:100%}
/* iOS hace zoom solo cuando enfocás un campo de menos de 16px, y en mitad del
   examen eso descoloca la pantalla. Con 16px no pasa. */
@media (max-width:640px){
  input[type=text],input[type=password],input[type=number],textarea,select{
    font-size:16px}
}
label{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);margin:0 0 5px}

/* ───────────── ingreso ───────────── */
.ingreso{min-height:100%;display:grid;place-items:center;padding:24px}
.tarjeta{background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:28px;width:100%;max-width:380px}
.marca{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3);
  font-weight:700;margin-bottom:6px}
.tarjeta h1{font-size:19px;margin:0 0 4px;font-weight:600;letter-spacing:-.015em}
.tarjeta .bajada{color:var(--ink-2);font-size:13px;margin:0 0 22px}
.campo{margin-bottom:15px}
.campo .ayuda{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.aviso{padding:10px 12px;border-radius:4px;font-size:12.5px;margin-bottom:15px;display:none}
.aviso.mal{background:var(--bad-soft);color:var(--bad);display:block}
.aviso.bien{background:var(--ok-soft);color:var(--ok);display:block}
.reglas{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--ink-3)}
.reglas li{margin-bottom:5px}

/* ───────────── sala de espera ─────────────
   Tapa todo hasta que el docente arranca el examen. Los tres puntos son para
   que se note que la pantalla está viva y esperando, no colgada. */
/* El mismo agujero que tenían los modales, en la otra pantalla que tapa todo.
   `position:fixed` + una tarjeta más alta que el teléfono = los botones quedan
   abajo del borde y no hay cómo llegar, porque la página de atrás no scrollea
   esto. Le pasó a una alumna en el microexamen del 9/9: entró con el examen ya
   empezado, la tarjeta de «antes de empezar» le juntó el aviso del examen Y el
   pedido de la selfie —731 px contra una ventana de 560— y «Empezar el examen»
   y «Ahora no» quedaron los dos afuera. Ella veía «Cargando el examen…» detrás
   y recargó cinco veces, que la dejaba en la misma tarjeta.

   `margin:auto` en la tarjeta en vez de `place-items:center` a secas: los
   márgenes automáticos centran mientras sobra lugar y se resuelven a cero
   cuando falta, o sea que la tarjeta alta arranca arriba y se alcanza
   scrolleando. Centrar a secas la desborda por los dos lados y la mitad de
   arriba tampoco se alcanza. */
.sala{position:fixed;inset:0;z-index:200;background:var(--paper);
  display:grid;place-items:center;padding:24px;overflow:auto}
.sala > .tarjeta{margin:auto}
.latido{display:flex;gap:7px;justify-content:center;margin-top:18px}
.latido span{width:9px;height:9px;border-radius:50%;background:var(--accent);
  opacity:.3;animation:puntito 1.3s ease-in-out infinite}
.latido span:nth-child(2){animation-delay:.18s}
.latido span:nth-child(3){animation-delay:.36s}
@keyframes puntito{40%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.latido span{animation:none;opacity:.6}}

/* ───────────── encabezado + cinta ───────────── */
header{background:var(--surface);border-bottom:1px solid var(--line);
  padding:10px 18px 0;position:sticky;top:0;z-index:20}
.fila-sup{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.codigo{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.09em;
  background:var(--ink);color:var(--surface);padding:3px 8px;border-radius:3px}
header h1{font-size:16px;font-weight:600;margin:0;letter-spacing:-.01em}
.quien{font-size:12px;color:var(--ink-3)}
.reloj{margin-left:auto;font-family:var(--mono);font-size:15px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink-2)}
.reloj.poco{color:var(--signal);font-weight:700}

.cinta-wrap{padding:9px 0 10px}
.cinta-etq{display:flex;justify-content:space-between;align-items:center;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:5px}
.cinta-etq b{color:var(--signal);font-weight:700;letter-spacing:.02em;text-transform:none;font-size:12px}
.cinta-etq b.limpio{color:var(--ok)}
.cinta{position:relative;height:12px;background:var(--line-soft);border-radius:2px;overflow:hidden}
.cinta-avance{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent-soft)}
.hito{position:absolute;top:0;bottom:0;background:var(--signal);min-width:2px;border-radius:1px}
.hito.roja{background:var(--bad)}
.hito.viva{animation:latir .9s ease-in-out infinite}
@keyframes latir{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.hito.viva{animation:none}}

/* ───────────── grilla del examen ───────────── */
.tabs{display:flex;gap:2px;padding:0 12px;background:var(--surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:19;overflow-x:auto}
.tabs button{border:none;border-bottom:2px solid transparent;border-radius:0;padding:9px 13px;
  font-size:12.5px;color:var(--ink-3);background:none;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}
.tabs .marca-ok{color:var(--ok);font-size:11px;margin-left:5px}

/*
 * Disposición tipo editor de código: el enunciado a la izquierda ocupando todo
 * el alto, y a la derecha el código arriba con la consola justo debajo.
 *
 * Antes la consola estaba en una tercera columna, a la derecha del todo: el
 * alumno escribía en el medio y la salida de su programa le aparecía lejos, en
 * otra punta de la pantalla. Debajo del código es donde uno la busca.
 */
main{display:grid;grid-template-columns:310px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(180px,38%);gap:1px;
  background:var(--line);height:calc(100vh - 137px)}
.panel[data-vista="enunciado"]{grid-column:1;grid-row:1 / 3}
.panel[data-vista="editor"]{grid-column:2;grid-row:1}
.panel[data-vista="salida"]{grid-column:2;grid-row:2}

/* Los botones de correr, a la derecha del rótulo «Tu código». */
.cab-acciones{margin-left:auto;display:flex;gap:6px}
.cab-acciones button{font-size:11.5px;padding:4px 10px}
/* En el teléfono vuelven a los 44 px: son los botones que más se tocan. */
@media (max-width:640px){
  .cab-acciones button{min-height:44px;padding:8px 14px;font-size:13px}
  .panel-cab{padding:6px 10px}
}
.panel{background:var(--surface);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.panel-cab{padding:9px 14px;border-bottom:1px solid var(--line-soft);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-3);
  display:flex;align-items:center;gap:8px;flex-shrink:0}
.panel-cuerpo{overflow:auto;flex:1;min-height:0}

.enunciado{padding:16px 16px 28px;font-size:13.5px}
.enunciado h2{font-size:15px;margin:0 0 10px;font-weight:600;letter-spacing:-.01em}
.enunciado p{margin:0 0 12px;color:var(--ink-2)}
.enunciado ol{margin:0 0 14px;padding-left:18px;color:var(--ink-2)}
.enunciado li{margin-bottom:5px}
.enunciado code{font-family:var(--mono);font-size:12px;background:var(--accent-soft);
  color:var(--accent);padding:1px 4px;border-radius:3px}
.subt{font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin:18px 0 7px;padding-top:12px;border-top:1px solid var(--line-soft)}
.muestra{font-family:var(--mono);font-size:12px;background:var(--codigo);border:1px solid var(--line-soft);
  border-radius:4px;padding:9px 11px;white-space:pre-wrap;overflow-x:auto}
.muestra .in{color:var(--accent)}

.barra{display:flex;gap:7px;padding:8px 12px;border-top:1px solid var(--line-soft);
  background:var(--surface);flex-shrink:0;flex-wrap:wrap;align-items:center}
.estado{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.estado.guardando{color:var(--accent)}
.estado.sinred{color:var(--signal)}

.CodeMirror{height:100%;font-family:var(--mono);font-size:13.5px;line-height:1.65;
  background:var(--surface);color:var(--ink)}
.CodeMirror-gutters{background:var(--codigo);border-right:1px solid var(--line-soft)}
.CodeMirror-linenumber{color:var(--ink-3);font-size:11.5px}
.CodeMirror-cursor{border-left:2px solid var(--accent)}
.CodeMirror-selected{background:var(--accent-soft)!important}
.cm-keyword{color:#8A4B7C;font-weight:500}
.cm-string{color:var(--ok)}
.cm-number{color:var(--signal)}
.cm-comment{color:var(--ink-3);font-style:italic}
.cm-builtin,.cm-def{color:var(--accent)}
.cm-operator{color:var(--ink-2)}

/* ───────────── consola ───────────── */
.der{display:flex;flex-direction:column;gap:1px;background:var(--line);overflow:hidden}
.sub-panel{background:var(--surface);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.sub-panel.consola{flex:1 1 52%}
.sub-panel.pruebas{flex:1 1 48%}
/* En la franja de abajo van lado a lado: la consola a la izquierda, que es
   donde el alumno mira primero, y la verificación al costado. */
@media (min-width:941px){
  .panel[data-vista="salida"]{flex-direction:row;gap:1px;background:var(--line)}
  .sub-panel.pruebas{flex:0 0 340px}
}
.salida{font-family:var(--mono);font-size:12.5px;line-height:1.6;padding:11px 13px;
  white-space:pre-wrap;word-break:break-word;flex:1;overflow:auto;min-height:0}
.salida .eco{color:var(--accent);font-weight:500}
.salida .err{color:var(--bad)}
.salida .sis{color:var(--ink-3);font-style:italic}
.salida:empty::before{content:"La salida de tu programa aparece acá.";color:var(--ink-3);font-style:italic}

/* renglón de entrada dentro de la consola */
.renglon{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px}
.renglon .cursor{color:var(--accent);font-weight:700}
.renglon input{border:none;background:none;padding:0;font-family:var(--mono);font-size:12.5px;
  color:var(--accent);font-weight:500;flex:1;outline:none;width:auto}

/* La fila «chip / texto / detalle». Arriba va alineada al principio y no al
   centro: cuando el detalle ocupa dos o tres renglones —una opción larga de
   opción múltiple— centrar el ✓ contra un bloque alto queda raro y, sobre todo,
   confunde sobre a qué fila pertenece. */
.prueba{display:flex;align-items:flex-start;gap:9px;padding:8px 13px;
  border-bottom:1px solid var(--line-soft);font-size:12.5px}
.chip{width:19px;height:19px;border-radius:3px;flex-shrink:0;display:grid;place-items:center;
  font-size:11px;font-weight:700;font-family:var(--mono);background:var(--line-soft);color:var(--ink-3)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.prueba .nom{flex:1;min-width:0}
/* El detalle trae «lo que puso → esperaba lo correcto», y con preguntas de
   opción múltiple esos dos textos son frases enteras. Sin tope, el detalle se
   queda con TODO el ancho de la fila: la pregunta se aplasta a una palabra por
   renglón y el detalle se dibuja encima de la fila siguiente, de modo que el ✕
   de una fila queda pegado al texto de otra. Medido: 944 px de detalle contra
   0 px de pregunta. El tope y el corte de palabras lo mantienen adentro. */
.prueba .detalle{font-family:var(--mono);font-size:11px;color:var(--ink-3);
  min-width:0;max-width:45%;overflow-wrap:anywhere;text-align:right}
.diff{font-family:var(--mono);font-size:11.5px;padding:0 13px 11px 43px;
  border-bottom:1px solid var(--line-soft);white-space:pre-wrap}
.diff span{display:block;color:var(--ink-3)}
.diff .esp{color:var(--ok)}
.diff .obt{color:var(--bad)}
.revision{padding:8px 13px;font-size:12.5px;display:flex;gap:9px;align-items:flex-start;
  border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
.vacio{padding:14px 13px;color:var(--ink-3);font-style:italic;font-size:12.5px}
.nota-ocultas{padding:9px 13px;font-size:11.5px;color:var(--ink-3);background:var(--codigo);
  border-bottom:1px solid var(--line-soft)}

/* ───────────── modal ───────────── */
.velo{position:fixed;inset:0;background:rgba(20,23,43,.45);display:none;place-items:center;
  z-index:60;padding:20px;overflow:auto}
.velo.abierto{display:grid}
/* El alto limitado NO es prolijidad: el velo es `position:fixed`, así que lo que
   el modal sobresale por abajo no se alcanza scrolleando la página —queda fuera
   del mundo—. En una netbook de 1024x600 la ventana útil son ~450 px y el
   diálogo de la foto (texto + vista previa de 220 px + la lista) mide 686: al
   alumno le quedaban los botones «Cerrar» y «Subir» abajo del borde y no tenía
   cómo llegar. Pasó en el aula, con el examen corriendo. Ahora el modal nunca
   pasa de la pantalla y scrollea por dentro. */
.modal{background:var(--surface);border-radius:6px;padding:24px;max-width:460px;width:100%;
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto}
.modal h2{margin:0 0 10px;font-size:17px;font-weight:600}
.modal p{color:var(--ink-2);margin:0 0 18px;font-size:13.5px}
/* Y los botones quedan pegados abajo aunque el contenido scrollee: que estén
   «a mano scrolleando» no alcanza cuando el alumno está apurado por entregar.
   El bottom negativo y el margen negativo cancelan el padding de 24 del modal,
   para que al pegarse queden al ras y no flotando sobre un hueco. */
/* flex-wrap: con cuatro botones en un celular la fila no entra, y sin bajar de
   renglón el primero («Todavía no») se iba afuera por la izquierda. */
.modal .acciones{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;
  position:sticky;bottom:-24px;background:var(--surface);
  padding:10px 0 24px;margin-bottom:-24px}
.resultado-fila{display:flex;justify-content:space-between;padding:7px 0;
  border-bottom:1px solid var(--line-soft);font-size:13px}
.resultado-fila b{font-family:var(--mono)}
/* Cartel de «recuperamos lo que habías escrito», arriba de todo. */
.aviso.recuperado{display:block;margin:0;border-radius:0;text-align:center;
  font-size:13px;padding:9px 14px}

/* ───────────── examen de matemática ───────────── */
.hoja{max-width:820px;margin:0 auto;padding:18px 16px 90px}
.grupo{background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:18px 20px;margin-bottom:16px}
.grupo h2{font-size:15px;margin:0 0 10px;font-weight:600}
/* El contexto de un grupo puede traer una tabla HTML escrita por el docente
   (una planilla de ejemplo, un cuadro de datos), y una tabla de cinco columnas
   no entra en 375 px por mucho que se le pida «width:100%»: el ancho mínimo del
   contenido gana. Sin este scroll propio el desborde se lo comía la página
   entera, que pasaba a medir 406 px, y al empujar la tabla se corría también el
   enunciado y las opciones. Medido con las tablas de TALLER-TP1. */
.contexto{font-size:14px;color:var(--ink-2);line-height:1.65;overflow-x:auto}
.contexto p{margin:0 0 8px}
/* Las tablas del docente vienen con «border=1» y estilos propios; lo único que
   se les impone es que no se estiren más allá de lo que necesitan. */
.contexto table{width:auto;max-width:100%}
/* Los encabezados del panel del docente son versalitas espaciadas, y ese estilo
   se colaba acá por el selector suelto «th». En una tabla que lee el alumno no
   sirve: «TRATAMIENTO» en mayúsculas con letter-spacing es la palabra más ancha
   de la tabla y es la que la empuja fuera de la pantalla del teléfono. */
.contexto th{text-transform:none;letter-spacing:0;font-size:inherit;color:var(--ink)}
svg.histo{width:100%;height:auto;margin:10px 0 4px}
svg.histo line{stroke:var(--line);stroke-width:1}
svg.histo rect{fill:var(--accent);opacity:.85}
svg.histo text{font-family:var(--sans);font-size:11px;fill:var(--ink-3)}
svg.histo text.val{font-size:12px;font-weight:700;fill:var(--ink)}

.pregunta{border-top:1px solid var(--line-soft);padding:14px 0 4px;margin-top:12px}
.enunciado-p{font-size:14px;line-height:1.6;display:flex;gap:8px}
.enunciado-p b{font-family:var(--mono);color:var(--ink-3);flex-shrink:0}
.opciones{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px 26px}
/* Ojo: .opcion es un <label>, y el estilo global de label lo pondría en
   mayúsculas y chiquito. Acá lo devolvemos a texto normal, que es lo que va. */
.opcion{display:flex;gap:9px;align-items:flex-start;padding:8px 11px;font-size:14px;
  border:1px solid var(--line);border-radius:4px;cursor:pointer;
  text-transform:none;letter-spacing:normal;font-weight:400;color:var(--ink)}
.opcion:hover{background:var(--line-soft)}
.opcion.elegida{border-color:var(--accent);background:var(--ok-soft)}
.opcion input{margin-top:2px;flex-shrink:0}
input.numerica{width:220px;margin:10px 0 4px 26px;font-family:var(--mono)}
textarea.libre{margin:10px 0 4px 26px;width:calc(100% - 26px);line-height:1.55}

/* ── modo de a una pregunta ──
   El mapa de abajo evita que el alumno quede a ciegas: ve cuántas hay, cuáles
   ya contestó y puede saltar a cualquiera. */
.paso{display:flex;align-items:center;gap:12px;margin:14px 0}
.paso button{flex:1;min-height:44px}
.paso-cuenta{font-size:12.5px;color:var(--ink-2);white-space:nowrap;font-weight:600}
.mapa{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.casilla{width:34px;height:34px;padding:0;border-radius:4px;font-family:var(--mono);
  font-size:12.5px;color:var(--ink-3)}
.casilla.hecha{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}

/* Respuesta ya cerrada: se ve que quedó firme, no que se rompió algo. */
.opcion.fija{opacity:.75;cursor:default;background:var(--line-soft)}
.opcion.fija.elegida{opacity:1;background:var(--ok-soft);border-color:var(--ok)}
.fijada{font-size:11.5px;color:var(--signal);background:var(--signal-soft);
  padding:6px 9px;border-radius:4px;margin:8px 0 0 26px}
@media (max-width:640px){ .fijada{margin-left:0} }
.casilla.actual{outline:2px solid var(--accent);outline-offset:1px;color:var(--ink)}

.barra-mate{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--surface);border-top:1px solid var(--line);
  padding:10px 16px;display:flex;gap:10px;align-items:center;
  justify-content:flex-end}
.avance-resp{font-size:12px;color:var(--ink-3);margin-right:auto}
.avance-resp.completo{color:var(--ok);font-weight:600}

/* ───────────── celular ─────────────
   El examen se rinde sobre todo desde el teléfono, así que acá se agranda todo
   lo que hay que tocar y se recupera el ancho que en escritorio sobra. */
@media (max-width:640px){
  .hoja{padding:12px 10px 96px}
  .grupo{padding:14px 13px;border-radius:5px}

  /* La sangría de las opciones se come 26 de 375 px. En el teléfono, fuera. */
  .opciones{margin-left:0;gap:8px}
  input.numerica,textarea.libre{margin-left:0;width:100%}

  /* 44 px es el mínimo para que un dedo acierte sin pelearse. */
  .opcion{min-height:44px;align-items:center;padding:10px 12px}
  .barra-mate{padding:8px 10px;gap:8px}
  .barra,.barra-mate{padding:8px 10px;gap:8px;flex-wrap:wrap}
  .barra button,.barra-mate button{min-height:44px;padding:10px 14px}
  .avance-resp{font-size:11px}

  /* El encabezado queda fijo arriba y se come pantalla útil: en el teléfono va
     más apretado. La cinta se mantiene visible, que es a propósito. */
  header{padding:8px 12px 0}
  .fila-sup{gap:8px}
  header h1{font-size:13px}
  .quien{font-size:11px}
  .cinta-wrap{padding:7px 0 8px}

  /* ── panel del docente en el teléfono ──
     La tabla completa mide ~700 px. En un celular de 375 el navegador achica
     la página entera al 50 % para que entre y no se lee nada. Se esconden las
     dos columnas que no se miran caminando por el aula (el DNI y el
     dispositivo son para después, no para el momento), y por las dudas la caja
     scrollea sola en vez de estirar la página. */
  .docente{padding:12px 10px}
  .caja{padding:12px;overflow-x:auto}
  .col-dni,.col-disp,.col-curso{display:none}
  table{font-size:13px}
  th,td{padding:7px 6px}
  .caja button{min-height:40px;padding:9px 12px}
  /* Las tablas que el docente escribe en el contexto de un grupo son datos de
     ejemplo, no una planilla de verdad: con la letra y el padding un punto más
     chicos entran enteras en 375 px, que es mejor que tener que arrastrarlas. */
  .contexto table{font-size:12px}
  .contexto th,.contexto td{padding:5px 6px}

  /* En el celular la fila «chip / texto / detalle» no entra en una línea: el
     texto quedaba en una columna de una letra de ancho. Se apila. */
  .prueba{flex-wrap:wrap}
  .prueba .nom{flex:1 1 100%;min-width:0;order:2}
  /* En el celular la fila se apila, así que el detalle ocupa el ancho entero:
     hay que soltarle el tope del 45 % que lleva en pantalla grande. */
  .prueba .detalle{order:3;flex:1 1 100%;max-width:none;text-align:right}
  .prueba .chip{order:1}
  .mini{min-height:0;padding:3px 8px}
  .mini-cinta{width:80px}
  #resumen .dato b{font-size:18px}
}

/* ───────────── calculadora ───────────── */
#calcFab{position:fixed;right:18px;bottom:18px;z-index:70;width:50px;height:50px;
  border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-family:var(--mono);font-size:17px;cursor:pointer;
  box-shadow:0 3px 12px rgba(20,23,43,.18)}
#calcFab:hover{background:var(--line-soft)}
#calc{position:fixed;right:18px;bottom:78px;z-index:71;width:266px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:12px;box-shadow:0 8px 28px rgba(20,23,43,.22);
  display:none;outline:none}
#calc.abierta{display:block}
.calc-cab{display:flex;align-items:center;justify-content:space-between;
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin-bottom:8px}
#calcDisplay{font-family:var(--mono);font-size:19px;text-align:right;padding:9px 11px;
  border:1px solid var(--line);border-radius:4px;margin-bottom:9px;
  overflow-x:auto;white-space:nowrap;background:var(--paper)}
#calcGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
#calcGrid button{padding:11px 0;font-family:var(--mono);font-size:15px;
  border:1px solid var(--line);border-radius:4px;background:var(--surface);
  color:var(--ink);cursor:pointer}
#calcGrid button:hover{background:var(--line-soft)}
#calcGrid button.op{background:var(--paper);color:var(--ink-2)}
#calcGrid button.eq{background:var(--accent);color:#fff;border-color:var(--accent)}
#calcGrid button.ancho{grid-column:span 3}
@media (max-width:940px){
  #calcFab{bottom:70px}
  #calc{bottom:130px;left:12px;right:12px;width:auto}
}

/* ───────────── resumen y fotos del panel ───────────── */
/* Barra de control del examen: arrancar, estirar, cerrar. */
#control:empty{display:none}
.control{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.control-texto{flex:1;min-width:180px;font-size:12.5px;color:var(--ink-2)}
.pill-estado{font-size:11px;font-weight:700;padding:3px 10px;border-radius:10px;
  text-transform:uppercase;letter-spacing:.06em}
.pill-estado.espera{background:var(--signal-soft);color:var(--signal)}
.pill-estado.en_curso{background:var(--ok-soft);color:var(--ok)}
.pill-estado.terminado{background:var(--line-soft);color:var(--ink-3)}
/* La barra de «cuánto lleva contestado», en la tabla del panel. Angosta a
   propósito: el docente la mira de reojo mientras camina, no la estudia.
   Ojo con el nombre: «.barra» ya es la barra de acciones del examen, con su
   padding y su display:block. Usarla acá dejaba el riel de 17 px de alto y el
   relleno a media asta. */
.avance{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.avance .riel{display:inline-block;width:46px;height:8px;border-radius:5px;
  background:var(--line-soft);overflow:hidden}
.avance .riel i{display:block;height:100%;background:var(--signal);
  transition:width .4s ease}
.avance .riel.full i{background:var(--ok)}
.avance .riel.listo i{background:var(--ink-3)}
.avance .cuenta{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

/* ── tablero del examen ──
   Dos vistas que se leen sin números: la nube de notas (un círculo por alumno)
   y una barra por punto del examen. Lo que hace comparable la columna de barras
   es que TODAS arrancan en el mismo lugar, así que las tres columnas de la fila
   son de ancho fijo y no «auto»: con un título más largo, la barra de ese punto
   arrancaría dos centímetros más a la derecha y la lectura de un vistazo se
   pierde, que es lo único que esta pantalla tiene para ofrecer. */
.tb-titulo{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);margin:20px 0 4px;padding-top:14px;
  border-top:1px solid var(--line-soft)}
.tb-ayuda{font-size:12px;color:var(--ink-3);margin:0 0 10px}
.modal p.tb-ayuda{margin:0 0 10px}

/* Ojo con la caja de afuera: «.modal.ancho» es flex en columna y ahí un svg
   con «height:auto» colapsa a unos pocos píxeles en vez de tomar el alto de su
   viewBox. Por eso la nube va envuelta en un bloque común. */
.tb-nube-caja{margin:2px 0 6px}
.tb-nube{width:100%;height:auto;display:block}
.tb-nube .eje,.tb-nube .marca{stroke:var(--line);stroke-width:1}
.tb-nube text{font-family:var(--sans);font-size:11px;fill:var(--ink-3)}
.tb-nube .prom{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.tb-nube .promT{font-size:11px;fill:var(--ink-3);font-weight:600}
.tb-nube .pt{cursor:pointer;stroke:var(--surface);stroke-width:1.5}
.tb-nube .pt:hover{stroke:var(--ink);stroke-width:2}
.tb-nube .pt.bien{fill:var(--ok)}
.tb-nube .pt.medio{fill:var(--signal)}
.tb-nube .pt.mal{fill:var(--bad)}

.tb-fila{display:grid;grid-template-columns:168px 1fr 116px;gap:10px;
  align-items:center;padding:7px 0;border-bottom:1px solid var(--line-soft)}
/* Dos renglones y corta: el texto entero está en el «title», y con diez
   preguntas las filas altas dejarían de leerse como una columna de barras. */
.tb-etq{font-size:12px;color:var(--ink-2);overflow:hidden;display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.tb-etq b{font-family:var(--mono);font-size:12.5px;color:var(--ink);margin-right:5px}
.tb-etq span{display:inline}
.tb-riel{position:relative;height:20px;border-radius:3px;background:var(--line-soft);
  overflow:hidden}
.tb-riel i{display:block;height:100%;transition:width .5s ease}
.tb-riel em{position:absolute;top:0;left:7px;line-height:20px;font-style:normal;
  font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink)}
.tb-riel.bien i{background:var(--g2-tinte)}
.tb-riel.medio i{background:var(--g3-tinte)}
.tb-riel.mal i{background:var(--g5-tinte)}
.tb-dato{font-size:11.5px;color:var(--ink-3);text-align:right}
.tb-dato .blanco{display:block;color:var(--signal)}
/* El desglose por tema cuelga debajo de la barra y arranca donde arranca ella:
   es la comparación que contesta «¿se cayó el punto o se cayó ese tema?». */
.tb-temas{grid-column:2/3;display:flex;gap:5px;flex-wrap:wrap;margin-top:-2px}
.tb-tema{font-family:var(--mono);font-size:10.5px;padding:1px 6px;border-radius:9px;
  background:var(--line-soft);color:var(--ink-3)}
.tb-tema.bien{background:var(--ok-soft);color:var(--ok)}
.tb-tema.medio{background:var(--signal-soft);color:var(--signal)}
.tb-tema.mal{background:var(--bad-soft);color:var(--bad)}

/* En el celular la etiqueta va arriba y la barra ocupa el ancho: con 168 px de
   título no quedaba nada para la barra, que es lo que hay que ver. */
@media (max-width:640px){
  /* El svg se achica entero al entrar en 335 px, así que sus 11 px de letra
     quedan en 5 y no se leen. Como las medidas son del viewBox y no de la
     pantalla, agrandarlas acá es lo que las deja del mismo tamaño real. */
  .tb-nube text{font-size:19px}
  .tb-nube .promT{font-size:19px}
  .tb-nube .pt{stroke-width:3}
  .tb-fila{grid-template-columns:1fr auto;gap:4px 8px;padding:9px 0}
  .tb-etq{grid-column:1/3}
  .tb-riel{grid-column:1/2}
  .tb-dato{text-align:right;white-space:nowrap}
  .tb-temas{grid-column:1/3}
}

/* ── proceso del curso ──
   Una fila por alumno y una columna por evaluación. Con ocho evaluaciones no
   entra en el modal, así que la caja scrollea al costado y la columna del
   nombre queda pegada: si al correr la tabla se pierde de quién es la fila, el
   tablero deja de servir. */
.pr-filtros{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.pr-filtros .campo{flex:1;min-width:180px;margin:0}
.pr-scroll{overflow-x:auto;border:1px solid var(--line-soft);border-radius:4px;
  margin-top:10px}
.pr-tabla{width:100%;border-collapse:collapse}
.pr-tabla th,.pr-tabla td{padding:5px 7px;border-bottom:1px solid var(--line-soft)}
.pr-tabla th.pr-ex{font-family:var(--mono);font-size:10.5px;letter-spacing:0;
  text-transform:none;color:var(--ink-2);text-align:center;white-space:nowrap}
.pr-tabla th.pr-ex span{display:block;font-family:var(--sans);font-size:9.5px;
  color:var(--ink-3);font-weight:400}
/* Pegada al borde izquierdo: si al correr la tabla se pierde de quién es la
   fila, el tablero deja de servir. Ojo: el <td> NO puede ser flex —una celda en
   display:flex deja de ser celda y la columna se desacopla de su fila, que fue
   justo lo que pasó: al scrollear, los nombres avanzaban y las notas no—. El
   flex va en un bloque adentro. */
.pr-quien{position:sticky;left:0;background:var(--surface);z-index:1;
  white-space:nowrap;text-align:left}
/* «pr-fila» y no «caja»: «.caja» ya son las tarjetas del panel, con su borde y
   su padding, y al reusar el nombre cada renglón de la tabla se convirtió en un
   recuadro de 75 px de alto. Es la segunda vez que pasa (antes con «.barra»):
   al agregar CSS, mirar si el nombre está tomado. */
.pr-quien .pr-fila{display:flex;align-items:center;gap:7px}
.pr-quien .pr-fila > span{display:flex;flex-direction:column;line-height:1.25}
.pr-quien b{font-size:12.5px;font-weight:600}
.pr-quien i{font-style:normal;font-size:10.5px;color:var(--ink-3)}
.pr-dona{width:24px;height:24px;flex-shrink:0}
.pr-dona .fondo{fill:none;stroke:var(--line-soft);stroke-width:4}
.pr-dona .arco{fill:none;stroke-width:4;stroke-linecap:round}
.pr-dona.bien .arco{stroke:var(--ok)}
.pr-dona.medio .arco{stroke:var(--signal)}
.pr-dona.mal .arco{stroke:var(--bad)}
.pr-dona.sin .arco{stroke:none}

.pr-celda{text-align:center}
.pr-nota{display:inline-block;min-width:34px;padding:2px 5px;border-radius:3px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;cursor:pointer;
  border:1px solid transparent}
.pr-nota.bien{background:var(--ok-soft);color:var(--ok)}
.pr-nota.medio{background:var(--signal-soft);color:var(--signal)}
.pr-nota.mal{background:var(--bad-soft);color:var(--bad)}
/* La que el alumno todavía no puede ver. Es la decisión que el docente tiene
   pendiente, así que se marca sin gritar. */
.pr-nota.oculta{border-style:dashed;border-color:currentColor;opacity:.75}
.pr-falto{color:var(--ink-3);font-family:var(--mono);font-size:12px}
.pr-nada{color:var(--line);font-size:14px}
.pr-prom{text-align:center;font-family:var(--mono);font-size:12px;font-weight:700}
.pr-curso td{background:var(--paper);border-top:2px solid var(--line)}
.pr-curso .pr-quien{background:var(--paper)}
.pr-curso .pr-nota{cursor:default}

@media (max-width:640px){
  .pr-tabla th,.pr-tabla td{padding:4px 5px}
  .pr-quien b{font-size:11.5px}
  .pr-nota{min-width:28px;font-size:11px}
}

.quedan{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.quedan.poco{color:var(--signal)}
.quedan.fin{color:var(--ink-3)}

#resumen{display:flex;gap:10px;flex-wrap:wrap}
#resumen:empty{display:none}
#resumen .dato{flex:1 1 110px;padding:10px 12px;border:1px solid var(--line-soft);
  border-radius:5px;background:var(--paper)}
#resumen .dato b{display:block;font-family:var(--mono);font-size:21px;line-height:1.1}
#resumen .dato span{font-size:11px;color:var(--ink-3)}
#resumen .dato.ojo{background:var(--signal-soft);border-color:var(--signal)}
#resumen .dato.ojo b{color:var(--signal)}

/* Respuesta a desarrollar, en el detalle del alumno. */
.respuesta-libre{padding:8px 13px 12px 43px;border-bottom:1px solid var(--line-soft);
  font-size:12.5px}
.respuesta-libre .dicho{white-space:pre-wrap;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:4px;padding:9px 11px}
.respuesta-libre .esperado{color:var(--ink-3);margin-top:6px;font-size:11.5px}
.respuesta-libre .motivo{margin-top:6px;font-size:11.5px;color:var(--accent);
  font-style:italic}
.respuesta-libre .puntuar{display:flex;gap:8px;align-items:center;margin-top:8px}

/* ── seguimiento en vivo en la tabla ──
   Lo que está pasando ahora se ve antes que el historial: la fila se tiñe y el
   punto late. Rojo es «se pasó del umbral», ámbar es «salió recién». */
.vivo{font-size:11px;color:var(--signal);font-weight:600}
.vivo.grave{color:var(--bad)}
.vivo::first-letter{animation:latir 1.1s ease-in-out infinite}
.reinicios{font-size:11px;color:var(--ink-3);font-style:italic}
#resumen .dato.grave{background:var(--bad-soft);border-color:var(--bad)}
#resumen .dato.grave b{color:var(--bad)}
/* La columna de curso se esconde si no hay ninguno cargado. */
.col-curso{font-size:12px;color:var(--ink-3)}
.sin-curso .col-curso{display:none}

/* La columna del examen solo aparece en la vista de «todos a la vez». */
.col-examen{display:none;font-family:var(--mono);font-size:11.5px}
.con-examen .col-examen{display:table-cell}
@media (prefers-reduced-motion:reduce){.vivo::first-letter{animation:none}}

/* Cinta en miniatura dentro de la fila del alumno. */
.mini-cinta{width:150px}

/* Botoncito de «mostrar nota» dentro de la fila del alumno. */
.mini{font-size:10.5px;padding:2px 7px;margin-left:6px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-3);
  cursor:pointer;font-family:var(--sans)}
.mini:hover{background:var(--line-soft)}
.mini.prendida{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}

/* Cuándo se sueltan las notas. Va con la misma pinta que los botoncitos de al
   lado —«se anotan solos», «precargar el código»— porque es lo mismo: algo que
   queda prendido para este examen. En verde cuando dejó de estar «a mano», que
   es la señal de que el panel va a hacer algo solo. */
.modo-notas{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  padding:2px 7px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-3);font-family:var(--sans)}
.modo-notas.prendida{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.modo-notas select{font-size:10.5px;font-family:var(--sans);color:inherit;
  background:transparent;border:0;padding:1px 2px;cursor:pointer}
@media (max-width:640px){
  /* En el celular todo lo que se toca mide 44 px; el selector también. */
  .modo-notas{padding:6px 10px;font-size:12px}
  .modo-notas select{font-size:12px;min-height:32px}
}

/* La respuesta correcta y el porqué, debajo de la que erró el alumno. */
.correccion{font-size:12.5px;padding:8px 12px;margin:0 0 8px;
  background:var(--ok-soft);border-left:3px solid var(--ok);border-radius:0 4px 4px 0}
.correccion b{color:var(--ok)}
.correccion .porque{margin-top:5px;color:var(--ink-2);line-height:1.55}

/* Nota grande en la pantalla del alumno. */
.nota-grande{text-align:center;padding:18px 0 14px;margin-bottom:8px;
  border-bottom:1px solid var(--line-soft)}
.nota-grande b{display:block;font-family:var(--mono);font-size:40px;line-height:1}
.nota-grande span{font-size:12px;color:var(--ink-3)}

.tira-fotos{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.foto-mini{display:block;width:150px;text-decoration:none;color:var(--ink-3)}
.foto-mini img{width:150px;height:110px;object-fit:cover;border-radius:4px;
  border:1px solid var(--line);background:var(--line-soft);display:block}
.foto-mini span{display:block;font-size:11px;margin-top:3px}

/* La columna de variante se esconde en los exámenes que tienen una sola. */
.sin-variantes .col-variante{display:none}

/* Variante ancha: el YAML se edita mal en 460px, y la lista de errores puede
   ser larga, así que el modal entero scrollea en vez de desbordar la pantalla. */
.modal.ancho{max-width:780px;max-height:calc(100vh - 40px);
  overflow:auto;display:flex;flex-direction:column}
.modal.ancho textarea{white-space:pre;overflow-wrap:normal;overflow-x:auto}

/* ───────────── cámara adentro de la página ───────────── */
/* Fondo negro: mientras la cámara enciende, el video mide 0 y sin fondo el
   diálogo pega un salto cuando aparece la imagen. Con el alto reservado, no.
   Y `40vh` de tope para que en un teléfono apaisado el video no se coma la
   pantalla entera y deje los botones abajo del borde —que es el mismo error que
   ya nos costó un examen—. */
.camara{position:relative;margin:10px 0;background:#111;border-radius:4px;
  overflow:hidden;min-height:170px}
.camara video{display:block;width:100%;max-height:40vh;object-fit:contain}
.camara-cartel{position:absolute;left:0;right:0;bottom:0;padding:6px 10px;
  font-size:12px;color:#fff;background:rgba(0,0,0,.55);text-align:center}
#fPreview img{display:block;width:100%;max-height:40vh;object-fit:contain;
  margin:10px 0;border-radius:4px;border:1px solid var(--line);background:#111}

/* ───────────── carga ───────────── */
#carga{position:fixed;inset:0;background:var(--paper);z-index:100;display:grid;place-items:center;
  text-align:center}
#carga .n{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.06em}
#carga .t{font-size:17px;font-weight:600;margin-top:8px}

/* ───────────── panel docente ───────────── */
.docente{max-width:1180px;margin:0 auto;padding:22px 20px 60px}
.docente h1{font-size:20px;font-weight:600;margin:0 0 18px;letter-spacing:-.015em}
.caja{background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:18px;margin-bottom:18px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  padding:7px 9px;border-bottom:1px solid var(--line)}
td{padding:8px 9px;border-bottom:1px solid var(--line-soft)}
tr[data-sid]{cursor:pointer}
tr[data-sid]:hover td{background:var(--hover)}
.pill{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600;
  font-family:var(--mono)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.alerta{background:var(--signal-soft);color:var(--signal)}
.pill.neutro{background:var(--line-soft);color:var(--ink-3)}
.fuente{font-family:var(--mono);font-size:12px;background:var(--codigo);border:1px solid var(--line-soft);
  border-radius:4px;padding:11px;white-space:pre-wrap;overflow-x:auto;margin:6px 0 14px}

/* Selector Enunciado / Código / Salida. En escritorio los tres paneles se ven a
   la vez y sobra; en pantalla angosta es la única forma de pasar de uno a otro.
   OJO con el orden: estas reglas tienen que ir ANTES del @media que las
   muestra. Estaban después, así que el «display:none» ganaba siempre y en el
   teléfono el alumno se quedaba encerrado en el editor, sin poder leer la
   consigna ni ver la salida de su programa. */
.vistas{display:none;gap:2px;padding:0 12px;background:var(--surface);
  border-bottom:1px solid var(--line)}
.vistas button{border:none;border-bottom:2px solid transparent;border-radius:0;padding:9px 13px;
  font-size:12px;color:var(--ink-3);background:none}
.vistas button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}

@media (max-width:940px){
  main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);
    height:calc(100vh - 137px)}
  /* Todos los paneles a la única celda que hay. Sin esto, las reglas de
     escritorio («editor» en la columna 2, «salida» en la fila 2) se filtran al
     teléfono: la columna 2 no existe, el navegador la inventa al costado, y el
     panel queda corrido con una franja gris muerta a la izquierda. Medido en el
     examen de programación a 375 px: el editor arrancaba en x=38 y medía 337 de
     los 375 de pantalla.
     Va con «[data-vista]» y no con «.panel» a secas por especificidad: las
     reglas de arriba son «.panel[data-vista="editor"]» y le ganarían. */
  .panel[data-vista]{display:none;grid-column:1;grid-row:1}
  .panel[data-vista].activo{display:flex}
  .vistas{display:flex}
  .vistas button{flex:1;min-height:44px;font-size:13px}
}

/* ── foto de perfil del alumno, en la sala de espera ──
   El cuadrado es fijo para que la tarjeta no salte cuando la foto carga. */
.selfie{display:flex;gap:12px;align-items:center;text-align:left;
        margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.selfieVista{width:64px;height:64px;flex:0 0 64px;border-radius:50%;
             background:var(--surface);background-size:cover;background-position:center;
             border:1px solid var(--line);display:flex;align-items:center;
             justify-content:center;color:var(--ink-3);font-size:22px}
.selfieTexto{flex:1;font-size:13px;color:var(--ink-3);line-height:1.4}
.selfieNota{margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--ink-3)}
/* Los botones se envuelven: en 375 px «Sacar una foto» y «Elegir una foto» no
   entran en un renglon. */
.selfieBotones{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* El recuadro de la camara va ABAJO del bloque y no adentro del circulo: en un
   telefono, una vista de 64 px no alcanza para saber si uno entra en el cuadro.
   Fondo negro y alto reservado para que la tarjeta no pegue un salto cuando
   llega el primer cuadro, y `50vh` de tope para que en una netbook los botones
   no queden abajo del borde de la pantalla —el error que ya costo un examen—. */
.selfieCam{position:relative;margin:12px 0 0;background:#111;border-radius:4px;
  overflow:hidden;min-height:150px}
/* `min(40vh, 220px)`: 220 px alcanzan de sobra para encuadrar una cara, y el
   40vh es para la netbook de 1024x600 —con 50vh la tarjeta de «antes de
   empezar» medía 881 px contra 450 de ventana y el boton de empezar quedaba
   abajo del borde, que es el error que ya costo una clase—. Y mientras la
   camara esta abierta se esconde la nota de abajo: ya la leyo, y son 60 px. */
.selfieCam video{display:block;width:100%;max-height:min(40vh,220px);
  object-fit:contain;transform:scaleX(-1)}
.selfie.filmando .selfieNota{display:none}

/* ───────────── bono de proceso, en la pantalla de la nota ─────────────
   Va con el mismo peso visual que el resto y no más: es información para que
   el alumno sepa dónde está parado, no un marcador de videojuego. */
.bono{border:1px solid var(--line);border-radius:6px;padding:14px 16px;margin:18px 0 0;
  background:var(--surface)}
.bono-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:10px;flex-wrap:wrap}
.bono-titulo{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.bono-numero{font-size:22px;font-family:var(--mono);letter-spacing:-.02em;white-space:nowrap}
.bono-numero span{font-size:12px;font-family:var(--sans);color:var(--ink-3);font-weight:400}
.bono .cinta{height:8px;margin-bottom:10px}
.bono .cinta i{display:block;height:100%;background:var(--ok);border-radius:2px}
.bono-texto{margin:0 0 6px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.bono-lista{margin:0 0 8px;padding-left:18px;font-size:13px;line-height:1.6;color:var(--ink-2)}

/* Una sesión abierta cuyo reloj ya pasó: sigue contando como «adentro» pero el
   alumno no puede hacer nada. Es la fila que el docente tiene que mirar. */
.vencido{color:var(--bad)}

/* El aviso que el docente le deja al alumno para que lo lea ANTES de empezar,
   en la sala de espera. Se destaca sin gritar: tiene que leerse, pero no es un
   error ni una alarma. */
.aviso-examen{margin:14px 0 0;padding:11px 13px;text-align:left;font-size:13.5px;
  line-height:1.5;border-radius:6px;border:1px solid var(--line);
  border-left:3px solid var(--accent);background:var(--paper);color:var(--ink-2)}

/* El código que entregó el alumno, en su propia devolución. Va plegado: la
   devolución se lee de arriba abajo por los resultados, y el código es lo que
   se abre cuando algo no cerró. */
.mi-codigo{margin:6px 0 10px}
.mi-codigo summary{cursor:pointer;font-size:12.5px;color:var(--ink-3);
  padding:4px 0;user-select:none}
.mi-codigo summary:hover{color:var(--accent)}
.mi-codigo pre.muestra{margin:6px 0 0;white-space:pre;overflow-x:auto}
/* El input de archivo real está escondido: esto es su etiqueta, y tiene que
   parecer y medir lo que un botón. 44 px porque se toca con el dedo. */
.botonFalso{display:inline-flex;align-items:center;justify-content:center;
            min-height:44px;padding:0 14px;margin-top:8px;cursor:pointer;
            border:1px solid var(--line);border-radius:8px;background:var(--surface);
            color:var(--ink);font-size:14px;font-weight:500}
.botonFalso:hover{border-color:var(--accent)}

/* Miniatura del alumno en la tabla del panel. */
.caraAlumno{width:28px;height:28px;border-radius:50%;object-fit:cover;
            border:1px solid var(--line);vertical-align:middle;margin-right:8px;
            background:var(--surface)}
.sinCara{display:inline-block;width:28px;height:28px;border-radius:50%;
         border:1px dashed var(--line);vertical-align:middle;margin-right:8px}
@media (max-width:640px){ .caraAlumno,.sinCara{display:none} }

/* Cuántos del curso entraron a la sala, arriba del panel. */
.sala-cuenta{margin:10px 0;padding:10px 12px;border:1px solid var(--line);
             border-radius:8px;background:var(--surface);font-size:14px}
.sala-cuenta .faltan{margin-top:8px;font-size:13px;color:var(--ink-3);
                     line-height:1.6}
.sala-cuenta.completo{border-color:var(--ok)}

/* ── lo que flota, cuando hay una barra fija abajo ──
   La calculadora vive pegada abajo a la derecha, que es exactamente donde está
   el botón «Entregar» de la barra fija del examen de matemática. Como el botón
   flotante tiene más z-index, se comía el clic: el alumno tocaba Entregar y le
   abría la calculadora. No se veía como un error, se veía como que el examen no
   se podía entregar. Acá se lo sube por encima de la barra. */
body.barra-abajo #calcFab{bottom:74px}
body.barra-abajo #calc{bottom:134px}
@media (max-width:640px){
  body.barra-abajo #calcFab{bottom:70px;right:12px}
  /* La calculadora abierta, pegada abajo de todo, como el teclado del celular.
     Antes flotaba a 126 px del borde y medía casi 400: quedaba en el medio de
     la pantalla, justo encima de la tabla con los números que el alumno tenía
     que usar, y scrollear no servía porque la tabla pasaba por detrás. Lo
     marcó el dueño con INFO-2, el 14/9/2026. */
  #calc,body.barra-abajo #calc{left:0;right:0;bottom:0;width:auto;
    border-radius:12px 12px 0 0;border-width:1px 0 0;padding:8px 10px 10px;
    z-index:72}
  .calc-cab{margin-bottom:4px}
  #calcDisplay{padding:6px 10px;margin-bottom:6px}
  #calcGrid{gap:5px}
  #calcGrid button{padding:0;min-height:44px}
  /* Con el panel abierto, el botón redondo quedaría encima de las teclas; se
     cierra con «Cerrar», que está en la cabecera del panel. */
  body.calc-abierta #calcFab{display:none}
  /* Y la cabecera deja de quedar fija mientras hace la cuenta. Fija son 139 px
     arriba, y con el panel abajo en un celular de 667 px quedaban 190 libres:
     una tabla de seis filas (215 px) no entraba entera. Suelta, se va para
     arriba al scrollear y la tabla entra; el reloj vuelve al cerrar. */
  body.calc-abierta header{position:static}
  /* Lugar abajo de la hoja para subir el final por encima de lo que flota:
     cerrada, el botón redondo sobre la barra; abierta, el panel entero, cuya
     altura la pone calculadora.js al abrirlo. */
  body.barra-abajo .hoja{padding-bottom:140px}
  body.calc-abierta .hoja{padding-bottom:calc(var(--alto-calc, 340px) + 16px)}
}

/* Lo histórico —estuvo más de 20 s afuera en algún momento— ya no pinta la
   fila: quedaba igual que el que está afuera ahora y el rojo dejaba de decir
   nada. Vive como insignia (⏱ N) dentro de la celda de salidas. */

/* ── cada grupo de preguntas, de su color ──
   El color acá no es decoración: es lo que te dice, de un vistazo y sin leer,
   que pasaste del bloque de «porcentaje directo» al de «inflación». Con
   «de_a_una» el alumno ve una pregunta por pantalla y sin esto todas se ven
   iguales; la franja de color le da orientación.

   Se pinta el borde izquierdo y el título, nunca el fondo del texto: la
   pregunta se lee una hora seguida, a veces con sol, y el contraste del texto
   sobre papel es lo que sostiene eso. Con la clase se recorren los seis y se
   vuelve a empezar, así funciona con cualquier cantidad de grupos. */
.grupo{border-left:4px solid var(--line)}
.grupo h2{display:flex;align-items:center;gap:8px}
.grupo h2::before{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--line);flex:0 0 10px}

.grupo.c1{border-left-color:var(--g1)}  .grupo.c1 h2{color:var(--g1)}
.grupo.c1 h2::before{background:var(--g1)}
.grupo.c2{border-left-color:var(--g2)}  .grupo.c2 h2{color:var(--g2)}
.grupo.c2 h2::before{background:var(--g2)}
.grupo.c3{border-left-color:var(--g3)}  .grupo.c3 h2{color:var(--g3)}
.grupo.c3 h2::before{background:var(--g3)}
.grupo.c4{border-left-color:var(--g4)}  .grupo.c4 h2{color:var(--g4)}
.grupo.c4 h2::before{background:var(--g4)}
.grupo.c5{border-left-color:var(--g5)}  .grupo.c5 h2{color:var(--g5)}
.grupo.c5 h2::before{background:var(--g5)}
.grupo.c6{border-left-color:var(--g6)}  .grupo.c6 h2{color:var(--g6)}
.grupo.c6 h2::before{background:var(--g6)}

/* El mapa de preguntas de abajo, con el color del grupo al que pertenece cada
   una: así el alumno ve cómo está repartido el examen sin recorrerlo. */
.casilla.g1{border-color:var(--g1)}  .casilla.g1.hecha{background:var(--g1-soft)}
.casilla.g2{border-color:var(--g2)}  .casilla.g2.hecha{background:var(--g2-soft)}
.casilla.g3{border-color:var(--g3)}  .casilla.g3.hecha{background:var(--g3-soft)}
.casilla.g4{border-color:var(--g4)}  .casilla.g4.hecha{background:var(--g4-soft)}
.casilla.g5{border-color:var(--g5)}  .casilla.g5.hecha{background:var(--g5-soft)}
.casilla.g6{border-color:var(--g6)}  .casilla.g6.hecha{background:var(--g6-soft)}

/* ── «💬 Comentarios», al final del examen ──
   Llamativo a propósito (lo pidió el dueño): el alumno tiene que verlo sin
   buscarlo. Amarillo y con borde grueso, y el campo grande, a 16 px para que
   iOS no haga zoom al tocarlo. */
.comentario-final{background:var(--com-soft);border:2px solid var(--com-borde);
  border-left-width:6px;border-radius:8px;padding:18px 18px 16px;margin:0 0 14px}
.comentario-final h2{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--com)}
.comentario-final p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink)}
.comentario-final textarea{display:block;width:100%;min-height:160px;margin:0;
  padding:10px 12px;font-family:var(--sans);font-size:16px;line-height:1.55;
  color:var(--ink);background:var(--surface);border:2px solid var(--com-borde);
  border-radius:6px;resize:vertical}
.comentario-final textarea:focus{outline:3px solid var(--com-fuerte);outline-offset:1px}
.comentario-pie{display:flex;justify-content:flex-end;margin-top:12px}
.comentario-pie button{min-height:44px}
.casilla.casilla-com{width:auto;min-width:44px;padding:0 10px;font-family:var(--sans);
  background:var(--com-soft);border:2px solid var(--com-borde);color:var(--com)}
.casilla.casilla-com.hecha{background:var(--com-fuerte)}
/* Pegada al borde derecho de la barra: con cinco ejercicios en un celular las
   pestañas no entran y la barra scrollea de costado, y la última quedaba
   escondida a la derecha justo cuando tiene que verse sin buscarla. */
.tabs button.tab-comentario{position:sticky;right:0;margin-left:auto;flex-shrink:0;
  font-weight:700;color:var(--com);background:var(--com-soft);
  border-bottom-color:var(--com-borde);box-shadow:-8px 0 8px -4px var(--surface)}
.tabs button.tab-comentario[aria-selected=true]{background:var(--com-fuerte);
  color:var(--com);border-bottom-color:var(--com)}
.tabs .tab-comentario .marca-ok{color:var(--com)}
/* Con la pestaña de comentarios abierta, la grilla del editor se esconde. */
body.viendo-comentario main,body.viendo-comentario .vistas{display:none}
.hoja-comentario{padding-top:18px}
/* El aviso de la sala de espera. */
.aviso-comentario{margin:14px 0 0;padding:11px 13px;text-align:left;font-size:13.5px;
  line-height:1.5;border-radius:6px;border:2px solid var(--com-borde);
  background:var(--com-soft);color:var(--ink)}
.aviso-comentario b{color:var(--com)}
/* En el panel: la marca en la fila, y el comentario en el detalle. */
.pill.com{background:var(--com-soft);color:var(--com);border:1px solid var(--com-borde)}
.dato.com{cursor:pointer;background:var(--com-soft);border:1px solid var(--com-borde)}
.dato.com b{color:var(--com)}
.com-alumno{margin:10px 0;padding:10px 12px;border:1px solid var(--com-borde);
  border-left:5px solid var(--com-borde);border-radius:6px;background:var(--com-soft)}
.com-quien{font-size:12.5px;color:var(--com);margin-bottom:4px}
.com-texto{white-space:pre-wrap;font-size:14px;line-height:1.55;color:var(--ink)}

/* ── la pantalla de entrada y la sala de espera, a todo color ──
   Acá el color no compite con nada: son treinta segundos, no hay lectura larga,
   y es lo primero que ven cincuenta chicos. Se usa a fondo.

   La regla que sí se sostiene: **el color va detrás y alrededor de la tarjeta,
   nunca abajo del texto**. El formulario sigue siendo tinta oscura sobre papel,
   porque ahí hay que leer y escribir un documento sin equivocarse. */

.ingreso,
.sala{
  background:
    radial-gradient(950px 520px at 10% -6%,  var(--g1-tinte) 0%, transparent 58%),
    radial-gradient(820px 460px at 92% 2%,   var(--g4-tinte) 0%, transparent 56%),
    radial-gradient(760px 460px at 2% 102%,  var(--g2-tinte) 0%, transparent 56%),
    radial-gradient(900px 520px at 98% 98%,  var(--g3-tinte) 0%, transparent 58%),
    radial-gradient(700px 420px at 50% 50%,  var(--g6-tinte) 0%, transparent 52%),
    var(--paper);
}

/* La franja de arriba, ahora gruesa y con los seis colores. Es la misma
   secuencia que después separa los grupos de preguntas adentro del examen. */
.ingreso .tarjeta,
.sala .tarjeta{position:relative;overflow:hidden;
  box-shadow:0 10px 30px rgba(51,49,61,.10)}
.ingreso .tarjeta::before,
.sala .tarjeta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:9px;
  background:linear-gradient(90deg,
    var(--g1) 0 16.66%, var(--g2) 16.66% 33.33%, var(--g3) 33.33% 50%,
    var(--g4) 50% 66.66%, var(--g5) 66.66% 83.33%, var(--g6) 83.33% 100%);
}

/* El nombre del sistema, en colores: una letra de cada uno de los seis. */
.ingreso .marca,
.sala .marca{font-size:19px;letter-spacing:.26em;font-weight:800;
  margin-bottom:10px;color:var(--accent)}
.marca i{font-style:normal}
.marca i:nth-child(1){color:var(--g1)}  .marca i:nth-child(2){color:var(--g2)}
.marca i:nth-child(3){color:var(--g3)}  .marca i:nth-child(4){color:var(--g4)}
.marca i:nth-child(5){color:var(--g5)}  .marca i:nth-child(6){color:var(--g6)}

/* El campo que estás completando se enciende, así se ve dónde estás parado. */
.ingreso input:focus,
.ingreso .campo:focus-within label{color:var(--accent)}
.ingreso input:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);outline:none}

/* El botón de entrar, con degradé: es la acción principal de la pantalla. */
.ingreso .pri{background:linear-gradient(135deg, var(--g1), var(--g4));
  border-color:transparent;font-size:14px;letter-spacing:.02em}
.ingreso .pri:hover{background:linear-gradient(135deg, var(--g4), var(--g1))}

/* ── el color del panel marca lo que pasa AHORA ──
   Con 50 alumnos, pintar la fila entera al que salió hace media hora y ya
   volvió hacía que el rojo dejara de significar «andá a verlo». Ahora sólo se
   marca al que está afuera en este momento, con una franja al costado que se ve
   de lejos sin teñir el nombre, y el rojo fuerte va en la celda de salidas, que
   es el dato. Lo histórico queda como insignia, sin color de fila. */
tr.afuera-ahora td:first-child{box-shadow:inset 5px 0 0 var(--signal)}
tr.afuera-ahora.grave td:first-child{box-shadow:inset 5px 0 0 var(--bad)}
td.celda-afuera{background:var(--bad-soft)}

/* La cara, más grande: a 28 px no se distinguía de quién era. */
.caraAlumno{width:44px;height:44px}
.sinCara{width:44px;height:44px}

/* La columna de avance: en el celular se esconde, como el DNI y el dispositivo.
   Es para mirar sentado, no caminando por el aula. */
@media (max-width:640px){ .col-avance{display:none} }

/* ═══════════════════ examen de SQL ═══════════════════
 *
 * Cuatro paneles en vez de tres: el esquema de la base se mira tanto como el
 * enunciado mientras se escribe la consulta.
 *
 * OJO con la especificidad: estas reglas de grilla van adentro de
 * «min-width:941px» a propósito. Sueltas, «main.sql» le ganaría al
 * «main{grid-template-columns:1fr}» del celular —que tiene menos
 * especificidad— y en el teléfono quedaría una columna de 360 px comiéndose
 * media pantalla. Es la misma trampa que ya rompió las vistas una vez. */
@media (min-width:941px){
  main.sql{grid-template-columns:360px minmax(0,1fr);
    grid-template-rows:minmax(0,44%) minmax(0,1fr)}
  main.sql .panel[data-vista="enunciado"]{grid-column:1;grid-row:1}
  main.sql .panel[data-vista="base"]{grid-column:1;grid-row:2}
  main.sql .panel[data-vista="editor"]{grid-column:2;grid-row:1}
  main.sql .panel[data-vista="salida"]{grid-column:2;grid-row:2}
}

/* El panel de resultado tiene un solo sub-panel, no dos como el de
   programación (consola + verificación). Sin esto no crece: las medidas de
   flex de allá son «consola 52% / pruebas 340px fijos», y acá quedaba media
   franja gris al costado de la tabla. */
main.sql .panel[data-vista="salida"] .sub-panel{flex:1 1 auto}

/* ── la tabla de resultados ── */
.tabla-sql{overflow:auto;max-height:100%}
.tabla-sql table{border-collapse:collapse;font-family:var(--mono);font-size:12px;
  width:auto;min-width:100%}
.tabla-sql th{position:sticky;top:0;background:var(--codigo);text-align:left;
  padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
  font-weight:700;color:var(--ink-2);
  /* Sin esto hereda las versalitas del encabezado del panel del docente y una
     columna como «editorial_id» se vuelve la más ancha de la tabla. */
  text-transform:none;letter-spacing:0;font-size:11.5px}
.tabla-sql td{padding:5px 10px;border-bottom:1px solid var(--line-soft);
  white-space:nowrap;color:var(--ink-2)}
.tabla-sql td.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-sql .nulo{color:var(--ink-3);font-style:italic}
.pie-tabla{padding:7px 11px;font-size:11.5px;color:var(--ink-3);
  border-top:1px solid var(--line-soft)}

/* ── el veredicto de «Probar» ── */
.veredicto{padding:9px 12px;font-size:12.5px;font-weight:600;
  border-bottom:1px solid var(--line-soft)}
.veredicto.bien{background:var(--ok-soft);color:var(--ok)}
.veredicto.mal{background:var(--signal-soft);color:var(--signal)}
.veredicto.pensando{color:var(--ink-3);font-weight:400;font-style:italic}

/* ── el esquema, tabla por tabla ── */
.esquema{padding:10px 12px 20px}
.tabla-esq{margin-bottom:14px}
.tabla-nom{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.tabla-nom .pegar{font-family:var(--mono);font-size:12.5px;font-weight:700;
  color:var(--ink);padding:2px 5px}
.tabla-nom .cuantas{font-size:10.5px;color:var(--ink-3)}
.esquema ul{list-style:none;margin:0;padding:0 0 0 10px;
  border-left:2px solid var(--line-soft)}
.esquema li{display:flex;align-items:baseline;gap:7px;padding:1px 0}
.esquema .pegar{font-family:var(--mono);font-size:12px;color:var(--ink-2);
  background:none;border:none;padding:2px 4px;border-radius:3px;font-weight:500}
.esquema .pegar:hover{background:var(--accent-soft);color:var(--accent)}
.esquema .tipo{font-size:10px;color:var(--ink-3);letter-spacing:.04em}
.esquema .marca{font-size:9.5px;letter-spacing:.06em;text-transform:none;
  padding:1px 5px;border-radius:9px}
.esquema .marca.pk{background:var(--codigo);color:var(--ink-3)}
.esquema .marca.fk{background:var(--g4-soft);color:var(--g4);font-family:var(--mono)}

/* ── el diagrama de entidad-relación ──
   Se dibuja desde las claves foráneas de la base, así que no puede quedar
   desfasado de los datos que el alumno está consultando. */
#diagrama{padding:10px 12px 0;overflow-x:auto}
#diagrama svg{max-width:none}
#diagrama .caja rect{fill:var(--surface);stroke:var(--line);stroke-width:1}
#diagrama .caja rect.tapa{fill:var(--codigo)}
#diagrama .nom{font-family:var(--mono);font-size:12px;font-weight:700;fill:var(--ink)}
#diagrama .col{font-family:var(--mono);font-size:10.5px;fill:var(--ink-2)}
/* El identificador va oscuro y en negrita, no gris: antes se pintaba MÁS
   claro que el resto, o sea que la columna más importante de la tabla era la
   que menos se veía. Ahora que no lleva ninguna palabra al lado, distinguirse
   es todo lo que le queda, y el pie del diagrama dice qué significa. */
#diagrama .col.pk{fill:var(--ink);font-weight:700}
#diagrama .col.fk{fill:var(--g4);font-weight:600}
#diagrama .rel{fill:none;stroke:var(--g4);stroke-width:1.5}
#diagrama .punta{fill:var(--g4)}
.pie-der{font-size:11px;color:var(--ink-3);margin:6px 2px 0;line-height:1.5}

@media (max-width:940px){
  /* En el teléfono cada vista es una pantalla entera, así que el esquema y el
     diagrama se ven de a uno sin pelearse por el lugar. */
  #diagrama{padding:10px 10px 0}
  .esquema{padding:10px}
  .tabla-sql th,.tabla-sql td{padding:7px 9px}
}

/* En SQL las dos corridas se muestran con su nombre y no como tildes mudas:
   «pasó con los datos que veías y no con los otros» es la devolución. */
.prueba-sql{display:inline-flex;align-items:center;gap:5px;margin-right:14px;
  font-size:12px;color:var(--ink-2)}

/* ── «Tomar de nuevo»: elegir el código viendo cómo reparte los temas ── */
.tn-opcion{display:flex;align-items:center;gap:9px;padding:7px 8px;
  border:1px solid var(--line-soft);border-radius:4px;margin-bottom:5px;
  cursor:pointer;font-size:13px}
.tn-opcion:hover{background:var(--hover)}
.tn-opcion:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.tn-cod{font-family:var(--mono);font-weight:600;flex:1}
.tn-rep{font-family:var(--mono);font-size:12px;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.tn-nota{font-size:10.5px;letter-spacing:.04em;padding:2px 7px;border-radius:9px;
  background:var(--codigo);color:var(--ink-3)}
.tn-nota.bien{background:var(--ok-soft);color:var(--ok)}
.tn-nota.mal{background:var(--signal-soft);color:var(--signal)}