/* ============================================================
   TALLER DE ESTÁTICA · complemento interactivo
   ------------------------------------------------------------
   Se carga DESPUÉS de taller-ingenieria.css y de
   taller-dinamica-plus.css. Mismo patrón que Control, con las
   piezas de Estática: apoyos, fuerzas, momentos, cotas, ángulos
   y la vista 3D con z hacia arriba.

   TABLA DE COLORES — un color, un significado, en los 13
   talleres. No se rompe nunca:
     fuerza aplicada / carga .. naranja  #ff8a5b
     reacción de apoyo ........ celeste  #38bdf8
     momento / par ............ morado   #a78bfa
     vector de posición r ..... oro      #fbbf24
     resultante / equivalente . rosado   #f472b6
     tracción (miembro jala) .. verde    #34d399
     compresión (empuja) ...... rojo     #f87171
     geometría, cotas, ejes ... gris     #9fb6cc
     cuerpos, barras y apoyos . bronce apagado #8c7a62 (nunca
                                se confunde con una fuerza)
   ============================================================ */

:root{
  --te:      #d97706;
  --cF: #ff8a5b; --cR: #38bdf8; --cM: #a78bfa; --cP: #fbbf24; --cS: #f472b6;
  --cT: #34d399; --cC: #f87171; --cG: #9fb6cc; --cZ: #6b8ba8;
  --te-bg:   #1c1307;
  --sR: #38bdf8;
  --sE: #fbbf24;
  --sU: #ff8a5b;
  --sY: #34d399;
  --sD: #f87171;
  --sB: #a78bfa;
  --sN: #94a3b8;
  --sS: #f472b6;
}

[hidden]{ display:none !important }

/* En las cajas de la hoja base, <b> es un título en bloque. Dentro de
   un párrafo tiene que seguir siendo negrita en línea. */
