/* ============================================================
   TALLER DE DINÁMICA · complemento interactivo
   ------------------------------------------------------------
   Se carga DESPUÉS de taller-ingenieria.css y solo añade lo que
   esa hoja no tiene: bancos de trabajo con simuladores, tablas
   de lectura, bloques de cálculo alineados, catálogos de
   figuras y acordeones de pasos.

   Todo hereda los tokens --ti-* para que no se sienta un
   pegote: misma paleta, mismos radios, mismas sombras.
   ============================================================ */

:root{
  --tp-azul:   #38bdf8;   /* cuerpo A / curvas de posición */
  --tp-morado: #a78bfa;   /* cuerpo D / curvas de velocidad */
  --tp-naranja:#ff8a5b;   /* cuerpo B / curvas de aceleración */
  --tp-verde:  #34d399;
  --tp-oro:    #fbbf24;
  --tp-linea:  rgba(255,255,255,.10);
  --tp-panel:  rgba(255,255,255,.035);
  --tp-hondo:  #02080f;
  --tp-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* El navegador solo aplica [hidden] a elementos HTML. En SVG el grupo
   se sigue pintando, así que la regla se declara aquí a mano. */
[hidden]{ display:none !important }

/* ── puntos sobre las letras (ṙ, θ̇, θ̈) ─────────────────────
   Los acentos combinantes sobre letras griegas se despegan en
   casi todas las fuentes. Se dibujan con un pseudo-elemento. */
.d1,.d2{ position:relative; display:inline-block; line-height:1; vertical-align:baseline }
.d1::after,.d2::after{ position:absolute; left:50%; transform:translateX(-50%);
  line-height:1; pointer-events:none; font-family:inherit }
.d1::after{ content:"\00B7"; top:-.50em; font-size:1.25em }
.d2::after{ content:"\00A8"; top:-.46em }

/* ── banco de trabajo: lienzo + tablero ─────────────────────── */
.tp-banco{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,255px);
  gap:1.1rem; align-items:start; margin:1.5rem 0 }
.tp-banco.tp-angosto{ grid-template-columns:minmax(0,340px) minmax(0,1fr) }
@media (max-width:720px){ .tp-banco, .tp-banco.tp-angosto{ grid-template-columns:1fr } }

.tp-lienzo{ background:var(--tp-hondo); border:1px solid var(--tp-linea);
  border-radius:14px; padding:10px }
.tp-lienzo svg{ display:block; width:100%; height:auto; max-width:100% }

.tp-tablero{ display:flex; flex-direction:column; gap:.9rem }

/* ── tabla de lectura ───────────────────────────────────────── */
table.tp-datos{ width:100%; border-collapse:collapse; font-family:var(--tp-mono);
  font-size:.82rem; font-variant-numeric:tabular-nums }
table.tp-datos th{ font-family:inherit; font-size:.64rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ti-tenue); font-weight:800; text-align:right;
  padding:0 .5rem .45rem; border-bottom:1px solid var(--tp-linea) }
table.tp-datos th:first-child{ text-align:left }
table.tp-datos td{ padding:.45rem .5rem; text-align:right;
  border-bottom:1px solid rgba(255,255,255,.055) }
table.tp-datos td:first-child{ text-align:left; font-weight:800; font-size:.78rem }
tr.fA td:first-child{ color:var(--tp-azul) }
tr.fD td:first-child{ color:var(--tp-morado) }
tr.fB td:first-child{ color:var(--tp-naranja) }

/* ── panel de chequeos ──────────────────────────────────────── */
.tp-chequeos{ background:var(--tp-panel); border:1px solid var(--tp-linea);
  border-radius:12px; padding:.85rem .95rem }
.tp-chequeos .tp-tit{ font-size:.63rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ti-tenue); font-weight:800; margin-bottom:.55rem }
.tp-chk{ display:flex; justify-content:space-between; gap:.6rem; font-family:var(--tp-mono);
  font-size:.79rem; padding:.34rem 0; font-variant-numeric:tabular-nums; line-height:1.5 }
