/* hcl — interfaz propia, deliberadamente sencilla (NG9b). Sin fuentes remotas. */
:root{
  /* Diseño B · Más producto (DISENO.md §2). El fondo es un gris frío, un punto más
     que el de antes (#f7f7f5), porque es el que lleva la maqueta elegida y casa con
     el azul pizarra de la banda. --suave sigue en 4,91:1 encima. */
  --fondo:#f4f5f6; --papel:#fff; --texto:#1c1c1a; --suave:#6b6b66; --linea:#e2e2dd;
  /* El azul pizarra viene del logo (HERRA NOVA): #244454 el logotipo, #728891 el
     monograma. Como color de enlace, #244454 se lee casi negro, así que --acento
     es el mismo tono un punto más claro (H 200°, S 40%, L 31%) — 6,84:1 sobre el
     fondo y 7,47:1 con la tinta encima. Los colores de estado (--ok, --mal,
     --aviso y los --e-*) NO son de marca y no se tocan: dicen qué pasó, no de
     quién es la app. */
  --acento:#2f5a6f; --ok:#1f7a4d; --mal:#b3261e; --aviso:#8a5a00; --tenue:#f0f0ec;
  --marca-mono:#728891; --marca-texto:#244454;
  /* Lo que se escribe ENCIMA de un color fuerte (botones, pestaña activa, sector
     del anillo). En claro es blanco; en oscuro NO puede serlo: #fff sobre el azul
     de modo oscuro da 2,51:1 y el criterio 20 pide 4,5. Ver tests/test_diseno.py. */
  --tinta:#fff;
  /* B: tarjetas de radio 14 con sombra corta y baja en el tono de la marca. En
     oscuro la sombra desaparece y la profundidad la hace la línea (DISENO.md §4.1). */
  --radio:14px;
  --sombra:0 1px 2px rgba(28,28,26,.04), 0 6px 16px -8px rgba(36,68,84,.16);
  /* La banda de marca. Es oscura en los dos modos; --banda-marca es el color del
     monograma claro que va encima (monograma-oscuro.png), para poder medirlo. */
  --banda:#244454; --banda-borde:#244454; --banda-texto:#ffffff; --banda-suave:#b5bfc5;
  --banda-chip:#3e5a69; --banda-marca:#93a8b1;
  /* El panel de resultado. En claro es el acento. Las etiquetas pequeñas NO son
     el blanco al 66 % de la maqueta: sobre las pastillas eso da 3,17:1. Son un gris
     casi blanco (#dee5e8) y la pastilla lleva un 8 % de blanco, no un 12 %: así las
     dos cosas pasan de 4,5 y la jerarquía la hacen el tamaño y el peso. */
  --panel:#2f5a6f; --panel-borde:#2f5a6f; --panel-texto:#ffffff; --panel-suave:#dee5e8;
  --panel-chip:#40677b;
}
@media (prefers-color-scheme: dark){
  :root{ --fondo:#16161a; --papel:#1d1d22; --texto:#e9e9e6; --suave:#9a9a95; --linea:#2e2e35;
         --acento:#7eafc8; --ok:#5cc08c; --mal:#ef7b72; --aviso:#e0b25c; --tenue:#232329;
         --marca-mono:#93a8b1; --marca-texto:#c3d2d9;
         --tinta:#0d1117;
         --sombra:none;
         /* §4.3, la concesión: ningún pizarra reconocible llega a 3:1 contra el
            fondo (#2b4f60 da 2,05), así que el canto lo hace una línea baja. */
         --banda:#2b4f60; --banda-borde:#7eafc8; --banda-texto:#ffffff; --banda-suave:#b7c3c9;
         --banda-chip:#446473; --banda-marca:#93a8b1;
         /* §4.2: el panel deja de ser el acento (un azul claro entero deslumbra) y
            pasa a pizarra medio con borde. La cifra grande, en tinta clara. */
         --panel:#26485a; --panel-borde:#3a5f70; --panel-texto:#e9e9e6; --panel-suave:#d4dade;
         --panel-chip:#405e6e; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--acento)}
main{max-width:1080px;margin:0 auto;padding:24px 20px 60px}
h1{font-size:1.6rem;margin:.2em 0 .6em}
h2{font-size:1.1rem;margin:0 0 .6em}
code{background:var(--tenue);padding:1px 5px;border-radius:4px;font-size:.9em}
.muted{color:var(--suave);font-size:.9rem}
.warn{color:var(--aviso)}
.big{font-size:2.4rem;font-weight:600;margin:.1em 0;line-height:1}

/* cabecera */
.top{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding:10px 20px;background:var(--papel);border-bottom:1px solid var(--linea)}
.brand{font-weight:700;text-decoration:none;color:var(--texto)}
.brand .nombre span{display:block;font-size:.7rem;font-weight:400;color:var(--suave)}
.top nav{display:flex;gap:16px;flex:1;flex-wrap:wrap}
.top nav a{text-decoration:none;color:var(--texto);padding:4px 0;border-bottom:2px solid transparent}
.top nav a:hover{border-color:var(--acento)}
.perfil{display:flex;gap:8px;align-items:center}
.mini{font-size:.8rem}

footer{max-width:1080px;margin:0 auto;padding:16px 20px 40px;display:flex;gap:16px;
  flex-wrap:wrap;color:var(--suave);font-size:.82rem;border-top:1px solid var(--linea)}

/* bloques */
.card{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:18px 20px;margin:0 0 18px;box-shadow:var(--sombra)}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:18px}
.card.ok{border-left:4px solid var(--ok)}
.card.error{border-left:4px solid var(--mal)}
.card.vacio{border-left:4px solid var(--acento)}
.problemas li{margin:.3em 0}
.nota-honesta{font-size:.86rem;color:var(--suave);border-left:3px solid var(--linea);
  padding-left:12px;margin:18px 0}

/* controles */
button,.boton{font:inherit;background:var(--acento);color:var(--tinta);border:0;border-radius:8px;
  padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-block}
button.sec,.boton.sec{background:transparent;color:var(--texto);border:1px solid var(--linea)}
button.peligro{background:var(--mal)}
button:disabled{opacity:.45;cursor:not-allowed}
input,select,textarea{font:inherit;padding:7px 10px;border:1px solid var(--linea);
  border-radius:8px;background:var(--papel);color:var(--texto);max-width:100%}
textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}
form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.card form{margin-top:10px}
.check{display:flex;gap:6px;align-items:center;font-size:.9rem}
.acciones{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.borrar{gap:4px}

/* tablas */
.tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla th{text-align:left;font-weight:600;color:var(--suave);font-size:.8rem;
  text-transform:uppercase;letter-spacing:.04em}
.tabla td,.tabla th{padding:8px 10px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla.ancha{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;margin-bottom:18px}
.barra{display:inline-block;width:90px;height:8px;background:var(--tenue);border-radius:4px;
  overflow:hidden;vertical-align:middle;margin-right:6px}
.barra i{display:block;height:100%;background:var(--acento)}
.tag{display:inline-block;font-size:.72rem;padding:2px 8px;border-radius:999px;
  background:var(--tenue);color:var(--suave)}
.tag.anulada{color:var(--aviso)}
.lista{list-style:none;padding:0;margin:0}
.lista li{padding:6px 0;border-bottom:1px solid var(--linea)}

.filtros{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.filtros a{text-decoration:none;padding:4px 12px;border:1px solid var(--linea);border-radius:999px;
  color:var(--texto);font-size:.86rem}
.filtros a.on{background:var(--acento);color:var(--tinta);border-color:var(--acento)}

.atajos{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:18px}
.mini-card{text-decoration:none;color:var(--texto);text-align:center}
.buscador{margin-bottom:16px}
.buscador input[type=search]{flex:1;min-width:220px}
.lanzar{margin-bottom:16px}

/* examen */
.examen-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.examen-cab h1{margin:0 0 4px}
.crono{text-align:right;font-variant-numeric:tabular-nums}
.crono span{font-size:1.5rem;font-weight:600}
.crono small{display:block;color:var(--suave)}
.paginador{display:flex;gap:5px;overflow-x:auto;padding:8px 2px;margin-bottom:16px}
.pag{background:var(--papel);color:var(--suave);border:1px solid var(--linea);
  min-width:34px;padding:5px 0;font-size:.8rem}
.pag.respondida{border-color:var(--acento);color:var(--acento)}
.pag.dudada{border-style:dashed;border-color:var(--aviso);color:var(--aviso)}
.pag.actual{background:var(--acento);color:var(--tinta);border-color:var(--acento)}
.pregunta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:20px}
.pregunta.oculta{display:none}
.pregunta header,.revision header{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.num{font-weight:700;color:var(--suave)}
.icono{background:transparent;border:1px solid var(--linea);color:var(--suave);
  width:30px;height:30px;padding:0;border-radius:50%;line-height:1}
.icono.on{background:var(--acento);color:var(--tinta);border-color:var(--acento)}
.enunciado p{margin:.4em 0}
.clinica{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--linea);margin-bottom:12px}
.opciones{list-style:none;padding:0;margin:16px 0}
.opciones li{border:1px solid var(--linea);border-radius:8px;margin-bottom:8px}
.opciones label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;cursor:pointer;margin:0}
.opciones .letra{font-weight:700;color:var(--suave);min-width:1.2em}
.opciones .texto p{margin:0}
.opciones li:has(input:checked){border-color:var(--acento);background:var(--tenue)}
.opciones li.correcta{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.opciones li.fallada{border-color:var(--mal);background:color-mix(in srgb,var(--mal) 10%,transparent)}
.acciones-pregunta{display:flex;gap:12px;align-items:center}
.feedback{font-weight:600}
.feedback.bien{color:var(--ok)} .feedback.mal{color:var(--mal)}
.examen-pie{display:flex;gap:10px;margin:18px 0 8px;flex-wrap:wrap}
#entregar{margin-left:auto}

/* revisión */
.opciones.revision li{display:flex;gap:10px;padding:10px 12px;align-items:flex-start}
.opciones.revision li.correcta{border-color:var(--ok)}
.opciones.revision li.elegida:not(.correcta){border-color:var(--mal)}
.marca{min-width:1.2em;font-weight:700}
/* El reparto de la cohorte. Cada cifra lleva su etiqueta al lado y su color del
   sistema de estados: son los mismos tres de siempre —acertó, erró, no respondió—
   y tienen que leerse igual aquí que en el donut del resultado. */
.cohorte{margin-left:auto;font-size:.8rem;color:var(--suave);
  display:flex;gap:4px 12px;flex-wrap:wrap;align-items:center}
.cohorte .dato{white-space:nowrap}
.cohorte .pill{font-size:.78rem;min-width:2.6rem}
/* Una pregunta por pantalla: la lista entera hacía imposible saber por dónde ibas,
   y con 210 preguntas el navegador pintaba un documento de metros. Se renderizan
   todas —el buscador necesita el texto— pero solo se ve una. */
.revision-q{display:none}
.revision-q.actual{display:block}
.revision-barra{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center;
  justify-content:space-between;margin-bottom:16px}
.revision-barra .filtros{margin:0}
.buscador-revision{display:flex;gap:8px;align-items:center;flex:1;min-width:260px}
.buscador-revision input[type=search]{flex:1;min-width:200px}
.revision-pie{display:flex;gap:10px;align-items:center;margin:18px 0 8px;flex-wrap:wrap}
.revision-pie .donde{color:var(--suave);font-size:.9rem;font-variant-numeric:tabular-nums}
#rev-siguiente{margin-left:auto}
/* El paginador de la revisión dice de un vistazo cómo fue cada pregunta. El color
   no va solo: el número sigue ahí y el borde cambia con él.
   El orden de estas cuatro reglas importa. En el examen, «dudada» se lleva el
   borde entero porque es lo único que hay que mirar; aquí manda el estado —lo que
   se busca es dónde fallé, no dónde dudé— y la duda se queda solo con el trazo
   discontinuo. Y la página actual gana a todo, que por eso va la última. */
.revision-pag .pag.e-ok{border-color:var(--e-ok);color:var(--e-ok)}
.revision-pag .pag.e-mal{border-color:var(--e-mal);color:var(--e-mal)}
.revision-pag .pag.e-blanco{border-color:var(--e-blanco);color:var(--e-blanco)}
.revision-pag .pag.e-nula{border-color:var(--e-nula);color:var(--e-nula)}
.revision-pag .pag.dudada{border-style:dashed}
.revision-pag .pag.oculto{display:none}
.revision-pag .pag.actual{background:var(--acento);color:var(--tinta);border-color:var(--acento)}
.comentario{background:var(--tenue);border-radius:8px;padding:12px;margin-top:10px}
details summary{cursor:pointer;color:var(--suave);font-size:.85rem;text-transform:uppercase;
  letter-spacing:.04em;margin-top:10px}
.resultado .big{color:var(--acento)}

/* gráfica */
.grafica{width:100%;height:auto;max-height:280px}
.grafica .eje{stroke:var(--linea);stroke-width:1.5}
.grafica .rejilla{stroke:var(--linea);stroke-width:.5;stroke-dasharray:3 4}
.grafica .linea{fill:none;stroke:var(--acento);stroke-width:2.5;stroke-linejoin:round}
.grafica .punto{fill:var(--acento)}
.grafica .etq{fill:var(--suave);font-size:11px}
.grafica .etq.peq{font-size:9px}

/* ---------- llave: entrar, cambiar contraseña (H1) ---------- */
body.sola{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:20px}
body.sola main{width:100%;max-width:420px}
.portada{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:26px 24px}
.portada h1{margin:0 0 22px;font-size:1.5rem;line-height:1.2}
.portada h1 span{display:block;font-size:.8rem;font-weight:400;color:var(--suave)}
.acceso{display:flex;flex-direction:column;gap:4px}
.acceso label{font-size:.82rem;color:var(--suave);margin-top:10px}
.acceso input{width:100%;box-sizing:border-box;font-size:1rem;padding:11px 12px}
.acceso button{margin-top:18px;padding:12px;font-size:1rem}
.portada .error{background:color-mix(in srgb,var(--mal) 12%,transparent);
  border-left:3px solid var(--mal);color:var(--mal);padding:9px 12px;border-radius:6px;
  margin:0 0 12px;font-size:.92rem}
.portada .aviso{background:var(--tenue);border-left:3px solid var(--aviso);
  padding:10px 14px;border-radius:6px;margin:0 0 16px;font-size:.92rem}
.portada .aviso p{margin:.35em 0}
.portada .muted{margin-top:16px;line-height:1.45}

/* quién eres, siempre a la vista (§7) */
.cuenta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cuenta .quien{font-weight:600;font-size:.86rem;background:var(--tenue);
  padding:3px 10px;border-radius:99px}
.cuenta form.inline{display:inline}
.cuenta button.mini{background:transparent;color:var(--acento);border:0;padding:0;
  font-size:.8rem;cursor:pointer;text-decoration:underline}

/* ---------- panel de cuentas (H1) ---------- */
.alta{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  align-items:end;margin-top:10px}
.alta label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--suave)}
.alta button{grid-column:1/-1;justify-self:start}
tr.apagada{opacity:.55}
.clave{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.15rem;
  background:var(--tenue);padding:10px 14px;border-radius:8px;user-select:all;
  word-break:break-all;margin:.4em 0}
