/*!
 * SoyTecnoTeacher · stt-marca.css
 * La marca de soytecnoteacher.com en los simuladores sueltos (23-oct-2026): los colores y las fuentes del tema
 * (theme.json) y el «cuaderno técnico» de las unidades (mecanismos-v2). Fondo hueso con cuadrícula de puntos, papel
 * blanco con borde piedra, títulos en Spectral, etiquetas en JetBrains Mono, lo elegido en tinta y el verde de la marca
 * solo para lo principal. Cada simulador la enlaza antes de su propio <style>, que añade lo suyo; las fuentes las carga
 * cada HTML con un <link> a Google Fonts, como el tema.
 * (c) Jaime Aniorte Garcia · soytecnoteacher.com · Licencia CC BY-NC-ND 4.0
 * https://creativecommons.org/licenses/by-nc-nd/4.0/deed.es
 */
:root{
  --bg:#FAFAF7; --blanco:#FFFFFF; --paper:#F4F4EF;
  --ink:#0B1B2B; --muted:#5B6675; --stone:#E8E8E3; --stone-2:#D4D4CC; --linea:var(--stone-2);
  --brand:#10B981; --brand-dark:#059669; --brand-soft:#ECFDF5; --brand-tinta:#062A1F;
  --coral:#FF6B6B; --coral-dark:#B42318; --coral-soft:#FFF1F0;
  --mostaza:#E0B84C; --mostaza-soft:#FFF8E7; --amber:#F2B53B; --rojo:#EF4444;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Spectral',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --sombra:0 1px 2px rgba(11,27,43,.04),0 4px 16px rgba(11,27,43,.05);
  --ease-out:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);color:var(--ink);line-height:1.45;background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px,rgba(11,27,43,.055) 1px,transparent 0);background-size:24px 24px}

/* la cabecera: clara, como la de la web; la etiqueta en mono, el título en Spectral y los modos como pestañas */
.sim-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:4px 24px;max-width:1200px;margin:0 auto;
  padding:22px 16px 0;border-bottom:1px solid var(--stone);background:transparent;color:var(--ink)}
.sim-titulo{display:flex;flex-direction:column;gap:6px;padding-bottom:12px}
.sim-etiqueta{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-dark)}
.sim-logo{font-family:var(--serif);font-weight:700;font-size:clamp(1.35rem,2.6vw,1.75rem);letter-spacing:-.015em;line-height:1.1}
.sim-modos{display:flex;flex-wrap:wrap;gap:0 2px}
.sim-modos button{font:inherit;font-weight:500;cursor:pointer;background:none;color:var(--muted);border:0;border-bottom:2px solid transparent;
  border-radius:0;padding:10px 12px 12px;min-height:44px;margin-bottom:-1px;transition:color 150ms ease,border-color 150ms ease}
.sim-modos button.activo{color:var(--ink);font-weight:600;border-bottom-color:var(--brand)}
.sim-modos button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* en el móvil, las pestañas van en una sola línea que se desliza de lado; el degradado de la derecha avisa de que hay
   más, y el hueco del final deja sacar la última de debajo del degradado (cada simulador desliza la activa a la vista) */
