/*
 * Simula · la base sobria. El caso base es un notebook por grupo y la comparación de sala en
 * un proyector (decisión de Belisario, 27 de septiembre de 2026): lo ancho se escribe aquí, y
 * lo angosto —un teléfono, que tiene que funcionar pero no es objetivo— en la consulta de
 * ancho máximo del final. Tamaños relativos.
 *
 * LA PALETA vive sólo aquí, en `:root`, y en ninguna otra parte: ni en las hojas, ni en el
 * código, ni en el sprite. Es multicolor de cómic (tarea 005): primarios saturados, un negro
 * de trazo, un papel que no es blanco puro, tintes claros para los fondos de texto, los tonos
 * de los escenarios y los de piel y pelo del reparto. Pensada para proyector:
 *   - todo par de texto y fondo cumple 7:1, calculado sobre estas variables por la puerta
 *     de contraste (`npm run puerta:contraste`). Un par que no está en la misma regla se
 *     declara con un comentario `contraste: --texto sobre --fondo, --otro-fondo`;
 *   - el color nunca es el único portador: lo que el color distingue, lo distingue también
 *     la forma, el trazo o el texto.
 */

:root {
  /* El trazo y el papel */
  --tinta: #16161d;
  --papel: #fffaf0;
  --papel-hondo: #f1e9d8;
  --blanco: #ffffff;
  --gris: #45433f;
  --gris-medio: #9a968e;

  /* Los primarios, saturados: para dibujar, nunca de fondo de un texto salvo el amarillo */
  --amarillo: #ffd23f;
  --rojo: #e23d2b;
  --azul: #2d6ad6;
  --verde: #2f9e59;
  --morado: #7b4cc4;
  --naranjo: #ff8a2a;
  --turquesa: #1fb0a4;
  --rosa: #ee6ea0;

  /* Los tintes claros: fondos de texto y paredes */
  --celeste: #cfe6ff;
  --menta: #cdefdb;
  --lila: #e3d8ff;
  --durazno: #ffdcc2;
  --crema: #fff0bd;
  --rosado: #ffd5e3;

  /* Los escenarios */
  --arena: #ead6ab;
  --madera: #c68a53;
  --madera-honda: #8b5a30;
  --metal: #aab3bd;
  --metal-hondo: #5d6873;
  --pantalla: #223249;
  --verde-luz: #5ae38e;

  /* El reparto: piel y pelo */
  --piel-1: #fde3cf;
  --piel-2: #f3c6a0;
  --piel-3: #dca079;
  --piel-4: #b97a50;
  --piel-5: #8a5536;
  --piel-6: #5b3622;
  --pelo-negro: #24201e;
  --pelo-castano: #6e3f22;
  --pelo-rubio: #eec15a;
  --pelo-pelirrojo: #c4502a;
  --pelo-canoso: #d8d4cc;

  /* El elenco: la sombra de corte de cada tono */
  --piel-1-sombra: #eab99a;
  --piel-2-sombra: #d9a179;
  --piel-3-sombra: #bd7f58;
  --piel-4-sombra: #955a36;
  --piel-5-sombra: #6c3e25;
  --piel-6-sombra: #432616;
  --pelo-negro-sombra: #3d3632;
  --pelo-castano-sombra: #4e2b16;
  --pelo-canoso-sombra: #b3aea4;
  --pelo-pelirrojo-sombra: #9c3a1c;
  --pelo-rubio-sombra: #c99a38;
  --azul-sombra: #1f4fa3;
  --turquesa-sombra: #16837a;
  --verde-sombra: #1f7240;
  --morado-sombra: #56338f;
  --rojo-sombra: #a82a1c;
  --blanco-sombra: #d9d4c7;
  --celeste-sombra: #9fc4e8;

  /* El elenco: la ropa y la cara */
  --traje: #5b5f66;
  --traje-sombra: #43464c;
  --camel: #c9955c;
  --camel-sombra: #a2733f;
  --petroleo: #1f5f6b;
  --petroleo-sombra: #144049;
  --mostaza: #e0a526;
  --mostaza-sombra: #b07f14;
  --boca: #6e1219;
  --labios: #8e3a3a;

  /* Los usos */
  --acento: var(--amarillo);
  --alerta: var(--rojo);

  --trazo: 0.1875rem;
  --trazo-fino: 0.125rem;
  --radio: 0.25rem;
  --sombra: 0.3125rem 0.3125rem 0 var(--tinta);

  --fuente-titulo: 'Bangers', 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --fuente-texto: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/estaticos/titulo.04f54ff42ea2.woff2') format('woff2');
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1.1875rem;
  line-height: 1.5;
}

.pagina {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem 2rem 3rem;
}

.ancha .pagina {
  max-width: 96rem;
}

h1,
h2,
.titular {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 1.625rem;
  margin-top: 2rem;
}

p {
  margin: 0 0 1rem;
}

a {
  /* contraste: --tinta sobre --papel, --papel-hondo, --blanco */
  color: var(--tinta);
  text-decoration-thickness: var(--trazo-fino);
  text-underline-offset: 0.2em;
}

.antetitulo {
  /* contraste: --gris sobre --papel, --papel-hondo, --blanco */
  display: block;
  font-family: var(--fuente-texto);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.25rem;
}

.ayuda {
  /* contraste: --gris sobre --papel, --papel-hondo, --blanco */
  color: var(--gris);
  font-size: 0.9375rem;
}

/* Cabecera y pie */

.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: var(--trazo) solid var(--tinta);
}

.marca {
  font-family: var(--fuente-titulo);
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.marca-descriptor {
  /* contraste: --gris sobre --papel */
  display: block;
  font-family: var(--fuente-texto);
  font-size: 0.8125rem;
  color: var(--gris);
  letter-spacing: 0;
}

/*
 * El nombre del grupo, con ancho acotado (tarea 009, recomendación 4 de la 008): un nombre largo no
 * parte la cabecera en dos filas a 1366×768. Lo que no cabe termina en «…»; el nombre entero va en
 * el `title` y en la pantalla de la puerta.
 */
.cabecera-grupo {
  max-width: 14rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cabecera-grupo .antetitulo {
  margin: 0;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.75rem;
}

/* La carpeta del caso: con el mismo peso que salir, al lado. */
.boton-carpeta::before {
  content: '▤ ';
}

/* En una decisión con algo marcado, el aviso de que abrir la carpeta lo pierde. */
.aviso-carpeta {
  display: none;
  max-width: 17rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  background: var(--crema);
  border: var(--trazo-fino) solid var(--tinta);
}

.aviso-carpeta::before {
  content: '▲ ';
}

body:has(.decision form input:checked:not(.por-omision)) .aviso-carpeta {
  display: block;
}

/* El reloj de la simulación, en el estilo de cómic: un dato a la vista, no una animación. */
.reloj {
  margin: 0;
  padding: 0.25rem 0.75rem 0.125rem;
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  color: var(--tinta);
  background: var(--amarillo);
  border: var(--trazo) solid var(--tinta);
  box-shadow: var(--sombra);
  transform: rotate(-2deg);
}

.reloj-cero {
  color: var(--papel);
  background: var(--tinta);
}

.pie {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: var(--trazo-fino) solid var(--papel-hondo);
}

/* Salir: un botón secundario. Sin trama, sin sombra, sin la tipografía de título: nada
   que se parezca al botón de avanzar. */
.salir {
  margin: 0;
}

.boton-salir,
.boton-cabecera {
  display: inline-block;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tinta);
  background: var(--papel);
  border: var(--trazo-fino) solid var(--tinta);
  border-radius: 2rem;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
}

.boton-salir::before,
.boton-volver::before {
  content: '← ';
}

.boton-cabecera {
  text-decoration: none;
}

.boton-control::before {
  content: none;
}

/* Formularios */

form {
  margin: 0;
}

fieldset {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
  min-width: 0;
}

legend {
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  padding: 0;
  margin-bottom: 0.75rem;
}

label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.375rem;
}

input[type='text'] {
  width: 100%;
  font: inherit;
  font-size: 1.25rem;
  padding: 0.625rem 0.75rem;
  color: var(--tinta);
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
  border-radius: var(--radio);
}

input.codigo-sala {
  max-width: 8ch;
  font-size: 1.75rem;
  letter-spacing: 0.2em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.opciones {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.opcion {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.875rem 1rem;
  font-weight: 400;
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
  border-radius: var(--radio);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.opcion input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.125rem 0 0;
  accent-color: var(--tinta);
}

.opcion:has(input:checked) {
  background: var(--acento);
  box-shadow: var(--sombra);
  font-weight: 700;
}

.boton {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--tinta);
  background: var(--acento);
  border: var(--trazo) solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 0.75rem 1.25rem;
  margin: 0.5rem 0.3125rem 0.5rem 0;
  text-decoration: none;
  cursor: pointer;
}

.boton:active {
  box-shadow: none;
  transform: translate(0.3125rem, 0.3125rem);
}

.boton-secundario {
  background: var(--papel);
}

.nota-confirmar {
  font-weight: 700;
  margin: 1rem 0 0;
}

.nota-confirmar::before {
  content: '■ ';
}

.bloque {
  margin: 0 0 1.5rem;
}

.separado {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: var(--trazo) dashed var(--tinta);
}

/* Avisos: la señal no depende del color. Signo, palabra, borde grueso y trama. */

.aviso {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0 0 1.25rem;
  padding: 0.875rem 1rem;
  background: var(--papel);
  border: var(--trazo) solid var(--tinta);
  border-left-width: 0.75rem;
  border-radius: var(--radio);
}

.aviso-error {
  border-color: var(--alerta);
  border-left-color: var(--tinta);
}

.aviso-signo {
  flex: none;
  width: 2rem;
  height: 2rem;
}

.aviso strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.875rem;
}

