/* ============================================================================
   DOMINIO — la vista inmersiva de Salviati (public/app/js/dominio.js) y las
   figuras de sus lecciones (public/app/js/lecciones.js, clases .dm-*)
   ----------------------------------------------------------------------------
   Solo tokens de tokens.css. El color dice QUÉ es cada cosa, nunca si es lo
   de este tiempo (la regla del pizarrón, recorridos.css; pedido del dueño,
   27/09/2026), también en las figuras de las lecciones de teoría:
     --ink               la viga, los apoyos, las cargas, el corte, el pivote
     --ink2              las cotas (brazos), los empujones de prueba y lo que
                         anota el dibujo
     --real              las reacciones, y V y M (su cara en el corte, sus
                         diagramas y sus valores)
     --defl              solo lo que es desplazamiento: los movimientos (.dm-mv)
     --hl                el marcador: lo de ahora sin color propio (una cota,
                         lo que se suma en los dos platillos, la incógnita que
                         sobra, tu zona del grado, un tramo de un diagrama)
     --accent            solo la interfaz: el avance y el foco
     --salviati          el chip «Salviati explica» (.chip-modo de base.css)
   Lo de ahora con color propio se ve más fuerte en su color: la reacción
   (.dm-rhl) con el trazo más grueso y su halo, el apoyo (.dm-suphl) con el
   trazo más grueso, su rótulo en negritas (.dm-thl, que no cambia el color).
   Texto sobre --paper (la tarjeta y las figuras): los pares ya medidos por
   tools/contraste.js (ink, ink2, real, defl y los del marcador --hl);
   test-lecciones.js vuelve a medir los de este archivo.
   Escritorio y tableta: la tarjeta cubre la columna central (entre --ws-l y
   --ws-r, bajo --ws-t); teléfono: la pantalla completa, con las zonas
   seguras. Objetivos de 44 px en el teléfono. prefers-reduced-motion: sin
   la entrada desde el botón, sin barridos; cada figura queda en su final.
   ========================================================================== */

/* ------------------------------------------------------------ EL DIÁLOGO */
.dm-scrim { position: fixed; inset: 0; z-index: 57; background: var(--backdrop); opacity: 0; transition: opacity .32s ease; }
.dm-scrim.is-on { opacity: 1; }
.dm-scrim[hidden], .dm[hidden] { display: none; }
.dm {
  position: fixed; z-index: 58;
  top: calc(var(--ws-t, 0px) + 8px); bottom: calc(var(--ws-b, 0px) + 8px);
  left: calc(var(--ws-l, 0px) + 16px); right: calc(var(--ws-r, 0px) + 16px);
  display: flex; justify-content: center; pointer-events: none; outline: none;
}
.dm-card {
  pointer-events: auto; position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 1240px; height: 100%; min-height: 0;
  border-radius: 16px; background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 .5px var(--paper-edge), var(--float);
  overflow: hidden;
  transition: clip-path .5s cubic-bezier(.2, .8, .2, 1);
}
/* medir sin que se vea (la lección se arma al ancho del escenario) */
.dm.is-pre { visibility: hidden; }
/* entrada: el contenido llega un instante después del recorte, un poco más grande */
.dm-head, .dm-stage, .dm-side, .dm-ctl { transition: opacity .34s ease .14s, transform .5s cubic-bezier(.2, .8, .2, 1) .06s; }
.dm.is-entering .dm-head, .dm.is-entering .dm-stage, .dm.is-entering .dm-side, .dm.is-entering .dm-ctl { opacity: 0; transform: scale(.965); transition: none; }
.dm.is-leaving .dm-card { transition: clip-path .36s cubic-bezier(.4, 0, .6, 1); }
.dm.is-leaving .dm-head, .dm.is-leaving .dm-stage, .dm.is-leaving .dm-side, .dm.is-leaving .dm-ctl { opacity: 0; transition: opacity .18s ease; }
/* otro tema ahí mismo: un fundido breve */
@keyframes dm-swap { from { opacity: .4; } to { opacity: 1; } }
.dm-card.is-swap .dm-stage, .dm-card.is-swap .dm-q { animation: dm-swap .35s ease both; }

