/* ============================================================================
   RECORRIDOS DEL SISTEMA — el pizarrón de Salviati en el enunciado, los casos
   unitarios, la compatibilidad, la solución, EI y la elástica
   (public/app/js/recorridos-sistema.js), sobre recorridos.css
   ----------------------------------------------------------------------------
   Solo tokens de tokens.css. Los colores de la app:
     --real    el momento real M y las reacciones (azul)
     --virt    la carga unitaria y m(x): lo virtual (morado)
     --defl    los desplazamientos δ, θ, v (naranja); lo de este tiempo, con
               el marcador (--hl)
   Un término del pizarrón toma el color de lo que representa, siempre: el de
   este tiempo (.pz-now) y el que el alumno señala (.is-hl) llevan detrás el
   marcador (--hl, recorridos.css), sin cambiar de color.
   ========================================================================== */

/* ----------------------------------------------------- EL PIZARRÓN */
.pz-t.pz-tv { color: var(--virt); }
.pz-t.pz-td { color: var(--defl); }
/* sistemas y matrices: un poco más chicos para que quepan en la columna */
.dm-board .rs-sys .msys, .dm-board .rs-mat .mmat { font-size: .92em; }
.dm-board .rs-sys .msys-r { gap: 4px; }
.dm-board .mmat { max-width: 100%; }

/* ------------------------------------------------------- EL DIBUJO */
/* m(x) de un caso unitario: la curva en morado */
.dm-svg g[data-ref="band:m"] .pz-curve { stroke: var(--virt); }
.dm-svg g[data-ref="band:m"] .pz-e.pz-pt { color: var(--virt); }
/* la curva elástica v(x): en naranja */
.dm-svg g[data-ref="band:v"] .pz-curve { stroke: var(--defl); }
.dm-svg g[data-ref="band:v"] .pz-e.pz-pt { color: var(--defl); }
/* lo que se pide (δ, θ) y lo que se comprueba en la curva: naranja, como en la hoja */
.dm-svg .pz-e.pz-mark[data-ref^="goal:"], .dm-svg .pz-e.pz-mark[data-ref^="ok:"], .dm-svg .pz-e.pz-mark[data-ref="vmax"] { color: var(--defl); }
/* la viga deformada: su contorno siempre en naranja (recorridos.css); cuando el tiempo la ilumina, con su halo */
/* la sección b × h */
.rs-secr { fill: var(--fill); stroke: currentColor; stroke-width: 1.6; }
.rs-axis { stroke: currentColor; stroke-width: 1; stroke-dasharray: 6 4; opacity: .6; }
.pz-e.rs-sec { color: var(--ink); }
.pz-e.rs-sec.pz-lit .rs-secr, .pz-e.rs-sec.is-hl .rs-secr { fill: var(--hl); stroke-width: 2.2; }

/* ------------------------------------------------------- TELÉFONO */
#app[data-form="phone"] .dm-board .rs-sys .msys, #app[data-form="phone"] .dm-board .rs-mat .mmat { font-size: .86em; }

@media (prefers-reduced-motion: reduce) {
  .pz-t.pz-tv, .pz-t.pz-td { transition: none !important; }
}