/* PLC 3D: Fábrica de HMI · Estilos del editor (scoped en .hmix)
   Reutiliza la paleta del design system. Cian de marca #39e3d8 + azul #2E7BFF + navy.
   Sin colores fuera del sistema; énfasis (glow) solo en foco/hover/selección. */

.hmix{
  --hc:#39e3d8; --hc2:#19b9c4; --hb:#2E7BFF; --hb2:#5B9BFF;
  --hpanel:#0c1726; --hpanel2:#0e1c2e; --hline:rgba(120,160,210,.13); --hline2:rgba(120,170,220,.22);
  --htext:#e8f1f8; --hmuted:#9fb2c6; --hdim:#6a7e95; --hglow:rgba(57,227,216,.5);
  position:relative; display:flex; flex-direction:column; height:80vh; min-height:700px; max-height:920px;
  border:1px solid rgba(46,123,255,.42); border-radius:22px; overflow:hidden; color:var(--htext);
  font-family:var(--body,'Inter',sans-serif);
  background:radial-gradient(120% 120% at 50% 14%, rgba(46,123,255,.14), transparent 60%), linear-gradient(180deg,#0c1426,#070b16);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 60px -30px rgba(46,123,255,.45);
}
.hmix *{ box-sizing:border-box; }
.hmix button{ font-family:inherit; cursor:pointer; }
/* esquinas escaneadas (acento sutil tipo visor) */
.hmix::before, .hmix::after{ content:''; position:absolute; width:26px; height:26px; border:2px solid var(--hc); opacity:.5; pointer-events:none; z-index:30; }
.hmix::before{ top:54px; left:10px; border-right:0; border-bottom:0; border-radius:6px 0 0 0; }
.hmix::after{ bottom:10px; right:10px; border-left:0; border-top:0; border-radius:0 0 6px 0; }

/* ---------- Toolbar ---------- */
.hmi-toolbar{ flex:none; display:flex; align-items:center; gap:7px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:11px 14px; border-bottom:1px solid var(--hline); background:linear-gradient(180deg, rgba(13,24,40,.72), rgba(8,15,26,.62)); position:relative; z-index:5; }
.hmi-toolbar::-webkit-scrollbar{ height:0; display:none; }
.hmi-tb-group{ display:flex; align-items:center; gap:5px; flex:none; }
.hmi-tb-sep{ width:1px; align-self:stretch; min-height:24px; background:var(--hline2); margin:0 2px; flex:none; }
.hmi-tb{ display:inline-flex; align-items:center; gap:6px; height:33px; padding:0 8px; border:1px solid var(--hline2); border-radius:9px; background:rgba(255,255,255,.025); color:var(--hmuted); font-weight:600; font-size:12px; transition:all .15s; flex:none; white-space:nowrap; }
.hmi-tb svg{ width:14px; height:14px; }
.hmi-tb.icon{ width:30px; padding:0; justify-content:center; }
.hmi-tb:hover:not(:disabled){ color:var(--htext); border-color:rgba(57,227,216,.4); }
.hmi-tb:disabled{ opacity:.35; cursor:not-allowed; }
.hmi-tb.on{ color:var(--hc); border-color:rgba(57,227,216,.5); background:rgba(57,227,216,.1); }
.hmi-tb.primary{ color:#04201f; background:linear-gradient(180deg,var(--hc),var(--hc2)); border:0; box-shadow:0 8px 22px -10px var(--hglow); }
.hmi-tb.primary.on{ color:#fff; background:linear-gradient(180deg,#f5a14a,#e07b2a); box-shadow:0 8px 22px -10px #e88b34; }
.hmi-tb-spacer{ flex:1 0 12px; }
.hmi-zoomlbl{ font-family:var(--mono,monospace); font-size:11.5px; color:var(--hmuted); min-width:38px; text-align:center; flex:none; }
.hmi-save{ display:inline-flex; align-items:center; gap:7px; flex:none; white-space:nowrap; font-family:var(--mono,monospace); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--hdim); }
.hmi-save .dot{ width:8px; height:8px; border-radius:50%; background:var(--hdim); transition:.2s; }
.hmi-save .dot.saved{ background:var(--hc); box-shadow:0 0 8px var(--hglow); }

/* ---------- Cuerpo: paleta · lienzo · propiedades ---------- */
.hmi-body{ flex:1; display:grid; grid-template-columns:54px 208px 1fr 258px; min-height:0; }

/* ---------- Paleta ---------- */
.hmi-palette{ overflow:auto; border-right:1px solid var(--hline); background:linear-gradient(180deg, rgba(12,23,38,.5), rgba(8,15,26,.5)); padding:12px 11px 24px; }
.hmi-palette::-webkit-scrollbar{ width:8px; } .hmi-palette::-webkit-scrollbar-thumb{ background:var(--hline2); border-radius:5px; }
.hmi-pgroup{ margin-bottom:14px; }
.hmi-pglabel{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--hdim); margin:4px 4px 9px; }
.hmi-pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hmi-chip{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px 6px 8px; border:1px solid var(--hline2); border-radius:11px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); color:var(--hmuted); transition:all .15s; }
.hmi-chip:hover{ border-color:rgba(57,227,216,.5); color:var(--htext); transform:translateY(-1px); box-shadow:0 8px 20px -12px var(--hglow); }
.hmi-chip:active{ cursor:grabbing; }
.hmi-chip-prev{ width:56px; height:56px; display:grid; place-items:center; overflow:hidden; }
.hmi-chip-n{ font-size:10.5px; font-weight:600; line-height:1.2; text-align:center; }

/* ---------- Lienzo (stage) con reglas + barra de estado ---------- */
.hmi-stage{ position:relative; min-width:0; min-height:0; display:grid; grid-template-columns:26px 1fr; grid-template-rows:26px 1fr auto; flex:1; }
.hmi-ruler-corner{ grid-area:1/1; border-right:1px solid var(--hline); border-bottom:1px solid var(--hline); background:rgba(8,15,26,.6); display:grid; place-items:center; overflow:hidden; }
.hmi-ruler-corner span{ font-family:var(--mono,monospace); font-size:7.5px; color:var(--hdim); transform:rotate(-90deg); white-space:nowrap; letter-spacing:.02em; }
.hmi-ruler{ position:relative; overflow:hidden; background:rgba(8,15,26,.6); }
.hmi-ruler-h{ grid-area:1/2; border-bottom:1px solid var(--hline); }
.hmi-ruler-v{ grid-area:2/1; border-right:1px solid var(--hline); }
.hmi-ruler-inner{ position:absolute; top:0; left:0; }
.hmi-rk{ position:absolute; font-family:var(--mono,monospace); font-size:8px; color:var(--hdim); }
.hmi-ruler-h .hmi-rk{ top:2px; border-left:1px solid var(--hline2); padding-left:3px; height:24px; }
.hmi-ruler-h .hmi-rk.minor{ height:6px; top:18px; padding:0; }
.hmi-ruler-v .hmi-rk{ left:2px; border-top:1px solid var(--hline2); width:24px; padding-top:1px; }
.hmi-ruler-v .hmi-rk.minor{ width:6px; left:18px; padding:0; border-top:1px solid var(--hline2); }
.hmi-canvas-wrap{ grid-area:2/2; display:flex; overflow:auto; padding:16px; position:relative; background-image:radial-gradient(circle at 1px 1px, rgba(120,160,210,.05) 1px, transparent 0); background-size:24px 24px; }
.hmi-canvas-wrap::-webkit-scrollbar{ width:10px; height:10px; } .hmi-canvas-wrap::-webkit-scrollbar-thumb{ background:var(--hline2); border-radius:6px; }
#hmiCanvasScale{ margin:auto; flex:none; }
#hmiCanvas{ position:relative; transform-origin:0 0; border-radius:4px; box-shadow:0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(120,160,210,.25); }
#hmiCanvas.grid{ background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:var(--gs,10px) var(--gs,10px); }
#hmiCanvas.drop{ box-shadow:0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 2px var(--hc), 0 0 30px -6px var(--hglow); }
.hmi-empty{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:var(--hdim); text-align:center; pointer-events:none; padding:30px; }
.hmi-empty svg{ width:46px; height:46px; opacity:.5; }
.hmi-empty b{ font-family:var(--display,sans-serif); font-size:17px; color:var(--hmuted); }
.hmi-empty span{ font-size:13px; max-width:34ch; }