/* ----------------------------------------------------------- ENCABEZADO */
.dm-head {
  flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "av chip nums back" "av q q q";
  align-items: center; gap: 2px 14px; padding: 12px 22px 11px 20px; box-shadow: inset 0 -1px 0 var(--sep);
}
.dm-who { display: contents; }
.dm-av { grid-area: av; align-self: start; flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.dm-av > svg, .dm-av > img, .dm-av > canvas { display: block; width: 48px; height: 48px; }
.dm-avf { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(var(--salviati-soft), var(--salviati-soft)) var(--paper); color: var(--salviati); box-shadow: inset 0 0 0 1px var(--sep); }
.dm-whoc { grid-area: chip; justify-self: start; }
.dm-back { grid-area: back; justify-self: end; gap: 4px; }
/* Números: decimal o fracción (la misma preferencia de la botonera); ½ en la letra de las fórmulas */
.dm-nums { grid-area: nums; justify-self: end; align-self: center; }
.dm-nums > button { min-width: 38px; padding: 0 9px; font-variant-numeric: tabular-nums; }
.dm-nums > button[data-v="frac"] { font-family: var(--math); font-size: 14px; }
.dm-nums > button[aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
.dm-nums > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dm-q { grid-area: q; margin: 0; font-family: var(--disp); font-size: 21px; line-height: 27px; font-weight: 700; letter-spacing: -.012em; color: var(--ink); overflow-wrap: anywhere; }

/* ------------------------------------------------------------ EL LIENZO
   El escenario es UN pizarrón (una sola hoja cuadriculada): el dibujo, la
   operación de ahora (.dm-board: una sola zona) y el margen (.dm-margin:
   solo resultados). Así las cosas viajan de un lugar a otro del mismo
   lienzo (dominio.js, la capa .dm-flyl). La voz de Salviati NO va en el
   pizarrón: va en su franja fija, abajo (.dm-side, 28/09: «el texto con la
   voz de Salviati queda en medio de información que se va cambiando»).
   Prioridad: la figura, la operación y la voz; nada más compite.
   Dos acomodos (data-lay, lo decide cada tiempo; dominio.js):
     wide  la figura arriba, a todo lo ancho, y ocupa lo que sobre; abajo,
           la operación (y a su izquierda el margen, si hay algo en él)
     tall  la figura en una columna alta a la izquierda; a su derecha, la
           operación y el margen, que toma el alto que queda
   Al final, «Temas relacionados» va en el lugar de la operación (.dm-end).
   La figura se ajusta a su caja (fitFig: viewBox al dibujo, crece hasta el
   ancho o el alto útil). Nada de zonas vacías: la caja es la que queda.  */
.dm-stage {
  flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 14px 22px 12px; position: relative;
  display: grid; gap: 0 20px;
  background-color: var(--paper);
  background-image: linear-gradient(var(--paper-grid) 1px, transparent 1px), linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 20px 20px; background-position: 4px 4px;
}
.dm-stage[data-lay="wide"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "fig" "board" "end"; }
.dm-stage[data-lay="wide"].has-mg { grid-template-columns: minmax(150px, 22%) minmax(0, 1fr); grid-template-areas: "fig fig" "mg board" "mg end"; }
.dm-stage[data-lay="tall"] { grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "fig board" "fig end" "fig mg"; }
.dm-fig {
  grid-area: fig; margin: 0; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 6px; overflow: hidden;
  border-radius: 14px;
}
.dm-fig > svg.dm-svg { flex: none; }
.dm-fig.is-anima { display: block; overflow-y: auto; padding: 8px 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--sep); }
/* LA VOZ DE SALVIATI: su franja fija, bajo el pizarrón y sobre la barra de avance. En toda la lección no se mueve
   ni cambia de alto: dominio.js le da el alto de la voz más larga (medida en la copia .dm-vm, que no se ve), con
   un tope; una voz más larga que el tope se desplaza dentro de la franja (.is-over).                          */
.dm-side { flex: none; position: relative; min-width: 0; padding: 10px 22px 10px; background: var(--paper); box-shadow: inset 0 1px 0 var(--sep); }
.dm-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 980px; overflow: hidden; }
.dm-text.is-over { overflow-y: auto; overscroll-behavior: contain; }
.dm-vm { position: absolute; left: 22px; right: 22px; top: 10px; height: auto !important; visibility: hidden; pointer-events: none; overflow: visible; }

