/* ============ Matebase · componentes de contenido ============ */

/* --- secciones y prosa --- */
.sec{margin:34px 0 14px}
.sec h2{font-size:1.4062rem; letter-spacing:-.02em; display:flex; align-items:center; gap:10px}
.sec h2::before{content:""; width:4px; height:20px; border-radius:3px; background:var(--accent); flex:0 0 4px}
.sub{font-size:1.0938rem; font-weight:640; margin:24px 0 8px; color:var(--ink)}
.prose p{margin:0 0 .95em}

/* --- avisos --- */
.note{
  border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:12px 15px; border-radius:0 10px 10px 0; margin:16px 0; font-size:0.9625rem;
}
.note--warn{border-color:var(--warn); background:var(--warn-soft)}
.note--ok{border-color:var(--ok); background:var(--ok-soft)}
.note--hist{border:1px solid var(--line); border-left:3px solid var(--c5); background:transparent}
/* Utilidad: para que se vea de lejos que ahi se cuenta para que sirve esto. */
.note--util{
  border-left:4px solid var(--use); background:var(--use-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--use) 22%, transparent);
}
.note--util .note__t{color:var(--use); opacity:1; font-weight:750}
.note__t{display:block; font-size:0.7188rem; text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; opacity:.75; margin-bottom:5px}
.note p:last-child{margin-bottom:0}

/* --- formula destacada ---
   El scroll horizontal va en las líneas de fórmula, no en la caja: si se
   pone en .fbox, el navegador recorta también en vertical y se come la
   etiqueta y las fracciones altas. */
.fbox{
  margin:18px 0; padding:2px 18px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); text-align:center; box-shadow:var(--shadow); position:relative;
  overflow:visible;
}
/* El scroll horizontal obliga al navegador a calcular tambien overflow-y:auto,
   asi que una fraccion o una raiz que sobresalgan dos pixeles del renglon sacan
   una barra vertical que no pinta nada. Se les da hueco en vertical para que
   eso no ocurra; el desplazamiento lateral, cuando hace falta, sigue estando. */
/* El globo de ayuda tambien es un div hijo de .fbox, y este selector tiene mas
   especificidad que .fbox__tip: si no se le excluye, le impone padding lateral
   cero y un scroll horizontal que no le corresponde. */
.fbox > div:not(.fbox__tip){overflow-x:auto; padding:1rem 0}
/* Entre dos formulas seguidas ese relleno se sumaria dos veces y la caja
   quedaria desangelada; se solapa para dejar una separacion normal. */
.fbox > div:not(.fbox__tip) + div:not(.fbox__tip){margin-top:-1rem}
/* con etiqueta hace falta hueco arriba para que no pise a la fórmula */
.fbox--lab{padding-top:9px}
.fbox__lab{
  position:absolute; top:9px; left:16px; padding:0;
  font-size:0.6875rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint);
  font-weight:650; line-height:1.1;
}

/* --- «como se lee esto» ---
   Ayuda opcional en la esquina de la formula. Se abre al pasar el raton y
   tambien al pulsar, porque en un movil no hay raton. El globo se ancla a la
   derecha y nunca es mas ancho que la caja, para que no se salga. */
.fbox--ayuda{padding-right:2.38rem}
.fbox__help{
  position:absolute; top:.5rem; right:.56rem; z-index:3;
  width:1.32rem; height:1.32rem; padding:0; border-radius:50%;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-faint);
  font:inherit; font-size:0.75rem; font-weight:700; line-height:1;
  display:grid; place-items:center; cursor:help; transition:.13s;
}
.fbox__help:hover,
.fbox__help[aria-expanded="true"]{
  border-color:var(--accent); color:var(--accent); background:var(--accent-soft);
}
.fbox__help:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* El circulo se ve de 21 px, pero acertarlo con el raton (o con el dedo)
   pedia una punteria que no todo el mundo tiene. La zona sensible se
   agranda hasta 35 px sin tocar lo que se ve. */
.fbox__help::after{
  content:''; position:absolute; inset:-7px;   /* cuadrada: aprovecha las esquinas */
}
.fbox__tip{
  position:absolute; top:2.13rem; right:.62rem; z-index:6;
  width:min(400px, calc(100% - 20px));
  padding:12px 15px; border:1px solid var(--tip-line); border-radius:4px 4px 10px 4px;
  background:var(--tip);
  box-shadow:0 1px 2px rgba(0,0,0,.14), 0 8px 20px -6px rgba(0,0,0,.22);
  font-size:0.8562rem; line-height:1.55; color:var(--tip-ink);
  text-align:left; text-wrap:pretty;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .14s, transform .14s, visibility .14s;
}
.fbox__help:hover ~ .fbox__tip,
.fbox__help:focus-visible ~ .fbox__tip,
.fbox__help[aria-expanded="true"] ~ .fbox__tip,
.fbox__tip:hover, .fbox__tip:focus-within{
  opacity:1; visibility:visible; transform:none;
}
/* Puente invisible entre el botón y el globo: sin él, el globo se cerraba
   justo al mover el ratón hacia el texto para leerlo con calma. */
.fbox__tip::before{
  content:''; position:absolute; left:0; right:0; top:-.82rem; height:.82rem;
}
.fbox__tip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fbox__tip em{color:var(--tip-strong); font-style:normal; font-weight:620}
.fbox__tip strong{color:var(--tip-strong)}

/* --- ideas clave --- */
.keys{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; margin:26px 0 8px; box-shadow:var(--shadow)}
.keys h3{font-size:0.8125rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); margin-bottom:9px}
.keys ul{margin:0; padding-left:18px}
.keys li{margin:.42em 0}

/* --- tablas --- */
.tbl-wrap{overflow-x:auto; margin:16px 0}
table.tbl{border-collapse:collapse; width:100%; font-size:0.9375rem; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; overflow:hidden}
table.tbl th,table.tbl td{padding:8px 12px; text-align:left; border-bottom:1px solid var(--line-soft)}
table.tbl th{background:var(--panel-2); font-size:0.8125rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-soft); font-weight:660}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.num,table.tbl th.num{text-align:right; font-variant-numeric:tabular-nums}

/* --- etiquetas --- */
.tag{display:inline-flex; align-items:center; gap:5px; font-size:0.7188rem; font-weight:640;
  padding:3px 9px; border-radius:20px; background:var(--panel-2); color:var(--ink-soft);
  border:1px solid var(--line-soft); text-transform:uppercase; letter-spacing:.05em}
.tag--b{background:var(--ok-soft); color:var(--ok); border-color:transparent}
.tag--m{background:var(--warn-soft); color:var(--warn); border-color:transparent}
.tag--a{background:var(--bad-soft); color:var(--bad); border-color:transparent}

/* ================= TARJETAS INTERACTIVAS ================= */
.card{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  margin:22px 0; box-shadow:var(--shadow); overflow:hidden;
}
.card__head{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:11px 16px;
  border-bottom:1px solid var(--line-soft)}
.card__kind{font-size:0.6562rem; font-weight:730; text-transform:uppercase; letter-spacing:.09em;
  padding:3px 8px; border-radius:6px; white-space:nowrap}
