*{box-sizing:border-box}body{margin:0;background:#00121e;color:#e7fbff;font:14px 'Segoe UI',Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;background:#041b2a;border-bottom:1px solid #0a6482}header strong{color:#ffd04f}h1{font-size:22px;margin:6px 0 0}a{color:#9de7ff}button{border:1px solid #0b8fb7;background:#06384f;color:white;border-radius:5px;padding:10px 12px;font-weight:700;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:hover:not(:disabled),button[aria-pressed=true]{background:#0a6686}button:focus-visible,a:focus-visible,.block:focus-visible{outline:3px solid #ffd04f;outline-offset:3px}.toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:14px 24px 4px}.hint{color:#9bcbd9;line-height:1.5}body>p{padding:0 24px;margin:10px 0}main{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;padding:0 24px;flex:1;min-height:400px}#workspace{height:calc(100vh - 245px);min-height:400px;overflow:auto;border:1px solid #0a6482;border-radius:7px;background:#031725}#board{position:relative;width:1800px;height:1100px;background-image:radial-gradient(#17465a 1px,transparent 1px);background-size:20px 20px}#lines{position:absolute;inset:0;width:100%;height:100%}#nodes{position:absolute;inset:0;pointer-events:none}.block{position:absolute;width:200px;height:100px;border:2px solid #65d9fa;border-radius:8px;padding:12px;color:#fff;pointer-events:auto;touch-action:none;user-select:none;cursor:grab;overflow:hidden}.block:active{cursor:grabbing}.block.selected{border-color:#ffd04f;box-shadow:0 0 0 2px #ffd04f55}.block strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.block small{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;white-space:pre-wrap}.edge{stroke:#65d9fa;stroke-width:3;fill:none;pointer-events:none}.edge.selected{stroke:#ffd04f;stroke-width:5}.edge-hit{stroke:transparent;stroke-width:20;fill:none;cursor:pointer;pointer-events:stroke}aside{padding:15px;background:#051f31;border:1px solid #0a6482;border-radius:7px}h2{margin:0 0 15px;font-size:18px}label{display:block;margin:10px 0}input,textarea{display:block;width:100%;margin-top:5px;padding:8px;background:#031522;color:white;border:1px solid #176783;border-radius:4px;font:inherit}input[type=color]{height:40px}fieldset{border:1px solid #176783;margin:18px 0;padding:10px}footer{padding:12px 24px;color:#9de7ff}@media(max-width:800px){main{grid-template-columns:1fr}aside{margin-bottom:12px}header{gap:15px}h1{font-size:18px}}
/* Superficie de ingeniería y simbología vectorial. */
body{background:radial-gradient(ellipse at 15% 0%,#08334b 0,transparent 48%),#020c17}
header{background:linear-gradient(105deg,#051c30ee,#06101eee);border-bottom-color:#1daaca;box-shadow:0 8px 40px #0005}header strong{color:#6fdcf4;font-size:11px;letter-spacing:2px}h1{letter-spacing:2px;text-shadow:0 0 22px #16a9d766}
.system-badge{display:flex;align-items:center;gap:8px;font:11px monospace;letter-spacing:1px;color:#76e9d4;border:1px solid #17625f;background:#073c3433;padding:10px 14px;border-radius:30px}.system-badge i{width:7px;height:7px;background:#59eacb;border-radius:50%;box-shadow:0 0 10px #59eacb}
.toolbar button{font-size:11px;letter-spacing:.4px;background:linear-gradient(180deg,#0b3850,#062536);box-shadow:inset 0 1px #56dcff22}.toolbar #add{background:linear-gradient(135deg,#0b7792,#084559);border-color:#54d9f7}.toolbar #connect[aria-pressed=true]{border-color:#ffd04f;color:#ffd04f}
.diagram-legend{display:flex;flex-wrap:wrap;gap:20px;padding:0 24px 12px;font-size:11px;color:#acbfcb}.diagram-legend span{display:flex;gap:7px;align-items:center}.diagram-legend i{width:7px;height:7px;border-radius:2px}.legend-tdf{background:#5eddfa}.legend-breaker{background:#ffcc77}.legend-tda{background:#b5a0ff}.flow-note{margin-left:auto;color:#7894a9}
#workspace{height:calc(100vh - 285px);border-color:#17687e;box-shadow:inset 0 0 60px #0008,0 0 25px #18bad508}
#board{background-color:#030f1b;background-image:linear-gradient(#1d577718 1px,transparent 1px),linear-gradient(90deg,#1d577718 1px,transparent 1px),radial-gradient(#28658277 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px}
aside{background:linear-gradient(160deg,#092235,#031422);border-color:#18516a;box-shadow:inset 0 1px #67d8ff15}aside h2{font-size:13px;text-transform:uppercase;letter-spacing:2px;color:#77d4e8}aside legend{color:#95d9e9;font-size:12px}select{display:block;width:100%;margin-top:5px;padding:8px;background:#031522;color:#e7fbff;border:1px solid #176783;border-radius:4px;font:inherit}footer{font:12px monospace;border-top:1px solid #12374b;margin-top:12px}
.block{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #51c8e1;border-radius:8px;box-shadow:inset 0 0 24px #0006,0 5px 20px #0008,0 0 12px #1ecdee16;overflow:visible}.block::before,.block::after{content:'';position:absolute;top:calc(50% - 4px);width:8px;height:8px;border:1px solid #96eafd;background:#07293a;border-radius:50%;box-shadow:0 0 6px #42d4ff99}.block::before{left:-5px}.block::after{right:-5px}.block.selected{border-color:#ffe08a;box-shadow:0 0 0 2px #ffd04f55,0 0 24px #e8b63322}.block-content{min-width:0;flex:1}.block-type{display:block;font:9px monospace;letter-spacing:1.5px;color:#91c5d2;margin-bottom:4px}.block strong{font-size:13px}.block small{font-size:10px;line-height:1.3;color:#c7d8e5;-webkit-line-clamp:2}.electrical-symbol{width:48px;height:66px;flex-shrink:0;color:#71e4ff;filter:drop-shadow(0 0 4px #26b3da55)}.equipment-breaker{border-color:#eab75e}.equipment-breaker .electrical-symbol{color:#ffcf83;filter:drop-shadow(0 0 4px #dfae5355)}.equipment-tda{border-color:#aa95f3}.equipment-tda .electrical-symbol{color:#c1afff;filter:drop-shadow(0 0 4px #9879f355)}
.edge{stroke:#3488a5;stroke-width:2;stroke-linejoin:round}.edge-glow{stroke:#1fc5e9;stroke-width:9;stroke-opacity:.09;stroke-linejoin:round;fill:none;pointer-events:none}.edge-flow{stroke:#8ceeff;stroke-width:3;stroke-dasharray:10 22;stroke-linecap:round;stroke-linejoin:round;fill:none;pointer-events:none;filter:drop-shadow(0 0 3px #33ddff);animation:connection-flow 1.2s linear infinite}.edge.selected{stroke:#ffd04f;stroke-width:4}.edge-hit:focus-visible{stroke:#ffd04f66;outline:none}.flow-paused .edge-flow{animation-play-state:paused}
@keyframes connection-flow{to{stroke-dashoffset:-32}}
dialog{color:#e7fbff;background:linear-gradient(145deg,#092b40,#020e1c);border:1px solid #27b8d3;border-radius:14px;padding:24px;width:min(880px,94vw);max-height:90vh;box-shadow:0 24px 100px #000b,0 0 60px #1babc322}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.picker-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.picker-head h2{font-size:23px;margin:8px 0}.eyebrow{font:10px monospace;letter-spacing:2px;color:#7fe4ff}.equipment-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.equipment-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:22px 12px;background:linear-gradient(160deg,#10374b,#071828);border:1px solid #226b82;min-height:250px;transition:transform .15s,border-color .15s,box-shadow .15s}.equipment-card:hover{transform:translateY(-4px);border-color:#8ceeff;box-shadow:0 8px 25px #35d7fa22}.equipment-card strong{font-size:20px;letter-spacing:2px}.equipment-card span:not(.equipment-icon){font-size:12px;line-height:1.5;font-weight:400}.equipment-card small{font-size:10px;line-height:1.4;color:#90b4c8;font-weight:400}.equipment-icon{display:block;width:80px;height:85px;padding:6px;background:#08364b77;border:1px solid #458da344;border-radius:12px}.equipment-icon .electrical-symbol{width:65px;height:70px}#addBreaker .electrical-symbol{color:#ffcf83}#addTda .electrical-symbol{color:#c1afff}#addGeneric .electrical-symbol{color:#a9c4d0}
@media(max-width:900px){.system-badge{display:none}.equipment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-note{margin-left:0}}@media(prefers-reduced-motion:reduce){.edge-flow{animation:none}.equipment-card{transition:none}}
.block-content .block-state{display:block;font:8px monospace;font-weight:bold;margin-top:4px;color:#d8fff0}.block-content .block-maintenance{display:block;font:8px monospace;color:#ffe3a2;margin-top:3px}.block-content .block-maintenance:empty{display:none}.block small{-webkit-line-clamp:1}.block.has-flow{background:#064331!important;border-color:#4bf7ac;box-shadow:inset 0 0 18px #0ef39b18,0 0 13px #3ff7a329}.block.has-flow .electrical-symbol{color:#6affb7}.block.no-flow,.block.maintenance-overdue{background:#491421!important;border-color:#ff5b66;animation:block-red 1.2s ease-in-out infinite}.block.no-flow .electrical-symbol,.block.maintenance-overdue .electrical-symbol{color:#ff8391}.block.maintenance-due{border-color:#ffd04f;animation:block-yellow 1.5s ease-in-out infinite}.block.maintenance-due .block-maintenance{color:#ffe980;font-weight:bold}.block.selected{outline:2px solid #eafaff;outline-offset:3px}.edge.connection-off{stroke:#ff5b66;stroke-dasharray:5 5;animation:line-red 1.2s ease-in-out infinite}.edge-glow.connection-off{stroke:#ff5b66}.edge-flow.connection-off{display:none}.edge.connection-live{stroke:#32c99a}.edge-flow.connection-live{stroke:#8affce}.source-control{display:flex;gap:8px;align-items:center;font-size:12px}.source-control input{width:auto;margin:0}.maintenance-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.maintenance-notes{grid-column:1/-1}.maintenance-record{padding:12px;border:1px solid #24556b;border-radius:6px;background:#051928;margin-bottom:10px}.maintenance-record strong{color:#8debd4}.maintenance-record p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;margin:6px 0;color:#cadce8}#maintenanceHistory{max-height:280px;overflow:auto}#maintenanceMessage{min-height:22px}#maintenanceDialog{max-width:800px}
@keyframes block-red{0%,100%{box-shadow:0 0 5px #ff425544}50%{box-shadow:0 0 22px #ff4255bb,inset 0 0 18px #ff425544;border-color:#ffb0b8}}
@keyframes block-yellow{0%,100%{box-shadow:0 0 4px #ffd04f44}50%{box-shadow:0 0 22px #ffd04faa,inset 0 0 16px #ffd04f33;border-color:#fff4c3}}
@keyframes line-red{50%{stroke-opacity:.35}}
@media(prefers-reduced-motion:reduce){.block.no-flow,.block.maintenance-overdue,.block.maintenance-due,.edge.connection-off{animation:none}}
@media(max-width:600px){.maintenance-grid{grid-template-columns:1fr}}
.canvas-panel{min-width:0}.viewport-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 10px;background:#061b2b;border:1px solid #17687e;border-radius:7px 7px 0 0}.viewport-tools button{padding:6px 10px;font-size:11px}.viewport-tools span{font-size:11px;color:#93c6d7}#zoomLevel{min-width:45px;color:#e7fbff;font-weight:bold}#workspace{position:relative;overflow:hidden;touch-action:none;cursor:grab;border-radius:0 0 7px 7px;background-color:#030f1b;background-image:radial-gradient(#28658299 1px,transparent 1px);background-size:20px 20px;height:calc(100vh - 350px)}#workspace.panning{cursor:grabbing}#board{position:absolute;left:0;top:0;width:0;height:0;background:none;transform-origin:0 0;overflow:visible}#lines{width:1px;height:1px;overflow:visible;pointer-events:none}#nodes{width:0;height:0;overflow:visible}aside{max-height:calc(100vh - 280px);overflow:auto}
.maintenance-alert-bar{margin:0 24px 12px;padding:11px 15px;border:1px solid #246755;border-left-width:6px;background:#062a24;color:#a6efcf;border-radius:6px;font-size:14px;font-weight:800;letter-spacing:.5px}.maintenance-alert-bar.alarm-due{background:#493b08;color:#fff1a1;border-color:#ffd04f}.maintenance-alert-bar.alarm-overdue{background:#521b27;color:#fff0f2;border-color:#ff5b66}.maintenance-alarm-panel{padding-bottom:16px;margin-bottom:18px;border-bottom:2px solid #255570}.maintenance-alarm-panel h2{color:#ffe394;line-height:1.5}.maintenance-alarm-item{display:block;width:100%;text-align:left;margin:8px 0;padding:11px;border-left-width:5px;line-height:1.4}.maintenance-alarm-item strong,.maintenance-alarm-item span{display:block;overflow-wrap:anywhere}.maintenance-alarm-item span{font-size:11px;margin-top:5px}.maintenance-alarm-item.alarm-due{background:#493b08;border-color:#ffd04f;color:#fff0a4}.maintenance-alarm-item.alarm-overdue{background:#511726;border-color:#ff5b66;color:#ffe6eb}
.block-alarm-badge{position:absolute;left:-5px;bottom:calc(100% + 7px);width:210px;min-height:30px;padding:7px 5px;border:2px solid;border-radius:5px;text-align:center;font:bold 11px 'Segoe UI',Arial,sans-serif;letter-spacing:.25px;pointer-events:none;box-shadow:0 3px 14px #0009;z-index:1}.block-alarm-badge[hidden]{display:none}.block-alarm-badge.alarm-due{color:#241900;background:#ffda43;border-color:#fff1a1;animation:maintenance-beacon 1.4s ease-in-out infinite}.block-alarm-badge.alarm-overdue{color:white;background:#cc163b;border-color:#ff98aa;animation:maintenance-beacon 1.2s ease-in-out infinite}.block-content .block-maintenance{font-size:9px;font-weight:bold}.block.maintenance-due{border-width:3px}.block.maintenance-overdue{border-width:3px}@keyframes maintenance-beacon{50%{filter:brightness(1.35);box-shadow:0 0 20px currentColor}}@media(prefers-reduced-motion:reduce){.block-alarm-badge{animation:none!important}}@media(max-width:800px){aside{max-height:none}.maintenance-alert-bar{font-size:12px}#workspace{height:60vh}}
#diagramEmpty{position:absolute;inset:35% 10% auto;text-align:center;color:#b7dfea;font-size:14px;line-height:1.8;z-index:2}#diagramEmpty[hidden]{display:none}
html[data-embed=true],html[data-embed=true] body{width:100%;height:100%;min-height:0;overflow:hidden}html[data-embed=true] body{display:flex;flex-direction:column;background:#030f1b}html[data-embed=true] header,html[data-embed=true] .toolbar,html[data-embed=true] #help,html[data-embed=true] .diagram-legend,html[data-embed=true] aside,html[data-embed=true] footer{display:none}html[data-embed=true] main{display:flex;flex:1;min-height:0;padding:0;gap:0}html[data-embed=true] .canvas-panel{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}html[data-embed=true] .viewport-tools{padding:5px 8px;border-radius:0;border-width:0 0 1px;flex-shrink:0;gap:5px}html[data-embed=true] .viewport-tools button{padding:4px 8px;font-size:10px}html[data-embed=true] .viewport-tools span:last-child{display:none}html[data-embed=true] #workspace{flex:1;height:0;min-height:0;width:100%;border:0}html[data-embed=true] .maintenance-alert-bar{margin:0;padding:6px 9px;border-radius:0;border-width:0 0 1px 4px;flex-shrink:0;font-size:11px;letter-spacing:0}html[data-embed=true] .block{cursor:default}