/* ---------------------------------------------------------------- EL MARGEN
   Lo que ya no se usa y se hizo a un lado: los bloques escritos (más chicos
   y en --ink2, pero se leen) y las vigas que dieron paso a otro objeto (su
   miniatura, con su nombre). A lo ancho, lo más reciente va abajo, junto a
   lo escrito, y lo más viejo se va hacia arriba y se desvanece; en la
   columna ('tall'), lo más reciente arriba; en el teléfono, a la izquierda. */
.dm-margin { grid-area: mg; position: relative; min-width: 0; min-height: 0; overflow: hidden; margin-top: 10px; }
.dm-margin[hidden] { display: none; }
.dm-mgl { display: flex; flex-direction: column; gap: 10px; }
.dm-stage[data-lay="wide"] .dm-margin { min-height: 88px; box-shadow: inset -1px 0 0 var(--sep2);
  -webkit-mask-image: linear-gradient(transparent, var(--ink) 18px); mask-image: linear-gradient(transparent, var(--ink) 18px); }
.dm-stage[data-lay="wide"] .dm-mgl { position: absolute; left: 0; right: 12px; bottom: 0; flex-direction: column-reverse; }
.dm-stage[data-lay="tall"] .dm-margin { padding-top: 8px; box-shadow: inset 0 1px 0 var(--sep2); }
.dm-mg-i { min-width: 0; color: var(--ink2); }
.dm-mg-cap { display: block; font: 600 11px/14px var(--ui); letter-spacing: .02em; color: var(--ink2); }
.dm-mg-f .dm-thumb { display: block; width: 100%; height: auto; max-height: 104px; overflow: visible; }
.dm-mg-f .dm-thumb * { animation: none !important; }

/* ------------------------------------------------------------- LOS VUELOS
   Copias (aria-hidden) que van de un lugar a otro del pizarrón: el término
   que sale del dibujo hacia la ecuación, el bloque que se hace a un lado, la
   viga que se va al margen o regresa. Lo que espera su copia, .dm-wait.   */
