/* ============================================================
   Súper malla · movimiento propio · motion/malla/malla.css
   Código de la malla (sync_motion.py nunca lo toca). Aplica los
   contratos del banco de animaciones de TD al DOM que ya dibuja la
   malla; lo marca motion/malla/aplicar.js en memoria.

   Solo tokens (--dur-*, --ease-*, --stagger*, --filete-h, colores):
   ningún hex, rgb(), cubic-bezier() ni duración literal. Keyframes
   solo con from{} y fill both: el reposo es el estado final.
   R11: toda animation depende de un atributo transitorio
   ([data-td-in] del runtime o [data-mm-anim]), nunca de una clase de
   estado persistente, porque la lección se desprende y se reinserta
   en cada navegación. La única excepción es .loading (nodo efímero).
   ============================================================ */

/* 0 · Centinela. aplicar.js solo arma entradas si ve esta variable (y los
      tokens del paquete): con una publicación incompleta, nada se arma. */
:root{--mm-malla-css:1}

/* 1 · Sello. Lo que ya entró no vuelve a correr al reinsertar la lección
      ni al pasar de display:none a visible (R6 y R11). aplicar.js pone
      data-td-visto en animationend/animationcancel y al salir de la vista. */
[data-td-reveal][data-td-visto]{animation:none!important}

/* 2 · Variantes propias, declaradas como las del runtime. */
/* Respuesta (feedback-acierto-error, solo la entrada del mensaje): sube en
   --dur-2 con su texto final desde el primer cuadro. */
[data-td-reveal="malla-respuesta"]{--td-kf:td-subida;--td-dur:var(--dur-2);--td-ease:var(--ease-out-soft)}
/* Escena nueva y resultado de la práctica final: fundido de --dur-2. */
[data-td-reveal="malla-fundido"]{--td-kf:td-fundido;--td-dur:var(--dur-2);--td-ease:var(--ease-out)}
/* Marcador de regla-precio (dato-marcador-rango): recorre la escala desde 0
   hasta su valor la primera vez que se ve. Al teclear se mueve con la
   transición de translate de la página. */
[data-td-reveal="malla-marcador"]{--td-kf:mm-marcador;--td-dur:var(--dur-3);--td-ease:var(--ease-out-soft)}
@keyframes mm-marcador{from{translate:0 0}}

/* 3 · Subrayado de una palabra (filete-subrayado) sobre el borde que ya pinta
      la malla. Mientras está armado el borde queda transparente (si no, se
      verían dos subrayados) y el trazo usa su misma geometría (.09em). Al
      terminar, aplicar.js quita la ayuda y queda el borde de siempre. */
.pd-statement span.mm-armado,.split .q span.mm-armado{border-bottom-color:transparent}
.pd-statement .td-filete-subrayado__trazo,.split .q .td-filete-subrayado__trazo{border:0;height:.09em;bottom:-.09em}

/* 4 · Filete de .cmpc.win (filete-traza por contrato: su gesto, no su forma).
      Cubre exactamente el borde superior de 5 px y hereda el --i de su columna. */
.cmpc.mm-armado{position:relative;border-top-color:transparent}
.mm-filete{position:absolute;top:calc(-1 * var(--filete-h));left:-1px;right:-1px;height:var(--filete-h);background:var(--rojo);pointer-events:none}

/* 5 · Estados de respuesta de la práctica final (feedback-acierto-error por
      contrato): del estado que el corredor veía al que la malla ya pinta, en
      --dur-1. Solo la elegida y la correcta: aplicar.js pone data-mm-anim=
      "estado" en esos botones recién creados (las no elegidas cambian al
      instante) y lo quita al terminar. Una casilla que el corredor marcó parte
      de tinta, como la vio: nunca vuelve a vacía antes del veredicto. */
.opt2[data-mm-anim="estado"]{animation:mm-estado var(--dur-1) var(--ease-in-out) both}
.opt2[data-mm-anim="estado"] .bx{animation:mm-estado-bx var(--dur-1) var(--ease-in-out) both}
.opt2[aria-pressed="true"][data-mm-anim="estado"] .bx{animation-name:mm-estado-bx-marcada}
@keyframes mm-estado{from{border-color:var(--hairline);background-color:var(--papel);opacity:1}}
@keyframes mm-estado-bx{from{border-color:var(--n-500);background-color:var(--papel-2)}}
@keyframes mm-estado-bx-marcada{from{border-color:var(--tinta);background-color:var(--tinta)}}

/* 6 · Carga sobria (ui-carga por contrato): «Cargando…» solo aparece si la
      espera pasa de --dur-4, por fundido de --dur-2. Sin spinner ni bucle. */
.loading{animation:td-fundido var(--dur-2) var(--ease-out) var(--dur-4) both}