/* PLC 3D: Ladder editor styles (shared by programación + simulador) */
.lad-tabsrow{ display:block; margin-bottom:18px; }
.cfg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; }
.cfg-panel{ border:1px solid var(--line); border-radius:14px; padding:13px 14px; background:rgba(255,255,255,.015); display:flex; flex-direction:column; }
.cfg-h{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--blue-2); margin-bottom:11px; }
.cfg-n{ width:18px; height:18px; border-radius:5px; border:1px solid var(--line-blue); display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; color:var(--blue-2); }
.cfg-panel .tabs, .cfg-panel .modetabs{ display:flex; flex-wrap:wrap; gap:6px; margin:0; align-content:center; flex:1; }
/* brand card (visual brand selector) */
.brand-card{ display:flex; flex-direction:column; gap:6px; flex:1; justify-content:center; }
.brand-chip{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.02); cursor:pointer; transition:all .18s; text-align:left; }
.brand-chip:hover{ border-color:var(--line-blue); background:var(--blue-soft); }
.brand-chip.active{ border-color:var(--line-blue); background:var(--blue-soft); box-shadow:inset 0 0 0 1px var(--line-blue); }
.brand-chip .bc-logo{ width:30px; height:30px; border-radius:8px; flex:none; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:14px; color:#fff; }
.brand-chip .bc-name{ display:flex; flex-direction:column; font-family:var(--body); font-weight:600; font-size:13.5px; color:var(--muted); line-height:1.2; }
.brand-chip.active .bc-name{ color:var(--text); }
.brand-chip .bc-name small{ font-family:var(--mono); font-weight:400; font-size:10px; color:var(--dim); margin-top:1px; }
@media (max-width:1100px){ .cfg-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .cfg-grid{ grid-template-columns:1fr; } }
.modetabs{ display:inline-flex; gap:5px; padding:5px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--line); margin-left:auto; }
.modetab{ border:0; background:transparent; color:var(--muted); font-family:var(--body); font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:10px; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:6px; }
.palette-modes{ margin-left:auto; padding:4px; gap:3px; align-items:center; }
.palette-modes .pm-label{ font-family:var(--mono); font-size:11px; color:var(--dim); padding:0 6px 0 4px; }
.cfg-select{ width:100%; appearance:none; background:var(--panel-2); border:1px solid var(--line-2); color:var(--text); font-family:var(--body); font-weight:600; font-size:14px; padding:11px 36px 11px 13px; border-radius:11px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239AA7BE' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; margin-top:auto; }
.cfg-select:focus{ outline:none; border-color:var(--blue); }
.palette-modes .modetab{ font-size:12.5px; padding:7px 12px; }
.modetab.active{ background:linear-gradient(180deg,var(--blue-2),var(--blue)); color:#fff; }
.modetabs .langtab{ border:0; background:transparent; color:var(--muted); font-family:var(--mono); font-weight:600; font-size:12.5px; padding:9px 15px; border-radius:10px; cursor:pointer; transition:all .2s; }
.modetabs .langtab.active{ background:rgba(46,123,255,.16); color:var(--cyan); }
.st-code{ margin:0; padding:18px 20px; font-family:'IBM Plex Mono',monospace; font-size:13.5px; line-height:1.7; color:#cdd6e6; white-space:pre-wrap; overflow-x:auto; }
.st-code .st-kw{ color:#5B9BFF; font-weight:600; }
.st-code .st-op{ color:#2E7BFF; }
.st-code .st-cm{ color:#5E6B82; font-style:italic; }
.sfc{ display:flex; flex-direction:column; align-items:center; gap:0; padding:24px 16px; font-family:'IBM Plex Mono',monospace; }
.sfc-step{ position:relative; min-width:230px; text-align:center; padding:14px 20px; border:2px solid var(--line-2); border-radius:10px; background:rgba(255,255,255,.03); color:#EAF0FB; font-size:13.5px; font-weight:600; transition:all .3s; }
.sfc-step.on{ border-color:var(--ok); background:rgba(47,210,122,.12); box-shadow:0 0 18px -4px rgba(47,210,122,.5); }
.sfc-step .sfc-act{ font-size:11px; color:#2E7BFF; margin-top:5px; font-weight:400; }
.sfc-step .sfc-init{ position:absolute; inset:3px; border:1px solid var(--line-2); border-radius:7px; pointer-events:none; }
.sfc-trans{ width:2px; height:42px; background:var(--line-2); position:relative; display:flex; align-items:center; justify-content:center; color:#9AA7BE; font-size:11px; white-space:nowrap; }
.sfc-trans::before{ content:''; position:absolute; left:-22px; right:auto; width:44px; height:2px; background:var(--line-2); }
.sfc-trans.arm{ background:var(--cyan); } .sfc-trans.arm::before{ background:var(--cyan); }
.sfc-trans span, .sfc-trans{ background-clip:padding-box; }
.sfc-loop{ margin-top:10px; color:#5E6B82; font-size:11px; }
.langtab-ia{ color:#2E7BFF !important; }
.langtab-ia.active{ background:linear-gradient(180deg,#2E7BFF,#1aa890) !important; color:#06210c !important; }
.ia-pane{ padding:20px; }
.ia-label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:10px; }
.ia-input{ width:100%; min-height:96px; background:var(--panel-2); border:1px solid var(--line-2); border-radius:12px; color:var(--text); font-family:var(--body); font-size:14.5px; line-height:1.5; padding:14px; resize:vertical; }
.ia-input:focus{ outline:none; border-color:var(--cyan); }
.ia-row{ display:flex; align-items:center; gap:14px; margin-top:12px; }
.ia-go{ background:linear-gradient(180deg,#2E7BFF,#1aa890); color:#06210c; border:0; border-radius:11px; font-family:var(--body); font-weight:700; font-size:14px; padding:12px 20px; cursor:pointer; }
.ia-go:hover{ filter:brightness(1.08); }
.ia-hint{ font-family:var(--mono); font-size:11px; color:var(--cyan); }
.ia-out{ margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ia-loading{ grid-column:1/-1; font-family:var(--mono); font-size:13px; color:var(--cyan); display:flex; align-items:center; gap:9px; padding:14px; }
.ia-card{ border:1px solid var(--line); border-radius:13px; overflow:hidden; background:rgba(255,255,255,.02); }
.ia-card-h{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-2); padding:10px 14px; border-bottom:1px solid var(--line); background:rgba(46,123,255,.06); }
.ia-card pre{ margin:0; padding:13px 14px; font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1.55; color:#cdd6e6; white-space:pre-wrap; max-height:240px; overflow:auto; }
.ia-note{ grid-column:1/-1; font-family:var(--mono); font-size:11.5px; color:var(--dim); padding:10px 2px; }
.ia-result{ border:1px solid var(--cyan-soft); border-radius:12px; background:rgba(46,123,255,.06); padding:14px 16px; }
.ia-res-h{ font-family:var(--display); font-weight:600; font-size:14px; color:var(--cyan); margin-bottom:8px; }
.ia-res-d{ font-family:var(--body); font-size:12px; color:var(--muted); line-height:1.5; }
.ia-chooser{ position:fixed; inset:0; z-index:300; background:rgba(4,8,16,.6); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; }
.ia-ch-box{ background:rgba(12,18,32,.98); border:1px solid var(--line-blue); border-radius:18px; box-shadow:0 30px 70px -20px rgba(0,0,0,.7); padding:24px; width:420px; max-width:calc(100vw - 32px); }
.ia-ch-h{ font-family:var(--display); font-weight:600; font-size:18px; color:#EAF0FB; margin-bottom:16px; text-align:center; }
.ia-ch-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ia-ch-btn{ font-family:var(--body); font-weight:600; font-size:14px; color:#EAF0FB; background:rgba(46,123,255,.1); border:1px solid var(--line-blue); border-radius:12px; padding:16px 12px; cursor:pointer; transition:all .2s; }
.ia-ch-btn:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }
.ia-ch-x{ width:100%; margin-top:14px; font-family:var(--mono); font-size:12.5px; color:var(--muted); background:none; border:1px solid var(--line-2); border-radius:11px; padding:11px; cursor:pointer; }
.ia-ch-x:hover{ color:#fff; }
@media (max-width:760px){ .ia-out{ grid-template-columns:1fr; } }

.ide{ border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.ide-bar{ display:flex; align-items:center; gap:11px; padding:13px 16px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.03), transparent); flex-wrap:wrap; }
.ide-sel-group{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.ide-sel{ appearance:none; background:var(--panel-2); border:1px solid var(--line-2); color:var(--text); font-family:var(--body); font-weight:600; font-size:12.5px; padding:8px 30px 8px 12px; border-radius:9px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239AA7BE' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
.ide-sel:focus{ outline:none; border-color:var(--blue); }
.ide-dot{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:13px; color:#fff; flex:none; }
.ide-bar .it{ font-family:var(--display); font-weight:600; font-size:14.5px; }
.ide-bar .is{ font-family:var(--mono); font-size:11px; color:var(--dim); }
.ide-online{ margin-left:auto; font-family:var(--mono); font-size:11px; padding:5px 10px; border-radius:999px; color:var(--ok); background:rgba(47,210,122,.1); border:1px solid rgba(47,210,122,.3); display:inline-flex; align-items:center; gap:6px; }
.palette{ display:flex; gap:9px; padding:11px 14px; border-bottom:1px solid var(--line); background:rgba(46,123,255,.05); align-items:center; flex-wrap:wrap; }
.palette .plabel{ font-family:var(--mono); font-size:11px; color:var(--dim); }
.chip-instr{ display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line-2); border-radius:10px; background:linear-gradient(180deg,var(--panel-3),var(--panel-2)); cursor:grab; user-select:none; font-family:var(--mono); font-size:11.5px; color:var(--muted); transition:transform .1s, border-color .2s, box-shadow .2s, color .2s; }
.chip-instr:hover{ color:var(--text); border-color:var(--line-blue); }
.chip-instr:active{ cursor:grabbing; transform:scale(.97); }
.chip-instr.sel{ border-color:var(--blue); box-shadow:var(--shadow-blue); color:var(--text); }
.chip-instr svg{ width:28px; height:18px; flex:none; }
.chip-instr .ci-k{ color:var(--blue-2); font-weight:700; }
.chip-div{ width:1px; height:24px; background:var(--line-2); margin:0 2px; flex:none; }
.chip-branch{ border-color:var(--cyan-soft); }
.chip-branch:hover{ border-color:var(--cyan); }
.chip-branch.sel{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan), 0 0 14px -3px var(--cyan); }
.cl-fields{ display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap; }
.cl-fields label{ display:flex; flex-direction:column; gap:4px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--dim); text-transform:uppercase; }
.cl-input{ width:64px; font-family:var(--mono); font-size:14px; font-weight:600; color:var(--text); background:var(--panel-2); border:1px solid var(--line-2); border-radius:8px; padding:7px 9px; }
.cl-input:focus{ outline:none; border-color:var(--blue); }
.cl-input:disabled{ color:var(--muted); opacity:.7; }
.cl-fields .clb{ align-self:flex-end; }
.lp-preinput{ width:100%; font-family:var(--mono); font-size:14px; font-weight:600; color:var(--text); background:var(--panel-2); border:1px solid var(--line-2); border-radius:9px; padding:9px 11px; }
.lp-preinput:focus{ outline:none; border-color:var(--blue); }
.palette .pbtn{ font-family:var(--mono); font-size:11px; color:var(--muted); padding:6px 10px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.02); cursor:pointer; }
.palette .pbtn:hover{ color:var(--text); border-color:var(--line-blue); }
.ide-bar .pbtn{ font-family:var(--mono); font-size:11.5px; color:var(--muted); padding:8px 13px; border-radius:9px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); cursor:pointer; transition:all .18s; }
.ide-bar .pbtn:hover{ color:var(--text); border-color:var(--line-blue); background:var(--blue-soft); }
.retos-host{ padding:18px 16px; }
.retos-grid2{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.reto-card{ border:1px solid var(--line-2); border-radius:14px; padding:16px 17px; background:linear-gradient(180deg,var(--panel-2),var(--panel)); cursor:pointer; transition:all .18s; }
.reto-card:hover{ border-color:var(--line-blue); transform:translateY(-3px); box-shadow:var(--shadow-blue); }
.reto-card h4{ font-family:var(--display); font-weight:600; font-size:15.5px; margin:10px 0 6px; }
.reto-card p{ font-family:var(--body); font-size:13px; color:var(--muted); line-height:1.45; }
.reto-lvl{ display:inline-block; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:999px; }
.reto-basico{ color:var(--ok); background:rgba(47,210,122,.12); }
.reto-intermedio{ color:var(--warn); background:rgba(245,181,68,.12); }
.reto-avanzado{ color:var(--bad); background:rgba(255,92,108,.12); }
.reto-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.reto-xp{ font-family:var(--mono); font-size:11.5px; color:var(--warn); }
.reto-go{ font-family:var(--mono); font-size:12px; color:var(--blue-2); }
.rungs{ padding:10px 12px; display:flex; flex-direction:column; gap:10px; }
.rung{ display:flex; align-items:stretch; gap:8px; border-bottom:1px dashed var(--line); padding-bottom:8px; }
.rung:last-of-type{ border-bottom:0; }
.rung-side{ width:54px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.rnum{ font-family:var(--mono); font-size:11px; color:var(--dim); cursor:pointer; border-radius:5px; padding:2px 4px; transition:color .15s; }
.rnum:hover{ color:var(--cyan); }
.rdel{ background:none; border:1px solid var(--line); color:var(--dim); border-radius:6px; width:22px; height:22px; cursor:pointer; font-size:11px; }
.rdel:hover{ color:var(--bad); border-color:var(--bad); }
.rwrap{ position:relative; flex:1; overflow-x:auto; overflow-y:visible; }
/* lienzo del renglón: contexto de posición de las .lcell. Ancho 100% (escala) o fijo en px (serie larga → scroll) */
.rcanvas{ position:relative; }
.rwrap svg{ display:block; width:100%; }
.rsvg .tag-name{ cursor:pointer; }
.rsvg .tag-name:hover{ opacity:.82; }
.lcell{ position:absolute; width:96px; height:76px; transform:translate(-50%,-50%); border-radius:11px; cursor:pointer; transition:all .15s; z-index:3; display:grid; place-items:center; }
.lcell.guide{ border:1.5px dashed var(--line-blue); background:rgba(46,123,255,.06); }
.lcell.ghost{ border:1.5px dashed rgba(120,160,210,.22); background:rgba(120,160,210,.02); border-radius:9px; }
.lcell.ghost:hover{ border-color:var(--line-blue); background:rgba(46,123,255,.06); }
.paste-ready .lcell.ghost{ border:1.5px dashed rgba(46,123,255,.55); background:rgba(46,123,255,.06); border-radius:9px; animation:pasteHueco 1.6s ease-in-out infinite; }
.ins-gap{ position:absolute; width:96px; height:76px; transform:translate(-50%,-50%); border-radius:9px; border:1.5px dashed rgba(120,160,210,.22); background:rgba(120,160,210,.02); cursor:pointer; z-index:4; transition:border-color .15s, background .15s; }
.ins-gap:hover{ border-color:var(--line-blue); background:rgba(46,123,255,.06); }
.paste-ready .ins-gap{ border-color:rgba(46,123,255,.55); background:rgba(46,123,255,.06); animation:pasteHueco 1.6s ease-in-out infinite; }
@keyframes pasteHueco{ 0%,100%{ border-color:rgba(46,123,255,.35); background:rgba(46,123,255,.04); } 50%{ border-color:rgba(46,123,255,.75); background:rgba(46,123,255,.10); } }
.lcell.ghost:hover{ border-color:var(--line-blue); background:rgba(46,123,255,.05); }
.lcell .lh{ font-family:var(--mono); font-size:10px; line-height:1.35; color:var(--blue-2); opacity:.9; text-align:center; pointer-events:none; }
.lcell.filled{ border:0; background:transparent; width:130px; }
.lcell.over{ border:1.6px dashed var(--cyan); background:rgba(46,123,255,.14); }
.lcell.bad{ border:1.6px solid var(--bad); background:rgba(255,92,108,.16); }
/* celda fantasma "+ salida" para apilar bobinas en paralelo (out2/out3): solo visible al pasar el cursor */
.lcell-addout{ border-color:rgba(46,123,255,.30) !important; opacity:0; pointer-events:none; transition:opacity .12s; }
.rwrap:hover .lcell-addout{ opacity:.85; pointer-events:auto; }
.lcell-addout .lh{ color:var(--cyan,#2E7BFF); }
.lcell-addout:hover{ border-color:var(--cyan,#2E7BFF) !important; background:rgba(46,123,255,.07) !important; }
/* LIBRE/RETOS, riel limpio: targets invisibles (siguen recibiendo drop/clic) y bobina "sin asignar" */
.lcell.bare{ border:none !important; background:transparent !important; }
.lcell.ghost-coil{ border:none !important; background:transparent !important; }
/* pero al ARRASTRAR sobre la zona invisible, resáltala como destino (GUIADO) */
.lcell.bare.over, .lcell.ghost-coil.over{ border:1.6px dashed var(--cyan) !important; background:rgba(46,123,255,.12) !important; }

/* ===== Nivel 1 · Puntos de conexión al arrastrar (modo LIBRE) ===== */
/* Marcadores de inserción en serie: inertes/ocultos salvo durante el arrastre (solo el nodo ::after) */
.ins-gap{ border:none !important; background:transparent !important; opacity:0; pointer-events:none; }
/* Al iniciar el arrastre se revelan TODOS los destinos compatibles (filtrados por data-acc) como
   cuadritos cian a ~30%. Los incompatibles no casan el selector → no se encienden. Visible solo en drag. */
/* entradas: solo el destino CONTIGUO (data-conn) + marcadores de inserción; salidas: por data-acc */
.dragging-instr[data-drag-acc="in"]  .lcell.ghost[data-conn="1"][data-acc="in"],
.dragging-instr[data-drag-acc="in"]  .ins-gap,
.dragging-instr[data-drag-acc="out"] .lcell.ghost[data-acc="out"]{ opacity:1 !important; pointer-events:auto !important; }
.dragging-instr[data-drag-acc="in"]  .lcell.ghost[data-conn="1"][data-acc="in"]::after,
.dragging-instr[data-drag-acc="in"]  .ins-gap::after,
.dragging-instr[data-drag-acc="out"] .lcell.ghost[data-acc="out"]::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:15px; height:15px; border-radius:4px; pointer-events:none;
  /* la transición NO incluye width/height → el activo salta a su tamaño sin quedarse a medias en 15px */
  transition:background .12s, border-color .12s, box-shadow .12s;
  background:rgba(46,123,255,.30); border:1.5px solid rgba(46,123,255,.45); }
/* Destino de enganche ACTIVO (más cercano al cursor): cian sólido + glow más grande (glow solo en el activo). */
.dragging-instr .conn-active::after{
  background:#2E7BFF !important; border-color:#2E7BFF !important; width:20px !important; height:20px !important;
  box-shadow:0 0 14px rgba(46,123,255,.75) !important; }
/* selector de 2 posiciones (interruptor visible ON/OFF) */
.ioswitch{ display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.iosw-track{ position:relative; width:42px; height:22px; border-radius:11px; background:#1a2740; border:1px solid var(--line-2,#243049); transition:background .15s; }
.iosw-knob{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#7d8aa3; transition:left .15s, background .15s; }
.ioswitch.on .iosw-track{ background:rgba(46,123,255,.22); border-color:#2E7BFF; }
.ioswitch.on .iosw-knob{ left:22px; background:#2E7BFF; }
.iosw-lbl{ font-family:var(--mono); font-size:11px; color:#7d8aa3; min-width:24px; }
.ioswitch.on .iosw-lbl{ color:#2E7BFF; }
.add-rung{ margin:6px 0 4px 56px; font-family:var(--mono); font-size:12px; color:var(--blue-2); background:rgba(46,123,255,.08); border:1px dashed var(--line-blue); border-radius:9px; padding:8px 14px; cursor:pointer; }
.add-rung:hover{ background:var(--blue-soft); }
.build-hint{ padding:11px 16px; font-family:var(--mono); font-size:12px; color:var(--warn); border-top:1px solid var(--line); display:flex; align-items:center; gap:8px; }
.build-hint.ok{ color:var(--ok); }
.guided-band{ display:flex; align-items:center; gap:12px; }
.guided-band .gb-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--warn); background:rgba(245,181,68,.12); border:1px solid rgba(245,181,68,.25); padding:4px 9px; border-radius:7px; flex:none; }
.guided-band.ok .gb-tag{ color:var(--ok); background:rgba(47,210,122,.12); border-color:rgba(47,210,122,.3); }
.guided-band .gb-obj{ flex:1; min-width:0; color:var(--text); font-family:var(--body); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.guided-band .gb-prog{ flex:none; width:90px; height:6px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; }
.guided-band .gb-prog > i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--warn),var(--ok)); transition:width .3s; }
.guided-band.ok .gb-prog > i{ background:var(--ok); }
.guided-band .gb-step{ flex:none; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted); }
.build-hint .dot{ width:7px; height:7px; }
.gs-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:20px; margin-top:20px; align-items:start; }
.guide-card .gstep{ display:flex; gap:11px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--muted); }
.guide-card .gstep:last-child{ border-bottom:0; }
.guide-card .gn{ width:22px; height:22px; border-radius:6px; flex:none; display:grid; place-items:center; border:1.5px solid var(--line-2); font-family:var(--mono); font-size:11px; color:var(--dim); }
.guide-card .gstep.done .gn{ background:var(--ok); border-color:var(--ok); color:#08121f; }
.guide-card .gstep.done{ color:var(--text); }
.io-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.io{ padding:11px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.02); display:flex; flex-direction:column; gap:7px; }
.io .iohead{ display:flex; align-items:center; justify-content:space-between; }
.io .lamp{ width:12px; height:12px; border-radius:50%; background:#1b2438; border:1px solid var(--line-2); transition:all .2s; }
.io.on .lamp{ background:var(--ok); box-shadow:0 0 11px var(--ok); border-color:var(--ok); }
.io .ioaddr{ font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--text); }
.io .iotag{ font-family:var(--mono); font-size:10px; color:var(--blue-2); }
.io .iotype{ font-family:var(--mono); font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.io.out .iotag{ color:var(--cyan); }
.cardlet{ margin-top:12px; padding:14px; border:1px solid var(--line-2); border-radius:14px; background:linear-gradient(180deg,var(--panel-2),var(--panel)); }
.cardlet .cl-h{ display:flex; justify-content:space-between; align-items:center; font-family:var(--display); font-size:14px; }
.cl-dn{ font-family:var(--mono); font-size:11px; padding:3px 9px; border-radius:999px; border:1px solid var(--line-2); color:var(--dim); }
.cl-dn.on{ color:var(--ok); border-color:var(--ok); background:rgba(47,210,122,.12); }
.cl-bar{ height:8px; border-radius:5px; background:rgba(255,255,255,.07); overflow:hidden; margin:11px 0; }
.cl-bar > i{ display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:width .15s; }
.cl-row{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.cl-row b{ color:var(--text); }
.cl-btns{ margin-left:auto; display:flex; gap:6px; }
.clb{ font-family:var(--mono); font-size:11px; color:var(--muted); width:30px; height:26px; border-radius:7px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); cursor:pointer; }
.clb:hover{ color:var(--text); border-color:var(--line-blue); }
.legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; }
.legend span{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.legend i{ width:16px; height:3px; border-radius:2px; display:inline-block; }
/* compact physical buttons for the ladder section */
.lad-push{ display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.push{ width:130px; border:1px solid var(--line-2); border-radius:14px; padding:11px; display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; background:linear-gradient(180deg,var(--panel-2),var(--panel)); transition:transform .08s, opacity .2s; }
.push:active{ transform:translateY(2px); }
.push.disabled{ opacity:.4; filter:grayscale(.4); pointer-events:none; }
.push .cap{ width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; box-shadow:inset 0 -3px 8px rgba(0,0,0,.4); border:2px solid rgba(0,0,0,.3); transition:filter .1s, box-shadow .1s; }
.push.start .cap{ background:radial-gradient(circle at 38% 32%, #4be08a, #1f8f4f); }
.push.stop .cap{ background:radial-gradient(circle at 38% 32%, #ff7a86, #b3202e); }
.push.start.down .cap{ filter:brightness(1.3); box-shadow:0 0 16px rgba(75,224,138,.6); }
.push.stop.down .cap{ filter:brightness(1.25); box-shadow:0 0 16px rgba(255,92,108,.55); }
.push .cap svg{ width:17px; height:17px; color:rgba(255,255,255,.92); }
.push .pl{ font-family:var(--display); font-weight:600; font-size:13px; line-height:1.1; }
.push .pa{ font-family:var(--mono); font-size:10px; color:var(--blue-2); }
.lad-motor{ font-family:var(--mono); font-size:11px; padding:6px 11px; border-radius:999px; border:1px solid var(--line-2); display:inline-flex; align-items:center; gap:7px; color:var(--dim); transition:all .3s; }
.lad-motor.on{ color:var(--ok); border-color:rgba(47,210,122,.35); background:rgba(47,210,122,.12); }
.lad-pop{ position:absolute; z-index:80; width:288px; background:rgba(12,18,32,.98); backdrop-filter:blur(14px); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--shadow); padding:14px; }
.lad-pop .lp-h{ font-family:var(--display); font-weight:600; font-size:14px; margin-bottom:10px; }
.lad-pop .lp-lbl{ font-family:var(--mono); font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; margin:10px 0 7px; }
.lp-seg{ display:flex; gap:6px; align-items:center; }
.lp-seg button{ flex:1; font-family:var(--mono); font-size:12px; color:var(--muted); padding:8px; border-radius:9px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); cursor:pointer; }
.lp-seg button.on{ color:#fff; background:var(--blue-soft); border-color:var(--line-blue); }
.lp-pre{ font-family:var(--mono); font-size:14px; color:var(--text); min-width:30px; text-align:center; }
.lp-syms{ display:flex; flex-direction:column; gap:4px; }
.lp-syms button{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; width:100%; font-family:var(--mono); font-size:12px; color:var(--text); padding:9px 12px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.02); cursor:pointer; text-align:left; }
.lp-syms button:hover{ border-color:var(--line-blue); background:rgba(255,255,255,.04); }
.lp-syms button small{ color:var(--dim); font-size:10.5px; text-align:right; white-space:nowrap; flex:none; }
.lp-syms button.on{ border-color:var(--blue); background:var(--blue-soft); }
.lp-scroll{ max-height:264px; overflow-y:auto; margin-right:-4px; padding-right:4px; }
.lp-scroll::-webkit-scrollbar{ width:6px; } .lp-scroll::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:3px; }
.lp-cat{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; color:var(--blue-2); letter-spacing:.04em; margin:12px 0 7px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.lp-cat:first-child{ margin-top:2px; }
.lp-search{ display:flex; align-items:center; gap:8px; margin:4px 0 6px; padding:0 10px; height:34px; border-radius:9px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); }
.lp-search:focus-within{ border-color:var(--line-blue); background:var(--blue-soft); }
.lp-search svg{ width:14px; height:14px; color:var(--dim); flex:none; }
.lp-search .lp-q{ flex:1; background:none; border:none; outline:none; color:var(--text); font-family:var(--mono); font-size:12px; }
.lp-search .lp-q::placeholder{ color:var(--dim); }
.lp-count{ font-family:var(--mono); font-size:9px; color:var(--blue-2); background:var(--blue-soft); border:1px solid var(--line-blue); border-radius:999px; padding:1px 6px; margin-left:4px; }
.lp-cat{ cursor:pointer; user-select:none; }
.lp-cat .lp-cname{ flex:1; }
.lp-cat .lp-cn{ font-family:var(--mono); font-size:9px; color:var(--dim); background:rgba(255,255,255,.05); border-radius:999px; padding:1px 6px; }
.lp-cat .lp-caret{ color:var(--dim); font-size:13px; transition:transform .15s; transform:rotate(90deg); }
.lp-cat.collapsed .lp-caret{ transform:rotate(0deg); }
.lp-cat:hover .lp-cname{ color:var(--text); }
.lp-empty{ font-family:var(--mono); font-size:11px; color:var(--dim); text-align:center; padding:14px 0 6px; }
.lp-allbtn{ flex:none; width:26px; height:26px; display:grid; place-items:center; border-radius:7px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--dim); cursor:pointer; transition:.15s; }
.lp-allbtn svg{ width:14px; height:14px; transition:transform .18s; }
.lp-allbtn:hover{ color:var(--text); border-color:var(--line-blue); }
.lp-allbtn.on{ color:var(--cyan); border-color:var(--line-blue); background:var(--blue-soft); }
.lp-allbtn.on svg{ transform:rotate(180deg); }
.lp-syms button.free small{ color:var(--dim); opacity:.7; font-style:italic; }
.lp-syms button.free{ opacity:.82; }
.lp-syms button.free:hover{ opacity:1; }
.lp-cdot{ width:8px; height:8px; border-radius:2px; flex:none; background:var(--blue); }
.lp-cdot.in{ background:var(--blue-2); } .lp-cdot.out{ background:var(--cyan); } .lp-cdot.mem{ background:var(--warn); } .lp-cdot.cnt{ background:#a06bff; } .lp-cdot.tmr{ background:var(--warn); }
.lp-foot{ margin-top:12px; display:flex; gap:8px; }
.lp-del{ flex:1; font-family:var(--mono); font-size:12px; color:var(--bad); padding:9px; border-radius:9px; border:1px solid rgba(255,92,108,.3); background:rgba(255,92,108,.08); cursor:pointer; }
.lp-ok{ flex:1; font-family:var(--mono); font-size:12px; font-weight:600; color:#fff; padding:9px; border-radius:9px; border:0; background:linear-gradient(180deg,var(--blue-2),var(--blue)); cursor:pointer; }
.lp-ok:hover{ filter:brightness(1.08); }
.pbtn-more{ color:var(--cyan) !important; border-color:var(--cyan-soft) !important; }
.instr-cats{ display:flex; gap:7px; flex-wrap:wrap; padding:11px 14px 0; align-items:center; }
.lang-inline{ display:flex; align-items:center; gap:3px; margin-left:auto; background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:11px; padding:4px; flex-wrap:nowrap; }
.lang-row{ display:flex; align-items:center; gap:5px; padding:11px 14px; border-top:1px solid var(--line); }
.lang-row .li-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--dim); text-transform:uppercase; margin-right:7px; }
.lang-row .langtab{ border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--muted); font-family:var(--mono); font-weight:600; font-size:12.5px; padding:8px 16px; border-radius:9px; cursor:pointer; transition:all .18s; }
.lang-row .langtab:not(.active):hover{ background:var(--blue-soft); color:var(--text); border-color:var(--line-blue); }
.lang-row .langtab.active{ background:linear-gradient(180deg,var(--blue-2),var(--blue)); color:#fff; border-color:transparent; }
.lang-row .langtab-ia{ color:var(--cyan); border-color:var(--cyan-soft); }
.lang-row .langtab-ia.active{ background:linear-gradient(180deg,#2E7BFF,#1aa890); color:#06210c; border-color:transparent; }
.lang-inline .li-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--dim); padding:0 7px 0 6px; text-transform:uppercase; }
.lang-inline .langtab{ padding:7px 13px; font-size:12.5px; font-family:var(--mono); font-weight:600; border-radius:9px; }
.lang-inline .langtab:not(.active):hover{ background:rgba(255,255,255,.05); color:var(--text); }
.lang-inline .langtab-ia{ color:var(--cyan) !important; }
.lang-inline .langtab-ia.active{ background:linear-gradient(180deg,#2E7BFF,#1aa890) !important; color:#06210c !important; }
.ide-toolbar{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line); background:linear-gradient(180deg, transparent, rgba(255,255,255,.02)); }
.ide-toolbar .ide-online{ margin-left:0; }
.ide-toolbar .pbtn-auto{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--blue-2); border-color:var(--line-blue); background:var(--blue-soft); font-family:var(--body); font-weight:600; padding:9px 15px; }
.ide-toolbar .pbtn-auto:hover{ color:#fff; background:linear-gradient(180deg,var(--blue-2),var(--blue)); border-color:transparent; }
.ide-toolbar #btnStartLad.is-running{ background:linear-gradient(180deg,#F5B544,#d6951f); }
.icat{ font-family:var(--body); font-weight:600; font-size:12.5px; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:9px; padding:7px 13px; cursor:pointer; transition:all .18s; }
.icat.active{ color:#fff; background:var(--blue-soft); border-color:var(--line-blue); }
.icat:hover{ color:var(--text); }
.chip-instr.soon{ opacity:.5; cursor:not-allowed; position:relative; }
.chip-instr.soon .ci-k{ color:var(--muted); }
.ci-soon{ font-family:var(--mono); font-size:8.5px; color:var(--warn); font-style:normal; background:rgba(245,181,68,.12); padding:1px 5px; border-radius:5px; }
/* ---------- TRENDS · graficador en vivo ---------- */
.tr-wrap{ height:100%; display:flex; flex-direction:column; }
.tr-tools{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tr-run{ font-family:var(--mono); font-size:11.5px; font-weight:700; color:#06210c; background:linear-gradient(180deg,#2E7BFF,#1aa890); border:0; border-radius:9px; padding:8px 14px; cursor:pointer; }
.tr-run:not(.on){ color:var(--cyan); background:rgba(46,123,255,.08); border:1px solid var(--cyan-soft); }
.tr-run:hover{ filter:brightness(1.07); }
.tr-section{ margin:2px 0 8px; }
.tr-slbl{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); margin:6px 0 7px; }
.tr-slbl i{ font-style:normal; color:var(--cyan); background:rgba(46,123,255,.1); border-radius:5px; padding:0 6px; margin-left:4px; }
.tr-empty{ font-family:var(--mono); font-size:11px; color:var(--dim); }
.tr-plus{ font-style:normal; color:var(--cyan); font-weight:700; }
.tr-rm{ font-style:normal; color:var(--dim); margin-left:3px; padding:0 4px; border-radius:5px; cursor:pointer; }
.tr-rm:hover{ color:#ff7a90; background:rgba(255,92,108,.16); }
.tr-paused{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; color:var(--muted); background:rgba(5,9,18,.55); backdrop-filter:blur(1px); z-index:2; pointer-events:none; }
.tr-paused b{ color:var(--cyan); }
.tr-winseg{ display:flex; border:1px solid var(--line-2); border-radius:9px; overflow:hidden; }
.tr-win{ font-family:var(--mono); font-size:11px; color:var(--muted); background:transparent; border:0; padding:7px 11px; cursor:pointer; }
.tr-win.on{ background:var(--blue-soft); color:#fff; }
.tr-btn{ font-family:var(--mono); font-size:11px; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:9px; padding:7px 11px; cursor:pointer; }
.tr-btn:hover{ color:var(--text); border-color:var(--line-blue); }
.tr-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 12px; }
.tr-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--muted); background:rgba(255,255,255,.02); border:1px solid var(--line-2); border-radius:999px; padding:5px 11px 5px 7px; cursor:pointer; transition:all .15s; }
.tr-chip:hover{ color:var(--text); border-color:var(--line-blue); }
.tr-chip.on{ color:var(--text); border-color:var(--c, var(--cyan)); background:rgba(255,255,255,.04); }
.tr-chip .tr-sw{ width:11px; height:11px; border-radius:4px; border:1.5px solid; flex:none; }
.tr-chip .tr-kind{ font-size:9px; color:var(--dim); border:1px solid var(--line); border-radius:5px; padding:1px 5px; }
.tr-canvas-wrap{ position:relative; flex:1; min-height:230px; border:1px solid var(--line); border-radius:12px; background:rgba(5,9,18,.55); overflow:hidden; }
.tr-canvas-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; }
.tr-cursor{ position:absolute; top:10px; pointer-events:none; display:flex; flex-direction:column; gap:3px; font-family:var(--mono); font-size:10.5px; color:var(--text); background:rgba(10,15,28,.94); border:1px solid var(--line-2); border-radius:9px; padding:8px 11px; min-width:130px; z-index:3; }
.tr-cursor b{ color:var(--cyan); font-weight:600; }
.tr-hint{ font-family:var(--mono); font-size:10.5px; color:var(--dim); margin-top:9px; }
/* ---------- árbol de E/S desplegable ---------- */
.iotree-fold{ border:1px solid var(--line-2); border-radius:13px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.015), transparent); }
.itf-head{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:12px 15px; background:transparent; border:0; color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.04em; cursor:pointer; transition:color .15s; }
.itf-head:hover{ color:var(--text); }
.itf-head svg:first-child{ color:var(--blue-2); }
.itf-badge{ font-size:10px; color:var(--cyan); background:rgba(46,123,255,.08); border:1px solid var(--cyan-soft); border-radius:6px; padding:2px 8px; }
.itf-chev{ margin-left:auto; transition:transform .25s; }
.iotree-fold.open .itf-chev{ transform:rotate(180deg); }
.itf-body{ padding:4px 16px 16px; border-top:1px solid var(--line); }
.itf-body .ar-head{ display:none; }
/* mode views (arquitectura / árbol IO) */
/* ---------- barra de rutinas ---------- */
.rtn-bar{ display:flex; align-items:center; gap:7px; padding:9px 16px; border-bottom:1px solid var(--line); background:rgba(46,123,255,.04); flex-wrap:wrap; }
.rtn-bar .rtn-l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-right:3px; }
.rtn-tab{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:9px; padding:7px 12px; cursor:pointer; transition:all .16s; }
.rtn-tab:hover{ color:var(--text); border-color:var(--line-blue); }
.rtn-tab.on{ color:#fff; background:var(--blue-soft); border-color:var(--blue); }
.rtn-tab .rtn-x{ font-style:normal; color:var(--dim); padding:0 2px; border-radius:4px; }
.rtn-tab .rtn-x:hover{ color:#ff7a90; background:rgba(255,92,108,.15); }
.rtn-add{ font-family:var(--mono); font-size:11.5px; color:var(--cyan); background:rgba(46,123,255,.07); border:1px dashed var(--cyan-soft); border-radius:9px; padding:7px 12px; cursor:pointer; }
.rtn-add:hover{ background:rgba(46,123,255,.14); }
/* picker PID / JSR */
.lp-chk{ display:flex; align-items:center; gap:8px; font-family:var(--body); font-size:12px; color:var(--muted); margin:10px 0 4px; cursor:pointer; }
.op-mini{ font-family:var(--mono); font-size:10px; color:var(--dim); margin-right:6px; }
.op-opt{ font-family:var(--mono); font-size:11.5px; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:8px; padding:6px 11px; cursor:pointer; margin:2px 3px 2px 0; }
.op-opt:hover{ color:var(--text); border-color:var(--line-blue); }
.op-opt.on{ color:#fff; background:var(--blue-soft); border-color:var(--blue); }
.op-opts{ display:flex; flex-wrap:wrap; }
.lp-note{ font-family:var(--mono); font-size:11px; color:var(--dim); padding:4px 0; }
.mode-view{ position:absolute; inset:0; z-index:8; overflow:auto; background:radial-gradient(120% 120% at 50% 0%, rgba(46,123,255,.10), transparent 60%), linear-gradient(180deg,#0b1322,#070b16); padding:18px 22px; }
.ar-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.ar-eye{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-2); }
.ar-title{ font-family:var(--display); font-weight:700; font-size:18px; margin-top:4px; white-space:nowrap; }
.ar-brandsw{ display:flex; gap:5px; }
.ar-b{ font-family:var(--mono); font-size:11.5px; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:8px; padding:7px 11px; cursor:pointer; }
.ar-b.on{ color:#fff; background:var(--blue-soft); border-color:var(--line-blue); }
.ar-diagram{ display:flex; flex-direction:column; align-items:center; gap:0; }
.ar-node{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.ar-hmi .ar-scr{ width:120px; height:74px; border-radius:9px; background:linear-gradient(160deg,#16324f,#0c1c30); border:2px solid var(--line-blue); box-shadow:inset 0 0 18px rgba(46,123,255,.3); }
.ar-cpu .ar-rack{ display:flex; gap:4px; padding:10px 12px; border-radius:8px; background:#11203a; border:1px solid var(--line-2); }
.ar-cpu .ar-rack i{ width:14px; height:42px; border-radius:3px; background:linear-gradient(180deg,#314f7d,#1a2c4a); display:block; }
.ar-lbl{ font-family:var(--mono); font-size:12px; color:var(--text); text-align:center; }
.ar-lbl span{ display:block; font-size:10px; color:var(--dim); margin-top:2px; }
.ar-link.v{ width:2px; height:30px; background:var(--ok); }
.ar-bus{ width:88%; display:flex; justify-content:center; margin:14px 0 6px; }
.ar-bus-line{ width:100%; height:2px; background:linear-gradient(90deg,transparent,var(--ok),var(--ok),transparent); }
.ar-mods{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.ar-mod{ display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.ar-mod::before{ content:''; position:absolute; top:-20px; width:2px; height:20px; background:var(--ok); }
.ar-mod-ic{ width:46px; height:58px; border-radius:7px; display:grid; place-items:center; background:#11203a; border:1px solid var(--line-2); }
.ar-mod-ic span{ font-family:var(--mono); font-size:12px; font-weight:700; }
.ar-di span{ color:#5B9BFF; } .ar-do span{ color:#2E7BFF; } .ar-ai span{ color:#F5B544; } .ar-ao span{ color:#FF8E5C; } .ar-sw span{ color:#9AA7BE; }
.ar-mod-n{ font-family:var(--body); font-size:12px; font-weight:600; color:var(--text); }
.ar-mod-d{ font-family:var(--mono); font-size:10px; color:var(--dim); }
.ar-foot{ font-family:var(--mono); font-size:11px; color:var(--dim); text-align:center; margin-top:18px; }
.iot-tree{ font-family:var(--mono); font-size:13px; }
.iot-root{ color:var(--blue-2); margin-bottom:10px; }
.iot-branch{ margin:0 0 14px 14px; border-left:1px solid var(--line-2); padding-left:14px; }
.iot-bh{ color:var(--text); font-weight:600; margin-bottom:8px; }
.iot-leaf{ display:flex; align-items:center; gap:10px; padding:5px 0; }
.iot-dot{ width:8px; height:8px; border-radius:50%; background:var(--blue-2); flex:none; }
.iot-dot.out{ background:var(--cyan); }
.iot-addr{ color:var(--muted); min-width:150px; }
.iot-tag{ color:var(--text); }
.tg-bar{ display:flex; gap:18px; font-family:var(--mono); font-size:11px; color:var(--dim); margin:6px 0 12px; }
.tg-table{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px; }
.tg-table th{ text-align:left; padding:8px 12px; color:var(--blue-2); font-weight:600; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--line-2); background:rgba(46,123,255,.05); }
.tg-table td{ padding:8px 12px; border-bottom:1px solid var(--line); color:var(--text); }
.tg-table tr:hover td{ background:rgba(255,255,255,.02); }
.tg-show{ color:var(--dim); }
.tg-edit-hint{ margin-left:auto; color:var(--blue-2); }
.tg-name{ color:#5B9BFF; font-weight:600; }
.tg-tw{ display:inline-block; width:14px; color:var(--blue-2); cursor:pointer; }
.tg-struct .tg-name{ cursor:pointer; }
.tg-member .tg-mname{ color:var(--muted); font-weight:400; padding-left:22px; font-size:12px; }
.tg-member td{ background:rgba(255,255,255,.015); }
.tg-val.tg-hot{ color:var(--ok) !important; font-weight:700; }
.tg-name[contenteditable]{ cursor:text; border-radius:5px; padding:2px 5px; outline:none; }
.tg-name[contenteditable]:hover{ background:rgba(46,123,255,.08); }
.tg-name[contenteditable]:focus{ background:rgba(46,123,255,.14); box-shadow:0 0 0 1px var(--line-blue); }
.tg-alias{ color:var(--muted); }
.tg-type{ color:var(--cyan); }
.tg-val{ color:var(--text); }
/* filas de diagnóstico de canal (Over/Underrange): solo lectura */
.tg-diag .tg-name{ color:var(--muted); font-weight:400; }
.tg-diag td{ background:rgba(255,255,255,.012); }
.tg-ro-ico{ display:inline-block; width:11px; height:11px; margin-right:6px; vertical-align:-1px; opacity:.55; }
.tg-ro-ico svg{ width:100%; height:100%; }
.tg-scope{ color:var(--dim); font-size:11px; }
.mode-seg{ display:flex; gap:4px; background:var(--panel-2); border:1px solid var(--line-2); border-radius:11px; padding:4px; }
.mseg{ flex:1; font-family:var(--body); font-weight:600; font-size:11.5px; color:var(--muted); background:none; border:0; border-radius:8px; padding:9px 6px; cursor:pointer; transition:all .18s; white-space:nowrap; }
.mseg.active{ color:#fff; background:linear-gradient(180deg,var(--blue-2),var(--blue)); }
.instr-picker{ border-top:1px solid var(--line); background:rgba(8,12,22,.5); padding:14px 16px; }
.ip-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.ip-head b{ font-family:var(--display); font-weight:600; font-size:15px; color:#EAF0FB; }
.ip-search{ flex:1; max-width:340px; background:var(--panel-2); border:1px solid var(--line-2); border-radius:10px; color:var(--text); font-family:var(--body); font-size:13.5px; padding:9px 13px; }
.ip-search:focus{ outline:none; border-color:var(--blue); }
.ip-x{ margin-left:auto; background:none; border:0; color:var(--muted); cursor:pointer; font-size:14px; padding:4px 8px; border-radius:7px; }
.ip-x:hover{ color:#fff; background:rgba(255,255,255,.06); }
.ip-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.ip-tab{ font-family:var(--body); font-weight:600; font-size:13px; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px; padding:8px 14px; cursor:pointer; transition:all .2s; }
.ip-tab.active{ color:#fff; background:var(--blue-soft); border-color:var(--line-blue); }
.ip-tab:hover{ color:var(--text); }
.ip-body{ display:flex; flex-direction:column; gap:16px; max-height:320px; overflow-y:auto; }
.ip-gname{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--dim); text-transform:uppercase; margin-bottom:9px; }
.ip-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.ip-tile{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; position:relative; padding:13px 14px; border:1px solid var(--line-2); border-radius:12px; background:linear-gradient(180deg,var(--panel-3),var(--panel-2)); cursor:pointer; transition:all .18s; text-align:left; }
.ip-tile:hover{ border-color:var(--line-blue); transform:translateY(-2px); }
.ip-tile b{ font-family:var(--mono); font-size:14px; color:var(--blue-2); }
.ip-tile span{ font-family:var(--body); font-size:11.5px; color:var(--muted); line-height:1.3; }
.ip-tile.soon{ opacity:.5; cursor:not-allowed; }
.ip-tile.soon:hover{ transform:none; border-color:var(--line-2); }
.ip-soon{ position:absolute; top:8px; right:9px; font-family:var(--mono); font-size:9px; color:var(--warn); font-style:normal; background:rgba(245,181,68,.12); padding:2px 6px; border-radius:6px; }
.ip-tile.shake{ animation:ipShake .4s; }
@keyframes ipShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@media (max-width:900px){ .gs-grid{ grid-template-columns:1fr; } .io-grid{ grid-template-columns:repeat(3,1fr); } }

/* ===== Comparación / Matemáticas: operand picker + numeric registers ===== */
.lad-pop-num{ width:340px; }
.lad-pop-num .lp-lbl{ margin:13px 0 7px; }
.op-sec{ margin-bottom:4px; }
.op-tags{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.op-tags button{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--text); padding:7px 9px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.02); cursor:pointer; transition:all .14s; }
.op-tags button small{ font-family:var(--mono); font-weight:400; font-size:9.5px; color:var(--dim); }
.op-tags button:hover{ border-color:var(--line-blue); }
.op-tags button.on{ border-color:var(--blue); background:var(--blue-soft); }
.op-tags button.sys{ background:rgba(160,107,255,.06); }
.op-tags button.sys small{ color:#a06bff; }
.op-tags button.sys.on{ border-color:#a06bff; background:rgba(160,107,255,.14); }
.op-const{ display:flex; align-items:center; gap:8px; margin-top:7px; }
.op-row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.op-row2 .op-sec{ margin:0; }
.op-const span{ font-family:var(--mono); font-size:13px; color:var(--dim); width:14px; text-align:center; }
.op-cinput{ flex:1; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--text); background:var(--panel-2); border:1px solid var(--line-2); border-radius:9px; padding:8px 10px; }
.op-cinput:focus{ outline:none; border-color:var(--blue); }
.lp-eval{ margin-top:12px; font-family:var(--mono); font-size:12.5px; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; text-align:center; }
.lp-eval b{ color:var(--text); }
.lp-eval.tru{ color:var(--ok); border-color:rgba(47,210,122,.3); background:rgba(47,210,122,.08); }
.lp-eval.tru b{ color:var(--ok); }
.lp-eval.fls{ color:var(--bad); border-color:rgba(255,92,108,.25); background:rgba(255,92,108,.07); }
.lp-eval.fls b{ color:var(--bad); }
.num-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:6px; }
.mem-grid{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.mem-chip{ font-family:var(--mono); font-size:11px; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:8px; padding:6px 11px; cursor:pointer; transition:all .14s; }
.mem-chip:hover{ color:var(--text); border-color:var(--line-blue); }
.mem-chip.on{ color:#06210c; background:var(--ok); border-color:var(--ok); font-weight:600; }
/* panel lateral de rutinas (estética del analizador) */
.ide-rung-wrap{ display:flex; gap:14px; align-items:flex-start; }
.ide-rung-wrap .rungs-host{ flex:1; min-width:0; }
.routine-side{ width:214px; flex:none; border:1px solid var(--line-2); border-radius:13px; background:rgba(46,123,255,.03); padding:10px; max-height:600px; overflow:auto; display:flex; flex-direction:column; gap:5px; }
.rs-prog{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin:4px 2px 7px; }
.rs-rt{ display:flex; align-items:center; gap:8px; text-align:left; padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.02); border:1px solid var(--line); cursor:pointer; transition:all .14s; }
.rs-rt:hover{ border-color:var(--line-blue); }
.rs-rt.on{ background:var(--blue-soft); border-color:var(--blue); }
.rs-rt .rt-ty{ font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.04em; color:#5B9BFF; background:rgba(46,123,255,.12); padding:2px 5px; border-radius:5px; flex:none; }
.rs-rt .rt-n{ font-family:var(--body); font-weight:600; font-size:12.5px; color:var(--text); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rs-rt .rt-c{ font-family:var(--mono); font-size:9.5px; color:var(--dim); }
.rs-rt .rtn-x{ font-style:normal; color:var(--dim); padding:0 3px; border-radius:4px; }
.rs-rt .rtn-x:hover{ color:#ff7a90; background:rgba(255,92,108,.15); }
.rs-actions{ display:flex; flex-direction:column; gap:6px; margin-top:8px; padding-top:9px; border-top:1px solid var(--line); }
.rs-btn{ font-family:var(--mono); font-size:11px; padding:7px 10px; border-radius:8px; cursor:pointer; border:1px dashed var(--cyan-soft); background:rgba(46,123,255,.07); color:var(--cyan); text-align:center; }
.rs-btn:hover{ background:rgba(46,123,255,.14); }
.rs-btn.exp{ border-style:solid; border-color:var(--line-blue); background:var(--blue-soft); color:var(--blue-2); }
@media (max-width:760px){ .ide-rung-wrap{ flex-direction:column; } .routine-side{ width:100%; max-height:200px; flex-direction:row; flex-wrap:wrap; } .rs-actions{ flex-direction:row; } }
.cardlet .cl-h b{ white-space:nowrap; }
.num-f{ display:flex; flex-direction:column; gap:5px; }
.num-f span{ font-family:var(--mono); font-size:10px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.num-f span i{ font-style:normal; font-size:8.5px; color:var(--cyan); background:rgba(46,123,255,.1); padding:1px 5px; border-radius:5px; }
.num-f .cl-input{ width:100%; }
@media (max-width:560px){ .num-grid{ grid-template-columns:repeat(2,1fr); } .op-tags{ grid-template-columns:1fr; } }