/* Simulador de válvulas neumáticas — prefijo vn */
.vn { background: var(--card, #fff); color: #0b1f33; border: 1px solid var(--line, #cfdae6); border-radius: 8px; padding: 18px; margin: 26px 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; font-size: 16px; }
.vn * { box-sizing: border-box; }
.vn-head { display: flex; flex-direction: column; gap: 2px; }
.vn-head strong { font-size: 1.1rem; }
.vn-head span { color: var(--muted, #4a5d70); font-size: .92rem; line-height: 1.5; }
.vn-sel { display: flex; flex-wrap: wrap; gap: 6px; }
.vn-tab { font: inherit; font-size: .86rem; font-weight: 600; padding: 8px 12px; min-height: 40px; border: 1px solid var(--line, #cfdae6); border-radius: 6px; background: #f3f6f9; color: #0b1f33; cursor: pointer; }
.vn-tab.on { background: #0b1f33; color: #fff; border-color: #0b1f33; }
.vn button:focus-visible, .vn input:focus-visible, .vn select:focus-visible { outline: 3px solid var(--accent, #e0731a); outline-offset: 2px; }
.vn-info { padding: 10px 12px; border-left: 4px solid var(--accent, #e0731a); background: #fff7ef; border-radius: 4px; font-size: .92rem; line-height: 1.5; }
.vn-ctl { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, #cfdae6); border-radius: 6px; background: #fbfcfe; }
.vn-actrow { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; }
.vn-actrow label, .vn-cc label, .vn-cylctl label { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; font-weight: 600; min-width: 0; }
.vn select, .vn input[type=number] { font: inherit; font-size: .9rem; padding: 7px 8px; border: 1px solid var(--line, #cfdae6); border-radius: 4px; background: #fff; color: #0b1f33; min-height: 38px; max-width: 100%; }
.vn-rt { font-size: .85rem; color: #4a5d70; }
.vn-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vn button:not(.vn-tab) { font: inherit; font-weight: 600; font-size: .9rem; padding: 9px 14px; border-radius: 4px; border: 1px solid #0b1f33; background: #0b1f33; color: #fff; cursor: pointer; min-height: 44px; touch-action: none; user-select: none; -webkit-user-select: none; }
.vn button.vn-ghost { background: transparent; color: #0b1f33; }
.vn button.vn-hold.on, .vn button.vn-tog.on, .vn button.vn-tog[aria-pressed="true"] { background: var(--accent, #e0731a); border-color: var(--accent, #e0731a); }
.vn-chk { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; }
.vn-chk input { width: 20px; height: 20px; accent-color: var(--accent, #e0731a); }
.vn-views { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 900px) { .vn-views { grid-template-columns: minmax(0, 1fr); } }
.vn-fig { margin: 0; min-width: 0; }
.vn-fig figcaption { font-size: .82rem; font-weight: 700; color: #4a5d70; margin-bottom: 4px; }
.vn-box { border: 1px solid var(--line, #cfdae6); border-radius: 6px; overflow: hidden; background: #f3f6fa; }
.vn-svg { display: block; width: 100%; height: auto; }
.vn-status { padding: 10px 12px; border-radius: 4px; background: #eef4fb; border-left: 4px solid #2a6fb0; font-size: .9rem; line-height: 1.55; min-height: 3.2em; }
.vn-ports { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.vn-pc { border: 1px solid var(--line, #cfdae6); border-left-width: 5px; border-radius: 4px; padding: 6px 10px; background: #f6f9fc; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vn-pc b { font-size: .8rem; } .vn-pc i { font-style: normal; font-size: .78rem; color: #4a5d70; }
.vn-pc.p { border-left-color: #2a6fb0; background: #eaf3fc; } .vn-pc.r { border-left-color: #e0731a; background: #fff3e6; } .vn-pc.x { border-left-color: #8a97a5; }
.vn-two { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 16px; }
@media (max-width: 900px) { .vn-two { grid-template-columns: minmax(0, 1fr); } }
.vn h3 { margin: 0; font-size: 1.05rem; } .vn h4 { margin: 0 0 6px; font-size: .92rem; }
.vn-tw { overflow-x: auto; }
.vn-table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.vn-table th, .vn-table td { border: 1px solid var(--line, #cfdae6); padding: 5px 8px; text-align: left; vertical-align: top; }
.vn-table th { background: #eef2f6; } .vn-table td.c { text-align: center; font-weight: 700; color: #1a7f4b; }
.vn-table tr.on td { background: #fff3e6; font-weight: 600; }
.vn-tn { margin: 6px 0 0; font-size: .78rem; color: #4a5d70; line-height: 1.45; }
.vn-cylmsg { margin-top: 8px; font-size: .86rem; line-height: 1.5; padding: 8px 10px; background: #f6f9fc; border-radius: 4px; }
.vn-cmp { border-top: 2px solid var(--line, #cfdae6); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.vn-cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .vn-cgrid { grid-template-columns: minmax(0, 1fr); } }
.vn-cc { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line, #cfdae6); border-radius: 6px; padding: 10px 12px; min-width: 0; }
.vn-cc input[type=range] { width: 100%; accent-color: var(--accent, #e0731a); height: 28px; }
.vn-cc output { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; font-weight: 600; }
.vn-res p { margin: 3px 0; font-size: .86rem; line-height: 1.45; } .vn-res .ok { color: #11522f; font-weight: 600; } .vn-res .warn { color: #6b4a00; font-weight: 600; } .vn-res .bad { color: #a11d2a; font-weight: 600; }
.vn-bt { font-size: .84rem; font-weight: 700; margin-bottom: 4px; } .vn-bt i { font-weight: 400; color: #c0392b; }
.vn-br { display: grid; grid-template-columns: 54px minmax(0, 1fr) 84px; gap: 8px; align-items: center; font-size: .8rem; margin: 3px 0; }
.vn-br em { font-style: normal; font-family: ui-monospace, Menlo, Consolas, monospace; text-align: right; }
.vn-bar { position: relative; height: 16px; background: #eef2f6; border-radius: 3px; }
.vn-fill { height: 100%; border-radius: 3px; } .vn-fill.ok { background: #1a7f4b; } .vn-fill.warn { background: #e0a030; } .vn-fill.bad { background: #c0392b; }
.vn-req { position: absolute; top: -3px; bottom: -3px; width: 3px; background: #c0392b; }
.vn-note { margin: 0; font-size: .82rem; color: #4a5d70; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .vn * { transition: none !important; animation: none !important; } }
@media (max-width: 640px) { .vn-box { overflow-x: auto; } .vn-svg { min-width: 560px; } }