/* ElectroLab · gabinete visual y superficies táctiles */
:root{--ink:#173239;--paper:#edf2f1;--panel:#fff;--line:#d5e0de;--muted:#546d73;--cyan:#32b2a0;--cyan-dark:#087a69;--yellow:#dbf186;--shadow:0 12px 35px #18332c12}
html{scroll-padding-top:90px}body{overflow-x:clip}button,a,input,select{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #169780;outline-offset:3px}button{touch-action:manipulation}button,input,select{font-size:1rem}button:disabled{opacity:.5;cursor:default}h1,h2,h3,p{overflow-wrap:anywhere}main,.view,.card,.workspace-panel,.water-layout>*{min-width:0}.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0);white-space:nowrap!important}
.topbar{height:76px;grid-template-columns:200px 1fr auto;gap:20px;background:#142e35;border-bottom:0;padding:0 24px}.brand-mark{background:var(--yellow);color:var(--ink);transform:none;border-radius:12px}.brand small{font-size:12px;letter-spacing:.09em;color:#abc3c5}.brand strong{font-size:19px;font-weight:760}.tabs{gap:8px}.tab{font-size:14px;padding:0 14px}.tab::after{height:4px;bottom:10px;border-radius:4px}.top-actions{display:none;position:absolute;right:20px;top:66px;padding:12px;background:#142e35;border:1px solid #46636a;box-shadow:var(--shadow);border-radius:14px;width:230px;z-index:100}.top-actions.open{display:grid}.top-actions .btn,.top-actions .file-label{display:flex!important;min-height:44px}.project-menu-btn{display:inline-flex;background:transparent;color:white;border:1px solid #5a7074;min-height:44px;font-size:14px}
.btn{min-height:44px;border-radius:10px;font-size:14px;font-weight:650}.btn:hover{transform:none}.btn.primary{background:#dbf186;border-color:#c9e279}.eyebrow{font-size:12px;letter-spacing:.09em}.panel-heading h2{font-size:18px;margin:5px 0}.panel-heading p{font-size:13px;color:var(--muted);margin:0 0 18px}.panel-heading{display:block}
#designView{height:auto;min-height:calc(100svh - 76px);grid-template-columns:192px minmax(0,1fr) 308px;overflow:visible;align-items:start}.palette-panel{padding:24px 16px;border-color:var(--line);position:sticky;top:76px;max-height:calc(100svh - 76px);background:#f9fbfa}.component-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;min-width:0}.component-card{width:auto;min-width:0;height:100px;border-radius:12px;padding:3px;display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:0 3px 7px #18332c06;background:#fff;border:1px solid #dce5e2}.component-card:hover{background:#ebf7f3;transform:none;border-color:#2e9c85}.component-card .component-art{width:82px;height:82px;max-width:100%}.palette-add{position:absolute;bottom:2px;right:5px;font-size:14px;color:#58796e;font-weight:800}.palette-tip{font-size:14px;line-height:1.5;margin-top:20px;background:#e8f4ee;border-color:#d4e9de}.palette-tip span{margin-top:4px}.component-art{display:block;width:116px;height:116px;background-image:url('components.webp');background-size:300% 300%;background-repeat:no-repeat;mix-blend-mode:multiply;pointer-events:none;flex:0 0 auto}.art-main{background-position:0 0}.art-rcd{background-position:50% 0}.art-mcb{background-position:100% 0}.art-spd{background-position:0 50%}.art-contactor{background-position:50% 50%}.art-overload{background-position:100% 50%}.art-pump{background-position:0 100%}.art-outlet{background-position:50% 100%}.art-light{background-position:100% 100%}.supply-symbol{display:flex;flex-direction:column;align-items:center;justify-content:center;width:116px;height:116px;color:#25474b;font-size:64px;font-weight:750}.supply-symbol span{font-size:12px;font-weight:800;letter-spacing:.15em}.component-card .supply-symbol{width:74px;height:80px;font-size:44px}
.workspace-panel{display:flex;flex-direction:column;min-height:0;background:#edf2f1;padding-bottom:20px}.workspace-toolbar{flex-wrap:wrap;gap:16px;padding:20px 24px;background:transparent;border:0}.project-title-wrap{flex:1 1 220px;min-width:0}.project-title{font-size:20px;max-width:none;font-weight:740;width:100%;padding:0;min-height:32px}.save-state{font-size:12px;margin-top:4px}.toolbar-group{gap:5px;max-width:none;justify-content:flex-start}.tool-btn{min-height:42px;font-size:14px;border:1px solid #cddbd5;background:#f9fbfa;border-radius:9px;padding:8px 11px}.tool-btn[aria-pressed=true]{background:#174e45;color:#fff;border-color:#174e45}.tool-btn span{font-size:16px}.board-caption{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:0 24px}.board-caption>span:last-child{font-size:12px;color:#56736b}.mode-help{font-size:13px;line-height:1.4;min-height:36px;margin:9px 24px 12px;color:#506b64}
.board-wrap{padding:0 20px 20px;overflow:visible;background:transparent;min-width:0}.board{width:100%;min-width:0;min-height:400px;height:auto;border:10px solid #abbab5;border-radius:22px;background:linear-gradient(110deg,#f6f8f7,#e4eae7);box-shadow:inset 0 0 0 2px #fbfdfc, inset 0 0 14px #697d6d24,0 14px 25px #273f3b12;overflow:hidden}.board::before,.board::after{content:'';position:absolute;top:10px;width:9px;height:9px;border:2px solid #8c9e97;border-radius:50%;background:#c8d2cd;z-index:1}.board::before{left:9px}.board::after{right:9px}#railLayer{position:absolute;inset:0;pointer-events:none}.rail-caption{position:absolute;left:28px;right:28px;font-size:11px;letter-spacing:.09em;font-weight:750;color:#6c7f77}.rail-caption.external-caption{padding-top:12px;font-size:11px}.din-rail{height:29px;left:18px;right:18px;position:absolute;background:linear-gradient(#6f8680 0 2px,#d9e2de 3px 7px,#a0b4ab 8px 9px,#d3ddd8 10px 21px,#8b9e96 22px 23px,#d4e0da 24px 27px,#728c80 28px);border-radius:3px;box-shadow:0 3px 4px #5a786035}.load-zone{position:absolute;left:0;right:0;bottom:0;background:#f8faf9;border-top:1px dashed #b9c9c1}.board-grid{display:none}
#nodeLayer{pointer-events:none;z-index:4}.node{width:116px;height:172px;min-height:0;border:1px solid transparent;border-radius:9px;background:transparent;box-shadow:none;display:flex;flex-direction:column;align-items:center;padding:0;overflow:visible;touch-action:pan-y;pointer-events:auto;outline-offset:2px}.node:hover{background:#ffffffe0;border-color:#b7cac0;box-shadow:0 4px 14px #3a594310}.node .component-art{margin-top:0}.node.selected{border:2px solid #16886e;background:#ffffffa8;box-shadow:0 0 0 3px #198b7514}.node.connect-source{border:2px solid #df9b1f;box-shadow:0 0 0 3px #df9b1f30}.node.tripped{background:#ffefefc9;border-color:#bf3838}.node.dragging{z-index:20;box-shadow:0 12px 28px #18332c33;background:#fff;cursor:grabbing}.board.moving .node{touch-action:none;cursor:grab}.node-tag{height:24px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#4f695f;font-weight:750;letter-spacing:.06em}.node-state{width:6px;height:6px;border:0;background:#859b93}.node.energized .node-state{background:#1ba373;box-shadow:0 0 0 3px #1ba37322}.node.tripped .node-state{background:#c74040;box-shadow:none}.node-rating{font-size:13px;font-weight:760;color:#29463c;line-height:25px;font-variant-numeric:tabular-nums}.trip-label{position:absolute;bottom:3px;left:3px;right:3px;background:#b23636;color:#fff;font-size:12px;border-radius:3px}.node-port{width:8px;height:8px;top:90px;border:2px solid #617b6b;background:#eff8f3;border-radius:50%}.node-port.in{left:-3px}.node-port.out{right:-3px}.board.connecting .node-port{background:#46cfa0;border-color:#0b5745;width:11px;height:11px}
.wires{z-index:3;pointer-events:none}#arrow path{fill:#5c766d}.wire{stroke:#6c8c7d;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;marker-end:none;pointer-events:none}.wire.energized{stroke:#118566;filter:none}.wire-hit{stroke:transparent;stroke-width:24;fill:none;pointer-events:stroke;cursor:pointer}.wire.selectable{stroke:#b16433;stroke-dasharray:4 3;pointer-events:none}.wire.fault{stroke:#b33f45}.drop-hint{justify-content:center;text-align:center;padding:30px;font-size:16px}.drop-hint small{font-size:14px}.simulation-bar{margin:0 20px;border:1px solid var(--line);border-radius:15px;gap:12px;align-items:flex-start;flex-wrap:wrap;padding:16px;background:#fafffc}.simulation-status{flex:1 1 200px;min-width:0;align-self:center}.simulation-status>span:last-child{min-width:0}.simulation-status strong{font-size:14px}.simulation-status small{font-size:12px;line-height:1.5;overflow-wrap:anywhere}.status-lamp{flex:0 0 12px}.sim-controls{flex:1 1 290px;flex-wrap:wrap;gap:8px;justify-content:flex-end}.select-inline{font-size:13px;flex:1 1 100%;justify-content:flex-start}.select-inline select{flex:1;min-width:0;font-size:14px;max-width:100%}.energize{min-width:125px}
.inspector-panel{position:sticky;top:76px;max-height:calc(100svh - 76px);padding:22px 18px;background:#fcfefd}.inspector-empty{padding:80px 4px 30px}.inspector-empty h2{font-size:18px}.inspector-empty p{font-size:14px;line-height:1.6}.inspector-header h2{font-size:19px;margin:6px 0 20px}.inspector-close{display:none}.icon-btn{width:44px;height:44px;min-width:44px}.form-grid{gap:14px 10px}.form-grid label,.budget-summary label,.dialog-grid label{font-size:14px;line-height:1.45}.form-grid input,.form-grid select{width:100%}input,select{font-size:16px;min-height:44px;padding:10px;max-width:100%}.field-help{font-size:12px;line-height:1.4}.check-heading{font-size:14px}.quick-issues p{font-size:13px;line-height:1.5;padding:10px}.inspector-preview-art{margin:0 auto 10px;width:140px;height:140px}.inspector-preview-art .component-art,.inspector-preview-art .supply-symbol{width:140px;height:140px}.quick-check{margin-top:26px}.form-grid input[type=checkbox]{height:22px;width:22px;min-height:22px;accent-color:var(--cyan-dark)}
.results-view,.budget-view,.rules-view,.water-view{padding:30px 24px;gap:22px}.section-header h1{font-size:clamp(26px,3vw,38px);font-weight:760}.section-header p{font-size:16px;line-height:1.6}.card{border-radius:17px;box-shadow:0 4px 18px #172f3210}.card-title h2{font-size:18px}.card-title p{font-size:14px;line-height:1.5}.card-title{flex-wrap:wrap}.card-title>span{font-size:13px}.results-layout{grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr)}.metric{padding:20px}.metric span{font-size:14px}.metric strong{font-size:30px}.metric small{font-size:13px;line-height:1.5}.table-scroll{max-width:100%;overflow:auto;overscroll-behavior-x:contain}table{font-size:14px}th{font-size:12px;letter-spacing:.035em;padding:12px}td{padding:14px 12px}td small{font-size:12px}.table-card,.budget-table-card,.catalog-card,.selectivity-card{overflow:hidden}.status-tag{font-size:12px}.validation-item strong{font-size:14px}.validation-item p{font-size:13px;line-height:1.5}.budget-price{width:120px;min-height:44px!important;font-size:16px!important}.catalog-card input,.catalog-card select{font-size:16px;min-height:44px}.row-btn{width:44px;height:44px}.row-actions{min-width:96px}.budget-summary h2{font-size:20px}.summary-lines div{font-size:14px}.grand-total span,.grand-total small{font-size:13px}.grand-total strong{font-size:28px}.rule-card h2{font-size:18px}.rule-card p{font-size:16px}.rule-number{font-size:13px}.source-list strong{font-size:16px}.source-list span{font-size:14px}.source-list a{padding:18px}.sources-card h2{font-size:20px}.legal-note strong,.legal-note p{font-size:14px;line-height:1.5}.dialog-header h2{font-size:22px}.dialog-grid{gap:16px}.dialog-actions{gap:10px}.toast{font-size:14px;max-width:calc(100vw - 32px);bottom:20px;right:16px}
.water-layout{grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr)}.water-system-card{overflow:hidden;min-width:0}.water-scene{min-width:0;width:100%;height:420px;margin-top:20px;overflow:hidden;background:#edf4f3}.elevated-block{left:auto;right:5%;top:20px;width:43%}.tank-label{font-size:14px;gap:4px}.elevated-tank{width:100%;height:130px}.cistern-block{left:5%;bottom:24px;width:43%}.cistern-tank{width:100%;height:135px}.pump-unit{left:auto;right:5%;bottom:30px;min-width:0;width:36%;padding:12px;gap:8px}.pump-unit strong{font-size:16px}.pump-unit small{font-size:13px}.pump-wheel{flex:0 0 30px}.vertical-pipe{width:9%;right:21%;top:180px;height:164px;border-width:6px;border-left:0;border-bottom:0}.suction-pipe{left:46%;bottom:60px;width:14%;height:30px;border-width:6px;border-top:0;border-right:0}.level-line{font-size:11px}.level-controls{margin-top:18px;gap:22px}.level-controls label{font-size:14px}.water-system-top h2{font-size:20px}.water-mode-badge{font-size:12px}.panel-plate-title{flex-wrap:wrap;gap:10px}.panel-plate-title span{font-size:14px}.panel-plate-title small{font-size:14px;line-height:1.5;min-height:42px;overflow-wrap:anywhere}.mode-btn{font-size:14px;height:48px}.push-btn{font-size:14px;min-height:95px}.pilot-grid small{font-size:13px}.runtime{font-size:14px;gap:12px;line-height:1.5}.water-bottom-grid{grid-template-columns:1fr 1fr}.pump-config-card{grid-column:1/-1}.logic-fields{grid-template-columns:1fr}.logic-fields label,.pump-config-grid label{font-size:14px;line-height:1.5}.logic-status div{font-size:13px;line-height:1.5}.logic-status i{flex-shrink:0}.fault-switches strong{font-size:14px}.fault-switches small{font-size:13px;line-height:1.5}.fault-switches input{flex:0 0 20px;height:20px;min-height:20px}.fault-switches label{padding:12px}.pump-config-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.pump-metrics{gap:12px;margin-top:24px}.pump-metrics div{padding:15px}.pump-metrics span{font-size:12px;line-height:1.4}.pump-metrics strong{font-size:18px}.material-chip{font-size:13px;line-height:1.5}.water-materials-card .card-title p{font-size:14px}
@media(max-width:1200px){.topbar{grid-template-columns:180px 1fr auto;gap:10px}.tab{padding:0 10px}#designView{grid-template-columns:170px minmax(0,1fr) 284px}.palette-panel{padding:22px 12px}.component-card .component-art{width:70px;height:70px}.water-layout{grid-template-columns:minmax(0,1fr) 300px}.water-bottom-grid{grid-template-columns:1fr 1fr}}
@media(max-width:1100px){#designView{grid-template-columns:172px minmax(0,1fr)}.inspector-panel{display:none;position:fixed;left:auto;right:16px;top:86px;bottom:16px;width:360px;max-width:calc(100vw - 32px);max-height:none;z-index:90;border:1px solid #b5cac1;border-radius:18px;box-shadow:0 18px 75px #18332c55;overscroll-behavior:contain}.inspector-panel.open{display:block}.inspector-close{display:flex;margin:0 0 12px auto;position:sticky;top:0;background:#e1f2e8;z-index:1}.workspace-toolbar{padding:20px}.results-layout{grid-template-columns:1fr}.metrics-grid{grid-template-columns:1fr 1fr}.rules-grid{grid-template-columns:1fr 1fr}.tab{font-size:14px}}
@media(max-width:760px){.topbar{height:62px;min-height:62px;grid-template-columns:1fr auto;padding:0 16px;gap:12px}.brand small{display:none}.brand strong{font-size:18px}.brand-mark{width:32px;height:34px;font-size:24px}.project-menu-btn{font-size:14px;padding:8px 12px}.top-actions{right:12px;top:57px}.topbar .tabs{position:fixed;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;background:#142e35;border-top:1px solid #436268;z-index:80}.tab{min-width:0;padding:0 2px;font-size:13px;white-space:nowrap}.tab::after{left:12px;right:12px;bottom:9px;background:#ddf38b}.tab.active{color:#ddf38b}main{padding-bottom:calc(80px + env(safe-area-inset-bottom))}#designView{grid-template-columns:minmax(0,1fr);min-height:0;overflow:visible}.palette-panel{position:static;top:auto;border-right:0;border-bottom:1px solid #d5e2dd;padding:12px 16px;overflow:hidden;max-height:none}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-heading h2{display:none}.panel-heading p{display:inline;margin-left:12px;font-size:12px}.component-list{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;min-width:0;padding-bottom:5px;margin-top:8px;scroll-snap-type:x proximity}.component-card{flex:0 0 76px;width:76px;height:78px;scroll-snap-align:start}.component-card .component-art{width:72px;height:72px}.component-card .supply-symbol{font-size:38px;height:70px}.palette-tip{display:none}.workspace-panel{min-height:0}.workspace-toolbar{display:flex;padding:17px 16px 12px;gap:10px}.project-title-wrap{flex-basis:100%}.project-title{font-size:19px;min-height:32px}.toolbar-group{max-width:none;gap:6px;flex-wrap:wrap;width:100%}.tool-btn{padding:8px 10px;min-height:42px;font-size:13px}.tool-btn span{display:none}.board-caption{padding:0 16px}.board-caption .eyebrow{font-size:11px}.board-caption>span:last-child{font-size:12px}.mode-help{margin:8px 16px 12px;font-size:13px}.board-wrap{padding:0 10px 16px}.board{border-width:8px;border-radius:19px;min-width:0}.simulation-bar{margin:0 10px;padding:14px;display:flex}.simulation-status{flex-basis:100%}.sim-controls{flex-basis:100%;justify-content:flex-start}.select-inline{justify-content:flex-start}.inspector-panel{top:auto;bottom:calc(65px + env(safe-area-inset-bottom));left:8px;right:8px;width:auto;max-width:none;max-height:75svh;border-radius:20px 20px 8px 8px;padding:16px 20px;z-index:90}.inspector-empty{padding:25px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inspector-preview-art{width:100px;height:100px;margin-top:-4px}.inspector-preview-art .component-art,.inspector-preview-art .supply-symbol{width:100px;height:100px}.inspector-header h2{font-size:20px}.results-view,.budget-view,.rules-view,.water-view{padding:22px 14px;gap:16px}.section-header{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}.section-header p{font-size:15px}.section-header h1{font-size:28px}.section-header .btn{width:auto}.header-actions{flex-wrap:wrap}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric{padding:15px}.metric strong{font-size:27px}.metric span{font-size:13px}.metric small{font-size:12px}.budget-layout{grid-template-columns:minmax(0,1fr)}.budget-summary{position:static}.water-layout{grid-template-columns:minmax(0,1fr)}.water-bottom-grid{grid-template-columns:minmax(0,1fr)}.pump-config-card{grid-column:auto}.water-system-card,.control-panel-card,.logic-card,.faults-card,.pump-config-card,.water-materials-card{padding:17px}.water-scene{height:420px;min-width:0}.pump-config-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.pump-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.level-controls{grid-template-columns:1fr}.source-list,.rules-grid{grid-template-columns:1fr}.source-list a{padding:15px}.card-title h2{font-size:18px}.dialog-grid{grid-template-columns:1fr}.dialog-grid .span-2{grid-column:auto}.toast{bottom:calc(80px + env(safe-area-inset-bottom));font-size:14px}dialog{max-height:85svh;overflow:auto}.mode-selector{grid-template-columns:1fr 62px 1fr}.water-mode-badge{max-width:50%;font-size:11px}.panel-plate-title small{min-height:0}.tank-label{font-size:13px}.pump-unit{gap:4px;padding:9px;width:38%}.pump-wheel{flex-basis:24px;width:24px}.pump-unit strong{font-size:14px}.pump-unit small{font-size:12px}.card-title>span{font-size:12px}.inspector-panel.open~*{pointer-events:auto}}
.tabs{grid-row:auto;grid-column:auto;height:100%;overflow:visible}
.illustration-note{font-size:12px;line-height:1.4;color:var(--muted);text-align:center;margin:0 0 18px}
.node .art-main{clip-path:inset(6% 24% 4% round 4px)}.node .art-rcd{clip-path:inset(6% 20% 4% round 4px)}.node .art-mcb{clip-path:inset(6% 31% 4% round 4px)}.node .art-spd{clip-path:inset(5% 19% 4% round 4px)}.node .art-contactor{clip-path:inset(4% 15% 4% round 5px)}.node .art-overload{clip-path:inset(5% 11% 5% round 5px)}.node .art-outlet{clip-path:inset(5% 17% 4% round 7px)}.node .art-light{clip-path:inset(5% 19% 4% round 30px)}.node .art-pump{clip-path:inset(12% 4% 12% round 7px)}
.level-controls input[type=range]{min-height:44px;touch-action:pan-x}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.topbar,.inspector-panel,.toast,.board-caption,.mode-help{display:none!important}main{padding:0}.view.active{padding:0}.table-scroll{overflow:visible}table{font-size:10px}td,th{padding:5px}.card{box-shadow:none}.water-layout,.water-bottom-grid{grid-template-columns:1fr 1fr}.section-header p{font-size:12px}.water-scene{height:400px}.control-panel-card{print-color-adjust:exact}.budget-summary{position:static}}