/* ============================================================================
   RECORRIDOS DEL TRABAJO VIRTUAL — los diagramas alineados del pizarrón
   (public/app/js/recorridos-integrales.js), dentro del dominio de Salviati
   ----------------------------------------------------------------------------
   Solo tokens de tokens.css. Papeles de los colores (los de la hoja):
     --real   el momento real, M₀ o M (azul)
     --virt   la carga de 1 y su momento m (morado)
     --defl   el producto M·m, cuya área es la integral, y los desplazamientos
              Δ, δ y θ (naranja)
   Cada banda (.pzi-b) fija su tono en --pzi y --pzi-soft. Lo iluminado del
   tiempo (.pz-lit) y lo que el alumno toca en el pizarrón (.is-hl) se ven
   más fuertes en SU tono (el color dice qué es, nunca si es lo de ahora:
   recorridos.css): el tramo de ahora se nota por la columna gris que lo
   cruza de arriba abajo.
   prefers-reduced-motion: nada late.
   ========================================================================== */

.pzi-b { --pzi: var(--ink2); --pzi-soft: var(--fill); }
.pzi-real { --pzi: var(--real); --pzi-soft: var(--real-soft); }
.pzi-virt { --pzi: var(--virt); --pzi-soft: var(--virt-soft); }
.pzi-defl { --pzi: var(--defl); --pzi-soft: var(--defl-soft); }

/* con la tabla, el nombre de cada combinación de formas (como en la hoja: su renglón empieza por él) */
.dm-board .pzi-cn, .dm-mg-b .pzi-cn, .dm-flyb .pzi-cn { font: 600 12.5px/1.3 var(--ui); color: var(--ink2); letter-spacing: .01em; }

/* el tramo de ahora: una columna que cruza la viga y los diagramas */
.pzi-col { fill: var(--fill); }
/* donde cambia de fórmula alguno de los diagramas */
.pzi-cut { stroke: var(--sep2); stroke-width: 1; stroke-dasharray: 3 3; }

/* los rótulos de cada banda, en su tono */
.dm-svg .pzi-b .pzi-t { fill: var(--pzi); }
.dm-svg .pzi-b .pzi-nm { font-weight: 600; }
.dm-svg .pzi-b .pzi-av { font-weight: 600; font-variant-numeric: tabular-nums; }

/* el diagrama: entero, apagado cuando hay un tramo encendido */
.pzi-crv { fill: none; stroke: var(--pzi); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pzi-mute .pzi-crv { stroke-opacity: .38; }
.pz-e.pzi-c.pz-lit .pzi-crv, .pz-e.pzi-c.is-hl .pzi-crv { stroke-width: 2.6; }
/* su tramo de ahora y las áreas del producto */
.pzi-fill { fill: var(--pzi-soft); stroke: none; }
.pzi-crvb { stroke-width: 3; }
.pz-e.pzi-seg.is-hl .pzi-crv { stroke-width: 4; }
.pz-e.pzi-ar .pzi-fill { stroke: var(--pzi); stroke-width: 1; stroke-opacity: .5; }
.pz-e.pzi-ar.pz-lit .pzi-fill, .pz-e.pzi-ar.is-hl .pzi-fill { stroke-opacity: 1; stroke-width: 1.6; }

/* las ordenadas de la tabla (a, b y la flecha p) */
.pzi-ol { stroke: var(--pzi); stroke-width: 1.3; stroke-dasharray: 3 2; }
.pzi-dot { fill: var(--pzi); stroke: var(--paper); stroke-width: 1.5; }
.pz-e.pzi-o.is-hl .pzi-dot, .pz-e.pzi-o.pz-lit .pzi-dot { stroke: var(--pzi); stroke-width: 2.5; }
.pz-e.pzi-o.is-hl .pzi-ol { stroke-width: 2.2; stroke-dasharray: none; }
.dm-svg .pz-e.pzi-o.is-hl .pzi-t { font-weight: 600; }

/* la cota ℓ del tramo: una cota (--ink2); la de ahora, más fuerte, sin cambiar de color */
.pz-e.pzi-ell { color: var(--ink2); }
.pz-e.pzi-ell.pz-lit .pz-dim, .pz-e.pzi-ell.is-hl .pz-dim { stroke-width: 2; }

/* el brillo de lo iluminado, en el tono de su banda */
.pzi-b .pz-e.pz-lit { animation-name: pzi-glow; }
@keyframes pzi-glow { 0% { filter: none; } 35% { filter: drop-shadow(0 0 5px var(--pzi-soft)) drop-shadow(0 0 2px var(--pzi-soft)); } 100% { filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .pzi-b .pz-e.pz-lit { animation: none !important; }
}