.tp-chk .v{ color:var(--tp-verde); font-weight:600; text-align:right }
.tp-chk .v.rojo{ color:var(--ti-rojo) }
.tp-chequeos.tp-bien{ border-color:rgba(16,185,129,.4); background:rgba(16,185,129,.07) }
.tp-chequeos.tp-alerta{ border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.07) }

/* ── mandos ─────────────────────────────────────────────────── */
.tp-mandos{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:.7rem 0 }
.tp-mandos .tp-rot{ font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ti-tenue); font-weight:800; flex:0 0 auto }
.tp-bot{ font-family:inherit; font-size:.82rem; font-weight:700;
  color:var(--ti-texto); background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14); border-radius:10px;
  padding:.55rem .9rem; cursor:pointer; min-height:40px;
  transition:background .18s, border-color .18s, transform .18s }
.tp-bot:hover{ background:rgba(124,58,237,.16); border-color:var(--ti-morado) }
.tp-bot:focus-visible{ outline:2px solid var(--ti-celeste); outline-offset:2px }
.tp-bot.on{ background:var(--ti-naranja); border-color:var(--ti-naranja); color:#150800 }
.tp-bot.tp-malo.on{ background:var(--ti-rojo); border-color:var(--ti-rojo); color:#fff }
.tp-bot.tp-chico{ font-size:.75rem; padding:.42rem .72rem; min-height:36px }
.tp-mandos input[type=range]{ flex:1 1 160px; min-width:130px;
  accent-color:var(--ti-naranja); cursor:pointer; height:34px }
.tp-reloj{ font-family:var(--tp-mono); font-size:.84rem; color:var(--tp-oro);
  font-variant-numeric:tabular-nums; flex:0 0 auto }

/* ── bloque de cálculo alineado ─────────────────────────────── */
.tp-calc{ background:var(--tp-hondo); border:1px solid var(--tp-linea);
  border-left:3px solid var(--ti-morado); border-radius:12px;
  padding:.85rem 1rem; margin:1.1rem 0;
  font-family:var(--tp-mono); font-size:.86rem; line-height:1.85;
  overflow-x:auto; white-space:pre; color:var(--ti-texto) }
.tp-ecu{ background:var(--tp-hondo); border:1px solid var(--tp-linea);
  border-left:3px solid var(--tp-oro); border-radius:12px;
  padding:1rem; margin:1.2rem 0; text-align:center; overflow-x:auto;
  font-family:var(--tp-mono); font-size:clamp(.92rem,3vw,1.12rem); letter-spacing:.02em }
.tp-ecu .t{ opacity:.22; transition:opacity .25s }
.tp-ecu .t.on{ opacity:1 }
.tA{ color:var(--tp-azul) } .tD{ color:var(--tp-morado) }
.tB{ color:var(--tp-naranja) } .tL{ color:var(--tp-oro) }
.tp-res{ display:inline-block; background:rgba(16,185,129,.14);
  border:1px solid rgba(16,185,129,.45); border-radius:9px;
  padding:.3rem .6rem .18rem; margin:.15rem .2rem .15rem 0;
  font-family:var(--tp-mono); font-size:.86rem; color:var(--tp-verde); font-weight:600 }
.tp-pista{ font-size:.93rem; color:var(--ti-suave); margin:0; line-height:1.6 }
.tp-pista b{ color:var(--ti-texto) }
.tp-mono{ font-family:var(--tp-mono); font-size:.93em }

/* ── términos explicados ────────────────────────────────────── */
.tp-terms{ display:grid; gap:.6rem; margin:1.3rem 0 }
.tp-term{ border:1px solid var(--tp-linea); border-radius:13px; background:var(--tp-panel);
  padding:.9rem 1rem; display:grid; grid-template-columns:auto 1fr; gap:.25rem 1rem;
  align-items:baseline }
.tp-term .f{ font-family:var(--tp-mono); font-size:1.02rem; font-weight:600;
  color:var(--tp-oro); grid-row:span 2; align-self:center; min-width:4.8rem }
.tp-term .nm{ font-size:.71rem; letter-spacing:.09em; text-transform:uppercase;
  font-weight:800; color:var(--ti-naranja) }
.tp-term .de{ font-size:.94rem; color:var(--ti-texto); line-height:1.6 }
.tp-term .de b{ color:#fff }
@media (max-width:520px){ .tp-term{ grid-template-columns:1fr } .tp-term .f{ grid-row:auto } }

/* ── catálogo de figuras ────────────────────────────────────── */
.tp-geos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.85rem; margin:1.3rem 0 }
.tp-geo{ border:1px solid var(--tp-linea); border-radius:13px; background:var(--tp-panel);
  padding:.8rem .85rem }
.tp-geo svg{ display:block; width:100%; height:auto; margin-bottom:.5rem }
.tp-geo .gt{ font-size:.82rem; font-weight:700; margin:0 0 .35rem;
  color:var(--ti-texto); line-height:1.45 }
.tp-geo .gf{ font-family:var(--tp-mono); font-size:.95rem; color:var(--tp-oro);
  margin:0 0 .3rem; font-weight:500 }
.tp-geo .gy{ font-family:var(--tp-mono); font-size:.69rem; color:var(--ti-tenue); margin:0 }

/* ── tabla comparativa ──────────────────────────────────────── */
.tp-tabwrap{ overflow-x:auto; margin:1.3rem 0;
  border:1px solid var(--tp-linea); border-radius:13px }
table.tp-comp{ border-collapse:collapse; width:100%; min-width:640px; font-size:.88rem }
table.tp-comp th{ font-size:.64rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ti-tenue); font-weight:800; text-align:left; padding:.75rem .85rem;
  background:rgba(255,255,255,.045); border-bottom:1px solid var(--tp-linea) }
table.tp-comp td{ padding:.7rem .85rem; border-bottom:1px solid rgba(255,255,255,.055);
  vertical-align:top; line-height:1.55 }
table.tp-comp tr:last-child td{ border-bottom:0 }
table.tp-comp td:first-child{ font-weight:700; font-size:.82rem; white-space:nowrap }
table.tp-comp .tp-mono{ font-size:.83rem }
.cXY{ color:var(--tp-verde) } .cNT{ color:var(--tp-oro) } .cRT{ color:var(--tp-morado) }

/* ── acordeón de pasos ──────────────────────────────────────── */
.tp-paso{ border:1px solid var(--tp-linea); border-radius:13px; margin-bottom:.7rem;
  background:var(--tp-panel); overflow:hidden }
.tp-paso > .cab{ display:flex; align-items:center; gap:.8rem; width:100%; text-align:left;
  background:transparent; border:0; padding:.9rem 1rem; font-family:inherit;
  font-size:.95rem; font-weight:700; color:var(--ti-texto); cursor:pointer; min-height:52px }
.tp-paso > .cab:hover{ background:rgba(124,58,237,.1) }
.tp-paso .idx{ font-family:var(--tp-mono); font-size:.7rem; font-weight:700; color:#150800;
  background:var(--tp-oro); border-radius:7px; padding:.14rem .45rem; flex:0 0 auto }
.tp-paso .cab .txt{ flex:1 1 auto; min-width:0 }
.tp-paso .cab .fl{ color:var(--ti-tenue); font-size:1rem; transition:transform .2s; flex:0 0 auto }
.tp-paso.abierto .cab .fl{ transform:rotate(90deg) }
.tp-paso .cuerpo{ padding:0 1rem 1.1rem; border-top:1px solid var(--tp-linea); font-size:.96rem }
.tp-paso .cuerpo p:first-child{ margin-top:.9rem }
.tp-paso .cuerpo p{ margin:.8rem 0 }

/* ── receta numerada ────────────────────────────────────────── */
ol.tp-receta{ counter-reset:r; list-style:none; padding:0; margin:1.1rem 0 0 }
ol.tp-receta li{ counter-increment:r; position:relative; padding:.6rem 0 .6rem 2.5rem;
  border-bottom:1px solid var(--tp-linea); font-size:.97rem; margin:0 }
ol.tp-receta li:last-child{ border-bottom:0 }
ol.tp-receta li::before{ content:counter(r); position:absolute; left:0; top:.68rem;
  font-family:var(--tp-mono); font-size:.72rem; font-weight:700; color:var(--ti-naranja);
  border:1px solid var(--ti-naranja); border-radius:6px; padding:.04rem .4rem; line-height:1.3 }

/* ── aviso verde (resultado / cierre) ───────────────────────── */
.ti-listo{ margin:1.3rem 0; padding:.95rem 1.1rem; border-radius:12px; font-size:.95rem;
  background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.3) }