.card__title{font-size:0.9688rem; font-weight:640}
.card__body{padding:15px 16px}
.card__foot{display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:11px 16px; border-top:1px solid var(--line-soft); background:var(--panel-2)}
.card--demo{border-color:color-mix(in srgb,var(--demo) 32%, var(--line))}
.card--demo .card__head{background:var(--demo-soft)}
.card--demo .card__kind{background:var(--demo); color:#fff}
.card--ex{border-color:color-mix(in srgb,var(--ok) 30%, var(--line))}
.card--ex .card__head{background:var(--ok-soft)}
.card--ex .card__kind{background:var(--ok); color:#fff}
.card__spacer{flex:1}
.card__score{font-size:0.7812rem; color:var(--ink-faint); font-variant-numeric:tabular-nums}

/* botones */
.btn{
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  padding:6.5px 13px; border-radius:9px; cursor:pointer; font-size:0.875rem; font-weight:560;
  display:inline-flex; align-items:center; gap:6px; transition:.13s;
}
.btn:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.btn:active{transform:translateY(1px)}
.btn--main{background:var(--accent); border-color:var(--accent); color:#fff}
.btn--main:hover{background:var(--accent-ink); border-color:var(--accent-ink); color:#fff}
.btn--ok{background:var(--ok); border-color:var(--ok); color:#fff}
.btn--ok:hover{filter:brightness(1.08); color:#fff; background:var(--ok); border-color:var(--ok)}
.btn--ghost{background:transparent}
.btn[disabled]{opacity:.45; cursor:default; transform:none}
.btn--sm{padding:4px 9px; font-size:0.7812rem; border-radius:7px}

/* enunciado */
.q{font-size:1.0312rem; margin-bottom:13px}
.q .qn{font-weight:660; color:var(--accent); margin-right:5px}

/* campos de respuesta */
.ans{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:10px 0 2px}
.fld{display:flex; flex-direction:column; gap:4px}
.fld label{font-size:0.7812rem; color:var(--ink-faint); font-weight:600}
.fld input{
  font:inherit; font-size:0.9688rem; font-family:var(--mono); width:130px; padding:7px 10px;
  border:1.5px solid var(--line); border-radius:9px; background:var(--bg-alt); color:var(--ink);
}
.fld input:focus{border-color:var(--accent); outline:none}
.fld--wide input{width:240px}
.fld--tiny input{width:78px}
.fld.is-ok input{border-color:var(--ok); background:var(--ok-soft)}
.fld.is-bad input{border-color:var(--bad); background:var(--bad-soft)}

.verdict{margin-top:12px; padding:10px 13px; border-radius:10px; font-size:0.925rem; display:none}
.verdict.is-on{display:block}
.verdict--ok{background:var(--ok-soft); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.verdict--bad{background:var(--bad-soft); color:var(--bad); border:1px solid color-mix(in srgb,var(--bad) 30%,transparent)}
.verdict--hint{background:var(--warn-soft); color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}

/* solucion paso a paso */
.steps{display:none; margin-top:14px; border-top:1px dashed var(--line); padding-top:13px}
.steps.is-on{display:block}
.steps ol{counter-reset:s; list-style:none; padding-left:0; margin:0}
.steps li{position:relative; padding-left:32px; margin:.55em 0; font-size:0.9625rem}
.steps li::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:7px;
  background:var(--accent-soft); color:var(--accent-ink);
  font-size:0.7188rem; font-weight:700; display:grid; place-items:center;
}
.steps .fin{margin-top:12px; padding:9px 13px; background:var(--ok-soft); color:var(--ok);
  border-radius:9px; font-weight:600}

/* --- superficie de trabajo interactiva --- */
.stage{border:1px solid var(--line-soft); border-radius:11px; background:var(--plot-bg);
  overflow:hidden; margin:4px 0}
.stage canvas{display:block; width:100%; touch-action:none}
.ctrls{display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; margin:13px 0 4px}
.ctrl{display:flex; flex-direction:column; gap:3px; min-width:180px; flex:1 1 180px}
.ctrl__top{display:flex; justify-content:space-between; align-items:baseline; font-size:0.8125rem}
.ctrl__lab{color:var(--ink-soft); font-weight:600}
.ctrl__val{font-family:var(--mono); font-size:0.8125rem; color:var(--accent); font-weight:600}
/* El deslizador se veia como una raya de 5 px, y esos 5 px eran TODO lo que
   habia que acertar con el raton: la caja del control medía justo eso. La
   pista sigue siendo fina, pero la zona de agarre es ahora de 26 px. */
.ctrl input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:26px;
  background:transparent; outline:none; cursor:pointer; margin:0;
}
.ctrl input[type=range]::-webkit-slider-runnable-track{
  height:5px; border-radius:4px; background:var(--line);
}
.ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--accent); border:2.5px solid var(--panel); box-shadow:0 1px 4px rgba(0,0,0,.25);
  margin-top:-6px;                      /* centrado sobre la pista */
}
.ctrl input[type=range]::-moz-range-track{
  height:5px; border-radius:4px; background:var(--line);
}
.ctrl input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; background:var(--accent);
  border:2.5px solid var(--panel);
}
.ctrl input[type=range]:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.readout{font-family:var(--mono); font-size:0.875rem; background:var(--panel-2);
  border:1px solid var(--line-soft); border-radius:9px; padding:9px 13px; margin-top:11px;
  color:var(--ink); line-height:1.75; overflow-x:auto}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 2px}
.chip{border:1px solid var(--line); background:var(--panel); border-radius:20px;
  padding:6px 13px; font-size:0.8125rem; cursor:pointer; color:var(--ink-soft)}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.chip.is-on{background:var(--accent); border-color:var(--accent); color:#fff}
.legend{display:flex; flex-wrap:wrap; gap:14px; font-size:0.8125rem; color:var(--ink-soft); margin-top:9px}
.legend i{display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px}
.hintline{font-size:0.7812rem; color:var(--ink-faint); margin-top:8px; font-style:italic}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}

/* placeholder de tema no escrito */
.soon{border:1px dashed var(--line); border-radius:var(--radius); padding:22px;
  background:var(--panel)}
.soon h3{font-size:1rem; margin-bottom:8px}
.soon ul{margin-top:6px}

/* --- creditos de la portada --- */
.creditos{
  margin:38px 0 0; padding:18px 0 0; border-top:1px solid var(--line-soft);
  font-size:0.85rem; line-height:1.6; color:var(--ink-faint);
}
.creditos p{margin:0 0 7px}
.creditos p:last-child{margin-bottom:0}
.creditos a{color:var(--accent); font-weight:600}
.creditos strong{color:var(--ink-soft)}

/* --- matemáticas dentro del texto, en pantalla estrecha ---
   Una fórmula larga escrita en línea (dentro de un párrafo, una lista o un
   aviso) no tiene dónde romper y en un móvil se sale de la pantalla: llegó a
   medirse un desbordamiento de 185 px, es decir, texto sencillamente
   ilegible. Se le da su propio desplazamiento lateral, con hueco arriba y
   abajo para que el scroll horizontal no arrastre una barra vertical. */
@media (max-width:560px){
  .prose .mx, .note .mx, .keys .mx, li .mx, td .mx, th .mx{
    display:inline-block; max-width:100%; overflow-x:auto;
    padding:.44rem 0; vertical-align:middle;
  }
}

/* --- acierto y fallo sin depender del color ---
   El borde verde o rojo era la ÚNICA señal de si un campo estaba bien, y para
   quien no distingue el rojo del verde son el mismo campo. Se añade una marca
   con forma, no solo con color. */
.fld{position:relative}
.fld__marca{
  position:absolute; right:8px; bottom:9px; font-size:0.9375rem; font-weight:800;
  line-height:1; pointer-events:none;
}
.fld.is-ok input{border-color:var(--ok); background:var(--ok-soft); padding-right:26px}
.fld.is-bad input{border-color:var(--bad); background:var(--bad-soft); padding-right:26px}
.fld.is-ok .fld__marca{color:var(--ok)}
.fld.is-bad .fld__marca{color:var(--bad)}

/* --- graficas manejables con el teclado ---
   Los 22 dibujos con puntos moviles solo se podian usar arrastrando con el
   raton. Ahora el lienzo se enfoca con el tabulador. */
.stage canvas:focus{outline:none}
.stage canvas:focus-visible{
  /* hacia dentro: .stage recorta con overflow:hidden */
  outline:3px solid var(--accent); outline-offset:-3px;
}
.stage__teclas{
  margin:-1px 0 6px; font-size:0.7812rem; color:var(--ink-faint); line-height:1.6;
}
.stage__teclas kbd{
  display:inline-block; min-width:1.1em; text-align:center;
  padding:1px 5px; margin:0 1px; font:inherit; font-size:0.7188rem;
  border:1px solid var(--line); border-bottom-width:2px; border-radius:4px;
  background:var(--bg-alt); color:var(--ink-soft);
}
/* Texto solo para lectores de pantalla: ocupa sitio cero pero se lee. */
.sr-solo{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* --- dianas grandes cuando se maneja con el dedo ---
   Un raton apunta con precision de un pixel; un dedo, de unos diez
   milimetros. Con puntero grueso todo crece, y de paso crece para quien
   tiene el pulso justo. */
@media (pointer:coarse){
  .btn{padding:10px 15px}
  .btn--sm{padding:8px 12px}
  .chip{padding:9px 15px}
  .fld input{min-height:46px}
  .fbox__help{width:27px; height:27px; font-size:0.875rem}
  .fbox__help::after{inset:-9px}
  .ctrl input[type=range]{height:34px}
  .ctrl input[type=range]::-webkit-slider-thumb{width:22px; height:22px; margin-top:-8.5px}
  .ctrl input[type=range]::-moz-range-thumb{width:20px; height:20px}
}


/* --- para quien el movimiento marea ---
   Hay quien tiene trastornos vestibulares o migrana con aura y a quien
   simplemente le distrae que las cosas se deslicen. El sistema operativo
   ya lo sabe; aqui solo hay que hacerle caso. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}


/* --- «¿cómo escribo la respuesta?» ---
   Mismo circulito y mismo post-it que la ayuda de lectura de las fórmulas,
   pero en la fila de las casillas y en el flujo, no flotando en la esquina. */
.ans{position:relative}
.ans__como{position:static; display:flex; align-items:center; order:99}
/* `relative` y no `static`: el boton lleva un ::after con inset:-7px que le
   agranda la zona sensible, y ese pseudoelemento se ancla al ancestro
   posicionado mas cercano. Con `static` ese ancestro era `.ans`, o sea la
   fila entera, asi que un rectangulo invisible con z-index:3 tapaba las
   casillas y no se podia escribir en ellas: el clic abria la ayuda. Con
   `relative` el ancla vuelve a ser el propio boton, que es lo que se queria,
   y la posicion en el flex no cambia. */
.ans__como .fbox__help{position:relative; flex:0 0 auto; cursor:pointer}
/* El panel se abre en su sitio y empuja lo de abajo. Flotando se salia por
   arriba de la tarjeta, que recorta con overflow:hidden. */
.ans__panel{
  display:none; margin:12px 0 2px; padding:12px 16px;
  border:1px solid var(--tip-line); border-radius:4px 10px 10px 10px;
  background:var(--tip); color:var(--tip-ink);
  font-size:0.856rem; line-height:1.55;
}
.ans__panel.is-on{display:block}
.ans__panel ul{margin:7px 0; padding-left:20px}
.ans__panel li{margin:2px 0}
.ans__panel em{
  font-style:normal; font-family:var(--mono); font-size:.94em;
  color:var(--tip-strong); font-weight:600;
}
.ans__panel strong{color:var(--tip-strong)}


/* El h1 se enfoca por programa al cambiar de tema; no debe salir marcado
   como si el alumno lo hubiera tabulado. */
h1[tabindex]:focus{outline:none}
h1[tabindex]:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:4px}


/* --- enlaces entre capítulos ---
   Se distinguen de un enlace externo: llevan a otro tema del curso y por eso
   tienen la flechita. Subrayado discreto que se aviva al pasar por encima,
   para que se vean sin romper la lectura del párrafo. */
.xref{
  color:var(--accent-ink); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  padding-bottom:1px; font-weight:560;
}
.xref::after{
  content:'\00a0›'; font-weight:700; color:var(--accent);
}
.xref:hover{
  color:var(--accent); background:var(--accent-soft);
  border-bottom-color:var(--accent);
  border-radius:3px; box-shadow:0 0 0 2px var(--accent-soft);
}
.xref:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.keys .xref, .note .xref{font-weight:600}


/* --- bloque de máquinas y lenguajes: piel de violeta --- */
[data-piel="maq"]{
  --accent:var(--maq);
  --accent-soft:var(--maq-soft);
  --accent-ink:var(--maq-ink);
  --on-accent:var(--maq-on);
}
[data-piel="maq"] .hdr__over{color:var(--maq-ink); font-weight:700}

/* ================= BLOQUE 16 · PROGRAMACIÓN GRÁFICA =================
   Una sola declaración cambia el bloque entero: al redefinir el acento
   sobre el contenedor, lo heredan las secciones, los avisos, los enlaces
   entre capítulos, los botones y las gráficas. */
[data-piel="gfx"]{
  --accent:var(--gfx);
  --accent-soft:var(--gfx-soft);
  --accent-ink:var(--gfx-ink);
  --on-accent:var(--gfx-on);
}
[data-piel="gfx"] .hdr__over{color:var(--gfx-ink); font-weight:700}

/* --- bloque de síntesis de sonido: piel de latón --- */
[data-piel="son"]{
  --accent:var(--son);
  --accent-soft:var(--son-soft);
  --accent-ink:var(--son-ink);
  --on-accent:var(--son-on);
}
[data-piel="son"] .hdr__over{color:var(--son-ink); font-weight:700}

/* --- bloque de criptografía: piel de cobre y sus controles --- */
[data-piel="cr"]{
  --accent:var(--cr);
  --accent-soft:var(--cr-soft);
  --accent-ink:var(--cr-ink);
  --on-accent:var(--cr-on);
}
[data-piel="cr"] .hdr__over{color:var(--cr-ink); font-weight:700}

/* --- bloques de inteligencia artificial: piel de fósforo --- */
[data-piel="ia"]{
  --accent:var(--ia);
  --accent-soft:var(--ia-soft);
  --accent-ink:var(--ia-ink);
  --on-accent:var(--ia-on);
}
[data-piel="ia"] .hdr__over{color:var(--ia-ink); font-weight:700}

.cr-fld{margin:10px 0 4px; width:100%}
.cr-fld--corto{width:auto; display:inline-flex; margin-right:14px}
.cr-fld input, .cr-fld textarea{
  display:block; font:inherit; font-size:0.9375rem; font-family:var(--mono); width:100%;
  box-sizing:border-box; padding:7px 10px; margin-top:4px; letter-spacing:.04em;
  border:1.5px solid var(--line); border-radius:9px; background:var(--bg-alt); color:var(--ink);
}
.cr-fld--corto input{width:160px}
.cr-fld textarea{min-height:66px; resize:vertical; line-height:1.5}
.cr-fld input:focus, .cr-fld textarea:focus{border-color:var(--accent); outline:none}
.cr-mono{white-space:pre-wrap; word-break:break-word; letter-spacing:.03em}
.cr-mono b{color:var(--accent)}
.cr-mono .cr-dif{color:var(--bad); font-weight:700}
.cr-mono .cr-ok{color:var(--ok); font-weight:700}
.cr-mono .cr-tenue{color:var(--ink-faint)}
.cr-bits{font-family:var(--mono); letter-spacing:.1em}
.cr-bits .b1{color:var(--accent); font-weight:700}
.cr-bits .b0{color:var(--ink-faint)}
.cr-bits .cr-dif{background:var(--bad-soft); color:var(--bad); border-radius:3px}
.cr-letras{display:flex; flex-wrap:wrap; gap:3px; margin:10px 0 4px}
.cr-letras span{display:inline-flex; flex-direction:column; align-items:center; min-width:22px;
  font-family:var(--mono); font-size:0.8125rem; border:1px solid var(--line-soft); border-radius:6px;
  padding:2px 3px; background:var(--panel); line-height:1.35}
.cr-letras span b{color:var(--accent)}
.cr-letras span i{font-style:normal; color:var(--ink-faint); font-size:0.7rem}
.cr-letras span.is-on{background:var(--accent-soft); border-color:var(--accent)}
.cr-estado{display:grid; grid-template-columns:repeat(4, auto); gap:3px; width:max-content;
  font-family:var(--mono); font-size:0.8125rem; margin:6px 0}
.cr-estado span{padding:3px 7px; background:var(--panel); border:1px solid var(--line-soft);
  border-radius:5px; text-align:center; min-width:22px}
.cr-estado span.is-dif{background:var(--accent-soft); color:var(--accent-ink); font-weight:700}
.cr-partes{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0}
@media (max-width:640px){ .cr-partes{grid-template-columns:1fr} }
.cr-parte{border:1px solid var(--line-soft); border-radius:10px; padding:9px 12px; background:var(--panel)}
.cr-parte h5{margin:0 0 6px; font-size:0.8125rem; color:var(--accent-ink); text-transform:uppercase; letter-spacing:.05em}
.cr-parte--pub{grid-column:1 / -1; background:var(--panel-2); border-style:dashed}

/* --- el visor de shaders --- */
.shd{margin:22px 0 8px}
.shd__stage{
  position:relative; border:1px solid var(--line); border-radius:11px;
  overflow:hidden; background:#000; line-height:0;
}
.shd__canvas{display:block; width:100%; touch-action:none; cursor:crosshair}
.shd__aviso{
  display:none; position:absolute; inset:0; place-items:center; text-align:center;
  padding:20px; color:#eee; font-size:0.875rem; line-height:1.5; background:#111;
}
.shd__aviso.is-on{display:grid}

.shd__lab{
  display:block; margin:13px 0 5px;
  font-size:0.7188rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-faint); font-weight:700;
}
.shd__pista{text-transform:none; letter-spacing:0; font-weight:500; opacity:.85}
.shd__caja{
  position:relative; overflow:hidden;
  border:1.5px solid var(--line); border-radius:10px; background:var(--bg-alt);
}
.shd__caja:focus-within{border-color:var(--gfx); box-shadow:0 0 0 3px var(--gfx-soft)}
.shd--roto .shd__caja{border-color:var(--bad)}