.aviso p {
  margin: 0;
}

.situacion {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

.privacidad {
  padding: 1rem;
  background: var(--papel-hondo);
  border-left: 0.5rem solid var(--tinta);
}

/* La consola del staff */

/* El código de acceso: seis posiciones marcadas, sin JavaScript. En una fuente monoespaciada
   cada dígito mide 0,6em; con 0,6em de espacio, cada uno ocupa 1,2em, que es el paso de las
   casillas: cada dígito cae en la suya. */
input.codigo-acceso {
  box-sizing: content-box;
  width: 7.2em;
  font-family: 'Courier New', Courier, monospace;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.6em;
  padding: 0.375rem 0.5rem;
  background-color: var(--blanco);
  background-image: repeating-linear-gradient(
    to right,
    var(--papel-hondo) 0,
    var(--papel-hondo) 1.1em,
    var(--blanco) 1.1em,
    var(--blanco) 1.2em
  );
  background-origin: content-box;
  background-clip: content-box;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
}

.tabla th,
.tabla td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: var(--trazo-fino) solid var(--papel-hondo);
  vertical-align: top;
}

.tabla th {
  border-bottom: var(--trazo) solid var(--tinta);
}

.fila-formulario {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
  margin: 0 0 1.5rem;
}

.fila-formulario > div {
  flex: 1 1 14rem;
}

select {
  width: 100%;
  font: inherit;
  padding: 0.625rem 0.75rem;
  color: var(--tinta);
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
  border-radius: var(--radio);
}

.codigo-grande {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: 4.5rem;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 0.25rem 1rem;
  border: var(--trazo) solid var(--tinta);
  box-shadow: var(--sombra);
  background: var(--blanco);
  font-variant-numeric: tabular-nums;
}

.salas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.lista-control {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.lista-control li::before {
  content: '✗ ';
  font-weight: 700;
}

.lista-control li.hecho::before {
  content: '✓ ';
}

.informe {
  overflow-x: auto;
  padding: 1rem;
  background: var(--blanco);
  border: var(--trazo-fino) solid var(--tinta);
  font-size: 0.875rem;
  line-height: 1.4;
}

.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 0 0 1rem;
}

.cifra {
  font-family: var(--fuente-titulo);
  font-size: 3rem;
  line-height: 1;
}

.etiqueta-prueba {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  border: var(--trazo-fino) solid var(--tinta);
}

@media (max-width: 40em) {
  body {
    font-size: 1.0625rem;
  }

  .pagina {
    padding: 1rem 1rem 3rem;
  }

  h1 {
    font-size: 2.25rem;
  }

  .opcion {
    padding: 0.875rem 1rem;
  }
}

/*
 * Simula · la identidad de cómic, primera versión. Trazo grueso, tramas de puntos, globos y
 * viñetas de reacción. La firma se gasta aquí —la viñeta de consecuencia y el cierre— y en
 * ninguna otra parte. Los colores salen de la paleta de base.css.
 */

.trama {
  background-color: var(--acento);
  background-image: radial-gradient(var(--tinta) 18%, transparent 20%);
  background-size: 0.5rem 0.5rem;
}

.trama-suave {
  background-color: var(--papel);
  background-image: radial-gradient(var(--papel-hondo) 30%, transparent 32%);
  background-size: 0.625rem 0.625rem;
}

/* La viñeta de consecuencia */

.vineta {
  position: relative;
  margin: 0 0 1.5rem;
  border: var(--trazo) solid var(--tinta);
  box-shadow: var(--sombra);
  background: var(--papel);
}

.vineta-cuadro {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: var(--trazo) solid var(--tinta);
}

.vineta-estallido {
  flex: none;
  width: 6rem;
  height: 6rem;
}

.vineta-eleccion {
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--papel);
  border: var(--trazo) solid var(--tinta);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.vineta-eleccion .antetitulo {
  /* contraste: --tinta sobre --papel */
  color: var(--tinta);
}

.vineta-globos {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem 1.5rem 2rem;
}

.globo {
  position: relative;
  margin: 0 0 0.75rem;
}

.globo-cuerpo {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.875rem 1rem;
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
  border-radius: 1.25rem;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.4;
}

.globo-cola {
  position: absolute;
  z-index: 2;
  left: 1.5rem;
  bottom: -1.0625rem;
  overflow: visible;
  width: 1.75rem;
  height: 1.25rem;
}

.globo-diferido .globo-cuerpo {
  border-style: dashed;
}

.globo .antetitulo {
  /* contraste: --tinta sobre --blanco */
  color: var(--tinta);
}

.globo-diferido .antetitulo::before {
  content: '↳ ';
}

.habilitado {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0 1rem 1.25rem;
  padding: 0.75rem 1rem;
  border: var(--trazo) solid var(--tinta);
  background: var(--papel-hondo);
  font-weight: 700;
}

.habilitado svg {
  flex: none;
  width: 1.75rem;
  height: 2rem;
}

/* El cierre */

.cierre-final {
  padding: 1.25rem 1rem;
  margin: 0 0 1.5rem;
  border: var(--trazo) solid var(--tinta);
  box-shadow: var(--sombra);
}

.cierre-final .antetitulo {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--tinta);
  background: var(--papel);
  border: var(--trazo-fino) solid var(--tinta);
}

.cierre-final h1 {
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--papel);
  border: var(--trazo) solid var(--tinta);
  font-size: 1.875rem;
}

