/* ============================================================================
   RECORRIDOS — el pizarrón de Salviati (public/app/js/recorridos.js) dentro
   del dominio (dominio.js, dominio.css)
   ----------------------------------------------------------------------------
   Solo tokens de tokens.css. El color dice QUÉ es cada cosa, nunca si es lo
   de este tiempo (pedido del dueño, 27/09/2026: «conservar colores para
   siempre llamar en la misma convención»), como la leyenda «Colores»:
     --ink       la viga, las cargas y la ecuación
     --real      las reacciones (en el dibujo y en el pizarrón) y V y M
     --virt      la carga unitaria (recorridos-sistema.css: m(x))
     --defl      solo lo que es desplazamiento: Δ, δ, θ, la viga deformada
                 y lo que un apoyo impide que se mueva
     --ink2      las cotas (brazos, x) y el tramo; --ink3, lo que ya no cuenta
     --accent    la parte izquierda del corte y la barra de capítulos
   Lo de este tiempo se marca sin cambiar el tono:
     · en el pizarrón, el marcador (--hl, amarillo de marcatextos) detrás del
       término, que conserva su color;
     · en el dibujo, su elemento con su color: el trazo más grueso, un halo
       de su color y su rótulo en negritas; lo que no tiene color propio (el
       tramo, la parte de una repartida, un punto o un tramo de un diagrama)
       lleva el marcador.
   Cada elemento del dibujo es un grupo .pz-e con data-ref; sus trazos usan
   currentColor. Iluminarlo (.pz-lit, o .is-hl cuando el alumno toca su
   término en el pizarrón) lo hace más fuerte, nunca de otro color.
   prefers-reduced-motion: el gis no se escribe (aparece) y nada late.
   ========================================================================== */