/* El coloreado va en un <pre> DEBAJO y el textarea encima con la letra
   transparente. Las dos capas tienen que medir exactamente igual: misma
   fuente, mismo tamano, mismo interlineado, mismo relleno y misma tabulacion.
   Tocar una sin tocar la otra descuadra el cursor. */
.shd__pinta, .shd__ed{
  margin:0; border:0;
  font-family:var(--mono); font-size:0.8125rem; line-height:1.55;
  letter-spacing:normal; word-spacing:normal; tab-size:2;
  padding:12px 14px; white-space:pre;
}
.shd__pinta{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; color:var(--ink);
}
.shd__ed{
  position:relative; display:block; width:100%; box-sizing:border-box;
  background:transparent; color:transparent; caret-color:var(--ink);
  resize:vertical; overflow:auto; outline:none;
}
.shd__ed::selection{background:var(--cod-sel)}
.shd__ed::-moz-selection{background:var(--cod-sel)}

/* Los ocho papeles del codigo. Los colores viven en base.css, uno por tema. */
.cod-com{color:var(--cod-com); font-style:italic}
.cod-key{color:var(--cod-key); font-weight:600}
.cod-typ{color:var(--cod-typ)}
.cod-num{color:var(--cod-num)}
.cod-fun{color:var(--cod-fun)}
.cod-uni{color:var(--cod-uni)}
.cod-pre{color:var(--cod-pre); font-weight:600}
.cod-pun{color:var(--cod-pun)}