.tabla .acciones{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tabla .acciones form{margin:0}
.tabla .acciones button{padding:4px 9px;font-size:.8rem}

/* ---------- panel de estudio (/progress) ---------- */
.bien{color:var(--ok)} .mal{color:var(--mal)}

.matriz{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin:12px 0}
.matriz .celda{border:1px solid var(--linea);border-radius:var(--radio);padding:12px 14px;
  display:flex;flex-direction:column;gap:2px}
.matriz .celda .cifra{font-size:1.8rem;font-weight:600;line-height:1}
.matriz .celda .pie{font-size:.8rem}
.matriz .bien{border-left:4px solid var(--ok)}
.matriz .peligro{border-left:4px solid var(--mal);background:color-mix(in srgb,var(--mal) 7%,transparent)}
.matriz .ojo{border-left:4px solid var(--aviso)}

.avisos ul{margin:.4em 0 0;padding-left:1.1em}
.avisos li{margin:.5em 0;line-height:1.45}
.dos-columnas{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.dos-columnas h3{font-size:.95rem;margin:.2em 0 .6em}
.lista-preguntas{margin:0;padding-left:1.2em;font-size:.88rem}
.lista-preguntas li{margin:.45em 0;line-height:1.4}
.lista-preguntas .tag{font-size:.72rem}
.barra{background:var(--tenue);border-radius:99px;height:8px;min-width:80px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--acento)}
.grafica.baja{max-height:110px}
.barra-svg{fill:var(--acento);opacity:.85}
h2.separador{margin-top:32px;padding-top:20px;border-top:1px solid var(--linea);
  font-size:1.05rem;color:var(--suave)}

@media (max-width:600px){
  .matriz{grid-template-columns:1fr 1fr}
}

/* ---------- catálogo de actividades ---------- */
.cabecera-lista{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;
  justify-content:space-between}
.cabecera-lista h1{margin:0}
.cabecera-lista .filtros{display:flex;gap:8px;align-items:center;margin:0}
details.renombrar{margin-top:6px}
details.renombrar summary{cursor:pointer;color:var(--acento);font-size:.8rem;
  text-decoration:underline;list-style:none;width:max-content}
details.renombrar summary::-webkit-details-marker{display:none}
details.renombrar form{margin-top:6px}
details.renombrar input{min-width:200px}
details.renombrar p{margin:.4em 0 0;max-width:44ch}

/* aviso de estar mirando el perfil de otro: tiene que doler un poco a la vista */
.card.mirando{border-left:4px solid var(--aviso);
  background:color-mix(in srgb,var(--aviso) 10%,transparent);margin-bottom:18px}
.card.mirando p{margin:0 0 8px}

/* ═══════════ Estados del resultado ═══════════
   Cinco estados con color propio. El modo oscuro tiene sus PROPIOS pasos, no una
   inversión automática: un verde claro sobre papel blanco no vale sobre fondo negro.
   El color nunca va solo — cada fila lleva su etiqueta y cada sector del donut su
   número, porque verde y rojo son justo el par que no distingue un daltónico. */
:root{
  --e-ok:#1f7a4d;     --e-ok-f:#e3f3ea;
  --e-mal:#b3261e;    --e-mal-f:#fbe6e4;
  --e-blanco:#1c5d99; --e-blanco-f:#e4eef7;
  --e-duda:#8a5a00;   --e-duda-f:#faf0da;
  --e-nula:#6b6b66;   --e-nula-f:#ededea;
}
@media (prefers-color-scheme: dark){
  :root{
    --e-ok:#5cc08c;     --e-ok-f:#1a3128;
    --e-mal:#ef7b72;    --e-mal-f:#3a2321;
    --e-blanco:#6aa9e0; --e-blanco-f:#1a2a39;
    --e-duda:#e0b25c;   --e-duda-f:#33291a;
    --e-nula:#9a9a95;   --e-nula-f:#2a2a31;
  }
}

.tabla tr.e-ok     > td{ background:var(--e-ok-f); }
.tabla tr.e-mal    > td{ background:var(--e-mal-f); }
.tabla tr.e-blanco > td{ background:var(--e-blanco-f); }
.tabla tr.e-duda   > td{ background:var(--e-duda-f); }
.tabla tr.e-nula   > td{ background:var(--e-nula-f); }
.tabla tr[class^="e-"] > td:first-child{ border-left:3px solid currentColor; }
.tabla tr.e-ok     > td:first-child{ color:var(--e-ok); }
.tabla tr.e-mal    > td:first-child{ color:var(--e-mal); }
.tabla tr.e-blanco > td:first-child{ color:var(--e-blanco); }
.tabla tr.e-duda   > td:first-child{ color:var(--e-duda); }
.tabla tr.e-nula   > td:first-child{ color:var(--e-nula); }
.tabla tr[class^="e-"] > td{ color:var(--texto); }
.tabla tr[class^="e-"] > td:first-child{ font-weight:600; }

/* ── el donut ── */
.donut .s-ok{ fill:var(--e-ok); } .donut .s-mal{ fill:var(--e-mal); }
.donut .s-blanco{ fill:var(--e-blanco); }
.donut path{ stroke:var(--papel); stroke-width:2; }   /* 2 px de aire entre sectores */
.donut .cifra{ fill:var(--tinta); font-size:13px; font-weight:700; text-anchor:middle; }
.donut .centro{ fill:var(--texto); font-size:26px; font-weight:700; text-anchor:middle; }
.donut .centro-pie{ fill:var(--suave); font-size:11px; text-anchor:middle; }

/* píldoras del desglose en el historial de importados */
.pill{ display:inline-block; min-width:1.9rem; text-align:center; padding:.1rem .4rem;
       border-radius:999px; font-size:.82rem; font-weight:600; margin-right:.15rem; }
.pill.e-ok{ background:var(--e-ok-f); color:var(--e-ok); }
.pill.e-mal{ background:var(--e-mal-f); color:var(--e-mal); }
.pill.e-blanco{ background:var(--e-blanco-f); color:var(--e-blanco); }
.pill.e-duda{ background:var(--e-duda-f); color:var(--e-duda); }
.pill.e-nula{ background:var(--e-nula-f); color:var(--e-nula); }

/* ─────────── por asignatura: dos vistas, sin JavaScript ─────────── */
.asignaturas{ position:relative; }
.asignaturas .tab-radio{ position:absolute; opacity:0; width:0; height:0; }
.cabecera-tabs{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; }
.cabecera-tabs h2{ margin:0; }
.asignaturas .tab-radio:focus-visible ~ .cabecera-tabs label[for="v-esta"],
.asignaturas .tab-radio:focus-visible ~ .cabecera-tabs label[for="v-todas"]{
  outline:2px solid var(--acento); outline-offset:-2px; }
.asignaturas .panel{ display:none; }
.asignaturas #v-esta:checked ~ .panel.p-esta,
.asignaturas #v-todas:checked ~ .panel.p-todas{ display:block; }

.leyenda-campana{ display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  font-size:.86rem; margin:.2rem 0 .6rem; }
.leyenda-campana i{ display:inline-block; width:14px; height:0; vertical-align:middle;
  margin-right:5px; }
.leyenda-campana .m-mediana{ border-top:3px dashed var(--suave); }


/* La evolución de los simulacros: dos series en la misma escala. */
svg.evo .linea{ fill:none; stroke:var(--acento); stroke-width:2.5; }
svg.evo .linea-mediana{ fill:none; stroke:var(--suave); stroke-width:2; stroke-dasharray:5 4; }
svg.evo .punto{ fill:var(--acento); }
svg.evo .punto.estimado{ fill:var(--papel); stroke:var(--acento); stroke-width:2.5; }
svg.evo .punto-mediana{ fill:var(--suave); }
svg.evo .etq{ fill:var(--suave); font-size:11px; }
svg.evo .etq.peq{ font-size:9px; }
svg.evo .rejilla{ stroke:var(--linea); stroke-width:1; }
td.expediente form{ gap:4px; }
td.expediente input{ text-align:right; }
.asumido{ display:block; font-size:.72rem; color:var(--suave); }

.leyenda-campana .m-serie{ border-top:3px solid var(--acento); }


/* ═══════════════════════ H4 · Diseño v1 (§7 del PRD-SERVIDOR) ═══════════════════
   Tres cosas que faltaban para poder estudiar aquí una hora seguida: que se vea
   siempre dónde está el foco, que en el móvil se pueda pulsar sin fallar, y que
   nada de esto dependa de JavaScript. */

/* ── Foco visible SIEMPRE (criterio: la app usable solo con teclado) ──
   :focus-visible y no :focus, para que el anillo salga al tabular y no al hacer
   clic con el ratón, que es lo que hace que la gente lo quite y se quede sin él. */
:focus-visible{
  outline:3px solid var(--acento);
  outline-offset:2px;
  border-radius:4px;
}
.opciones li:has(input:focus-visible){
  outline:3px solid var(--acento); outline-offset:2px;
}
.opciones input[type="radio"]:focus-visible{ outline:none }   /* lo pinta el <li> */

/* Saltar al contenido: el primer tabulador de la página, invisible hasta que
   recibe el foco. Sin esto, llegar al enunciado con teclado son ocho tabuladores
   de navegación en cada pregunta. */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:10;
  background:var(--papel); color:var(--texto); padding:10px 14px;
  border:2px solid var(--acento); border-radius:0 0 8px 0;
}
.saltar:focus{ left:0 }

