/* ============================================================
   TALLER DE CONTROL · complemento interactivo
   ------------------------------------------------------------
   Se carga DESPUÉS de taller-ingenieria.css y de
   taller-dinamica-plus.css. Solo añade lo que Control necesita:
   diagramas de bloques, gráficas de respuesta en el tiempo,
   pistas progresivas y la tabla de colores de señales.

   TABLA DE COLORES — un color, un significado, en los 10
   talleres. No se rompe nunca:
     R  referencia ........... celeste  #38bdf8
     E  error / actuante ..... oro      #fbbf24
     U  señal de control ..... naranja  #ff8a5b
     Y  salida ............... verde    #34d399
     D  perturbación ......... rojo     #f87171
     B  lo que vuelve (H·Y) .. morado   #a78bfa
     N  ruido del sensor ..... gris     #94a3b8
     ±  signo del sumador .... rosado   #f472b6
     bloques ................. violeta de Control #7c6cf0
   ============================================================ */

:root{
  --tc:      #7c6cf0;
  --tc-bg:   #0f1733;
  --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, .tc-truco b, .tc-ruta b, .tc-chequeo b
  { display:inline; margin:0; color:#fff }
.ti-nota > b:first-child, .ti-ojo > b:first-child, .ti-listo > b:first-child,
.tc-truco > b:first-child, .tc-ruta > b:first-child, .tc-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(--tc) }
.ti-seccion > h2 .ti-num{ color:#c9c2ff; background:rgba(124,108,240,.18);
  border-color:rgba(124,108,240,.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 }
.tc-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 ──────────────────────────── */
.tc-leyenda{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin:.9rem 0;
  font-family:var(--tp-mono); font-size:.78rem; color:var(--ti-suave) }
.tc-leyenda > span{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap }
.tc-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 ─────────────────────────────────────── */
.tc-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 }
.tc-diag svg{ display:block; width:100%; height:auto; max-width:100% }
.tc-diag.tc-ancho svg{ min-width:520px }
@media (min-width:600px){ .tc-diag.tc-ancho svg{ min-width:0 } }
.tc-pie{ font-size:.82rem; color:var(--ti-tenue); text-align:center; margin:-.6rem 0 1.2rem }
.tc-desliza{ display:none; font-size:.74rem; color:var(--ti-tenue); text-align:right; margin:-.9rem 0 1rem }
@media (max-width:599px){ .tc-desliza{ display:block } }

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

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

/* ── Panel de información al tocar una señal ──────────────── */
.tc-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) }
.tc-info b{ color:var(--ti-texto) }
.tc-info .tc-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 ───────── */
.tc-f{ margin:1.1rem 0; padding:.9rem 1rem; border-radius:12px; background:rgba(124,108,240,.08);
  border:1px solid rgba(124,108,240,.28); border-left:3px solid var(--tc);
  overflow-x:auto; overflow-y:hidden; text-align:center }
.tc-f .katex{ font-size:1.18em }
.tc-f .tc-f-pie{ display:block; font-size:.82rem; color:var(--ti-tenue); margin-top:.5rem }
@media (max-width:640px){ .tc-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» ───────────────────────────── */
.tc-ruta{ margin:1.3rem 0; padding:.95rem 1.1rem; border-radius:12px; font-size:.95rem;
  background:rgba(124,108,240,.09); border:1px solid rgba(124,108,240,.4) }
.tc-ruta > b:first-child{ color:#c9c2ff }
.tc-ruta ol{ margin:.3rem 0 0 1.2rem }
.tc-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) }
.tc-truco > b:first-child{ color:var(--sS) }
.tc-truco .tc-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 }
.tc-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) }
.tc-chequeo > b:first-child{ color:var(--sY) }

/* ── Índice de secciones ──────────────────────────────────── */
.tc-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) }
.tc-indice .tit{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ti-tenue);
  font-weight:800; margin-bottom:.4rem }