/* En alto contraste el sistema impone sus colores: la capa de abajo estorbaria
   mas que ayudar, asi que se quita y el textarea recupera su letra. */
@media (forced-colors: active){
  .shd__pinta{display:none}
  .shd__ed{color:CanvasText; background:Canvas}
}

/* ================= MAQUINAS Y LENGUAJES =================
   Los tres instrumentos del bloque 15 reutilizan el editor de dos capas de
   arriba tal cual -mismas medidas, mismos ocho colores, mismo modo de alto
   contraste- y solo cambian el color del foco: alli es el del bloque de
   graficos, y aqui tiene que ser el del bloque en el que se este. Se hace
   con un modificador para no tocar la regla existente. */
.shd__caja--prog:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.cir--roto .shd__caja, .maq--roto .shd__caja, .len--roto .shd__caja{border-color:var(--bad)}

.cir, .maq, .len{margin:14px 0}
.cir__aviso, .maq__aviso, .len__aviso{
  margin:8px 0 2px; padding:7px 11px; border-radius:8px;
  background:var(--panel-2); border:1px solid var(--line-soft);
  font-family:var(--mono); font-size:0.8125rem; line-height:1.5; color:var(--ink-soft);
}
.cir--roto .cir__aviso, .maq--roto .maq__aviso, .len--roto .len__aviso{
  background:var(--bad-soft); border-color:var(--bad); color:var(--bad);
}
.cir__nota, .maq__nota, .len__nota{
  margin:8px 0 0; font-size:0.8562rem; color:var(--ink-soft);
}
.cir__tabla, .maq__tabla{margin-top:10px}