.ti-listo b{ display:block; margin-bottom:.3rem; color:var(--tp-verde) }
.ti-listo p{ margin:.6rem 0 }
.ti-listo p:last-child{ margin-bottom:0 }

/* ── piezas de las figuras SVG ──────────────────────────────── */
.tp-techo,.tp-piso{ fill:#16375c; stroke:#2a5c91; stroke-width:1 }
.tp-varilla{ fill:#1b4470 }
.tp-polea{ fill:#123a63; stroke:#5e8fc0; stroke-width:1.6 }
.tp-eje{ fill:#9fb6cc }
.tp-cuerda{ fill:none; stroke:var(--tp-oro); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round }
.tp-cuerda.fina{ stroke-width:2 }
.tp-tramo{ stroke:#fff; stroke-width:7; stroke-linecap:round; opacity:0; transition:opacity .22s }
.tp-tramo.on{ opacity:.85 }
.tp-collar{ fill:#0e3a5e; stroke:var(--tp-azul); stroke-width:1.8 }
.tp-bloque{ fill:#4a2413; stroke:var(--tp-naranja); stroke-width:1.8 }
.tp-rot{ font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px; font-weight:800;
  fill:var(--ti-texto) }
.tp-rotmini{ font-family:var(--tp-mono); font-size:9.5px; fill:var(--ti-tenue) }
.tp-rotv{ font-family:var(--tp-mono); font-size:10.5px; font-weight:600 }
.tp-cota{ stroke:var(--ti-tenue); stroke-width:1; fill:none }
.tp-guia{ stroke:#2a5c91; stroke-width:1; stroke-dasharray:3 3; fill:none }
.tp-datum{ stroke:var(--ti-naranja); stroke-width:2; fill:none }
.tp-datum.malo{ stroke:var(--ti-rojo) }
.tp-punteada{ stroke:var(--ti-tenue); stroke-width:.9; stroke-dasharray:2.5 2.5;
  fill:none; opacity:.75 }
.tp-curva{ fill:none; stroke:#5e8fc0; stroke-width:2.4 }
.tp-osc{ fill:none; stroke:var(--tp-morado); stroke-width:1.1; stroke-dasharray:4 3; opacity:.75 }
.tp-brazo{ stroke:#7fa6cf; stroke-width:9; stroke-linecap:round; fill:none; opacity:.35 }
.tp-brazo2{ stroke:#b8d4ef; stroke-width:1.6; fill:none }
.tp-ejeh{ stroke:#2a5c91; stroke-width:1; stroke-dasharray:4 3; fill:none }

@media (prefers-reduced-motion:reduce){
  .tp-paso .cab .fl, .tp-tramo, .tp-ecu .t{ transition:none }
}

/* ── Cajas ruta / truco / chequeo, fórmulas con KaTeX e índice (Dinámica 14 en adelante) ── */
.tp-ruta, .tp-truco, .tp-chequeo{ margin:1.3rem 0; padding:.95rem 1.1rem; border-radius:12px; font-size:.95rem; line-height:1.65 }
.tp-ruta > b:first-child, .tp-truco > b:first-child, .tp-chequeo > b:first-child{ display:block; margin-bottom:.35rem }
.tp-ruta{ background:rgba(31,154,171,.10); border:1px solid rgba(31,154,171,.45) }
.tp-ruta > b:first-child{ color:#7fe3f0 }
.tp-ruta ol{ margin:.3rem 0 0 1.2rem; padding:0 } .tp-ruta li{ margin:.3rem 0 }
.tp-truco{ background:rgba(167,139,250,.09); border:1px solid rgba(167,139,250,.4) }
.tp-truco > b:first-child{ color:var(--tp-morado) }
.tp-truco .tp-lema{ display:block; font-weight:800; font-size:1.08rem; color:var(--ti-texto); margin:.15rem 0 .45rem }
.tp-chequeo{ background:rgba(52,211,153,.07); border:1px dashed rgba(52,211,153,.45) }
.tp-chequeo > b:first-child{ color:var(--tp-verde) }
.tp-f{ background:var(--tp-hondo); border:1px solid var(--tp-linea); border-left:3px solid var(--tp-oro);
  border-radius:12px; padding:.75rem .9rem; margin:.9rem 0; overflow-x:auto; overflow-y:hidden; max-width:100% }
.tp-f .katex-display{ margin:0; text-align:left } .tp-f .katex-display > .katex{ text-align:left }
.tp-f .katex{ font-size:1.06em }
ol.tp-indice{ margin:1.2rem 0 0; padding:0 0 0 1.3rem; columns:2; column-gap:2rem; font-size:.93rem }
ol.tp-indice li{ margin:.25rem 0; break-inside:avoid } ol.tp-indice a{ color:var(--ti-celeste); text-decoration:none }
@media (max-width:560px){ ol.tp-indice{ columns:1 } }
.tp-halo{ font-family:ui-sans-serif,system-ui,sans-serif; font-weight:700; paint-order:stroke; stroke:#02080f; stroke-width:3.2px; stroke-linejoin:round }
.tp-tactil .tp-bot{ min-height:44px } .tp-tactil .tp-mandos input[type=range]{ height:44px }
.tp-leyenda{ display:flex; flex-wrap:wrap; gap:.35rem .9rem; font-size:.84rem; color:var(--ti-suave); margin:.6rem 0 0 }
.tp-leyenda i{ display:inline-block; width:14px; height:4px; border-radius:2px; margin-right:.35rem; vertical-align:middle }
.tp-fig{ margin:1.1rem 0 } .tp-fig figcaption{ font-size:.86rem; color:var(--ti-suave); margin-top:.5rem; line-height:1.55 }
.tp-chk .v.tp-vec{ white-space:nowrap }
/* el MathML oculto de KaTeX es absoluto: sin esto se escapa del contenedor con scroll y ensancha la página */
.tp-tabwrap, .tp-f, .tp-chequeos, .ti-p-txt, .ti-opcion, .tp-paso .cuerpo{ position:relative }
/* dentro de las cajas, solo el título va en bloque; las negritas del texto siguen en línea */
.tp-tactil :is(.ti-nota, .ti-ojo, .ti-listo) :is(p b, b ~ b){ display:inline; margin:0 }
.tp-tactil .tp-mandos .tp-reloj{ min-width:5.2em; text-align:right }
@media (max-width:560px){
  .tp-tactil .tp-paso .cuerpo{ padding:0 .7rem .9rem }
  .tp-tactil .tp-f{ padding:.6rem .65rem } .tp-tactil .tp-f .katex{ font-size:.97em }
  .tp-tactil table.tp-comp{ font-size:.82rem } .tp-tactil table.tp-comp td, .tp-tactil table.tp-comp th{ padding:.5rem .45rem }
}
@media (max-width:560px){ .tp-tactil table.tp-comp td:first-child{ white-space:normal } }
.tp-tactil .tp-fig .tp-lienzo svg{ max-width:470px; margin:0 auto }
.tp-tactil .ti-seccion p a{ color:var(--ti-celeste) }