/* ============================================================
   pieza.css — el aspecto de una página de tronco

   Vivía copiado dentro de un <style> en cada página. Con tres
   iguales ya se notaba, y quedan cincuenta y ocho niveles por
   escribir: la copia número cuatro es la que empieza a divergir
   sin que nadie se entere, que es exactamente cómo este
   repositorio perdió el motor de los másteres en 249 líneas.

   POR QUÉ AQUÍ Y NO EN assets/. `assets/portada.css` y
   `assets/estilo.css` son zona compartida, con una dueña cada
   vez, y meter esto ahí obligaría a coordinar. `web/troncos/`
   no lo escribe nadie más, así que un fichero nuevo aquí no
   puede chocar con ninguna sesión. Está razonado en PARALELO.md.

   QUÉ ES Y QUÉ NO. Va DESPUÉS de portada.css y se apoya en sus
   variables: papel, tinta, filete, --paso, --seccion. No define
   ni un color propio. Si algo se ve apretado se toca la escala
   de portada.css, no esto.

   Lo específico de un nivel —los simuladores de uno concreto,
   una tabla que solo sale ahí— sigue yendo en el <style> de su
   página. Aquí solo lo que se repite.
   ============================================================ */

/* ---------- la columna de lectura ----------
   Una página de tronco es un texto largo que se lee de arriba abajo, así
   que manda la columna. Nada de rejillas de tarjetas. */
.col{width:min(760px,calc(100% - 48px));margin:auto}
.migas{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin:0 0 18px}
.migas a{border-bottom:1px solid var(--line-strong)}
.migas a:hover{border-bottom-color:var(--ink)}
h1{font-size:clamp(34px,5.4vw,62px);line-height:.94;letter-spacing:-.055em;margin:0 0 22px}
.entradilla{font-size:clamp(17px,2.2vw,20px);line-height:1.55;color:var(--muted);margin:0 0 calc(var(--paso) * 1.4)}
/* `display` gana a `[hidden]`, así que sin esto el aviso de superado sale
   como un recuadro verde vacío en cuanto entras. */
.hecho[hidden]{display:none}
.hecho{display:inline-block;border:1px solid var(--ok);color:var(--ok);padding:8px 14px;font-size:13px;font-weight:700;margin-bottom:calc(var(--paso))}
/* Pendiente de revalidar: superado y dejado de usar dos veces en otros
   ejercicios. No es un error, así que no va en rojo de corregir: va en
   la tinta normal, que es como se dice «esto hay que volver a hacerlo».
   Se ensancha porque la frase explica por qué, y una frase larga dentro
   de una etiqueta pequeña no se lee. */
.hecho.revisar{display:block;max-width:60ch;border-color:var(--ink);color:var(--ink);
  font-weight:400;line-height:1.5;padding:12px 16px}

h2{font-size:clamp(24px,3.2vw,34px);line-height:1.06;letter-spacing:-.04em;margin:calc(var(--paso) * 2.4) 0 16px;padding-top:calc(var(--paso) * 1.1);border-top:2px solid var(--ink)}
h3{font-size:18.5px;letter-spacing:-.025em;margin:calc(var(--paso) * 1.3) 0 8px}
p{margin:0 0 15px}
.col p, .col li{font-size:17px;line-height:1.62}
ul,ol{padding-left:22px;margin:0 0 18px}
li{margin-bottom:9px}

/* La prueba: lo que se hace en casa, o con lápiz. Se destaca como receta. */
.receta{border:1px solid var(--line-strong);background:var(--paper-alt);padding:26px 28px;margin:calc(var(--paso)) 0}
.receta h3{margin-top:0}
.receta ol{margin-bottom:0}
.necesitas{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin:0 0 10px}

.lee{width:100%;border-collapse:collapse;margin:calc(var(--paso)) 0;font-size:15.5px}
.lee th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);padding:0 16px 10px 0;border-bottom:1px solid var(--ink)}
.lee td{padding:15px 16px 15px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.lee td:first-child{font-weight:700;width:38%}

.ojo{border-left:2px solid var(--ink);padding:4px 0 4px 20px;margin:calc(var(--paso)) 0;color:var(--muted)}
.ojo strong{color:var(--ink)}
.fuentes{font-size:14.5px;color:var(--muted)}
.fuentes li{margin-bottom:12px}

/* ---------- lo que este nivel añade: números a la vista ----------
   La cuenta es el contenido, así que se ve escrita, no descrita. */
.cuenta{font-variant-numeric:tabular-nums;white-space:nowrap}
.solucion{margin:0;font-size:15.5px;line-height:1.6}
.solucion li{margin-bottom:14px;font-size:15.5px}
.solucion li:last-child{margin-bottom:0}
.solucion b{display:block;font-size:17px;letter-spacing:-.02em}
/* Las respuestas van tapadas. Con las seis a la vista debajo del enunciado,
   la autoprueba no mide nada: se lee la solución y se cree recordada. */
.claves{border:1px solid var(--line-strong);padding:0 26px;margin:calc(var(--paso)) 0}
.claves summary{
  cursor:pointer;list-style:none;padding:18px 0;
  font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);
}
.claves summary::-webkit-details-marker{display:none}
.claves summary::after{content:'  +'}
.claves[open] summary::after{content:'  −'}
.claves summary:hover{color:var(--ink)}
.claves[open] summary{border-bottom:1px solid var(--line);margin-bottom:22px}
.claves[open]{padding-bottom:24px}