/* nodos */
.hmi-node{ position:absolute; }
.hmi-node-body{ width:100%; height:100%; }
.hmix:not(.preview) .hmi-node{ cursor:move; }
.hmix:not(.preview) .hmi-node:hover{ outline:1px solid rgba(57,227,216,.4); outline-offset:1px; }
.hmi-node.sel{ outline:1.5px solid var(--hc); outline-offset:1px; }
.hmi-node.sel:hover{ outline:1.5px solid var(--hc); }
.hmi-h{ position:absolute; width:11px; height:11px; background:var(--hc); border:1.5px solid #04201f; border-radius:3px; z-index:5; box-shadow:0 0 8px var(--hglow); }
.hmi-h-nw{ left:-6px; top:-6px; cursor:nwse-resize; } .hmi-h-ne{ right:-6px; top:-6px; cursor:nesw-resize; }
.hmi-h-sw{ left:-6px; bottom:-6px; cursor:nesw-resize; } .hmi-h-se{ right:-6px; bottom:-6px; cursor:nwse-resize; }
.hmi-h-n{ left:50%; top:-6px; margin-left:-5.5px; cursor:ns-resize; } .hmi-h-s{ left:50%; bottom:-6px; margin-left:-5.5px; cursor:ns-resize; }
.hmi-h-w{ left:-6px; top:50%; margin-top:-5.5px; cursor:ew-resize; } .hmi-h-e{ right:-6px; top:50%; margin-top:-5.5px; cursor:ew-resize; }
.hmix.preview .hmi-canvas-wrap{ background-image:none; }

/* ---------- Propiedades ---------- */
.hmi-props{ overflow:auto; border-left:1px solid var(--hline); background:linear-gradient(180deg, rgba(12,23,38,.5), rgba(8,15,26,.5)); padding:16px 15px 24px; }
.hmi-props::-webkit-scrollbar{ width:8px; } .hmi-props::-webkit-scrollbar-thumb{ background:var(--hline2); border-radius:5px; }
.hmi-props-h{ margin-bottom:14px; }
.hmi-props-type{ font-family:var(--display,sans-serif); font-weight:700; font-size:16px; color:var(--htext); }
.hmi-pf-sec{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--hdim); margin:16px 2px 10px; }
.hmi-geo{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.hmi-geo-f{ display:flex; flex-direction:column; gap:5px; }
.hmi-geo-f span{ font-size:10.5px; color:var(--hdim); font-family:var(--mono,monospace); }
.hmi-geo-f input, .hmi-input{ width:100%; background:rgba(8,15,26,.7); border:1px solid var(--hline2); border-radius:9px; color:var(--htext); font-family:var(--body,sans-serif); font-size:13px; padding:9px 11px; outline:none; transition:border-color .15s; }
.hmi-geo-f input:focus, .hmi-input:focus{ border-color:var(--hc); }
.hmi-pf{ margin-bottom:11px; }
.hmi-pf > label{ display:block; font-size:11px; color:var(--hmuted); margin-bottom:6px; font-weight:600; }
select.hmi-input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239fb2c6' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; padding-right:30px; }
.hmi-sws{ display:flex; gap:7px; flex-wrap:wrap; }
.hmi-sw{ width:30px; height:30px; border-radius:8px; border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); transition:transform .12s; }
.hmi-sw:hover{ transform:translateY(-2px); }
.hmi-sw.on{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.18); }
.hmi-tagwrap{ position:relative; }
.hmi-tagwrap svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--hc2); pointer-events:none; }
.hmi-taginput{ padding-left:32px; font-family:var(--mono,monospace); font-size:12px; }
.hmi-props-actions{ display:flex; gap:8px; margin-top:18px; }
.hmi-pa{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px; border:1px solid var(--hline2); border-radius:10px; background:rgba(255,255,255,.025); color:var(--hmuted); font-weight:600; font-size:12px; transition:all .15s; }
.hmi-pa svg{ width:15px; height:15px; }
.hmi-pa:hover{ color:var(--htext); border-color:rgba(57,227,216,.4); }
.hmi-pa.danger:hover{ color:#ff8088; border-color:rgba(255,92,108,.5); background:rgba(255,92,108,.08); }
.hmi-props-empty{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:30px 6px; color:var(--hdim); }
.hmi-props-empty svg{ width:30px; height:30px; opacity:.55; }
.hmi-props-empty b{ font-family:var(--display,sans-serif); font-size:15px; color:var(--hmuted); }
.hmi-props-empty span{ font-size:12.5px; line-height:1.55; }

/* selectores superiores (fila tipo simulador) */
.hmi-sels{ display:grid; grid-template-columns:1.4fr 1.4fr 1.2fr 1fr; gap:12px; margin-bottom:14px; }
.hmi-self{ min-width:0; }
.hmi-self label{ font-family:var(--mono,monospace); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim,#5E6B82); display:block; margin-bottom:7px; }
.hmi-self .ctl{ display:flex; gap:7px; }
.hmi-self select, .hmi-self input{ width:100%; appearance:none; background:var(--panel-2,#121A2E); border:1px solid var(--line-2,rgba(255,255,255,.12)); color:var(--text,#EAF0FB); font-family:var(--body,sans-serif); font-weight:600; font-size:13px; padding:11px 13px; border-radius:12px; outline:none; }
.hmi-self select{ padding-right:32px; 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; }
.hmi-self select:focus, .hmi-self input:focus{ border-color:var(--blue,#2E7BFF); }
.hmi-self .mini{ flex:none; width:42px; padding:0; display:grid; place-items:center; appearance:auto; cursor:pointer; }
.hmi-self .mini svg{ width:17px; height:17px; }

@media (max-width:1200px){
  .hmi-body{ grid-template-columns:50px 184px 1fr 230px; }
}
@media (max-width:920px){
  .hmi-body{ grid-template-columns:46px 150px 1fr; }
  .hmi-props{ display:none; }
  .hmi-sels{ grid-template-columns:1fr 1fr; }
  .hmi-hero-in{ flex-direction:column; align-items:flex-start; }
  .hmi-hero-chips{ width:100%; }
}

/* ====================================================================
   WIDGETS HMI (.hw-*), todos llenan .hmi-node-body (100% x 100%)
==================================================================== */
.hmix .hw-pb, .hmix .hw-es, .hmix .hw-sel, .hmix .hw-lamp, .hmix .hw-motor, .hmix .hw-valve{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; user-select:none;
}
/* Pulsador redondo */
.hw-pb-cap{ border-radius:50%; background:radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--c) 65%, #fff 0%), var(--c) 58%, color-mix(in srgb, var(--c) 60%, #000) 100%); box-shadow:inset 0 -3px 8px rgba(0,0,0,.4), inset 0 3px 6px rgba(255,255,255,.35), 0 4px 10px -3px rgba(0,0,0,.5); border:2px solid rgba(255,255,255,.18); transition:transform .08s, box-shadow .15s; }
.hw-pb.on .hw-pb-cap{ box-shadow:inset 0 2px 7px rgba(0,0,0,.5), 0 0 16px -2px var(--c); transform:translateY(1px) scale(.97); }
.hw-pb-lbl{ font-weight:700; letter-spacing:.03em; color:var(--htext); text-align:center; line-height:1.1; }
/* Pulsador rectangular */
.hw-rb{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:700; letter-spacing:.02em; color:#04140e; border-radius:9px; padding:6px; line-height:1.1;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, #fff 0%), var(--c)); border:1px solid color-mix(in srgb, var(--c) 60%, #000); box-shadow:inset 0 2px 4px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.25), 0 4px 10px -4px rgba(0,0,0,.5); }
.hw-rb.on{ transform:translateY(1px); box-shadow:inset 0 2px 8px rgba(0,0,0,.4), 0 0 16px -3px var(--c); }
/* Paro de emergencia */
.hw-es{ --c:#FF5C6C; }
.hw-es-cap{ border-radius:50%; background:radial-gradient(circle at 40% 32%, #ff8a93, #FF5C6C 55%, #b22735 100%); box-shadow:inset 0 -4px 9px rgba(0,0,0,.45), inset 0 3px 6px rgba(255,255,255,.3), 0 0 0 4px rgba(255,255,255,.08), 0 5px 12px -4px rgba(0,0,0,.6); border:2px solid rgba(255,255,255,.2); }
.hw-es.on .hw-es-cap{ box-shadow:inset 0 3px 9px rgba(0,0,0,.5), 0 0 18px -2px #FF5C6C; }
.hw-es-lbl{ font-weight:700; color:#ffb3b8; letter-spacing:.04em; text-align:center; line-height:1.05; }
/* Selector */
.hw-sel-knob{ position:relative; border-radius:50%; background:radial-gradient(circle at 40% 32%, #cfd8e6, #8aa0b6 55%, #5a6678 100%); box-shadow:inset 0 -3px 7px rgba(0,0,0,.4), inset 0 3px 5px rgba(255,255,255,.4), 0 4px 10px -3px rgba(0,0,0,.5); border:2px solid rgba(255,255,255,.18); }
.hw-sel-ptr{ position:absolute; left:50%; top:50%; width:3px; height:42%; background:#0c1726; border-radius:2px; transform-origin:bottom center; transform:translate(-50%,-100%); }
.hw-sel-tick{ position:absolute; left:50%; top:50%; width:2px; height:50%; transform-origin:bottom center; }
.hw-sel-tick::after{ content:''; position:absolute; top:-5px; left:-1.5px; width:5px; height:5px; border-radius:50%; background:var(--hc); box-shadow:0 0 6px var(--hglow); }
.hw-sel-lbl, .hw-lamp-lbl, .hw-motor-l, .hw-valve-l{ font-weight:700; color:var(--htext); letter-spacing:.03em; text-align:center; line-height:1.1; }
/* Lámpara */
.hw-lamp-led{ border-radius:50%; background:radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--c) 30%, #1a2230), color-mix(in srgb, var(--c) 18%, #0c1422) 70%); border:2px solid color-mix(in srgb, var(--c) 40%, #2a3548); box-shadow:inset 0 2px 5px rgba(0,0,0,.5); transition:all .18s; }
.hw-lamp.on .hw-lamp-led{ background:radial-gradient(circle at 38% 30%, #fff, var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000)); border-color:color-mix(in srgb, var(--c) 70%, #fff); box-shadow:inset 0 2px 5px rgba(255,255,255,.4), 0 0 18px 1px var(--c); }
/* Indicador multiestado */
.hw-ms{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:700; letter-spacing:.03em; border-radius:9px; color:var(--hmuted); padding:5px; line-height:1.1;
  background:rgba(255,255,255,.04); border:1.5px solid var(--hline2); transition:all .18s; }
.hw-ms.on{ color:#04201f; background:linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c)); border-color:var(--c); box-shadow:0 0 16px -4px var(--c); }
/* Display numérico */
.hw-num, .hw-entry{ width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:8px 12px; border-radius:10px; background:rgba(6,12,20,.55); border:1px solid var(--hline2); }
.hw-num-l, .hw-entry-l{ font-family:var(--mono,monospace); letter-spacing:.06em; text-transform:uppercase; color:var(--hdim); }
.hw-num-row{ display:flex; align-items:baseline; gap:7px; }
.hw-num-v{ font-family:var(--mono,monospace); font-weight:600; color:var(--c); line-height:1; font-variant-numeric:tabular-nums; }
.hw-num-u{ font-style:normal; color:var(--hmuted); }
/* Entrada numérica */
.hw-entry-box{ display:flex; align-items:baseline; gap:7px; background:rgba(8,15,26,.85); border:1px solid var(--hline2); border-radius:8px; padding:5px 10px; position:relative; }
.hw-entry-box b{ font-family:var(--mono,monospace); font-weight:600; color:var(--htext); line-height:1.1; font-variant-numeric:tabular-nums; }
.hw-entry-box i{ font-style:normal; color:var(--hmuted); }
.hw-entry-box svg{ width:14px; height:14px; color:var(--hc); margin-left:auto; }
/* Barra de nivel */
.hw-bar{ --c:#39e3d8; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; gap:5px; padding:6px; }
.hw-bar-track{ position:relative; flex:1; width:62%; min-width:22px; border-radius:6px; background:rgba(8,15,26,.7); border:1px solid var(--hline2); overflow:hidden; display:flex; flex-direction:column-reverse; }
.hw-bar-fill{ width:100%; background:linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff 0%), var(--c)); box-shadow:0 0 12px -2px var(--c); transition:height .25s; }
.hw-bar-val{ position:absolute; top:5px; left:0; right:0; text-align:center; font-family:var(--mono,monospace); font-weight:600; color:var(--htext); text-shadow:0 1px 3px rgba(0,0,0,.7); }
.hw-bar-l{ font-family:var(--mono,monospace); letter-spacing:.04em; text-transform:uppercase; color:var(--hmuted); text-align:center; }
/* Medidor */
.hw-gauge{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px; }
.hw-gauge svg{ width:100%; height:auto; max-height:62%; }
.hw-gauge-v{ font-family:var(--mono,monospace); font-weight:700; color:var(--c); line-height:1; font-variant-numeric:tabular-nums; }
.hw-gauge-v i{ color:var(--hmuted); font-style:normal; }
.hw-gauge-l{ font-family:var(--mono,monospace); letter-spacing:.05em; text-transform:uppercase; color:var(--hmuted); }
/* Tanque */
.hw-tank{ position:relative; width:100%; height:100%; }
.hw-tank svg{ width:100%; height:100%; }
.hw-tank-cap{ position:absolute; left:0; right:0; top:42%; display:flex; flex-direction:column; align-items:center; gap:1px; pointer-events:none; }
.hw-tank-cap b{ font-family:var(--mono,monospace); color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.8); line-height:1; }
.hw-tank-cap span{ font-family:var(--mono,monospace); color:rgba(255,255,255,.85); text-shadow:0 1px 4px rgba(0,0,0,.8); letter-spacing:.03em; }
/* Motor */
.hw-motor svg, .hw-valve svg{ width:100%; height:100%; max-height:74%; }
.hw-motor.on .hw-motor-fan{ animation:hwSpin 1.1s linear infinite; transform-origin:23px 28px; }
@keyframes hwSpin{ to{ transform:rotate(360deg); } }
/* Válvula */
.hw-valve-l, .hw-motor-l{ margin-top:2px; }
/* Tubería */
.hw-pipe{ width:100%; height:100%; display:flex; align-items:center; }
.hw-pipe span{ display:block; background:linear-gradient(180deg, color-mix(in srgb, var(--c) 75%, #fff 0%), var(--c) 50%, color-mix(in srgb, var(--c) 60%, #000)); border-radius:4px; box-shadow:inset 0 2px 3px rgba(255,255,255,.3), inset 0 -2px 3px rgba(0,0,0,.3); position:relative; overflow:hidden; }
.hw-pipe.h span{ width:100%; height:60%; }
.hw-pipe.v{ justify-content:center; } .hw-pipe.v span{ height:100%; width:60%; }
.hw-pipe.flow span::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg, rgba(255,255,255,.0) 0 8px, rgba(255,255,255,.35) 8px 14px); animation:hwFlow .7s linear infinite; }
@keyframes hwFlow{ to{ background-position:28px 0; } }
/* Texto */
.hw-label{ width:100%; height:100%; display:flex; align-items:center; line-height:1.2; overflow:hidden; word-break:break-word; }
/* Rectángulo / marco */
.hw-rect{ width:100%; height:100%; border:2px solid; position:relative; }
.hw-rect-t{ position:absolute; top:-9px; left:12px; padding:0 7px; font-family:var(--mono,monospace); font-size:11px; letter-spacing:.04em; text-transform:uppercase; background:#0b1322; }
/* Tendencia */
.hw-trend{ width:100%; height:100%; display:flex; flex-direction:column; padding:9px 11px; border-radius:10px; background:rgba(6,12,20,.55); border:1px solid var(--hline2); }
.hw-trend-h{ display:flex; align-items:center; gap:7px; font-family:var(--mono,monospace); font-size:11px; letter-spacing:.04em; color:var(--hmuted); margin-bottom:6px; }
.hw-trend-dot{ width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 7px var(--c); }
.hw-trend-svg{ flex:1; width:100%; min-height:0; }
/* Alarma */
.hw-alarm{ width:100%; height:100%; display:flex; align-items:center; gap:10px; padding:0 13px; border-radius:9px; color:#fff; font-weight:600; letter-spacing:.01em;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #1a0e12), color-mix(in srgb, var(--c) 18%, #14090c)); border:1px solid color-mix(in srgb, var(--c) 55%, #000); }
.hw-alarm-dot{ width:10px; height:10px; border-radius:50%; flex:none; background:var(--c); box-shadow:0 0 9px var(--c); animation:hwBlink 1.1s ease-in-out infinite; }
@keyframes hwBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.hw-alarm-t{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hw-alarm-time{ font-family:var(--mono,monospace); color:rgba(255,255,255,.8); flex:none; }

/* ====================================================================
   OVERLAY · Explorador de proyectos + Galería de plantillas
==================================================================== */
.hmi-overlay{ position:absolute; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:30px; background:rgba(4,9,16,.72); backdrop-filter:blur(8px); }
.hmi-overlay[hidden]{ display:none; }
.hmi-ov-card{ width:100%; max-width:880px; height:100%; max-height:560px; display:flex; flex-direction:column; border:1px solid var(--hline2); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg, rgba(13,24,40,.98), rgba(9,16,28,.98)); box-shadow:0 40px 90px -30px rgba(0,0,0,.85); }
.hmi-ov-head{ flex:none; display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--hline); }
.hmi-ov-tabs{ display:flex; gap:6px; }
.hmi-ov-tab{ font-family:var(--body,sans-serif); font-weight:600; font-size:13px; color:var(--hmuted); background:none; border:1px solid transparent; border-radius:10px; padding:8px 16px; transition:all .15s; }
.hmi-ov-tab:hover{ color:var(--htext); }
.hmi-ov-tab.on{ color:var(--hc); border-color:rgba(57,227,216,.4); background:rgba(57,227,216,.08); }
.hmi-ov-x{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--hline2); border-radius:9px; background:rgba(255,255,255,.025); color:var(--hmuted); }
.hmi-ov-x:hover{ color:var(--htext); border-color:rgba(57,227,216,.4); } .hmi-ov-x svg{ width:16px; height:16px; }
.hmi-ov-body{ flex:1; overflow:auto; min-height:0; }
.hmi-ov-body::-webkit-scrollbar{ width:9px; } .hmi-ov-body::-webkit-scrollbar-thumb{ background:var(--hline2); border-radius:5px; }
.hmi-ov-empty{ padding:40px; text-align:center; color:var(--hdim); }

/* Explorador */
.hmi-ex{ display:grid; grid-template-columns:220px 1fr; height:100%; min-height:0; }
.hmi-ex-projs{ border-right:1px solid var(--hline); padding:14px 11px; display:flex; flex-direction:column; gap:5px; overflow:auto; }
.hmi-ex-h, .hmi-ex-h2{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--hdim); margin:2px 4px 8px; }
.hmi-ex-proj{ display:flex; align-items:center; gap:9px; padding:9px 10px; border:1px solid transparent; border-radius:10px; background:none; color:var(--hmuted); text-align:left; transition:all .14s; }
.hmi-ex-proj svg{ width:17px; height:17px; flex:none; color:var(--hc2); }
.hmi-ex-proj .nm{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:600; }
.hmi-ex-proj .ct{ font-family:var(--mono,monospace); font-size:10px; color:var(--hdim); background:rgba(255,255,255,.05); border-radius:6px; padding:1px 7px; }
.hmi-ex-proj:hover{ color:var(--htext); background:rgba(255,255,255,.03); }
.hmi-ex-proj.on{ color:var(--htext); border-color:rgba(57,227,216,.35); background:linear-gradient(90deg, rgba(57,227,216,.12), transparent); box-shadow:inset 2px 0 0 var(--hc); }
.hmi-ex-new{ margin-top:8px; display:inline-flex; align-items:center; gap:7px; padding:9px 11px; border:1px dashed var(--hline2); border-radius:10px; background:none; color:var(--hc); font-weight:600; font-size:12.5px; }
.hmi-ex-new svg{ width:15px; height:15px; } .hmi-ex-new:hover{ border-color:var(--hc); background:rgba(57,227,216,.05); }
.hmi-ex-main{ padding:16px 18px; overflow:auto; min-height:0; }
.hmi-ex-h2{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.hmi-ex-h2 b{ font-family:var(--display,sans-serif); font-size:17px; color:var(--htext); letter-spacing:normal; text-transform:none; }
.hmi-ex-h2 .acts, .hmi-ex-srow .acts{ display:flex; gap:5px; }
.hmi-ex-h2 .acts button, .hmi-ex-srow .acts button{ width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--hline2); border-radius:8px; background:rgba(255,255,255,.025); color:var(--hmuted); }
.hmi-ex-h2 .acts button svg, .hmi-ex-srow .acts button svg{ width:14px; height:14px; }
.hmi-ex-h2 .acts button:hover, .hmi-ex-srow .acts button:hover{ color:var(--htext); border-color:rgba(57,227,216,.4); }
.hmi-ex-grid, .hmi-tpl-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.hmi-ex-screen{ border:1px solid var(--hline2); border-radius:13px; overflow:hidden; background:rgba(255,255,255,.02); }
.hmi-ex-screen.on{ border-color:rgba(57,227,216,.5); box-shadow:0 0 0 1px rgba(57,227,216,.3); }
.hmi-ex-thumb{ display:block; width:100%; padding:0; border:0; background:#070d18; border-bottom:1px solid var(--hline); cursor:pointer; }
.hmi-ex-thumb:hover{ background:#0a1320; }
.hmi-ex-srow{ display:flex; align-items:center; gap:8px; padding:9px 11px; }
.hmi-ex-srow .nm{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:600; color:var(--htext); }
.hmi-ex-add{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:150px; border:1.5px dashed var(--hline2); border-radius:13px; background:none; color:var(--hmuted); font-weight:600; font-size:13px; }
.hmi-ex-add svg{ width:24px; height:24px; }
.hmi-ex-add:hover{ color:var(--htext); border-color:rgba(57,227,216,.4); background:rgba(57,227,216,.03); }
.hmi-ex-add.accent{ color:var(--hc); }

/* Miniaturas */
.hmi-mini{ overflow:hidden; margin:auto; }
.hmi-mini-cv{ position:relative; transform-origin:0 0; overflow:hidden; }
.hmi-mini-node{ position:absolute; }
.hmi-ex-thumb .hmi-mini{ height:160px; display:grid; place-items:center; }

/* Plantillas */
.hmi-tpl-grid{ padding:18px; }
.hmi-tpl-card{ border:1px solid var(--hline2); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.02); display:flex; flex-direction:column; }
.hmi-tpl-thumb{ height:200px; display:grid; place-items:center; background:#070d18; border-bottom:1px solid var(--hline); overflow:hidden; }
.hmi-tpl-meta{ padding:13px 14px 15px; display:flex; flex-direction:column; gap:5px; flex:1; }
.hmi-tpl-meta b{ font-family:var(--display,sans-serif); font-size:15px; color:var(--htext); }
.hmi-tpl-meta span{ font-size:12px; color:var(--hmuted); line-height:1.45; flex:1; }
.hmi-tpl-use{ margin-top:8px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px; border:0; border-radius:10px; background:linear-gradient(180deg,var(--hc),var(--hc2)); color:#04201f; font-weight:700; font-size:12.5px; }
.hmi-tpl-use svg{ width:15px; height:15px; } .hmi-tpl-use:hover{ filter:brightness(1.06); }

/* ---------- Runtime bar (modo Preview) ---------- */
.hmi-runbar{ grid-column:1/3; display:flex; align-items:center; gap:14px; padding:11px 18px; border-top:1px solid var(--hline); background:linear-gradient(180deg, rgba(13,24,40,.85), rgba(8,15,26,.8)); }
.hmi-runbar[hidden]{ display:none; }
.hmi-run-status{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono,monospace); font-size:11.5px; letter-spacing:.06em; color:#7fe6b0; font-weight:600; }
.hmi-run-status i{ width:9px; height:9px; border-radius:50%; background:#3ee07a; box-shadow:0 0 9px #3ee07a; animation:hwBlink 1.4s ease-in-out infinite; }
.hmi-run-clock{ font-family:var(--mono,monospace); font-size:13px; color:var(--htext); font-variant-numeric:tabular-nums; }
.hmi-run-btn{ font-family:var(--body,sans-serif); font-weight:600; font-size:12px; color:var(--hmuted); background:rgba(255,255,255,.03); border:1px solid var(--hline2); border-radius:9px; padding:8px 14px; transition:all .15s; }
.hmi-run-btn:hover{ color:var(--htext); border-color:rgba(57,227,216,.4); }
.hmi-run-btn.paused{ color:var(--hc); border-color:rgba(57,227,216,.5); background:rgba(57,227,216,.1); }
.hmi-run-hint{ font-family:var(--body,sans-serif); font-size:11.5px; color:var(--hdim); margin-left:4px; }
.hmi-run-exit{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--body,sans-serif); font-weight:600; font-size:12px; color:#ff8088; background:rgba(255,92,108,.08); border:1px solid rgba(255,92,108,.4); border-radius:9px; padding:8px 14px; }
.hmi-run-exit svg{ width:14px; height:14px; } .hmi-run-exit:hover{ background:rgba(255,92,108,.16); }
/* Fase 5, fuente de datos del preview: chip de estado + conmutador PLC en vivo / simulación interna */
.hmi-run-link{ display:inline-flex; align-items:center; gap:9px; }
.hmi-link-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono,monospace); font-size:11px; letter-spacing:.05em; font-weight:600; color:var(--hmuted); padding:5px 11px; border-radius:20px; border:1px solid var(--hline2); background:rgba(255,255,255,.03); }
.hmi-link-chip i{ width:8px; height:8px; border-radius:50%; background:var(--hdim); flex:none; }
.hmi-link-chip[data-state="ok"]{ color:#7fe6b0; border-color:rgba(62,224,122,.4); }
.hmi-link-chip[data-state="ok"] i{ background:#3ee07a; box-shadow:0 0 8px #3ee07a; }
.hmi-link-chip[data-state="idle"]{ color:#f5c97a; border-color:rgba(245,181,68,.4); }
.hmi-link-chip[data-state="idle"] i{ background:#F5B544; box-shadow:0 0 8px rgba(245,181,68,.7); }
.hmi-link-toggle{ display:inline-flex; align-items:center; gap:7px; font-family:var(--body,sans-serif); font-weight:600; font-size:12px; color:var(--hmuted); background:rgba(255,255,255,.03); border:1px solid var(--hline2); border-radius:9px; padding:8px 13px; transition:all .15s; }
.hmi-link-toggle:hover:not(:disabled){ color:var(--htext); border-color:rgba(57,227,216,.4); }
.hmi-link-toggle.on{ color:var(--hc); border-color:rgba(57,227,216,.5); background:rgba(57,227,216,.1); }
.hmi-link-toggle.on .dot{ box-shadow:0 0 8px var(--hglow); }
.hmi-link-toggle:disabled{ opacity:.5; cursor:not-allowed; }
.hmi-link-toggle .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.hmix.preview .hmi-node{ cursor:default; }
.hmix.preview .hmi-node[data-id] .hw-pb, .hmix.preview .hw-rb, .hmix.preview .hw-es, .hmix.preview .hw-sel, .hmix.preview .hw-entry{ cursor:pointer; }
.hmi-rt-entry{ width:70%; min-width:40px; background:rgba(8,15,26,.95); border:1px solid var(--hc); border-radius:6px; color:var(--htext); font-family:var(--mono,monospace); font-weight:600; font-size:inherit; padding:2px 6px; outline:none; }

/* ---------- Pestaña Generar con IA ---------- */
.hmi-ai{ padding:22px 24px; max-width:680px; margin:0 auto; }
.hmi-ai-head{ display:flex; align-items:flex-start; gap:13px; margin-bottom:16px; }
.hmi-ai-head svg{ width:30px; height:30px; flex:none; color:var(--hc); margin-top:2px; }
.hmi-ai-head b{ display:block; font-family:var(--display,sans-serif); font-size:18px; color:var(--htext); }
.hmi-ai-head span{ display:block; font-size:13px; color:var(--hmuted); line-height:1.5; margin-top:3px; }
.hmi-ai-ta{ width:100%; background:rgba(8,15,26,.7); border:1px solid var(--hline2); border-radius:12px; color:var(--htext); font-family:var(--body,sans-serif); font-size:14px; line-height:1.5; padding:13px 15px; outline:none; resize:vertical; min-height:96px; }
.hmi-ai-ta:focus{ border-color:var(--hc); }
.hmi-ai-ta::placeholder{ color:var(--hdim); }
.hmi-ai-exs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:13px 0; }
.hmi-ai-exl{ font-family:var(--mono,monospace); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--hdim); }
.hmi-ai-ex{ font-size:12px; color:var(--hmuted); background:rgba(255,255,255,.03); border:1px solid var(--hline2); border-radius:9px; padding:7px 11px; text-align:left; max-width:100%; transition:all .14s; }
.hmi-ai-ex:hover{ color:var(--htext); border-color:rgba(57,227,216,.4); }
.hmi-ai-row{ display:flex; align-items:center; gap:14px; margin-top:6px; }
.hmi-ai-go{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border:0; border-radius:11px; background:linear-gradient(180deg,var(--hc),var(--hc2)); color:#04201f; font-weight:700; font-size:13.5px; box-shadow:0 10px 26px -12px var(--hglow); transition:filter .15s; }
.hmi-ai-go:hover:not(:disabled){ filter:brightness(1.06); } .hmi-ai-go:disabled{ opacity:.6; cursor:default; }
.hmi-ai-status{ font-size:12.5px; color:var(--hmuted); }
.hmi-ai-adv{ margin-top:20px; border-top:1px solid var(--hline); padding-top:14px; }
.hmi-ai-adv summary{ font-size:12.5px; font-weight:600; color:var(--hmuted); cursor:pointer; }
.hmi-ai-adv summary:hover{ color:var(--htext); }
.hmi-ai-adv p{ font-size:12px; color:var(--hdim); line-height:1.55; margin:10px 0; }
.hmi-ai-adv b{ color:var(--hmuted); }
.hmi-ai-adv .hmi-input{ font-family:var(--mono,monospace); }

/* ====================================================================
   FASE A · Shell: contenedor ancho, chips de header, rail, reglas, barra de estado
==================================================================== */
.hmi-wide{ width:100%; max-width:1560px; margin:0 auto; padding:0 26px; }
.hmi-hero-in{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.hmi-hero-l{ min-width:0; }
.hmi-hero-chips{ display:flex; gap:9px; flex-wrap:wrap; padding-bottom:4px; }
.hmi-chiptab{ display:inline-flex; align-items:center; gap:8px; font-family:var(--body,sans-serif); font-weight:600; font-size:13px; color:var(--muted,#9AA7BE); background:linear-gradient(180deg, rgba(18,26,46,.7), rgba(12,18,32,.6)); border:1px solid var(--line-2,rgba(255,255,255,.12)); border-radius:12px; padding:11px 16px; transition:all .16s; }
.hmi-chiptab svg{ width:17px; height:17px; }
.hmi-chiptab:hover{ color:var(--text,#EAF0FB); border-color:rgba(57,227,216,.4); transform:translateY(-1px); }
.hmi-chiptab.on{ color:#39e3d8; border-color:rgba(57,227,216,.5); background:rgba(57,227,216,.1); box-shadow:0 0 0 1px rgba(57,227,216,.12); }
.hmi-chiptab.accent{ color:#c4adff; border-color:rgba(155,109,255,.42); background:linear-gradient(180deg, rgba(155,109,255,.16), rgba(110,70,200,.08)); }
.hmi-chiptab.accent:hover{ border-color:rgba(155,109,255,.7); color:#d9caff; }

/* Toolbar · acento + menú alinear */
.hmi-tb.accent{ color:#c4adff; border-color:rgba(155,109,255,.45); background:rgba(155,109,255,.1); }
.hmi-tb.accent:hover:not(:disabled){ color:#d9caff; border-color:rgba(155,109,255,.75); }
.hmi-save i{ font-style:normal; color:var(--hc); font-family:var(--body,sans-serif); }
.hmi-save svg{ width:15px; height:15px; color:var(--hc); }
.hmi-tb-alignwrap{ position:relative; }
.hmi-tb-alignwrap .cv{ width:13px !important; height:13px !important; margin-left:-2px; opacity:.7; }
.hmi-align-menu{ position:absolute; z-index:200; display:grid; grid-template-columns:1fr; gap:2px; padding:6px; min-width:178px; border:1px solid var(--hline2); border-radius:12px; background:linear-gradient(180deg, rgba(13,24,40,.98), rgba(9,16,28,.98)); box-shadow:0 24px 50px -20px rgba(0,0,0,.8); }
.hmi-align-menu[hidden]{ display:none; }
.hmi-align-menu button{ text-align:left; font-family:var(--body,sans-serif); font-size:12.5px; font-weight:600; color:var(--hmuted); background:none; border:0; border-radius:8px; padding:8px 11px; }
.hmi-align-menu button:hover{ color:var(--htext); background:rgba(57,227,216,.08); }

/* Rail de iconos */
.hmi-rail{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 0; border-right:1px solid var(--hline); background:linear-gradient(180deg, rgba(10,20,34,.6), rgba(6,12,22,.6)); }
.hmi-rail-b{ width:40px; height:40px; display:grid; place-items:center; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--hdim); transition:all .15s; }
.hmi-rail-b svg{ width:20px; height:20px; }
.hmi-rail-b:hover{ color:var(--hmuted); background:rgba(255,255,255,.03); }
.hmi-rail-b.on{ color:var(--hc); border-color:rgba(57,227,216,.4); background:radial-gradient(120% 120% at 50% 0%, rgba(57,227,216,.16), rgba(57,227,216,.03)); box-shadow:0 0 0 1px rgba(57,227,216,.12); }
.hmi-rail-bottom{ margin-top:auto; }

/* Barra de estado inferior */
.hmi-statusbar{ flex:none; display:flex; align-items:center; gap:14px; padding:9px 18px; border-top:1px solid var(--hline); background:linear-gradient(180deg, rgba(11,21,36,.7), rgba(8,15,26,.7)); font-size:12px; color:var(--hmuted); }
.hmi-st-item b{ color:var(--hdim); font-weight:600; font-family:var(--mono,monospace); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; margin-right:5px; }
.hmi-st-item span{ font-family:var(--mono,monospace); color:var(--htext); }
.hmi-st-sep{ width:1px; height:16px; background:var(--hline2); }
.hmi-st-spacer{ flex:1; }
.hmi-st-zoom{ display:inline-flex; align-items:center; gap:9px; }
.hmi-st-zoom b{ color:var(--hdim); font-weight:600; font-family:var(--mono,monospace); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; }
.hmi-st-zoom span{ font-family:var(--mono,monospace); color:var(--htext); min-width:42px; }
#hmiZoomSlider{ width:130px; accent-color:var(--hc); cursor:pointer; }

@media (max-width:1100px){ .hmi-hero-chips .hmi-chiptab span, .hmi-hero-chips .hmi-chiptab{ font-size:12px; } }

/* Pestaña Exportar */
.hmi-exp{ padding:20px 24px; }
.hmi-exp-lead{ font-size:13px; color:var(--hmuted); line-height:1.55; margin-bottom:18px; max-width:70ch; }
.hmi-exp-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px; }
.hmi-exp-card{ position:relative; border:1px solid var(--hline2); border-radius:13px; background:rgba(255,255,255,.02); padding:15px 16px 16px; display:flex; flex-direction:column; gap:6px; }
.hmi-exp-card.soon{ opacity:.72; }
.hmi-exp-badge{ position:absolute; top:12px; right:12px; font-family:var(--mono,monospace); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:#c4adff; background:rgba(155,109,255,.14); border:1px solid rgba(155,109,255,.4); border-radius:6px; padding:2px 7px; }
.hmi-exp-card b{ font-family:var(--display,sans-serif); font-size:14.5px; color:var(--htext); padding-right:80px; }
.hmi-exp-card span{ font-size:12px; color:var(--hmuted); line-height:1.5; flex:1; }
.hmi-exp-btn{ margin-top:8px; align-self:flex-start; font-family:var(--body,sans-serif); font-weight:600; font-size:12.5px; color:var(--hc); background:rgba(57,227,216,.08); border:1px solid rgba(57,227,216,.3); border-radius:9px; padding:8px 14px; transition:all .15s; }
.hmi-exp-btn:hover:not(:disabled){ background:rgba(57,227,216,.16); border-color:var(--hc); }
.hmi-exp-btn:disabled{ color:var(--hdim); background:rgba(255,255,255,.02); border-color:var(--hline2); cursor:not-allowed; }

/* ====================================================================
   Diseño congelado · barra de archivo, columna central, bandeja, estado vacío
==================================================================== */
/* Barra contextual del archivo */
.hmi-filebar{ flex:none; display:flex; align-items:center; gap:12px; padding:9px 16px; border-bottom:1px solid var(--hline); background:linear-gradient(180deg, rgba(11,21,36,.6), rgba(8,15,26,.55)); }
.hmi-fb-badge{ font-family:var(--mono,monospace); font-size:9px; font-weight:700; letter-spacing:.06em; color:var(--hc); background:rgba(57,227,216,.1); border:1px solid rgba(57,227,216,.3); border-radius:7px; padding:5px 7px; }
.hmi-fb-name{ font-family:var(--body,sans-serif); font-weight:600; font-size:14px; color:var(--htext); }
.hmi-fb-edit{ width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:8px; background:none; color:var(--hdim); }
.hmi-fb-edit svg{ width:14px; height:14px; } .hmi-fb-edit:hover{ color:var(--hc); background:rgba(255,255,255,.04); }
.hmi-fb-bc{ font-family:var(--body,sans-serif); font-size:12.5px; color:var(--hmuted); padding-left:10px; border-left:1px solid var(--hline2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.hmi-fb-saved{ display:inline-flex; align-items:center; gap:7px; font-family:var(--body,sans-serif); font-size:12px; color:var(--hmuted); margin-left:auto; white-space:nowrap; }
.hmi-fb-saved i{ width:7px; height:7px; border-radius:50%; background:var(--ok,#2FD27A); box-shadow:0 0 7px rgba(47,210,122,.6); }
.hmi-fb-ic{ width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--hline2); border-radius:9px; background:rgba(255,255,255,.02); color:var(--hmuted); }
.hmi-fb-ic svg{ width:15px; height:15px; } .hmi-fb-ic:hover{ color:var(--hc); border-color:rgba(57,227,216,.4); }
.hmi-fb-auto{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono,monospace); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--hdim); white-space:nowrap; }
.hmi-fb-auto .dot{ width:7px; height:7px; border-radius:50%; background:var(--hc); box-shadow:0 0 7px var(--hglow); }
.hmi-fb-auto b{ color:var(--hc); font-weight:700; }

/* Columna central (lienzo + bandeja) */
.hmi-center{ min-width:0; min-height:0; display:flex; flex-direction:column; }

/* Bandeja inferior */
.hmi-tray{ flex:none; border-top:1px solid var(--hline); background:linear-gradient(180deg, rgba(10,19,32,.55), rgba(8,15,26,.5)); display:flex; flex-direction:column; }
.hmi-tray-head{ display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--hline); }
.hmi-tray-tabs{ display:flex; gap:2px; }
.hmi-tray-tabs button{ font-family:var(--body,sans-serif); font-weight:600; font-size:12.5px; color:var(--hmuted); background:none; border:0; border-bottom:2px solid transparent; padding:11px 14px; transition:color .15s; }
.hmi-tray-tabs button:hover{ color:var(--htext); }
.hmi-tray-tabs button.on{ color:var(--hc); border-bottom-color:var(--hc); }
.hmi-tray-nav{ display:flex; gap:6px; }
.hmi-tray-nav button{ width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--hline2); border-radius:8px; background:rgba(255,255,255,.02); color:var(--hmuted); }
.hmi-tray-nav button svg{ width:14px; height:14px; } .hmi-tray-nav button:hover{ color:var(--hc); border-color:rgba(57,227,216,.4); }
.hmi-tray-toggle{ width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--hline2); border-radius:8px; background:rgba(255,255,255,.02); color:var(--hmuted); margin-left:4px; transition:transform .2s; }
.hmi-tray-toggle svg{ width:14px; height:14px; }
.hmi-tray-toggle:hover{ color:var(--hc); border-color:rgba(57,227,216,.4); }
.hmi-tray.collapsed .hmi-tray-toggle{ transform:rotate(180deg); }
.hmi-tray.collapsed .hmi-tray-body{ display:none; }
.hmi-tray-body{ display:flex; gap:12px; overflow-x:auto; padding:14px; scroll-behavior:smooth; }
.hmi-tray-body::-webkit-scrollbar{ height:8px; } .hmi-tray-body::-webkit-scrollbar-thumb{ background:var(--hline2); border-radius:5px; }
.hmi-tcard{ flex:none; width:188px; border:1px solid var(--hline2); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.02); cursor:pointer; transition:all .15s; }
.hmi-tcard:hover{ border-color:rgba(57,227,216,.45); transform:translateY(-2px); }
.hmi-tcard.on{ border-color:var(--hc); box-shadow:0 0 0 1px rgba(57,227,216,.35); }
.hmi-tcard-thumb{ height:96px; background:#070d18; border-bottom:1px solid var(--hline); display:grid; place-items:center; overflow:hidden; position:relative; }
.hmi-tcard-badges{ position:absolute; top:7px; left:7px; display:flex; gap:5px; }
.hmi-tcard-badge{ font-family:var(--mono,monospace); font-size:8px; font-weight:700; letter-spacing:.04em; padding:2px 6px; border-radius:5px; }
.hmi-tcard-badge.act{ color:#04201f; background:var(--hc); }
.hmi-tcard-badge.ini{ color:var(--hc); background:rgba(57,227,216,.12); border:1px solid rgba(57,227,216,.3); }
.hmi-tcard-meta{ padding:9px 11px 11px; }
.hmi-tcard-meta b{ display:block; font-family:var(--body,sans-serif); font-size:13px; font-weight:600; color:var(--htext); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hmi-tcard-stats{ display:flex; gap:12px; margin-top:6px; font-family:var(--mono,monospace); font-size:10.5px; color:var(--hdim); }
.hmi-tcard-stats span{ display:inline-flex; align-items:center; gap:4px; }
.hmi-tcard-stats svg{ width:12px; height:12px; }
.hmi-tcard-new{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--hmuted); border-style:dashed; }
.hmi-tcard-new svg{ width:26px; height:26px; }
.hmi-tray-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--hdim); font-size:12.5px; padding:20px; text-align:center; }

/* Estado vacío premium del lienzo */
.hmi-firstrun{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:5%; pointer-events:none; z-index:6; overflow:hidden; }6; }
.hmi-firstrun-card{ pointer-events:auto; width:min(720px,92%); border:1px solid var(--hline2); border-radius:20px; background:linear-gradient(180deg, rgba(13,26,44,.85), rgba(9,17,30,.8)); box-shadow:0 30px 70px -30px rgba(0,0,0,.7); padding:32px 30px; text-align:center; }
.hmi-firstrun-ico{ width:52px; height:52px; margin:0 auto 14px; display:grid; place-items:center; border:1px solid rgba(57,227,216,.3); border-radius:14px; background:rgba(57,227,216,.08); color:var(--hc); }
.hmi-firstrun-ico svg{ width:26px; height:26px; }
.hmi-firstrun h3{ font-family:var(--display,sans-serif); font-weight:700; font-size:26px; color:var(--htext); }
.hmi-firstrun-sub{ font-size:14px; color:var(--hmuted); margin-top:7px; }
.hmi-firstrun-chips{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin:18px 0 22px; }
.hmi-firstrun-chips span{ font-family:var(--mono,monospace); font-size:11.5px; color:var(--hmuted); background:rgba(255,255,255,.03); border:1px solid var(--hline2); border-radius:999px; padding:7px 14px; }
.hmi-firstrun-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.hmi-fr-opt{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:18px 12px; border:1px solid var(--hline2); border-radius:14px; background:rgba(255,255,255,.02); color:var(--htext); text-align:center; transition:all .15s; }
.hmi-fr-opt:hover{ border-color:rgba(57,227,216,.5); background:rgba(57,227,216,.05); transform:translateY(-2px); }
.hmi-fr-opt .ic{ width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--hline2); border-radius:12px; color:var(--hc); }
.hmi-fr-opt .ic svg{ width:24px; height:24px; }
.hmi-fr-opt b{ font-family:var(--body,sans-serif); font-weight:600; font-size:13.5px; }
.hmi-fr-opt span{ font-size:11px; color:var(--hmuted); line-height:1.4; }
.hmi-firstrun-hint{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:18px; padding:13px; border:1px dashed var(--hline2); border-radius:13px; font-size:12.5px; color:var(--hmuted); }
.hmi-firstrun-hint svg{ width:17px; height:17px; color:var(--hc); }

/* Panel derecho · Pantalla actual (sin selección) */
.hmi-screenpanel{ }
.hmi-sp-h{ font-family:var(--display,sans-serif); font-weight:700; font-size:16px; color:var(--htext); margin-bottom:16px; }
.hmi-sp-top{ display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }
.hmi-sp-thumb{ width:58px; height:44px; flex:none; border:1px solid var(--hline2); border-radius:9px; background:#070d18; display:grid; place-items:center; color:var(--hdim); }
.hmi-sp-thumb svg{ width:24px; height:24px; }
.hmi-sp-field{ margin-bottom:13px; }
.hmi-sp-field .k{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--hdim); display:block; margin-bottom:3px; }
.hmi-sp-field .v{ font-family:var(--body,sans-serif); font-size:14px; font-weight:600; color:var(--htext); }
.hmi-sp-actions{ display:flex; flex-direction:column; gap:9px; margin-top:20px; }
.hmi-sp-btn{ display:flex; align-items:center; gap:9px; width:100%; padding:11px 13px; border:1px solid var(--hline2); border-radius:11px; background:rgba(255,255,255,.02); color:var(--htext); font-family:var(--body,sans-serif); font-weight:600; font-size:13px; transition:all .15s; }
.hmi-sp-btn svg{ width:16px; height:16px; color:var(--hc); }
.hmi-sp-btn:hover{ border-color:rgba(57,227,216,.45); background:rgba(57,227,216,.05); }
.hmi-sp-btn.primary{ color:var(--hc); border-color:rgba(57,227,216,.45); background:rgba(57,227,216,.08); }
.hmi-sp-btn.danger{ color:#ff8088; border-color:rgba(255,92,108,.4); background:rgba(255,92,108,.06); }
.hmi-sp-btn.danger:hover{ background:rgba(255,92,108,.12); }

/* Edición inline de texto (doble clic en el lienzo) */
.hmi-inline-edit{ position:absolute; inset:0; width:100%; height:100%; background:rgba(8,15,26,.95); color:#e8f1f8; border:1.5px solid #39e3d8; border-radius:9px; font-family:var(--body,sans-serif); font-weight:600; font-size:14px; line-height:1.4; padding:8px; resize:none; outline:none; z-index:10; }

/* ---- Nuevos widgets ---- */
/* Interruptor Auto/Manual */
.hw-swam{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; gap:9px; user-select:none; }
.hw-swam-o{ font-family:var(--mono,monospace); font-weight:700; letter-spacing:.04em; color:var(--hmuted); }
.hw-swam.on .hw-swam-o:last-child{ color:var(--hc); }
.hw-swam:not(.on) .hw-swam-o:first-child{ color:var(--hc); }
.hw-swam-track{ width:52px; height:26px; border-radius:13px; background:rgba(255,255,255,.08); border:1.5px solid var(--hline2); position:relative; flex:none; transition:background .18s; }
.hw-swam.on .hw-swam-track{ background:rgba(57,227,216,.12); border-color:var(--hc); }
.hw-swam-th{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--hmuted); transition:transform .18s, background .18s; box-shadow:0 2px 4px rgba(0,0,0,.4); }
.hw-swam.on .hw-swam-th{ transform:translateX(26px); background:var(--hc); box-shadow:0 0 10px var(--hglow); }
/* Estado de comunicación */
.hw-comm{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; gap:9px; padding:6px; border-radius:10px; background:rgba(6,12,20,.55); border:1px solid var(--hline2); }
.hw-comm svg{ width:22px; height:22px; color:var(--c); flex:none; }
.hw-comm-txt{ font-family:var(--mono,monospace); font-weight:700; font-size:inherit; color:var(--c); }
.hw-comm-lbl{ font-family:var(--body,sans-serif); font-size:.8em; color:var(--hmuted); }
/* Sensor fotoeléctrico */
.hw-sensor{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.hw-sensor svg{ width:100%; height:auto; max-height:72%; }
/* Banda transportadora */
.hw-conv{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.hw-conv svg{ width:100%; height:auto; max-height:75%; }
.hmix.preview .hw-conv.on .hw-conv-items{ animation:hwConv .9s linear infinite; }
@keyframes hwConv{ to{ transform:translateX(-20px); } }

/* Botón flotante de simulación */
.hmi-sim-fab{ position:absolute; bottom:16px; right:16px; z-index:20; display:inline-flex; align-items:center; gap:9px; font-family:var(--body,sans-serif); font-weight:700; font-size:13.5px; color:#04201f; background:linear-gradient(180deg,var(--hc),var(--hc2)); border:0; border-radius:13px; padding:12px 22px; box-shadow:0 16px 40px -16px var(--hglow); transition:filter .15s, transform .12s; }
.hmi-sim-fab:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.hmi-sim-fab svg{ width:16px; height:16px; }
.hmix.preview .hmi-sim-fab{ display:none; }

/* Selección por marco (marquee) */
.hmi-marquee{ position:absolute; pointer-events:none; z-index:9; border:1.5px dashed #39e3d8; background:rgba(57,227,216,.07); border-radius:4px; }

/* Menú contextual */
.hmi-ctx-menu{ min-width:172px; background:linear-gradient(180deg, rgba(13,24,40,.98), rgba(9,16,28,.98)); border:1px solid rgba(120,170,220,.28); border-radius:12px; padding:5px; box-shadow:0 24px 50px -18px rgba(0,0,0,.85); }
.hmi-ctx-item{ display:block; width:100%; text-align:left; font-family:var(--body,sans-serif); font-weight:600; font-size:13px; color:var(--htext,#e8f1f8); background:none; border:0; border-radius:8px; padding:9px 13px; cursor:pointer; transition:background .12s; }
.hmi-ctx-item:hover{ background:rgba(57,227,216,.09); color:#39e3d8; }
.hmi-ctx-item.danger{ color:#ff8088; }
.hmi-ctx-item.danger:hover{ background:rgba(255,92,108,.1); }
.hmi-ctx-sep{ height:1px; background:rgba(120,170,220,.18); margin:4px 8px; }

/* Panel derecho · selector segmentado (Con / Sin cuadrícula) */
.hmi-sp-seg{ display:flex; gap:7px; margin-top:7px; }
.hmi-sp-segb{ flex:1; padding:9px 8px; border:1px solid var(--hline2); border-radius:10px; background:rgba(255,255,255,.02); color:var(--hmuted); font-family:var(--body,sans-serif); font-weight:600; font-size:12px; transition:all .15s; }
.hmi-sp-segb:hover{ color:var(--htext); border-color:rgba(57,227,216,.4); }
.hmi-sp-segb.on{ color:var(--hc); border-color:rgba(57,227,216,.5); background:rgba(57,227,216,.1); }

/* Panel de simulación (modo Vista previa · monitor/forzado de tags) */
.hmi-simpanel{ display:flex; flex-direction:column; }
.hmi-sim-ph{ display:flex; align-items:center; gap:8px; font-family:var(--display,sans-serif); font-weight:700; font-size:15px; color:var(--htext); }
.hmi-sim-ph svg{ width:17px; height:17px; color:var(--hc); }
.hmi-sim-psub{ font-size:12px; color:var(--hmuted); line-height:1.5; margin:8px 0 14px; }
.hmi-sim-psub b{ color:var(--htext); }
.hmi-sim-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:9px 11px; margin-bottom:7px; border:1px solid var(--hline2); border-radius:11px; background:rgba(255,255,255,.02); }
.hmi-sim-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.hmi-sim-tag{ font-family:var(--mono,monospace); font-size:12.5px; font-weight:600; color:var(--htext); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hmi-sim-role{ font-family:var(--mono,monospace); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--hdim); }
.hmi-sim-tg{ flex:none; width:46px; height:26px; border-radius:999px; border:1px solid var(--hline2); background:rgba(8,15,26,.7); position:relative; transition:all .18s; }
.hmi-sim-tg .hmi-sim-knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--hdim); transition:all .18s; }
.hmi-sim-tg.on{ border-color:var(--hc); background:rgba(57,227,216,.18); }
.hmi-sim-tg.on .hmi-sim-knob{ left:22px; background:var(--hc); box-shadow:0 0 10px var(--hglow); }
.hmi-sim-empty{ font-size:12.5px; color:var(--hmuted); line-height:1.55; padding:14px; border:1px dashed var(--hline2); border-radius:11px; }
.hmi-sim-empty b{ color:var(--hc); }

/* Mini-lógica de escalera (en vivo, modo simulación) */
.hmi-sim-ladsec{ margin-top:16px; padding-top:14px; border-top:1px solid var(--hline); }
.hmi-sim-ladh{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--hdim); margin-bottom:9px; }
.hmi-sim-rung{ width:100%; height:auto; display:block; background:rgba(6,12,20,.55); border:1px solid var(--hline2); border-radius:10px; padding:3px 4px; margin-bottom:8px; }
.hmi-sim-ladnote{ font-size:11px; color:var(--hdim); line-height:1.5; }
.hmi-sim-ladempty{ font-size:12px; color:var(--hmuted); line-height:1.5; padding:11px; border:1px dashed var(--hline2); border-radius:10px; }
.hmi-sim-ladempty b{ color:var(--hc); }

/* Enlace al Simulador PLC 3D */
.hmi-sim-link{ margin-top:16px; padding:13px; border:1px solid rgba(46,123,255,.34); border-radius:12px; background:linear-gradient(180deg, rgba(46,123,255,.10), rgba(46,123,255,.03)); }
.hmi-sim-link p{ font-size:12px; color:var(--hmuted); line-height:1.5; margin:0 0 11px; }
.hmi-sim-link b{ color:var(--htext); }
.hmi-sim-linkbtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:10px 12px; border-radius:10px; background:linear-gradient(180deg,var(--hb2),var(--hb)); color:#fff; font-family:var(--body,sans-serif); font-weight:700; font-size:12.5px; text-decoration:none; box-shadow:0 10px 24px -12px rgba(46,123,255,.7); transition:filter .15s; }
.hmi-sim-linkbtn:hover{ filter:brightness(1.08); }
.hmi-sim-linkbtn svg{ width:15px; height:15px; }

/* Botón auto-fill de tags */
.hmi-sim-autofill{ margin-top:13px; padding-top:13px; border-top:1px solid var(--hline); }
.hmi-sim-afdet{ font-size:11px; color:var(--hmuted); line-height:1.45; margin-bottom:9px; }
.hmi-sim-afbtn{ display:inline-flex; align-items:center; gap:8px; width:100%; padding:10px 13px; border-radius:11px; border:1px solid rgba(57,227,216,.35); background:rgba(57,227,216,.07); color:var(--hc); font-family:var(--body,sans-serif); font-weight:700; font-size:12.5px; transition:all .15s; }
.hmi-sim-afbtn:hover{ background:rgba(57,227,216,.14); border-color:var(--hc); box-shadow:0 8px 20px -10px var(--hglow); }
.hmi-sim-afbtn svg{ width:15px; height:15px; flex:none; }

/* Fila botón + info (details/summary) */
.hmi-sim-afrow{ display:flex; align-items:flex-start; gap:7px; }
.hmi-sim-afrow .hmi-sim-afbtn{ flex:1; }
.hmi-sim-infowrap{ flex:none; }
.hmi-sim-infobtn{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--hline2); border-radius:10px; background:rgba(255,255,255,.025); color:var(--hdim); cursor:pointer; list-style:none; }
.hmi-sim-infobtn::-webkit-details-marker{ display:none; }
.hmi-sim-infobtn::marker{ display:none; }
.hmi-sim-infobtn svg{ width:15px; height:15px; }
.hmi-sim-infowrap[open] .hmi-sim-infobtn{ color:var(--hc); border-color:rgba(57,227,216,.4); background:rgba(57,227,216,.08); }
.hmi-sim-infotip{ margin-top:9px; padding:13px 14px; border:1px solid var(--hline2); border-radius:11px; background:linear-gradient(180deg,rgba(13,24,40,.98),rgba(9,16,28,.95)); font-size:12px; color:var(--hmuted); line-height:1.55; }
.hmi-sim-infotip b{ color:var(--htext); display:block; margin-bottom:6px; font-size:13px; font-family:var(--display,sans-serif); }
.hmi-sim-infotip p{ margin:0 0 7px; }
.hmi-sim-infotip ul{ margin:6px 0 8px; padding-left:16px; }
.hmi-sim-infotip li{ margin-bottom:4px; }
.hmi-sim-infotip code{ font-family:var(--mono,monospace); color:var(--hc); font-size:11px; }

/* Tag ℹ info inline en la fila del monitor de simulación */
.hmi-sim-tagrow{ display:flex; align-items:center; gap:6px; list-style:none; cursor:pointer; }
.hmi-sim-tagrow::-webkit-details-marker{ display:none; }
.hmi-sim-tagrow::marker{ display:none; }
.hmi-sim-tag-infoic{ flex:none; display:inline-grid; place-items:center; width:17px; height:17px; border:1px solid var(--hline2); border-radius:5px; color:var(--hdim); }
.hmi-sim-tag-infoic svg{ width:11px; height:11px; }
.hmi-sim-tag-infow[open] .hmi-sim-tag-infoic{ color:var(--hc); border-color:rgba(57,227,216,.35); background:rgba(57,227,216,.08); }

/* Lógica Interna Simulada (badge) + señales colapsables */
.hmi-sim-intlogic{ display:flex; align-items:flex-start; gap:10px; padding:11px 13px; margin:4px 0 12px; border:1px solid var(--hline2); border-radius:12px; background:rgba(255,255,255,.02); }
.hmi-sim-intlogic.on{ border-color:rgba(57,227,216,.4); background:radial-gradient(120% 130% at 0% 0%, rgba(57,227,216,.12), transparent 60%), rgba(255,255,255,.02); }
.hmi-sim-intlogic svg{ width:20px; height:20px; flex:none; color:var(--hdim); margin-top:1px; }
.hmi-sim-intlogic.on svg{ color:var(--hc); }
.hmi-sim-il-tx b{ display:block; font-family:var(--display,sans-serif); font-size:13px; color:var(--htext); }
.hmi-sim-il-tx span{ display:block; font-size:11px; color:var(--hmuted); line-height:1.45; margin-top:2px; }
.hmi-sim-sigdet{ margin-top:14px; border-top:1px solid var(--hline); padding-top:10px; }
.hmi-sim-sigdet > summary{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--hdim); cursor:pointer; list-style:none; padding:4px 0; }
.hmi-sim-sigdet > summary::-webkit-details-marker{ display:none; }
.hmi-sim-sigdet > summary::marker{ display:none; }
.hmi-sim-sigdet > summary:hover{ color:var(--hmuted); }
.hmi-sim-sigbody{ margin-top:9px; }

/* Botón Simular falla (modo simulación) */
.hmi-sim-faultbtn{ display:inline-flex; align-items:center; gap:8px; width:100%; justify-content:center; margin-top:9px; padding:10px 13px; border-radius:11px; border:1px solid rgba(245,181,68,.4); background:rgba(245,181,68,.08); color:#F5B544; font-family:var(--body,sans-serif); font-weight:700; font-size:12.5px; transition:all .15s; }
.hmi-sim-faultbtn:hover{ background:rgba(245,181,68,.15); border-color:#F5B544; }
.hmi-sim-faultbtn svg{ width:15px; height:15px; flex:none; }
.hmi-sim-faultbtn.on{ color:#FF5C6C; border-color:rgba(255,92,108,.5); background:rgba(255,92,108,.12); }

/* Steppers de entrada numérica (modo simulación) */
.hw-entry.run .hw-entry-box{ gap:5px; }
.hw-entry-steppers{ display:inline-flex; gap:4px; margin-left:auto; }
.hw-entry-step{ width:24px; height:24px; flex:none; display:grid; place-items:center; border:1px solid var(--hline2,rgba(120,170,220,.22)); border-radius:7px; background:rgba(57,227,216,.08); color:var(--hc,#39e3d8); font-family:var(--mono,monospace); font-size:16px; font-weight:700; line-height:1; cursor:pointer; transition:all .12s; }
.hw-entry-step:hover{ background:rgba(57,227,216,.2); border-color:var(--hc,#39e3d8); }
.hw-entry-step:active{ transform:translateY(1px); }

/* Afordancia de edición del input numérico en simulación (aplica a TODO 'entry') */
.hw-entry.run .hw-entry-box{ cursor:text; transition:border-color .15s, box-shadow .15s; }
.hw-entry.run .hw-entry-box:hover{ border-color:var(--hc,#39e3d8); box-shadow:0 0 0 1px rgba(57,227,216,.22); }
.hw-entry.run .hw-entry-box b{ cursor:text; }
.hw-entry.run .hw-entry-box::after{ content:'TOCAR PARA EDITAR'; position:absolute; left:10px; bottom:-13px; font-family:var(--mono,monospace); font-size:7.5px; letter-spacing:.08em; color:var(--hdim,#6a7e95); opacity:0; transition:opacity .15s; pointer-events:none; white-space:nowrap; }
.hw-entry.run:hover .hw-entry-box::after{ opacity:.9; }

/* Estado de FALLA en el indicador multiestado */
.hw-ms.fault{ color:#fff; background:linear-gradient(180deg, color-mix(in srgb, #FF5C6C 30%, #1a0e12), color-mix(in srgb, #FF5C6C 18%, #14090c)); border-color:color-mix(in srgb, #FF5C6C 55%, #000); animation:hwBlink 1s ease-in-out infinite; letter-spacing:.02em; }