/* Que se vea de quién es la sesión, también en pantalla pequeña. */
.cuenta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}
.cuenta .quien{font-weight:600;font-size:.85rem;background:var(--tenue);
  border-radius:999px;padding:3px 10px}
.cuenta .quien::before{content:"● ";color:var(--ok);font-size:.7em;vertical-align:.15em}

/* Ayuda de teclado, solo donde sirve y solo en escritorio. */
.teclas{color:var(--suave);font-size:.8rem;margin:10px 0 0}
.teclas kbd{font:inherit;font-size:.9em;border:1px solid var(--linea);border-bottom-width:2px;
  border-radius:4px;padding:0 5px;background:var(--papel)}
@media (max-width:820px){ .teclas{display:none} }   /* en el móvil no hay teclado */

/* ── Pantalla pequeña de verdad (criterio 17) ──
   El objetivo no es «que quepa»: es leer el enunciado sin hacer zoom y acertar
   la opción con el pulgar a la primera. 48 px es el mínimo que recomienda todo
   el mundo para un objetivo táctil, y las cuatro opciones son EL objetivo de
   esta app. */
@media (max-width:600px){
  main{padding:16px 14px 48px}
  h1{font-size:1.35rem}
  body{font-size:17px}                       /* enunciados largos, sin zoom */
  .pregunta{padding:14px}
  .enunciado p{font-size:1.02rem}

  .opciones li{margin-bottom:10px}
  .opciones label{padding:14px 12px;min-height:48px;align-items:center}
  .opciones .letra{min-width:1.4em;font-size:1.05rem}

  .pag{min-width:40px;min-height:40px;font-size:.85rem}
  .paginador{gap:6px}
  .icono{width:40px;height:40px}             /* dudar y favorita, con el pulgar */

  /* Las acciones frecuentes, donde llega el pulgar: abajo y a lo ancho. */
  .examen-pie{position:sticky;bottom:0;background:var(--fondo);
    padding:10px 0;margin:14px 0 0;border-top:1px solid var(--linea);z-index:5}
  .examen-pie button,.examen-pie .boton{flex:1;min-height:46px}
  #entregar{margin-left:0;flex-basis:100%}

  /* Una tabla ancha no rompe la página: se desliza ella sola. */
  .tabla.ancha,.desglose>.tabla{display:block;overflow-x:auto;white-space:nowrap}

  /* El catálogo es la excepción: deslizarse escondía «Examen» y «Práctica» a la
     derecha, y esos dos botones son el único motivo de entrar aquí. En el móvil
     cada actividad pasa a ser una ficha y los botones quedan a la vista. */
  .tabla.catalogo,.tabla.catalogo tbody,.tabla.catalogo tr,.tabla.catalogo td{
    display:block;width:auto;overflow:visible;white-space:normal}
  .tabla.catalogo thead{display:none}
  .tabla.catalogo tr{border:1px solid var(--linea);border-radius:12px;
    padding:12px 14px;margin-bottom:10px;background:var(--papel)}
  .tabla.catalogo td{border:0;padding:2px 0}
  .tabla.catalogo td[data-col]::before{content:attr(data-col) ": ";color:var(--suave);
    font-size:.82rem}
  .tabla.catalogo td.acciones{display:flex;gap:8px;margin-top:10px}
  .tabla.catalogo td.acciones form{flex:1}
  .tabla.catalogo td.acciones button{width:100%;min-height:44px}

  /* La cabecera no puede comerse el primer tercio de la pantalla: en un móvil,
     antes de este ajuste, marca + cuenta + navegación ocupaban ~300 px de 844
     y el enunciado empezaba por debajo del pliegue. */
  .top{gap:8px;padding:8px 14px;row-gap:4px}
  .brand .nombre span{display:none}           /* «banco local», ya se sabe */
  /* flex:0 0 100% y no width:100%: con el `flex:1` que trae de escritorio, la
     navegación se quedaba en la misma línea que la cuenta y se salía por la
     derecha. Se ve en la captura y no en el código, que es lo malo del CSS. */
  .top nav{order:3;flex:0 0 100%;gap:14px;font-size:.9rem;
    flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;
    scrollbar-width:none}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{white-space:nowrap}
  .cuenta{order:2;gap:8px;font-size:.85rem}
  .cuenta .quien{padding:2px 8px}

  /* Título y cronómetro en la misma línea, que es donde caben. */
  .examen-cab{gap:8px;align-items:center}
  .crono{text-align:right}
  .crono span{font-size:1.15rem}
  .crono small{font-size:.7rem}
}