/* LA MAQUINA. Los registros a la vista en una fila, y la memoria debajo en la
   tabla de siempre. La celda por la que va el contador se marca con una flecha
   ademas de con el fondo: nada se distingue solo por color. */
.maq__regs{display:flex; flex-wrap:wrap; gap:8px; margin:9px 0 2px}
.maq__reg{
  padding:5px 11px; border-radius:8px;
  background:var(--panel-2); border:1px solid var(--line-soft);
  font-family:var(--mono); font-size:0.8125rem; color:var(--ink);
}
.maq__reg b{color:var(--ink-faint); font-weight:600; text-transform:uppercase; font-size:0.75rem; margin-right:5px}
.maq__reg--sal{background:var(--accent-soft); border-color:var(--accent)}
.maq__reg--sal b{color:var(--accent-ink)}

.maq__mem{max-height:340px; overflow:auto; margin-top:10px}
.maq__mem table.tbl{font-family:var(--mono); font-size:0.8125rem}
.maq__mem th, .maq__mem td{padding:4px 10px}
.maq__mem thead th{position:sticky; top:0; z-index:1}
.maq__flecha{width:1.4em; color:var(--accent); font-weight:700}
.maq__mem tr.is-pc{background:var(--accent-soft)}
.maq__mem tr.is-pc td{color:var(--accent-ink); font-weight:650}
.maq__op{font-weight:700}
.maq__et{color:var(--accent-ink); font-weight:700}
.maq__var{font-weight:650}
.maq__libre{color:var(--ink-faint)}

/* LA BARRITA DE PROGRESO por bloque. Dos tramos: lo dominado y lo solo
   visto. Se distinguen por color y por orden, y el title lo dice en texto. */
.barrita{
  display:inline-flex; width:100%; min-width:70px; height:7px; border-radius:4px;
  background:var(--line-soft); overflow:hidden; vertical-align:middle;
}
.barrita i{display:block; height:100%}
.barrita__done{background:var(--ok)}
.barrita__seen{background:var(--accent); opacity:.42}

/* EL RECORRIDO DE UNA RUTA. Lo que es nucleo de la ruta va en negrita y con
   marca; lo demas es camino. El estado se ve por el punto de la izquierda Y
   por el texto del title: nada se distingue solo por color. */
ol.ruta{margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:1px}
.ruta__t{
  display:flex; align-items:baseline; gap:10px; padding:5px 8px; border-radius:5px;
  font-size:0.9062rem; position:relative;
}
.ruta__t:nth-child(odd){background:var(--panel-2)}
.ruta__t::before{
  content:"○"; color:var(--ink-faint); font-size:0.75rem; flex:0 0 auto; width:1em;
}
.ruta__t.is-seen::before{content:"◐"; color:var(--accent)}
.ruta__t.is-done::before{content:"●"; color:var(--ok)}
.ruta__t.is-nucleo a{font-weight:650}
.ruta__t.is-nucleo{border-left:2px solid var(--accent); border-radius:0 5px 5px 0}
.ruta__t a{color:var(--ink); text-decoration:none}
.ruta__t a:hover{color:var(--accent); text-decoration:underline}
.ruta__t .ruta__bl{margin-left:auto; font-size:0.75rem; color:var(--ink-faint); white-space:nowrap}

/* DEBERES: una lista de enunciados concretos. El estado se dice con palabras
   ademas de con el color, que es la regla de siempre. */
ol.deberes{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; counter-reset:d}
.deberes__t{
  counter-increment:d; display:flex; align-items:center; gap:11px;
  padding:8px 12px; border-radius:6px; background:var(--panel-2);
  border-left:2px solid var(--line);
}
.deberes__t::before{
  content:counter(d); font-family:var(--mono); font-size:0.75rem; font-weight:600;
  color:var(--ink-faint); flex:0 0 1.4em;
}
.deberes__t.is-done{border-left-color:var(--ok)}
.deberes__link{color:var(--ink); text-decoration:none; font-weight:600}
.deberes__link:hover{color:var(--accent); text-decoration:underline}
.deberes__est{margin-left:auto; font-size:0.75rem; color:var(--ink-faint); white-space:nowrap}
.deberes__t.is-done .deberes__est{color:var(--ok)}

/* EXAMEN de cualquier bloque: rejilla de casillas. */
.examen__bloques{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:4px 16px; margin:12px 0 4px;
}
.examen__b{display:flex; align-items:center; gap:9px; padding:5px 7px; border-radius:6px; cursor:pointer}
.examen__b:hover{background:var(--panel-2)}
.examen__b input{width:17px; height:17px; accent-color:var(--accent); flex:0 0 auto}
.examen__b span{font-size:0.9062rem}

/* El boton de imprimir, discreto y al pie del tema. */
.imprimir{margin-top:26px; justify-content:flex-end}
@media print{ .imprimir{display:none !important} }

/* EL TALLER DEL LENGUAJE. Un solo panel a la vez, elegido con fichas: cuatro
   columnas no caben en un movil y aqui todo sale del mismo texto, asi que
   verlas por turnos no pierde nada. */
.len__panel{
  margin:10px 0 0; padding:11px 13px; border-radius:9px; min-height:80px;
  max-height:360px; overflow:auto;
  background:var(--panel-2); border:1px solid var(--line-soft);
  font-family:var(--mono); font-size:0.7812rem; line-height:1.55;
  white-space:pre; color:var(--ink);
}
.len__panel:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.len--difiere .len__aviso{background:var(--bad-soft); border-color:var(--bad); color:var(--bad)}

/* EL ARBOL DIBUJADO Y SU PILA. Los nudos visitados se distinguen por color y
   por relleno, y el aviso de arriba dice en texto por que paso va: nada se
   distingue solo por color. */
.arb{margin:14px 0}
.arb__ed{font-family:var(--mono); font-size:0.875rem}
.arb__aviso{
  margin:8px 0 2px; padding:7px 11px; border-radius:8px;
  background:var(--panel-2); border:1px solid var(--line-soft);
  font-family:var(--mono); font-size:0.8125rem; line-height:1.5; color:var(--ink-soft);
}
.arb--roto .arb__aviso{background:var(--bad-soft); border-color:var(--bad); color:var(--bad)}
.arb--roto .arb__ed{border-color:var(--bad)}
.arb__pila{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:10px 0 2px; min-height:34px}
.arb__et{
  font-size:0.75rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-faint); margin-right:4px;
}
.arb__vacia{font-size:0.8125rem; color:var(--ink-faint); font-style:italic}
.arb__caja{
  font-family:var(--mono); font-size:0.875rem; font-weight:600;
  padding:4px 11px; border-radius:6px; min-width:2.2em; text-align:center;
  background:var(--panel-2); border:1px solid var(--line);
}
.arb__caja.is-cima{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink)}
.arb__nota{margin:8px 0 0; font-size:0.8562rem; color:var(--ink-soft)}

