@charset "utf-8";
/* ============================================================
   modulos/mirar.css — el vocabulario con imágenes (#imagenes).

   Se carga después de base.css, panel.css y app.css. Solo lo que es de
   esta área: la cabecera de pantalla, las tarjetas, los botones, las
   opciones de respuesta (`.opcion`) y la barra de progreso ya vienen de la
   plantilla y aquí se usan tal cual.

   El color no se escribe: `t-imagenes` pone en la vista la familia del
   turquesa de Mirar (`--seccion`, `--seccion-tinta`, `--seccion-lavado`…) y
   todo lo de aquí la hereda. Por eso las mismas reglas valen en claro y en
   oscuro sin una línea por tema, salvo el tono de la piel, el pelo y la
   madera de los dibujos (ver «Los dibujos del vocabulario», al final).

   El dibujo manda en esta pantalla: es lo primero que se ve y ocupa más que
   el texto, porque la gracia es asociar la imagen al concepto sin pasar por
   la traducción. Por eso el español va abajo y pequeño.
   ============================================================ */

/* ============================================================
   1. Mientras carga
   ============================================================ */
/* Las piezas grises tienen el tamaño de lo que va a llegar: sin eso la
   rejilla aparece de golpe y empuja todo lo de abajo. */
.tk-img-esqueleto {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.tk-img-esqueleto .cargando {
  display: block; min-width: 0; height: 15rem; border-radius: var(--r-xl);
}

/* ============================================================
   2. El control segmentado y los chips

   El segmentado —el nivel en la portada y el modo dentro de una lección— es
   la pieza común `.segmentado` de app.css (§12), la misma del filtro de
   Vídeos, los modos de Pronunciar, el tema del perfil y la foto de Mis
   clases: aquí solo va dónde se coloca. El filtro de nivel lleva
   `.segmentado-filas` (en el móvil, filas de cuatro) y cada nivel su `.n-*`,
   así que el filo del elegido es el color de su escalón. Los chips son para
   saltar entre lecciones dentro de una, con la forma de los de Jugar y
   Escuchar: elegido, se rellena del color. Con el filo solo, a un palmo no se
   veía cuál estaba puesto.
   ============================================================ */
.tk-img-filtro { margin-bottom: var(--e-5); }
.tk-img-chip {
  flex: none; min-height: 2.75rem; padding: 0 1.125rem;
  font: inherit; font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  color: var(--tinta); background: var(--papel);
  border: 2px solid var(--linea); border-radius: var(--r-full); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tk-img-chip:hover { border-color: var(--seccion); background: var(--seccion-lavado); }
.tk-img-chip[aria-pressed="true"] {
  background: var(--seccion); border-color: var(--seccion); color: var(--sobre-seccion);
}

/* ============================================================
   3. La portada: una tarjeta por lección
   ============================================================ */
.tk-img-lecciones {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
/* Es un <button>: todo lo que el navegador le pone de fábrica (letra, alto,
   alineación centrada) se devuelve a lo de una tarjeta. */
.tk-img-leccion {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--e-3);
  width: 100%; text-align: left; font: inherit; color: var(--tinta); cursor: pointer;
}
/* El filo y el 4 % de tinte de `.tarjeta-seccion`: la tarjeta responde a la
   mano sin moverse ni crecer, que la haría parecer otra cosa. En táctil, el
   filo de color llega al pulsar. */
@media (hover: hover) {
  .tk-img-leccion:hover { border-color: var(--seccion); background: color-mix(in srgb, var(--seccion) 4%, var(--papel)); }
}
.tk-img-leccion:active { border-color: var(--seccion); }

.tk-img-muestras {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2);
  padding: var(--e-3); background: var(--seccion-lavado); border-radius: var(--r-lg);
}
.tk-img-mini { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; }
.tk-img-mini svg { width: 100%; max-width: 4rem; height: auto; }

.tk-img-leccion-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
/* El chip de nivel en la letra de texto, como en Aprender, la sesión y el
   traductor: en la serif, «A1» parecía otra pieza. */
.tk-img-nivel { font-size: var(--t-xs); padding: .125rem .5rem; }
.tk-img-cuenta { font-size: var(--t-sm); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.tk-img-leccion-tit {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 600;
  line-height: 1.2; letter-spacing: -.015em; text-wrap: balance;
}
.tk-img-leccion-txt { font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.5; }
.tk-img-leccion-ir {
  margin-top: auto; padding-top: var(--e-1);
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: var(--t-sm); font-weight: 700; color: var(--seccion-tinta);
}
.tk-img-leccion-ir .tk-icono, .tk-img-leccion-ir i[data-ico] { width: 1rem; height: 1rem; margin: 0; }

/* ============================================================
   4. Dentro de una lección: cabecera, categorías y modos
   ============================================================ */
.tk-img-cab { display: grid; gap: var(--e-3); min-width: 0; margin-bottom: var(--e-5); }
/* El enlace de vuelta es el `.btn-texto` de la plantilla, en el azul de los
   enlaces como el «Sonidos» de Pronunciar o la «Guía» de Aprender: teñido de
   turquesa era el único enlace de la aplicación con otro color. */
.tk-img-volver { justify-self: start; min-height: 2.75rem; gap: .375rem; }
.tk-img-volver .tk-icono, .tk-img-volver i[data-ico] { width: 1.125rem; height: 1.125rem; margin: 0; }
.tk-img-titular { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.tk-img-titular h2 { font-size: var(--t-xl); }

/* Las lecciones como chips (`.tk-img-chip`, arriba). En el móvil van en una
   sola fila que se desliza; en seis filas de chips se iría media pantalla
   antes de llegar a los dibujos. */
.tk-img-temas { display: flex; flex-wrap: wrap; gap: var(--e-2); min-width: 0; }
@media (max-width: 48rem) {
  .tk-img-temas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .tk-img-temas::-webkit-scrollbar { display: none; }
}

.tk-img-barra {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--e-3) var(--e-4); margin-bottom: var(--e-5);
}
.tk-img-modos { flex: 1 1 24rem; max-width: 36rem; }
/* Cuando la barra se parte en el móvil, el mando de velocidad baja solo a su
   renglón: a la derecha, como en la sesión, y no colgado a la izquierda. */
.tk-img-barra .tk-vel { margin-left: auto; }
/* A 320 px las tres pistas miden 88 px: cabe el nombre del modo, no su
   explicación. El nombre basta para elegir; la explicación es para la
   primera vez, y en el escritorio sigue ahí. */
@media (max-width: 30rem) {
  .tk-img-modos { flex-basis: 100%; }
  .tk-img-modos small { display: none; }
}

.tk-img-ayuda { color: var(--tinta-2); font-size: var(--t-sm); margin-bottom: var(--e-4); max-width: var(--medida); }

/* ============================================================
   5. La ficha: el dibujo sobre el lavado y la palabra en serif
   ============================================================ */
.tk-img-rejilla {
  display: grid; gap: var(--e-3);
  /* 8rem en el móvil para que a 320 px sigan cabiendo dos por fila; en
     pantalla ancha 10rem, porque con menos salen ocho por fila y no se
     distingue una oreja de una mano, que es lo que esta pantalla evita. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
}
@media (min-width: 48rem) {
  .tk-img-rejilla { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--e-4); }
}
.tk-img-ficha {
  position: relative; width: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .125rem;
  padding: var(--e-2) var(--e-2) var(--e-4);
  font: inherit; color: var(--tinta); text-align: center; cursor: pointer;
}
@media (hover: hover) {
  .tk-img-ficha:hover { border-color: var(--seccion); }
}
.tk-img-ficha:active { border-color: var(--seccion); background: color-mix(in srgb, var(--seccion) 4%, var(--papel)); }
/* La que acaba de sonar conserva el filo: en una rejilla de dieciocho es lo
   que dice cuál se tocó cuando el sonido ya ha terminado. */
.tk-img-ficha.suena { border-color: var(--seccion); }
.tk-img-ficha.suena .tk-img-lienzo svg { animation: tk-img-suena .45s ease; }
@keyframes tk-img-suena { 35% { transform: scale(1.07); } }

.tk-img-lienzo {
  display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 4;
  margin-bottom: var(--e-2);
  background: var(--seccion-lavado); border-radius: var(--r-lg);
}
.tk-img-lienzo svg { width: 70%; height: auto; aspect-ratio: 1; }
.tk-img-palabra {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 600;
  line-height: 1.15; letter-spacing: -.015em; overflow-wrap: anywhere;
}
/* La transcripción («/ˈlɪsn/») manda sobre la figurada y se ve como en todas
   las demás pantallas: la tipografía fonética de `.fon`, en negrita y con la
   tinta de la sección, igual que `.unidad-ipa` en la guía y el traductor. No
   se le escribe el color a mano —lo hereda de `--seccion-tinta`— porque el
   turquesa de Mirar no tiñe igual en claro que en oscuro. */
.tk-img-ipa {
  font-size: var(--t-sm); font-weight: 700; color: var(--seccion-tinta);
  line-height: 1.25; overflow-wrap: anywhere;
}
/* La pronunciación figurada («LI-sen») no es fonética: es para leerla en voz
   alta tal cual, y va como `.unidad-pron` de la plantilla, espaciada y gris. */
.tk-img-pron { font-size: var(--t-xs); font-weight: 600; letter-spacing: .05em; color: var(--tinta-3); }
.tk-img-es { font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.35; overflow-wrap: anywhere; }

/* La nota de pronunciación —«la T no suena»— sin ocupar sitio en la ficha:
   una marca en la esquina del dibujo. Al tocar la ficha sale entera. */
.tk-img-nota {
  position: absolute; top: calc(var(--e-2) + .375rem); right: calc(var(--e-2) + .375rem);
  width: 1.625rem; height: 1.625rem; display: grid; place-items: center;
  border-radius: var(--r-full); background: var(--papel); color: var(--xp-tinta);
}
.tk-img-nota .tk-icono, .tk-img-nota i[data-ico] { width: 1rem; height: 1rem; margin: 0; }

/* ============================================================
   6. Las tandas: señalar y decirlo
   ============================================================ */
.tk-img-ronda-cab {
  display: flex; align-items: center; gap: var(--e-3);
  max-width: 44rem; margin: 0 auto var(--e-4);
}
.tk-img-progreso { flex: 1; height: .625rem; }
.tk-img-progreso > i { transition: width .3s ease; }
/* La cuenta, con la medida de la de la sesión de estudio: barra y cuenta a
   su derecha, en letra de texto. En la serif grande pesaba más que la
   pregunta. */
.tk-img-ronda {
  flex: none; min-width: 3.25rem; text-align: right;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tk-img-ronda b { color: var(--tinta); font-weight: 700; }

.tk-img-reto { max-width: 44rem; margin-inline: auto; }

.tk-img-oir { display: grid; justify-items: center; gap: var(--e-3); margin-bottom: var(--e-5); text-align: center; }
.tk-img-pregunta { font-family: var(--display); font-size: var(--t-xl); font-weight: 600; line-height: 1.2; }
/* El altavoz es el único botón redondo de la pantalla y el más grande: es lo
   que se pulsa cuando no se ha oído bien. Relieve sólido como los botones de
   la plantilla, del color hondo de la sección. */
.tk-img-altavoz {
  width: 4.5rem; height: 4.5rem; display: grid; place-items: center;
  border: 0; border-radius: var(--r-full); cursor: pointer;
  background: var(--seccion); color: var(--sobre-seccion);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--seccion) 62%, #000);
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.tk-img-altavoz:hover { background: color-mix(in oklab, var(--seccion) 92%, #000); }
.tk-img-altavoz:active { transform: translateY(4px); box-shadow: none; background: var(--seccion-hondo); }
.tk-img-altavoz .tk-icono, .tk-img-altavoz i[data-ico] { width: 1.875rem; height: 1.875rem; margin: 0; }

.tk-img-opciones { display: grid; gap: var(--e-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 30rem) { .tk-img-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Las opciones son `.opcion` de la plantilla con un dibujo dentro en vez de
   una frase: se centra, y la marca de acierto o fallo sube a la esquina para
   no caer encima del dibujo. */
.tk-img-opciones .opcion {
  display: grid; place-items: center; min-height: 0; padding: var(--e-2); text-align: center;
}
.tk-img-opciones .opcion.es-correcta,
.tk-img-opciones .opcion.es-fallo { padding-right: var(--e-2); }
.tk-img-opciones .opcion .tk-img-lienzo { margin: 0; aspect-ratio: 1; }
.tk-img-opciones .opcion:hover:not([disabled]) .tk-img-lienzo { background: var(--papel); }
.tk-img-opciones .opcion.es-correcta::after {
  top: .625rem; right: .875rem; margin-top: 0; z-index: 1;
}
.tk-img-opciones .opcion.es-fallo::before,
.tk-img-opciones .opcion.es-fallo::after { top: 1.125rem; right: .625rem; z-index: 1; }
.tk-img-opciones .opcion.es-correcta .tk-img-lienzo { background: var(--papel); }
.tk-img-opciones .opcion.es-fallo .tk-img-lienzo { background: var(--papel); }

.tk-img-juicio {
  min-height: 1.6em; margin-top: var(--e-4); text-align: center;
  font-weight: 700; font-size: var(--t-md);
}
.tk-img-juicio.bien { color: var(--acierto-tinta); }
.tk-img-juicio.mal { color: var(--racha-tinta); }

.tk-img-sola { display: grid; justify-items: center; gap: var(--e-3); text-align: center; }
.tk-img-lienzo.grande { width: min(15rem, 100%); aspect-ratio: 1; margin: 0; }
.tk-img-lienzo.grande svg { width: 76%; }
.tk-img-sola .tk-img-ayuda { margin: 0; }
.tk-img-revelado { display: grid; justify-items: center; gap: .125rem; }
.tk-img-revelado .tk-img-palabra { font-size: var(--t-2xl); }
/* Al comprobar, la transcripción se lee de verdad: es el momento en que se
   compara lo que has dicho con lo que debía sonar. Va con la medida de
   `.unidad-ipa`, la misma que en la guía. */
.tk-img-revelado .tk-img-ipa { font-size: var(--t-lg); }
.tk-img-revelado .tk-img-pron { font-size: var(--t-sm); }
.tk-img-revelado .tk-img-es { font-size: var(--t-md); }
.tk-img-mandos { display: grid; gap: var(--e-3); width: min(24rem, 100%); margin-top: var(--e-2); }
.tk-img-mandos .btn { width: 100%; }
.tk-img-juzgar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
@media (max-width: 22rem) { .tk-img-juzgar { grid-template-columns: 1fr; } }

/* El botón principal es el azul de la plantilla, como en el resto de la
   aplicación. Se había teñido del turquesa de la sección y era la única
   pantalla con otro color de acción: el color de sección va en los
   instrumentos redondos (el altavoz), no en los botones. */

/* ============================================================
   7. El final de una tanda
   ============================================================ */
.tk-img-fin {
  display: grid; justify-items: center; gap: var(--e-2); text-align: center;
  max-width: 44rem; margin-inline: auto;
}
.tk-img-fin .folio { margin-bottom: 0; }
.tk-img-fin h2 { font-size: var(--t-2xl); }
.tk-img-marcador {
  font-family: var(--display); font-size: var(--t-xl); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--tinta-2);
}
.tk-img-marcador.listo { color: var(--tinta); }
.tk-img-fin .acciones { justify-content: center; margin-top: var(--e-3); }
.tk-img-repaso { margin-top: var(--e-6); }

/* El aro de aciertos lo escribe `TKFiesta.anillo` y lo dibuja fiesta.css,
   uno solo para el momento, el final de la sesión y este. Aquí solo el hueco:
   había una copia entera acotada a esta pantalla, con otro grosor y otra
   letra, y el mismo aro salía distinto según dónde se terminara. */
.tk-img-aro { line-height: 0; margin-bottom: var(--e-2); }
.tk-img-aro:empty { display: none; }

/* ============================================================
   8. El mando de velocidad

   Es el de `velocidad.js`, uno solo para toda la plataforma, y no se viste
   aquí: aquí había una segunda copia con otra letra y otro color al pasar el
   ratón, y el mismo mando cambiaba al pasar de la sesión a Mirar.
   ============================================================ */

/* ============================================================
   9. Menos movimiento
   ============================================================ */
/* Quien lo pide ve el mismo estado, quieto: la ficha que sonó sigue marcada
   por el filo y el botón sigue cambiando de color al pulsarlo. */
@media (prefers-reduced-motion: reduce) {
  .tk-img-ficha.suena .tk-img-lienzo svg { animation: none; }
  .tk-img-altavoz:active { transform: none; }
}

/* ============================================================
   10. Los dibujos del vocabulario

   `publico/dibujos.js` compone cada dibujo de piezas y les pone una clase
   —`d-piel`, `d-papel`, `d-onda`— en vez de un color escrito a mano. El color
   entero vive aquí, y por eso los dibujos cambian con el tema, heredan el
   color de la sección y se pueden retocar todos a la vez.

   Sin esta hoja el SVG se pinta con lo que trae el navegador de fábrica:
   `fill:black; stroke:none`. Eso convertía cada dibujo en una silueta negra
   —«page», «test» y «homework» eran el mismo rectángulo— y las piezas hechas
   de líneas, como «write» y «sentence», desaparecían del todo. Pasó dos
   veces: la segunda, al retirar la hoja vieja de componentes.

   El orden importa: primero los rellenos, que apagan el trazo, y `.d-trazo`
   AL FINAL, para que una pieza rellena que además lleve contorno lo recupere.
   ============================================================ */
.tk-dib {
  width: 100%; height: 100%; display: block; overflow: visible;
  /* Por omisión, una pieza es una línea: sin relleno y con trazo redondeado.
     Es lo contrario de lo que hace el navegador, y es lo correcto aquí. */
  fill: none;
  stroke: var(--d-linea);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* La paleta del dibujo, declarada en el propio SVG para que un dibujo
     dentro de una sección tome su color sin que esta hoja sepa cuál es.
     Todo sale de las fichas de la plantilla, que ya cambian con el tema: el
     verde es el de acierto, el agua el azul de marca, lo cálido el ámbar y
     el rojo el coral de racha. */
  --d-linea: color-mix(in srgb, var(--tinta) 80%, transparent);
  --d-tinta: color-mix(in srgb, var(--tinta-3) 85%, transparent);
  --d-acento: var(--seccion);
  --d-papel: var(--papel);
  --d-oscuro: color-mix(in srgb, var(--tinta) 84%, var(--papel));
  --d-suave: color-mix(in srgb, var(--tinta) 12%, var(--papel));
  --d-verde: var(--acierto);
  --d-agua: var(--marca);
  --d-calido: var(--xp);
  --d-rojo: var(--racha);
  /* La piel, el pelo y la madera no tienen ficha en la paleta —ni deben
     tenerla, no son colores de interfaz— y tampoco se escriben a mano: un
     color fijo sobrevive al cambio de tema. Salen de un tostado que es el
     coral de racha metido en el ámbar de XP: aclarado con blanco es piel,
     hundido con negro es madera. El ámbar solo, mezclado con papel, salía
     amarillo pálido y los dibujos de personas parecían enfermos; es el coral
     lo que lo lleva hacia la piel.
     El pelo va aparte de `--d-oscuro` porque en oscuro «lo oscuro» se invierte
     y el pelo salía del tono de la piel, y «man», «woman», «boy» y «girl» se
     distinguen justamente por el pelo. */
  --d-tostado: color-mix(in oklab, var(--racha) 30%, var(--xp));
  --d-piel: color-mix(in oklab, var(--d-tostado) 42%, #fff);
  --d-pelo: var(--tinta-2);
  --d-madera: color-mix(in oklab, var(--d-tostado) 85%, #000);
}

/* --- lo que se rellena --- */
.tk-dib .d-piel     { fill: var(--d-piel);   stroke: none; }
.tk-dib .d-cuerpo   { fill: var(--d-acento); stroke: none; }
.tk-dib .d-papel,
.tk-dib .d-globo    { fill: var(--d-papel);  stroke: none; }
.tk-dib .d-pizarra,
.tk-dib .d-pantalla,
.tk-dib .d-pupila,
.tk-dib .d-rueda    { fill: var(--d-oscuro); stroke: none; }
.tk-dib .d-pelo     { fill: var(--d-pelo);   stroke: none; }
.tk-dib .d-pared,
.tk-dib .d-nube,
.tk-dib .d-fondo    { fill: var(--d-suave);  stroke: none; }
.tk-dib .d-madera,
.tk-dib .d-pelaje   { fill: var(--d-madera); stroke: none; }
.tk-dib .d-hoja,
.tk-dib .d-monte    { fill: var(--d-verde);  stroke: none; }
.tk-dib .d-agua     { fill: var(--d-agua);   stroke: none; }
.tk-dib .d-sol,
.tk-dib .d-comida   { fill: var(--d-calido); stroke: none; }
.tk-dib .d-fruta,
.tk-dib .d-corazon,
.tk-dib .d-tejado   { fill: var(--d-rojo);   stroke: none; }
.tk-dib .d-oro      { fill: var(--xp);       stroke: none; }
.tk-dib .d-billete  { fill: color-mix(in srgb, var(--acierto) 26%, var(--papel)); stroke: none; }
/* El acento: la boca, el lomo del libro, el iris, la goma del lápiz. Es lo
   que hace que un dibujo se lea de un vistazo. */
.tk-dib .d-acento,
.tk-dib .d-signo    { fill: var(--d-acento); stroke: none; }

/* --- lo que se traza --- */
/* Los renglones son el texto escrito, y tienen que verse como texto: más
   finos que el contorno y en gris. Con el mismo grosor, una página con cuatro
   renglones parece una reja. */
.tk-dib .d-renglon  { stroke: var(--d-tinta);  stroke-width: 2.4; }
.tk-dib .d-onda,
.tk-dib .d-flecha   { stroke: var(--d-acento); stroke-width: 3.2; }
.tk-dib .d-lluvia   { stroke: var(--d-agua);   stroke-width: 2.8; }
.tk-dib .d-rayo     { stroke: var(--d-calido); stroke-width: 3; }
.tk-dib .d-visto    { stroke: var(--d-verde);  stroke-width: 4; }
/* «circle» es rodear algo con un círculo, y se rodea a lápiz rojo: del color
   de la sección parecería una forma más del dibujo en vez de una marca. */
.tk-dib .d-circulo  { stroke: var(--d-rojo);   stroke-width: 3.4; }
.tk-dib .d-lapiz    { stroke: var(--d-madera); stroke-width: 5; }
.tk-dib .d-cubierto,
.tk-dib .d-aguja    { stroke: var(--d-linea);  stroke-width: 3.2; }
.tk-dib .fina       { stroke-width: 2.2; }
/* La punta de la flecha es un triángulo cerrado, no dos rayas. */
.tk-dib .relleno    { fill: var(--d-acento); stroke: none; }

/* Y al final el contorno, para que una pieza rellena lo recupere. */
.tk-dib .d-trazo    { stroke: var(--d-linea); stroke-width: 3; }

/* En oscuro, la piel de día deslumbra sobre el lavado casi negro y la madera
   se apaga hasta parecer gris; el pelo se aclara para no fundirse con el
   fondo. Lo oscuro de verdad —una pantalla apagada, una pupila— sigue siendo
   más oscuro que el papel, así que baja hacia el negro en vez de invertirse
   con la tinta. Las dos copias: la del sistema y la del interruptor. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tk-dib {
    --d-piel: color-mix(in oklab, var(--d-tostado) 92%, #000);
    --d-pelo: color-mix(in oklab, var(--d-tostado) 50%, #000);
    --d-madera: color-mix(in oklab, var(--d-tostado) 90%, #000);
    --d-oscuro: color-mix(in srgb, var(--fondo) 70%, #000);
  }
}
:root[data-theme="dark"] .tk-dib {
  --d-piel: color-mix(in oklab, var(--d-tostado) 92%, #000);
  --d-pelo: color-mix(in oklab, var(--d-tostado) 50%, #000);
  --d-madera: color-mix(in oklab, var(--d-tostado) 90%, #000);
  --d-oscuro: color-mix(in srgb, var(--fondo) 70%, #000);
}

/* ============================================================
   11. Ganchos con nombre

   Clases que escribe `imagenes.js` para encontrar la pieza y que por sí solas
   necesitan poco. Van aquí para que ninguna quede sin regla.
   ============================================================ */
.tk-img { min-width: 0; }
/* Las lecciones como chips: no encogen dentro de la fila que se desliza. */
.tk-img-tema { flex: none; }
/* La opción de Señalar solo lleva el dibujo: sin palabra debajo, sobra el
   hueco entre las dos. */
.tk-img-ficha.muda { gap: 0; }