.recorrido {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.recorrido > li {
  counter-increment: paso;
  position: relative;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem 0.75rem 3.25rem;
  border: var(--trazo-fino) solid var(--tinta);
  background: var(--blanco);
}

.recorrido > li::before {
  content: counter(paso);
  position: absolute;
  left: 0.625rem;
  top: 0.625rem;
  width: 2rem;
  height: 2rem;
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  line-height: 2rem;
  text-align: center;
  color: var(--papel);
  background: var(--tinta);
  border-radius: 50%;
}

.recorrido-situacion {
  /* contraste: --gris sobre --blanco */
  margin: 0 0 0.25rem;
  color: var(--gris);
  font-size: 0.9375rem;
}

.recorrido-eleccion {
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.recorrido-consecuencias {
  margin: 0;
  padding: 0 0 0 1rem;
  border-left: var(--trazo) solid var(--acento);
}

.recorrido-consecuencias p {
  margin: 0 0 0.25rem;
}

.recorrido-consecuencias .antetitulo {
  display: inline;
  font-size: 0.75rem;
}

/* El perfil por dimensión: la cifra escrita manda; la barra la acompaña. */

.perfil {
  margin: 0;
  padding: 0;
  list-style: none;
}

.perfil > li {
  margin: 0 0 1rem;
}

.perfil-cabeza {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1rem;
  font-weight: 700;
}

.perfil-cifra {
  font-variant-numeric: tabular-nums;
}

.perfil-barra {
  display: block;
  width: 100%;
  height: 1.75rem;
  margin-top: 0.25rem;
}

.perfil-fondo {
  fill: var(--papel);
  stroke: var(--tinta);
  stroke-width: 0.8;
}

.perfil-suma {
  fill: var(--tinta);
}

.perfil-resta {
  fill: url(#perfil-rayado);
  stroke: var(--tinta);
  stroke-width: 0.6;
}

.perfil-rayado-linea {
  stroke: var(--tinta);
  stroke-width: 1.2;
}

.perfil-cero {
  stroke: var(--alerta);
  stroke-width: 1.4;
}

.perfil-marca {
  fill: var(--acento);
  stroke: var(--tinta);
  stroke-width: 0.8;
}

.defs-ocultas {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Las piezas de SVG heredan la paleta */

.tinta-relleno {
  fill: var(--tinta);
}

.papel-relleno {
  fill: var(--blanco);
}

.acento-relleno {
  fill: var(--acento);
}

.trazo-tinta {
  stroke: var(--tinta);
  stroke-width: 6;
  stroke-linejoin: round;
}

.glifo {
  font-family: var(--fuente-titulo);
  fill: var(--tinta);
}

/* La comparación de sala: para leerse proyectada, desde el fondo de una sala. Letra grande,
   pocas palabras, alto contraste. Los grupos que eligieron lo mismo comparten una celda. */

.proyeccion {
  font-size: 1.5rem;
}

.proyeccion h1 {
  font-size: 4rem;
}

.comparacion-marco {
  overflow-x: auto;
  margin: 0 0 2rem;
}

.comparacion {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.375rem;
  table-layout: fixed;
}

.comparacion th,
.comparacion td {
  padding: 0.75rem 1rem;
  vertical-align: top;
  line-height: 1.25;
}

.comparacion thead th {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.03em;
  text-align: center;
  background: var(--tinta);
  color: var(--papel);
  overflow-wrap: anywhere;
}

.comparacion tbody th {
  /* contraste: --gris sobre --papel */
  width: 9rem;
  text-align: left;
  font-size: 1.125rem;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.celda {
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.celda-compartida {
  box-shadow: var(--sombra);
}

.letra {
  display: inline-block;
  min-width: 2.5rem;
  margin-right: 0.5rem;
  padding: 0 0.375rem;
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 1.75rem;
  text-align: center;
  background: var(--acento);
  border: var(--trazo-fino) solid var(--tinta);
}

.celda-vacia {
  /* contraste: --gris sobre --blanco, --papel */
  border: var(--trazo-fino) dashed var(--gris);
  color: var(--gris);
  font-weight: 400;
}

.celda-final {
  background: var(--papel-hondo);
}

.celda-perfil .perfil-barra {
  height: 1.5rem;
}

/* Un nodo proyectado solo (tarea 008): el selector, la matriz de elegir varias, los frentes
   vacíos, los niveles de un evento con su ícono, el antes y el después. */
.selector-nodos {
  margin: 0 0 1.5rem;
}

.selector-nodos ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
}

.selector-nodos a {
  display: block;
  padding: 0.25rem 0.875rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--blanco);
  border: var(--trazo-fino) solid var(--tinta);
  border-radius: 2rem;
}

.selector-nodos a[aria-current='page'] {
  background: var(--acento);
  border-width: var(--trazo);
}

.comparacion-matriz thead th:first-child,
.comparacion-lista thead th:first-child {
  width: 14rem;
}

.comparacion-matriz thead th,
.comparacion-lista thead th {
  font-family: var(--fuente-texto);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
}

.comparacion tbody th.grupo-fila,
.comparacion tfoot th {
  /* contraste: --tinta sobre --papel */
  width: 14rem;
  color: var(--tinta);
  font-family: var(--fuente-titulo);
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  overflow-wrap: anywhere;
}

.celda-marca {
  text-align: center;
  vertical-align: middle;
  font-size: 2.25rem;
  font-weight: 900;
}

.celda-total {
  text-align: center;
  font-family: var(--fuente-titulo);
  font-size: 2.5rem;
  font-weight: 400;
  background: var(--crema);
}

.celda-alerta {
  border-style: double;
  border-width: 0.4375rem;
}

.celda-suave {
  font-weight: 400;
}

.lista-celda {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-celda li {
  margin: 0 0 0.25rem;
}

.signo-lista {
  display: inline-block;
  margin-right: 0.5rem;
  font-weight: 900;
}

.leyenda-niveles,
.niveles-grupos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.leyenda-niveles {
  flex-direction: column;
  font-size: 1.125rem;
}

.leyenda-niveles li,
.niveles-grupos li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.niveles-grupos li {
  padding: 0.5rem 1rem;
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
}

.grupo-nombre {
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  letter-spacing: 0.03em;
}

.icono-nivel {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
}

.icono-nivel .trazo-tinta {
  stroke-width: 3.5;
}

.nivel-sin {
  width: 2.75rem;
  text-align: center;
  font-size: 2rem;
}

.control-proyeccion {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  font-size: 1rem;
}

/* ---------------------------------------------------------------------------
 * Las decisiones ricas (tarea 008). Se leen en grupo frente a un notebook, con la escena a la
 * vista: a 1366×768 y a 1920×1080, la escena, todas las opciones y el botón caben sin
 * desplazarse (scripts/web/medir-pliegue.ts).
 * ------------------------------------------------------------------------- */

/* Elegir varias: tarjetas marcables. Lo marcado se distingue por la forma —el borde grueso, la
   sombra y la casilla llena con su ✓—, no sólo por el color. */
.eleccion-varias {
  display: flex;
  flex-direction: column;
  counter-reset: marcadas;
}

.tarjetas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem 0.625rem;
  margin: 0;
  padding: 0.25rem 0 0;
  list-style: none;
}

.tarjetas-dos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tarjeta {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  height: 100%;
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
  border-radius: var(--radio);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.tarjeta input {
  appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
  border-radius: 0.125rem;
  cursor: pointer;
}

.tarjeta input:checked {
  /* contraste: --papel sobre --tinta */
  background: var(--tinta);
}

.tarjeta input:checked::after {
  /* contraste: --papel sobre --tinta */
  content: '✓';
  color: var(--papel);
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1;
}

.tarjeta:has(input:checked) {
  padding: 0.375rem 0.625rem;
  font-weight: 700;
  background: var(--acento);
  border-width: 0.3125rem;
  box-shadow: var(--sombra);
}

.tarjeta:has(input:focus-visible) {
  outline: 0.25rem solid var(--azul);
  outline-offset: 0.1875rem;
}

.tarjeta-texto {
  flex: 1 1 auto;
}

/* El costo, como una etiqueta pegada en el borde de la tarjeta: no le quita ancho al texto. */
.tarjeta-costo {
  position: absolute;
  top: -0.75rem;
  right: 0.5rem;
  padding: 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--papel);
  border: var(--trazo-fino) solid var(--tinta);
}

/* El contador: va después de las tarjetas en el documento —un contador de CSS cuenta en el
   orden del documento— y se muestra arriba. Cada casilla marcada suma su costo; el número lo
   escribe el estilo de contador del presupuesto, `tope-<n>`, que pasado el tope cae en
   `excedido` y pone la cruz. Sin JavaScript. */
.contador {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1rem;
  margin: 0 0 0.5rem;
  padding: 0.25rem 0.75rem;
  background: var(--crema);
  border: var(--trazo) solid var(--tinta);
  font-weight: 700;
}

.contador-pide {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 1.625rem;
  letter-spacing: 0.03em;
}

.contador-cifra {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: 0.03em;
}

.contador-cifra::before {
  content: counter(marcadas);
}

/* Pasado el presupuesto, el número va con su cruz. `prefix` no sirve: `counter()` no lo escribe,
   sólo el marcador de una lista; por eso cada cifra lleva la suya. */
@counter-style excedido {
  system: fixed 1;
  symbols: '✗ 1' '✗ 2' '✗ 3' '✗ 4' '✗ 5' '✗ 6' '✗ 7' '✗ 8' '✗ 9' '✗ 10' '✗ 11' '✗ 12' '✗ 13' '✗ 14' '✗ 15' '✗ 16' '✗ 17' '✗ 18' '✗ 19' '✗ 20' '✗ 21' '✗ 22' '✗ 23' '✗ 24' '✗ 25' '✗ 26' '✗ 27' '✗ 28' '✗ 29' '✗ 30' '✗ 31' '✗ 32' '✗ 33' '✗ 34' '✗ 35' '✗ 36' '✗ 37' '✗ 38' '✗ 39' '✗ 40';
}

@counter-style tope-1 {
  system: extends decimal;
  range: 0 1;
  fallback: excedido;
}

@counter-style tope-2 {
  system: extends decimal;
  range: 0 2;
  fallback: excedido;
}

@counter-style tope-3 {
  system: extends decimal;
  range: 0 3;
  fallback: excedido;
}

@counter-style tope-4 {
  system: extends decimal;
  range: 0 4;
  fallback: excedido;
}

@counter-style tope-5 {
  system: extends decimal;
  range: 0 5;
  fallback: excedido;
}

@counter-style tope-6 {
  system: extends decimal;
  range: 0 6;
  fallback: excedido;
}

@counter-style tope-7 {
  system: extends decimal;
  range: 0 7;
  fallback: excedido;
}

@counter-style tope-8 {
  system: extends decimal;
  range: 0 8;
  fallback: excedido;
}

@counter-style tope-9 {
  system: extends decimal;
  range: 0 9;
  fallback: excedido;
}

@counter-style tope-10 {
  system: extends decimal;
  range: 0 10;
  fallback: excedido;
}

@counter-style tope-11 {
  system: extends decimal;
  range: 0 11;
  fallback: excedido;
}

@counter-style tope-12 {
  system: extends decimal;
  range: 0 12;
  fallback: excedido;
}

.presupuesto-1 .contador-cifra::before {
  content: counter(marcadas, tope-1);
}

.presupuesto-2 .contador-cifra::before {
  content: counter(marcadas, tope-2);
}

.presupuesto-3 .contador-cifra::before {
  content: counter(marcadas, tope-3);
}

.presupuesto-4 .contador-cifra::before {
  content: counter(marcadas, tope-4);
}

.presupuesto-5 .contador-cifra::before {
  content: counter(marcadas, tope-5);
}

.presupuesto-6 .contador-cifra::before {
  content: counter(marcadas, tope-6);
}

.presupuesto-7 .contador-cifra::before {
  content: counter(marcadas, tope-7);
}

.presupuesto-8 .contador-cifra::before {
  content: counter(marcadas, tope-8);
}

.presupuesto-9 .contador-cifra::before {
  content: counter(marcadas, tope-9);
}

.presupuesto-10 .contador-cifra::before {
  content: counter(marcadas, tope-10);
}

.presupuesto-11 .contador-cifra::before {
  content: counter(marcadas, tope-11);
}

.presupuesto-12 .contador-cifra::before {
  content: counter(marcadas, tope-12);
}

.eleccion-varias input:checked {
  counter-increment: marcadas 1;
}

.eleccion-varias input.costo-2:checked {
  counter-increment: marcadas 2;
}

.eleccion-varias input.costo-3:checked {
  counter-increment: marcadas 3;
}

.eleccion-varias input.costo-4:checked {
  counter-increment: marcadas 4;
}

.eleccion-varias input.costo-5:checked {
  counter-increment: marcadas 5;
}

.eleccion-varias input.costo-6:checked {
  counter-increment: marcadas 6;
}

.eleccion-varias input.costo-7:checked {
  counter-increment: marcadas 7;
}

.eleccion-varias input.costo-8:checked {
  counter-increment: marcadas 8;
}

.eleccion-varias input.costo-9:checked {
  counter-increment: marcadas 9;
}

.eleccion-varias input.costo-10:checked {
  counter-increment: marcadas 10;
}

.eleccion-varias input.costo-11:checked {
  counter-increment: marcadas 11;
}

.eleccion-varias input.costo-12:checked {
  counter-increment: marcadas 12;
}

/* Asignar: la grilla de personas por frentes. El pie dice «vacío» bajo cada frente sin nadie:
   se esconde en cuanto una casilla de su columna se marca. Un frente cubierto no tiene
   casillas, y va rayado. */
.grilla {
  width: 100%;
  margin: 0 0 0.5rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.grilla th,
.grilla td {
  padding: 0.25rem 0.375rem;
  text-align: center;
  vertical-align: middle;
  border-bottom: var(--trazo-fino) solid var(--papel-hondo);
}

.grilla thead th {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.1;
  vertical-align: bottom;
  border-bottom: var(--trazo) solid var(--tinta);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.grilla thead th:first-child {
  width: 34%;
}

.grilla tbody th {
  text-align: left;
  font-weight: 700;
}

.persona {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.2;
}

.casilla {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.375rem 0;
  cursor: pointer;
}

.casilla input {
  width: 1.625rem;
  height: 1.625rem;
  margin: 0;
  accent-color: var(--tinta);
  cursor: pointer;
}

.grilla tbody td:has(input:checked) {
  background: var(--acento);
  box-shadow: inset 0 0 0 var(--trazo) var(--tinta);
}

.grilla tbody td.sin-frente:has(input:checked) {
  background: var(--papel-hondo);
  box-shadow: none;
}

.grilla td:has(input:focus-visible) {
  outline: 0.25rem solid var(--azul);
  outline-offset: -0.25rem;
}

.grilla th.sin-frente {
  font-style: italic;
}

.frente-cubierto,
.celda-cubierta {
  background: repeating-linear-gradient(45deg, var(--papel-hondo) 0, var(--papel-hondo) 0.375rem, var(--papel) 0.375rem, var(--papel) 0.75rem);
}

.cubierto-etiqueta {
  /* contraste: --tinta sobre --blanco */
  display: block;
  margin-top: 0.25rem;
  padding: 0.125rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--tinta);
  background: var(--blanco);
  border: var(--trazo-fino) solid var(--tinta);
}

.grilla tfoot th {
  /* contraste: --gris sobre --papel */
  text-align: left;
  font-size: 0.8125rem;
  color: var(--gris);
  border-bottom: 0;
}

.grilla tfoot td {
  border-bottom: 0;
}

.vacio {
  display: inline-block;
  padding: 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  background: var(--blanco);
  border: var(--trazo-fino) dashed var(--tinta);
}

.vacio::before {
  content: '✗ ';
}

.grilla:has(tbody td:nth-child(2) input:checked) tfoot td:nth-child(2) .vacio {
  visibility: hidden;
}

.grilla:not(:has(tbody td:nth-child(2) input:checked)) thead th.frente:nth-child(2):not(.frente-cubierto) {
  border-bottom-style: dashed;
}

.grilla:has(tbody td:nth-child(3) input:checked) tfoot td:nth-child(3) .vacio {
  visibility: hidden;
}

.grilla:not(:has(tbody td:nth-child(3) input:checked)) thead th.frente:nth-child(3):not(.frente-cubierto) {
  border-bottom-style: dashed;
}

.grilla:has(tbody td:nth-child(4) input:checked) tfoot td:nth-child(4) .vacio {
  visibility: hidden;
}

.grilla:not(:has(tbody td:nth-child(4) input:checked)) thead th.frente:nth-child(4):not(.frente-cubierto) {
  border-bottom-style: dashed;
}

.grilla:has(tbody td:nth-child(5) input:checked) tfoot td:nth-child(5) .vacio {
  visibility: hidden;
}

.grilla:not(:has(tbody td:nth-child(5) input:checked)) thead th.frente:nth-child(5):not(.frente-cubierto) {
  border-bottom-style: dashed;
}

.grilla:has(tbody td:nth-child(6) input:checked) tfoot td:nth-child(6) .vacio {
  visibility: hidden;
}

.grilla:not(:has(tbody td:nth-child(6) input:checked)) thead th.frente:nth-child(6):not(.frente-cubierto) {
  border-bottom-style: dashed;
}

.grilla:has(tbody td:nth-child(7) input:checked) tfoot td:nth-child(7) .vacio {
  visibility: hidden;
}

.grilla:not(:has(tbody td:nth-child(7) input:checked)) thead th.frente:nth-child(7):not(.frente-cubierto) {
  border-bottom-style: dashed;
}

.grilla:has(tbody td:nth-child(8) input:checked) tfoot td:nth-child(8) .vacio {
  visibility: hidden;
}

.grilla:not(:has(tbody td:nth-child(8) input:checked)) thead th.frente:nth-child(8):not(.frente-cubierto) {
  border-bottom-style: dashed;
}

.grilla:has(tbody td:nth-child(9) input:checked) tfoot td:nth-child(9) .vacio {
  visibility: hidden;
}

.grilla:not(:has(tbody td:nth-child(9) input:checked)) thead th.frente:nth-child(9):not(.frente-cubierto) {
  border-bottom-style: dashed;
}

.grilla:has(tbody td:nth-child(10) input:checked) tfoot td:nth-child(10) .vacio {
  visibility: hidden;
}

.grilla:not(:has(tbody td:nth-child(10) input:checked)) thead th.frente:nth-child(10):not(.frente-cubierto) {
  border-bottom-style: dashed;
}

/* La cara de una persona o de un personaje: el mismo dibujo del elenco, de los hombros arriba. */
.retrato {
  flex: none;
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--celeste);
  border: var(--trazo-fino) solid var(--tinta);
  border-radius: 50%;
  stroke: var(--tinta);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.retrato-vacio circle,
.retrato-vacio path {
  fill: var(--papel-hondo);
}

/* ---------------------------------------------------------------------------
 * Lo que se muestra del estado: la revelación de las capacidades y dos elecciones lado a lado.
 * Se discuten en grupo: letra grande, pocas palabras, ✓ y ✗ con su palabra.
 * ------------------------------------------------------------------------- */

.revelacion {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border: var(--trazo) solid var(--tinta);
  box-shadow: var(--sombra);
}

.revelacion .antetitulo {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.125rem 0.5rem;
  color: var(--tinta);
  background: var(--papel);
  border: var(--trazo-fino) solid var(--tinta);
}

.revelacion h1 {
  display: block;
  width: fit-content;
  margin: 0;
  padding: 0.25rem 0.75rem;
  font-size: 3.25rem;
  background: var(--papel);
  border: var(--trazo) solid var(--tinta);
}

.revelacion-entrada {
  font-size: 1.25rem;
  font-weight: 700;
}

.capacidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.capacidad {
  padding: 0.75rem 1rem;
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
  box-shadow: var(--sombra);
}

.capacidad-falta {
  background: var(--papel);
  border-style: dashed;
  box-shadow: none;
}

.capacidad-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.5rem;
}

.capacidad-cabeza h2 {
  margin: 0;
  font-size: 2.25rem;
}

.capacidad-signo {
  display: grid;
  place-content: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--papel);
  background: var(--tinta);
  border: var(--trazo) solid var(--tinta);
  border-radius: 50%;
}

.capacidad-falta .capacidad-signo {
  color: var(--tinta);
  background: var(--blanco);
}

.capacidad-estado {
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.origenes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.origenes li {
  padding: 0.375rem 0;
  border-top: var(--trazo-fino) solid var(--papel-hondo);
}

.origen-momento {
  /* contraste: --gris sobre --blanco, --papel */
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gris);
}

.conversar {
  padding: 0.75rem 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  background: var(--crema);
  border-left: 0.5rem solid var(--tinta);
}

.lado-a-lado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin: 0 0 1.25rem;
}

.lado {
  padding: 1rem 1.25rem;
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
  box-shadow: var(--sombra);
}

.lado h2 {
  margin: 0 0 0.5rem;
  font-size: 2.25rem;
}

.lado-situacion {
  /* contraste: --gris sobre --blanco */
  color: var(--gris);
  font-size: 1rem;
}

.lado-partes {
  margin: 0 0 0.5rem;
  padding: 0 0 0 1.25rem;
  font-size: 1.3125rem;
  font-weight: 700;
}

.lado-flecha {
  align-self: center;
  font-family: var(--fuente-titulo);
  font-size: 3.5rem;
}

/* ---------------------------------------------------------------------------
 * La carpeta del caso: un índice numerado y secciones con dirección propia. El texto con forma
 * —tablas, listas, el organigrama en un bloque fijo— se lee con tablas y fuente monoespaciada.
 * ------------------------------------------------------------------------- */

/* La cabecera, con el ancho de toda pantalla de la simulación —con el reloj y un nombre de grupo largo
   queda en una fila (tarea 014)—; el contenido, con su ancho de lectura. */
.carpeta .pagina {
  max-width: 80rem;
}

.carpeta .pagina > main {
  max-width: 62rem;
  margin-inline: auto;
}

.carpeta-cabeza h1 {
  margin-bottom: 0.5rem;
}

.carpeta-indice {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
}

.carpeta-indice h2 {
  margin: 0 0 0.25rem;
}

.carpeta-indice ol {
  margin: 0;
  padding-left: 1.75rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.carpeta-seccion {
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: var(--trazo) solid var(--tinta);
}

.carpeta-seccion h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0;
}

.numero {
  display: inline-grid;
  place-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  color: var(--papel);
  background: var(--tinta);
  border-radius: 50%;
}

.nueva {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.5rem;
  font-family: var(--fuente-texto);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--amarillo);
  border: var(--trazo-fino) solid var(--tinta);
}

.nueva::before {
  content: '★ ';
}

.bitacora {
  margin: 0;
  padding-left: 1.75rem;
}

.bitacora li {
  margin: 0 0 0.5rem;
  padding: 0.25rem 0.5rem;
}

.bitacora .entrada-nueva {
  background: var(--crema);
  border-left: 0.375rem solid var(--tinta);
}

.bitacora .nueva {
  margin: 0 0.5rem 0 0;
}

.forma table {
  margin: 0 0 1rem;
  border-collapse: collapse;
  background: var(--blanco);
}

.forma th,
.forma td {
  padding: 0.375rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border: var(--trazo-fino) solid var(--tinta);
}

.forma th {
  background: var(--papel-hondo);
}

.forma pre {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-family: ui-monospace, 'Cascadia Mono', 'Courier New', monospace;
  font-size: 1rem;
  line-height: 1.35;
  white-space: pre;
  background: var(--blanco);
  border: var(--trazo-fino) solid var(--tinta);
}

.forma ul {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.reparto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reparto li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
}

.reparto .retrato {
  width: 5.5rem;
  height: 5.5rem;
}

.reparto p {
  margin: 0;
}

.reparto-nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.625rem;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

.reparto-cargo {
  /* contraste: --gris sobre --blanco */
  margin-bottom: 0.25rem;
  font-weight: 700;
  color: var(--gris);
}

.carpeta-pasos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Los artefactos (tarea 009): un formulario sobrio, sin escena. Lo de la simulación va rotulado y
 * con un borde grueso a la izquierda; lo que no se puede guardar, con borde de alerta y su texto.
 * El botón de guardar va en una barra pegada al pie: no se pierde de vista en un formulario largo.
 * ------------------------------------------------------------------------- */

/* La cabecera, con el ancho de toda pantalla de la simulación —con el reloj y un nombre de grupo largo
   queda en una fila (tarea 014)—; el contenido, con su ancho de lectura. */
.artefacto .pagina {
  max-width: 80rem;
}

.artefacto .pagina > main {
  max-width: 62rem;
  margin-inline: auto;
}

.carpeta-artefactos,
.descargas {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--crema);
  border: var(--trazo) solid var(--tinta);
}