.tc-indice ol{ margin:0 0 0 1.4rem; font-size:.92rem }
.tc-indice li{ margin:.1rem 0 }
.tc-indice a{ color:var(--ti-suave); text-decoration:none; display:inline-block; padding:.2rem 0 }
.tc-indice a:hover{ color:#c9c2ff }
.ti-portada .tc-tiempo{ display:inline-block; margin-top:.4rem; font-family:var(--tp-mono);
  font-size:.8rem; color:var(--ti-tenue) }

/* ── Práctica con pistas progresivas ──────────────────────── */
.tc-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) }
.tc-prob > .tc-prob-num{ font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ti-tenue); font-weight:800; margin-bottom:.4rem }
.tc-prob .tc-enun{ margin:.2rem 0 .8rem }
.tc-prob .tc-pistas-botones{ display:flex; flex-wrap:wrap; gap:.5rem }
.tc-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) }
.tc-pista > b{ color:var(--ti-oro) }
.tc-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) }
.tc-sol > b{ color:var(--sY) }

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

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

@media (prefers-reduced-motion:reduce){ .tc-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, .tc-diag, .tc-f, .tc-graf, .tp-chequeos, .ti-p-txt, .ti-opcion{ position:relative }
.tc-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, .tc-info a, .ti-nota a, .ti-listo a, .ti-ojo a{color:#b3a9ff;text-underline-offset:2px}

/* ── Bloque «Qué significa cada símbolo» en Control: las unidades largas
   («unidades de la salida ÷ unidades de la entrada») pueden partirse de
   renglón; si no, empujan la página de lado a 360 px. ── */
.ti-simbolos{ overflow-x:auto; max-width:100% }
.ti-simbolos dd i.u{ white-space:normal }
.tp-paso .cuerpo .ti-simbolos{ margin-top:.6rem }
/* una letra matemática dentro de un rótulo en mayúsculas no se vuelve mayúscula (a no es A) */
.tp-rot .katex, .tp-term .nm .katex, .tp-chequeos .tp-tit .katex{ text-transform:none; letter-spacing:0 }
.tp-mandos .tp-rot .katex{ font-size:1rem; color:var(--ti-texto) }
/* Las fórmulas en bloque de las soluciones, pistas y retroalimentación se
   desplazan dentro de su caja en vez de ensanchar la página (a 360 px la
   solución del ejercicio 2 del taller 1 se salía 16 px). */
.tc-sol .katex-display, .tc-pista .katex-display, .tc-enun .katex-display, .ti-fb .katex-display, .tp-paso .cuerpo > .katex-display{ overflow-x:auto; overflow-y:hidden; max-width:100%; padding-bottom:2px }
/* un símbolo dentro de un encabezado de tabla no se pasa a mayúsculas (V_o no es V_O) */
table.tp-comp th .katex{ text-transform:none; letter-spacing:0 }

/* ── «Así lo hace el profe»: el método de clase en movimientos (taller 15) ── */
.tc-profe{ margin:1.2rem 0; padding:.9rem 1rem; border-radius:12px; background:rgba(56,189,248,.07); border:1px solid rgba(56,189,248,.35) }
.tc-profe > b:first-child{ color:#7dd3fc; display:block; margin-bottom:.35rem }
.tc-profe ol{ list-style:none; margin:0; padding:0; counter-reset:mov }
.tc-profe li{ counter-increment:mov; position:relative; padding:.35rem 0 .35rem 2.3rem; border-top:1px dashed rgba(255,255,255,.08); font-size:.93rem }
.tc-profe li:first-child{ border-top:0 }
.tc-profe li::before{ content:counter(mov); position:absolute; left:0; top:.35rem; width:1.7rem; height:1.7rem; border-radius:50%;
  background:rgba(56,189,248,.2); color:#bae6fd; font-weight:900; font-size:.85rem; display:flex; align-items:center; justify-content:center }
.tc-profe .mv{ display:inline-block; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; font-weight:800; color:#04080f;
  background:#7dd3fc; border-radius:5px; padding:.08rem .38rem; margin-right:.35rem; vertical-align:.1em }
.tc-profe .tc-profe-ir{ display:inline-flex; align-items:center; min-height:44px; margin-top:.3rem; color:#7dd3fc; font-weight:700; text-decoration:none }
.tc-profe .tc-profe-ir:hover{ text-decoration:underline }
/* una letra matemática dentro del encabezado de una tc-tabla no se pasa a mayúsculas (K_p no es K_P) */
.tc-tabla th .katex{ text-transform:none; letter-spacing:0 }