@media (max-width:700px){
  .sim-top{padding-top:16px}
  .sim-modos{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;width:100%;padding-right:40px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .sim-modos::-webkit-scrollbar{display:none}
  .sim-modos button{flex:none;white-space:nowrap;margin-bottom:0}
}

/* las cajas: papel blanco, borde piedra y sombra suave; el lienzo, papel cuadriculado */
.sim-lienzo{background-color:var(--blanco);background-image:radial-gradient(circle at 1px 1px,rgba(11,27,43,.08) 1px,transparent 0);
  background-size:16px 16px;border:1px solid var(--stone);border-radius:14px;box-shadow:var(--sombra)}
.sim-panel{background:var(--blanco);border:1px solid var(--stone);border-radius:14px;padding:16px;box-shadow:var(--sombra)}
.sim-panel h2{font-family:var(--serif);font-size:1.4rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:.1rem 0 .5rem}
.sim-panel h3{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:1.1rem 0 .45rem}
/* el móvil (28-oct-2026, docs/movil/maquetas-paso-2.html): la etiqueta de la cabecera y los títulos del panel, de 10 a 12 px */
@media (max-width:781px){ .sim-etiqueta,.sim-panel h3{font-size:.75rem} }
.ayuda{font-size:.85rem;color:var(--muted);line-height:1.45;margin:.2rem 0 .8rem}
.ctrl-row{display:flex;flex-wrap:wrap;gap:6px}

/* los botones, en dos niveles: el normal, blanco con borde; lo elegido, en tinta; lo principal, en el verde de la marca */
.btn{font:inherit;font-weight:500;cursor:pointer;background:var(--blanco);color:var(--ink);border:1px solid var(--stone-2);border-radius:10px;
  padding:7px 12px;min-height:44px;min-width:44px;
  transition:transform 160ms var(--ease-out),border-color 150ms ease,background-color 150ms ease,color 150ms ease}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn[aria-pressed="true"],.btn.activo{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.btn.primario{background:var(--brand);border-color:var(--brand);color:var(--brand-tinta);font-weight:600}
.btn.peligro{border-color:#F5B5AE;color:var(--coral-dark)}
.btn:disabled{cursor:default;opacity:.5;transform:none}

/* el ratón solo cambia las cosas en el ordenador (en el móvil, el toque dejaría el estado pegado) */
@media (hover:hover) and (pointer:fine){
  .sim-modos button:hover{color:var(--ink)}
  .btn:hover:not(:disabled){border-color:var(--ink)}
  .btn.primario:hover:not(:disabled){background:#0EA572;border-color:#0EA572}
}
@media (prefers-reduced-motion:reduce){
  .btn,.sim-modos button{transition:none}
  .btn:active{transform:none}
}

/* ---------- la barra de acciones (28-oct-2026), encima del lienzo: la pone stt-acciones.js ----------
   Iconos de trazo con su texto; en el móvil, solo los iconos (el nombre va en el title y el aria-label), en una línea que
   se desliza. Lo pulsado (el modo clase), en tinta, como lo elegido. */
.sim-acciones{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:2px 2px 8px;margin:0 0 6px;border-bottom:1px solid var(--stone)}
.sim-acciones:empty{display:none}
/* arriba y a lo ancho, entre la cabecera y el contenido: una barra de menús, en su caja */
.sim-barra{max-width:1200px;margin:0 auto;padding:12px 16px 0}
.sim-barra .sim-acciones{margin:0;padding:4px 6px;background:var(--blanco);border:1px solid var(--stone);border-radius:12px;box-shadow:var(--sombra)}
.sim-barra:has(.sim-acciones:empty){display:none}
.sim-acciones .sep{width:1px;height:24px;background:var(--stone-2);margin:0 6px;flex:none}
.sim-accion{font:inherit;font-size:.86rem;font-weight:500;display:inline-flex;align-items:center;gap:6px;min-height:40px;min-width:40px;padding:6px 10px;
  border:1px solid transparent;border-radius:9px;background:transparent;color:var(--ink);cursor:pointer;
  transition:background-color 150ms ease,border-color 150ms ease,transform 160ms var(--ease-out)}
.sim-accion svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sim-accion:active{transform:scale(.97)}
.sim-accion:disabled{opacity:.36;cursor:default;transform:none}
.sim-accion[aria-pressed="true"]{background:var(--ink);color:#fff}
.sim-accion:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
@media (hover:hover) and (pointer:fine){ .sim-accion:hover:not(:disabled):not([aria-pressed="true"]){background:var(--paper);border-color:var(--stone-2)} }
@media (max-width:700px){
  .sim-acciones{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sim-acciones::-webkit-scrollbar{display:none}
  .sim-accion{min-width:44px;min-height:44px;justify-content:center;flex:none}
  .sim-accion span{display:none}
}
.sim-aviso{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;
  font-size:.92rem;line-height:1.4;box-shadow:var(--sombra);z-index:50;max-width:min(92vw,520px)}
.sim-aviso[hidden]{display:none}
@media (prefers-reduced-motion:reduce){ .sim-accion{transition:none} .sim-accion:active{transform:none} }
@media print{ .sim-acciones,.sim-aviso{display:none!important} }

/* ---------- Los simuladores 3D de mecanismos: el panel flotante sobre el lienzo (<body class="sim-3d">) ----------
   Una capa con el ámbito .sim-3d, que gana a los estilos de cada página sin tocarlos. El panel lleva arriba su
   <h2><span class="sim-etiqueta">…</span><span class="sim-logo">…</span></h2>; en el móvil, el <h2> es el asa que lo
   pliega y la etiqueta se esconde. */
body.sim-3d{font-family:var(--sans);color:var(--ink);background-color:var(--bg)}
.sim-3d #panel,.sim-3d #datos{background:rgba(255,255,255,.96);border:1px solid var(--stone);border-radius:14px;box-shadow:var(--sombra);color:var(--muted)}
.sim-3d #panel h2{font-weight:400;color:var(--ink);border-bottom:1px solid var(--stone);padding-bottom:10px;margin-bottom:12px}
.sim-3d #panel h2 .sim-etiqueta,.sim-3d #panel h2 .sim-logo{display:block}
.sim-3d #panel h2 .sim-etiqueta{margin-bottom:5px}
.sim-3d #panel h2 .sim-logo{font-size:1.3rem}
.sim-3d .ctrl-group label,.sim-3d .fila{color:var(--muted)}
.sim-3d .ctrl-group label span,.sim-3d .fila .nom,.sim-3d .formulas strong,.sim-3d #totales strong,.sim-3d #totales .val,.sim-3d .info-box strong,.sim-3d .info-box .val{color:var(--ink)}
.sim-3d .sub{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sim-3d .nota,.sim-3d .leyenda,.sim-3d .formulas{color:var(--muted)}
.sim-3d .formulas,.sim-3d .bloque{border-top-color:var(--stone)}
/* palancas: las etiquetas de cada lado, en mono, con el color de su muñeco en el 3D (F1 azul, F2 verde) como barra */
.sim-3d .side-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:none;border-radius:0;padding:1px 0 1px 8px;border-left:3px solid var(--stone-2)}
.sim-3d .side-left{color:#1D4ED8;border-left-color:#3B82F6}
.sim-3d .side-right{color:var(--brand-dark);border-left-color:var(--brand)}
.sim-3d .info-box{background:var(--paper);border:1px solid var(--stone);border-radius:10px}
.sim-3d .info-box .formula{font-family:var(--mono);color:var(--muted)}
.sim-3d input[type="range"]{background:var(--stone-2)}
.sim-3d input[type="range"]::-webkit-slider-thumb{background:var(--brand-dark)}
.sim-3d input[type="range"]::-moz-range-thumb{background:var(--brand-dark);border:0;width:14px;height:14px;border-radius:50%}
.sim-3d .paso{border-color:var(--stone-2)}
.sim-3d .paso button{background:var(--paper);color:var(--ink)}
.sim-3d .paso input,.sim-3d .paso output{font-family:var(--sans);color:var(--ink)}
/* los botones: lo principal, en el verde de la marca; lo demás, blanco con borde; lo elegido, en tinta */
.sim-3d .btn{font-family:var(--sans);border:1px solid var(--stone-2);border-radius:10px;transition:transform 160ms var(--ease-out),background-color 150ms ease,border-color 150ms ease,color 150ms ease}
.sim-3d .btn-primary,.sim-3d #btnPausa{background:var(--brand);border-color:var(--brand);color:var(--brand-tinta)}
.sim-3d .btn-primary.pausado,.sim-3d #btnPausa.pausado{background:var(--ink);border-color:var(--ink);color:#fff}
.sim-3d .btn-secondary,.sim-3d .btn-gray,.sim-3d .btn-tipo{background:var(--blanco);border:1px solid var(--stone-2);color:var(--ink)}
.sim-3d .btn-secondary.active,.sim-3d .btn-tipo.active,.sim-3d .unidades button.active{background:var(--ink);border-color:var(--ink);color:#fff}
.sim-3d .unidades button{background:var(--blanco);color:var(--ink)}
.sim-3d #infoMov span{color:var(--brand-dark)}
/* los avisos y el reto: una barra de color a la izquierda, sin emojis */
.sim-3d .aviso-choque{background:var(--coral-soft);color:#7A1F1A;border:0;border-left:3px solid var(--coral);border-radius:0 8px 8px 0}
.sim-3d .aviso-socavado,.sim-3d .aviso{background:var(--mostaza-soft);color:#7A5A12;border:0;border-left:3px solid var(--mostaza);border-radius:0 8px 8px 0}
.sim-3d .nota-dato{border-left:3px solid var(--stone-2);border-radius:0 8px 8px 0;background:var(--paper)}
.sim-3d .aviso-linea{color:var(--coral-dark);font-weight:600}
.sim-3d #retoBox{background:var(--paper);border:0;border-left:3px solid var(--ink);border-radius:0 8px 8px 0}
.sim-3d #retoBox.resuelto{background:var(--brand-soft);border-left-color:var(--brand);color:#064E3B}
.sim-3d .eq-yes{color:var(--brand-dark)}
.sim-3d .eq-no{color:var(--coral-dark)}
.sim-3d #tabla th,.sim-3d .tabla th{color:var(--muted);border-bottom:1.5px solid var(--ink)}
.sim-3d #tabla td,.sim-3d .tabla td{border-bottom-color:var(--stone)}
.sim-3d #hint{background:rgba(255,255,255,.92);border:1px solid var(--stone);border-radius:10px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .sim-3d .btn-primary:hover,.sim-3d #btnPausa:hover{background:#0EA572;border-color:#0EA572}
  .sim-3d .btn-primary.pausado:hover,.sim-3d #btnPausa.pausado:hover{background:#1B2E40}
  .sim-3d .btn-secondary:hover,.sim-3d .btn-gray:hover,.sim-3d .btn-tipo:hover{background:var(--blanco);border-color:var(--ink)}
}
@media (max-width:640px){
  .sim-3d #panel h2{background:var(--blanco);padding-right:44px}
  .sim-3d #panel h2 .sim-etiqueta{display:none}
  .sim-3d #panel h2 .sim-logo{font-size:1.1rem}
  /* la flecha del asa, dibujada (antes, una «v» de letra) */
  .sim-3d #panel h2::after{content:'';float:none;position:absolute;right:20px;top:50%;width:8px;height:8px;
    border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg)}
  .sim-3d #panel.collapsed h2::after{transform:translateY(-20%) rotate(-135deg)}
  .sim-3d #datos h3{background:var(--blanco);color:var(--ink)}
  /* la pista del ratón no sirve en el móvil y tapaba el título del panel plegado */
  .sim-3d #hint{display:none}
}