.carpeta-artefactos h2,
.descargas h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.carpeta-artefactos ul,
.descargas ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 0.25rem;
  padding: 0;
  list-style: none;
  font-weight: 700;
}

.carpeta-artefactos li,
.descargas li,
.descargas a {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.carpeta-artefactos svg,
.descargas svg {
  flex: none;
  width: 1.3125rem;
  height: 1.5rem;
}

.descargas .ayuda {
  /* contraste: --gris sobre --crema */
  margin: 0;
}

.formulario-artefacto {
  margin-top: 1rem;
}

.formulario-artefacto .forma {
  margin-bottom: 1.25rem;
}

.formulario-artefacto legend,
.prellenado h2,
.firmas-artefacto h2 {
  font-family: var(--fuente-texto);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 0.5rem;
}

.campo-artefacto,
.opcion-artefacto,
.tabla-artefacto-marco,
.prellenado,
.firmas-artefacto {
  margin: 0 0 1.5rem;
}

.campo-artefacto label {
  font-size: 1.25rem;
}

.campo-artefacto .ayuda {
  margin: 0.25rem 0 0;
}

.formulario-artefacto textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1.125rem;
  padding: 0.5rem 0.75rem;
  color: var(--tinta);
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
  border-radius: var(--radio);
  resize: vertical;
}

