/* ═══ TMT ═══════════════════════════════════════════════════════════════════
   Tarea propia inspirada en el Trail Making Test: la forma se genera
   proceduralmente por semilla (helpers/tests/tmt-geometry.js), no se digitaliza
   desde un documento en papel — por eso, a diferencia del rediseño visual
   anterior, este SÍ toca geometría (lienzo apaisado que llena la pantalla,
   radio de nodo, densidad) además de tipografía/color. Cuatro categorías de
   nodo (número, letra, color, forma) y nodos señuelo con la MISMA apariencia
   que un nodo real de su categoría — el estilo no debe distinguir nunca un
   señuelo de un nodo real, esa ambigüedad es la tarea. */
.screen--tmt {
  width: 100%; max-width: none; height: calc(100vh - 48px); margin-top: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; overflow: hidden;
}
.screen--tmt .trial__topbar { width: 100%; margin: 0; justify-content: center; min-height: 0; }

/* Selector de modo (normal / difícil), en la pantalla de instrucciones. */
.tmt-mode-picker { display: flex; gap: 10px; justify-content: center; }
.tmt-mode-btn.is-active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi);
  font-weight: 700;
}
.tmt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .8rem; font-weight: 500;
  box-shadow: 0 1px 2px rgba(15, 30, 45, .05);
}
.tmt-chip strong { color: var(--ink); font-weight: 700; }
.tmt-sub { text-align: center; margin: 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.25; }
.tmt-wrap {
  display: flex; flex: 1 1 auto; justify-content: center; align-items: center;
  min-width: 0; min-height: 0; width: 100%;
}
/* El tamaño real (width/height/aspect-ratio) se fija inline en boardHTML() a partir del
   lienzo virtual (2400×1500, apaisado) — el mismo lienzo para práctica y test, ya no hay
   viewBox distinto por forma. La proporción es más ancha que la de una hoja carta a
   propósito, para aprovechar pantallas modernas (ver tmt-geometry.js). */
.tmt-board {
  display: block; margin: auto; cursor: crosshair;
  background: var(--surface); border: 2px solid var(--ink);
  box-shadow: 0 2px 10px rgba(15, 30, 45, .15);
  touch-action: none; user-select: none;
}
.tmt-hit-area { fill: transparent; pointer-events: all; }
.tmt-node { pointer-events: none; }

/* número / letra: círculo con texto. Relleno tintado y tipografía sans del resto de
   la app (var(--font), base.css) en vez de imitar el aspecto de un formulario en
   papel escaneado — el trazo se iguala al de color/forma (2.5) por consistencia. */
.tmt-node--numero circle, .tmt-node--letra circle {
  fill: var(--accent-soft); stroke: var(--ink); stroke-width: 2.5;
}
.tmt-node--numero text, .tmt-node--letra text {
  font-family: var(--font); font-weight: 700; font-size: 34px;
  font-variant-numeric: tabular-nums;
  fill: var(--ink); pointer-events: none;
}

/* color: la categoría se reconoce por el relleno, sin texto — no hay palabra que leer,
   para no solapar con el constructo del Stroop (nombrar el color de una palabra). El
   trazo oscuro es necesario para que el círculo se distinga del fondo con cualquier
   color de relleno, incluidos los más claros (amarillo, celeste). */
.tmt-node--color .tmt-node__color { stroke: var(--ink); stroke-width: 2.5; }

/* forma: el contorno cambia (triángulo, cuadrado, estrella, cruz, …) en vez de texto —
   se reconoce por la silueta. Mismo tratamiento visual que número/letra (relleno claro,
   trazo oscuro) para que la única diferencia entre categorías sea la que importa. */
.tmt-node--forma circle, .tmt-node--forma polygon {
  fill: var(--surface); stroke: var(--ink); stroke-width: 2.5;
  stroke-linejoin: round;
}

/* Nodo de inicio/fin del recorrido real (no aplica a señuelos): mismo lenguaje de color
   que el resto de la app para "inicio" (verde) y "fin" (azul), sin agregar texto nuevo —
   ya el propio nodo indica su valor; esto solo marca su rol en el recorrido. */
.tmt-node--start :is(circle, polygon) { stroke: var(--success, #2f9e51); stroke-width: 4; }
.tmt-node--end :is(circle, polygon) { stroke: var(--accent); stroke-width: 4; }

.tmt-node.reached :is(circle, polygon) { stroke: var(--accent); stroke-width: 3; }
.tmt-node.err :is(circle, polygon) { fill: #fdf4f3; stroke: var(--danger); stroke-width: 4; }

.tmt-trace {
  fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round;
  stroke-linejoin: round; pointer-events: none;
}
.tmt-tip { fill: var(--accent); stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.tmt-status {
  display: inline-flex; align-self: center; align-items: center; gap: 8px;
  margin: 0 auto; padding: 8px 16px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: .85rem;
}
.tmt-status__icon { flex: none; width: 18px; height: 18px; display: grid; place-items: center; }
.tmt-status__icon svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tmt-status--error { background: #fdf4f3; border-color: #ebc7c4; color: var(--danger); font-weight: 600; }

/* Leyendas de práctica (color/forma): fila de muestras con su número de orden, mostrada
   antes de que esa categoría aparezca por primera vez en el recorrido — el orden interno
   de color y forma es arbitrario pero fijo, así que hay que enseñarlo explícitamente. */
.tmt-legend { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0; }
.tmt-legend__item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; color: var(--ink-soft);
}
.tmt-legend__swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); display: inline-block;
}
.tmt-legend__shape { width: 22px; height: 22px; fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.tmt-legend__caption { text-align: center; color: var(--ink-soft); font-size: .8rem; margin: 4px 0 0; }

@media (pointer: coarse), (hover: none) {
  .tmt-wrap { overflow: auto; justify-content: flex-start; }
}