/* El reparto del tiempo, al corregir un simulacro. */
.simul__tiempo{
  margin:14px 0 0; padding:12px 15px; border-radius:9px;
  background:var(--panel-2); border-left:3px solid var(--accent);
  font-size:0.9062rem; line-height:1.55;
}
.simul__tiempo-det{font-family:var(--mono); font-size:0.78rem; color:var(--ink-faint)}

/* El aviso de que la prosa sigue en castellano. Va antes del tema, no a
   mitad: nadie tiene que descubrirlo leyendo. */
.avisoIdioma{
  margin:0 0 16px; padding:10px 14px; border-radius:9px;
  background:var(--panel-2); border-left:3px solid var(--accent);
  font-size:0.875rem; color:var(--ink-soft); line-height:1.5;
}
.themes--idioma .themes__b{font-family:var(--mono); font-size:0.75rem; letter-spacing:.04em}

/* Los conmutadores de entrada. El estado se ve por el texto («a = 1») ademas
   de por el color, que es la regla de accesibilidad del curso: nada se
   distingue solo por color. */
.cir__sw{
  font-family:var(--mono); font-size:0.8125rem; font-weight:600;
  padding:5px 11px; border-radius:20px; cursor:pointer;
  border:1.5px solid var(--line); background:var(--panel); color:var(--ink-soft);
  transition:.12s;
}
.cir__sw:hover{border-color:var(--accent)}
.cir__sw[aria-pressed="true"]{
  border-color:var(--accent); background:var(--accent-soft); color:var(--accent);
}
.cir__sw:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.shd__err{
  margin-top:7px; padding:8px 12px; border-radius:8px;
  font-family:var(--mono); font-size:0.7812rem; line-height:1.6;
}
.shd__err.is-bien{color:var(--ok); background:var(--ok-soft)}
.shd__err.is-mal{color:var(--bad); background:var(--bad-soft)}
.shd__ln{
  display:inline-block; padding:0 6px; margin-right:4px; border-radius:4px;
  background:color-mix(in srgb, var(--bad) 22%, transparent); font-weight:700;
}
.shd__err.is-bien .shd__ln{background:color-mix(in srgb, var(--ok) 22%, transparent)}

.shd__pie{display:flex; flex-wrap:wrap; gap:9px; margin-top:11px; align-items:center}
.shd__cam{font-size:0.75rem; color:var(--ink-faint); line-height:1.4}
.shd__cam:empty{display:none}
.shd--sinwebgl .shd__pie .btn{display:none}

/* Un shader se lee mejor ancho: en el escritorio, que respire. */
@media (min-width:1100px){
  [data-piel="gfx"] .wrap, [data-piel="gfx"].wrap{max-width:1000px}
}

/* ================= SINTESIS DE SONIDO =================
   El sintetizador reutiliza el editor de dos capas de los shaders y pone
   encima dos vistas -la onda y el espectro- y una tira con el sonido
   entero y la posicion de reproduccion. Mientras suena, la tira lo dice
   con el color del acento. */
.son{margin:22px 0 8px}
.son__vistas{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:640px){ .son__vistas{grid-template-columns:1fr} }
.son__vista{
  position:relative; border:1px solid var(--line); border-radius:11px; overflow:hidden;
  background:var(--plot-bg); line-height:0;
}
.son__rot{
  position:absolute; top:6px; right:9px; z-index:1;
  font-size:0.6875rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; line-height:1.2;
}
.son__lienzo{display:block; width:100%; height:120px}
.son__tira{
  display:block; width:100%; height:26px; margin-top:8px;
  border:1px solid var(--line); border-radius:8px; background:var(--plot-bg);
}
.son--sonando .son__tira{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.son__aviso{
  display:none; margin-top:8px; padding:8px 12px; border-radius:8px;
  font-size:0.8125rem; line-height:1.5; background:var(--panel-2); color:var(--ink-soft);
}
.son__aviso.is-on{display:block}
.son--roto .shd__caja{border-color:var(--bad)}
.son__vol{display:inline-flex; align-items:center; gap:7px; font-size:0.75rem; color:var(--ink-faint)}
.son__vol input{width:90px; accent-color:var(--accent)}
.son__info{font-size:0.75rem; color:var(--ink-faint); line-height:1.4}
.son__info:empty{display:none}

/* Trocitos de código dentro de un enunciado */
.shd__mini{
  margin:9px 0; padding:10px 13px; border-radius:9px;
  background:var(--panel-2); border:1px solid var(--line-soft);
  font-family:var(--mono); font-size:0.7812rem; line-height:1.6;
  overflow-x:auto; white-space:pre; color:var(--ink);
}
.shd__mini strong{color:var(--gfx); font-weight:700}
[data-piel="son"] .shd__mini strong{color:var(--son)}
.shd__mini .cod-com{font-style:italic}


/* ================= PREGUNTAS DE ELECCIÓN =================
   Discutir un sistema no es escribir bien «compatible indeterminado»: se
   pulsa. Mismo tamaño de diana que un botón y acierto marcado con forma. */
.fld--opc{gap:6px}
.fld__et{font-size:0.7812rem; color:var(--ink-faint); font-weight:600}
.opc__fila{display:flex; align-items:center; gap:8px}
.opc{display:flex; flex-wrap:wrap; gap:6px}
.opc__b{
  font:inherit; font-size:0.9062rem; line-height:1.3; padding:6px 13px; min-height:36px;
  border:1.5px solid var(--line); border-radius:9px; background:var(--bg-alt); color:var(--ink);
  cursor:pointer; transition:.13s;
}
.opc__b:hover:not([disabled]){border-color:var(--accent); color:var(--accent-ink)}
.opc__b.is-on{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);
  font-weight:650; box-shadow:inset 0 0 0 1px var(--accent);
}
.opc__b[disabled]{cursor:default}
.opc__b:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fld--opc .fld__marca{position:static}
.fld--opc.is-ok .opc__b.is-on{border-color:var(--ok); background:var(--ok-soft); color:var(--ok); box-shadow:inset 0 0 0 1px var(--ok)}
.fld--opc.is-bad .opc__b.is-on{border-color:var(--bad); background:var(--bad-soft); color:var(--bad); box-shadow:inset 0 0 0 1px var(--bad)}

/* pistas graduadas y diagnóstico */
.verdict ol.pistas{margin:6px 0 0; padding-left:1.35em}
.verdict ol.pistas li{margin:.3em 0}
.verdict__mas{opacity:.9}