/* ---------- los tres simuladores ---------- */
.sim{border:1px solid var(--line-strong);background:var(--paper-alt);padding:24px 26px;margin:calc(var(--paso)) 0}
.simTit{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin:0 0 16px}
.simCtrl{display:flex;flex-wrap:wrap;gap:14px 22px;margin-bottom:18px}
.simCtrl label{font-size:14.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.simCtrl input{font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);padding:7px 9px;width:104px;font-variant-numeric:tabular-nums}
.simCtrl input:focus{outline:2px solid var(--ink);outline-offset:1px}
.simOut{border-top:1px solid var(--line-strong);padding-top:16px}
.simPaso{margin:0 0 8px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.simPaso b{color:var(--ink);font-variant-numeric:tabular-nums}
.simClave{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--muted)}
/* SOLO el primero. `clave()` pinta el número grande como primer <b> y el
   resto de la frase detrás; sin `:first-child`, un <b> puesto dentro de esa
   frase para resaltar una cifra se convertía en otro bloque de 26 px a mitad
   de línea. Pasó en decidir-6 y en medir-6, y no se ve en el texto: solo en
   una captura. */
.simClave > b:first-child{display:block;font-size:26px;letter-spacing:-.04em;color:var(--ink);margin-bottom:6px;font-variant-numeric:tabular-nums}
.simClave b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- el test ---------- */
.pregunta{padding:24px 0;border-bottom:1px solid var(--line)}
.preguntaQ{font-size:17px;line-height:1.5;margin:0 0 14px}
/* El trabajo hecho por otro, para que lo audites. Se lee como un papel que
   te pasan por encima de la mesa: filete a la izquierda, cifras tabulares y
   el número de paso fuera del texto, porque las opciones lo nombran («en el
   paso 3») y tiene que poderse contar de un vistazo. Sin relleno ni caja
   cerrada: no es una cita destacada, es material de trabajo. */
.pasos{list-style:none;counter-reset:paso;margin:0 0 14px;padding:2px 0 2px 16px;
  border-left:1px solid var(--line-strong);max-width:56ch}
.pasos li{counter-increment:paso;position:relative;padding-left:26px;
  font-size:15.5px;line-height:1.55;font-variant-numeric:tabular-nums}
.pasos li + li{margin-top:5px}
.pasos li::before{content:counter(paso);position:absolute;left:0;top:1px;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--soft)}
.opciones{display:grid;gap:8px}
.opcion{
  text-align:left;font:inherit;font-size:15.5px;line-height:1.45;
  background:var(--paper);border:1px solid var(--line-strong);color:var(--ink);
  padding:12px 15px;cursor:pointer;transition:border-color .15s ease;
}
.opcion:hover:not(:disabled){border-color:var(--ink)}
.opcion.elegida{border-color:var(--ink);border-width:2px;padding:11px 14px;font-weight:700}
/* Se responde a ciegas: hasta que no pides el resultado, ninguna opción
   dice si está bien. Si lo dijera, las doce se contestan por descarte. */
.resuelto .opcion.correcta{border-color:var(--ok);border-width:2px;padding:11px 14px}
.resuelto .opcion.fallada{opacity:.5;text-decoration:line-through}
.porque{font-size:14.5px;line-height:1.55;color:var(--muted);margin:14px 0 0;padding-left:16px;border-left:2px solid var(--line-strong)}
.porque.mal{border-left-color:var(--ink);color:var(--ink)}
.quizPie{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px}
.quizCuenta{font-size:14px;color:var(--soft)}
.btn:disabled{opacity:.35;cursor:default}
.resultado{border-top:2px solid var(--ink);margin-top:calc(var(--paso) * 1.4);padding-top:20px}
.resultado b{display:block;font-size:44px;font-weight:800;letter-spacing:-.05em;line-height:1}
.resultado span{font-size:15px;color:var(--muted)}
.resultado.bien b{color:var(--ok)}

.siguiente{border-top:2px solid var(--ink);margin-top:calc(var(--paso) * 2.4);padding-top:calc(var(--paso) * 1.2)}