/*
 * Editor de circuitos de fluidos (neumática e hidráulica): estructura, paleta, escalera, panel inferior, propiedades y símbolos.
 * Sólo tokens de /suite/suite.css (claro y oscuro). La usan apps/neumatica/index.html y apps/hidraulica/index.html.
 */
/* ---------- Estructura general ---------- */
html, body { height: 100%; }
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.nm { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nm-tools { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; min-width: 0; overscroll-behavior-x: contain;
  padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
/* Sombra en el borde que aún tiene botones por desplazar (técnica de fondos local/scroll) */
.nm-tools { background:
  linear-gradient(90deg, var(--surface) 35%, transparent) left center / 30px 100% no-repeat local,
  linear-gradient(270deg, var(--surface) 35%, transparent) right center / 30px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 26%, transparent), transparent) left center / 12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 26%, transparent), transparent) right center / 12px 100% no-repeat scroll,
  var(--surface); }
.nm-tools::-webkit-scrollbar { display: none; }
/* Con ratón, si la barra no cabe (ventana angosta) aparece una barra de desplazamiento delgada para alcanzar todos los botones */
@media (pointer: fine) {
  .nm-tools { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  .nm-tools::-webkit-scrollbar { display: block; height: 6px; }
  .nm-tools::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
}
.nm-tools .grp { display: flex; align-items: center; gap: 2px; flex: none; }
.nm-tools .vr { width: 1px; height: 22px; background: var(--line); flex: none; margin: 0 2px; }
.tb { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: transparent; color: var(--ink-2); padding: 6px 8px; border-radius: var(--r-sm); font-size: 13px; white-space: nowrap; }
.tb:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.tb:disabled { opacity: .4; cursor: default; }
.tb svg { width: 16px; height: 16px; flex: none; }
.tb.run { color: var(--ok); }
.tb.on { background: var(--accent-soft); color: var(--ink); border-color: var(--line); }
.tb.muted { color: var(--ink-3); }
.nm-name { min-width: 120px; max-width: 260px; flex: 1 1 160px; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 5px 8px; font-weight: 600; font-size: 13.5px; }
.nm-name:hover, .nm-name:focus { border-color: var(--line-2); background: var(--surface-2); outline: none; }
.nm-stat { font: 500 12px var(--mono); color: var(--ink-2); white-space: nowrap; padding: 0 4px; font-variant-numeric: tabular-nums; }
.nm-stat b { color: var(--ink); font-weight: 600; }
.nm-speed { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 6px; font: 500 12px var(--mono); }
.nm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 256px minmax(0, 1fr) 282px; }

