:root {
  --bg: #eef1f4;
  --panel: #ffffff;
  --panel2: #f7f8fa;
  --ink: #18202a;
  --muted: #5b6673;
  --line: #d7dce2;
  --wire: #2d3742;
  --rail: #2d3742;
  --accent: #0b6bcb;
  --accent-soft: #e3effb;
  --on: #12994a;
  --on-soft: rgba(18, 153, 74, .16);
  --warn: #a15c00;
  --err: #c03221;
  --dot: #c9d0d8;
  --hover: rgba(11, 107, 203, .07);
  --lamp-off: #c9d0d8;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  --stick: 120px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1217; --panel: #161b22; --panel2: #1b2129; --ink: #e6eaef; --muted: #97a2ae;
    --line: #2b333d; --wire: #aab4bf; --rail: #c9d1da; --accent: #4c9dff; --accent-soft: #16283d;
    --on: #3ddc84; --on-soft: rgba(61, 220, 132, .16); --warn: #f0a43a; --err: #ff6b5b;
    --dot: #2c3540; --hover: rgba(76, 157, 255, .09); --lamp-off: #3a434e;
    --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1217; --panel: #161b22; --panel2: #1b2129; --ink: #e6eaef; --muted: #97a2ae;
  --line: #2b333d; --wire: #aab4bf; --rail: #c9d1da; --accent: #4c9dff; --accent-soft: #16283d;
  --on: #3ddc84; --on-soft: rgba(61, 220, 132, .16); --warn: #f0a43a; --err: #ff6b5b;
  --dot: #2c3540; --hover: rgba(76, 157, 255, .09); --lamp-off: #3a434e;
  --shadow: none; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
code, kbd { font-family: var(--mono); font-size: .92em; }
kbd { border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; background: var(--panel2); }
button, select, input { font: inherit; color: inherit; }
button {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; transition: border-color .12s, background .12s;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input, select { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; min-width: 0; }
.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* ---------- cabecera ---------- */
.sticky { position: sticky; top: 0; z-index: 20; }
.top {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand b { font-size: 16px; white-space: nowrap; }
.logo { width: 26px; height: 26px; flex: 0 0 auto; }
.logo rect { fill: var(--accent); }
.logo path { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; }
.brand input { width: min(260px, 42vw); border-color: transparent; background: transparent; font-weight: 500; color: var(--muted); }
.brand input:hover, .brand input:focus { border-color: var(--line); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.run { background: var(--on); border-color: var(--on); color: #fff; font-weight: 600; min-width: 112px; }
.run.stop { background: var(--err); border-color: var(--err); }
:root[data-theme="dark"] .run, :root:not([data-theme="light"]) .run { color: #fff; }

.palette {
  display: flex; gap: 2px; padding: 6px 16px; overflow-x: auto;
  background: var(--panel2); border-bottom: 1px solid var(--line); scrollbar-width: thin;
}
.tool {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 70px; padding: 4px 2px 5px; border-radius: 8px; font-size: 11.5px; color: var(--muted);
  background: transparent; border: 1px solid transparent;
}
.tool svg { width: 50px; height: 24px; overflow: visible; }
.tool svg line, .tool svg path, .tool svg rect { stroke: var(--wire); stroke-width: 4.5; fill: none; stroke-linecap: round; }
.tool svg text { fill: var(--wire); font: 700 22px system-ui, sans-serif; text-anchor: middle; }
.tool.active { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.tool.active svg line, .tool.active svg path, .tool.active svg rect { stroke: var(--accent); }
.sep { flex: 0 0 1px; background: var(--line); margin: 6px 4px; }

/* ---------- panel de mando (simulación) ---------- */
.palette[hidden], .board[hidden] { display: none; }
.board {
  display: flex; gap: 18px; align-items: stretch; padding: 8px 16px 6px; overflow-x: auto;
  background: var(--panel2); border-bottom: 1px solid var(--line); scrollbar-width: thin;
}
.board-group { display: flex; gap: 6px; align-items: flex-end; flex: 0 0 auto; position: relative; padding-top: 16px; }
.board-group + .board-group { border-left: 1px solid var(--line); padding-left: 18px; }
.board-title { position: absolute; top: 0; left: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.board-group + .board-group .board-title { left: 18px; }
.board-hint { align-self: center; flex: 0 0 auto; max-width: 220px; margin: 0; font-size: 12px; color: var(--muted); }
.knob, .lamp-w {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 82px; padding: 4px 2px;
  background: transparent; border: 0; border-radius: 8px; touch-action: none; user-select: none; -webkit-user-select: none;
}
.knob:hover { background: var(--hover); }
.kn { font-size: 11.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knob code, .lamp-w code { font-size: 10.5px; color: var(--muted); }
.cap {
  width: 34px; height: 34px; border-radius: 50%; display: block; position: relative;
  background: radial-gradient(circle at 35% 30%, #6ee59a, #128a42 70%);
  box-shadow: 0 0 0 4px #9aa3ad, 0 3px 0 4px #6b747e, 0 4px 6px 4px rgba(0, 0, 0, .25);
  transition: transform .05s, box-shadow .05s; margin: 4px 0 6px;
}
.k-pbnc .cap { background: radial-gradient(circle at 35% 30%, #ff8a7a, #c0261a 70%); }
.k-swnc .cap {
  width: 38px; height: 38px; margin: 2px 0 4px;
  background: radial-gradient(circle at 35% 30%, #ff7a6a, #b3170d 72%);
  box-shadow: 0 0 0 5px #f5c400, 0 3px 0 5px #b48f00, 0 4px 6px 5px rgba(0, 0, 0, .25);
}
.k-sw .cap { background: radial-gradient(circle at 35% 30%, #59626d, #1f252c 70%); }
.k-sw .cap::after {
  content: ""; position: absolute; left: 50%; top: 4px; width: 6px; height: 26px; margin-left: -3px;
  border-radius: 3px; background: #e9edf1; transform: rotate(-40deg); transition: transform .12s;
}
.knob.down .cap { transform: translateY(3px); box-shadow: 0 0 0 4px #9aa3ad, 0 0 0 4px #6b747e, 0 1px 2px 4px rgba(0, 0, 0, .25); }
.k-swnc.down .cap { box-shadow: 0 0 0 5px #f5c400, 0 0 0 5px #b48f00, 0 1px 2px 5px rgba(0, 0, 0, .25); }
.k-sw.down .cap { transform: none; }
.k-sw.down .cap::after { transform: rotate(40deg); }
.lamp {
  width: 30px; height: 30px; border-radius: 50%; margin: 6px 0 8px; display: block;
  background: radial-gradient(circle at 35% 30%, #8d96a0, #4c545d 75%); box-shadow: 0 0 0 4px #9aa3ad;
  transition: background .06s, box-shadow .06s;
}
.lamp.on { background: radial-gradient(circle at 35% 30%, #d6ffe4, #22c55e 60%); box-shadow: 0 0 0 4px #9aa3ad, 0 0 16px 4px rgba(34, 197, 94, .7); }

/* contactos accionables en el diagrama */
#rungs.running .cell { cursor: default; }
#rungs.running .cell:hover { background-color: transparent; }
#rungs.running .cell.op { cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
#rungs.running .cell.op:hover { box-shadow: inset 0 0 0 2px var(--on); }
#rungs.running .cell.op.down { background-color: var(--on-soft); box-shadow: inset 0 0 0 2px var(--on); }
#rungs.running .rung-tools, #rungs.running .rung-foot button { visibility: hidden; }
.running-note { border-left: 3px solid var(--on); padding-left: 10px; }

/* ---------- pestañas de vista ---------- */
.views { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.views button { border: 0; background: transparent; color: var(--muted); font-weight: 600; padding: 6px 14px; border-radius: 7px; }
.views button[aria-selected="true"] { background: var(--accent); color: #fff; }
.real[hidden], #rungs[hidden], #btnAddRung[hidden] { display: none; }

/* ---------- vista de cableado real ---------- */
.real { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.real-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.zoom { display: inline-flex; align-items: center; gap: 4px; }
.zoom button { padding: 2px 9px; font-size: 13px; }
.zoom output { min-width: 44px; text-align: center; font: 600 12px var(--mono); color: var(--ink); }
.real-scroll { overflow-x: auto; scrollbar-width: thin; padding: 10px; }
.real-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.realsvg { display: block; margin: 0 auto; max-width: none; }
.realsvg text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.realsvg .plate { fill: url(#pPlate); stroke: #b9c0c7; }
.realsvg .zone { fill: rgba(255, 255, 255, .5); stroke: #bfc6cd; stroke-dasharray: 5 4; }
.realsvg .zt { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; fill: #7a848e; }
.realsvg .zt.end { text-anchor: end; }
.realsvg .rt { font: 700 11.5px var(--mono); }
.realsvg .rt.p { fill: #b3241d; } .realsvg .rt.n { fill: #1a4fae; }

/* cables: contorno + color + brillo + flujo */
.realsvg .wg path, .realsvg .ac, .realsvg .lead { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.realsvg .wo { stroke: rgba(0, 0, 0, .45); stroke-width: 4.4; }
.realsvg .w { stroke-width: 3; transition: stroke .08s; }
.realsvg .wh { stroke: rgba(255, 255, 255, .45); stroke-width: .9; transform: translate(-.7px, -.7px); }
.realsvg .rail .wo { stroke-width: 7; } .realsvg .rail .w { stroke-width: 5.4; } .realsvg .rail .wh { stroke-width: 1.4; }
.realsvg .cp .w { stroke: #c62a22; }
.realsvg .cn .w { stroke: #1d57c4; }
.realsvg .ws .w { stroke: #7c858e; }
.realsvg .ws.live .w { stroke: #ef4444; }
.realsvg .flow { stroke: rgba(255, 255, 255, .95); stroke-width: 1.4; stroke-dasharray: 2 11; display: none; }
.realsvg .live .flow { display: inline; animation: flow .55s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -13; } }
.realsvg .pw .w { stroke-width: 3.6; } .realsvg .pw .wo { stroke-width: 5; }
.realsvg .pw.l1 .w { stroke: #7a4a22; } .realsvg .pw.l2 .w { stroke: #24272b; } .realsvg .pw.l3 .w { stroke: #8f979f; }
.realsvg .pw.live .flow { stroke: rgba(255, 214, 10, .95); }
.realsvg .ac { stroke: #23272b; stroke-width: 4.5; }
.realsvg .act { font: 600 9.5px var(--mono); fill: #4b535b; }
.realsvg .lead { stroke: #4b535b; stroke-width: 2.2; }
.realsvg .l3t { font: 600 8.5px var(--mono); fill: #4b535b; text-anchor: middle; }
.realsvg .legend text { font-size: 10.5px; fill: #4b535b; }
.realsvg .lb { font-size: 11px; font-weight: 700; fill: #1b2128; paint-order: stroke; stroke: #e4e8eb; stroke-width: 3.5px; stroke-linejoin: round; }
.realsvg .la { font: 600 9.5px var(--mono); fill: #5b6570; paint-order: stroke; stroke: #e4e8eb; stroke-width: 3.5px; stroke-linejoin: round; }
.realsvg .lb.left, .realsvg .la.left { text-anchor: start; }

/* regleta de bornes */
.realsvg .tbb { fill: url(#gCover); stroke: #5b636b; stroke-width: .7; }
.realsvg .tbs { fill: rgba(0, 0, 0, .18); }
.realsvg .tbm { fill: #f7f9fa; stroke: #a9b1b8; stroke-width: .5; }
/* bornes */
.realsvg .term rect { fill: #3a4048; stroke: #1d2227; stroke-width: .6; }
.realsvg .term circle { fill: url(#gChrome); stroke: #5b636b; stroke-width: .7; }
.realsvg .term line { stroke: #3a4048; stroke-width: 1.1; }

/* fuente y PLC */
.realsvg .pst { font-size: 11.5px; font-weight: 800; fill: #2d3640; }
.realsvg .pst2 { font-size: 9px; fill: #4b535b; font-weight: 600; }
.realsvg .psled { fill: #3dff7a; filter: drop-shadow(0 0 2px #3dff7a); }
.realsvg .ptt { font: 700 9px var(--mono); fill: #f1f3f5; }
.realsvg .pside { font: 700 9px var(--mono); fill: #e9edf0; }
.realsvg .pt { font-size: 14px; font-weight: 800; fill: #f1f3f5; letter-spacing: .05em; }
.realsvg .pt2 { font-size: 9.5px; fill: #b7c0c8; font-weight: 600; }
.realsvg .pzone { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; fill: #c3cad1; text-anchor: end; }
.realsvg .pio { font: 700 9px var(--mono); fill: #1f2730; text-anchor: middle; }
.realsvg .pled { fill: #2a352d; stroke: #11161a; stroke-width: .7; }
.realsvg .pled.on { fill: #3dff7a; filter: drop-shadow(0 0 3px #3dff7a); }
.realsvg .prun, .realsvg .pstop { fill: #3a443d; }
.realsvg .prun.on { fill: #3dff7a; filter: drop-shadow(0 0 3px #3dff7a); }
.realsvg .pstop.on { fill: #ffb21f; filter: drop-shadow(0 0 3px #ffb21f); }

/* piezas comunes */
.realsvg .hit { fill: transparent; }
.realsvg [data-in] { cursor: pointer; }
.realsvg [data-in]:hover .bz, .realsvg [data-in]:hover .tbody { stroke: #0b6bcb; stroke-width: 2.2; }
.realsvg .bz { fill: url(#gChrome); stroke: #6c757d; stroke-width: .8; }
.realsvg .bz2 { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1; }
.realsvg .bzgap { fill: #15181b; }
.realsvg .cblock { fill: url(#gDark); stroke: #14181b; stroke-width: .8; }
.realsvg .cbface { fill: #e9edf0; }
.realsvg .blk { font: 700 7.5px var(--mono); fill: #1f2730; text-anchor: middle; }
.realsvg .aux .blk { fill: #e9edf0; }
.realsvg .blk2 { font: 700 7.5px var(--mono); fill: #4b535b; text-anchor: middle; }
.realsvg .shine { fill: rgba(255, 255, 255, .6); }
.realsvg .push.green .cap { fill: url(#gGreen); }
.realsvg .push.red .cap { fill: url(#gRed); }
.realsvg .cap { stroke: rgba(0, 0, 0, .35); stroke-width: .8; }
.realsvg .capg, .realsvg .mush { transition: transform .05s, filter .05s; }
.realsvg .down .capg { transform: scale(.84); filter: brightness(.82); }
/* selector */
.realsvg .legend-pl { fill: #23272b; }
.realsvg .pos { font: 800 7.5px var(--mono); fill: #f1f3f5; text-anchor: middle; }
.realsvg .hd { transform: rotate(-45deg); transition: transform .14s; }
.realsvg .selector.down .hd { transform: rotate(45deg); }
/* seta */
.realsvg .ytxt { font-size: 6.6px; font-weight: 800; letter-spacing: .12em; fill: #2f2500; text-anchor: middle; }
.realsvg .estop.down .mush { transform: scale(.88); filter: brightness(.78); }
.realsvg .lock { display: none; font-size: 7px; font-weight: 800; fill: #fff; text-anchor: middle; }
.realsvg .estop.down .lock { display: inline; }
/* térmico */
.realsvg .tbody { fill: url(#gThermal); stroke: #7f8890; stroke-width: .8; }
.realsvg .tface { fill: #eef1f3; stroke: #a9b1b8; stroke-width: .8; }
.realsvg .needle { stroke: #c41d11; stroke-width: 1.8; stroke-linecap: round; }
.realsvg .tr { font: 800 5.5px var(--mono); fill: #2d3640; text-anchor: middle; }
.realsvg .tl { font: 700 5.6px var(--mono); fill: #e9edf0; text-anchor: middle; }
.realsvg .tok { fill: #1f8f45; } .realsvg .tokt { font: 800 7.5px var(--mono); fill: #fff; text-anchor: middle; }
.realsvg .tflag, .realsvg .tflagt { display: none; }
.realsvg .tflag { fill: #f97316; } .realsvg .tflagt { font: 800 7.5px var(--mono); fill: #fff; text-anchor: middle; }
.realsvg .thermal.down .tflag, .realsvg .thermal.down .tflagt { display: inline; }
.realsvg .thermal.down .tok, .realsvg .thermal.down .tokt { display: none; }
/* sensor */
.realsvg .thr { stroke: rgba(0, 0, 0, .25); stroke-width: 1; }
.realsvg .beam { stroke: #ff3b30; stroke-width: 1.8; stroke-dasharray: 3 3; opacity: .3; }
.realsvg .obj { fill: #c08a4a; stroke: #7a5326; display: none; }
.realsvg .sensor.down .obj { display: inline; }
.realsvg .sensor.down .beam { opacity: 1; }
.realsvg .sled { fill: #4a4320; }
.realsvg .sensor.down .sled { fill: #ffd60a; filter: drop-shadow(0 0 3px #ffd60a); }
/* contacto auxiliar */
.realsvg .auxwin { fill: #15181b; }
.realsvg .aux.on .auxwin { fill: #3dff7a; }
/* piloto */
.realsvg .glow { opacity: 0; transition: opacity .08s; }
.realsvg .lamp.on .glow { opacity: .9; }
.realsvg .lens { stroke: rgba(0, 0, 0, .4); stroke-width: .8; }
.realsvg .c-red .lens { fill: url(#l_red0); } .realsvg .c-red.on .lens { fill: url(#l_red1); } .realsvg .c-red .glow { fill: #ff4b3e; }
.realsvg .c-green .lens { fill: url(#l_green0); } .realsvg .c-green.on .lens { fill: url(#l_green1); } .realsvg .c-green .glow { fill: #3dff7a; }
.realsvg .c-amber .lens { fill: url(#l_amber0); } .realsvg .c-amber.on .lens { fill: url(#l_amber1); } .realsvg .c-amber .glow { fill: #ffb21f; }
.realsvg .c-white .lens { fill: url(#l_white0); } .realsvg .c-white.on .lens { fill: url(#l_white1); } .realsvg .c-white .glow { fill: #fff3b0; }
.realsvg .c-blue .lens { fill: url(#l_blue0); } .realsvg .c-blue.on .lens { fill: url(#l_blue1); } .realsvg .c-blue .glow { fill: #4ca3ff; }
/* contactor */
.realsvg .cbody { fill: url(#gCase); stroke: #848c94; stroke-width: .9; }
.realsvg .ct { font: 700 6.5px var(--mono); fill: #2d3640; text-anchor: middle; }
.realsvg .cwin { fill: #23282d; }
.realsvg .plunger rect { fill: #9aa3ab; }
.realsvg .plunger { transition: transform .06s; }
.realsvg .contactor.on .plunger { transform: translateY(12px); }
.realsvg .contactor.on .plunger rect { fill: #3dff7a; }
/* motor */
.realsvg .mbody { fill: url(#gMotor); stroke: #1b2f45; stroke-width: 1; }
.realsvg .mt { font-size: 8.5px; font-weight: 800; fill: #23303d; text-anchor: middle; }
.realsvg .motor.on .spin { animation: spin .3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* relé */
.realsvg .rbody { fill: rgba(206, 224, 240, .8); stroke: #6f8396; stroke-width: .9; }
.realsvg .rarm { transform: rotate(22deg); transition: transform .06s; }
.realsvg .relay.on .rarm { transform: rotate(0deg); }
.realsvg .rled { fill: #4b1f1c; }
.realsvg .relay.on .rled { fill: #ff4b3e; filter: drop-shadow(0 0 3px #ff4b3e); }
/* sirena */
.realsvg .wave { fill: none; stroke: #e5484d; stroke-width: 2; stroke-linecap: round; opacity: 0; }
.realsvg .buzzer.on .wave { opacity: 1; animation: pulse .4s ease-in-out infinite alternate; }
.realsvg .buzzer.on .shake { animation: shake .08s linear infinite alternate; }
@keyframes pulse { from { opacity: .3; } to { opacity: 1; } }
@keyframes shake { from { transform: translateX(-1px); } to { transform: translateX(1px); } }
/* electroválvula */
.realsvg .vled { fill: #4a4320; }
.realsvg .valve.on .vled { fill: #ffd60a; filter: drop-shadow(0 0 3px #ffd60a); }
.realsvg .vspool { fill: #6b5418; transition: transform .08s; }
.realsvg .valve.on .vspool { transform: translateX(36px); }

/* circuito cableado directo */
.realsvg .lb { text-anchor: middle; }
.realsvg .rgt { font-size: 10.5px; font-weight: 700; fill: #4b5560; letter-spacing: .02em; }
.realsvg .rgsep { stroke: #c4cbd2; stroke-dasharray: 3 5; }
.realsvg .stem { stroke: #7d858d; stroke-width: 3; stroke-linecap: round; }
.realsvg .mk { font: 700 7.5px var(--mono); fill: #5b6570; text-anchor: middle; }
.realsvg .cw { fill: #15181b; transition: fill .06s; }
.realsvg .closed .cw, .realsvg .act .cw { fill: #3dff7a; }
.realsvg .rail.live .flow { display: inline; animation: flow .55s linear infinite; }
.realsvg [data-in] .cblock { cursor: pointer; }
.realsvg [data-in]:hover .cblock { stroke: #0b6bcb; stroke-width: 1.6; }
.realsvg .down .hd { transform: rotate(45deg); }
.realsvg .down .mush { transform: scale(.88); filter: brightness(.78); }
.realsvg .down .lock { display: inline; }
.realsvg .down .tflag, .realsvg .down .tflagt { display: inline; }
.realsvg .down .tok, .realsvg .down .tokt { display: none; }
.realsvg .down .obj { display: inline; }
.realsvg .down .beam { opacity: 1; }
.realsvg .down .sled { fill: #ffd60a; filter: drop-shadow(0 0 3px #ffd60a); }
.realsvg .on .glow { opacity: .9; }
.realsvg .on .c-red .lens { fill: url(#l_red1); }
.realsvg .on .c-green .lens { fill: url(#l_green1); }
.realsvg .on .c-amber .lens { fill: url(#l_amber1); }
.realsvg .on .c-white .lens { fill: url(#l_white1); }
.realsvg .on .c-blue .lens { fill: url(#l_blue1); }
.realsvg .on .plunger { transform: translateY(10px); }
.realsvg .on .plunger rect { fill: #3dff7a; }
.realsvg .on .rarm { transform: rotate(0deg); }
.realsvg .on .rled { fill: #ff4b3e; filter: drop-shadow(0 0 3px #ff4b3e); }
.realsvg .on .wave { opacity: 1; animation: pulse .4s ease-in-out infinite alternate; }
.realsvg .on .shake { animation: shake .08s linear infinite alternate; }
.realsvg .on .vled { fill: #ffd60a; filter: drop-shadow(0 0 3px #ffd60a); }
.realsvg .on .vspool { transform: translateX(28px); }
.realsvg .tdisp { font: 700 8.5px var(--mono); fill: #5dff9a; text-anchor: middle; }
.realsvg .tled { fill: #3a443d; }
.realsvg .on .tled { fill: #ffb21f; filter: drop-shadow(0 0 3px #ffb21f); }
.realsvg .cdisp { font: 700 12px var(--mono); fill: #ff5d4d; text-anchor: middle; letter-spacing: .12em; }
.realsvg .on .cdisp { fill: #52ff8e; }
.realsvg .counter .pos { font-size: 6px; }

/* ---------- distribución ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; padding: 16px; align-items: start; }
.side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(var(--stick) + 16px); max-height: calc(100vh - var(--stick) - 32px); overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; max-height: none; overflow: visible; }
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.panel h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.panel h3 { font-size: 12.5px; margin: 14px 0 4px; }
.hint { color: var(--muted); margin: 0 0 8px; font-size: 13px; }

/* ---------- peldaños ---------- */
.rung { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; box-shadow: var(--shadow); }
.rung-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0 14px; }
.rung-no { font: 600 12px var(--mono); color: var(--muted); white-space: nowrap; }
.rung-comment { flex: 1; border-color: transparent; background: transparent; font-weight: 500; }
.rung-comment:hover, .rung-comment:focus { border-color: var(--line); }
.rung-tools { display: flex; gap: 0; }
.rung-tools button { padding: 2px 7px; border-color: transparent; background: transparent; color: var(--muted); }
.rung-body { display: flex; align-items: stretch; padding: 4px 14px 2px; overflow-x: auto; scrollbar-width: thin; }
.rail { flex: 0 0 5px; background: var(--rail); border-radius: 3px; }
.rail.on { background: var(--on); }
.grid { display: grid; grid-template-columns: repeat(8, 100px); grid-auto-rows: 70px; flex: 0 0 auto; }
.cell {
  position: relative; cursor: pointer; border-radius: 6px;
  background-image: radial-gradient(circle at 50% 54.3%, var(--dot) 1.6px, transparent 2.2px);
}
.cell svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cell svg line, .cell svg path, .cell svg rect { stroke: var(--wire); stroke-width: 2.2; fill: none; stroke-linecap: round; transition: stroke .06s; }
.cell svg rect { fill: var(--panel); }
.cell.pin .l, .cell.pout .r { stroke: var(--on); stroke-width: 3.4; }
.cell.closed .s, .cell.act .s { stroke: var(--on); stroke-width: 3.2; }
.cell.act rect.s { fill: var(--on-soft); }
.cell text { text-anchor: middle; }
.cell .addr { font: 600 11.5px var(--mono); fill: var(--ink); }
.cell .addr.bad { fill: var(--err); }
.cell .name { font: 500 10.5px system-ui, sans-serif; fill: var(--muted); }
.cell .st { font: 700 13px system-ui, sans-serif; fill: var(--wire); }
.cell.closed .st, .cell.act .st { fill: var(--on); }
.cell .bt { font: 700 11px system-ui, sans-serif; fill: var(--ink); }
.cell .bv { font: 500 10px var(--mono); fill: var(--muted); }
.link { position: absolute; right: -1.5px; top: 38px; width: 3px; height: 70px; background: var(--wire); border-radius: 2px; pointer-events: none; z-index: 1; }
.link.on { background: var(--on); width: 3.6px; right: -1.8px; }
.cell.sel { box-shadow: inset 0 0 0 2px var(--accent); background-color: var(--hover); }
#rungs:not(.tool-select) .cell:hover { background-color: var(--hover); }
#rungs.tool-ERASE .cell:hover { background-color: rgba(192, 50, 33, .08); }
.rung-foot { display: flex; gap: 6px; padding: 2px 14px 10px; }
.rung-foot button { font-size: 12px; padding: 3px 8px; color: var(--muted); }
#btnAddRung { width: 100%; padding: 12px; border-style: dashed; color: var(--muted); background: transparent; }

/* ---------- inspector ---------- */
label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 0; }
label input { display: block; width: 100%; margin-top: 3px; color: var(--ink); font-size: 14px; }
#inAddr { font-family: var(--mono); }
.fmt { font-size: 11.5px; color: var(--muted); margin: 4px 0 0; }
.row { display: flex; gap: 6px; margin-top: 12px; }
.danger { color: var(--err); }

/* ---------- simulación ---------- */
.status { font-size: 12.5px; color: var(--muted); }
.status.on { color: var(--on); font-weight: 600; }
.io { display: grid; grid-template-columns: 12px 50px minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.io code { font-size: 12px; }
.io .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.io select { grid-column: 2 / 4; font-size: 12px; padding: 2px 6px; }
.io .ctl { grid-row: 1 / 3; grid-column: 4; min-width: 92px; touch-action: none; user-select: none; -webkit-user-select: none; }
.io .ctl.down { background: var(--accent); color: #fff; border-color: var(--accent); }
.io select.ctl { grid-row: 1 / 3; grid-column: 4; }
.io.out { grid-template-columns: 12px 50px minmax(0, 1fr); }
.led { width: 12px; height: 12px; border-radius: 50%; background: var(--lamp-off); transition: background .06s; }
.led.on { background: var(--on); box-shadow: 0 0 0 3px var(--on-soft); }
.out .led { width: 14px; height: 14px; }
.tm { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.tm .nm { grid-column: 1 / 4; font-size: 12px; color: var(--muted); }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--on); }
.v { font: 12px var(--mono); color: var(--muted); white-space: nowrap; }

/* ---------- revisión ---------- */
.warns { list-style: none; margin: 0; padding: 0; }
.warns li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; padding: 7px 4px; border-top: 1px solid var(--line); cursor: pointer; font-size: 13px; border-radius: 4px; }
.warns li:first-child { border-top: 0; }
.warns li:hover { background: var(--hover); }
.warns small { color: var(--muted); display: block; }
.lvl { font-weight: 800; text-align: center; }
.lvl.err { color: var(--err); }
.lvl.warn { color: var(--warn); }
.lvl.info { color: var(--accent); }
.ok { color: var(--on); margin: 0; font-size: 13px; }
.count { font: 600 11px var(--mono); padding: 1px 7px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); letter-spacing: 0; }

/* ---------- símbolos ---------- */
.tags { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tags th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11.5px; padding: 0 3px 4px; }
.tags td { padding: 2px 3px; }
.tags td:first-child { white-space: nowrap; }
.tags td input { width: 100%; padding: 3px 6px; font-size: 12.5px; }
.small { font-size: 12px; padding: 3px 8px; }

dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); max-width: 580px; width: calc(100% - 32px); padding: 20px 22px; }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog h2 { margin: 0 0 8px; font-size: 18px; }
dialog ol { padding-left: 20px; margin: 0 0 12px; }
dialog li { margin-bottom: 6px; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 4px 16px 24px; }

@media (max-width: 640px) {
  .top { padding: 8px 16px; }
  .layout { padding: 12px 16px; }
  .palette { padding: 6px 16px; }
  .brand input { width: 100%; }
  .brand { flex: 1 1 100%; }
}

@media print {
  .sticky, .side, .rung-tools, .rung-foot, #btnAddRung, .foot { display: none !important; }
  body { background: #fff; }
  .layout { display: block; padding: 0; }
  .rung { break-inside: avoid; box-shadow: none; }
  .rung-body { overflow: visible; }
}