/*
 * 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; --ink-3:#7E7B8A;
  --paper:#F1EEE9; --surface:#FCFAF7;
  --line:#DED8CF; --line-soft:#EBE6DF;
  --hover:#F0EBE4;
  --accent:#3F6B7A; --accent-fuerte:#335864; --accent-soft:#DFECEF;
  --signal:#9C6520; --signal-soft:#F8EBD9;
  --ok:#41704E; --ok-soft:#E2EFE5;
  --bad:#A03F51; --bad-fuerte:#8A3444; --bad-soft:#F6E4E7;
  --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}

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. */
.sala{position:fixed;inset:0;z-index:200;background:var(--paper);
  display:grid;place-items:center;padding:24px}
.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}

.prueba{display:flex;align-items:center;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}
.prueba .detalle{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.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}
.velo.abierto{display:grid}
.modal{background:var(--surface);border-radius:6px;padding:24px;max-width:460px;width:100%}
.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}
.modal .acciones{display:flex;gap:8px;justify-content:flex-end}
.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}
.contexto{font-size:14px;color:var(--ink-2);line-height:1.65}
.contexto p{margin:0 0 8px}
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}
  /* 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}
  .prueba .detalle{order:3;flex:1 1 100%;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(4,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 2}
@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)}

#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». */
.fila-ojo td{background:var(--signal-soft)}
.fila-alerta td{background:var(--bad-soft)}
.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)}

/* 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}

/* ───────────── 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;height:calc(100vh - 137px)}
  .panel{display:none}
  .panel.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}
/* 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)}