/* Botones y campos con altura de dedo también en tablet. */
@media (max-width:900px) and (pointer:coarse){
  button,.boton,input,select{min-height:44px}
}

/* Quien pide menos movimiento, menos movimiento. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Impreso: que una revisión se pueda llevar en papel sin la navegación. */
@media print{
  .top,footer,.paginador,.examen-pie,.teclas,.saltar{display:none}
  body{background:#fff;color:#000}
  .card,.pregunta{border:1px solid #999;break-inside:avoid}
}


/* ═══════════════════════ La marca ═══════════════════════
   El logo es suyo (HERRA NOVA) y la app se llama hcl: en la cabecera va el
   monograma junto al nombre de la app, y el logotipo completo solo en la
   pantalla de entrada, que es donde una marca tiene sentido.

   Dos ficheros por pieza en vez de recolorear con CSS: el logotipo es azul muy
   oscuro y sobre el fondo oscuro le quedan 1,3:1 — invisible. `<picture>` elige
   la variante sin una línea de JavaScript y sin depender de `mask-image`. */
.brand{display:flex;align-items:center;gap:9px}
.brand .monograma{width:32px;height:auto;display:block;flex:0 0 auto}
.brand .nombre{display:block;line-height:1.1}

.portada .marca{display:block;margin:4px auto 26px;width:min(210px,62%);height:auto}
.portada h1{text-align:center;font-size:1.25rem;font-weight:600;
  padding-top:16px;border-top:1px solid var(--linea)}
.portada .acceso{margin-top:4px}


/* ═══════════════════════ B · Más producto (DISENO.md) ═══════════════════════
   La dirección elegida el 10/09/2026, con sus ediciones: banda de marca que dice
   «Dashboard», panel de resultado con la cifra grande y pastillas, tarjetas de
   radio 14, el anillo a la izquierda de los estados, la campana con las etiquetas
   escalonadas y las asignaturas en filas a todo el ancho. */

/* ── la banda ── */
.top.banda{background:var(--banda);border-bottom:1px solid var(--banda-borde);
  padding:20px 34px;gap:28px}
.banda .brand{color:var(--banda-texto);gap:10px}
.banda .brand .monograma{width:42px}
.banda .brand .nombre{font-size:1.22rem;letter-spacing:.01em}
.banda nav{gap:24px;font-size:.95rem}
.banda nav a{color:var(--banda-suave);border-bottom:2px solid transparent;padding:2px 0}
.banda nav a:hover{color:var(--banda-texto);border-color:var(--banda-suave)}
.banda nav a[aria-current="page"]{color:var(--banda-texto);font-weight:600;
  border-color:var(--banda-texto)}
.banda .cuenta .quien{background:var(--banda-chip);color:var(--banda-texto);padding:5px 13px}
.banda .cuenta .quien::before{content:none}
.banda .cuenta a.mini,.banda .cuenta button.mini{color:var(--banda-suave)}
.banda .cuenta a.mini:hover,.banda .cuenta button.mini:hover{color:var(--banda-texto)}
.banda :focus-visible{outline-color:var(--banda-texto)}

/* ── rótulo de tarjeta: pequeño, en versalitas, que no compita con las cifras ── */
.rotulo{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--suave);
  font-weight:700;margin:0}
.cabeza-tarjeta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  flex-wrap:wrap}
.cabeza-tarjeta .muted{font-size:.82rem}

