/* Simulador de secuencias neumáticas (prefijo "sn"). Welectronic. */
.sn { --sn-ink: var(--navy, #0b1f33); --sn-muted: var(--muted, #4a5d70); --sn-line: var(--line, #cfdae6); --sn-card: var(--card, #ffffff); --sn-acc: var(--accent, #e0731a);
  --sn-blue: #2a6fb0; --sn-green: #1a7f4b; --sn-red: #b42318; --sn-soft: #f1f5f9; --sn-warn: #fff7ef;
  background: var(--sn-card); color: var(--sn-ink); border: 1px solid var(--sn-line); border-radius: 8px; padding: 16px; margin: 26px 0;
  display: flex; flex-direction: column; gap: 12px; min-width: 0; font-size: 16px; line-height: 1.45; }
.sn *, .sn *::before, .sn *::after { box-sizing: border-box; }
.sn-head { display: flex; flex-direction: column; gap: 2px; }
.sn-head strong { font-size: 1.15rem; }
.sn-head span { color: var(--sn-muted); font-size: .92rem; }
.sn button { font: inherit; cursor: pointer; }
.sn button:focus-visible, .sn input:focus-visible, .sn summary:focus-visible { outline: 3px solid var(--sn-acc); outline-offset: 2px; }
.sn-tabs, .sn-variants, .sn-row, .sn-phopts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sn-lbl { font-size: .78rem; font-weight: 700; color: var(--sn-muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.sn-btn { font-size: .88rem; font-weight: 600; padding: 7px 12px; min-height: 40px; border-radius: 4px; border: 1px solid var(--sn-line); background: var(--sn-soft); color: var(--sn-ink); }
.sn-btn:hover:not(:disabled) { border-color: var(--sn-ink); }
.sn-btn:disabled { opacity: .5; cursor: default; }
.sn-primary { background: var(--sn-acc); border-color: var(--sn-acc); color: #0b1f33; }
.sn-tab { border-color: var(--sn-ink); background: var(--sn-card); font-size: .84rem; padding: 6px 10px; }
.sn-tab[aria-pressed="true"], .sn-var[aria-pressed="true"] { background: var(--sn-ink); color: #fff; }
.sn-var[aria-pressed="true"] { background: var(--sn-acc); border-color: var(--sn-acc); color: #0b1f33; }
.sn-story { margin: 0; padding: 10px 12px; border-left: 4px solid var(--sn-acc); background: var(--sn-warn); border-radius: 4px; font-size: .92rem; line-height: 1.55; color: #0b1f33; }
.sn-flaw { margin: 0; padding: 10px 12px; border-left: 4px solid var(--sn-red); background: #fdeceb; border-radius: 4px; font-size: .9rem; color: #0b1f33; }
.sn-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sn-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (max-width: 880px) { .sn-main { display: flex; flex-direction: column; } }
.sn-proc, .sn-phase { display: block; width: 100%; border: 1px solid var(--sn-line); border-radius: 6px; background: var(--sn-card); }
.sn-ctrl { display: flex; flex-direction: column; gap: 8px; }
.sn-mode, .sn-speed { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; }
.sn-mode label { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.sn-speed input[type="range"] { width: 120px; }
.sn-speed output { min-width: 3.2em; font-weight: 700; }
.sn-card { border: 1px solid var(--sn-line); border-radius: 6px; padding: 10px 12px 12px; background: var(--sn-card); color: var(--sn-ink); min-width: 0; }
.sn-card h4 { margin: 0 0 8px; font-size: .95rem; color: var(--sn-ink); }
.sn-schem { overflow-x: auto; }
.sn-svg { display: block; width: 100%; height: auto; color: var(--sn-ink); }
.sn-svg .sn-cname { font: 700 11px Helvetica, Arial, sans-serif; fill: var(--sn-ink); }
.sn-svg .sn-cbody { fill: #e8eef4; stroke: #5b6b7c; stroke-width: 2; }
.sn-svg .sn-pis { fill: #5b6b7c; }
.sn-svg .sn-rod { stroke: #5b6b7c; stroke-width: 7; fill: #5b6b7c; stroke-linecap: butt; }
.sn-svg .sn-spring { fill: none; stroke: #5b6b7c; stroke-width: 2; }
.sn-svg .sn-sens { fill: #e8eef4; stroke: #5b6b7c; stroke-width: 2; }
.sn-svg .sn-sens.on { fill: var(--sn-green); stroke: #0e5a33; }
.sn-svg .sn-stxt { font: 700 9px Helvetica, Arial, sans-serif; fill: var(--sn-ink); pointer-events: none; }
.sn-svg .sn-sens.on + .sn-stxt { fill: #fff; }
.sn-svg .sn-vbox { fill: #fff; stroke: var(--sn-ink); stroke-width: 2; }
.sn-svg .sn-vbox.on { fill: #dcebf8; stroke: var(--sn-blue); stroke-width: 3; }
.sn-svg .sn-vbox.bad { fill: #fbe0de; stroke: var(--sn-red); stroke-width: 3; }
.sn-svg .sn-varr { stroke: var(--sn-ink); stroke-width: 1.6; fill: none; color: var(--sn-ink); }
.sn-svg .sn-ptxt { font: 600 10px Helvetica, Arial, sans-serif; fill: var(--sn-muted); }
.sn-svg .sn-pipe { fill: none; stroke: #9fb0c2; stroke-width: 3; }
.sn-svg .sn-pipe.on { stroke: var(--sn-blue); }
.sn-svg .sn-pilot { fill: #fff; stroke: var(--sn-ink); stroke-width: 1.8; }
.sn-svg .sn-pilot.on { fill: var(--sn-acc); }
.sn-svg .sn-pilot.bad { fill: var(--sn-red); }
.sn-svg .sn-pilot.on ~ text { fill: #000; }
.sn-svg .sn-eq { font: 600 10.5px Helvetica, Arial, sans-serif; fill: var(--sn-ink); }
.sn-svg .sn-aux { fill: var(--sn-soft); stroke: #7f97ae; stroke-width: 1.5; }
.sn-svg .sn-auxt { font: 700 11px Helvetica, Arial, sans-serif; fill: var(--sn-ink); }
.sn-svg .sn-auxs { font: 500 9.5px Helvetica, Arial, sans-serif; fill: var(--sn-muted); }
.sn-svg .sn-lamp { fill: #fff; stroke: #5b6b7c; stroke-width: 1.8; }
.sn-svg .sn-lamp.on { fill: var(--sn-acc); stroke: #a84f08; }
.sn-stepbar { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.sn-stepbar li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--sn-line); border-radius: 999px; background: var(--sn-soft); font-weight: 700; font-size: .88rem; color: var(--sn-ink); }
.sn-stepbar li span { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: #7f97ae; color: #fff; align-items: center; justify-content: center; font-size: .75rem; }
.sn-stepbar li.cur { background: var(--sn-acc); border-color: var(--sn-acc); color: #0b1f33; }
.sn-stepbar li.cur span { background: #0b1f33; }
.sn-status { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem; color: var(--sn-ink); }
.sn-status .bad, .sn-verify .bad { color: var(--sn-red); font-weight: 800; }
.sn-verify .ok { color: var(--sn-green); font-weight: 800; }
.sn-explain { padding: 10px 12px; border: 1px solid var(--sn-line); border-left: 4px solid var(--sn-blue); border-radius: 4px; background: var(--sn-soft); font-size: .93rem; line-height: 1.55; min-height: 4.6em; color: var(--sn-ink); }
.sn-explain.bad { border-left-color: var(--sn-red); background: #fdeceb; }
.sn-eqline { display: block; margin-top: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; color: var(--sn-muted); }
.sn-phopts { font-size: .86rem; margin-bottom: 6px; }
.sn-phopts label { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.sn-verify { margin: 8px 0 0; font-size: .88rem; overflow-wrap: anywhere; }
.sn-sigs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sn-sigs li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .88rem; }
.sn-sl { font-weight: 700; min-width: 9.5em; }
.sn-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.sn-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--sn-line); background: #fff; color: var(--sn-muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; font-weight: 700; }
.sn-chip.on { background: var(--sn-green); border-color: #0e5a33; color: #fff; }
.sn-op { color: var(--sn-muted); font-weight: 700; }
.sn-res { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; color: var(--sn-muted); }
.sn-res.on { color: var(--sn-acc); }
.sn-params summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.sn-pbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; margin-top: 10px; }
.sn-slider { display: flex; flex-direction: column; gap: 2px; font-size: .86rem; }
.sn-slider label { font-weight: 600; }
.sn-slider input { width: 100%; }
.sn-slider output { color: var(--sn-muted); font-weight: 700; }
.sn-note { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--sn-muted); }
@media (max-width: 520px) {
  .sn { padding: 12px; }
  .sn-btn { padding: 7px 9px; }
  .sn-sl { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sn *, .sn *::before, .sn *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}