.ti-nota b, .ti-ojo b, .ti-listo b, .te-truco b, .te-ruta b, .te-chequeo b
  { display:inline; margin:0; color:#fff }
.ti-nota > b:first-child, .ti-ojo > b:first-child, .ti-listo > b:first-child,
.te-truco > b:first-child, .te-ruta > b:first-child, .te-chequeo > b:first-child
  { display:block; margin-bottom:.35rem }
.ti-nota > b:first-child{ color:var(--ti-celeste) }
.ti-ojo > b:first-child{ color:var(--ti-oro) }
.ti-listo > b:first-child{ color:var(--tp-verde) }

/* ── El color de la materia en la portada ─────────────────── */
.ti-etiqueta{ color:var(--te) }
.ti-seccion > h2 .ti-num{ color:#fcd9a8; background:rgba(217,119,6,.18);
  border-color:rgba(217,119,6,.45) }

/* ── Controles de dedo: 44 px mínimo, siempre ─────────────── */
.tp-bot, .tp-bot.tp-chico{ min-height:44px }
.tp-mandos input[type=range]{ height:44px; touch-action:pan-y }
.te-sel{ font-family:inherit; font-size:.9rem; min-height:44px; padding:.4rem .7rem;
  border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(2,8,20,.8); color:var(--ti-texto) }

/* ── Tabla de colores de señales ──────────────────────────── */
.te-leyenda{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin:.9rem 0;
  font-family:var(--tp-mono); font-size:.78rem; color:var(--ti-suave) }
.te-leyenda span{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap }
.te-leyenda i{ display:inline-block; width:18px; height:4px; border-radius:2px }

/* ── Contenedor de diagramas: si es ancho, se desplaza él,
      nunca la página ─────────────────────────────────────── */
.te-diag{ background:var(--tp-hondo); border:1px solid var(--tp-linea);
  border-radius:14px; padding:10px; margin:1.2rem 0; overflow-x:auto;
  -webkit-overflow-scrolling:touch }
.te-diag svg{ display:block; width:100%; height:auto; max-width:100% }
.te-diag.te-ancho svg{ min-width:520px }
@media (min-width:600px){ .te-diag.te-ancho svg{ min-width:0 } }
.te-pie{ font-size:.82rem; color:var(--ti-tenue); text-align:center; margin:-.6rem 0 1.2rem }
.te-desliza{ display:none; font-size:.74rem; color:var(--ti-tenue); text-align:right; margin:-.9rem 0 1rem }
@media (max-width:599px){ .te-desliza{ display:block } }

/* piezas del diagrama */
.te-bloque{ fill:var(--te-bg); stroke:var(--te); stroke-width:1.8 }
.te-bloque.te-luz{ fill:#3a2408; stroke:#fcd9a8; stroke-width:2.4 }
.te-bloque.te-apag{ opacity:.25 }
.te-btxt{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:15px; font-weight:600;
  fill:#fff1dd; text-anchor:middle; dominant-baseline:central }
.te-btxt.te-peq{ font-size:12.5px }
.te-sum{ fill:var(--tp-hondo); stroke:#cbd5e1; stroke-width:1.7 }
.te-sum.te-luz{ stroke:var(--sS); stroke-width:2.6 }
.te-signo{ font-family:ui-sans-serif,system-ui,sans-serif; font-size:19px; font-weight:900;
  fill:var(--sS); text-anchor:middle; dominant-baseline:central }
.te-signo-fondo{ fill:var(--tp-hondo) }
.te-rama{ stroke:none }
.te-fl{ fill:none; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round }
.te-fl.R{ stroke:var(--sR) } .te-fl.E{ stroke:var(--sE) } .te-fl.U{ stroke:var(--sU) }
.te-fl.Y{ stroke:var(--sY) } .te-fl.D{ stroke:var(--sD) } .te-fl.B{ stroke:var(--sB) }
.te-fl.N{ stroke:var(--sN) } .te-fl.G{ stroke:#6b8ba8 }
.te-fl.te-apag{ opacity:.18 }
.te-fl.te-luz{ stroke-width:4 }
.te-hit{ fill:none; stroke:transparent; stroke-width:18; cursor:pointer; pointer-events:stroke }
.te-et{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:14px; font-weight:700 }
.te-et.R{ fill:var(--sR) } .te-et.E{ fill:var(--sE) } .te-et.U{ fill:var(--sU) }
.te-et.Y{ fill:var(--sY) } .te-et.D{ fill:var(--sD) } .te-et.B{ fill:var(--sB) }
.te-et.N{ fill:var(--sN) } .te-et.G{ fill:var(--ti-suave) }
.te-nota-svg{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; fill:var(--ti-tenue) }
.te-camino{ fill:none; stroke-width:9; stroke-linecap:round; stroke-linejoin:round; opacity:.28 }
.te-aviso-svg{ font-family:ui-sans-serif,system-ui,sans-serif; font-size:13px; font-weight:800; fill:var(--sS) }

/* ── Gráficas de respuesta ────────────────────────────────── */
.te-graf{ background:var(--tp-hondo); border:1px solid var(--tp-linea); border-radius:14px;
  padding:8px; margin:1rem 0 }
.te-graf svg{ display:block; width:100%; height:auto; max-width:100% }
.te-eje{ stroke:#3b5575; stroke-width:1 }
.te-rejilla{ stroke:rgba(255,255,255,.06); stroke-width:1 }
.te-tick{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; fill:var(--ti-tenue) }
.te-tit-eje{ font-family:ui-sans-serif,system-ui,sans-serif; font-size:11.5px; font-weight:700; fill:var(--ti-suave) }
.te-curva{ fill:none; stroke-width:2.2; stroke-linejoin:round }
.te-ref{ stroke-width:1.2; stroke-dasharray:5 4; fill:none }
.te-cota{ stroke-width:1.4; fill:none }
.te-cota-txt{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; font-weight:700 }
.te-fondo-txt{ fill:var(--tp-hondo); opacity:.92 }

/* ── Panel de información al tocar una señal ──────────────── */
.te-info{ min-height:5.2em; background:var(--tp-panel); border:1px solid var(--tp-linea);
  border-radius:12px; padding:.8rem .95rem; font-size:.93rem; color:var(--ti-suave) }
.te-info b{ color:var(--ti-texto) }
.te-info .te-chip{ display:inline-block; font-family:var(--tp-mono); font-size:.8rem; font-weight:700;
  padding:.1rem .45rem; border-radius:6px; margin-right:.3rem; color:#06101c }

/* ── Fórmula grande con KaTeX dentro de una lámina ───────── */
.te-f{ margin:1.1rem 0; padding:.9rem 1rem; border-radius:12px; background:rgba(217,119,6,.08);
  border:1px solid rgba(217,119,6,.28); border-left:3px solid var(--te);
  overflow-x:auto; overflow-y:hidden; text-align:center }
.te-f .katex{ font-size:1.18em }
.te-f .te-f-pie{ display:block; font-size:.82rem; color:var(--ti-tenue); margin-top:.5rem }
@media (max-width:640px){ .te-f .katex{ font-size:1.02em } }

/* texto matemático dentro de un párrafo */
.tex .katex{ font-size:1.02em }

/* ── Caja «ruta» y caja «truco» ───────────────────────────── */
.te-ruta{ margin:1.3rem 0; padding:.95rem 1.1rem; border-radius:12px; font-size:.95rem;
  background:rgba(217,119,6,.09); border:1px solid rgba(217,119,6,.4) }
.te-ruta > b:first-child{ color:#fcd9a8 }
.te-ruta ol{ margin:.3rem 0 0 1.2rem }
.te-truco{ margin:1.3rem 0; padding:.95rem 1.1rem; border-radius:12px; font-size:.95rem;
  background:rgba(244,114,182,.08); border:1px solid rgba(244,114,182,.38) }
.te-truco > b:first-child{ color:var(--sS) }
.te-truco .te-lema{ display:block; font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  font-weight:800; font-size:1.08rem; color:#fff; margin:.2rem 0 .45rem; line-height:1.35 }
.te-chequeo{ margin:1.3rem 0; padding:.95rem 1.1rem; border-radius:12px; font-size:.95rem;
  background:rgba(52,211,153,.06); border:1px dashed rgba(52,211,153,.45) }
.te-chequeo > b:first-child{ color:var(--sY) }

/* ── Índice de secciones ──────────────────────────────────── */
.te-indice{ margin:1.2rem 0 0; padding:.9rem 1.1rem; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08) }
.te-indice .tit{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ti-tenue);
  font-weight:800; margin-bottom:.4rem }
.te-indice ol{ margin:0 0 0 1.4rem; font-size:.92rem }
.te-indice li{ margin:.1rem 0 }
.te-indice a{ color:var(--ti-suave); text-decoration:none; display:inline-block; padding:.2rem 0 }
.te-indice a:hover{ color:#fcd9a8 }
.ti-portada .te-tiempo{ display:inline-block; margin-top:.4rem; font-family:var(--tp-mono);
  font-size:.8rem; color:var(--ti-tenue) }

/* ── Práctica con pistas progresivas ──────────────────────── */
.te-prob{ margin:1.2rem 0; padding:1.1rem 1.1rem 1rem; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09) }
.te-prob > .te-prob-num{ font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ti-tenue); font-weight:800; margin-bottom:.4rem }
.te-prob .te-enun{ margin:.2rem 0 .8rem }
.te-prob .te-pistas-botones{ display:flex; flex-wrap:wrap; gap:.5rem }
.te-pista{ margin:.7rem 0 0; padding:.75rem .9rem; border-radius:10px; font-size:.94rem;
  background:rgba(251,191,36,.07); border:1px solid rgba(251,191,36,.3) }
.te-pista > b{ color:var(--ti-oro) }
.te-sol{ margin:.7rem 0 0; padding:.8rem .95rem; border-radius:10px; font-size:.94rem;
  background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.35) }
.te-sol > b{ color:var(--sY) }

/* tabla de datos dentro de un tablero, a lo ancho */
.te-tabla{ width:100%; border-collapse:collapse; font-size:.86rem }
.te-tabla th,.te-tabla td{ padding:.45rem .55rem; border-bottom:1px solid rgba(255,255,255,.07);
  text-align:center }
.te-tabla th{ font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ti-tenue) }

/* celdas de la tabla de errores */
.te-err0{ color:var(--sY); font-weight:800 }
.te-errinf{ color:var(--sD); font-weight:800 }
.te-errnum{ color:var(--sE); font-weight:800 }
.te-celda-luz{ background:rgba(217,119,6,.22); outline:2px solid var(--te); outline-offset:-2px }

@media (prefers-reduced-motion:reduce){ .te-fl{ transition:none } }

/* La copia MathML de KaTeX va con position:absolute. Si su caja no
   tiene un ancestro posicionado dentro del contenedor con scroll, se
   escapa y ensancha la página aunque la tabla tenga overflow:auto. */
.katex{ position:relative }
.tp-tabwrap, .te-diag, .te-f, .te-graf, .tp-chequeos, .ti-p-txt, .ti-opcion{ position:relative }
.te-info .katex-display{overflow-x:auto;overflow-y:hidden}
.ti-hoja p a:not(.ti-btn), .ti-hoja li a:not(.ti-btn), .ti-hoja td a, .te-info a, .ti-nota a, .ti-listo a, .ti-ojo a{color:#fbbf77;text-underline-offset:2px}

/* ══ Piezas de Estática ══════════════════════════════════════ */
.te-lam{ background:var(--tp-hondo); border:1px solid var(--tp-linea); border-radius:14px;
  padding:8px; margin:1.1rem 0; overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative }
.te-lam svg{ display:block; width:100%; height:auto; max-width:100%; touch-action:pan-y }
.te-lam.te-3d svg{ touch-action:none; cursor:grab }
.te-lam .te-ayuda{ position:absolute; right:10px; bottom:6px; font-size:.7rem; color:var(--ti-tenue); pointer-events:none }
.te-cuerpo{ fill:#262019; stroke:#a8906c; stroke-width:1.8; stroke-linejoin:round }
.te-cuerpo.te-sin{ fill:none }
.te-barra{ stroke:#8c7a62; stroke-width:6; stroke-linecap:round; fill:none }
.te-apoyo{ fill:#1b2636; stroke:#cbd5e1; stroke-width:1.5; stroke-linejoin:round }
.te-suelo{ stroke:#cbd5e1; stroke-width:1.4; fill:none }
.te-rayado{ stroke:#6b8ba8; stroke-width:1; fill:none }
.te-pin{ fill:#e2e8f0; stroke:#0b1220; stroke-width:1.2 }
.te-nodo{ fill:#e2e8f0; stroke:#0b1220; stroke-width:1.2 }
.te-v{ fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
.te-v.F{ stroke:var(--cF) } .te-v.R{ stroke:var(--cR) } .te-v.M{ stroke:var(--cM) }
.te-v.P{ stroke:var(--cP) } .te-v.S{ stroke:var(--cS) } .te-v.T{ stroke:var(--cT) }
.te-v.C{ stroke:var(--cC) } .te-v.G{ stroke:var(--cG); stroke-width:1.4 }
.te-v.Z{ stroke:var(--cZ); stroke-width:1.2 }
.te-lbl{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; font-weight:700;
  paint-order:stroke; stroke:var(--tp-hondo); stroke-width:4px; stroke-linejoin:round }
.te-lbl.F{ fill:var(--cF) } .te-lbl.R{ fill:var(--cR) } .te-lbl.M{ fill:var(--cM) }
.te-lbl.P{ fill:var(--cP) } .te-lbl.S{ fill:var(--cS) } .te-lbl.T{ fill:var(--cT) }
.te-lbl.C{ fill:var(--cC) } .te-lbl.G{ fill:var(--cG) } .te-lbl.Z{ fill:var(--cZ) }
.te-lbl.K{ fill:#fff1dd }
.te-lbl.peq{ font-size:11px; font-weight:600 }
.te-ref{ stroke:var(--cG); stroke-width:1.1; stroke-dasharray:5 4; fill:none }
.te-arco{ fill:none; stroke:var(--cG); stroke-width:1.3 }
.te-cuna{ fill:rgba(159,182,204,.12); stroke:none }
.te-cota{ stroke:var(--cG); stroke-width:1.1; fill:none }
.te-cota-ext{ stroke:var(--cG); stroke-width:.9; stroke-dasharray:2 3; fill:none }
.te-aviso{ font-family:ui-sans-serif,system-ui,sans-serif; font-size:11.5px; font-weight:700; fill:var(--cS) }
.te-eje3{ stroke-width:1.4; fill:none }
.te-malla{ stroke:rgba(255,255,255,.07); stroke-width:1; fill:none }

/* leyenda de colores */
.te-leyenda{ display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin:.8rem 0;
  font-family:var(--tp-mono); font-size:.76rem; color:var(--ti-suave) }
.te-leyenda span{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap }
.te-leyenda i{ display:inline-block; width:18px; height:4px; border-radius:2px }

/* tablero de números junto al lienzo: en el celular va debajo */
.te-duo{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:1rem; align-items:start; margin:1.1rem 0 }
.te-duo > *{ min-width:0 }
.te-duo .te-lam{ margin:0 }
@media (max-width:760px){ .te-duo{ grid-template-columns:minmax(0,1fr) } }
.te-datos{ background:var(--tp-panel); border:1px solid var(--tp-linea); border-radius:12px;
  padding:.8rem .95rem; font-size:.9rem }
.te-datos .fila{ display:flex; justify-content:space-between; gap:.6rem; padding:.28rem 0;
  border-bottom:1px solid rgba(255,255,255,.06) }
.te-datos .fila:last-child{ border-bottom:0 }
.te-datos .fila span:first-child{ color:var(--ti-suave) }
.te-datos .fila b{ font-family:var(--tp-mono); color:#fff; text-align:right; white-space:nowrap }
.te-datos .te-ver{ margin-top:.55rem; padding:.5rem .65rem; border-radius:8px; font-size:.86rem; line-height:1.45 }
.te-ver.bien{ background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.4); color:#c8f5e2 }
.te-ver.mal{ background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.4); color:#fde0e0 }
.te-ver.neutro{ background:rgba(159,182,204,.08); border:1px solid rgba(159,182,204,.3); color:var(--ti-suave) }
.te-dato-t{ font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ti-tenue); font-weight:800; margin-bottom:.3rem }

/* botones de escoger */
.te-botones{ display:flex; flex-wrap:wrap; gap:.45rem; margin:.6rem 0 }
.tp-bot.on{ background:rgba(217,119,6,.22); border-color:var(--te); color:#fff }

/* Tabla de decisiones (página de entrada) */
.te-tabla{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px }
.te-tabla th,.te-tabla td{ padding:.55rem .6rem; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; vertical-align:top }
.te-tabla th{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ti-tenue) }

/* ── Parcial 1: figura 3D dentro del enunciado de «Ahora tú» y frase memotecnia de cada método ── */
.te-enun .te-fig3{ margin:.7rem 0 }
.te-enun .te-fig3 svg{ max-height:340px }
.mnemo{ background:rgba(255,94,0,.09); border:1px solid rgba(255,94,0,.32); border-radius:18px; padding:.9rem 1.05rem; margin:1.1rem 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.06) }
.mnemo .tag{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#fbbf77; font-weight:700 }
.mnemo .ph{ font-weight:900; font-size:clamp(1.25rem,4.6vw,1.8rem); line-height:1.15; margin:.3rem 0 .35rem; color:#fff; text-wrap:balance; overflow-wrap:anywhere }
.mnemo .ph em{ font-style:normal; color:#ff7a2e }
.mnemo p{ margin:.25rem 0 !important; font-size:.95rem; opacity:.85; max-width:none }