.alternativa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  margin: 0 0 0.375rem;
}

.alternativa input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--tinta);
}

.alternativa:has(input:checked) {
  font-weight: 700;
}

.tabla-marco {
  overflow-x: auto;
}

.tabla-artefacto {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
}

.tabla-artefacto th,
.tabla-artefacto td {
  padding: 0.25rem;
  border: var(--trazo-fino) solid var(--tinta);
  text-align: left;
  vertical-align: middle;
}

.tabla-artefacto thead th {
  background: var(--papel-hondo);
}

.tabla-artefacto input[type='text'] {
  font-size: 1rem;
  padding: 0.375rem 0.5rem;
  border-width: var(--trazo-fino);
}

.prellenado {
  padding: 0.75rem 1.25rem;
  background: var(--blanco);
  border: var(--trazo-fino) solid var(--tinta);
  border-left-width: 0.75rem;
}

.rotulo-simulacion {
  /* contraste: --gris sobre --blanco */
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.prellenado ul {
  margin: 0;
  padding-left: 1.25rem;
  font-style: italic;
}

.prellenado .ayuda {
  /* contraste: --gris sobre --blanco */
  margin: 0;
}

.firmas-artefacto ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

.firmas-artefacto li {
  min-width: 14rem;
  padding-top: 2rem;
  border-bottom: var(--trazo-fino) solid var(--tinta);
  font-weight: 700;
}

.con-error textarea,
.con-error input[type='text'],
.opcion-artefacto.con-error {
  border-color: var(--alerta);
  border-width: var(--trazo);
}

.opcion-artefacto.con-error {
  padding: 0.5rem;
  border-style: solid;
}

.error-campo {
  font-weight: 700;
  margin: 0.25rem 0 0;
}

.error-campo::before {
  content: '▲ ';
}

.barra-guardar {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
  margin: 1rem 0 0;
  padding: 0.25rem 0;
  background: var(--papel);
  border-top: var(--trazo) solid var(--tinta);
}

.barra-guardar .ayuda {
  /* contraste: --gris sobre --papel */
  margin: 0;
}

.no-guardado {
  margin: 1.5rem 0 0;
  padding: 0.75rem 1.25rem;
  background: var(--blanco);
  border: var(--trazo) dashed var(--tinta);
}

.no-guardado h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.no-guardado dd {
  margin: 0 0 0.75rem;
  white-space: pre-wrap;
}

/* La consola: el estado de cada artefacto va en palabras y con un signo, no con un color. */
.tabla-artefactos .signo-estado {
  font-weight: 700;
}

.tabla-artefactos .estado-con-contenido {
  font-weight: 700;
}

.descarga-sala {
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
}

/* En papel: sin cabecera ni botones, en blanco y negro, con un salto por sección. */
@media print {
  body {
    color: var(--tinta);
    background: var(--blanco);
    font-size: 11pt;
  }

  .cabecera,
  .pie,
  .acciones,
  .carpeta-pasos,
  .descargas,
  .barra-guardar,
  .no-imprimir,
  .boton,
  .boton-salir,
  .boton-cabecera {
    display: none;
  }

  .pagina,
  .carpeta .pagina {
    max-width: none;
    padding: 0;
  }

  .carpeta-indice,
  .reparto li,
  .forma pre,
  .forma table {
    background: var(--blanco);
    box-shadow: none;
  }

  .carpeta-seccion {
    break-before: page;
    margin-top: 0;
    border-top: 0;
  }

  .carpeta-seccion h2 a {
    text-decoration: none;
  }

  .numero {
    color: var(--tinta);
    background: var(--blanco);
    border: var(--trazo-fino) solid var(--tinta);
  }

  .nueva,
  .bitacora .entrada-nueva,
  .forma th {
    background: var(--blanco);
  }

  .reparto li,
  .forma pre,
  .forma table,
  .bitacora li {
    break-inside: avoid;
  }

  .retrato {
    filter: grayscale(1);
  }
}

@media (max-width: 40em) {
  .vineta-cuadro {
    padding: 1rem;
  }

  .vineta-estallido {
    width: 4.5rem;
    height: 4.5rem;
  }

  .vineta-globos {
    padding: 1.25rem 1rem 1.5rem;
  }

  .globo-cuerpo {
    font-size: 1.1875rem;
  }
}

/*
 * Simula · la escena (tarea 005). Cada momento de la simulación como una viñeta de cómic
 * grande: el recuadro del narrador, la franja de los globos, el dibujo y los nombres de quienes
 * están en escena. El dibujo es un SVG en línea que nombra las piezas del sprite; las piezas no
 * traen color y lo heredan de las clases de abajo, que sólo nombran variables de base.css.
 *
 * LA ANIMACIÓN va toda dentro de `prefers-reduced-motion: no-preference`: con `reduce`, nada
 * se mueve y la escena se ve completa, porque ninguna regla de fuera la esconde para después
 * mostrarla. Es corta —de medio segundo a un segundo y medio— y termina; la única que se repite
 * es la luz de la alarma, y es discreta. Lo comprueba la puerta de movimiento reducido.
 */

.escenica .pagina {
  max-width: 80rem;
  padding-top: 1.25rem;
}

.escenica .cabecera {
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
}

.escena {
  position: relative;
  margin: 0 0 1.5rem;
  background: var(--papel);
  border: var(--trazo) solid var(--tinta);
  box-shadow: var(--sombra);
}

.escena.con-borde-grueso {
  border-width: 0.5rem;
}

/* El narrador: el recuadro amarillo de la esquina. */
.escena-narrador {
  display: inline-block;
  margin: 0;
  padding: 0.375rem 1rem;
  color: var(--tinta);
  background: var(--amarillo);
  border-right: var(--trazo) solid var(--tinta);
  border-bottom: var(--trazo) solid var(--tinta);
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

/* La viñeta de consecuencia: un solo marco con el recuadro del narrador —lo que eligieron y lo
   que pasó— y la escena. Dentro, la escena pierde su propio borde y sus placas de nombre: la
   única capa de texto fuera de los globos es el narrador (tarea 006). */
.vineta-consecuencia {
  margin: 0 0 1.5rem;
  background: var(--papel);
  border: var(--trazo) solid var(--tinta);
  box-shadow: var(--sombra);
}

.vineta-consecuencia .escena {
  margin: 0;
  border: 0;
  box-shadow: none;
}

.vineta-consecuencia .escena-reparto {
  display: none;
}

/* El relato: con la letra del texto, no la de título: son frases. */
.escena-relato {
  display: block;
  padding: 0.75rem 1.125rem;
  border-right: 0;
  border-bottom: var(--trazo) solid var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

.escena-relato p {
  margin: 0 0 0.375rem;
}

.escena-relato p:last-child {
  margin-bottom: 0;
}

.escena-relato .antetitulo {
  color: var(--tinta); /* contraste: --tinta sobre --amarillo */
  margin-bottom: 0.125rem;
}

.relato-eleccion {
  padding-bottom: 0.375rem;
  border-bottom: var(--trazo-fino) solid var(--tinta);
}

.relato-diferida {
  padding-left: 0.75rem;
  border-left: 0.375rem double var(--tinta);
}

.relato-diferida .antetitulo::before {
  content: '↳ ';
}

/* Los globos van en una franja arriba del dibujo, uno por zona, con la cola hacia quien habla:
   así ningún texto tapa una cara, y un texto largo no se sale de la viñeta. */
.escena-globos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1.5rem;
  align-items: end;
  padding: 0.875rem 1rem 1.375rem;
}

.escena-globos > .en-izquierda {
  grid-column: 1;
}

.escena-globos > .en-centro {
  grid-column: 2;
}

.escena-globos > .en-derecha {
  grid-column: 3;
}

.globo-escena {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.625rem 0.875rem;
  color: var(--tinta);
  background: var(--blanco);
  border: var(--trazo) solid var(--tinta);
  border-radius: 1.25rem;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* La cola del globo de diálogo: dos triángulos, el de tinta y el blanco encima. */
.globo-escena::before,
.globo-escena::after {
  content: '';
  position: absolute;
  left: var(--cola, 50%);
  border-style: solid;
  border-color: transparent;
}

.globo-escena::before {
  bottom: -1.5rem;
  margin-left: -0.875rem;
  border-width: 1.5rem 0.875rem 0;
  border-top-color: var(--tinta);
}

.globo-escena::after {
  bottom: -1.0625rem;
  margin-left: -0.5625rem;
  border-width: 1.125rem 0.5625rem 0;
  border-top-color: var(--blanco);
}

/* El de pensamiento se distingue por la forma: la nube redonda y dos burbujas por cola. */
.globo-pensamiento {
  border-radius: 2.5rem;
  font-style: italic;
}

.globo-pensamiento::before,
.globo-pensamiento::after {
  border: var(--trazo) solid var(--tinta);
  border-radius: 50%;
  background: var(--blanco);
}

.globo-pensamiento::before {
  bottom: -1.25rem;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: -0.5rem;
}

.globo-pensamiento::after {
  bottom: -2rem;
  width: 0.625rem;
  height: 0.625rem;
  margin-left: 0.25rem;
}

.cola-izquierda {
  --cola: 38%;
}

.cola-centro-izquierda {
  --cola: 88%;
}

.cola-centro {
  --cola: 50%;
}

.cola-centro-derecha {
  --cola: 12%;
}

.cola-derecha {
  --cola: 62%;
}

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El dibujo */
.escena-arte {
  position: relative;
  overflow: hidden;
  border-top: var(--trazo) solid var(--tinta);
}

.escena-dibujo {
  display: block;
  width: 100%;
  height: auto;
  stroke: var(--tinta);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Tarea 015: el velo sobre un fondo ilustrado, para que el elenco destaque en el proyector. Sólo va
   con personajes en escena; el personaje, encima, no se toca. */
.velo {
  stroke: none;
}

.velo-claro {
  fill: var(--papel);
  opacity: 0.45;
}

.velo-oscuro {
  fill: var(--tinta);
  opacity: 0.45;
}

/* La trama de puntos, sobre el dibujo entero. */
.con-trama::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--tinta) 16%, transparent 19%);
  background-size: 0.5rem 0.5rem;
  opacity: 0.1;
  pointer-events: none;
}

.onomatopeya-texto {
  font-family: var(--fuente-titulo);
  fill: var(--tinta); /* contraste: --tinta sobre --amarillo */
  stroke: none;
  letter-spacing: 0.02em;
}

/* Los nombres: placas sobre la mesa, bajo cada personaje. */
.escena-reparto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3%;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.2;
}