/* ---------- Paleta ---------- */
.nm-pal { background: var(--surface); border-right: 1px solid var(--line); overflow: auto; min-height: 0; }
.dr-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; position: sticky; top: 0; background: var(--surface); z-index: 2; border-bottom: 1px solid var(--line); }
.dr-head h2 { margin: 0; font-size: 13px; font-weight: 650; flex: 1; }
.dr-head .x { display: none; }
.pal-search { position: relative; margin: 8px 10px 4px; }
.pal-q { width: 100%; padding-right: 30px; }
.pal-search .kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 11px var(--mono); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--ink-3); background: var(--surface); pointer-events: none; }
.pal-rec, .pr-grp { padding: 6px 10px 4px; }
.pal-rec .eyebrow, .pr-grp .eyebrow { display: block; margin-bottom: 6px; }
.pal-rec { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.pal-tree { padding: 4px 6px 16px 4px; }
.pt-node { position: relative; }
.pt-head { display: flex; align-items: center; gap: 7px; width: 100%; border: 0; background: transparent; color: var(--ink); padding: 6px 6px; border-radius: 6px; text-align: left; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.pt-node[data-depth="0"] > .pt-head { font-size: 13px; font-weight: 650; background: var(--surface-2); border: 1px solid var(--line); margin-top: 6px; }
.pt-head:hover { background: var(--surface-3); }
.pt-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pt-ex { flex: none; width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 3px; font: 600 12px/1 var(--mono); color: var(--ink-2); background: var(--surface); }
.pt-l { flex: 1; min-width: 0; }
.pt-n { flex: none; font: 500 10.5px var(--mono); color: var(--ink-3); }
.pt-body { margin-left: 11px; padding-left: 8px; border-left: 1px solid var(--line-2); }
.pt-body > .pal-grid { padding: 4px 0 8px; }
.pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; }
.pal-it { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 5px 2px 4px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 7px; color: var(--ink); font-size: 10px; line-height: 1.2; text-align: center; touch-action: none; user-select: none; -webkit-user-select: none; min-height: 66px; min-width: 0; }
.pal-it span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pal-it:hover { border-color: var(--line-2); background: var(--surface-3); }
.pal-it:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pal-it svg { width: 52px; height: 32px; flex: none; overflow: visible; }
.pal-none { margin: 10px 12px; font-size: 12.5px; color: var(--ink-3); }
.pal-tip { position: fixed; z-index: 95; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--shadow-2); padding: 8px 10px; font-size: 12px; line-height: 1.35; pointer-events: none; display: flex; flex-direction: column; gap: 3px; }
.pal-tip[hidden] { display: none; }
.pal-tip b { font-size: 12.5px; }
.pal-tip span { color: var(--ink-2); }
.nm.sim .nm-pal .pal-it { opacity: .45; pointer-events: none; }
.pp .help-l { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.pp textarea.inp { resize: vertical; font: inherit; }

/* ---------- Escenario ---------- */
.nm-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.nm-viewbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.nm-viewbar .seg button { padding: 3px 10px; font-size: 12.5px; }
.nm-viewbar .sp { flex: 1; }
.nm-panes { flex: 1; min-height: 0; display: flex; }
.nm-pane { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; background: var(--canvas); overflow: hidden; }
.nm-pane + .nm-pane { border-left: 1px solid var(--line); }
.nm-panes[data-v="p"] #paneE, .nm-panes[data-v="e"] #paneP { display: none; }
.nm-panes[data-v="b"] #paneP { flex-grow: 1.35; }
#svgP { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; display: block; cursor: default; }
#svgP.panning { cursor: grabbing; }
.zoomer { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 3; }
.zoomer button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; box-shadow: var(--shadow-1); }
.zoomer button:hover { color: var(--ink); background: var(--surface-2); }
.zoomer svg { width: 16px; height: 16px; }
.pane-tag { position: absolute; left: 10px; top: 8px; z-index: 2; pointer-events: none; }
.simbadge { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3; pointer-events: none; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; box-shadow: var(--shadow-1); }
.simbadge.paused { color: var(--warn); }

/* ---------- Escalera ---------- */
#paneE { display: flex; flex-direction: column; }
.lad-tools { flex: none; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--surface); }
.lad-tools .eyebrow { margin-right: 4px; }
.lad-scroll { flex: 1; min-height: 0; overflow: auto; touch-action: pan-x pan-y; }
#svgE { display: block; user-select: none; -webkit-user-select: none; }
.nm.sim .lad-tools .btn { display: none; }
.lad-empty { padding: 26px 18px; color: var(--ink-3); font-size: 13px; max-width: 380px; }

/* ---------- Panel inferior ---------- */
.nm-bottom { flex: none; height: calc(206px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--surface); min-height: 0;
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.nm-bottom.collapsed { height: auto; }
.nm-bottom.collapsed .bt-body { display: none; }
.bt-head { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--line); min-width: 0; }
.bt-tab { border: 0; background: none; padding: 6px 9px; border-radius: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.bt-tab[aria-selected="true"] { background: var(--surface-2); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.bt-tab .n { font: 600 10.5px var(--mono); border-radius: 999px; padding: 0 6px; margin-left: 4px; background: var(--surface-3); color: var(--ink-2); }
.bt-tab .n.err { background: var(--err-soft); color: var(--err); }
.bt-tab .n.warn { background: var(--warn-soft); color: var(--warn); }
.bt-head .sp { flex: 1; }
.bt-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sig-bar { flex: none; display: flex; gap: 5px; align-items: center; padding: 5px 10px; overflow-x: auto; scrollbar-width: thin; }
.sig-bar .chip { cursor: pointer; font-family: var(--mono); white-space: nowrap; }
.sig-bar .chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); border-color: var(--line-2); }
.sig-bar .chip[aria-pressed="false"] { opacity: .6; text-decoration: line-through; }
.dg-wrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
#dg { display: block; width: 100%; }
.msgs { flex: 1; min-height: 0; overflow: auto; padding: 6px 10px; margin: 0; list-style: none; }
.msgs li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: default; }
.msgs li[data-ref] { cursor: pointer; }
.msgs li:hover { background: var(--surface-2); }
.msgs .sv { flex: none; font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 2px 5px; margin-top: 1px; }
.msgs .sv.err { background: var(--err-soft); color: var(--err); }
.msgs .sv.warn { background: var(--warn-soft); color: var(--warn); }
.msgs .sv.ok { background: var(--ok-soft); color: var(--ok); }
.msgs .tm { margin-left: auto; color: var(--ink-3); font: 11px var(--mono); flex: none; }