.dm-flyl { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.dm-flyl > * { position: absolute; display: block; margin: 0; will-change: transform, opacity; }
.dm-flyl * { animation: none !important; transition: none !important; }
.dm-flyl .dm-lift { filter: drop-shadow(0 8px 10px var(--sep2)); }
/* (la copia que vuela lleva el color de lo que es: sale del de su elemento y llega al de su término, el mismo) */
.dm-flyt { white-space: nowrap; overflow: visible; color: inherit; }
.dm-flyb { overflow: hidden; font: 18px/1.5 var(--math); color: var(--ink); }
.dm-wait { opacity: 0 !important; }
.dm-tag { margin: 0; font: 600 11.5px/15px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.dm-tag[hidden] { display: none; }
.dm-narr { font: 17px/1.45 var(--ui); color: var(--ink); }
.dm-narr.is-new { animation: dm-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.dm-narr i, .dm-narr sub, .dm-narr sup { font-family: var(--math); }
.dm-narr i { font-size: 1.08em; }
.dm-narr sub { font-size: .72em; }
.dm-narr b { font-weight: 600; }
.dm-narr .mu { font-size: .8em; }
.dm-narr .mf { font-size: .82em; }
.dm-narr .mapx { font-size: .86em; }
.dm-narr .dm-r { color: var(--real); white-space: nowrap; }
.dm-narr .dm-r .mu, .dm-narr .dm-r .mapx { color: var(--real); }
/* el despeje del alumno, una operación por renglón */
.dm-eqs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px 16px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--sep2); font-size: .95em; }
.dm-er { display: grid; grid-template-columns: minmax(0, 16em) minmax(0, 1fr); gap: 2px 16px; align-items: center; }
.dm-eqs .dm-op { font-size: .8em; line-height: 1.3; color: var(--ink2); }
.dm-eqs .dm-fin .dm-ee { font-weight: 600; }
.dm-eqs1 { display: block; margin-top: 6px; }

/* al final: temas relacionados y toda la ayuda, en el lugar de la operación */
.dm-end { grid-area: end; min-width: 0; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px 8px 4px; box-shadow: inset 0 1px 0 var(--sep); }
.dm-stage[data-lay="wide"] .dm-rel { flex-direction: row; flex-wrap: wrap; }
.dm-stage[data-lay="wide"] .dm-relb { width: auto; flex: 1 1 260px; max-width: 420px; }
.dm-end[hidden] { display: none; }
.dm-endh { margin: 0; font: 600 12px/16px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.dm-rel { display: flex; flex-direction: column; gap: 6px; }
.dm-relb {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px;
  border: 0; border-radius: 10px; background: var(--fill); color: var(--ink); font: 15px/20px var(--ui); text-align: left; cursor: pointer;
}
.dm-relb:hover { background: var(--fill2); }
.dm-relb .ic, .dm-relb svg { flex: none; color: var(--ink2); }
.dm-relq { min-width: 0; }
.dm-none { margin: 0; font-size: 14px; color: var(--ink2); }
.dm-all { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 40px; }

/* ----------------------------------------------------------- CONTROLES */
.dm-ctl { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 22px 12px; box-shadow: inset 0 1px 0 var(--sep); }
.dm-ctl .btn { gap: 4px; }
.dm-prev[disabled] { opacity: .4; }
.dm-next { min-width: 132px; justify-content: center; }
.dm-prog { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; }
.dm-dots { display: flex; justify-content: center; align-items: center; gap: 7px; }
.dm-dots[hidden] { display: none; }
.dm-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--fill2); transition: width .25s ease, background-color .25s ease; }
.dm-dot.is-done { background: var(--ink3); }
.dm-dot.is-on { width: 24px; background: var(--accent); }
.dm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dm .btn:focus-visible, .dm-relb:focus-visible, .dm .btn-link:focus-visible, .dm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------- TELÉFONO */
#app[data-form="phone"] .dm { inset: 0; }
#app[data-form="phone"] .dm-card { max-width: none; border-radius: 0; box-shadow: none; }
#app[data-form="phone"] .dm-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av chip back" "q q nums"; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 12px; gap: 10px 12px; }
#app[data-form="phone"] .dm-nums { align-self: start; }
#app[data-form="phone"] .dm-nums > button { height: 44px; min-width: 44px; border-radius: 12px; }
#app[data-form="phone"] .dm-av { align-self: center; }
#app[data-form="phone"] .dm-er { grid-template-columns: minmax(0, 1fr); gap: 0; }
#app[data-form="phone"] .dm-q { font-size: 20px; line-height: 25px; }
/* en el teléfono, apilados en el mismo pizarrón: la figura, el margen (una
   tira que se desliza de lado) y la operación; el escenario se desplaza. La
   voz, en su franja fija, siempre a la vista (no hay que desplazarse)    */