/* ── cabecera de página ── */
.cabecera-pagina{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;
  flex-wrap:wrap;margin:0 0 16px}
.cabecera-pagina h1{margin:0;font-size:1.5rem;line-height:1.2}
.cabecera-pagina .muted{font-size:.85rem}

/* ── el panel de resultado ── */
.panel-b{background:var(--panel);border:1px solid var(--panel-borde);border-radius:16px;
  padding:24px 26px;color:var(--panel-texto);box-shadow:var(--sombra);margin:0 0 16px}
.panel-b .rotulo{color:var(--panel-suave)}
.panel-b .linea-cifra{display:flex;align-items:baseline;gap:8px 12px;margin-top:6px;flex-wrap:wrap}
.panel-b .cifra-grande{font-size:4rem;font-weight:600;line-height:1;margin:0;
  font-variant-numeric:tabular-nums;color:var(--panel-texto)}
.panel-b .explica{font-size:.95rem;color:var(--panel-suave);margin:0}
.pastillas{display:flex;gap:10px;margin:20px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.pastilla{background:var(--panel-chip);border-radius:10px;padding:9px 15px;min-width:6.5rem}
.pastilla b{display:block;font-size:1.15rem;font-weight:700;line-height:1.3;
  font-variant-numeric:tabular-nums;color:var(--panel-texto)}
.pastilla span{display:block;font-size:.74rem;color:var(--panel-suave);line-height:1.3}

/* Un botón dentro del panel no puede ser del color del panel: en claro los dos son
   el acento y desaparecería. Va en el tono de las pastillas. */
.acciones-panel{margin-top:18px}
.panel-b button,.panel-b .boton{background:var(--panel-chip);color:var(--panel-texto);
  border:1px solid transparent}
.panel-b button:disabled{opacity:.5}
.panel-b :focus-visible{outline-color:var(--panel-texto)}

/* Una fila de B sin la columna de cuentas: la portada solo enseña nombre y barra. */
.fila-asig.fila-corta{grid-template-columns:minmax(0,1fr) minmax(8rem,16rem)}
.fila-asig .nombre small{display:block;font-size:.74rem;color:var(--suave)}
.lista .neta{float:right;font-variant-numeric:tabular-nums}

/* ── dos columnas: desglose | frente a la muestra ── */
.dos-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;
  margin:0 0 16px;align-items:start}
.dos-b > .card{margin:0}
@media (max-width:860px){ .dos-b{grid-template-columns:minmax(0,1fr)} }

/* ── el desglose: anillo a la izquierda, estados en píldora a la derecha ── */
.desglose-b{display:flex;align-items:center;gap:18px;margin-top:12px;flex-wrap:wrap}
.desglose-b .donut{width:150px;height:150px;flex:0 0 auto}
table.estados{flex:1 1 13rem;border-collapse:separate;border-spacing:0 6px;font-size:.88rem;
  margin:-6px 0}
table.estados td{padding:6px 12px;vertical-align:middle}
table.estados td:first-child{border-radius:999px 0 0 999px;font-weight:600}
table.estados td:last-child{border-radius:0 999px 999px 0;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--texto);font-size:1rem}
table.estados tr.e-ok td{background:var(--e-ok-f)}         table.estados tr.e-ok td:first-child{color:var(--e-ok)}
table.estados tr.e-mal td{background:var(--e-mal-f)}       table.estados tr.e-mal td:first-child{color:var(--e-mal)}
table.estados tr.e-blanco td{background:var(--e-blanco-f)} table.estados tr.e-blanco td:first-child{color:var(--e-blanco)}
table.estados tr.e-duda td{background:var(--e-duda-f)}     table.estados tr.e-duda td:first-child{color:var(--e-duda)}
table.estados tr.e-nula td{background:var(--e-nula-f)}    table.estados tr.e-nula td:first-child{color:var(--e-nula)}
/* Un estado a cero no se apaga con opacidad —la maqueta usaba 0,5 y eso deja el
   texto por debajo de 4,5:1—: se queda con su color y el número en gris. */
table.estados tr.cero td:last-child{color:var(--suave);font-weight:400}
table.estados tr.total td{background:transparent;border-radius:0;border-top:1px solid var(--linea);
  color:var(--suave);font-weight:400;font-size:.87rem;padding-top:10px}
table.estados tr.total td:last-child{color:var(--texto);font-weight:700}

/* ── lo plegado: la prosa sigue ahí, pero no compite con las cifras ── */
details.plegable{border-top:1px solid var(--linea);margin-top:14px;padding-top:4px}
details.plegable > summary{list-style:none;display:flex;align-items:center;gap:7px;
  font-weight:600;font-size:.78rem;letter-spacing:.05em;padding:6px 0}
details.plegable > summary::-webkit-details-marker{display:none}
details.plegable > summary::before{content:"";width:6px;height:6px;flex:0 0 auto;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s}
details.plegable[open] > summary::before{transform:rotate(45deg)}
details.plegable p{font-size:.86rem;line-height:1.5;color:var(--suave);max-width:78ch;margin:.5em 0}

/* ── la campana, con las etiquetas escalonadas ── */
svg.campana{display:block;width:100%;height:auto;margin-top:8px}
.campana .curva{fill:none;stroke:var(--suave);stroke-width:2;stroke-linejoin:round}
.campana .cola{fill:var(--e-blanco);opacity:.16}
.campana .eje{stroke:var(--linea);stroke-width:1.5}
.campana .mediana{stroke:var(--suave);stroke-width:2;stroke-dasharray:5 4}
.campana .mio{stroke:var(--e-mal);stroke-width:2}
.campana .mio.estimado{stroke-dasharray:4 3}
.campana .guia{stroke-width:1}
.campana .guia.g-mediana{stroke:var(--suave)}
.campana .guia.g-mio{stroke:var(--e-mal)}
.campana text{font-size:15px;fill:var(--suave)}
.campana text b,.campana tspan.fuerte{font-weight:700}
.campana text.destacado{fill:var(--e-mal);font-weight:700}
.campana text.eje-t{font-size:13px}
.campana text.frase{font-size:13.5px}
/* La leyenda en HTML repite los números de las etiquetas. En escritorio sobra; en
   el móvil el SVG se encoge a un tercio y el texto de dentro no se lee, así que
   ahí es la leyenda la que manda y las letras del dibujo se esconden. */
.campana-leyenda{display:none;gap:6px 16px;flex-wrap:wrap;font-size:.86rem;margin:.4rem 0 0}
.campana-leyenda i{display:inline-block;width:14px;height:0;vertical-align:middle;margin-right:5px}
.campana-leyenda .m-mio{border-top:3px solid var(--mal)}
.campana-leyenda .m-mio.punteada{border-top-style:dashed}
.campana-leyenda .m-mediana{border-top:3px dashed var(--suave)}
@media (max-width:600px){
  .campana-leyenda{display:flex}
  .campana text,.campana .guia{display:none}
}

/* ── nota MIR, compacta ── */
.mir-b .linea-cifra{display:flex;align-items:baseline;gap:6px 22px;flex-wrap:wrap;margin-top:10px}
.mir-b .cifra{font-size:2.4rem;font-weight:600;line-height:1;color:var(--ok);
  font-variant-numeric:tabular-nums}