.escena-reparto > li {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  max-width: 17%;
  padding: 0.1875rem 0.625rem;
  color: var(--tinta);
  background: var(--blanco);
  border: var(--trazo-fino) solid var(--tinta);
  border-radius: var(--radio);
  text-align: center;
  font-size: 0.9375rem;
}

.escena-reparto strong,
.escena-reparto span {
  display: block;
  overflow-wrap: break-word;
  hyphens: auto;
}

.escena-reparto span {
  color: var(--gris); /* contraste: --gris sobre --blanco */
  font-size: 0.8125rem;
}

.escena-reparto > .en-izquierda {
  left: 13.75%;
}

.escena-reparto > .en-centro-izquierda {
  left: 31.875%;
}

.escena-reparto > .en-centro {
  left: 50%;
}

.escena-reparto > .en-centro-derecha {
  left: 68.125%;
}

.escena-reparto > .en-derecha {
  left: 86.25%;
}

/* La decisión: la escena a la izquierda, grande, y a la derecha la situación y las opciones.
   Así, a 1366×768 y a 1920×1080, la escena y todas las opciones se ven juntas sin desplazarse
   (tarea 006; se mide con scripts/web/medir-pliegue.ts). En angosto, una debajo de la otra. */
.decision {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(19rem, 1fr);
  gap: 0 1.5rem;
  align-items: start;
}

.decision-escena .escena {
  margin-bottom: 0;
}

.decision-escena .escena-reparto > li {
  max-width: 21%;
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
}

.decision-escena .escena-reparto span {
  font-size: 0.75rem;
}

.decision-escena .globo-escena {
  font-size: 1.0625rem;
  padding: 0.5rem 0.75rem;
}

.decision .situacion {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.decision legend {
  margin-bottom: 0.5rem;
}

.decision .opciones {
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.decision .opcion {
  padding: 0.625rem 0.875rem;
}

.decision .nota-confirmar {
  margin-top: 0.25rem;
  font-size: 1rem;
}

/* La confirmación: el botón y, al lado, que no se deshace. */
.confirmar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
}

.confirmar .boton {
  margin: 0.25rem 0 0;
}

.confirmar .nota-confirmar {
  margin: 0.25rem 0 0;
}

/* Bajo la escena, discretos: volver a ver lo último que se contó, ver las capacidades. */
.enlaces-discretos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0.625rem 0 0;
  font-size: 0.9375rem;
}

/* Las decisiones ricas (tarea 008): la escena más chica, y lo que se elige más ancho —las
   tarjetas en dos columnas, la grilla entera—, para que todo quepa en el pliegue. Las reglas
   llevan `.escenica` delante para ganarle a las de la pantalla escénica, que vienen después. */
.escenica .decision-rica {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
}

.escenica .decision-varias:has(.tarjetas-dos) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
}

.escenica .decision-asignacion {
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 2fr);
}

.escenica .decision-rica .situacion {
  font-size: 1.0625rem;
  line-height: 1.35;
  margin-bottom: 0.375rem;
}

.escenica .decision-rica .rotulo-escena {
  margin-bottom: 0.25rem;
}

.escenica .decision-rica .rotulo-escena h1 {
  font-size: 1.875rem;
}