#app[data-form="phone"] .dm-stage { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 12px; gap: 10px; }
#app[data-form="phone"] .dm-fig { flex: none; border-radius: 12px; padding: 4px; }
#app[data-form="phone"] .dm-side { padding: 8px 16px 8px; }
#app[data-form="phone"] .dm-vm { left: 16px; right: 16px; top: 8px; }
#app[data-form="phone"] .dm-end { flex: none; margin-top: 0; padding: 10px 2px 2px; }
#app[data-form="phone"] .dm-margin, #app[data-form="phone"] .dm-stage[data-lay="wide"] .dm-margin { flex: none; min-height: 0; margin-top: 0; box-shadow: inset 0 -1px 0 var(--sep2); padding-bottom: 6px; -webkit-mask-image: none; mask-image: none; }
#app[data-form="phone"] .dm-mgl, #app[data-form="phone"] .dm-stage[data-lay="wide"] .dm-mgl { position: static; flex-direction: row; align-items: flex-start; overflow-x: auto; overscroll-behavior-x: contain; gap: 12px; }
/* la tira se desvanece en el borde derecho: lo que sigue se ve cortado a propósito, no desbordado; al final
   del desplazamiento, el relleno deja el último bloque fuera del desvanecido */
#app[data-form="phone"] .dm-mgl { padding-right: 28px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
#app[data-form="phone"] .dm-mg-i { flex: 0 0 auto; max-width: 64%; }
#app[data-form="phone"] .dm-mg-f { width: 132px; }
#app[data-form="phone"] .dm-mg-f .dm-thumb { max-height: 72px; }
#app[data-form="phone"] .dm-narr { font-size: 16px; line-height: 1.45; }
#app[data-form="phone"] .dm-ctl { padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); gap: 8px; }
#app[data-form="phone"] .dm .btn, #app[data-form="phone"] .dm-relb, #app[data-form="phone"] .dm-all { min-height: 44px; }
#app[data-form="phone"] .dm .btn { padding: 0 14px; border-radius: 22px; }
#app[data-form="phone"] .dm-next { min-width: 0; flex: 0 0 auto; }
#app[data-form="phone"] .dm-back .dm-backt { white-space: nowrap; }
@media (pointer: coarse) { .dm .btn, .dm-relb { min-height: 44px; } }