/* enlace a un enunciado concreto */
.card__aviso{padding:0 16px; font-size:0.8125rem; color:var(--ink-soft); background:var(--panel-2)}
.card__aviso:not(:empty){padding:9px 16px 11px; border-top:1px solid var(--line-soft)}
.card__url{
  display:block; width:100%; margin-top:5px; padding:6px 9px;
  font-family:var(--mono); font-size:0.7812rem;
  border:1px solid var(--line); border-radius:7px; background:var(--bg-alt); color:var(--ink);
}
.card.is-destacada{box-shadow:0 0 0 3px var(--glow), var(--shadow)}
.tag--origen{text-transform:none; letter-spacing:0; font-weight:600}

/* ================= PROBLEMAS POR APARTADOS ================= */
.parte{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line)}
.parte .q{font-size:1rem; margin-bottom:9px}
.parte__letra{display:inline-block; min-width:1.7em; font-weight:700; color:var(--accent)}
.parte.is-hecha .parte__letra{color:var(--ok)}
.parte__pie{display:flex; flex-wrap:wrap; gap:8px; margin-top:11px}
.parte__cerrojo{display:none; margin-top:4px; font-size:0.8438rem; color:var(--ink-soft); font-style:italic}
.parte.is-cerrada .q{color:var(--ink-soft)}
.parte.is-cerrada .parte__cerrojo{display:block}
.parte.is-cerrada .ans, .parte.is-cerrada .parte__pie, .parte.is-cerrada .ans__panel{display:none}
.card--prob.is-examen .parte__cerrojo{display:none}

/* ================= CURSO, ITINERARIO Y REQUISITOS ================= */
.hdr__curso{display:flex; flex-wrap:wrap; gap:7px; margin-top:13px}
.tag--curso{background:var(--panel); color:var(--ink-soft); border-color:var(--line)}
.tag--mii{background:var(--accent-soft); color:var(--accent-ink); border-color:transparent}
.tag--mcs{background:var(--warn-soft); color:var(--warn); border-color:transparent}

.prereq{
  margin:-6px 0 26px; padding:12px 16px 14px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--panel);
}
.prereq__t{
  display:block; font-size:0.7188rem; text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; color:var(--ink-faint); margin-bottom:3px;
}
.prereq p{margin:0 0 9px; font-size:0.9rem; color:var(--ink-soft)}
.prereq__l{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px}
.prereq__l li{margin:0}
.prereq__a{
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px;
  border:1px solid var(--line); border-radius:20px; background:var(--bg-alt);
  font-size:0.85rem; color:var(--ink); text-decoration:none;
}
.prereq__a:hover{border-color:var(--accent); color:var(--accent-ink); text-decoration:none}
.prereq__a .tpc__dot{margin-top:0}
.prereq__a.is-seen .tpc__dot{background:var(--ink-faint)}
.prereq__a.is-done .tpc__dot{background:var(--ok)}
.prereq__st{font-size:0.6875rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em}

/* ================= PORTADA ================= */
.seguir{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:14px 0;
  padding:14px 18px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); box-shadow:var(--shadow); color:var(--ink); text-decoration:none;
}
.seguir:hover{border-color:var(--accent); text-decoration:none}
.seguir__k{font-size:0.7188rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint); font-weight:650}
.seguir__t{font-weight:650; flex:1}
.seguir__f{color:var(--accent); font-weight:700}
.repaso{list-style:none; padding:0; margin:10px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px}
.repaso li{margin:0}
.repaso__i{
  display:flex; flex-direction:column; gap:2px; height:100%; padding:10px 13px;
  border:1px solid var(--line); border-left:3px solid var(--ok); border-radius:10px;
  background:var(--panel); color:var(--ink); text-decoration:none;
}
.repaso__i.is-fallado{border-left-color:var(--bad)}
.repaso__i:hover{border-color:var(--accent); text-decoration:none}
.repaso__t{font-weight:620; font-size:0.9rem}
.repaso__n{font-size:0.7812rem; color:var(--ink-faint)}
.itin-inicio{display:flex; flex-wrap:wrap; gap:9px; margin:12px 0 4px}
a.btn:hover{text-decoration:none}

/* ================= MAPA, SIMULACRO Y FORMULARIO ================= */
.punto{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--line);
  margin-right:7px; vertical-align:1px}
.punto.is-seen{background:var(--ink-faint)}
.punto.is-done{background:var(--ok)}
.mapa__n{color:var(--ink-faint); font-size:0.8125rem; font-variant-numeric:tabular-nums}
.mapa__req{font-size:0.8438rem}
.mapa__tbl td:first-child{width:42%}

.simul .card__head{background:var(--warn-soft)}
.simul__kind{background:var(--warn); color:var(--on-accent)}
.simul__intro{margin:0 0 10px; color:var(--ink-soft)}
.simul__partes{display:flex; flex-direction:column; gap:6px; margin:8px 0}
.simul__parte{
  display:flex; align-items:flex-start; gap:10px; padding:8px 11px; cursor:pointer;
  border:1px solid var(--line-soft); border-radius:9px; background:var(--bg-alt); font-size:0.9rem;
}
.simul__parte input{margin-top:4px; width:17px; height:17px; accent-color:var(--accent)}
.simul__de{display:block; font-size:0.7812rem; color:var(--ink-faint)}
.simul__reloj-op{margin-top:4px}
.simul__info{margin:10px 0 0; font-weight:600; color:var(--ink-soft)}
.simul__pie{display:flex; flex-wrap:wrap; gap:9px; margin-top:12px}
.simul__barra{
  position:sticky; top:52px; z-index:6; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin:18px 0; padding:10px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); box-shadow:var(--shadow);
}
.simul__reloj{font-family:var(--mono); font-weight:700; font-size:1rem; color:var(--ink)}
.simul__reloj.is-fin{color:var(--bad)}
.simul__cuenta{font-size:0.8438rem; color:var(--ink-soft)}
.simul__res:not(:empty){
  margin:10px 0 24px; padding:16px 18px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow);
}
.simul__nota{display:flex; align-items:baseline; gap:6px; margin-bottom:8px}
.simul__cifra{font-size:2.4rem; font-weight:720; letter-spacing:-.02em; color:var(--ink)}
.simul__sobre{color:var(--ink-faint)}
.simul__nota-pie{font-size:0.875rem; color:var(--ink-soft); margin:10px 0 0}
.simul__repasa{font-size:0.875rem}

.formu__barra{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0}
.formu__barra .chips{margin:0}
.formu__aviso{font-size:0.875rem; color:var(--ink-faint); min-height:1.2em}
.formu__bloque{margin:30px 0 6px; font-size:1.3rem}
.formu__tema{margin:14px 0 20px; padding-top:10px; border-top:1px solid var(--line-soft)}
.formu__tema h3{font-size:1rem; margin-bottom:4px}
.formu__tema .fbox{margin:10px 0}
.formu__tema .keys{margin:12px 0 4px}

/* ================= VISOR 3D ================= */
.stage--3d canvas{cursor:grab}
.stage--3d canvas:active{cursor:grabbing}

/* ================= HILO, TRAMPAS, EJEMPLO RESUELTO Y COMPRUEBA =================
   Las piezas pedagogicas que van entre la explicacion y el ejercicio. */