.mir-b .cifra small{font-size:.95rem;font-weight:400;color:var(--suave);margin-left:4px}
.mir-b ul{display:flex;gap:6px 22px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.mir-b li b{font-size:1.1rem;font-variant-numeric:tabular-nums}
.mir-b li span{font-size:.8rem;color:var(--suave);margin-left:4px}
.mir-b .cuenta-mir{font-size:.84rem;color:var(--suave);margin:10px 0 0}

/* ── asignaturas: una fila por asignatura, la barra a todo el ancho ── */
.asignaturas .cabecera-tabs{margin-bottom:8px}
.segmentado{display:inline-flex;border:1px solid var(--linea);border-radius:8px;overflow:hidden;
  background:var(--papel)}
.segmentado label{padding:6px 14px;font-size:.84rem;color:var(--suave);cursor:pointer;
  white-space:nowrap}
.segmentado label + label{border-left:1px solid var(--linea)}
.segmentado label:hover{color:var(--texto)}
.asignaturas #v-esta:checked ~ .cabecera-tabs label[for="v-esta"],
.asignaturas #v-todas:checked ~ .cabecera-tabs label[for="v-todas"]{
  background:var(--acento);color:var(--tinta);font-weight:600;border-color:var(--acento)}

.barras{display:block}
/* Columnas de ancho fijo: cada fila es su propia rejilla, y con `auto` una fila con
   el nombre en dos líneas desplazaba su barra respecto a las demás. */
.fila-asig{display:grid;grid-template-columns:15rem minmax(6rem,1fr) 13.5rem 4.2rem;
  gap:6px 16px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linea)}
.fila-asig.cabeza{padding:4px 0 6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--suave);font-weight:700}
.fila-asig .nombre{font-size:.9rem;line-height:1.3}
.fila-asig .cuentas{font-size:.82rem;color:var(--suave);font-variant-numeric:tabular-nums}
.fila-asig .valor{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.fila-asig .medida{display:flex;align-items:center;gap:10px}
.pista{position:relative;flex:1;height:10px;border-radius:5px;background:var(--linea);min-width:4rem}
.pista > i{position:absolute;inset:0 auto 0 0;border-radius:5px;background:var(--acento)}
.pista > b{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--texto);
  opacity:.55}
.fila-asig .pct{font-size:.82rem;color:var(--suave);min-width:3.2rem;text-align:right;
  font-variant-numeric:tabular-nums}
.leyenda-media{font-size:.82rem;color:var(--suave);margin:10px 0 0}
.leyenda-media i{display:inline-block;width:2px;height:12px;background:var(--texto);opacity:.55;
  vertical-align:middle;margin:0 6px 0 2px}
