/* Rompecabezas de circuitos neumáticos (prefijos npz / np) */
.npz { --z-ink: var(--navy, #0b1f33); --z-muted: var(--muted, #4a5d70); --z-line: var(--line, #cfdae6); --z-acc: var(--accent, #e0731a); --z-card: var(--card, #ffffff);
  --z-blue: #1d6fd8; --z-vent: #7d8b9c; --z-soft: #f1f5f9; --z-ok: #155724; --z-okbg: #e7f6ec; --z-bad: #721c24; --z-badbg: #fdecec;
  background: var(--z-card); color: var(--z-ink); border: 1px solid var(--z-line); border-radius: 8px; padding: 16px; margin: 26px 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; font-size: 16px; line-height: 1.5; }
.npz *, .npz *::before, .npz *::after { box-sizing: border-box; }
.npz-head { display: flex; flex-direction: column; gap: 2px; }
.npz-head strong { font-size: 1.15rem; }
.npz-head span { color: var(--z-muted); font-size: .9rem; }
.npz-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--z-line); padding-bottom: 8px; }
.npz .npz-tab { font: inherit; font-weight: 700; font-size: .88rem; padding: 8px 12px; min-height: 44px; border: 1px solid var(--z-line); border-radius: 6px; background: #fff; color: var(--z-ink); cursor: pointer; }
.npz .npz-tab[aria-selected="true"] { background: #0b1f33; color: #fff; border-color: #0b1f33; }
.npz .npz-tab.done:not([aria-selected="true"]) { background: var(--z-okbg); border-color: #86c79b; color: var(--z-ok); }
.npz-pmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.npz-chip { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--z-line); background: var(--z-soft); color: var(--z-ink); }
.npz-chip.ok { background: var(--z-okbg); border-color: #86c79b; color: var(--z-ok); }
.npz-ptitle { margin: 4px 0 6px; font-size: 1.1rem; }
.npz-task { margin: 0 0 6px; }
.npz-goal { margin: 0; padding-left: 20px; font-size: .92rem; color: var(--z-ink); }
.npz-goal li { margin: 2px 0; }

.npz-work { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .npz-work { grid-template-columns: minmax(0, 1fr); } }
.npz-paltitle { font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.npz-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
@media (min-width: 901px) { .npz-pal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.npz .npz-tile { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 4px; border: 1px solid var(--z-line); border-radius: 6px; background: #fff; color: var(--z-ink); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; min-height: 84px; }
.npz .npz-tile:hover { border-color: var(--z-acc); }
.npz .npz-tile:focus-visible { outline: 3px solid var(--z-acc); outline-offset: 2px; }
.npz .npz-tile.empty { opacity: .4; cursor: not-allowed; }
.npz-tile .np-thumb { width: 100%; height: 42px; display: block; }
.npz-tname { font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.15; }
.npz-tleft { font-size: .7rem; color: var(--z-muted); }
.npz-palhelp { font-size: .8rem; color: var(--z-muted); margin: 8px 0 0; }
.npz-work.locked .npz-pal { opacity: .45; pointer-events: none; }
.npz-ghost { position: fixed; z-index: 99999; width: 110px; transform: translate(-50%, -50%); opacity: .85; pointer-events: none; background: #fff; border: 1px solid var(--z-acc); border-radius: 6px; padding: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.npz-ghost svg { width: 100%; height: 44px; display: block; }

.npz-canvaswrap { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.npz-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.npz .npz-tb { font: inherit; font-size: .85rem; font-weight: 600; min-height: 38px; min-width: 38px; padding: 4px 10px; border: 1px solid var(--z-ink); border-radius: 4px; background: #fff; color: var(--z-ink); cursor: pointer; }
.npz .npz-tb:disabled { opacity: .4; cursor: not-allowed; }
.npz .npz-tb:focus-visible, .npz .npz-btn:focus-visible, .npz .npz-hbtn:focus-visible { outline: 3px solid var(--z-acc); outline-offset: 2px; }
.npz-zoom { font-size: .82rem; min-width: 48px; text-align: center; color: var(--z-muted); }
.npz-sp { flex: 1; }
.npz-view { height: 480px; overflow: auto; border: 1px solid var(--z-line); border-radius: 6px; background: #f3f7fb; position: relative; overscroll-behavior: contain; }
.npz-view:focus-visible { outline: 3px solid var(--z-acc); outline-offset: 2px; }
.npz-view.drop { outline: 3px dashed var(--z-acc); outline-offset: -3px; }
.npz-world { position: relative; }
.npz-stage { position: absolute; left: 0; top: 0; width: 1000px; height: 560px; transform-origin: 0 0; background-color: #fbfdff;
  background-image: radial-gradient(circle, #c9d6e4 1px, transparent 1.3px); background-size: 20px 20px; touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; }
.npz-stage.static { position: relative; transform-origin: 0 0; }
.npz-wires { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; overflow: visible; }
.npz-comps { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.np-comp { position: absolute; z-index: auto; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.np-comp.fixed { cursor: grab; }
.np-comp.drag { cursor: grabbing; z-index: 5; }
.np-comp svg { display: block; overflow: visible; pointer-events: none; }
.np-comp.sel { outline: 2px dashed var(--z-acc); outline-offset: 8px; }
.np-comp.np-flag { outline: 3px solid #c62828; outline-offset: 8px; }
.np-comp:focus-visible { outline: 3px solid var(--z-acc); outline-offset: 8px; }
.np-port { position: absolute; z-index: 4; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; cursor: crosshair; touch-action: none; }
.np-port:hover, .np-port.hot { background: rgba(224, 115, 26, .22); box-shadow: 0 0 0 2px var(--z-acc); }
.np-port.armed { background: rgba(224, 115, 26, .4); box-shadow: 0 0 0 3px var(--z-acc); }
.npz-stage.simulating .np-port { pointer-events: none; }
.npz-stage.simulating .np-comp { cursor: default; }
.npz-stage.simulating .np-comp.manual { cursor: pointer; }
.npz-stage.simulating .np-comp.manual svg { filter: drop-shadow(0 0 5px rgba(224, 115, 26, .9)); }
.npz-stage.simulating .np-comp.pressed svg { filter: drop-shadow(0 0 7px rgba(21, 87, 36, .95)); }
.npz-stage.simulating .np-comp.sel, .npz-stage.simulating .np-comp.np-flag { outline: none; }
.npz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--z-muted); }
.npz-legend i.lg { display: inline-block; width: 22px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: 5px; }
.lg-air { border-color: #1d6fd8; } .lg-vent { border-color: #8a98aa; } .lg-pil { border-top-style: dashed !important; border-color: #0b1f33; } .lg-trap { border-color: #7fb0ee; border-top-width: 2px !important; }

/* símbolos */
.np-svg .np-st { stroke: #0b1f33; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.np-svg .np-thin { stroke-width: 1.25; }
.np-svg .np-dash { stroke-dasharray: 5 3; }
.np-svg .np-fill { fill: #0b1f33; stroke: none; }
.np-svg .np-box { fill: #ffffff; stroke: #0b1f33; stroke-width: 1.7; }
.np-svg .np-box.on { fill: #cfe3ff; }
.np-svg .np-box.np-nofill { fill: none; }
.np-svg .np-box.np-dashbox { stroke-dasharray: 5 3; stroke-width: 1.2; fill: #ffffff; }
.np-svg .np-lab { font: 11px/1 Arial, Helvetica, sans-serif; fill: #0b1f33; }
.np-svg .np-mini { font-size: 9px; fill: #4a5d70; }
.np-svg .np-bold { font-weight: 700; font-size: 14px; }
.np-svg .np-plab { font: 700 11px/1 Arial, Helvetica, sans-serif; fill: #a84f08; }
.np-svg .np-name { font: 700 12.5px/1 Arial, Helvetica, sans-serif; fill: #0b1f33; }
.np-svg .np-pt { fill: #ffffff; stroke: #0b1f33; stroke-width: 1.5; }
.np-svg .np-pt.on { fill: #0b1f33; }
.np-svg .np-atm { fill: #ffffff; stroke: #0b1f33; stroke-width: 1.4; }
.np-svg .np-rod { fill: #c9d6e4; }
.np-svg .np-pis { fill: #0b1f33; }
.np-svg .np-plate { fill: #8896a8; }
.np-svg .np-blade { fill: #b42318; stroke: #0b1f33; stroke-width: 1.2; }
.np-svg .np-ch { stroke: none; fill: transparent; }
.np-svg .np-ch.air { fill: rgba(29, 111, 216, .42); }
.np-svg .np-ch.trap { fill: rgba(29, 111, 216, .2); }
.np-svg .np-ch.vent { fill: transparent; }
.np-comp.qe-exh .np-box { fill: #fff2e0; }

/* líneas de aire */
.npz-wires .np-wire { fill: none; stroke: #0b1f33; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.npz-wires .np-wire.dash { stroke-dasharray: 7 4; }
.npz-wires .np-wire.p-air { stroke: #1d6fd8; stroke-width: 3.6; }
.npz-wires .np-wire.p-vent { stroke: #8a98aa; stroke-width: 2.2; }
.npz-wires .np-wire.p-trap { stroke: #7fb0ee; stroke-width: 3; }
.npz-wires .np-wire.tmp { stroke: var(--z-acc); stroke-dasharray: 4 4; }
.npz-wires .np-wire-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.npz-wires .np-w.sel .np-wire { stroke: var(--z-acc); stroke-width: 4; }
.npz-wires .np-w.flag .np-wire { stroke: #c62828; stroke-width: 4; }
.npz-wires .np-junc { fill: #0b1f33; }
.npz-stage.simulating .np-wire-hit { pointer-events: none; }

/* acciones */
.npz-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.npz .npz-btn { font: inherit; font-weight: 700; font-size: .92rem; padding: 9px 16px; min-height: 44px; border-radius: 4px; border: 1px solid #0b1f33; background: #0b1f33; color: #fff; cursor: pointer; }
.npz .npz-btn.ghost { background: transparent; color: var(--z-ink); }
.npz .npz-btn.sim { background: #155724; border-color: #155724; }
.npz .npz-btn.sim.on { background: #721c24; border-color: #721c24; }
.npz .npz-btn:disabled { opacity: .4; cursor: not-allowed; }
.npz-att { font-size: .85rem; color: var(--z-muted); margin-left: auto; }
.npz .npz-link { font: inherit; background: none; border: 0; padding: 2px 4px; color: #1d4f9b; text-decoration: underline; cursor: pointer; }
.npz-foot { font-size: .8rem; color: var(--z-muted); margin: 0; }
.npz-tipbox { background: #fff6e0; border: 1px solid #e3c36a; border-left: 5px solid #b7791f; border-radius: 6px; padding: 10px 12px; color: #3b2a00; font-size: .92rem; }
.npz-result:empty { display: none; }
.npz-result { border: 1px solid var(--z-line); border-radius: 6px; padding: 12px 14px; background: #fff; color: var(--z-ink); font-size: .94rem; }
.npz-result:focus { outline: none; }
.npz-result.ok { border-color: #86c79b; border-left: 6px solid #2e8b57; background: #f4fbf6; }
.npz-result.bad { border-color: #e1a1a1; border-left: 6px solid #c62828; background: #fffafa; }
.npz-result.info { background: var(--z-soft); }
.npz-ok { color: var(--z-ok); font-size: 1.02rem; margin-bottom: 6px; }
.npz-bad { color: var(--z-bad); margin-bottom: 4px; }
.npz-result p { margin: 6px 0; }
.npz-find, .npz-warn { margin: 4px 0 8px; padding-left: 20px; }
.npz-find li, .npz-warn li { margin: 3px 0; }
.npz-warn { color: #6b4b00; list-style: none; padding-left: 0; }
.npz-diag, .npz-hint { background: var(--z-soft); border: 1px solid var(--z-line); border-radius: 6px; padding: 8px 12px; margin: 8px 0; font-size: .9rem; }
.npz-hint { background: #fff6e0; border-color: #e3c36a; color: #3b2a00; }
.npz-diag ul, .npz-hint ul { margin: 4px 0 0; padding-left: 18px; }
.npz-note { font-size: .85rem; color: var(--z-muted); }
.npz-tests { margin-top: 8px; }
.npz-tests summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.npz-tw { overflow-x: auto; }
.npz-tests table { border-collapse: collapse; width: 100%; font-size: .84rem; min-width: 0; }
.npz-tests th, .npz-tests td { border: 1px solid var(--z-line); padding: 5px 7px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.npz-tests th { background: var(--z-soft); }
.npz-tests tr.ok td:last-child { color: #155724; font-weight: 700; }
.npz-tests tr.no td { background: #fff3f3; }
.npz-tests tr.no td:last-child { color: #b42318; font-weight: 700; }
.npz .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* conexión rápida */
.npz-quick { border: 1px solid var(--z-line); border-radius: 6px; padding: 6px 12px; background: var(--z-soft); }
.npz-quick summary { cursor: pointer; font-weight: 700; font-size: .92rem; padding: 4px 0; }
.npz-quick summary:focus-visible { outline: 3px solid var(--z-acc); outline-offset: 2px; }
.npz-qrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 6px 0; }
.npz-qrow label { display: flex; flex-direction: column; font-size: .82rem; font-weight: 600; gap: 2px; min-width: 0; }
.npz .npz-quick select { font: inherit; font-size: .88rem; padding: 6px; min-height: 40px; border: 1px solid var(--z-line); border-radius: 4px; background: #fff; color: #0b1f33; max-width: 100%; }
.npz-wlist { margin: 4px 0; padding-left: 18px; font-size: .86rem; }
.npz-wlist li { margin: 2px 0; }
.npz-none { list-style: none; margin-left: -18px; color: var(--z-muted); }

/* simulación */
.npz-simpanel, .npz-solpanel { border: 1px solid var(--z-line); border-radius: 6px; padding: 12px 14px; background: #fff; }
.npz-simpanel h4, .npz-solpanel h4 { margin: 0 0 8px; font-size: 1rem; }
.npz-ctl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; }
.npz-hold { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.npz-hrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.npz .npz-hbtn { font: inherit; font-weight: 700; font-size: .92rem; min-height: 52px; padding: 8px 14px; border: 2px solid #0b1f33; border-radius: 6px; background: #fff; color: #0b1f33; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.npz .npz-hbtn.down { background: #155724; border-color: #155724; color: #fff; }
.npz-hrow label, .npz-sl { font-size: .85rem; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.npz-sl input[type=range] { width: 150px; max-width: 100%; }
.npz-sl select { font: inherit; padding: 6px; min-height: 38px; border: 1px solid var(--z-line); border-radius: 4px; background: #fff; color: #0b1f33; }
.npz-state { margin-top: 10px; font-size: .88rem; }
.npz-state ul { margin: 6px 0 0; padding-left: 18px; }
.npz-state li { margin: 2px 0; }
.npz-state .bad { color: #b42318; font-weight: 700; }
.npz-big { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.npz-phase { font-weight: 800; padding: 4px 10px; border-radius: 4px; background: var(--z-soft); border: 1px solid var(--z-line); }
.npz-phase.ext { background: #fff2e0; border-color: #e3a85c; color: #7a4300; }
.npz-phase.ret { background: #e7f6ec; border-color: #86c79b; color: #155724; }
.npz-phase.mov { background: #e6f0ff; border-color: #8db4ee; color: #0f3d8a; }
.npz-static-wrap { margin: 6px 0; }
.npz-static { overflow: hidden; border: 1px solid var(--z-line); border-radius: 6px; background: #fbfdff; }
.npz-solcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 18px; font-size: .88rem; }
.npz-solcols ul { margin: 4px 0; padding-left: 18px; }
.npz-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 520px) {
  .npz { padding: 12px; }
  .npz-att { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .npz * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

@media (max-width: 600px) { .np-port { width: 34px; height: 34px; margin: -17px 0 0 -17px; } }