.escenica .decision-rica legend {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.escenica .decision-rica fieldset {
  margin-bottom: 0.5rem;
}

.escenica .decision-rica .ayuda {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
}

.escenica .decision-rica .tarjeta {
  font-size: 1rem;
  line-height: 1.25;
}

.escenica .decision-rica .escena-globos {
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.625rem 1.125rem;
}

.escenica .decision-rica .globo-escena {
  font-size: 0.9375rem;
  padding: 0.375rem 0.625rem;
}

.escenica .decision-rica .escena-narrador {
  font-size: 1.125rem;
}

/* Elegir una con opciones largas (tarea 010): la opción, más compacta, como la tarjeta. */
.escenica .decision-rica .opcion {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.3;
}

/* En la escena chica, la placa lleva sólo el nombre: el cargo ya se leyó en la carpeta. */
.escenica .decision-rica .escena-reparto span {
  display: none;
}

/* La página de cómic: una viñeta por opción elegida o por frente. Desde la tarea 014, todas en una
   sola página que se baja con la rueda: de a dos por fila —de a una si el ancho no da—; una sola, de
   lado. */
.comic {
  display: grid;
  gap: 1rem;
  margin: 0 auto 0.75rem;
}

/* Una viñeta sola (tarea 011, la página por lo que ocupa): el texto a la izquierda y la escena a la
   derecha, para que un relato largo del guion quepa sin desplazarse y sin achicar la letra. Desde la
   tarea 013, con `.comic` delante: `.comic .panel`, que va después, la dejaba en columna. Lo mismo la
   viñeta de elegir una contada en tres partes (`.vineta-lado`). */
.comic.comic-1 .panel,
.vineta-consecuencia.vineta-lado {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.comic.comic-1 .escena-relato,
.vineta-lado .escena-relato {
  flex: 1 1 0;
  border-bottom: 0;
  border-right: var(--trazo) solid var(--tinta);
}

.comic.comic-1 .escena,
.vineta-lado .escena {
  flex: 0 0 46%;
  margin-top: 0;
  align-self: center;
}

/* Al lado de la escena, el texto va en la letra del cómic (tarea 013), y los globos, como en el cómic.
   El relato de lado usa el ancho entero: su texto necesita la columna. */
.vineta-lado .escena-relato {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.3;
}

.vineta-lado .escena-globos {
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 1.125rem;
}

.vineta-lado .globo-escena {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

.vineta-relato.vineta-lado,
.vineta-relato.vineta-lado + .seguir {
  max-width: none;
}

.comic-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


.comic .panel {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.comic .escena-relato {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.3;
}

.comic .escena-globos {
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 1.125rem;
}

.comic .globo-escena {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

.comic .escena {
  margin-top: auto;
}

.paginas {
  margin-left: auto;
}

/* El botón para avanzar, pegado al pie de la ventana mientras se lee (tarea 014), como la
   confirmación de una decisión: el texto baja con la rueda y el botón no se pierde de vista. */
.seguir {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 0.375rem 0 0.5rem;
  background: var(--papel);
  border-top: var(--trazo) solid var(--tinta);
}

/* El relato: una viñeta grande con su narrador. Desde la tarea 014 su ancho ya no se ajusta al alto
   de la ventana: si no cabe, se baja con la rueda. */
.vineta-relato {
  max-width: 76rem;
  margin-inline: auto;
}

.vineta-relato + .seguir {
  max-width: 76rem;
  margin-inline: auto;
}

.vineta-relato .escena-relato .situacion {
  margin: 0 0 0.375rem;
  font-size: 1.3125rem;
}

@media (max-width: 60em) {
  .decision {
    display: block;
  }

  .tarjetas-dos,
  .comic-2,
  .lado-a-lado {
    grid-template-columns: minmax(0, 1fr);
  }

  .decision-escena {
    margin-bottom: 1rem;
  }
}

.rotulo-escena {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
  margin: 0 0 0.75rem;
}

.rotulo-escena h1 {
  margin: 0;
  font-size: 2.25rem;
}

.rotulo-escena .antetitulo {
  margin: 0;
}

/* Bajo la escena, la situación y las opciones: las opciones en dos columnas si caben. */
.escenica .opciones {
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
}

.escenica .situacion {
  font-size: 1.5rem;
}

/* Los colores del dibujo: cada pieza del sprite hereda relleno (`f-`) y detalle (`c-`). */

.f-tinta {
  fill: var(--tinta);
}

.f-papel {
  fill: var(--papel);
}

.f-blanco {
  fill: var(--blanco);
}

.f-gris {
  fill: var(--gris);
}

.f-gris-medio {
  fill: var(--gris-medio);
}

.f-amarillo {
  fill: var(--amarillo);
}

.f-rojo {
  fill: var(--rojo);
}

.f-azul {
  fill: var(--azul);
}

.f-verde {
  fill: var(--verde);
}

.f-morado {
  fill: var(--morado);
}

.f-naranjo {
  fill: var(--naranjo);
}

.f-turquesa {
  fill: var(--turquesa);
}

.f-rosa {
  fill: var(--rosa);
}

.f-celeste {
  fill: var(--celeste);
}

.f-menta {
  fill: var(--menta);
}

.f-lila {
  fill: var(--lila);
}

.f-durazno {
  fill: var(--durazno);
}

.f-crema {
  fill: var(--crema);
}

.f-rosado {
  fill: var(--rosado);
}

.f-arena {
  fill: var(--arena);
}

.f-madera {
  fill: var(--madera);
}

.f-madera-honda {
  fill: var(--madera-honda);
}

.f-metal {
  fill: var(--metal);
}

.f-metal-hondo {
  fill: var(--metal-hondo);
}

.f-pantalla {
  fill: var(--pantalla);
}

.f-verde-luz {
  fill: var(--verde-luz);
}

.f-piel-1 {
  fill: var(--piel-1);
}

.f-piel-2 {
  fill: var(--piel-2);
}

.f-piel-3 {
  fill: var(--piel-3);
}

.f-piel-4 {
  fill: var(--piel-4);
}

.f-piel-5 {
  fill: var(--piel-5);
}

.f-piel-6 {
  fill: var(--piel-6);
}

.f-pelo-negro {
  fill: var(--pelo-negro);
}

.f-pelo-castano {
  fill: var(--pelo-castano);
}

.f-pelo-rubio {
  fill: var(--pelo-rubio);
}

.f-pelo-pelirrojo {
  fill: var(--pelo-pelirrojo);
}

.f-pelo-canoso {
  fill: var(--pelo-canoso);
}

.f-piel-1-sombra {
  fill: var(--piel-1-sombra);
}

.f-piel-2-sombra {
  fill: var(--piel-2-sombra);
}

.f-piel-3-sombra {
  fill: var(--piel-3-sombra);
}

.f-piel-4-sombra {
  fill: var(--piel-4-sombra);
}

.f-piel-5-sombra {
  fill: var(--piel-5-sombra);
}

.f-piel-6-sombra {
  fill: var(--piel-6-sombra);
}

.f-pelo-negro-sombra {
  fill: var(--pelo-negro-sombra);
}

.f-pelo-castano-sombra {
  fill: var(--pelo-castano-sombra);
}

.f-pelo-canoso-sombra {
  fill: var(--pelo-canoso-sombra);
}

.f-pelo-pelirrojo-sombra {
  fill: var(--pelo-pelirrojo-sombra);
}

.f-pelo-rubio-sombra {
  fill: var(--pelo-rubio-sombra);
}

.f-azul-sombra {
  fill: var(--azul-sombra);
}

.f-turquesa-sombra {
  fill: var(--turquesa-sombra);
}

.f-verde-sombra {
  fill: var(--verde-sombra);
}

.f-morado-sombra {
  fill: var(--morado-sombra);
}

.f-rojo-sombra {
  fill: var(--rojo-sombra);
}

.f-blanco-sombra {
  fill: var(--blanco-sombra);
}

.f-celeste-sombra {
  fill: var(--celeste-sombra);
}

.f-traje {
  fill: var(--traje);
}

.f-traje-sombra {
  fill: var(--traje-sombra);
}

.f-camel {
  fill: var(--camel);
}

.f-camel-sombra {
  fill: var(--camel-sombra);
}

.f-petroleo {
  fill: var(--petroleo);
}

.f-petroleo-sombra {
  fill: var(--petroleo-sombra);
}

.f-mostaza {
  fill: var(--mostaza);
}

.f-mostaza-sombra {
  fill: var(--mostaza-sombra);
}

.f-boca {
  fill: var(--boca);
}

.f-labios {
  fill: var(--labios);
}

.c-tinta {
  color: var(--tinta);
}

.c-papel {
  color: var(--papel);
}

.c-blanco {
  color: var(--blanco);
}

.c-gris {
  color: var(--gris);
}

.c-gris-medio {
  color: var(--gris-medio);
}

.c-amarillo {
  color: var(--amarillo);
}

.c-rojo {
  color: var(--rojo);
}

.c-azul {
  color: var(--azul);
}

.c-verde {
  color: var(--verde);
}

.c-morado {
  color: var(--morado);
}

.c-naranjo {
  color: var(--naranjo);
}

.c-turquesa {
  color: var(--turquesa);
}

.c-rosa {
  color: var(--rosa);
}

.c-celeste {
  color: var(--celeste);
}

.c-menta {
  color: var(--menta);
}

.c-lila {
  color: var(--lila);
}

.c-durazno {
  color: var(--durazno);
}

.c-crema {
  color: var(--crema);
}

.c-rosado {
  color: var(--rosado);
}

.c-arena {
  color: var(--arena);
}

.c-madera {
  color: var(--madera);
}

.c-madera-honda {
  color: var(--madera-honda);
}

.c-metal {
  color: var(--metal);
}

.c-metal-hondo {
  color: var(--metal-hondo);
}

.c-pantalla {
  color: var(--pantalla);
}

.c-verde-luz {
  color: var(--verde-luz);
}

.c-piel-1 {
  color: var(--piel-1);
}

.c-piel-2 {
  color: var(--piel-2);
}

.c-piel-3 {
  color: var(--piel-3);
}

.c-piel-4 {
  color: var(--piel-4);
}

.c-piel-5 {
  color: var(--piel-5);
}

.c-piel-6 {
  color: var(--piel-6);
}

.c-pelo-negro {
  color: var(--pelo-negro);
}

.c-pelo-castano {
  color: var(--pelo-castano);
}

.c-pelo-rubio {
  color: var(--pelo-rubio);
}

.c-pelo-pelirrojo {
  color: var(--pelo-pelirrojo);
}

.c-pelo-canoso {
  color: var(--pelo-canoso);
}

.c-piel-1-sombra {
  color: var(--piel-1-sombra);
}

.c-piel-2-sombra {
  color: var(--piel-2-sombra);
}

.c-piel-3-sombra {
  color: var(--piel-3-sombra);
}

.c-piel-4-sombra {
  color: var(--piel-4-sombra);
}

.c-piel-5-sombra {
  color: var(--piel-5-sombra);
}

.c-piel-6-sombra {
  color: var(--piel-6-sombra);
}

.c-pelo-negro-sombra {
  color: var(--pelo-negro-sombra);
}

.c-pelo-castano-sombra {
  color: var(--pelo-castano-sombra);
}

.c-pelo-canoso-sombra {
  color: var(--pelo-canoso-sombra);
}

.c-pelo-pelirrojo-sombra {
  color: var(--pelo-pelirrojo-sombra);
}

.c-pelo-rubio-sombra {
  color: var(--pelo-rubio-sombra);
}

.c-azul-sombra {
  color: var(--azul-sombra);
}

.c-turquesa-sombra {
  color: var(--turquesa-sombra);
}

.c-verde-sombra {
  color: var(--verde-sombra);
}

.c-morado-sombra {
  color: var(--morado-sombra);
}

.c-rojo-sombra {
  color: var(--rojo-sombra);
}

.c-blanco-sombra {
  color: var(--blanco-sombra);
}

.c-celeste-sombra {
  color: var(--celeste-sombra);
}

.c-traje {
  color: var(--traje);
}

.c-traje-sombra {
  color: var(--traje-sombra);
}

.c-camel {
  color: var(--camel);
}

.c-camel-sombra {
  color: var(--camel-sombra);
}

.c-petroleo {
  color: var(--petroleo);
}

.c-petroleo-sombra {
  color: var(--petroleo-sombra);
}

.c-mostaza {
  color: var(--mostaza);
}

.c-mostaza-sombra {
  color: var(--mostaza-sombra);
}

.c-boca {
  color: var(--boca);
}

.c-labios {
  color: var(--labios);
}

/* La animación: sólo con movimiento permitido. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes escena-entra {
    from {
      opacity: 0;
      transform: scale(0.94);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes globo-entra {
    from {
      opacity: 0;
      transform: translateY(0.75rem) scale(0.9);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes personaje-reacciona {
    0%,
    100% {
      transform: none;
    }

    30% {
      transform: translateY(-22px);
    }

    60% {
      transform: none;
    }

    80% {
      transform: translateY(-7px);
    }
  }

  @keyframes estallido-rebota {
    0% {
      transform: scale(0);
    }

    60% {
      transform: scale(1.18);
    }

    80% {
      transform: scale(0.94);
    }

    100% {
      transform: none;
    }
  }

  @keyframes alarma-parpadea {
    50% {
      opacity: 0.3;
    }
  }

  @keyframes crisis-tiembla {
    0%,
    100% {
      transform: none;
    }

    20% {
      transform: translateX(-9px);
    }

    40% {
      transform: translateX(9px);
    }

    60% {
      transform: translateX(-6px);
    }

    80% {
      transform: translateX(4px);
    }
  }

  @keyframes lineas-salen {
    from {
      opacity: 0;
      transform: scale(0.7);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  .anima-entrada .escena-arte {
    animation: escena-entra 0.6s ease-out both;
  }

  .anima-entrada .globo-escena,
  .anima-entrada .escena-narrador {
    animation: globo-entra 0.5s ease-out 0.35s both;
  }

  .anima-reaccion .personaje {
    animation: personaje-reacciona 0.8s ease-out 0.25s both;
  }

  .anima-rebote .onomatopeya {
    transform-box: fill-box;
    transform-origin: center;
    animation: estallido-rebota 0.7s ease-out 0.3s both;
  }

  .anima-parpadeo .alarma-luz {
    animation: alarma-parpadea 1.2s ease-in-out infinite;
  }

  .anima-temblor .escena-dibujo {
    animation: crisis-tiembla 0.6s linear 0.15s both;
  }

  .anima-movimiento .lineas,
  .anima-movimiento .timbre,
  .anima-movimiento .prisa {
    transform-box: fill-box;
    transform-origin: center;
    animation: lineas-salen 0.5s ease-out 0.3s both;
  }
}

@media (max-width: 40em) {
  .escena-globos {
    grid-template-columns: 1fr;
  }

  .escena-globos > .en-izquierda,
  .escena-globos > .en-centro,
  .escena-globos > .en-derecha {
    grid-column: 1;
  }

  .escena-reparto {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    border-top: var(--trazo) solid var(--tinta);
  }

  .escena-reparto > li {
    position: static;
    max-width: none;
    transform: none;
  }

  .escenica .situacion {
    font-size: 1.25rem;
  }
}

/* ---------------------------------------------------------------------------
   La pantalla que se lee sola (tarea 012): el encabezado con el título, el día y la hora; los
   bloques —la situación, lo que se arriesga, el dilema— con su rótulo; la instrucción en la
   leyenda; cada opción con su texto en negrita y su línea debajo. El texto puede bajar con la
   rueda, nunca hacia el lado, y el botón de confirmar queda siempre a la vista, pegado al pie.
   Va al final de la última hoja para ganar a las reglas de igual peso de antes.
   --------------------------------------------------------------------------- */

.encabezado-decision {
  margin: 0 0 0.5rem;
}

.encabezado-decision h1 {
  margin: 0;
  font-size: 1.875rem;
  line-height: 1.1;
}

.encabezado-decision .cuando {
  /* contraste: --tinta sobre --papel */
  margin: 0.125rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tinta);
}

.bloque {
  margin: 0 0 0.625rem;
  font-size: 1.0625rem;
  line-height: 1.4;
}

.bloque-rotulo {
  margin: 0 0 0.125rem;
  font-family: var(--fuente-texto);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bloque p,
.bloque ul {
  margin: 0 0 0.375rem;
}

.bloque ul {
  padding-left: 1.25rem;
}

/* La instrucción, en letra de texto: la negrita es la que trae el adjunto («**Elijan dos.** Corregir…»). */
.escenica .decision-pantalla legend.instruccion {
  font-family: var(--fuente-texto);
  font-size: 1.1875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.decision-pantalla legend.instruccion strong {
  font-weight: 700;
}

.opcion-principal {
  display: block;
  font-weight: 700;
}

.opcion-linea {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875em;
  font-weight: 400;
  line-height: 1.3;
}

.grilla-nombre {
  display: block;
}

.frente-linea,
.persona-linea {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  overflow-wrap: normal;
  hyphens: manual;
}

/* La confirmación, pegada al pie de la ventana mientras se lee: nunca se pierde de vista. */
.decision .confirmar {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: 0.375rem 0 0.5rem;
  background: var(--papel);
  border-top: var(--trazo) solid var(--tinta);
}

/* Nada se sale hacia el lado: la columna de lo que se elige se ajusta a su ancho. */
.decision-opciones {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Las placas de nombre de la escena chica (tarea 012): el nombre en una o dos líneas enteras, sin
   partir palabras. La placa es al menos tan ancha como su palabra más larga. */
.escena-reparto > li {
  min-width: min-content;
}

.escena-reparto strong,
.escena-reparto span {
  overflow-wrap: normal;
  hyphens: manual;
}

/* El relato que se lee solo: el prólogo y los resúmenes de sesión. El texto a la izquierda, en letra
   de texto, con su negrita; la escena —o las caras del reparto— a la derecha. */
.vineta-pantalla {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  max-width: none;
}

.vineta-pantalla .texto-pantalla {
  flex: 1 1 0;
  border-bottom: 0;
  border-right: var(--trazo) solid var(--tinta);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
}

.texto-pantalla p,
.texto-pantalla ul {
  margin: 0 0 0.5rem;
}

.texto-pantalla ul {
  padding-left: 1.25rem;
}

.vineta-pantalla > .escena {
  flex: 0 0 46%;
  align-self: center;
}

.vineta-pantalla + .seguir {
  max-width: none;
}

.presentacion {
  flex: 0 0 52%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0.625rem;
  list-style: none;
}

.presentacion li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25;
}

.presentacion .retrato {
  width: 2.75rem;
  height: 2.75rem;
}

.presentacion-texto strong {
  display: block;
}

@media (max-width: 60em) {
  .vineta-pantalla {
    flex-direction: column;
  }

  .vineta-pantalla .texto-pantalla {
    border-right: 0;
    border-bottom: var(--trazo) solid var(--tinta);
  }
}

/* El prólogo, al principio de la carpeta de material de sala: una página. */
.carpeta-prologo .prologo-pantalla {
  margin: 0 0 1rem;
}

.carpeta-prologo h2 {
  margin: 0 0 0.25rem;
}

.reparto-prologo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
}

.reparto-prologo li {
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.reparto-prologo .retrato {
  width: 2.25rem;
  height: 2.25rem;
}

@media print {
  .carpeta-prologo {
    break-after: page;
    font-size: 0.8125rem;
  }

  .carpeta-prologo .prologo-pantalla {
    margin: 0 0 0.375rem;
  }

  .carpeta-prologo p {
    margin: 0 0 0.25rem;
  }
}

/* Tarea 013: la consecuencia en tres partes. Cada parte con su rótulo; «se llevan», destacado, cierra
   la viñeta. Lo que faltó, en lista; lo que va al pie, aparte. */
.parte {
  margin: 0 0 0.375rem;
}

.parte p {
  margin: 0 0 0.25rem;
}

.parte-rotulo,
.bloque-balance .parte-rotulo {
  margin: 0 0 0.125rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.parte-se-llevan {
  margin: 0.375rem 0 0;
  padding: 0.375rem 0.5rem;
  background: var(--crema);
  color: var(--tinta);
  border-left: 0.25rem solid var(--tinta);
}

.parte-se-llevan p:last-child,
.parte p:last-child {
  margin-bottom: 0;
}

.parte-faltas ul,
.bloque-balance ul {
  margin: 0;
  padding-left: 1.1rem;
}

.parte-faltas {
  margin-top: 0.5rem;
}

.al-pie {
  margin: 0.5rem 0 0;
  font-style: italic;
}

.bloque-balance {
  margin: 0 0 0.5rem;
}

/* Tarea 013: «Lo que les pasó» de cada grupo, lado a lado, para proyectarlo en la pausa. */
.comparacion-balance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
}

.balance-grupo {
  padding: 0.5rem 0.75rem;
  background: var(--papel);
  color: var(--tinta);
  border: var(--trazo) solid var(--tinta);
}

.balance-grupo h3 {
  margin: 0 0 0.375rem;
}

@media (max-width: 60em) {
  .vineta-consecuencia.vineta-lado {
    flex-direction: column;
  }

  .vineta-lado .escena-relato {
    border-right: 0;
    border-bottom: var(--trazo) solid var(--tinta);
  }
}