.vpx{ position:relative; display:block; height:82vh; min-height:680px; border:1px solid var(--line2); border-radius:20px; overflow:hidden; color:var(--text); font-family:var(--body); -webkit-font-smoothing:antialiased; background:radial-gradient(120% 90% at 18% 0%, rgba(25,80,110,.18), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(20,60,120,.14), transparent 60%), var(--bg); }
.vpx .app{ height:100%; }
/* ===== Modo de trabajo · en la fila de Lenguaje, alineado a la derecha ===== */
.vpx .instrbar .modeinline{ margin-left:auto; }
.vpx .instrbar .modeinline label{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--dim); text-transform:uppercase; }
.vpx .instrbar .modeinline .seg button{ padding:8px 13px; }
.vpx .instrbar .toolbtns{ margin-left:14px; }
/* ramas paralelas: deja respirar el visor para que no recorte el rung */
.vpx .stage{ min-height:0; }
.vpx .lad-embed .rung{ min-height:0; }
/* ===== control de simulación · transporte pegado al diagrama escalera ===== */
.vpx .rail-style{ margin:0 auto 10px; }
.vpx .runbar{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:12px 24px 4px; padding:11px 14px; border:1px solid var(--line2); border-radius:14px; background:linear-gradient(180deg, rgba(13,24,40,.7), rgba(8,15,26,.65)); }
.vpx .runbar .run-primary{ display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:700; font-size:13px; letter-spacing:.01em; color:#04201f; background:linear-gradient(180deg, #3ee07a, #21b864); border:0; border-radius:11px; padding:11px 18px; cursor:pointer; box-shadow:0 8px 22px -10px #2bd36e; transition:.16s; }
.vpx .runbar .run-primary:hover{ filter:brightness(1.06); }
.vpx .runbar .run-primary svg{ width:16px; height:16px; }
.vpx .runbar .run-primary .ic-pause, .vpx .runbar .run-primary .ic-reset{ display:none; }
.vpx .runbar .run-primary[data-state="run"]{ color:#fff; background:linear-gradient(180deg, #f5a14a, #e07b2a); box-shadow:0 8px 22px -10px #e88b34; }
.vpx .runbar .run-primary[data-state="run"] .ic-play{ display:none; }
.vpx .runbar .run-primary[data-state="run"] .ic-pause{ display:inline; }
.vpx .runbar .run-primary[data-state="stopped"]{ color:#04201f; background:linear-gradient(180deg, var(--cyan), var(--cyan-2)); box-shadow:0 8px 22px -10px var(--glow); }
.vpx .runbar .run-primary[data-state="stopped"] .ic-play{ display:none; }
.vpx .runbar .run-primary[data-state="stopped"] .ic-reset{ display:inline; }
.vpx .runbar .run-sep{ width:1px; align-self:stretch; min-height:26px; background:var(--line2); }
.vpx .runbar .run-actions{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.vpx .runbar .run-act{ display:inline-flex; align-items:center; gap:7px; font-family:var(--body); font-weight:600; font-size:12px; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line2); border-radius:10px; padding:9px 12px; cursor:pointer; transition:.14s; }
.vpx .runbar .run-act svg{ width:14px; height:14px; }
.vpx .runbar .run-act:hover{ color:var(--text); border-color:var(--cyan); }
.vpx .runbar .run-act-accent{ color:var(--cyan); border-color:rgba(46,123,255,.4); background:rgba(46,123,255,.07); }
.vpx .runbar .run-act-accent:hover{ background:rgba(46,123,255,.14); }
.vpx .runbar .run-status{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--dim); }
.vpx .runbar .run-status i{ width:9px; height:9px; border-radius:50%; background:#5b6680; transition:.18s; }
.vpx .runbar .run-routine{ flex-basis:100%; margin-top:4px; font-family:var(--mono); font-size:11.5px; color:var(--text); background:rgba(46,123,255,.06); border:1px solid rgba(46,123,255,.4); border-radius:10px; padding:8px 11px; cursor:pointer; max-width:100%; }
.vpx .runbar .run-routine:focus{ outline:none; border-color:var(--cyan); }
/* ===== organizador de programa importado (panel PROGRAMA) ===== */
.vpx .impg{ margin-bottom:4px; }
.vpx .impg-h{ display:flex; align-items:center; gap:8px; width:100%; padding:8px 9px; border:0; background:none; color:var(--text); border-radius:9px; cursor:pointer; font-family:var(--body); font-weight:600; font-size:13px; }
.vpx .impg-h:hover{ background:rgba(255,255,255,.03); }
.vpx .impg-cv{ width:15px; height:15px; flex:none; color:var(--dim); transition:transform .16s; }
.vpx .impg.open .impg-cv{ transform:rotate(90deg); }
.vpx .impg-nm{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--mono); font-size:12px; letter-spacing:.01em; color:var(--cyan-2); }
.vpx .impg-ct{ font-family:var(--mono); font-size:10px; color:var(--dim); background:rgba(255,255,255,.05); border-radius:6px; padding:1px 7px; }
.vpx .impg-body{ display:none; margin:2px 0 6px 9px; padding-left:8px; border-left:1px solid var(--line); flex-direction:column; gap:2px; }
.vpx .impg.open .impg-body{ display:flex; }
.vpx .imp-rt{ display:flex; align-items:center; gap:9px; width:100%; padding:7px 9px; border:0; background:none; border-radius:8px; cursor:pointer; color:var(--muted); text-align:left; }
.vpx .imp-rt:hover{ background:rgba(255,255,255,.03); color:var(--text); }
.vpx .imp-rt.sel{ background:linear-gradient(90deg, rgba(46,123,255,.14), transparent); color:var(--text); box-shadow:inset 2px 0 0 var(--cyan); }
.vpx .imp-nm{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12.5px; }
.vpx .imp-ct{ font-family:var(--mono); font-size:10.5px; color:var(--dim); }
.vpx .rt-badge{ font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.04em; border-radius:5px; padding:2px 5px; flex:none; min-width:26px; text-align:center; }
.vpx .rt-badge.rt-rll{ color:#04201f; background:linear-gradient(180deg,var(--cyan),var(--cyan-2)); }
.vpx .rt-badge.rt-st{ color:#7ab8ff; background:rgba(122,184,255,.14); border:1px solid rgba(122,184,255,.3); }
.vpx .rt-badge.rt-sfc{ color:#f5b14a; background:rgba(245,177,74,.14); border:1px solid rgba(245,177,74,.3); }
.vpx .rt-badge.rt-fbd{ color:#b08cff; background:rgba(176,140,255,.14); border:1px solid rgba(176,140,255,.3); }
/* ===== árbol de I/O del programa importado ===== */
.vpx .pio-grp{ display:flex; flex-direction:column; gap:2px; }
.vpx .pio-leaf{ display:flex; align-items:center; gap:10px; width:100%; padding:7px 9px; border:0; background:none; border-radius:8px; cursor:pointer; color:var(--muted); text-align:left; font-family:var(--mono); font-size:12px; }
.vpx .pio-leaf[data-kind="out"]{ cursor:default; }
.vpx .pio-leaf:hover{ background:rgba(255,255,255,.03); color:var(--text); }
.vpx .pio-dot{ width:9px; height:9px; border-radius:50%; flex:none; background:#2c3c52; border:1px solid rgba(255,255,255,.08); transition:.12s; }
.vpx .pio-dot.in.on{ background:var(--cyan); box-shadow:0 0 9px var(--glow); }
.vpx .pio-dot.out.on{ background:#ffc24a; box-shadow:0 0 9px #ffc24a; }
.vpx .pio-t{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vpx .pio-hint{ font-family:var(--body); font-size:12px; line-height:1.5; color:var(--muted); padding:11px 13px; border:1px solid var(--line2); border-radius:11px; background:rgba(46,123,255,.04); }
.vpx .pio-hint b{ color:var(--cyan); }
/* ===== renglones con ramas anidadas (multi-rama, importados) ===== */
.vpx .rung-net .rwrap-net{ position:relative; overflow-x:auto; padding:4px 0 2px; }
.vpx .rsvg.net{ min-width:0; }
.vpx .rsvg.net svg{ display:block; max-width:none; }
/* Importados: el renglón completo es seleccionable (clic en cualquier parte que no sea un elemento).
   Señal de descubribilidad sutil, sin glow, solo cursor + leve realce al pasar el mouse. */
.vpx .rung-net{ cursor:pointer; border-radius:7px; transition:background .14s ease; }
.vpx .rung-net:hover:not(.rung-sel){ background:rgba(46,123,255,.045); }
.vpx .net-badge{ position:absolute; top:5px; right:12px; font-family:var(--mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--cyan); background:rgba(46,123,255,.1); border:1px solid rgba(46,123,255,.32); border-radius:6px; padding:2px 7px; pointer-events:none; }
.vpx .rung-comm{ font-family:var(--body); font-size:12px; line-height:1.5; color:var(--cyan-2,#5B9BFF); background:rgba(46,123,255,.05); border-left:2px solid rgba(46,123,255,.5); border-radius:0 7px 7px 0; padding:6px 11px; margin:0 0 8px; white-space:pre-wrap; }
/* ===== visor de lectura para rutinas no-escalera (ST / SFC / FBD) ===== */
.vpx .stage{ position:relative; }
.vpx .ro-view{ position:absolute; inset:0; z-index:8; overflow:auto; padding:22px 26px; background:linear-gradient(180deg, rgba(8,15,26,.97), rgba(6,12,22,.98)); }
.vpx .ro-head{ display:flex; align-items:center; gap:11px; margin-bottom:16px; flex-wrap:wrap; }
.vpx .ro-lang{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#04201f; background:linear-gradient(180deg,var(--cyan),var(--cyan-2)); border-radius:6px; padding:3px 9px; }
.vpx .ro-title{ font-family:var(--disp); font-weight:600; font-size:16px; color:var(--text); letter-spacing:.01em; }
.vpx .ro-sub{ font-family:var(--mono); font-size:11px; color:var(--dim); margin-left:auto; }
.vpx .ro-st{ font-family:var(--mono); font-size:12.5px; line-height:1.75; color:#c7d4e6; white-space:pre-wrap; word-break:break-word; counter-reset:l; }
.vpx .ro-st .stl{ display:block; }
.vpx .ro-st .stl::before{ content:counter(l); counter-increment:l; display:inline-block; width:34px; margin-right:14px; text-align:right; color:#4a5b73; user-select:none; }
.vpx .ro-st .kw{ color:#7ab8ff; font-weight:600; }
.vpx .ro-st .cm{ color:#5fae7a; font-style:italic; }
.vpx .ro-st .nm{ color:#2E7BFF; }
.vpx .ro-st .num{ color:#f5b14a; }
.vpx .ro-sfc{ display:flex; flex-direction:column; gap:0; }
.vpx .ro-step{ display:flex; align-items:flex-start; gap:13px; }
.vpx .ro-step .sdot{ display:flex; flex-direction:column; align-items:center; }
.vpx .ro-step .sdot i{ width:13px; height:13px; border-radius:50%; border:2px solid var(--cyan); background:rgba(46,123,255,.15); flex:none; margin-top:3px; }
.vpx .ro-step.init .sdot i{ background:var(--cyan); box-shadow:0 0 10px var(--glow); }
.vpx .ro-step .sline{ width:2px; flex:1; min-height:26px; background:linear-gradient(var(--line2), transparent); margin:2px 0; }
.vpx .ro-step .sbody{ padding-bottom:16px; flex:1; }
.vpx .ro-step .sname{ font-family:var(--disp); font-weight:600; font-size:14px; color:var(--text); }
.vpx .ro-step .strans{ font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:4px; padding:5px 10px; border-left:2px solid rgba(120,170,220,.35); background:rgba(255,255,255,.02); border-radius:0 7px 7px 0; }
.vpx .ro-step .strans b{ color:var(--cyan-2); font-weight:600; }
.vpx .ro-note{ font-family:var(--body); font-size:13.5px; color:var(--muted); line-height:1.6; padding:18px; border:1px dashed var(--line2); border-radius:14px; background:rgba(255,255,255,.02); }
.vpx .runbar.is-run .run-status{ color:#7fe6b0; }
.vpx .runbar.is-run .run-status i{ background:#3ee07a; box-shadow:0 0 9px #3ee07a; animation:vpxPulse 1.4s ease-in-out infinite; }
@keyframes vpxPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
/* ===== Frente del PLC · panel inferior con LEDs de estado ===== */
.vpx .plcface{ display:flex; align-items:center; flex-wrap:wrap; gap:16px 20px; margin:10px 24px 22px; padding:14px 18px; border:1px solid var(--line2); border-radius:16px; background:linear-gradient(180deg, rgba(13,24,40,.85), rgba(8,15,26,.8)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px -16px #000; }
.vpx .pf-mod{ display:flex; align-items:center; gap:14px; }
.vpx .pf-cpu{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; font-weight:700; color:#8fa3be; background:rgba(255,255,255,.05); border:1px solid var(--line2); border-radius:7px; padding:5px 9px; }
.vpx .pf-leds{ display:flex; gap:16px; }
.vpx .pf-bank{ display:flex; align-items:center; gap:13px; }
.vpx .pf-bl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.vpx .pf-sep, .vpx .plcface .rd-sep{ width:1px; align-self:stretch; min-height:30px; background:var(--line2); }
/* LED individual */
.vpx .pled{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.vpx .pled i{ width:13px; height:13px; border-radius:50%; background:#2a3346; border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 2px rgba(0,0,0,.6); transition:.12s; }
.vpx .pled b{ font-family:var(--mono); font-size:9px; letter-spacing:.04em; font-weight:600; color:#6b7790; }
.vpx .pled.io b{ font-size:9.5px; color:#7d8aa3; }
/* encendidos por tipo */
.vpx .pled.lit[data-led="power"] i, .vpx .pled.lit[data-led="run"] i{ background:#3ee07a; border-color:#9fffc4; box-shadow:0 0 10px #3ee07a, inset 0 0 3px #d6ffe6; }
.vpx .pled.lit[data-led="fault"] i{ background:#ff5d5d; border-color:#ffb3b3; box-shadow:0 0 10px #ff5d5d; }
.vpx .pled.lit[data-led="force"] i{ background:#f5b14a; border-color:#ffe0a8; box-shadow:0 0 10px #f5b14a; }
.vpx .pled.in.lit i{ background:#2E7BFF; border-color:#bff6f2; box-shadow:0 0 10px #2E7BFF, inset 0 0 3px #e6fffd; }
.vpx .pled.out.lit i{ background:#ffc24a; border-color:#ffe6b3; box-shadow:0 0 11px #ffc24a, inset 0 0 3px #fff2d6; }
.vpx .pled.lit b{ color:#cdd8ea; }
/* controles de ejecución dentro del frente */
.vpx .pf-ctrl{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.vpx .plcface .rp{ display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:600; font-size:12px; color:var(--muted); background:var(--panel2); border:1px solid var(--line2); border-radius:10px; padding:9px 14px; cursor:pointer; transition:.18s; }
.vpx .plcface .rp .rp-dot{ width:8px; height:8px; border-radius:50%; background:#5b6680; transition:.18s; flex:none; }
.vpx .plcface .rp:hover{ border-color:rgba(70,217,138,.4); color:var(--text); }
.vpx .plcface .rp.on{ color:#5fe3a0; border-color:rgba(70,217,138,.55); background:rgba(70,217,138,.12); }
.vpx .plcface .rp.on .rp-dot{ background:#46d98a; box-shadow:0 0 9px #46d98a; }
.vpx .plcface .rp-io{ display:inline-flex; align-items:center; gap:7px; font-family:var(--body); font-weight:600; font-size:12px; color:var(--text); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid var(--line2); border-radius:9px; padding:9px 14px; cursor:pointer; transition:.12s; }
.vpx .plcface .rp-io svg{ width:14px; height:14px; }
.vpx .plcface .rp-io:hover{ border-color:var(--cyan); color:var(--cyan); }
.vpx .plcface .rp-io.down{ background:var(--cyan-soft); border-color:var(--cyan); color:var(--cyan); transform:translateY(1px); }
/* ===== paleta real de instrucciones revelada como tira premium ===== */
.vpx #palette{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px; padding:10px 14px; background:linear-gradient(180deg, rgba(46,123,255,.06), rgba(46,123,255,.02)); border-bottom:1px solid var(--line2); scrollbar-width:thin; }
.vpx #palette::-webkit-scrollbar{ height:7px; }
.vpx #palette::-webkit-scrollbar-thumb{ background:rgba(120,170,220,.25); border-radius:8px; }
.vpx #palette .chip-instr{ flex:none; border-color:var(--line2); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); }
.vpx #palette .chip-instr:hover{ border-color:var(--cyan); }
.vpx #palette .chip-instr.sel{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan), 0 6px 18px rgba(46,123,255,.18); }
.vpx #palette .chip-instr .ci-k{ color:var(--cyan); }
/* ===== panel Memorias (estado del motor real) ===== */
.vpx .panel[data-panel="mem"] .drawer-body{ padding-top:12px; }
/* mini-menú compacto: nada se sale del cajón angosto */
.vpx .panel[data-panel="mem"] .io-grid{ grid-template-columns:1fr 1fr; gap:8px; }
.vpx .panel[data-panel="mem"] .io{ min-width:0; padding:8px 10px; }
.vpx .panel[data-panel="mem"] .io .ioaddr{ font-size:11px; line-height:1.3; word-break:break-all; }
.vpx .panel[data-panel="mem"] .io .iotag{ font-size:12px; word-break:break-word; }
.vpx .panel[data-panel="mem"] .cardlet{ min-width:0; }
.vpx .impmem-main{ min-width:0; }
.vpx .impmem-r1{ display:flex; align-items:center; gap:8px; min-width:0; }
.vpx .impmem-r2{ font-family:var(--body); font-size:10px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
/* memorias tipo TABLA: filas limpias (nombre + tipo/valor) en vez de pills sueltas */
.vpx .panel[data-panel="mem"] .mem-grid{ display:flex; flex-direction:column; gap:4px; }
.vpx .panel[data-panel="mem"] .mem-chip{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; text-align:left; padding:8px 11px; border-radius:8px; font-family:var(--mono); font-size:12px; }
.vpx .panel[data-panel="mem"] .mem-chip::after{ content:"BOOL"; font-size:9px; letter-spacing:.05em; color:var(--dim); flex:none; }
.vpx .panel[data-panel="mem"] .mem-chip.on::after{ content:"1 · BOOL"; color:var(--cyan); }
.vpx .app.mem-wide .panel[data-panel="mem"] .mem-grid{ display:grid; grid-template-columns:1fr 1fr; }
/* Cat\u00e1logo de tags importados (Fase A) */
.vpx #vpxImpMem{ margin-bottom:14px; }
.vpx #vpxImpMem[hidden]{ display:none; }
.vpx .impmem-h{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.vpx .impmem-eye{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan); white-space:nowrap; }
.vpx .impmem-q{ flex:1; min-width:0; background:var(--panel2); border:1px solid var(--line2); border-radius:9px; color:var(--text); font-family:var(--body); font-size:12px; padding:7px 10px; outline:none; }
.vpx .impmem-q:focus{ border-color:var(--cyan); }
.vpx .impmem-list{ display:flex; flex-direction:column; gap:2px; max-height:300px; overflow:auto; padding-right:2px; }
.vpx .app.mem-wide .impmem-list{ display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; max-height:430px; }
.vpx .impmem-row{ display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:9px; padding:7px 9px; border-radius:7px; font-family:var(--mono); font-size:11.5px; min-width:0; }
.vpx .impmem-row.bool{ cursor:pointer; }
.vpx .impmem-row.bool:hover{ background:rgba(46,123,255,.08); }
.vpx .impmem-dot{ width:8px; height:8px; border-radius:50%; background:#3a4a60; flex:none; }
.vpx .impmem-dot.na{ background:#2a3547; }
.vpx .impmem-dot.on{ background:var(--cyan); box-shadow:0 0 7px var(--cyan); }
.vpx .impmem-n{ color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.vpx .impmem-edit{ width:100%; min-width:0; background:var(--panel2); border:1px solid var(--cyan); border-radius:6px; color:var(--text); font-family:var(--mono); font-size:11.5px; padding:3px 6px; outline:none; }
/* botones Guardar / Restaurar en la cabecera del panel Programa */
.vpx .panelhead .ph-save{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; margin-right:6px; background:none; border:1px solid var(--line2); color:var(--muted); border-radius:9px; padding:5px 9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:all .16s; }
.vpx .panelhead .ph-save svg{ width:13px; height:13px; }
.vpx .panelhead .ph-save:hover{ color:var(--cyan); border-color:var(--cyan); }
.vpx .panelhead .ph-save.saved{ color:var(--cyan); border-color:rgba(46,123,255,.5); background:rgba(46,123,255,.1); }
.vpx .panelhead .ph-save.ghost{ margin-left:0; padding:5px 8px; }
.vpx .impmem-t{ color:var(--cyan-2); font-size:9.5px; letter-spacing:.04em; }
.vpx .impmem-v{ color:var(--muted); font-size:10.5px; white-space:nowrap; }
.vpx .impmem-hint{ font-family:var(--body); font-size:10.5px; color:var(--dim); margin-top:8px; line-height:1.4; }
.vpx .impmem-list::-webkit-scrollbar{ width:7px; } .vpx .impmem-list::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:4px; }
/* al Ampliar, el cajón crece y las tarjetas respiran (3 columnas) */
.vpx .app.mem-wide{ --drawerw:480px; }
.vpx .app.mem-wide .panel[data-panel="mem"] .io-grid{ grid-template-columns:repeat(3,1fr); }
body.sim-fluid .vpx .app.edu-wide{ --drawerw:720px; }
body.sim-fluid .vpx .app.edu-xwide{ --drawerw:880px; }
/* handle arrastrable al borde para ajustar el ancho del panel izquierdo */
.vpx .app{ position:relative; }
/* Asistente IA (ya está el Loxi flotante) y Dashboard (se mueve al perfil) fuera del rail */
.vpx .rail-btn[data-panel="loxi"], .vpx .rail-btn[data-panel="dash"]{ display:none; }
.vpx .rail-btn img{ object-fit:contain !important; }
body.sim-fluid .vpx .app.drawer-collapsed{ --drawerw:0px; }
.vpx .app.drawer-collapsed .drawer{ opacity:0; pointer-events:none; overflow:hidden; }
.vpx .drawer-resize{ position:absolute; top:0; bottom:0; left:calc(106px + var(--drawerw,308px) - 3px); width:9px; z-index:40; cursor:col-resize; }
.vpx .drawer-resize::after{ content:''; position:absolute; top:50%; left:3px; transform:translateY(-50%); width:3px; height:52px; border-radius:3px; background:var(--line2); transition:background .15s, height .15s; }
.vpx .drawer-resize:hover::after{ background:var(--cyan); height:80px; }
/* botón Ampliar en la cabecera del panel */
.vpx .panelhead .ph-wide{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; margin-right:6px; background:none; border:1px solid var(--line2); color:var(--muted); border-radius:9px; padding:5px 9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:all .16s; }
.vpx .panelhead .ph-wide svg{ width:14px; height:14px; }
.vpx .panelhead .ph-wide:hover{ color:var(--cyan); border-color:var(--cyan); }
.vpx .panelhead .ph-wide.on{ color:var(--cyan); border-color:rgba(46,123,255,.5); background:rgba(46,123,255,.1); }
.vpx .panel[data-panel="mem"] #vpxLadState:empty::after{ content:"Energiza el PLC y agrega instrucciones para ver registros, temporizadores y contadores vivos."; display:block; color:var(--dim); font-size:12.5px; line-height:1.7; padding:14px; border:1px dashed var(--line2); border-radius:12px; }

.vpx{
  --bg:#060c16; --bg2:#0a1320; --panel:#0c1726; --panel2:#0e1c2e; --line:rgba(120,160,210,.13);
  --line2:rgba(120,170,220,.22); --cyan:#2E7BFF; --cyan-2:#5B9BFF; --cyan-soft:rgba(46,123,255,.12);
  --text:#e8f1f8; --muted:#9fb2c6; --dim:#6a7e95; --glow:rgba(46,123,255,.5);
  --disp:'Sora','Chakra Petch',sans-serif; --body:'Inter','Archivo',sans-serif; --mono:'JetBrains Mono','IBM Plex Mono',monospace;
}
.vpx *{ box-sizing:border-box; }
.vpx button{ font-family:inherit; cursor:pointer; }
.vpx ::-webkit-scrollbar{ width:9px; height:9px; }
.vpx ::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:5px; }
.vpx .app{ display:grid; grid-template-columns:96px var(--drawerw, 308px) 1fr; height:100%; transition:grid-template-columns .28s cubic-bezier(.4,0,.2,1); }
.vpx .app.collapsed{ --drawerw:0px; }
.vpx .rail{ display:flex; flex-direction:column; align-items:center; padding:22px 0 16px; border-right:1px solid var(--line); background:linear-gradient(180deg, rgba(10,20,34,.7), rgba(6,12,22,.7)); position:relative; z-index:5; }
.vpx .rail-brandmark{ width:34px; height:34px; border-radius:9px; margin-bottom:30px; background:linear-gradient(140deg,#0e2236,#0a1726); border:1px solid var(--line2); display:grid; place-items:center; }
.vpx .rail-brandmark img{ width:24px; height:24px; object-fit:contain; }
.vpx .rail-items{ display:flex; flex-direction:column; gap:14px; flex:1; }
.vpx .rail-btn{ width:64px; height:66px; border-radius:16px; background:transparent; border:1px solid transparent; color:var(--dim); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; transition:all .17s; padding:0 4px; overflow:hidden; }ontent:center; gap:7px; transition:all .18s; position:relative; }
.vpx .rail-profile{ height:auto; padding:10px 4px 8px; gap:4px; }
.vpx .rp-av{ width:40px; height:40px; border-radius:50%; background:rgba(46,123,255,.12); border:2px solid rgba(46,123,255,.35); display:grid; place-items:center; overflow:hidden; flex:none; }
.vpx .rp-av svg{ width:22px; height:22px; }
.vpx .rp-av img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.vpx .rail-btn .rl{ font-family:var(--body); font-weight:600; font-size:9px; letter-spacing:.035em; text-transform:uppercase; }
.vpx .rail-btn:hover{ color:var(--muted); background:rgba(255,255,255,.02); }
.vpx .rail-btn.on{ color:var(--cyan); border-color:rgba(46,123,255,.4); background:radial-gradient(120% 120% at 50% 0%, rgba(46,123,255,.16), rgba(46,123,255,.03)); box-shadow:0 0 0 1px rgba(46,123,255,.12), 0 14px 34px -18px var(--glow); }
.vpx .rail-btn.on::before{ content:""; position:absolute; left:-1px; top:18px; bottom:18px; width:3px; border-radius:3px; background:var(--cyan); box-shadow:0 0 10px var(--glow); }
.vpx .rail-btn.bot img{ width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(46,123,255,.35)); }
.vpx .rail-gear{ width:46px; height:46px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--dim); display:grid; place-items:center; }
.vpx .rail-gear:hover{ color:var(--muted); }
.vpx .rail-gear svg{ width:20px; height:20px; }
.vpx .drawer{ border-right:1px solid var(--line); background:linear-gradient(180deg, rgba(12,23,38,.55), rgba(8,15,26,.55)); overflow:hidden; display:flex; flex-direction:column; min-width:0; }
.vpx .drawer-top{ padding:22px 22px 0; }
.vpx .proj{ display:flex; align-items:flex-start; gap:9px; }
.vpx .proj h1{ font-family:var(--disp); font-weight:700; font-size:22px; margin:0; letter-spacing:-.015em; line-height:1.08; }
.vpx .proj .sub{ font-family:var(--body); font-size:12.5px; color:var(--muted); margin-top:3px; }
.vpx .proj .edit{ background:none; border:0; color:var(--dim); padding:3px; margin-top:2px; }
.vpx .proj .edit:hover{ color:var(--cyan); }
.vpx .proj .edit svg{ width:15px; height:15px; }
.vpx .proj h1[contenteditable]:focus{ outline:none; border-bottom:1px solid var(--cyan); }
/* el panel visible ocupa el alto restante del drawer y su cuerpo hace scroll solo */
.vpx .drawer > .panel{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.vpx .panelhead, .vpx .panelsub{ flex:none; }
.vpx .panelhead{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px 4px; }
.vpx .panelhead .ph-t{ font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--text); }
.vpx .panelhead .ph-x{ background:none; border:0; color:var(--dim); padding:4px; border-radius:7px; }
.vpx .panelhead .ph-x:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.vpx .panelhead .ph-x svg{ width:17px; height:17px; }
.vpx .panelsub{ padding:0 22px; font-family:var(--body); font-size:12.5px; color:var(--muted); }
.vpx .drawer-body{ flex:1; overflow:auto; padding:14px 16px 18px; }
.vpx .sec-label{ font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); margin:8px 6px 9px; }
.vpx .tree{ font-family:var(--body); }
.vpx .node{ }
.vpx .node-row{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer; color:var(--muted); font-size:13.5px; transition:background .14s; }
.vpx .node-row:hover{ background:rgba(255,255,255,.025); color:var(--text); }
.vpx .node-row.sel{ background:linear-gradient(90deg, rgba(46,123,255,.13), rgba(46,123,255,.02)); color:var(--text); box-shadow:inset 2px 0 0 var(--cyan); }
.vpx .node-row .caret{ width:14px; height:14px; flex:none; color:var(--dim); transition:transform .15s; }
.vpx .node-row.open .caret{ transform:rotate(90deg); }
.vpx .node-row .nico{ width:17px; height:17px; flex:none; color:var(--cyan-2); }
.vpx .node-row .nt{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vpx .node-row .nb{ font-family:var(--mono); font-size:10.5px; color:var(--dim); background:rgba(255,255,255,.04); border-radius:6px; padding:1px 7px; }
.vpx .node-children{ margin-left:15px; border-left:1px solid var(--line); padding-left:6px; overflow:hidden; }
.vpx .node.collapsed > .node-children{ display:none; }
.vpx .leaf{ display:flex; align-items:center; gap:9px; padding:5px 8px; border-radius:8px; cursor:pointer; color:var(--muted); font-size:13px; }
.vpx .leaf:hover{ background:rgba(255,255,255,.025); color:var(--text); }
.vpx .leaf.sel{ background:linear-gradient(90deg, rgba(46,123,255,.13), transparent); color:var(--text); box-shadow:inset 2px 0 0 var(--cyan); }
.vpx .leaf .lico{ width:15px; height:15px; flex:none; color:var(--dim); }
.vpx .leaf .addr{ font-family:var(--mono); font-size:11.5px; color:var(--cyan-2); min-width:34px; }
.vpx .leaf .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.vpx .leaf .lt{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vpx .card{ margin-top:16px; border:1px solid var(--line2); border-radius:15px; background:linear-gradient(180deg, rgba(14,28,46,.6), rgba(10,18,30,.5)); padding:15px 16px; }
.vpx .card-h{ display:flex; align-items:center; justify-content:space-between; padding-bottom:11px; border-bottom:1px solid var(--line); margin-bottom:11px; }
.vpx .card-h b{ font-family:var(--disp); font-weight:600; font-size:14px; }
.vpx .card-h .add{ width:26px; height:26px; border-radius:8px; border:1px solid var(--line2); background:rgba(46,123,255,.06); color:var(--cyan); display:grid; place-items:center; }
.vpx .task{ display:flex; align-items:center; gap:10px; padding:7px 0; }
.vpx .task .td{ width:9px; height:9px; border-radius:50%; flex:none; box-shadow:0 0 7px currentColor; }
.vpx .task .tn{ flex:1; font-weight:600; font-size:13px; }
.vpx .task .tm{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.vpx .searchbar{ display:flex; gap:8px; margin:4px 6px 14px; }
.vpx .searchbar input{ flex:1; background:rgba(8,15,26,.7); border:1px solid var(--line2); border-radius:11px; color:var(--text); font-family:var(--body); font-size:13px; padding:10px 13px; }
.vpx .searchbar input:focus{ outline:none; border-color:var(--cyan); }
.vpx .searchbar input::placeholder{ color:var(--dim); }
.vpx .searchbar .filt{ width:40px; flex:none; border:1px solid var(--line2); border-radius:11px; background:rgba(255,255,255,.02); color:var(--muted); display:grid; place-items:center; }
.vpx .searchbar .filt svg{ width:17px; height:17px; }
.vpx .iodetail{ margin-top:14px; border:1px solid var(--line2); border-radius:14px; background:linear-gradient(180deg, rgba(14,28,46,.6), rgba(10,18,30,.5)); padding:14px 15px; }
.vpx .iodetail .id-h{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.vpx .iodetail .id-addr{ font-family:var(--mono); font-size:13px; color:var(--cyan); }
.vpx .iodetail .id-nm{ font-weight:600; font-size:13.5px; }
.vpx .iodetail .id-badge{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--cyan-2); background:var(--cyan-soft); border:1px solid var(--line2); border-radius:6px; padding:2px 8px; }
.vpx .iodetail .id-grid{ display:grid; grid-template-columns:1fr 80px; gap:7px 12px; align-items:center; }
.vpx .iodetail .id-row{ display:contents; }
.vpx .iodetail .id-k{ font-family:var(--mono); font-size:11px; color:var(--dim); }
.vpx .iodetail .id-v{ font-size:12.5px; color:var(--text); }
.vpx .iodetail .id-mini{ grid-row:span 4; border:1px solid var(--line); border-radius:9px; background:rgba(8,15,26,.5); display:grid; place-items:center; padding:8px; }
.vpx .iodetail .id-mini svg{ width:60px; height:72px; display:block; }
.vpx .id-toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--mono); font-size:11.5px; }
.vpx .id-pill{ width:36px; height:20px; border-radius:11px; background:rgba(255,255,255,.07); position:relative; border:1px solid var(--line2); flex:none; transition:all .15s; }
.vpx .id-pill i{ position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#8aa0b6; transition:transform .16s, background .16s; }
.vpx .id-toggle.on .id-pill{ background:var(--cyan-soft); border-color:var(--cyan); }
.vpx .id-toggle.on .id-pill i{ transform:translateX(16px); background:var(--cyan); }
.vpx .id-num{ width:86px; background:rgba(8,15,26,.7); border:1px solid var(--line2); border-radius:8px; color:var(--text); font-family:var(--mono); font-size:12.5px; padding:5px 9px; }
.vpx .id-num:focus{ outline:none; border-color:var(--cyan); }
.vpx .id-force{ font-family:var(--body); font-weight:600; font-size:11px; padding:5px 11px; border-radius:8px; border:1px solid var(--line2); background:rgba(255,255,255,.03); color:var(--muted); cursor:pointer; }
.vpx .id-force:hover{ color:var(--text); }
.vpx .id-force.on{ color:#f5b544; border-color:rgba(245,181,68,.5); background:rgba(245,181,68,.12); }
.vpx .loxi-top{ display:flex; align-items:flex-start; gap:13px; padding:4px 4px 0; }
.vpx .loxi-av{ width:96px; height:96px; border-radius:18px; flex:none; overflow:hidden; border:1px solid var(--line2); background:radial-gradient(120% 120% at 50% 20%, rgba(46,123,255,.18), #08121f 70%); box-shadow:0 0 0 1px rgba(46,123,255,.1), 0 14px 34px -18px var(--glow); }
.vpx .loxi-av img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.vpx .loxi-id{ flex:1; min-width:0; padding-top:6px; }
.vpx .loxi-id .ln{ font-family:var(--disp); font-weight:700; font-size:17px; }
.vpx .loxi-id .ln b{ color:var(--cyan); font-weight:700; }
.vpx .loxi-id .ld{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.vpx .loxi-id .lchev{ float:right; background:none; border:1px solid var(--line); border-radius:8px; color:var(--dim); width:28px; height:24px; }
.vpx .loxi-actions{ display:flex; flex-wrap:wrap; gap:8px; margin:15px 2px 4px; }
.vpx .lx-btn{ display:inline-flex; align-items:center; gap:7px; font-family:var(--body); font-weight:600; font-size:12px; color:var(--cyan); background:rgba(46,123,255,.06); border:1px solid var(--line2); border-radius:10px; padding:8px 11px; }
.vpx .lx-btn:hover{ background:rgba(46,123,255,.13); border-color:rgba(46,123,255,.4); }
.vpx .lx-btn svg{ width:14px; height:14px; }
.vpx .chat{ margin:16px 0 0; display:flex; flex-direction:column; gap:12px; }
.vpx .msg{ max-width:90%; }
.vpx .msg.user{ align-self:flex-end; }
.vpx .msg .mh{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.vpx .msg .mh .mav{ width:24px; height:24px; border-radius:7px; overflow:hidden; flex:none; border:1px solid var(--line2); background:#08121f; }
.vpx .msg .mh .mav img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.vpx .msg .mh .mn{ font-family:var(--disp); font-weight:600; font-size:12.5px; }
.vpx .msg .mh .mn.lx{ color:var(--cyan); }
.vpx .msg .mh .mt{ font-family:var(--mono); font-size:10px; color:var(--dim); }
.vpx .msg .bub{ border:1px solid var(--line2); border-radius:13px; padding:11px 13px; font-size:13px; line-height:1.55; color:var(--text); }
.vpx .msg.user .bub{ background:rgba(46,123,255,.05); }
.vpx .msg.bot .bub{ background:linear-gradient(180deg, rgba(14,28,46,.6), rgba(10,18,30,.5)); }
.vpx .msg .bub ul{ margin:8px 0 0; padding-left:18px; color:var(--muted); }
.vpx .msg .bub li{ margin:3px 0; }
.vpx .lx-cols{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:16px; }
.vpx .lx-mini{ border:1px solid var(--line2); border-radius:13px; background:linear-gradient(180deg, rgba(14,28,46,.5), rgba(10,18,30,.4)); padding:12px 13px; }
.vpx .lx-mini .lm-h{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan); margin-bottom:10px; }
.vpx .lx-mini .lm-h svg{ width:13px; height:13px; }
.vpx .lx-sug{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--muted); padding:5px 0; line-height:1.4; }
.vpx .lx-sug .ck{ color:var(--cyan); flex:none; margin-top:1px; }
.vpx .lx-sug .ck svg{ width:13px; height:13px; }
.vpx .lx-quick{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:var(--mono); font-size:11px; color:var(--text); border:1px solid var(--line); border-radius:9px; padding:8px 10px; margin-top:8px; background:rgba(255,255,255,.015); }
.vpx .lx-quick:first-of-type{ margin-top:0; }
.vpx .lx-quick:hover{ border-color:var(--line-blue,#2E7BFF55); }
.vpx .lx-quick svg{ width:13px; height:13px; color:var(--dim); }
.vpx .lx-input{ display:flex; gap:9px; padding:14px 16px; border-top:1px solid var(--line); }
.vpx .lx-input input{ flex:1; background:rgba(8,15,26,.7); border:1px solid var(--line2); border-radius:12px; color:var(--text); font-family:var(--body); font-size:13px; padding:12px 14px; }
.vpx .lx-input input:focus{ outline:none; border-color:var(--cyan); }
.vpx .lx-input .send{ width:46px; flex:none; border:0; border-radius:12px; background:linear-gradient(180deg,var(--cyan),var(--cyan-2)); color:#04201f; display:grid; place-items:center; }
.vpx .lx-input .send svg{ width:18px; height:18px; }
.vpx .main{ display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; background:linear-gradient(180deg, rgba(8,15,26,.3), transparent); }
.vpx .topbar{ display:flex; align-items:center; gap:8px; padding:14px 24px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.vpx .cat{ font-family:var(--body); font-weight:600; font-size:12.5px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); background:none; border:1px solid transparent; border-radius:10px; padding:9px 16px; }
.vpx .cat:hover{ color:var(--text); }
.vpx .cat.on{ color:var(--cyan); border-color:rgba(46,123,255,.4); background:rgba(46,123,255,.07); box-shadow:0 0 0 1px rgba(46,123,255,.1); }
.vpx .topbar .spacer{ flex:1; }
.vpx .field{ display:flex; align-items:center; gap:9px; }
.vpx .field label{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--dim); text-transform:uppercase; }
.vpx .dropdown{ display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600; font-size:13px; color:var(--text); background:var(--panel2); border:1px solid var(--line2); border-radius:10px; padding:8px 13px; }
.vpx .dropdown svg{ width:13px; height:13px; color:var(--muted); }
.vpx .brand-siemens{ color:#dff6f3; border-color:rgba(0,153,153,.5); background:linear-gradient(180deg, rgba(0,153,153,.16), rgba(0,120,120,.08)); box-shadow:inset 0 0 0 1px rgba(0,153,153,.18); }
.vpx .brand-siemens::before{ content:""; width:8px; height:8px; border-radius:50%; background:#009999; box-shadow:0 0 8px rgba(0,153,153,.7); margin-right:2px; }
.vpx .brand-siemens svg{ color:#5B9BFF; }
.vpx .seg{ display:flex; border:1px solid var(--line2); border-radius:10px; overflow:hidden; }
.vpx .seg button{ font-family:var(--body); font-weight:600; font-size:11.5px; letter-spacing:.03em; color:var(--muted); background:transparent; border:0; padding:9px 14px; display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; }
.vpx .seg button svg{ width:14px; height:14px; }
.vpx .seg button.on{ color:var(--cyan); background:rgba(46,123,255,.12); }
.vpx .instrbar{ display:flex; align-items:center; gap:10px; padding:13px 24px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.vpx .chip{ display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600; font-size:12.5px; letter-spacing:.02em; color:var(--text); background:linear-gradient(180deg, rgba(14,28,46,.7), rgba(10,18,30,.6)); border:1px solid var(--line2); border-radius:11px; padding:9px 14px; }
.vpx .chip:hover{ border-color:rgba(46,123,255,.45); }
.vpx .chip svg{ width:26px; height:16px; }
.vpx .chip .ck{ color:var(--cyan); }
.vpx .instrbar .lang-l{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--dim); text-transform:uppercase; margin-left:6px; }
.vpx .lang{ display:flex; gap:6px; }
.vpx .langb{ font-family:var(--body); font-weight:600; font-size:12.5px; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:9px; padding:8px 14px; display:inline-flex; align-items:center; gap:7px; }
.vpx .langb svg{ width:14px; height:14px; }
.vpx .langb:hover{ color:var(--text); }
.vpx .langb.on{ color:#04201f; background:linear-gradient(180deg,var(--cyan),var(--cyan-2)); }
.vpx .langb.ia{ color:var(--cyan); }
.vpx .langb.ia.on{ color:#04201f; }
.vpx .toolbtns{ margin-left:auto; display:flex; gap:8px; }
.vpx .tbtn{ width:42px; height:38px; border:1px solid var(--line2); border-radius:10px; background:rgba(255,255,255,.02); color:var(--muted); display:grid; place-items:center; }
.vpx .tbtn:hover{ color:var(--cyan); border-color:rgba(46,123,255,.4); }
.vpx .tbtn svg{ width:18px; height:18px; }
.vpx .tbtn-loxi{ border-color:rgba(46,123,255,.4); background:rgba(46,123,255,.06); }
.vpx .tbtn-loxi:hover{ border-color:var(--cyan); box-shadow:0 0 14px rgba(46,123,255,.45); }
.vpx .rung.rung-flash{ animation:rungFlash 1.4s ease; }
@keyframes rungFlash{ 0%,100%{ background:transparent; } 30%,60%{ background:rgba(255,180,84,.12); } }
.vpx .stage{ flex:1; position:relative; overflow:auto; padding:30px 34px; background-image:radial-gradient(circle at 1px 1px, rgba(120,160,210,.06) 1px, transparent 0); background-size:26px 26px; }
.vpx .rung-label{ position:absolute; font-family:var(--body); font-weight:600; font-size:13.5px; letter-spacing:.02em; color:var(--cyan); }
.vpx .addrung{ margin:8px 34px 0; border:1.5px dashed var(--line2); border-radius:16px; padding:24px; text-align:center; color:var(--cyan); font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:.005em; display:flex; align-items:center; justify-content:center; gap:11px; }
.vpx .addrung:hover{ border-color:var(--cyan); background:rgba(46,123,255,.04); }
.vpx .addrung svg{ width:22px; height:22px; }
.vpx .botbar{ display:flex; align-items:center; gap:16px; padding:15px 24px; border-top:1px solid var(--line); }
.vpx .botbar .rt{ display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--cyan); }
.vpx .botbar .rt svg{ width:18px; height:18px; }
.vpx .botbar .ctx{ font-family:var(--body); font-size:13px; color:var(--muted); }
.vpx .botbar .prog{ margin-left:auto; display:flex; align-items:center; gap:13px; }
.vpx .botbar .bar{ width:200px; height:5px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.vpx .botbar .bar i{ display:block; height:100%; width:30%; background:linear-gradient(90deg,var(--cyan),var(--cyan-2)); border-radius:3px; }
.vpx .botbar .pn{ font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.vpx[data-density="compact"] .topbar{ padding:10px 18px; }
.vpx[data-density="compact"] .instrbar{ padding:9px 18px; }
.vpx[data-density="compact"] .cat{ padding:7px 12px; font-size:12px; }
.vpx[data-density="compact"] .chip{ padding:7px 11px; }
.vpx[data-density="compact"] .node-row{ padding:4px 7px; font-size:13px; }
.vpx[data-density="compact"] .leaf{ padding:3px 7px; font-size:12.5px; }
.vpx[data-density="compact"] .task{ padding:5px 0; }
.vpx[data-density="compact"] .card{ padding:12px 13px; margin-top:12px; }
.vpx[data-density="compact"] .drawer-body{ padding:10px 13px 14px; }
.vpx[data-density="compact"] .stage{ padding:20px 26px; }
.vpx[data-density="compact"] .addrung{ padding:16px; margin-top:6px; }
.vpx[data-density="compact"] .lx-btn{ padding:6px 9px; }
.vpx[data-density="compact"] .loxi-actions{ margin:11px 2px 4px; }
.vpx[data-density="comfy"] .drawer-body{ padding:18px 18px 22px; }
.vpx[data-density="comfy"] .node-row{ padding:8px 9px; }
.vpx[data-density="comfy"] .leaf{ padding:7px 9px; }
.vpx[data-density="comfy"] .cat{ padding:11px 18px; }
.vpx[data-density="comfy"] .stage{ padding:38px 42px; }
.vpx[data-amb="mate"] .rail-btn.on{ box-shadow:inset 0 0 0 1px rgba(120,170,220,.18); }
.vpx[data-amb="mate"] .rail-btn.on::before{ box-shadow:none; }
.vpx[data-amb="mate"] .stage{ background-image:none; }
.vpx[data-amb="mate"] .loxi-av{ box-shadow:none; }
.vpx[data-amb="mate"] .rail-btn.bot img{ filter:none; }
.vpx[data-amb="mate"] .task .td{ box-shadow:none; }
.vpx[data-amb="mate"] .leaf .dot{ box-shadow:none !important; }
.vpx[data-amb="mate"] .cat.on{ box-shadow:none; }
.vpx[data-amb="neon"]{ --line2:rgba(120,180,230,.32); }
.vpx[data-amb="neon"] .rail-btn.on{ box-shadow:0 0 0 1px var(--glow), 0 20px 50px -14px var(--glow); }
.vpx[data-amb="neon"] .chip{ border-color:rgba(120,180,230,.3); }
.vpx[data-amb="neon"] .chip:hover{ box-shadow:0 0 22px -8px var(--glow); }
.vpx[data-amb="neon"] .loxi-av{ box-shadow:0 0 0 1px var(--glow), 0 18px 44px -12px var(--glow); }
.vpx[data-amb="neon"] .langb.on, .vpx[data-amb="neon"] .lx-input .send{ box-shadow:0 6px 22px -8px var(--glow); }
.vpx[data-amb="neon"] .seg button.on, .vpx[data-amb="neon"] .cat.on{ box-shadow:0 0 0 1px var(--glow), 0 8px 24px -10px var(--glow); }
.vpx[data-amb="neon"] .stage{ background-image:radial-gradient(circle at 1px 1px, rgba(46,123,255,.10) 1px, transparent 0); }
.vpx .tw-fab{ position:absolute; right:22px; bottom:22px; z-index:60; display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600; font-size:13px; color:#04201f; background:linear-gradient(180deg,var(--cyan),var(--cyan-2)); border:0; border-radius:13px; padding:11px 16px; box-shadow:0 16px 40px -16px var(--glow); }
.vpx .tw-fab svg{ width:16px; height:16px; }
.vpx .tw-panel{ position:absolute; left:104px; bottom:22px; right:auto; z-index:61; width:300px; border:1px solid var(--line2); border-radius:18px; background:linear-gradient(180deg, rgba(13,24,40,.97), rgba(9,16,28,.97)); backdrop-filter:blur(14px); box-shadow:0 30px 70px -28px rgba(0,0,0,.8); padding:18px; transform:translateY(10px) scale(.98); opacity:0; pointer-events:none; transition:all .22s cubic-bezier(.4,0,.2,1); }
.vpx .tw-panel.open{ transform:none; opacity:1; pointer-events:auto; }
.vpx .tw-h{ font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:-.01em; margin:0 0 3px; }
.vpx .tw-sub{ font-family:var(--body); font-size:11.5px; color:var(--muted); margin-bottom:16px; }
.vpx .tw-sec{ margin-bottom:16px; }
.vpx .tw-l{ font-family:var(--body); font-weight:600; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin-bottom:9px; }
.vpx .tw-swatches{ display:flex; gap:9px; }
.vpx .tw-sw{ width:38px; height:38px; border-radius:11px; border:2px solid transparent; cursor:pointer; position:relative; transition:transform .12s; }
.vpx .tw-sw:hover{ transform:translateY(-2px); }
.vpx .tw-sw.on{ border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.12); }
.vpx .tw-seg{ display:flex; border:1px solid var(--line2); border-radius:11px; overflow:hidden; }
.vpx .tw-seg button{ flex:1; font-family:var(--body); font-weight:600; font-size:12px; color:var(--muted); background:transparent; border:0; padding:9px 6px; }
.vpx .tw-seg button.on{ color:var(--cyan); background:var(--cyan-soft); }
.vpx .tw-reset{ width:100%; font-family:var(--body); font-weight:600; font-size:12px; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px; padding:9px; }
.vpx .tw-reset:hover{ color:var(--text); }
.vpx .hidden{ display:none !important; }
/* Árbol de I/O · toggle de vista (Por tipo / Por módulo) */
.vpx .io-viewseg{ display:flex; gap:4px; background:var(--panel2); border:1px solid var(--line2); border-radius:10px; padding:3px; margin-bottom:11px; }
.vpx .io-viewseg button{ flex:1; background:none; border:0; color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.03em; padding:6px 8px; border-radius:7px; cursor:pointer; transition:all .15s; }
.vpx .io-viewseg button:hover{ color:var(--text); }
.vpx .io-viewseg button.on{ background:rgba(46,123,255,.14); color:var(--cyan); }
/* subtítulo de módulo (modelo + slot + puntos) */
.vpx .mod-sub{ font-family:var(--body); font-size:10px; color:var(--dim); padding:0 0 4px 40px; margin-top:-1px; word-break:break-word; }
.vpx .leaf.mod-free{ opacity:.6; }
.vpx .leaf.mod-free .lt{ font-style:italic; }
/* badge de número de slot/ranura [N] */
.vpx .slot-b{ flex:none; font-family:var(--mono); font-size:9.5px; font-weight:600; color:var(--cyan-2); background:rgba(46,123,255,.1); border:1px solid rgba(46,123,255,.25); border-radius:5px; padding:1px 5px; margin-right:1px; }
.vpx .hw-n .slot-b{ margin-right:5px; }
.vpx .dev-name{ display:inline; }
/* Dashboard del programador */
.vpx #dashBody{ padding-top:14px; }
.vpx .db-head{ display:flex; gap:12px; align-items:center; padding:13px; border:1px solid var(--line2); border-radius:14px; background:radial-gradient(circle at 12% 20%, rgba(46,123,255,.1), rgba(255,255,255,.015)); margin-bottom:14px; }
.vpx .db-av{ width:52px; height:52px; flex:none; border-radius:12px; overflow:hidden; background:rgba(46,123,255,.1); display:grid; place-items:center; }
.vpx .db-av img{ width:52px; height:52px; object-fit:contain; }
.vpx .db-ins{ font-family:var(--body); font-size:12.5px; line-height:1.5; color:var(--text); }
.vpx .db-prod{ margin-bottom:14px; }
.vpx .db-prod-l{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.vpx .db-prod-l span{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.vpx .db-prod-l b{ font-family:var(--disp); font-size:20px; color:var(--cyan); } .vpx .db-prod-l b i{ font-size:11px; color:var(--dim); font-style:normal; }
.vpx .db-prod-bar{ height:8px; border-radius:5px; background:rgba(255,255,255,.05); overflow:hidden; }
.vpx .db-prod-fill{ height:100%; border-radius:5px; background:linear-gradient(90deg,#5b9bff,#2E7BFF); transition:width .6s; }
.vpx .db-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.vpx .db-card{ border:1px solid var(--line2); border-left:3px solid var(--c,#2E7BFF); border-radius:11px; padding:11px 13px; background:rgba(255,255,255,.02); }
.vpx .db-v{ font-family:var(--disp); font-weight:700; font-size:21px; color:var(--text); }
.vpx .db-l{ font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin-top:2px; }
.vpx .db-sec{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan-2); margin:18px 0 9px; }
.vpx .db-spark{ display:flex; align-items:flex-end; gap:5px; height:60px; padding:6px 2px; border:1px solid var(--line2); border-radius:11px; background:rgba(255,255,255,.02); }
.vpx .db-bar{ flex:1; min-height:6px; background:linear-gradient(180deg,#2E7BFF,#2a6fdb); border-radius:4px 4px 2px 2px; opacity:.85; }
.vpx .db-empty{ font-family:var(--body); font-size:11.5px; color:var(--dim); padding:10px; border:1px dashed var(--line2); border-radius:10px; }
.vpx .db-docs{ display:flex; flex-direction:column; gap:8px; }
.vpx .db-doc{ display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--line2); border-radius:11px; background:rgba(255,255,255,.02); color:var(--text); font-family:var(--body); font-size:13px; cursor:pointer; transition:all .15s; }
.vpx .db-doc span{ font-size:16px; }
.vpx .db-doc:hover{ border-color:var(--cyan); background:rgba(46,123,255,.07); }
/* nombre de módulo completo (no truncar) cuando hay badge de slot + conteo abajo */
.vpx .node-row .slot-b ~ .nt{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; }
.vpx .mod-sub .mod-pts{ color:var(--cyan-2); font-weight:600; }
/* Árbol de I/O · hardware del proyecto (estilo organizador Studio 5000) */
.vpx .hw-tree{ margin:6px 0 16px; font-family:var(--body); }
.vpx .hw-node.collapsed > .hw-children{ display:none; }
.vpx .hw-children{ margin-left:9px; padding-left:9px; border-left:1px solid var(--line2); }
.vpx .hw-row{ display:flex; align-items:flex-start; gap:6px; padding:5px 6px; border-radius:7px; }
.vpx .hw-row:hover{ background:rgba(255,255,255,.03); }
.vpx .hw-cv{ cursor:pointer; width:14px; flex:none; color:var(--muted); font-size:10px; text-align:center; margin-top:3px; user-select:none; }
.vpx .hw-cv:hover{ color:var(--cyan); }
.vpx .hw-cv-sp{ width:14px; flex:none; }
.vpx .hw-dot{ width:7px; height:7px; border-radius:2px; background:var(--muted); margin-top:5px; flex:none; }
.vpx .hw-dot.cpu{ background:var(--cyan); box-shadow:0 0 7px rgba(46,123,255,.6); }
.vpx .hw-main{ min-width:0; }
.vpx .hw-n{ font-family:var(--mono); font-size:12px; color:var(--text); }
.vpx .hw-cpu{ font-style:normal; font-size:8.5px; letter-spacing:.06em; color:#06121f; background:var(--cyan); padding:1px 5px; border-radius:5px; margin-left:6px; vertical-align:middle; }
.vpx .hw-sub{ font-family:var(--body); font-size:10.5px; color:var(--dim); margin-top:1px; word-break:break-word; }
.vpx .hw-addr{ color:var(--cyan-2); font-family:var(--mono); }
.vpx .hw-grp .hw-gn{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan-2); margin-top:2px; }
/* árbol jerárquico enriquecido: puntos, red, dispositivos de terceros */
.vpx .hw-pts{ font-style:normal; font-size:8.5px; letter-spacing:.04em; color:var(--cyan-2); background:rgba(46,123,255,.1); padding:1px 5px; border-radius:5px; margin-left:5px; vertical-align:middle; }
.vpx .hw-dot.dev{ background:#c79bff; box-shadow:0 0 6px rgba(199,155,255,.5); }
.vpx .hw-net-ico{ width:7px; height:7px; flex:none; margin-top:5px; border-radius:50%; border:1.5px solid var(--cyan-2); }
.vpx .hw-grp .hw-net-ico{ margin-right:1px; }
.vpx .hw-row .nico{ flex:none; margin-top:1px; }
.vpx .hw-row .nico svg{ width:16px; height:16px; }
/* botón de propiedades por dispositivo + modal */
.vpx .node-row, .vpx .hw-row{ position:relative; }
/* cuadro de propiedades acoplado bajo el árbol (#ioDetail) */
.vpx .dp-dock{ background:linear-gradient(180deg,rgba(15,26,44,.9),rgba(10,17,30,.9)); border:1px solid var(--line2); border-radius:14px; overflow:hidden; margin-top:6px; }
/* agregar / quitar módulos */
.vpx .io-addmod{ display:flex; align-items:center; gap:7px; width:100%; margin-top:6px; padding:9px 11px; background:rgba(46,123,255,.07); border:1px dashed rgba(46,123,255,.4); border-radius:9px; color:var(--cyan); font-family:var(--mono); font-size:11.5px; cursor:pointer; transition:all .15s; }
.vpx .io-addmod:hover{ background:rgba(46,123,255,.14); border-style:solid; }
.vpx .mod-del{ flex:none; width:22px; height:22px; display:grid; place-items:center; border:0; background:none; color:var(--dim); border-radius:6px; cursor:pointer; opacity:0; transition:all .15s; }
.vpx .node-row:hover .mod-del{ opacity:1; }
.vpx .mod-del:hover{ color:#ff6b6b; background:rgba(255,107,107,.12); }
.vpx .mod-del svg{ width:13px; height:13px; }
.vpx .mp-q{ width:100%; box-sizing:border-box; margin-bottom:10px; background:var(--panel2); border:1px solid var(--line2); border-radius:9px; color:var(--text); font-family:var(--body); font-size:12.5px; padding:9px 11px; outline:none; }
.vpx .mp-q:focus{ border-color:var(--cyan); }
.vpx .mp-list{ display:flex; flex-direction:column; gap:4px; max-height:260px; overflow:auto; padding-right:2px; }
.vpx .mp-item{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 10px; background:rgba(255,255,255,.02); border:1px solid var(--line2); border-radius:9px; cursor:pointer; transition:all .15s; }
.vpx .mp-item:hover{ border-color:var(--cyan); background:rgba(46,123,255,.08); }
.vpx .mp-item .nico{ flex:none; } .vpx .mp-item .nico svg{ width:16px; height:16px; }
.vpx .mp-info{ display:flex; flex-direction:column; min-width:0; flex:1; }
.vpx .mp-cat{ font-family:var(--mono); font-size:12px; color:var(--text); }
.vpx .mp-lbl{ font-family:var(--body); font-size:10.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vpx .mp-pts{ flex:none; font-family:var(--mono); font-size:10px; color:var(--cyan-2); }
.vpx .mp-hint{ font-family:var(--body); font-size:10.5px; color:var(--dim); margin-top:10px; line-height:1.4; }
.vpx .dev-prop{ margin-left:auto; flex:none; width:24px; height:24px; display:grid; place-items:center; border:0; background:none; color:var(--dim); border-radius:7px; cursor:pointer; opacity:0; transition:all .15s; }
.vpx .node-row:hover .dev-prop, .vpx .hw-row:hover .dev-prop{ opacity:1; }
.vpx .dev-prop:hover{ color:var(--cyan); background:rgba(46,123,255,.12); }
.vpx .dev-prop svg{ width:15px; height:15px; }
.vpx .dev-modal{ position:absolute; inset:0; z-index:80; display:grid; place-items:center; background:rgba(4,8,16,.66); padding:20px; }
.vpx .dev-modal[hidden]{ display:none; }
.vpx .dp-card{ width:380px; max-width:100%; max-height:90%; overflow:auto; background:linear-gradient(180deg,rgba(15,26,44,.99),rgba(10,17,30,.99)); border:1px solid var(--line2); border-radius:16px; box-shadow:0 30px 80px -20px #000; }
.vpx .dp-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:16px 16px 12px; border-bottom:1px solid var(--line); }
.vpx .dp-k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--cyan); }
.vpx .dp-title{ font-family:var(--mono); font-size:16px; color:var(--text); margin-top:3px; word-break:break-all; }
.vpx .dp-x{ background:none; border:0; color:var(--dim); font-size:15px; cursor:pointer; padding:3px 7px; border-radius:7px; }
.vpx .dp-x:hover{ color:#fff; background:rgba(255,255,255,.06); }
.vpx .dp-body{ padding:14px 16px; }
.vpx .dp-err{ background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.4); color:#ff9b9b; font-family:var(--body); font-size:11.5px; line-height:1.4; padding:8px 11px; border-radius:9px; margin-bottom:11px; }
.vpx .dp-err[hidden]{ display:none; }
.vpx .dp-sec{ font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--cyan-2); margin:4px 0 9px; }
.vpx .dp-sec:not(:first-child){ margin-top:16px; padding-top:13px; border-top:1px solid var(--line); }
.vpx .dp-f{ display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.vpx .dp-f span{ font-family:var(--body); font-size:11px; color:var(--muted); }
.vpx .dp-f input{ background:var(--panel2); border:1px solid var(--line2); border-radius:9px; color:var(--text); font-family:var(--mono); font-size:12.5px; padding:9px 11px; outline:none; }
.vpx .dp-f input:focus{ border-color:var(--cyan); }
.vpx .dp-grid{ display:flex; flex-direction:column; gap:6px; }
.vpx .dp-row{ display:flex; justify-content:space-between; gap:12px; font-family:var(--body); font-size:12px; padding:2px 0; }
.vpx .dp-row span{ color:var(--dim); white-space:nowrap; } .vpx .dp-row b{ color:var(--text); font-weight:500; text-align:right; word-break:break-all; font-family:var(--mono); font-size:11.5px; }
.vpx .dp-actions{ display:flex; justify-content:flex-end; gap:8px; padding:12px 16px 16px; }
.vpx .dp-actions button{ font-family:var(--body); font-size:12.5px; padding:9px 16px; border-radius:10px; cursor:pointer; border:1px solid var(--line2); background:rgba(255,255,255,.04); color:var(--text); transition:all .15s; }
.vpx .dp-cancel:hover{ border-color:var(--muted); color:#fff; }
.vpx .dp-save{ background:linear-gradient(180deg,var(--cyan),var(--cyan-2)); color:#06121f; border-color:transparent; font-weight:600; }
.vpx .dp-save:hover{ filter:brightness(1.06); }
/* Fase C · selección de renglón + barra de acción contextual */
.vpx .rung.rung-sel{ position:relative; }
.vpx .rung.rung-sel::before{ content:""; position:absolute; left:-2px; top:8px; bottom:8px; width:6px; border-radius:3px; background:#2E7BFF; box-shadow:0 0 14px rgba(46,123,255,.75); pointer-events:none; z-index:2; }
.vpx .rung.rung-sel::after{ content:""; position:absolute; inset:6px 0; background:rgba(46,123,255,.04); border-radius:4px; pointer-events:none; z-index:0; }
.vpx .rnum{ position:relative; }
.vpx .rng-loxi{ position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; border:1.5px solid rgba(46,123,255,.3); background:rgba(46,123,255,.06); cursor:pointer; display:grid; place-items:center; padding:0; transition:border-color .2s, box-shadow .2s; z-index:5; }
.vpx .rng-loxi img{ width:22px; height:22px; border-radius:50%; object-fit:contain; }
.vpx .rng-loxi:hover{ border-color:rgba(46,123,255,.8); box-shadow:0 0 14px rgba(46,123,255,.5); }
.vpx .rng-loxi.rng-loxi-pulse{ border-color:#2E7BFF; box-shadow:0 0 0 4px rgba(46,123,255,.25), 0 0 18px rgba(46,123,255,.6); animation:rngloxiPulse 1.6s ease; }
.vpx .ld-hit-sel{ }
rect.ld-hit-sel{ stroke:none; fill:rgba(46,123,255,.05); }
.vpx .hit-bar button:hover{ color:#2E7BFF !important; }
@keyframes rngloxiPulse{ 0%,100%{ transform:translateY(-50%) scale(1); } 30%{ transform:translateY(-50%) scale(1.18); } 60%{ transform:translateY(-50%) scale(0.96); } }
.vpx .lcell-bar{ pointer-events:all; }
.vpx .lcell-bar button:hover{ color:#2E7BFF !important; }
.vpx .dragging-instr .lcell.over{ background:rgba(46,123,255,.22) !important; box-shadow:0 0 0 2px rgba(46,123,255,.8) inset !important; border-radius:8px !important; }
.vpx .lcell-ctx button:hover{ background:rgba(46,123,255,.1) !important; }
.vpx .rung-actbar{ position:absolute; left:50%; transform:translateX(-50%); bottom:18px; z-index:60; display:flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:center; max-width:calc(100% - 40px); background:linear-gradient(180deg,rgba(13,24,40,.98),rgba(9,16,28,.98)); border:1px solid var(--line2); border-radius:12px; padding:8px 10px; box-shadow:0 16px 44px -16px #000; }
.vpx .rung-actbar[hidden]{ display:none; }
.vpx .rung-actbar .rab-sep{ width:1px; align-self:stretch; margin:2px 3px; background:var(--line2); }
.vpx .rung-actbar .rab-t{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-right:2px; white-space:nowrap; }
.vpx .rung-actbar .rab-t b{ color:var(--cyan); }
.vpx .rung-actbar button{ background:rgba(255,255,255,.04); border:1px solid var(--line2); color:var(--text); font-family:var(--body); font-size:11.5px; padding:6px 10px; border-radius:8px; cursor:pointer; transition:all .15s; white-space:nowrap; }
.vpx .rung-actbar button:hover{ border-color:var(--cyan); color:var(--cyan); }
.vpx .rung-actbar .rab-x{ padding:6px 9px; color:var(--dim); }
/* editor mini-Loxi de renglón */
.vpx .rung-editor{ position:absolute; right:120px; bottom:140px; z-index:61; width:400px; max-width:calc(100% - 48px); background:linear-gradient(180deg,rgba(13,24,40,.99),rgba(9,16,28,.99)); border:1px solid var(--line2); border-radius:18px; padding:0; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.55); }
.vpx .rung-editor[hidden]{ display:none; }
.vpx .rung-editor .re-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px 10px; border-bottom:1px solid rgba(255,255,255,.06); }
.vpx .rung-editor .re-head-left{ display:flex; align-items:center; gap:10px; }
.vpx .rung-editor .re-av{ width:34px; height:34px; border-radius:50%; overflow:hidden; background:rgba(46,123,255,.1); border:1.5px solid rgba(46,123,255,.3); flex:none; display:grid; place-items:center; }
.vpx .rung-editor .re-av img{ width:100%; height:100%; object-fit:contain; }
.vpx .rung-editor .re-htitle{ font-family:var(--body); font-size:12px; font-weight:700; color:var(--text); }
.vpx .rung-editor .re-hnum{ font-family:var(--mono); font-size:10px; color:var(--muted); }
.vpx .rung-editor .re-x{ background:transparent; border:0; color:var(--dim); cursor:pointer; padding:4px 7px; border-radius:6px; font-size:14px; line-height:1; }
.vpx .rung-editor .re-x:hover{ color:var(--text); }
.vpx .rung-editor .re-comment-row{ display:flex; align-items:stretch; border-bottom:1px solid rgba(255,255,255,.06); }
.vpx .rung-editor .re-comment{ flex:1; min-width:0; box-sizing:border-box; background:rgba(255,255,255,.03); border:0; padding:8px 15px; font-family:var(--body); font-size:12px; color:var(--text); outline:none; }
.vpx .rung-editor .re-comment-ok{ flex:none; background:rgba(46,123,255,.1); border:0; border-left:1px solid rgba(255,255,255,.06); color:var(--cyan,#2E7BFF); font-family:var(--body); font-size:11.5px; font-weight:600; padding:0 14px; cursor:pointer; transition:background .15s; }
.vpx .rung-editor .re-comment-ok:hover{ background:rgba(46,123,255,.22); }
.vpx .rung-editor .re-loxi-body{ padding:13px 15px 15px; }
.vpx .rung-editor .re-manual-body{ padding:13px 15px 15px; }
.vpx .rung-editor .re-loxi-q{ font-family:var(--body); font-size:13px; color:var(--text); margin-bottom:9px; font-weight:600; }
.vpx .rung-editor .re-loxi-ta, .vpx .rung-editor #reTa{ display:block; width:100%; box-sizing:border-box; background:rgba(255,255,255,.04); border:1px solid var(--line2); border-radius:10px; color:var(--text); font-family:var(--mono); font-size:12px; padding:10px 12px; outline:none; resize:vertical; min-height:70px; }
.vpx .rung-editor .re-loxi-ta:focus, .vpx .rung-editor #reTa:focus{ border-color:rgba(46,123,255,.5); }
.vpx .rung-editor .re-loxi-btns{ display:flex; gap:8px; margin-top:10px; }
.vpx .rung-editor .re-gen{ flex:1; background:linear-gradient(180deg,#3D8BFF,#2361D8); border:0; border-radius:10px; color:#06121f; font-family:var(--body); font-size:12px; font-weight:700; padding:9px 14px; cursor:pointer; }
.vpx .rung-editor .re-gen:hover{ box-shadow:0 0 14px rgba(46,123,255,.4); }
.vpx .rung-editor .re-manual-btn{ background:rgba(255,255,255,.05); border:1px solid var(--line2); border-radius:10px; color:var(--muted); font-family:var(--body); font-size:12px; padding:9px 12px; cursor:pointer; }
.vpx .rung-editor .re-manual-btn:hover{ color:var(--text); border-color:rgba(46,123,255,.4); }
.vpx .rung-editor .re-loxi-out{ margin-top:10px; padding:10px 12px; background:rgba(46,123,255,.06); border:1px solid rgba(46,123,255,.25); border-radius:10px; font-family:var(--body); font-size:12px; color:var(--text); }
.vpx .rung-editor .re-actions{ display:flex; gap:8px; margin-top:10px; }
.vpx .rung-editor .re-save{ background:linear-gradient(180deg,#3D8BFF,#2361D8); border:0; border-radius:9px; color:#06121f; font-family:var(--body); font-size:12px; font-weight:700; padding:8px 14px; cursor:pointer; }
.vpx .rung-editor .re-cancel{ background:rgba(255,255,255,.04); border:1px solid var(--line2); border-radius:9px; color:var(--muted); font-family:var(--body); font-size:12px; padding:8px 12px; cursor:pointer; }
.vpx .rung-editor .re-improve{ background:transparent; border:1px solid rgba(46,123,255,.4); border-radius:9px; color:var(--cyan); font-family:var(--body); font-size:12px; padding:8px 12px; cursor:pointer; margin-right:auto; }
.vpx .rung-editor .re-hint{ font-family:var(--body); font-size:10.5px; color:var(--dim); margin-top:7px; line-height:1.5; }
.vpx .rung-editor .re-apply-ai{ background:rgba(46,123,255,.15); border:1px solid rgba(46,123,255,.4); border-radius:8px; color:var(--cyan); font-family:var(--body); font-size:12px; padding:7px 14px; cursor:pointer; display:block; }
.vpx .ld-hit{ transition:fill .2s; }
.vpx .rung-comm{ cursor:pointer; }
.vpx .rung-comm:hover{ color:var(--cyan); }
.vpx .ld-hit:hover{ fill:rgba(46,123,255,.12) !important; }
/* menú de opciones de elemento (clic derecho) */
.vpx .el-pop{ position:absolute; z-index:62; width:262px; max-width:calc(100% - 24px); background:linear-gradient(180deg,rgba(13,24,40,.99),rgba(9,16,28,.99)); border:1px solid var(--line2); border-radius:13px; padding:12px; box-shadow:0 24px 64px -18px #000; }
.vpx .el-pop[hidden]{ display:none; }
.vpx .el-pop .elp-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:9px; }
.vpx .el-pop .elp-k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan); }
.vpx .el-pop .elp-tag{ font-family:var(--mono); font-size:13.5px; color:var(--text); margin-top:2px; word-break:break-all; }
.vpx .el-pop .elp-x{ background:none; border:0; color:var(--dim); font-size:13px; cursor:pointer; padding:2px 5px; border-radius:6px; }
.vpx .el-pop .elp-x:hover{ color:#fff; background:rgba(255,255,255,.06); }
.vpx .el-pop .elp-info{ display:flex; flex-direction:column; gap:4px; padding:8px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:9px; }
.vpx .el-pop .elp-row{ display:flex; justify-content:space-between; gap:10px; font-family:var(--body); font-size:11.5px; }
.vpx .el-pop .elp-row span{ color:var(--dim); white-space:nowrap; } .vpx .el-pop .elp-row b{ color:var(--text); font-weight:500; text-align:right; word-break:break-all; }
.vpx .el-pop .elp-actions{ display:flex; flex-wrap:wrap; gap:6px; }
.vpx .el-pop .elp-seg{ display:flex; gap:6px; margin-bottom:9px; }
.vpx .el-pop .elp-seg button{ flex:1; background:rgba(255,255,255,.04); border:1px solid var(--line2); color:var(--muted); font-family:var(--mono); font-size:11.5px; padding:7px 9px; border-radius:8px; cursor:pointer; transition:all .15s; }
.vpx .el-pop .elp-seg button:hover{ color:var(--cyan); border-color:var(--cyan); }
.vpx .el-pop .elp-seg button.on{ color:var(--cyan); border-color:rgba(46,123,255,.5); background:rgba(46,123,255,.12); }
.vpx .el-pop .elp-actions button{ flex:1 1 auto; background:rgba(255,255,255,.04); border:1px solid var(--line2); color:var(--text); font-family:var(--body); font-size:11.5px; padding:7px 9px; border-radius:8px; cursor:pointer; transition:all .15s; white-space:nowrap; }
.vpx .el-pop .elp-actions button:hover{ border-color:var(--cyan); color:var(--cyan); }
.vpx .el-pop .elp-actions button[data-a="force"]{ background:rgba(46,123,255,.12); border-color:rgba(46,123,255,.4); color:var(--cyan); flex-basis:100%; }
.vpx .rung-editor textarea:focus{ border-color:var(--cyan); }
.vpx .rung-editor .re-hint{ font-family:var(--body); font-size:10.5px; color:var(--dim); margin:8px 0 12px; line-height:1.4; }
.vpx .rung-editor .re-actions{ display:flex; justify-content:flex-end; gap:8px; }
.vpx .rung-editor .re-actions button{ font-family:var(--body); font-size:12px; padding:8px 15px; border-radius:9px; cursor:pointer; border:1px solid var(--line2); background:rgba(255,255,255,.04); color:var(--text); transition:all .15s; }
.vpx .rung-editor .re-cancel:hover{ border-color:var(--muted); color:#fff; }
.vpx .rung-editor .re-save{ background:linear-gradient(180deg,var(--cyan),var(--cyan-2)); color:#06121f; border-color:transparent; font-weight:600; }
.vpx .rung-editor .re-save:hover{ filter:brightness(1.06); }
@media (max-width:1180px){.vpx .app{ grid-template-columns:84px var(--drawerw,280px) 1fr; }
}
.vpx .plc-skin{
  --display:var(--disp);
  --line-2:var(--line2);
  --line-blue:color-mix(in srgb, var(--cyan) 42%, transparent);
  --blue:var(--cyan); --blue-2:var(--cyan-2); --blue-soft:var(--cyan-soft);
  --panel:#0c1726; --panel-2:#0e1c2e; --panel-3:#0a1422;
  --ok:#46d98a; --warn:#f5b544; --bad:#ff5c6c; --faint:rgba(255,255,255,.1);
  --r-lg:16px; --shadow:0 18px 44px -20px rgba(0,0,0,.7);
  --shadow-blue:0 0 0 1px var(--cyan), 0 12px 30px -12px var(--glow);
}
.vpx .lad-embed{ min-width:0; }
.vpx .lad-embed .build-hint{ display:none !important; }
.vpx .lad-embed > .rungs-host > .add-rung, .vpx .lad-embed .rungs > .add-rung{ display:none !important; }
.vpx .lad-embed .rungs{ padding:2px 0 0; gap:14px; }
.vpx .lad-embed .rung{ border-bottom:1px dashed var(--line); }
.vpx .lad-embed .rung-side{ width:46px; }
.vpx .lad-embed .rtn-bar{ border-radius:12px; border:1px solid var(--line2); background:rgba(46,123,255,.04); margin-bottom:14px; }
.vpx .chip.sel{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan), 0 0 16px -4px var(--glow); color:var(--text); }
.vpx .rundock{ display:flex; flex-wrap:wrap; align-items:center; gap:13px 16px; padding:14px 24px; border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(8,15,26,.45), transparent); }
.vpx .rd-power{ display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:700; font-size:13px; color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line2); border-radius:12px; padding:11px 16px; }
.vpx .rd-power svg{ width:17px; height:17px; }
.vpx .rd-power.on{ color:#04201f; background:linear-gradient(180deg,var(--cyan),var(--cyan-2)); border-color:transparent; box-shadow:0 10px 26px -12px var(--glow); }
.vpx .rd-push{ display:flex; gap:10px; flex-wrap:wrap; }
.vpx .rundock .push{ width:auto; min-width:118px; }
.vpx .rundock .push > span:last-child{ display:flex; flex-direction:column; line-height:1.15; }
.vpx .rundock .push .pl, .vpx .rundock .push .pa{ display:block; }
.vpx .rundock .lad-motor{ margin-left:auto; }
.vpx .rundock #ladState{ flex-basis:100%; max-height:230px; overflow:auto; }
.vpx .rundock #ladState .io-grid{ grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); }
.vpx .rundock #ladState .eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); }
.vpx[data-density="compact"] .rundock{ padding:10px 18px; }