/* De donde venimos: un organizador previo, discreto, al principio del tema. */
.note--puente{border-left:3px solid var(--ink-faint); background:var(--panel-2)}
.note--puente .note__t{opacity:.6}
/* Trampas habituales: color de aviso, con el error en negrita y el porque detras. */
.note--trampa{border-color:var(--warn); background:var(--warn-soft)}
.note--trampa ul{margin:0; padding-left:18px}
.note--trampa li{margin:.4em 0}

/* Ejemplo resuelto: mismo esqueleto que una tarjeta, color de acento. */
.card--res{border-color:color-mix(in srgb,var(--accent) 34%, var(--line))}
.card--res .card__head{background:var(--accent-soft)}
.card--res .card__kind{background:var(--accent); color:var(--on-accent)}
.res__enun p:last-child{margin-bottom:.6em}
.res__pasos{margin:0; padding-left:1.6em; counter-reset:paso}
.res__paso{margin:.55em 0; padding-left:.2em}
.res__paso::marker{color:var(--accent); font-weight:700}
.res__antes{
  margin:12px 0 4px; padding:9px 12px; border-radius:9px; font-size:0.9rem;
  background:var(--tip); color:var(--tip-ink); border:1px solid var(--tip-line);
}
.res__antes[hidden]{display:none}
.res__q{font-weight:700; color:var(--tip-strong)}
.res__pie{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.res__cierre{margin-top:12px; padding-top:10px; border-top:1px dashed var(--line)}
.res__cierre p:last-child{margin-bottom:0}
.card--res.is-completo .res__pasos{opacity:1}

/* Comprueba: una pregunta, un clic, una explicacion. */
.chk{
  margin:18px 0; padding:12px 15px 13px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-alt); border-left:4px solid var(--ok);
}
.chk__t{display:block; font-size:0.7188rem; text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; color:var(--ok); margin-bottom:5px}
.chk__q{font-size:0.9625rem; margin-bottom:9px}
.chk__opc{margin:0}
.chk__fb{margin-top:10px; padding:9px 12px; border-radius:9px; font-size:0.9rem; background:var(--panel-2)}
.chk__fb[hidden]{display:none}
.chk.is-ok .opc__b.is-on{border-color:var(--ok); background:var(--ok-soft); color:var(--ok); box-shadow:inset 0 0 0 1px var(--ok)}
.chk.is-bad .opc__b.is-on{border-color:var(--bad); background:var(--bad-soft); color:var(--bad); box-shadow:inset 0 0 0 1px var(--bad)}
.chk.is-ok .chk__fb{background:var(--ok-soft)}
.chk.is-bad .chk__fb{background:var(--bad-soft)}

/* Predecir antes de tocar una demo: plegado, para no estorbar a quien ya sabe. */
.predice{
  margin:0 0 12px; padding:8px 12px; border:1px dashed var(--demo); border-radius:9px;
  background:color-mix(in srgb, var(--demo-soft) 60%, transparent); font-size:0.9rem;
}
.predice summary{cursor:pointer; font-weight:650; color:var(--demo)}
.predice[open] summary{margin-bottom:6px}
.predice p:last-child{margin-bottom:0}

/* Indice del tema: una linea de enlaces, al principio. */
.toc{margin:0 0 22px; font-size:0.8438rem; color:var(--ink-soft)}
.toc__t{text-transform:uppercase; letter-spacing:.1em; font-size:0.6875rem; font-weight:700; color:var(--ink-faint); margin-right:8px}
.toc__l{display:inline; margin:0; padding:0; list-style:none}
.toc__l li{display:inline}
.toc__l li + li::before{content:"·"; margin:0 7px; color:var(--ink-faint)}
.toc__l a{color:var(--ink-soft); text-decoration:none; border-bottom:1px dotted var(--line)}
.toc__l a:hover{color:var(--accent-ink); border-bottom-color:var(--accent)}
.sec h2:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:4px}

/* ================= IMPRESIÓN =================
   El formulario, y cualquier tema, se imprimen sin índice, sin barras y
   sin botones: solo lo que se lee. */
@media print{
  /* IMPRIMIR UN TEMA COMO FICHA DE TRABAJO.
     Se va todo lo que solo sirve con un ratón delante -indice, botones,
     ayudas desplegables- y se queda lo que se lee y lo que se rellena. Los
     ejercicios se imprimen con su enunciado y sus casillas vacias: la ficha
     se hace a boligrafo y se corrige despues en pantalla. */
  .side, .topbar, .glos, .pager, .scrim, .saltar, .card__foot, .parte__pie,
  .formu__barra, .fbox__help, .fbox__tip, .ans__como, .stage__teclas, .prereq,
  .res__pie, .res__antes, .toc, .nav, .itin-inicio, .simul__pie, .chips .btn,
  .card__url, .barrita, .shd__pie, .cir__aviso, .maq__aviso, .len__aviso{display:none !important}
  /* Impreso, un ejemplo resuelto se lee entero. */
  .res__paso[hidden], .res__cierre[hidden]{display:list-item !important}
  .res__cierre[hidden]{display:block !important}
  .predice{display:block}
  .predice summary{list-style:none}
  html, body, .app, .main{height:auto !important; overflow:visible !important; display:block !important}
  .wrap{max-width:none; padding:0}
  body{background:#fff}
  .card, .fbox, .keys{box-shadow:none}
  .fbox, .keys, .formu__tema h3{break-inside:avoid}

  /* Una ficha no se parte por la mitad, y un titulo no se queda solo al pie. */
  .card, .chk, .res, .ans__panel{break-inside:avoid}
  h1, h2, h3, h4{break-after:avoid}
  .card__head{break-after:avoid}

  /* Las casillas de respuesta, en papel, son rayas para escribir encima. */
  .fbox input, .fld input, input[type="text"], input[type="number"]{
    border:0 !important; border-bottom:1px solid #999 !important;
    border-radius:0 !important; background:transparent !important;
    min-width:7em; box-shadow:none !important;
  }
  .opc__b{border:1px solid #999 !important; background:transparent !important; color:#000 !important}

  /* Papel: tinta negra, enlaces sin adorno y con su destino a la vista cuando
     no sea obvio. Un enlace subrayado en azul no sirve de nada impreso. */
  *{color:#000 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  a{text-decoration:none !important}
  .prose a[href^="#/"]::after{content:" (" attr(href) ")"; font-size:0.75em; color:#555 !important}

  /* La cabecera de la ficha: de que tema es y de donde sale. */
  .hdr{border-bottom:1px solid #999; padding-bottom:8px; margin-bottom:14px}
  .hdr::after{
    content:"Matebase · " attr(data-ruta);
    display:block; margin-top:6px; font-size:0.75rem; color:#555 !important;
  }

  /* Nada de fondos grises que se comen el toner. */
  .card, .note, .keys, .chk, .fbox, .res, table.tbl, .shd__mini, pre{
    background:#fff !important; border-color:#bbb !important;
  }
  table.tbl th{background:#f2f2f2 !important}

  @page{margin:16mm 14mm}
}