@media (max-width:900px){
  .fila-asig{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .fila-asig.cabeza{display:none}
  .fila-asig .nombre{grid-column:1 / -1;font-weight:600}
  .fila-asig .medida{grid-column:1 / -1}
  .segmentado label{padding:6px 10px}
}

.acciones-pie{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.acciones-pie .boton{border-radius:10px;padding:11px 20px;box-shadow:var(--sombra)}
.acciones-pie .boton.sec{background:var(--papel);box-shadow:none}

/* ── la banda y el panel en el móvil ── */
/* ── el menú de la cuenta ──
   En escritorio no existe: el <details> desaparece del flujo (`display:contents`)
   y sus hijos se colocan como antes, en línea. En el móvil se convierte en un
   botón «⋯» que despliega. Sin javascript, y sin dos plantillas que mantener. */
.menu-cuenta{display:contents}
.menu-cuenta > summary{display:none}
/* El envoltorio también desaparece: si no, los tres enlaces se apilan dentro de un
   bloque en medio de la banda en vez de quedar en línea como estaban. */
.menu-cuenta .menu-contenido{display:contents}

@media (max-width:600px){
  .top.banda{padding:10px 14px;gap:8px 10px;row-gap:8px}
  .banda .brand{flex:0 1 auto;min-width:0}
  .banda .brand .monograma{width:30px}
  /* Antes «Dashboard» se ocultaba aquí para ahorrar una fila. Se devuelve —él lo
     echó en falta— y la fila se recupera de otro sitio: la navegación baja a su
     propia línea y se desliza, en vez de envolverse en dos o tres. */
  .banda .brand .nombre{font-size:1.05rem}
  .banda .cuenta{order:2;margin-left:auto;gap:8px;flex-wrap:nowrap}
  .banda .cuenta .quien{padding:4px 10px;font-size:.8rem;max-width:9em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .menu-cuenta{display:block;position:relative}
  .menu-cuenta > summary{display:flex;align-items:center;justify-content:center;
    min-width:40px;min-height:36px;border-radius:9px;cursor:pointer;
    background:var(--banda-chip);color:var(--banda-texto);font-size:1.1rem;
    list-style:none}
  .menu-cuenta > summary::-webkit-details-marker{display:none}
  .menu-cuenta .menu-contenido{position:absolute;right:0;top:calc(100% + 8px);
    z-index:20;display:flex;flex-direction:column;align-items:stretch;gap:10px;
    background:var(--papel);border:1px solid var(--linea);border-radius:12px;
    padding:12px;min-width:12rem;box-shadow:var(--sombra)}
  .menu-cuenta .menu-contenido a.mini,
  .menu-cuenta .menu-contenido button.mini{color:var(--acento);font-size:.95rem;
    text-align:left;min-height:34px}
  .menu-cuenta .menu-contenido select{width:100%}

  /* La navegación, en una sola línea que se desliza con el pulgar. Envolverla en
     tres filas empuja el contenido fuera de la pantalla en cada pantalla. */
  .banda nav{order:3;flex-basis:100%;gap:18px;font-size:.95rem;flex-wrap:nowrap;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:2px}
  .banda nav::-webkit-scrollbar{display:none}
  .banda nav a{white-space:nowrap}
  .panel-b{padding:18px 16px;border-radius:14px}
  .panel-b .cifra-grande{font-size:3rem}
  .pastillas{gap:8px}
  .pastilla{padding:8px 12px;min-width:0;flex:1 1 40%}
  .desglose-b{justify-content:center}
}

/* ═══════════════════════ B en /progress ═══════════════════════ */
.indice{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.indice a{text-decoration:none;color:var(--texto);font-size:.86rem;padding:5px 12px;
  border:1px solid var(--linea);border-radius:999px;background:var(--papel)}
.indice a:hover{border-color:var(--acento);color:var(--acento)}
/* Que un salto del índice no deje el título pegado al borde de la ventana. */
#simulacros,#asignaturas,#confianza,#cohorte,#repaso,#falladas{scroll-margin-top:12px}

/* Fallo 6: una nota de método no lleva el borde rojo de los errores. */
details.notas{background:var(--papel);border:1px solid var(--linea);border-left:3px solid var(--suave);
  border-radius:10px;padding:4px 16px;margin:0 0 16px;font-size:.9rem}
details.notas > summary{cursor:pointer;font-weight:600;padding:8px 0;color:var(--texto);
  text-transform:none;letter-spacing:0;font-size:.9rem;margin:0}
details.notas ul{margin:0 0 10px;padding-left:1.1em}
details.notas li{margin:.3em 0;color:var(--suave)}
details.notas li p{margin:0;display:inline}
details.notas .acciones{margin-left:6px}

/* Asignatura por asignatura: la fila de B con la comparación en la tercera columna. */
.fila-prog .nombre small{display:block;font-size:.74rem;color:var(--suave)}
.fila-prog .delta{font-weight:700;margin-right:4px}
.fila-prog .valor.bien{color:var(--ok)} .fila-prog .valor.mal{color:var(--mal)}

/* Fallo 5: una pregunta por fila y en una línea; el enlace es la fila entera y
   solo se subraya al pasar por encima. */
.lista-cohorte{list-style:none;margin:0;padding:0}
.lista-cohorte li{border-bottom:1px solid var(--linea)}
.lista-cohorte a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-items:center;
  padding:7px 2px;text-decoration:none;color:var(--texto)}
.lista-cohorte .tag{grid-row:1 / span 2;min-width:6.2rem;text-align:center}
.lista-cohorte .tag.mal{color:var(--e-mal);background:var(--e-mal-f)}
.lista-cohorte .tag.bien{color:var(--e-ok);background:var(--e-ok-f)}
.lista-cohorte .asig{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--suave);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-cohorte .enunciado{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-cohorte a:hover .enunciado{text-decoration:underline}
.dos-columnas h3{font-size:.9rem;margin:.2em 0 .3em}

/* Preguntas más falladas: el enunciado en una línea, y la tabla se desliza sola. */
.deslizable{overflow-x:auto}
.tabla.falladas{table-layout:fixed;min-width:32rem}
.tabla.falladas col.c-asig{width:15rem} .tabla.falladas col.c-num{width:6rem}
.tabla.falladas td.enunciado{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#asignaturas .barras{margin-top:10px}
/* Una gráfica que no cabe se desliza dentro de su tarjeta, nunca la página. */
.lienzo{overflow-x:auto;padding-bottom:4px}
/* Antes se le ponía `min-width:560px` y se deslizaba dentro de la tarjeta, porque
   al encogerla las cifras bajaban de 5 px. Ahora cabe entera —él lo pidió— y el
   problema que motivaba aquello se ataca donde estaba: el SVG tiene `viewBox`, así
   que escala, y las etiquetas se agrandan DENTRO del sistema de coordenadas para
   que al escalar acaben otra vez en ~11 px reales. */
@media (max-width:600px){
  #simulacros svg.evo{min-width:0;width:100%;height:auto}
  #simulacros svg.evo .etq{font-size:20px}
  #simulacros svg.evo .etq.peq{font-size:17px}
}
#repaso .card{margin:0}
#repaso .rotulo{margin-bottom:8px}

/* ------------------------------------------------------------------ estudio
   Material de estudio (PRD-ESTUDIO §8). Solo tokens ya definidos: el modo oscuro
   sale gratis y el criterio 20 no se toca. */

.rejilla-estudio{
  display:grid; gap:12px; margin-bottom:16px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.card.asignatura{
  display:block; text-decoration:none; color:inherit;
  transition:border-color .12s ease, transform .12s ease;
}
.card.asignatura:hover{ border-color:var(--acento); }
/* Sin material no es un error: es un hueco que se ve. Si desapareciera, la
   pestaña parecería completa cuando le faltan 13 asignaturas de 20. */
.card.asignatura.sin-material{ opacity:.72; }
.titulo-asignatura{
  font-size:1rem; font-weight:600; line-height:1.25; margin:.35rem 0 .6rem;
  color:var(--texto);
}
.codigo{
  font-size:.75rem; font-weight:700; letter-spacing:.06em;
  padding:.1rem .4rem; border-radius:6px;
  background:var(--tenue); color:var(--suave);
}
.barra{
  height:8px; border-radius:999px; background:var(--tenue);
  overflow:hidden; margin:.35rem 0;
}
.barra > span{ display:block; height:100%; background:var(--acento); border-radius:999px; }

.lista-videos, .lista-capitulos{ margin:.5rem 0 0; padding-left:1.4rem; }
.lista-videos > li, .lista-capitulos > li{
  padding:.35rem 0; border-bottom:1px solid var(--linea);
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline;
}
.lista-videos > li:last-child, .lista-capitulos > li:last-child{ border-bottom:0; }
.lista-videos > li > a, .lista-capitulos > li > a{ flex:1 1 14rem; }
/* Visto se marca con el color del texto, no tachando: lo ya visto se vuelve a
   consultar, y un tachado dice «esto ya no sirve». */
.lista-videos > li.visto > a, .lista-capitulos > li.visto > a{ color:var(--suave); }
.lista-capitulos .tiempo{
  font-variant-numeric:tabular-nums; color:var(--suave); margin-right:.35rem;
}
/* Marcado: contorno verde sobre fondo claro. Con el relleno del botón, el verde
   sobre el azul pizarra no se leía (22/09/2026). */
button.mini.activo{ background:transparent; color:var(--ok); border:1px solid var(--ok); font-weight:600; }

/* 16:9 sin trucos de padding: aspect-ratio lo hace y el móvil no se descuadra. */
.marco-video{
  position:relative; aspect-ratio:16/9; width:100%;
  border-radius:var(--radio); overflow:hidden; background:var(--tenue);
  /* Sin tope, un 16:9 a ancho completo se come la pantalla y el índice de
     capítulos queda fuera de la vista — justo lo que hay que tener a mano
     mientras saltas de una pregunta a la siguiente. El ancho se deriva de la
     altura para no romper la proporción. */
  max-width:calc(min(52vh, 460px) * 16 / 9);
  margin-inline:auto;
}
.marco-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ------------------------------------------------------------------ Estudio:
   anterior/siguiente, notas por vídeo y retomar (22/09/2026) */
.retomado{ margin:.5rem 0 0; }
.pasar-tema{ display:flex; justify-content:space-between; gap:.75rem; margin-top:.75rem; }
.pasar-tema .boton{ text-decoration:none; }
.pasar-tema .desactivado{ opacity:.45; cursor:default; }
.lista-videos > li.actual > a{ font-weight:600; color:var(--acento); }

.barra-notas{
  display:flex; flex-wrap:wrap; align-items:center; gap:.25rem;
  padding:.35rem; margin:.5rem 0; border:1px solid var(--linea);
  border-radius:10px; background:var(--tenue);
  position:sticky; top:0; z-index:2;
}
.barra-notas .grupo{ display:inline-flex; gap:.15rem; }
.barra-notas .sep{ width:1px; align-self:stretch; background:var(--linea); margin:0 .15rem; }
.barra-notas .herr{
  min-height:32px; min-width:32px; padding:.15rem .45rem; font-size:.85rem;
  background:var(--papel); color:var(--texto); border:1px solid var(--linea);
  border-radius:7px; cursor:pointer; line-height:1;
}
.barra-notas select.herr{ padding-right:1.4rem; }
.barra-notas .herr:hover:not([disabled]){ border-color:var(--acento); }
.barra-notas .herr.on{ border-color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento); }
.barra-notas .herr[disabled]{ opacity:.45; cursor:default; }
.barra-notas .muestra{ font-weight:700; }

.editor-notas{
  min-height:14rem; max-height:70vh; overflow:auto;
  padding:.75rem .9rem; border:1px solid var(--linea); border-radius:10px;
  background:var(--papel); color:var(--texto); line-height:1.55; outline:none;
  overflow-wrap:anywhere;
}
.editor-notas:focus{ border-color:var(--acento); box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
.editor-notas:empty::before{ content:attr(data-placeholder); color:var(--suave); }
.editor-notas h3{ font-size:1.15rem; margin:.6rem 0 .3rem; }
.editor-notas ul, .editor-notas ol{ padding-left:1.4rem; margin:.3rem 0; }
.editor-notas p{ margin:.3rem 0; }
.estado-notas{ font-size:.8rem; }
.estado-notas.error{ color:var(--mal); }

/* Colores de las notas: clases, no estilos sueltos, para que se lean en los dos
   modos. El HTML guardado solo puede traer estas (hcl/core/notas.py). */
:root{
  --n-rojo:#b3261e; --n-azul:#1c5d99; --n-verde:#1f7a4d; --n-naranja:#b45309; --n-morado:#6d3fb8;
  --r-amarillo:#fde68a; --r-verde:#bbf7d0; --r-azul:#bfdbfe; --r-rosa:#fbcfe8;
  --r-tinta:#1c1c1a;
}
@media (prefers-color-scheme: dark){
  :root{
    --n-rojo:#ef7b72; --n-azul:#6aa9e0; --n-verde:#5cc08c; --n-naranja:#f0a35e; --n-morado:#b596f0;
    /* En oscuro el resaltado es un tinte oscuro con letra clara, no un pastel:
       sobre un pastel, las letras de color claras de este modo no se leen. */
    --r-amarillo:#5c4a10; --r-verde:#1f4a33; --r-azul:#1d3a5a; --r-rosa:#5a2544;
    --r-tinta:#e9e9e6;
  }
}
.nc-rojo{ color:var(--n-rojo); }     .nc-azul{ color:var(--n-azul); }
.nc-verde{ color:var(--n-verde); }   .nc-naranja{ color:var(--n-naranja); }
.nc-morado{ color:var(--n-morado); }
.nr-amarillo{ background:var(--r-amarillo); } .nr-verde{ background:var(--r-verde); }
.nr-azul{ background:var(--r-azul); }         .nr-rosa{ background:var(--r-rosa); }
.editor-notas [class*="nr-"]:not([class*="nc-"]){ color:var(--r-tinta); border-radius:3px; padding:0 .1em; }
.nt-p{ font-size:.85em; } .nt-g{ font-size:1.25em; } .nt-xg{ font-size:1.6em; }
.barra-notas .muestra[class*="nr-"]{ color:var(--r-tinta); }

.marca-t{
  display:inline-block; padding:0 .4em; margin:0 .1em; border-radius:999px;
  font-size:.85em; font-variant-numeric:tabular-nums; cursor:pointer;
  background:var(--tenue); color:var(--acento); border:1px solid var(--linea);
  user-select:none;
}
.marca-t:hover{ border-color:var(--acento); }
@media (max-width:600px){
  .barra-notas .herr{ min-height:36px; min-width:36px; }
  .pasar-tema .boton{ flex:1; text-align:center; }
}
/* Las muestras de la barra: `.barra-notas .herr` pone el color del texto y el
   fondo del papel, y ganaría a las clases de nota. */
.barra-notas .herr[data-color="rojo"]{ color:var(--n-rojo); }
.barra-notas .herr[data-color="azul"]{ color:var(--n-azul); }
.barra-notas .herr[data-color="verde"]{ color:var(--n-verde); }
.barra-notas .herr[data-color="naranja"]{ color:var(--n-naranja); }
.barra-notas .herr[data-color="morado"]{ color:var(--n-morado); }
.barra-notas .herr[data-resalte="amarillo"]{ background:var(--r-amarillo); }
.barra-notas .herr[data-resalte="verde"]{ background:var(--r-verde); }
.barra-notas .herr[data-resalte="azul"]{ background:var(--r-azul); }
.barra-notas .herr[data-resalte="rosa"]{ background:var(--r-rosa); }

/* ---- Estudio, segunda tanda (22/09/2026) */
.acciones-video{ display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.velocidad{ display:inline-flex; align-items:center; gap:.35rem; color:var(--suave); }
.velocidad select{ min-height:32px; padding:.15rem .4rem; font-size:.85rem; }
.fin-tema{ margin-top:.75rem; padding:.75rem 1rem; border:1px solid var(--acento);
  border-radius:10px; background:var(--tenue); display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:.5rem; }
.fin-tema p{ margin:0; }
.fin-tema[hidden]{ display:none; }
.lista-seguir{ list-style:none; margin:.25rem 0 0; padding:0; }
.lista-seguir > li{ padding:.45rem 0; border-bottom:1px solid var(--linea);
  display:grid; grid-template-columns:1fr auto; gap:.15rem .75rem; align-items:baseline; }
.lista-seguir > li:last-child{ border-bottom:0; }
.lista-seguir > li > a{ text-decoration:none; color:var(--texto); display:flex; gap:.5rem; align-items:baseline; min-width:0; }
.lista-seguir .titulo-seguir{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lista-seguir > li > a:hover .titulo-seguir{ color:var(--acento); text-decoration:underline; }
.lista-seguir .barra{ grid-column:1 / -1; margin:.1rem 0 0; }
.a-estudio{ font-size:.75rem; font-weight:600; margin-left:.35rem; color:var(--acento);
  text-decoration:none; white-space:nowrap; }
.a-estudio:hover{ text-decoration:underline; }
.nota-leida .cuerpo-nota{ min-height:0; max-height:none; border:0; padding:0; background:transparent; }
.nota-leida .rotulo a{ color:inherit; }
.buscar-notas input{ flex:1 1 12rem; }

/* ------------------------------------------------------------------ Estudio:
   temas importados como archivo (Enmienda 4, 23/09/2026) */
.marco-video video{ position:absolute; inset:0; width:100%; height:100%; background:var(--tenue); }
.video-ausente{ position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; padding:1rem 1.25rem; gap:.25rem; }
.video-ausente p{ margin:0; max-width:52ch; }
.agregar-tema{ margin-top:.75rem; }
.agregar-tema > summary{ list-style:none; cursor:pointer; }
.agregar-tema > summary::-webkit-details-marker{ display:none; }
.importar-video{ display:grid; gap:.6rem; margin-top:.75rem; max-width:40rem; }
.importar-video label{ display:grid; gap:.25rem; font-size:.9rem; color:var(--suave); }
.importar-video input, .importar-video select{ width:100%; min-width:0; box-sizing:border-box; }
.importar-video .acciones{ display:flex; gap:.5rem; flex-wrap:wrap; }
.importar-video progress{ width:100%; height:.6rem; accent-color:var(--acento); }
.importar-video p{ margin:0; }
.estado-subida.error{ color:var(--mal); }
details.renombrar select[name="despues_de"]{ max-width:16rem; }
.importar-video [hidden]{ display:none; }

/* ------------------------------------------------------------------ Mi progreso:
   ritmo hasta el MIR y tiempo de estudio (23/09/2026) */
.cifra-ritmo{ font-size:2rem; font-weight:700; line-height:1.1; margin:.2rem 0 .4rem; }
.cifra-ritmo span{ font-size:.95rem; font-weight:500; color:var(--suave); }
.estado-ritmo{ margin:.5rem 0; }
.estado-ritmo.bien{ color:var(--ok); }
.estado-ritmo.mal{ color:var(--mal); }
.estado-ritmo .muted{ font-size:.85rem; }
.fecha-mir{ margin-top:.75rem; align-items:center; flex-wrap:wrap; }
.fecha-mir input[type="date"]{ width:auto; }
/* Una sola serie: un color, barras finas ancladas abajo con la punta redondeada, y
   el valor al pasar por encima (o al enfocar con el teclado). La tabla va debajo. */
.barras-dia{ list-style:none; margin:.75rem 0 .25rem; padding:0; display:grid;
  grid-template-columns:repeat(14, minmax(0,1fr)); gap:2px; height:120px;
  align-items:end; border-bottom:1px solid var(--linea); position:relative; }
.barras-dia li{ position:relative; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center; outline:none; }
.barras-dia li i{ display:block; width:min(70%, 18px); min-height:0; background:var(--acento);
  border-radius:4px 4px 0 0; opacity:.85; }
.barras-dia li.hoy i{ opacity:1; }
.barras-dia li b{ position:absolute; bottom:-1.3rem; font-size:.68rem; font-weight:500;
  color:var(--suave); }
.barras-dia .valor{ position:absolute; bottom:calc(100% + 4px); white-space:nowrap;
  font-size:.75rem; padding:2px 6px; border-radius:6px; background:var(--papel);
  color:var(--texto); border:1px solid var(--linea); opacity:0; pointer-events:none;
  transition:opacity .12s; z-index:3; }
.barras-dia li:hover .valor, .barras-dia li:focus .valor{ opacity:1; }
.barras-dia li:first-child .valor{ left:0; }
.barras-dia li:last-child .valor{ right:0; }
.tiempo-estudio .plegable{ margin-top:1.6rem; }

/* ------------------------------------------------------------------ Estudio:
   vídeo y notas lado a lado en pantalla ancha (23/09/2026). En el móvil, igual. */
@media (min-width:1200px){
  main:has(.estudio-par){ max-width:1480px; }
  .estudio-par{ display:grid; grid-template-columns:minmax(0,1.65fr) minmax(340px,1fr);
    gap:18px; align-items:start; margin-bottom:18px; }
  .estudio-par > .card{ margin:0; }
  .estudio-par .marco-video{ max-width:calc((100vh - 260px) * 16 / 9); }
  .estudio-par > .notas{ position:sticky; top:12px; display:flex; flex-direction:column;
    max-height:calc(100vh - 24px); }
  .estudio-par > .notas .editor-notas{ flex:1 1 auto; max-height:none; min-height:10rem; }
}
.importar-drive{ margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--linea); }
.importar-drive h3{ margin:0; }
.aviso-drive{ margin:.5rem 0 0; font-size:.85rem; }