/* ---------- Propiedades ---------- */
.nm-props { background: var(--surface); border-left: 1px solid var(--line); overflow: auto; min-height: 0; overscroll-behavior: contain;
  display: flex; flex-direction: column; }
/* El título del panel (y su botón Cerrar en celular) queda arriba; el anuncio, debajo del título */
.nm-props > * { flex: none; }
#props { display: contents; }
#props > .dr-head { order: -1; }
/* El anuncio (unidad de ~300 px de alto que se monta al simular) nunca desborda el panel */
.ad-slot { max-width: 100%; min-width: 0; overflow: hidden; }
.ad-slot .ad-card { max-width: 100%; overflow: hidden; }
.ad-slot ins, .ad-slot iframe { max-width: 100% !important; }
.pp { padding: 12px 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.pp h3 { margin: 0; font-size: 14px; }
.pp .sub { color: var(--ink-3); font-size: 12px; margin-top: -8px; }
.pp .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp .acts { display: flex; flex-wrap: wrap; gap: 6px; }
.pp .side { border: 1px solid var(--line); border-radius: 8px; padding: 9px; display: flex; flex-direction: column; gap: 7px; background: var(--surface-2); }
.pp .side .eyebrow { margin-bottom: -2px; }
.pp .chk { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.pp .live { font: 500 12.5px var(--mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.pp .live span { color: var(--ink-3); }
.pp .live b { font-weight: 600; text-align: right; }
.pp p { margin: 0; font-size: 13px; color: var(--ink-2); }
.pp .kbd { font: 11px var(--mono); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; color: var(--ink-2); background: var(--surface-2); }
.pp .tips { font-size: 12.5px; color: var(--ink-2); margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.pp input[type="range"] { width: 100%; accent-color: var(--accent); padding: 0; background: none; border: 0; }
.pp .desc { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px; font-size: 13px; color: var(--ink-2); }

/* ---------- Cajones y botones flotantes (móvil) ---------- */
.fabs { display: none; }
.scrim { display: none; }

/* ---------- Diálogos ---------- */
.ex-list { display: grid; gap: 8px; }
.ex-it { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 11px 12px; color: var(--ink); }
.ex-it:hover { border-color: var(--line-2); background: var(--surface-3); }
.ex-it b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.ex-it span { display: block; font-size: 12.5px; color: var(--ink-2); }
.ex-it .tag { flex: none; font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; color: var(--ink-3); margin-top: 2px; }
.help h3 { font-size: 13px; margin: 14px 0 6px; }
.help h3:first-child { margin-top: 0; }
.help ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.menu { position: fixed; z-index: 70; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-2); padding: 5px; min-width: 220px; display: flex; flex-direction: column; }
.menu button { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.menu button:hover { background: var(--surface-2); }
.menu button small { margin-left: auto; color: var(--ink-3); font: 11px var(--mono); }
.ghost-drag { position: fixed; z-index: 90; pointer-events: none; opacity: .85; transform: translate(-50%, -50%); }
.ghost-drag svg { width: 80px; height: 52px; overflow: visible; }

/* ---------- Símbolos SVG (solo tokens) ---------- */
.sym { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.sym .body { fill: var(--surface); }
.sym .ink { fill: var(--ink); stroke: none; }
.sym .inkf { fill: var(--ink); }
.sym .thin { stroke-width: 1.1; }
.sym .dash { stroke-dasharray: 4 3; stroke-width: 1.2; }
.sym .encl { stroke-dasharray: 6 4; stroke-width: 1; stroke: var(--ink-3); }
.sym .flow { stroke: var(--air); stroke-width: 2.2; }
.sym .flowf { fill: var(--air); stroke: none; }
.sym .thinf { fill: var(--ink); stroke: none; }
.sym .act-on { stroke: var(--elec-on); }
.sym .air-on { stroke: var(--air); }
.sym .mk { stroke: var(--ink-2); stroke-width: 1.2; }
.sym .mk.on { stroke: var(--elec-on); stroke-width: 2; }
.sym .mkf { fill: var(--ink-2); stroke: none; }
.sym .mkf.on { fill: var(--elec-on); }
.sym .rod { fill: url(#nmRod); }
.sym .piston { fill: url(#nmPiston); stroke: var(--ink); }
.sym .barrel { fill: url(#nmBarrel); stroke-width: 1.8; }
.sym .hl { stroke: var(--surface); stroke-opacity: .55; stroke-width: 1; }
.sym .chamber { fill: var(--air); stroke: none; }
.sym .sol.act-on { fill: var(--elec-on); fill-opacity: .22; stroke-width: 2.1; }
/* Degradados metálicos definidos con tokens (claro y oscuro) */
.symg .g-edge { stop-color: var(--surface-3); }
.symg .g-hi { stop-color: var(--surface); }
.symg .g-mid { stop-color: var(--surface-2); }
.symg .g-dark { stop-color: var(--ink-3); }
.symg .g-pd { stop-color: var(--ink-2); }
.symg .g-pm { stop-color: var(--ink-3); }
.sym .hit { fill: transparent; stroke: none; cursor: pointer; }
.sym .hit:hover { fill: var(--accent-soft); fill-opacity: .6; }
.sym .elec { stroke: var(--elec); }
.sym .elec.on { stroke: var(--elec-on); }
/* Símbolos ampliados (componentes.js) */
.sym .stx { stroke: none; fill: var(--ink); font: 600 10px var(--mono); }
.sym .stx.sm { fill: var(--ink-3); font-weight: 500; }
.sym .stx.tb-l { fill: var(--ink-3); font-weight: 500; }
.sym .stx.tb-v { font-family: var(--font); }
.sym .mtxt { stroke: none; fill: var(--ink); font-family: var(--font); font-weight: 500; }
.sym .frame { fill: none; stroke: var(--ink-2); stroke-width: 1.4; }
.sym .lit-air { fill: var(--air); fill-opacity: .35; }
.sym .lit-el { fill: var(--elec-on); fill-opacity: .25; }
.sym .lit-lamp { fill: var(--warn); fill-opacity: .55; }
.sym .ring { fill: var(--surface-3); stroke: var(--ink-2); stroke-width: 1; }
.sym .ring.on { fill: var(--elec-on); stroke: var(--elec-on); }
.sym .el { stroke: var(--elec); }
.sym .el-on { stroke: var(--elec-on); }
.sym .blade { stroke: var(--ink); stroke-width: 1.8; }
.sym .mech { stroke-dasharray: 3 2.5; stroke-width: 1; stroke: var(--ink-2); }
.sym .estop { fill: var(--err); stroke: var(--err); }
.sym .coil.on { fill: var(--elec-on); fill-opacity: .25; stroke: var(--elec-on); }
.sym .rail { stroke: var(--ink-2); stroke-width: 3; }
.sym .rail.p { stroke: var(--err); }
.sym .rail.z { stroke: var(--info); }
.sym .edot { fill: var(--elec); }
.sym .edot.p { fill: var(--err); }
.sym .edot.z { fill: var(--info); }
.sym .gstep { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; }
.sym .gstep.thin { stroke-width: 1.1; }
.sym .gstep.on { fill: var(--accent-soft); stroke: var(--accent); }
.sym .glink { stroke: var(--ink); stroke-width: 1.4; }
.sym .gbar { stroke: var(--ink); stroke-width: 3.2; }
.sym .gbar.en { stroke: var(--warn); }
.sym .gbar.fire { stroke: var(--ok); }
.gridbg { fill: url(#nmGrid); }
.grid-dot { fill: var(--grid-2); }
.tube { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linejoin: round; }
.tube.on { stroke: var(--air); stroke-width: 3; }
.tube.vac { stroke: var(--info); stroke-width: 2.6; stroke-dasharray: 6 4; }
.tube.sel { stroke: var(--accent); stroke-width: 2.4; }
.tube.sel.on { stroke: var(--air); stroke-width: 3.4; }
.tube.pil { stroke-dasharray: 5 3; }
.tube.pil.on { stroke-dasharray: none; }
/* Flujo de aire animado sobre la manguera: trazos claros que avanzan en el sentido del aire */
.tube-flow { fill: none; stroke: var(--surface); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 9; pointer-events: none; }
.tube-flow.k-x { stroke: var(--air); stroke-width: 2.4; stroke-dasharray: 4 10; }
.tube-flow.k-v { stroke: var(--info); stroke-width: 2.2; stroke-dasharray: 2 12; }
.tube-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }
/* Cables eléctricos (rojo +24 V, azul 0 V al simular) y enlaces del GRAFCET */
.wire { fill: none; stroke: var(--elec); stroke-width: 1.4; stroke-linejoin: miter; }
.wire.p { stroke: var(--err); stroke-width: 2.2; }
.wire.z { stroke: var(--info); stroke-width: 1.8; }
.wire.sel, .glink.sel { stroke: var(--accent); stroke-width: 2.4; }
.wire-cur { fill: none; stroke: var(--surface); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 2.5 8.5; pointer-events: none; opacity: .85; }
.glink { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.port.el { fill: var(--surface); stroke: var(--elec); }
.port.gp { fill: var(--surface); stroke: var(--ink-2); }
.jdot { fill: var(--ink-3); }
.jdot.on { fill: var(--air); }
.jdot.vac { fill: var(--info); }
.lbl { font: 600 11px var(--mono); fill: var(--ink); paint-order: stroke; stroke: var(--canvas); stroke-width: 3px; stroke-linejoin: round; }
.lbl.sm { font-size: 9.5px; font-weight: 500; fill: var(--ink-3); }
.lbl.val { font-weight: 600; fill: var(--air); }
.lbl.mk { font-size: 10px; font-weight: 600; fill: var(--ink-2); }
.lbl.mk.on { fill: var(--elec-on); }
.lbl.coil { fill: var(--elec); font-size: 10.5px; }
.lbl.el { fill: var(--elec); }
.lbl.pin { font-size: 8px; font-weight: 500; fill: var(--ink-3); }
.lbl.gtx { font-family: var(--mono); font-size: 11px; font-weight: 500; }
.lbl.gtx.on { fill: var(--ok); font-weight: 600; }
.lbl.gq { font-size: 11px; }
.port { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.1; }
.port-hit { fill: transparent; stroke: none; cursor: crosshair; }
.port-hit:hover + .port, .port.arm { fill: var(--accent); stroke: var(--accent); }
.selbox { fill: var(--accent-soft); fill-opacity: .35; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.wire-tmp { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 4; pointer-events: none; }
.comp { cursor: move; }
.nm.sim .comp { cursor: default; }
/* Escalera */
.lad { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; }
.lad.on { stroke: var(--elec-on); stroke-width: 2.6; }
.lad-rail { stroke: var(--ink-2); stroke-width: 2.4; }
.lad-sym { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; }
.lad-sym.on { stroke: var(--elec-on); }
.lad-fill { fill: var(--surface); }
.lad-fill.on { fill: var(--elec-on); fill-opacity: .22; }
.lad-t { font: 600 11px var(--mono); fill: var(--ink); }
.lad-t.sm { font-size: 9px; font-weight: 500; fill: var(--ink-3); }
.lad-t.rail { fill: var(--ink-2); font-size: 10.5px; }
.lad-hit { fill: transparent; cursor: pointer; }
.lad-hit:hover { fill: var(--accent-soft); fill-opacity: .7; }
.lad-sel { fill: none; stroke: var(--accent); stroke-dasharray: 4 3; stroke-width: 1.2; pointer-events: none; }
.lad-cur { fill: none; stroke: var(--surface); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2.5 8.5; pointer-events: none; opacity: .9; }
.lad-open { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; }
.lad-push { cursor: pointer; }
/* Fase 3: indicadores, tablas y figuras del plano, GRAFCET parcial y enlace con el PLC */
.sym .lit-on { fill: var(--elec-on); stroke: var(--elec-on); stroke-width: 1; }
.sym .lit-off { fill: var(--surface-3); stroke: var(--ink-3); stroke-width: .8; }
.sym .gpart { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 8 4; }
.sym .gpart.on { stroke: var(--warn); stroke-width: 1.8; }
.sym .grid-l { stroke: var(--line); stroke-width: .8; }
.sym .shape { fill: none; stroke: var(--ink-2); stroke-width: 1.6; }
.sym .shape.dsh { stroke-dasharray: 7 4; }
.sym .shape.fil { fill: var(--accent-soft); fill-opacity: .45; }
.sym .dashr { stroke-dasharray: 5 4; stroke: var(--ink-3); }
.sym .el-on { fill: none; }
.lnk-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 600 11.5px var(--mono); white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.lnk-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.lnk-chip.on { color: var(--ok); border-color: var(--ok); }
.lnk-chip.on i { background: var(--ok); }
.lnk-chip.wait { color: var(--warn); border-color: var(--warn); }
.lnk-chip.wait i { background: var(--warn); }
.lnk-chip span { overflow: hidden; text-overflow: ellipsis; }
.img-f { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.img-f label.btn { cursor: pointer; position: relative; }
.img-f label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.img-f label.btn.dis { opacity: .5; pointer-events: none; }
.img-f .vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.fs-dlg p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.fs-dlg ol { margin: 0 0 10px; padding-left: 20px; font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.fs-dlg .fs-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }

/* ---------- Adaptación ---------- */
/* Barra de herramientas: primero se quitan las etiquetas de los botones de archivo y luego las demás opcionales,
   para que todo quepa sin desplazar en 1366 px y en iPad horizontal (los botones conservan su title). */
@media (max-width: 1440px) { .nm-tools > .grp:first-child .t.opt { display: none; } }
@media (max-width: 1280px) { .tb .t.opt { display: none; } }
@media (max-width: 1180px) {
  .nm-body { grid-template-columns: 200px minmax(0, 1fr) 256px; }
}
@media (max-width: 1180px) and (pointer: coarse) {
  /* Editar/Simular repite lo que hacen ▶ Iniciar y ■ Detener: en pantallas táctiles medianas se oculta para que quepa la barra */
  #modeSeg { display: none; }
  .nm-name { min-width: 96px; }
}
@media (max-width: 860px) {
  .nm-body { grid-template-columns: minmax(0, 1fr); }
  .nm-pal, .nm-props { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-height: 64vh; max-height: 64dvh; border: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-2); transform: translateY(105%); transition: transform .22s ease; padding-bottom: env(safe-area-inset-bottom, 0px); visibility: hidden; overscroll-behavior: contain; }
  .nm-pal.open, .nm-props.open { transform: none; visibility: visible; }
  /* Primero los controles de simulación; lo demás se alcanza desplazando la barra */
  #modeSeg { display: none; }
  #modeSeg + .grp { order: -3; }
  .nm-tools > .vr:nth-child(4) { order: -2; }
  #stat { order: 5; }
  .dr-head .x { display: inline-flex; }
  .pal-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .pal-it svg { width: 64px; height: 40px; }
  .scrim.open { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(10, 13, 18, .32); }
  .fabs { display: flex; gap: 6px; position: absolute; left: 10px; bottom: 10px; z-index: 4; }
  .fabs button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 8px 13px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-1); }
  .fabs button svg { width: 16px; height: 16px; }
  .fabs button.hl { border-color: var(--accent); }
  .nm.sim .fabs .f-pal { display: none; }
  .tb .t { display: none; }
  .tb .t.keep { display: inline; }
  .nm-bottom { height: calc(176px + env(safe-area-inset-bottom, 0px)); }
  .nm-panes[data-v="b"] { flex-direction: column; }
  .nm-panes[data-v="b"] .nm-pane + .nm-pane { border-left: 0; border-top: 1px solid var(--line); }
  .nm-name { min-width: 110px; }
  .zoomer { bottom: 10px; }
  .bt-head { gap: 4px; padding: 4px 6px; }
  .bt-tab { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
  .bt-head .sp { flex: 1 1 0; min-width: 0; }
  .lad-tools { padding-left: max(8px, env(safe-area-inset-left, 0px)); }
}
@media (max-width: 420px) {
  .bt-tab[data-tab="dg"] { font-size: 0; }
  .bt-tab[data-tab="dg"]::before { content: attr(data-short); font-size: 12.5px; }
}
/* Celular en horizontal: la barra de vistas sube junto a la de herramientas (una fila menos), «Ambos» va lado a lado
   y los cajones salen por los costados a toda la altura. */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 520px) {
  .nm { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; }
  .nm-body, .nm-stage { display: contents; }
  .nm-tools { grid-area: 1 / 1 / 2 / 2; }
  .nm-viewbar { grid-area: 1 / 2 / 2 / 3; background: var(--surface); border-left: 1px solid var(--line); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .nm-viewbar .sp { display: none; }
  .nm-panes { grid-area: 2 / 1 / 3 / 3; }
  .nm-bottom { grid-area: 3 / 1 / 4 / 3; height: calc(38dvh + env(safe-area-inset-bottom, 0px)); }
  .zoomer { flex-direction: row; right: max(10px, env(safe-area-inset-right, 0px)); }
  .lad-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lad-tools::-webkit-scrollbar { display: none; }
  .lad-tools > * { flex: none; }
  .nm-panes[data-v="b"] { flex-direction: row; }
  .nm-panes[data-v="b"] .nm-pane + .nm-pane { border-top: 0; border-left: 1px solid var(--line); }
  .nm-pal, .nm-props { top: 0; bottom: 0; max-height: none; width: min(400px, 62vw); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .nm-pal { left: 0; right: auto; border-radius: 0 16px 16px 0; transform: translateX(-105%); padding-left: env(safe-area-inset-left, 0px); }
  .nm-props { left: auto; right: 0; border-radius: 16px 0 0 16px; transform: translateX(105%); padding-right: env(safe-area-inset-right, 0px); }
  .nm-pal .pal-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .fabs { left: max(10px, env(safe-area-inset-left, 0px)); }
}
/* Pantallas táctiles: blancos de al menos 40 px y campos de 16 px (sin zoom de iOS al enfocarlos) */
@media (pointer: coarse) {
  .nm-tools { gap: 4px; padding-top: 4px; padding-bottom: 4px; }
  .tb { min-height: 40px; min-width: 40px; justify-content: center; padding: 6px 7px; }
  .nm-speed { min-height: 40px; font-size: 16px; padding: 4px 2px 4px 6px; }
  .nm-name { min-height: 40px; font-size: 16px; }
  .nm-viewbar { padding-top: 4px; padding-bottom: 4px; }
  .ad-slot .ad-foot { padding: 12px 0; margin-top: 0; }
  .nm-viewbar .seg button { padding: 3px 12px; font-size: 13px; }
  .zoomer { gap: 6px; }
  .zoomer button { width: 44px; height: 44px; }
  .fabs button { min-height: 44px; padding: 8px 15px; }
  .bt-tab { min-height: 40px; }
  .sig-bar .chip { min-height: 36px; padding: 4px 11px; }
  .msgs li { padding: 10px 8px; }
  .pp .chk { min-height: 36px; }
  .pp .chk input { width: 20px; height: 20px; margin: 0; flex: none; }
  .pp input[type="range"] { height: 32px; }
  .menu button { min-height: 44px; }
  .pt-head { min-height: 40px; }
  .lad-tools { gap: 6px; }
}