/* ------------------------------------------------------------ EL DIBUJO */
.pz-e { color: var(--ink); transition: opacity .25s ease; }
.pz-e.pz-rx { color: var(--real); }
.pz-e.pz-ghost { color: var(--ink3); }
.pz-e.pz-mute { opacity: .32; }
/* lo de este tiempo: su color, más fuerte (trazo más grueso, halo de su color, rótulo en negritas) */
.pz-e.pz-lit, .pz-e.is-hl { opacity: 1; }
.pz-e.pz-lit .pz-ln, .pz-e.is-hl .pz-ln { stroke-width: 2.9; filter: drop-shadow(0 0 1.6px currentColor); }
.pz-e.pz-lit .pz-lnh, .pz-e.is-hl .pz-lnh { stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.pz-e.pz-lit .pz-lnt, .pz-e.is-hl .pz-lnt { stroke-width: 1.6; opacity: 1; }
.pz-e.pz-lit .pz-lnth, .pz-e.is-hl .pz-lnth { opacity: 1; }
.pz-e.pz-lit .pz-dim, .pz-e.is-hl .pz-dim { stroke-width: 2; }
.dm-svg .pz-e.pz-lit text.pz-tx, .dm-svg .pz-e.is-hl text.pz-tx { font-weight: 650; }
.pz-e.pz-lit { animation: pz-glow 1.1s ease-out .15s both; }
@keyframes pz-glow { 0% { filter: none; } 35% { filter: drop-shadow(0 0 4px currentColor); } 100% { filter: none; } }
.pz-ln { fill: none; stroke: currentColor; stroke-width: 1.9; }
.pz-lnh { fill: currentColor; }
.pz-lnt { stroke: currentColor; stroke-width: 1.05; opacity: .75; }
.pz-lnth { fill: currentColor; opacity: .75; }
.pz-e .pz-tx, .dm-svg .pz-e text.pz-tx { fill: currentColor; }
.pz-dist { fill: var(--fill); stroke: currentColor; stroke-width: 1; }
.pz-e.pz-lit .pz-dist, .pz-e.is-hl .pz-dist { fill: var(--hl); stroke-width: 1.6; }
.pz-gh { opacity: .45; }
.pz-gh .pz-dist { stroke-dasharray: 4 3; }
.pz-e.pz-ghost .pz-ln { stroke-dasharray: 5 4; }
/* la parte izquierda del corte: su color es el del acento, siempre; la de ahora, con su contorno */
.pz-e.pz-zone { color: var(--accent); }
.pz-zn { fill: var(--accent-soft); }
.pz-e.pz-zone.pz-lit .pz-zn, .pz-e.pz-zone.is-hl .pz-zn { stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 5 4; }
/* la parte de una repartida a la izquierda del corte: una carga (tinta); la de ahora, con el marcador */
.pz-zp { fill: var(--fill2); stroke: currentColor; stroke-width: 1.2; }
.pz-e.pz-lit .pz-zp, .pz-e.is-hl .pz-zp { fill: var(--hl); stroke-width: 1.8; }
.pz-pv { fill: var(--paper); stroke: currentColor; stroke-width: 2; }
.pz-e.pz-lit .pz-pv, .pz-e.is-hl .pz-pv { stroke-width: 2.8; }
/* los apoyos se iluminan como lo demás */
.pz-e.pz-sup .dm-sup { stroke: currentColor; }
.pz-e.pz-sup.pz-lit .dm-sup, .pz-e.pz-sup.is-hl .dm-sup { stroke-width: 2.3; }
.pz-e.pz-sup.pz-lit .dm-hatch, .pz-e.pz-sup.is-hl .dm-hatch { stroke: currentColor; }
/* lo que un apoyo impide: movimientos (desplazamientos y giros) que no pueden pasar */
.pz-e.pz-imp { color: var(--defl); }
.dm-svg .pz-e.pz-imp text.pz-tx { font-size: 11px; }
.pz-x { stroke-width: 2.2; }
.pz-dim { fill: none; stroke: currentColor; stroke-width: 1.2; }
.dm-svg .pz-dimt { fill: currentColor; font-family: var(--math); }
.pz-e.pz-arm { color: var(--ink2); }
.pz-e.pz-xc { color: var(--ink2); }
/* la viga deformada (exagerada): la forma del solucionador; su contorno, en el color de los desplazamientos */
.pz-dbe { fill: none; stroke: var(--defl); stroke-linecap: round; stroke-linejoin: round; }
.pz-dbm { fill: none; stroke: var(--beam); stroke-linecap: round; stroke-linejoin: round; }
.pz-e.pz-dfl { color: var(--defl); }
.pz-e.pz-dfl.pz-lit .pz-dbe, .pz-e.pz-dfl.is-hl .pz-dbe { filter: drop-shadow(0 0 2px var(--defl)); }
/* Δ, δ y θ: desplazamientos, siempre en su color */
.pz-e.pz-mark { color: var(--defl); }
.pz-e.pz-mark.pz-lit .pz-pv, .pz-e.pz-mark.is-hl .pz-pv { fill: var(--defl-soft); }
.pz-e.pz-unit { color: var(--virt); }
/* el tramo en el que se trabaja: no es una fuerza ni un desplazamiento, así que va con el marcador: el
   resaltador sobre la viga (también del lado del corte que se descarta) y una llave (--ink2) con su nombre
   sobre el marcador                                                                                       */
.pz-e.pz-trm { color: var(--ink2); }
.pz-trl { fill: none; stroke: var(--hl); stroke-linecap: butt; }
.pz-trb { fill: var(--hl); }
.pz-brace { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pz-e.pz-trm.pz-lit .pz-brace, .pz-e.pz-trm.is-hl .pz-brace { stroke-width: 1.9; }
/* el punto donde se sustituye x: una línea que baja de la viga a los diagramas y su rótulo, sobre el marcador */
.pz-e.pz-probe { color: var(--ink2); }
.pz-prl { stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 3 3; }
.pz-prd { fill: var(--hl); stroke: currentColor; stroke-width: 1.5; }
/* las bandas de los diagramas dibujados a mano */
.pz-curve { fill: none; stroke: var(--real); stroke-width: 2.2; stroke-linejoin: round; }
.pz-segl { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .32; }
.pz-e.pz-seg { color: var(--ink3); }
.pz-e.pz-seg.pz-lit .pz-segl, .pz-e.pz-seg.is-hl .pz-segl { stroke: var(--hl); stroke-opacity: 1; stroke-width: 10; }
.pz-area { fill: currentColor; fill-opacity: .16; stroke: currentColor; stroke-width: 1; }
.pz-e.pz-ar { color: var(--real); }
.pz-e.pz-ar.pz-lit .pz-area, .pz-e.pz-ar.is-hl .pz-area { fill-opacity: .28; stroke-width: 1.8; }
.pz-dot { fill: currentColor; stroke: var(--paper); stroke-width: 1.5; }
.pz-e.pz-pt { color: var(--real); }
/* un punto de ahora: con el marcador alrededor (un anillo amarillo, debajo del punto) */
.pz-e.pz-pt.pz-lit .pz-dot, .pz-e.pz-pt.is-hl .pz-dot { stroke: var(--hl); stroke-width: 10; paint-order: stroke; }
.pz-e.pz-tan { color: var(--ink2); }
.pz-e.pz-tan.pz-lit .pz-ln, .pz-e.pz-tan.is-hl .pz-ln { filter: none; }

/* ------------------------------------------------------------ EL PIZARRÓN
   Lo que se escribe va sobre el mismo lienzo que el dibujo (dominio.css:
   .dm-stage, la hoja cuadriculada): sin caja propia. Una sola zona para la
   operación de ahora (lo que el tiempo ya no usa no se queda: .pz-past solo
   si el bloque lo pide); el bloque que ya no se usa se va al margen
   (.dm-mg-b), donde queda solo su resultado.                               */
.dm-board {
  grid-area: board; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: 10px;
  padding: 4px 8px 6px; border-radius: 10px; background: none; font: 18px/1.5 var(--math); color: var(--ink);
}
.dm-board[hidden] { display: none; }
/* a lo ancho, lo escrito tiene un alto tope (la figura no pierde lugar): corre hacia arriba y muestra lo último */
.dm-stage[data-lay="wide"] .dm-board { max-height: min(33vh, 232px); }
.dm-board.is-scrolled { -webkit-mask-image: linear-gradient(transparent, var(--ink) 22px); mask-image: linear-gradient(transparent, var(--ink) 22px); }
.dm-stage[data-lay="wide"].has-mg .dm-board { min-height: 88px; }
.dm-stage[data-lay="tall"] .dm-board { margin-top: 0; font-size: 19px; max-height: min(56vh, 480px); }
.pz-bt { margin: 0 0 4px; font: 600 12.5px/16px var(--ui); letter-spacing: .01em; color: var(--ink2); }
.pz-l { padding: 1px 0; overflow-wrap: anywhere; }
.pz-l-op { font: 13px/1.35 var(--ui); color: var(--ink2); padding-top: 4px; }
.pz-l-op b { font-weight: 600; color: var(--ink); }
.pz-l-row { font-size: 16px; }
.pz-l-row .pz-imp-t { font: 13.5px/1.35 var(--ui); color: var(--ink2); }
.pz-sep { color: var(--ink3); font-family: var(--ui); }
/* la etiqueta de un renglón de «junta los términos» (en x², constantes): como una operación, chica */
.pz-lbl { font: 13px/1.35 var(--ui); color: var(--ink2); }
.pz-lbl i { font-family: var(--math); font-size: 1.1em; }
.pz-l-fin { font-weight: 600; padding-top: 3px; }
/* lo escrito antes (--ink2): un término conserva el color de lo que es (una reacción sigue en --real) */
.pz-l.pz-old { color: var(--ink2); }
.pz-t { border-radius: 4px; transition: background-color .25s ease, box-shadow .25s ease; }
.pz-t.pz-tr { color: var(--real); }
/* el término de ahora (y el que el alumno toca): el marcador detrás, sin cambiar su color. La ficha tapa la
   cuadrícula del lienzo: el marcador va sobre papel                                                       */
.pz-t.pz-now, .pz-t.is-hl { background: linear-gradient(var(--hl), var(--hl)) var(--paper); box-shadow: 0 0 0 2px var(--hl); }
.pz-t[data-hl] { cursor: pointer; }
/* lo que se suma (o se divide) en ambos lados de un despeje: también con el marcador */
.pz-dhl { border-radius: 4px; background: linear-gradient(var(--hl), var(--hl)) var(--paper); box-shadow: 0 0 0 2px var(--hl); }
.pz-dhl2 { border-radius: 4px; font-weight: 600; background: linear-gradient(var(--hl), var(--hl)) var(--paper); box-shadow: 0 0 0 2px var(--hl); }
.dm-board .mf, .dm-flyb .mf, .dm-flyt .mf, .dm-mg-b .mf { font-size: .84em; }
.dm-board .mu, .dm-flyb .mu, .dm-flyt .mu { font-size: 12.5px; }
/* lo escrito antes en este bloque, si el bloque lo pide (data-past="n": sus n últimos renglones; por omisión,
   ninguno: el pizarrón muestra solo la operación de ahora): arriba, más chico y en --ink2 (se lee). En el
   teléfono, nunca: el lugar es de la operación de ahora.                                                     */
.pz-pastbox { position: relative; margin-bottom: 2px; }
#app[data-form="phone"] .pz-pastbox { display: none; }
.pz-l.pz-past { font-size: .74em; line-height: 1.32; color: var(--ink2); padding: 0; }
/* (lo de antes ya no es de este tiempo: sin marcador; cada término, con su color) */
.pz-l.pz-past .pz-t, .pz-l.pz-past .pz-dhl, .pz-l.pz-past .pz-dhl2 { background: none; box-shadow: none; }
.pz-l.pz-past.pz-l-op { font-size: 11.5px; }
/* un bloque al margen: su título y sus renglones, chicos; se ven los últimos (el resultado), en renglones
   enteros: los de arriba que no caben (.dm-mgh, dominio.js) solo los lee el lector de pantalla */
.dm-mg-b { font: 13px/1.32 var(--math); }
.dm-mg-b .pz-bt { margin: 0 0 2px; font-size: 11px; line-height: 14px; }
.dm-mg-ls { position: relative; display: flex; flex-direction: column; justify-content: flex-end; max-height: 7.2em; overflow: hidden; }
.dm-mg-ls > .dm-mgh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dm-mg-b .pz-l.pz-past { font-size: 1em; }
/* a lo ancho, el margen es tan alto como la operación: cada bloque, con su título y su resultado */
.dm-stage[data-lay="wide"] .dm-mg-ls { max-height: 4.6em; }
.dm-mg-b .pz-l.pz-past.pz-l-op { font-size: 10.5px; }
/* el gis: lo nuevo del tiempo se escribe de izquierda a derecha */
@keyframes pz-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.pz-new { animation: pz-write .7s cubic-bezier(.3, .6, .3, 1) .12s both; }

/* ------------------------------------------------- LA BARRA DE CAPÍTULOS */
.dm-chaps { display: flex; align-items: stretch; gap: 4px; min-height: 22px; }
.dm-chaps[hidden] { display: none; }
.dm-chap { position: relative; flex: 1 1 0; min-width: 10px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.dm-chap::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--fill2); }
.dm-chapf { position: absolute; left: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--ink3); pointer-events: none; }
.dm-chap.is-on .dm-chapf { background: var(--accent); }
.dm-chap.is-done .dm-chapf { background: var(--ink3); }
.dm-chap:hover::before { background: var(--sep2); }
.dm-chap:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* (de alto fijo: un capítulo con subíndices no agranda la barra, y la franja de la voz, encima, no se mueve) */
.dm-chapt { margin: 0; height: 16px; text-align: center; font: 12.5px/16px var(--ui); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-chapt[hidden] { display: none; }
.dm-chapt i { font-family: var(--math); }
.dm-chapt sub, .dm-chapt sup { line-height: 0; }
.dm-chapn { color: var(--ink3); margin-left: 4px; }

/* ------------------------------------------------------------- TELÉFONO */
#app[data-form="phone"] .dm-board, #app[data-form="phone"] .dm-stage[data-lay="wide"].has-mg .dm-board { flex: none; max-height: 46vh; min-height: 0; font-size: 16.5px; padding: 4px 6px 6px; margin-top: 0; }
#app[data-form="phone"] .dm-mg-ls { max-height: 4.1em; }
#app[data-form="phone"] .pz-l-row { font-size: 15px; }
#app[data-form="phone"] .dm-chaps { min-height: 12px; }
#app[data-form="phone"] .dm-chap { height: 12px; cursor: default; }
#app[data-form="phone"] .dm-chap::before, #app[data-form="phone"] .dm-chapf { top: 4px; }
#app[data-form="phone"] .dm-chapt { font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .pz-new, .pz-e.pz-lit { animation: none !important; }
  .pz-e, .pz-t { transition: none !important; }
}
@media print { .dm-board, .dm-chaps { display: none !important; } }