/* ============================================================== FIGURAS */
.dm-svg { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; }
.dm-fig > .dm-svg { max-width: none; }
.dm-svg text { font-family: var(--ui); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.dm-svg .dm-tm { font-family: var(--math); font-style: italic; }
.dm-svg .dm-sb { font-size: .74em; }
.dm-svg .dm-t2 { fill: var(--ink2); }
.dm-svg .dm-tr { fill: var(--real); }
.dm-svg .dm-armt { fill: var(--ink2); }
/* lo de ahora: su rótulo en negritas, en su color (la clase de su color va al lado: dm-tr, dm-t2) */
.dm-svg .dm-thl { font-weight: 650; }
.dm-svg .dm-armhlt { fill: var(--ink2); font-weight: 650; }
/* el marcador detrás de un rótulo de ahora sin color propio (una cota, lo que se suma en los dos platillos) */
.dm-mk { fill: var(--hl); }
.dm-svg .dm-tv { fill: var(--ink); font-variant-numeric: tabular-nums; }
.dm-svg .dm-tvb, .dm-svg .dm-tstrong { font-weight: 600; }
.dm-svg .dm-teq { font-family: var(--math); }
.dm-svg .dm-teqs { fill: var(--ink2); font-family: var(--math); }
.dm-svg .dm-dimt { fill: var(--ink); }
.dm-svg .dm-bubt { font-family: var(--math); font-style: italic; font-size: 14px; stroke: none; }

.dm-beam { fill: var(--beam); stroke: var(--beam-edge); stroke-width: 1; }
.dm-beamg { fill: none; stroke: var(--ink3); stroke-width: 1.2; stroke-dasharray: 4 3; }
.dm-sup { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.dm-supf { fill: var(--paper); }
/* el apoyo de ahora: su trazo más grueso, en su color */
.dm-suphl { stroke: var(--ink); stroke-width: 2.8; }
.dm-hatch { stroke: var(--ink2); stroke-width: 1; }
.dm-ghost { fill: none; stroke: var(--ink3); stroke-width: 1.3; }
.dm-hinge { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.dm-cutend { fill: none; stroke: var(--ink2); stroke-width: 1.2; }
.dm-ld { stroke: var(--ink); stroke-width: 1.8; }
.dm-ldh, .dm-lmh { fill: var(--ink); }
.dm-lm { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.dm-dist { fill: var(--fill); stroke: var(--ink2); stroke-width: 1; }
.dm-dl { stroke: var(--ink2); stroke-width: 1.1; }
.dm-dlh { fill: var(--ink2); }
.dm-rx, .dm-rs { fill: none; stroke: var(--real); stroke-width: 2; }
.dm-rxh, .dm-rsh { fill: var(--real); }
/* la reacción de ahora: su color (--real), con el trazo más grueso y su halo */
.dm-rhl { fill: none; stroke: var(--real); stroke-width: 3; filter: drop-shadow(0 0 1.6px var(--real)); }
.dm-rhlh { fill: var(--real); stroke: var(--real); stroke-width: 1.4; stroke-linejoin: round; }
/* V y M en la cara del corte: del momento real, como sus diagramas */
.dm-fc { fill: none; stroke: var(--real); stroke-width: 2.2; }
.dm-fch { fill: var(--real); }
/* los empujones (y el peso) de prueba: fuerzas que no son del problema */
.dm-pu { fill: none; stroke: var(--ink2); stroke-width: 2.2; }
.dm-puh { fill: var(--ink2); }
/* un movimiento (de lado, arriba y abajo, girar): un desplazamiento */
.dm-mv { fill: none; stroke: var(--defl); stroke-width: 2.2; }
.dm-mvh { fill: var(--defl); }
.dm-badl { fill: none; stroke: var(--ink3); stroke-width: 1.6; }
.dm-badlh { fill: var(--ink3); }
.dm-bad { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.dm-piv { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.dm-pivx { stroke: var(--ink); stroke-width: 1.6; }
.dm-arm, .dm-dim { fill: none; stroke: var(--ink2); stroke-width: 1.2; }
/* la cota de ahora: más gruesa, en su color; su rótulo, sobre el marcador (.dm-mk) */
.dm-armhl { fill: none; stroke: var(--ink2); stroke-width: 2.2; }
.dm-dimbg { fill: var(--paper); }
.dm-ext { stroke: var(--sep2); stroke-width: 1; stroke-dasharray: 3 3; }
.dm-cut { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 6 4; }
.dm-axis { stroke: var(--sep2); stroke-width: 1; stroke-dasharray: 2 3; }
.dm-bub { fill: var(--paper); stroke: var(--ink2); stroke-width: 1; }
.dm-ax { stroke: var(--ink2); stroke-width: 1; }
.dm-axh { fill: var(--ink2); }
.dm-area { fill: var(--real-soft); }
.dm-line { fill: none; stroke: var(--real); stroke-width: 2.2; stroke-linejoin: round; }
.dm-dot { fill: var(--real); stroke: var(--paper); stroke-width: 1.5; }
/* un extremo de M: su valor, en el color del diagrama (más grande) */
.dm-dotb { fill: var(--real); }
/* el tramo de ahora de un diagrama: el marcador sobre la curva */
.dm-hl { fill: none; stroke: var(--hl); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.dm-tan { stroke: var(--ink2); stroke-width: 1.8; stroke-dasharray: 6 4; }
.dm-chip { fill: var(--paper); stroke: var(--sep2); stroke-width: 1; }
/* la incógnita que sobra: una reacción (--real, dm-tr) en su ficha con el marcador */
.dm-chipx { fill: var(--hl); stroke: var(--ink2); stroke-dasharray: 4 3; }
.dm-chipe { fill: var(--fill); stroke: none; }
.dm-chipoff { fill: none; stroke: var(--sep2); stroke-dasharray: 3 3; }
.dm-pair { fill: none; stroke: var(--ink2); stroke-width: 1.8; }
.dm-zone { fill: var(--fill); }
/* tu zona del grado (la de ahora), con el marcador; la flecha que la señala, en tinta */
.dm-zoneon { fill: var(--hl); stroke: var(--ink2); stroke-width: 1.5; }
.dm-mark { fill: var(--ink); }
.dm-bal { fill: none; stroke: var(--ink2); stroke-width: 1.4; }
.dm-balp { fill: var(--fill); }
.dm-balb { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.dm-balf { fill: var(--beam); stroke: var(--beam-edge); stroke-width: 1; }

/* ------------------------------------------------------------ ANIMACIONES
   Transformaciones en el marco del dibujo (transform-box: view-box); el
   origen lo pone lecciones.js en cada grupo (style="transform-origin")     */
@keyframes dm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dm-in { animation: dm-in .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 170ms + 120ms); }
@keyframes dm-draw { to { stroke-dashoffset: 0; } }
.dm-draw .dm-pair { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dm-draw 1s ease .35s forwards; }
.dm-a-rock, .dm-a-fall, .dm-a-turn, .dm-a-tilt, .dm-a-flip, .dm-wheel { transform-box: view-box; }
@keyframes dm-rock { from { transform: rotate(calc(var(--rot, 5deg) * -1)); } to { transform: rotate(var(--rot, 5deg)); } }
.dm-a-rock { animation: dm-rock 1.3s ease-in-out infinite alternate; }
@keyframes dm-fall { from { transform: rotate(0deg); } to { transform: rotate(var(--rot, 16deg)); } }
.dm-a-fall { animation: dm-fall 1.3s cubic-bezier(.5, 0, .8, .6) .5s both; }
@keyframes dm-drop { from { transform: none; opacity: 1; } to { transform: translateY(46px); opacity: .45; } }
.dm-a-drop { animation: dm-drop 1.2s cubic-bezier(.5, 0, .8, .6) .5s both; }
@keyframes dm-roll { from { transform: none; } to { transform: translateX(var(--dx, 56px)); } }
.dm-a-roll { animation: dm-roll 1.6s ease-in-out .4s both; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
.dm-a-roll .dm-wheel { animation: dm-spin .8s linear .4s 2 both; }
@keyframes dm-slide { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.dm-a-slide { animation: dm-slide 1.4s ease-in-out infinite alternate; }
@keyframes dm-lift { from { transform: translateY(10px); } to { transform: translateY(-14px); } }
.dm-a-lift { animation: dm-lift 1.4s ease-in-out infinite alternate; }
@keyframes dm-turn { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.dm-a-turn { animation: dm-turn 1.4s ease-in-out infinite alternate; }
@keyframes dm-tilt { from { transform: rotate(0deg); } to { transform: rotate(var(--rot, -7deg)); } }
.dm-a-tilt { animation: dm-tilt 1s cubic-bezier(.3, 1.4, .5, 1) .6s both; }
@keyframes dm-flip { 0%, 35% { transform: scaleY(1); } 100% { transform: scaleY(-1); } }
.dm-a-flip { animation: dm-flip 1.4s ease-in-out .5s both; }
@keyframes dm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.dm-pulse { animation: dm-pulse 1.6s ease-in-out .3s 3; }

@media (prefers-reduced-motion: reduce) {
  .dm-card, .dm-scrim, .dm-head, .dm-stage, .dm-side, .dm-ctl, .dm-dot { transition: none !important; }
  .dm-card.is-swap .dm-stage, .dm-card.is-swap .dm-q, .dm-narr.is-new { animation: none !important; }
  /* cada animación salta a su estado final: la figura dice lo mismo, quieta */
  .dm-svg, .dm-svg * { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  /* nada vuela: todo aparece en su lugar */
  .dm-flyl { display: none !important; }
  .dm-wait { opacity: 1 !important; }
}
@media print { .dm, .dm-scrim, .dm-flyl { display: none !important; } }