/* CodeGO Industrial · acabado del arte de planta 5.8.
   Los dibujos viven en plant-art.js (SVG en píxeles reales); aquí están los materiales, los estados y el movimiento.
   El motor sigue moviendo todo con variables CSS (--belt-offset, --travel-position, --arm-angle, …) y clases de estado (.is-active, …).
   Los colores operativos (señal activa, fallo, aviso) conservan su significado; el resto es acero neutro. */

:root, :host {
  --pa-edge: rgb(20 32 54 / .72);
  --pa-s1: #f6f8fc; --pa-s2: #e4eaf3; --pa-s3: #cbd5e3; --pa-s4: #a9b6c9; --pa-s5: #7d8ea6; --pa-s6: #566882; --pa-s7: #344560; --pa-s8: #1f2d45;
  --pa-rubber-1: #3a4b66; --pa-rubber-2: #243247; --pa-rubber-3: #172236;
  --pa-yellow: #f2b705; --pa-yellow-d: #c18f00;
  --pa-fluid: #27a3dc; --pa-fluid-d: #1a76a6;
  --pa-led-off: #b4bfd0; --pa-ok: #19b36b; --pa-fault: #e04437; --pa-warn: #f1a21b;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
.machine-v58 { position: absolute; inset: 0; }
.machine-v58 .pa-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; pointer-events: none; }
.pa-svg :where(path, rect, circle, ellipse, polygon) { stroke: var(--pa-edge); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.pa-svg .ns { stroke: none; }
.pa-svg .hi { fill: none; stroke: rgb(255 255 255 / .62); }
.machine-v58 [hidden] { display: none !important; }

/* ── Materiales ─────────────────────────────────────────────────────────────── */
.pa-steel { fill: url(#pa-steel-v); }
.pa-steel-h { fill: url(#pa-steel-h); }
.pa-cyl-h { fill: url(#pa-cyl-h); }
.pa-cyl-v { fill: url(#pa-cyl-v); }
.pa-dark { fill: url(#pa-dark-v); }
.pa-dark-h { fill: url(#pa-dark-h); }
.pa-rubber { fill: url(#pa-rubber-v); }
.pa-rubber-ring { fill: var(--pa-rubber-2); }
.pa-yellow { fill: url(#pa-yellow-v); }
.pa-hazard { fill: url(#pa-hazard); }
.pa-paint { fill: var(--component-color); }
.pa-shade-o { fill: url(#pa-shade); }
.pa-glass { fill: url(#pa-glass); stroke: rgb(20 32 54 / .35); }
.pa-ground { fill: url(#pa-ground); }
.pa-bolt { fill: var(--pa-s2); stroke: var(--pa-s6); stroke-width: .8; }
.pa-groove { fill: none; stroke: rgb(20 32 54 / .32); }
.pa-fin { fill: none; stroke: rgb(20 32 54 / .3); }
.pa-roller-dot { fill: var(--pa-s2); stroke: rgb(20 32 54 / .4); }
.pa-cleats { fill: url(#pa-cleat); }

/* ── Banda transportadora: tacos y poleas giran con el desplazamiento real de la banda ── */
.belt-treads { transform: translateX(var(--belt-offset, 0px)); }
.belt-roller { transform: rotate(var(--pulley-angle, 0deg)); }
.scene-object.is-jammed .belt-treads { opacity: .55; }
.belt-jam-badge, .jam-warning { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); padding: 2px 7px; border-radius: var(--r-xs); background: var(--fault); color: var(--n-0); font: 700 var(--fs-2xs)/1.2 var(--font-ui); letter-spacing: .04em; white-space: nowrap; animation: pa-blink 1s steps(2, jump-none) infinite; }
@keyframes pa-blink { 50% { opacity: .55; } }

/* ── Caja ───────────────────────────────────────────────────────────────────── */
.machine-cargo { filter: drop-shadow(0 2px 1.5px rgb(20 32 54 / .34)); }
.pa-crate { fill: var(--component-color); }
.pa-crate-rim { fill: none; stroke: rgb(255 255 255 / .3); }
.pa-crate-rib { fill: rgb(0 0 0 / .15); }
.pa-crate-slot { fill: rgb(20 32 54 / .55); }
.pa-label { fill: #f7f9fc; stroke: rgb(20 32 54 / .35); }
.pa-label-lines { fill: none; stroke: rgb(20 32 54 / .45); }
.machine-feed-stack { fill: var(--crate-tint, var(--component-color)); }

/* ── Desviador: la cuchilla gira hacia el ramal elegido (A en reposo, B con la salida activa) ── */
.diverter-blade { transform: rotate(var(--div-a, -18deg)); transition: transform var(--dur-3) cubic-bezier(.3, 1.18, .5, 1); }
.scene-object.is-active .diverter-blade { transform: rotate(var(--div-b, 18deg)); }
.diverter-ram { transition: transform var(--dur-3) var(--ease-out); }
.scene-object.is-active .diverter-ram { transform: translateX(8px); }
.diverter-route-badge, .chute-counter-badge { position: absolute; padding: 2px 6px; border-radius: var(--r-xs); background: var(--n-950); color: var(--z-on-dark); font: 500 var(--fs-2xs)/1.3 var(--font-mono); letter-spacing: .02em; white-space: nowrap; pointer-events: none; }
.diverter-route-badge { left: 6px; bottom: 4px; }
.chute-counter-badge { right: 4px; bottom: 0; }

/* ── Rack ───────────────────────────────────────────────────────────────────── */
.pa-rack-back { fill: rgb(20 32 54 / .07); stroke: none; }
.pa-brace { fill: none; stroke: rgb(20 32 54 / .2); stroke-width: 2.4; }
.pa-cell { fill: rgb(20 32 54 / .05); stroke: rgb(20 32 54 / .14); }
.pa-beam { fill: url(#pa-steel-v); }
.pa-cell-led { fill: var(--pa-led-off); transition: fill var(--dur-3) var(--ease-out); }
.rack-cell.filled .pa-cell-led { fill: var(--pa-ok); }
.rack-cell.filled .pa-cell { fill: color-mix(in srgb, var(--accent-500) 9%, transparent); }
.rack-top-banner { position: absolute; left: 11px; right: 11px; top: 3px; height: 16px; display: flex; align-items: center; justify-content: space-between; color: var(--n-900); pointer-events: none; }
.rack-count { font: 600 var(--fs-xs)/1 var(--font-mono); }
.rack-full-indicator { padding: 2px 6px; border-radius: var(--r-xs); background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok-line); font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .04em; }
.scene-object.rack-full .rack-full-indicator { background: var(--fault-bg); color: var(--fault-ink); border-color: var(--fault-line); }

/* ── Sensores ───────────────────────────────────────────────────────────────── */
.pa-field { fill: rgb(242 183 5 / .06); stroke: rgb(20 32 54 / .22); stroke-dasharray: 4 4; }
.pa-lens { fill: #0e1a2e; }
.pa-lens-color { fill: var(--detect-color, #e53935); }
.pa-spec { fill: rgb(255 255 255 / .75); }
.sensor-led { fill: var(--pa-led-off); stroke: rgb(20 32 54 / .5); transition: fill var(--dur-2) var(--ease-out); }
.scene-object.is-active .sensor-led, .scene-object.is-detecting .sensor-led { fill: var(--pa-ok); }
.laser-line { fill: none; stroke: var(--detect-color, #e53935); stroke-width: 1.6; opacity: .5; transition: opacity var(--dur-2) var(--ease-out), stroke-width var(--dur-2) var(--ease-out); }
.laser-spot { fill: var(--detect-color, #e53935); opacity: .7; }
.scene-object.is-active .laser-line, .scene-object.is-detecting .laser-line { opacity: 1; stroke-width: 2.4; filter: drop-shadow(0 0 3px var(--detect-color, #e53935)); }
.optical-cone { fill: color-mix(in srgb, var(--detect-color, #e53935) 20%, transparent); stroke: none; transition: fill var(--dur-2) var(--ease-out); }
.scene-object.is-detecting .optical-cone { fill: color-mix(in srgb, var(--detect-color, #e53935) 46%, transparent); }
.detection-label { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 2px 6px; border-radius: var(--r-xs); background: var(--n-950); color: var(--z-on-dark); font: 700 var(--fs-2xs)/1.2 var(--font-ui); letter-spacing: .05em; pointer-events: none; }
.detection-label:empty { display: none; }

/* ── Dosificador ────────────────────────────────────────────────────────────── */
.pa-hopper-in { fill: rgb(20 32 54 / .1); stroke: none; }
.dispenser-machine { position: absolute; inset: 0; cursor: default; }
#plant-stage[data-mode="operate"] .dispenser-machine { cursor: pointer; }
.hopper-label, .hopper-cadence { position: absolute; top: 2px; height: 8px; font: 700 var(--fs-2xs)/8px var(--font-ui); letter-spacing: .04em; color: var(--n-900); pointer-events: none; }
.hopper-label { left: 14px; } .hopper-cadence { right: 14px; font-family: var(--font-mono); font-weight: 500; }
.dispenser-ready-box { position: absolute; left: 10px; bottom: 30px; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgb(20 32 54 / .5); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .16); }
.dispenser-chute-gate { position: absolute; left: calc((var(--w) - var(--neck)) / 2 - 4px); top: calc(var(--h) - 40px); width: calc(var(--neck) + 8px); height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 7px; color: var(--z-on-dark); font: 600 var(--fs-2xs)/1 var(--font-mono); pointer-events: none; }
.gate-sensor-light { width: 7px; height: 7px; border-radius: 50%; background: var(--pa-ok); box-shadow: 0 0 0 2px rgb(25 179 107 / .25); flex: none; }
.scene-object.mouth-blocked .gate-sensor-light { background: var(--pa-warn); box-shadow: 0 0 0 2px rgb(241 162 27 / .3); }
.dispenser-piston { transition: transform var(--dur-3) var(--ease-out); }
.scene-object.dispensing .dispenser-piston { transform: translateX(10px); }

/* ── Movimiento reducido: el estado sigue visible sin giros ni parpadeos ──────── */
@media (prefers-reduced-motion: reduce) {
  .belt-roller, .belt-treads { transform: none; }
  .belt-jam-badge, .jam-warning { animation: none; }
  .diverter-blade, .diverter-ram, .dispenser-piston { transition: none; }
}

/* ── Mandos de cuadro ───────────────────────────────────────────────────────── */
.pa-inset { fill: rgb(20 32 54 / .06); stroke: none; }
.pa-bolt-slot { fill: none; stroke: var(--pa-s6); stroke-width: .8; }
.machine-v58 .physical-control:not(.arcade-control) {
  position: absolute; left: 50%; top: var(--cy, 44px); width: 44px; height: 44px; min-height: 0; padding: 0; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--component-color) 58%, #fff) 0%, var(--component-color) 48%, color-mix(in srgb, var(--component-color) 72%, #000) 100%);
  color: #fff; font: 800 var(--fs-xs)/1 var(--font-ui); letter-spacing: .02em; text-shadow: 0 1px 1px rgb(0 0 0 / .3);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--component-color) 50%, #000), inset 0 -3px 4px rgb(0 0 0 / .22), inset 0 2px 2px rgb(255 255 255 / .32);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), filter var(--dur-2) var(--ease-out);
}
.machine-v58 .physical-control:not(.arcade-control):hover { filter: brightness(1.06); }
.scene-object.is-pressed .machine-v58 .physical-control:not(.arcade-control) { transform: translate(-50%, calc(-50% + 3px)); filter: brightness(.88); box-shadow: 0 0 0 color-mix(in srgb, var(--component-color) 50%, #000), inset 0 -2px 3px rgb(0 0 0 / .3), inset 0 2px 2px rgb(255 255 255 / .2); }
.machine-v58 .physical-control.emergency-cap:not(.arcade-control) { width: 54px; height: 54px; font-size: var(--fs-sm); background: radial-gradient(circle at 34% 28%, #ff8a7c 0%, #d4382c 46%, #8c1d16 100%); box-shadow: 0 5px 0 #7a1a14, inset 0 -4px 6px rgb(0 0 0 / .3), inset 0 3px 3px rgb(255 255 255 / .35); }
.scene-object.is-pressed .machine-v58 .physical-control.emergency-cap:not(.arcade-control) { transform: translate(-50%, calc(-50% + 5px)); box-shadow: 0 0 0 #7a1a14, inset 0 -3px 5px rgb(0 0 0 / .35); }
.machine-v58 .physical-control.selector-control:not(.arcade-control) { background: radial-gradient(circle at 34% 28%, #6b7e9b 0%, #34455f 56%, #1f2d45 100%); box-shadow: 0 3px 0 #141f33, inset 0 -3px 4px rgb(0 0 0 / .3), inset 0 2px 2px rgb(255 255 255 / .22); }
.selector-lever { position: absolute; left: 50%; top: 50%; width: 7px; height: 34px; margin: -17px 0 0 -3.5px; border-radius: 3.5px; background: linear-gradient(90deg, #fff, #cfd8e6); box-shadow: 0 1px 2px rgb(0 0 0 / .35); transform: rotate(-38deg); transition: transform var(--dur-3) var(--ease-out); }
.scene-object.is-pressed .selector-lever { transform: rotate(38deg); }
.contact-mark { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 500 8px/1 var(--font-mono); letter-spacing: .03em; color: var(--n-700); text-transform: uppercase; pointer-events: none; }

/* ── Guardamotor ────────────────────────────────────────────────────────────── */
.breaker-spec { position: absolute; left: 16px; right: 16px; top: 9px; height: 18px; display: flex; align-items: center; justify-content: center; font: 600 8px/1 var(--font-mono); letter-spacing: .04em; color: var(--n-900); pointer-events: none; }
.machine-v58 .breaker-lever.physical-control { position: absolute; left: 28px; top: 42px; width: calc(var(--w) - 56px); height: 66px; transform: none; border: 0; border-radius: 5px; background: none; box-shadow: none; padding: 0; filter: none; }
.machine-v58 .breaker-lever.physical-control:hover { filter: none; }
.breaker-lever span { position: absolute; left: 50%; top: 36px; width: 26px; height: 26px; margin-left: -13px; border-radius: 5px; background: linear-gradient(#f2f5fa, #b4bfd2); box-shadow: 0 2px 0 #5d6e8a, inset 0 1px 0 #fff; transition: top var(--dur-3) var(--ease-out); }
.breaker-lever span::after { content: ""; position: absolute; left: 6px; right: 6px; top: 11px; height: 3px; border-radius: 2px; background: rgb(20 32 54 / .35); }
.scene-object.is-active .breaker-lever span { top: 4px; }
.breaker-lever b { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 600 8px/1 var(--font-mono); letter-spacing: .03em; color: var(--z-on-dark); }
.scene-object.is-tripped .breaker-lever span { top: 20px; }
.pa-trip-led { fill: var(--pa-led-off); transition: fill var(--dur-2) var(--ease-out); }
.scene-object.is-tripped .pa-trip-led { fill: var(--pa-fault); filter: drop-shadow(0 0 4px var(--pa-fault)); }
.trip-control { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); height: 12px; padding: 0 8px; border: 0; border-radius: 3px; background: var(--fault); color: var(--n-0); font: 700 8px/12px var(--font-mono); letter-spacing: .04em; cursor: pointer; }
#plant-stage[data-mode="edit"] .trip-control { pointer-events: none; }

/* ── Piloto luminoso ────────────────────────────────────────────────────────── */
.pilot-lens { position: absolute; left: calc(var(--cx) - 22px); top: calc(var(--cy) - 22px); width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--component-color) 38%, #fff) 0%, color-mix(in srgb, var(--component-color) 55%, #9aa6ba) 48%, color-mix(in srgb, var(--component-color) 40%, #3a465c) 100%); box-shadow: inset 0 -3px 5px rgb(0 0 0 / .26), inset 0 2px 3px rgb(255 255 255 / .38); filter: saturate(.3) brightness(.86); transition: filter var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.scene-object.is-active .pilot-lens { filter: none; box-shadow: 0 0 16px 4px color-mix(in srgb, var(--component-color) 62%, transparent), inset 0 -3px 5px rgb(0 0 0 / .2), inset 0 2px 3px rgb(255 255 255 / .45); }
.pilot-state { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--n-700); pointer-events: none; }
.scene-object.is-active .pilot-state { color: var(--ok-ink); }

/* ── Torreta y semáforo ─────────────────────────────────────────────────────── */
.signal-light.red { --lens: #e04437; } .signal-light.amber { --lens: #f1a21b; } .signal-light.green { --lens: #19b36b; }
.pa-lens-body { fill: color-mix(in srgb, var(--lens, #999) 30%, #8996ad); transition: fill var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out); }
.scene-object.light-red .signal-light.red .pa-lens-body, .scene-object.light-amber .signal-light.amber .pa-lens-body, .scene-object.light-green .signal-light.green .pa-lens-body { fill: var(--lens); filter: drop-shadow(0 0 7px var(--lens)); }
.pa-visor { fill: none; stroke: rgb(20 32 54 / .55); stroke-width: 2; }
.pa-wave { fill: none; stroke: var(--pa-warn); stroke-width: 2.4; opacity: 0; }
.scene-object.sounding .pa-wave { opacity: 1; animation: pa-wave 1s ease-out infinite; }
@keyframes pa-wave { 0% { opacity: .25; } 50% { opacity: 1; } 100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .scene-object.sounding .pa-wave { animation: none; } .selector-lever, .breaker-lever span { transition: none; } }

/* ── Motor y bomba ──────────────────────────────────────────────────────────── */
.pa-blade { fill: var(--pa-s2); stroke: rgb(20 32 54 / .5); }
.pa-bore { fill: #101b30; }
.machine-rotor { transform: rotate(var(--shaft-angle, 0deg)); }
.motor-running-indicator { fill: var(--pa-led-off); stroke: rgb(20 32 54 / .5); transition: fill var(--dur-2) var(--ease-out); }
.scene-object.is-active .motor-running-indicator { fill: var(--pa-ok); filter: drop-shadow(0 0 3px var(--pa-ok)); }
.machine-readout { position: absolute; left: 4px; bottom: 0; display: flex; align-items: center; gap: 4px; pointer-events: none; }
.motor-temp-badge, .pump-temp-badge, .pump-flow-reading { padding: 2px 5px; border-radius: var(--r-xs); background: var(--n-0); border: 1px solid var(--n-200); color: var(--n-700); font: 500 var(--fs-2xs)/1 var(--font-mono); }
.scene-object.is-overheated .motor-temp-badge, .scene-object.is-overheated .pump-temp-badge { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.scene-object.is-burned .motor-temp-badge, .scene-object.is-burned .pump-temp-badge { background: var(--fault-bg); border-color: var(--fault-line); color: var(--fault-ink); }
.scene-object.is-burned .pa-svg { filter: grayscale(.7) brightness(.82); }
.scene-object.is-overheated .pa-paint { filter: saturate(1.2) brightness(1.06); }
.motor-burnt-banner, .pump-burnt-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; border: 1px solid var(--fault-line); border-radius: var(--r-sm); background: color-mix(in srgb, var(--fault-bg) 94%, transparent); color: var(--fault-ink); font: 700 var(--fs-2xs)/1.2 var(--font-ui); text-align: center; }
.repair-btn { min-height: 0; padding: 3px 8px; border: 1px solid var(--fault-line); border-radius: var(--r-xs); background: var(--n-0); color: var(--fault-ink); font: 700 var(--fs-2xs)/1 var(--font-ui); cursor: pointer; }

/* ── Cilindro ───────────────────────────────────────────────────────────────── */
.cylinder-rod { transform: translateX(calc(var(--travel-position, 0) * var(--stroke, 80px))); }
.machine-air-port { position: absolute; width: 12px; height: 12px; text-align: center; font: 700 var(--fs-2xs)/12px var(--font-ui); color: var(--n-700); pointer-events: none; }
.limit-switch { position: absolute; padding: 1px 4px; border-radius: var(--r-xs); border: 1px solid var(--n-300); background: var(--n-0); color: var(--n-700); font: 600 var(--fs-2xs)/1.3 var(--font-mono); pointer-events: none; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.limit-switch.limit-active { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.actuator-fault { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); padding: 2px 6px; border-radius: var(--r-xs); background: var(--fault); color: var(--n-0); font: 700 var(--fs-2xs)/1.2 var(--font-ui); white-space: nowrap; }
.actuator-fault:empty { display: none; }

/* ── Elevador de pallets ────────────────────────────────────────────────────── */
.pallet-platform { transform: translateY(calc(var(--travel-position, 0) * var(--lift-travel, 260px) * -1)); }
.lift-chain { transform: scaleY(calc(1 - var(--travel-position, 0) * var(--chain-k, .9))); }
.pa-chain { fill: url(#pa-dark-h); }
.pa-groove-bar { fill: rgb(20 32 54 / .18); }

/* ── Brazo ──────────────────────────────────────────────────────────────────── */
.robot-link { transform: rotate(var(--arm-angle, 0deg)); }
.pa-cable { fill: none; stroke: rgb(20 32 54 / .6); stroke-width: 2; }
.robot-jaw { transition: transform var(--dur-2) var(--ease-out); }
.robot-jaw.up { transform: translateY(-6px); } .robot-jaw.down { transform: translateY(6px); }
.scene-object.gripping .robot-jaw { transform: none; }

@media (prefers-reduced-motion: reduce) { .machine-rotor { transform: none; } .robot-jaw { transition: none; } }

/* ── Tuberías y válvula ─────────────────────────────────────────────────────── */
.pa-pipe-wall, .pa-pipe-body, .pa-pipe-hi, .pipe-fluid { fill: none; stroke-linejoin: round; stroke-linecap: butt; }
.pa-pipe-wall { stroke: var(--pa-s6); stroke-width: 19; } .pa-pipe-body { stroke: var(--pa-s3); stroke-width: 15; }
.pa-pipe-hi { stroke: var(--pa-s1); stroke-width: 4; opacity: .85; }
.pipe-fluid { stroke: var(--pa-fluid); stroke-width: 7; opacity: .28; stroke-dasharray: 9 7; stroke-dashoffset: var(--flow-offset, 0); transition: opacity var(--dur-3) var(--ease-out); }
.scene-object.has-flow .pipe-fluid { opacity: 1; }
.pa-slot { stroke: #fff; stroke-width: 4; fill: none; }
.machine-valve-slot { transform-box: fill-box; transform-origin: center; transform: rotate(90deg); transition: transform var(--dur-3) var(--ease-out); }
.scene-object.is-active .machine-valve-slot { transform: none; }
.valve-status { fill: var(--pa-led-off); stroke: rgb(20 32 54 / .5); transition: fill var(--dur-2) var(--ease-out); }
.scene-object.is-active .valve-status { fill: var(--pa-ok); filter: drop-shadow(0 0 3px var(--pa-ok)); }
.pa-spoke { fill: none; stroke: var(--pa-s7); stroke-width: 2.4; }
.pa-needle { fill: none; stroke: var(--pa-fault); stroke-width: 2; }
.machine-source-name { position: absolute; left: 6px; bottom: 6px; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .06em; color: var(--n-700); pointer-events: none; }

/* ── Tanque ─────────────────────────────────────────────────────────────────── */
.pa-tank-back { fill: rgb(206 232 252 / .36); stroke: var(--pa-edge); }
.pa-tank-dome { fill: rgb(255 255 255 / .24); }
.pa-front { pointer-events: none; }
.tank-vessel { position: absolute; left: var(--wx); top: var(--wy); width: var(--ww); height: var(--wh); }
.tank-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--pa-fluid) 82%, #fff) 0, var(--pa-fluid) 18%, var(--pa-fluid-d) 100%); opacity: .94; transition: height 80ms linear; }
.liquid-surface { position: absolute; left: 0; right: 0; top: -3px; height: 6px; border-radius: 50%; background: linear-gradient(rgb(255 255 255 / .7), rgb(255 255 255 / 0)); }
.tank-scale { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), rgb(20 32 54 / .28) calc(25% - 1px), rgb(20 32 54 / .28) 25%) right / 9px 100% no-repeat; font: 500 var(--fs-2xs)/1 var(--font-mono); color: rgb(20 32 54 / .6); }
.tank-reading { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 3px 8px; border-radius: var(--r-xs); background: rgb(255 255 255 / .94); border: 1px solid var(--n-200); color: var(--n-900); font: 600 var(--fs-sm)/1 var(--font-mono); pointer-events: none; }
.level-probe { position: absolute; left: -24px; width: 22px; height: 12px; margin-bottom: -6px; border-radius: 3px 0 0 3px; border: 1px solid var(--n-300); background: var(--n-0); color: var(--n-700); text-align: center; font: 700 var(--fs-2xs)/10px var(--font-ui); pointer-events: none; }
.level-probe::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--ww); border-top: 1px dashed rgb(20 32 54 / .3); }
.tank-waterfall, .tank-spill-puddle, .tank-overflow { display: none; position: absolute; pointer-events: none; }
.scene-object.is-spilling .tank-waterfall { display: block; top: calc(var(--wy) - 14px); bottom: 8px; width: 7px; background: repeating-linear-gradient(to bottom, var(--pa-fluid) 0 9px, transparent 9px 16px); opacity: .85; animation: pa-fall .5s linear infinite; }
.tank-waterfall.left { left: 12px; } .tank-waterfall.right { right: 12px; }
@keyframes pa-fall { to { background-position: 0 16px; } }
.scene-object.has-spill .tank-spill-puddle { display: block; left: 6%; right: 6%; bottom: -7px; height: 14px; border-radius: 50%; background: rgb(39 163 220 / .38); }
.scene-object.has-spill .tank-overflow { display: block; right: 4px; top: 4px; }
.spill-reading { padding: 2px 6px; border-radius: var(--r-xs); background: var(--fault-bg); border: 1px solid var(--fault-line); color: var(--fault-ink); font: 600 var(--fs-2xs)/1.2 var(--font-ui); white-space: nowrap; }
.spill-reading:empty { display: none; }

/* ── Garaje ─────────────────────────────────────────────────────────────────── */
.garage-curtain { transform: translateY(calc(var(--travel-position, 0) * var(--garage-travel, 200px) * -1)); }
.garage-gear { transform: rotate(calc(var(--travel-position, 0) * 720deg)); }

/* ── Elevador ───────────────────────────────────────────────────────────────── */
.pa-shaft { fill: url(#pa-dark-v); stroke: none; }
.pa-cab { fill: url(#pa-steel-v); }
.pa-door { fill: url(#pa-steel-h); stroke: rgb(20 32 54 / .55); }
.lift-cable { transform: scaleY(calc(1 - var(--travel-position, 0) * var(--cable-k, .8))); }
.lift-car { position: absolute; transform: translateY(calc(var(--travel-position, 0) * var(--lift-travel, 270px) * -1)); }
.lift-door.door-left { transform: translateX(calc(var(--door-pos, 0) * var(--leaf, 40px) * -1)); }
.lift-door.door-right { transform: translateX(calc(var(--door-pos, 0) * var(--leaf, 40px))); }
.hall-station { position: absolute; }
.hall-call-btn { display: flex; align-items: center; gap: 3px; width: 30px; min-height: 0; height: 22px; padding: 0 4px; border: 1px solid var(--n-300); border-radius: 4px; background: var(--n-0); color: var(--n-900); font: 700 var(--fs-2xs)/1 var(--font-mono); cursor: pointer; }
.hall-led { width: 5px; height: 5px; border-radius: 50%; background: var(--pa-led-off); }
.hall-call-btn.called .hall-led { background: var(--pa-warn); box-shadow: 0 0 5px var(--pa-warn); }
#plant-stage[data-mode="edit"] .hall-call-btn, #plant-stage[data-mode="edit"] .cop-btn { pointer-events: none; }
.car-operating-panel { position: absolute; display: flex; flex-direction: column; gap: 3px; }
.cop-display { padding: 2px 0; border-radius: 3px; background: #0b1424; color: #7dffb5; text-align: center; font: 700 var(--fs-xs)/1 var(--font-mono); }
.cop-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cop-btn { min-height: 0; height: 13px; padding: 0; border: 1px solid var(--n-400); border-radius: 3px; background: var(--n-0); color: var(--n-900); font: 700 8px/11px var(--font-mono); cursor: pointer; }
.cop-btn.active { background: var(--accent-500); border-color: var(--accent-500); color: var(--n-0); }
.cop-alarm { color: var(--fault); }
.lift-position { position: absolute; padding: 1px 5px; border-radius: 3px; background: var(--n-950); color: var(--z-on-dark); font: 500 var(--fs-2xs)/1.3 var(--font-mono); pointer-events: none; }
.scene-object.is-spilling .tank-waterfall, .pulley-wheel { animation-play-state: inherit; }
@media (prefers-reduced-motion: reduce) { .scene-object.is-spilling .tank-waterfall { animation: none; } .machine-valve-slot { transition: none; } }

/* ── Miniaturas de biblioteca y rótulos de escena ───────────────────────────── */
.pa-thumb { position: static; display: block; width: 100%; height: 100%; }
.machine-image { overflow: hidden; }
.machine-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.image-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; border: 1px dashed var(--n-400); border-radius: var(--r-sm); background: var(--n-25); color: var(--n-600); text-align: center; font: 600 var(--fs-xs)/1.3 var(--font-ui); letter-spacing: .02em; }
.image-placeholder small { font: 400 var(--fs-2xs)/1.3 var(--font-ui); }
.machine-label .scene-text { position: absolute; inset: 0; display: flex; align-items: center; font: 500 var(--fs-xl)/1.35 var(--font-ui); letter-spacing: 0; text-wrap: pretty; }

/* ── Presentación de piezas: aparición, aterrizaje y pieza en el aire (movimiento sólo de estado) ── */
@media (prefers-reduced-motion: no-preference) {
  .scene-object.pa-pop .machine-v58 { animation: pa-drop 240ms cubic-bezier(.45, 0, .85, .45) both; }
  .scene-object.pa-land .machine-v58 { animation: pa-squash 160ms var(--ease-out) both; transform-origin: 50% 100%; }
  .scene-object.is-held .machine-cargo { filter: drop-shadow(0 7px 3px rgb(20 32 54 / .3)); transition: filter var(--dur-2) var(--ease-out); }
}
@keyframes pa-drop { from { opacity: 0; transform: translateY(-30px) scale(.9); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes pa-squash { 0% { transform: scale(1.06, .93); } 55% { transform: scale(.98, 1.02); } 100% { transform: none; } }

/* ── Fluidos 5.9 · líquido en capas, entradas, salida, derrame, mezcladora, detector de color y bomba en falla ──
   El estado llega por variables (--liquid-hex, --surface-y, --inflow-color, --spill-color, --fluid-color) y clases (.is-filling-*, .is-stirred, .is-dry…). */
.tank-liquid { overflow: hidden; background-color: var(--liquid-hex, var(--pa-fluid)); }
.tank-liquid::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / .34) 0, rgb(255 255 255 / 0) 24%, rgb(10 20 40 / 0) 55%, rgb(10 20 40 / .24) 100%); }
.tank-swirl, .tank-bubbles { display: none; position: absolute; inset: 0; pointer-events: none; }
.scene-object.is-stirred .tank-swirl { display: block; background: repeating-linear-gradient(98deg, rgb(255 255 255 / 0) 0 13px, rgb(255 255 255 / .34) 13px 17px, rgb(255 255 255 / 0) 17px 31px); animation: pa-swirl 1s linear infinite; }
.scene-object.is-stirred .tank-bubbles { display: block; background: radial-gradient(circle at 24% 86%, rgb(255 255 255 / .7) 0 2px, transparent 3px), radial-gradient(circle at 58% 70%, rgb(255 255 255 / .6) 0 2.4px, transparent 3.4px), radial-gradient(circle at 80% 90%, rgb(255 255 255 / .65) 0 1.8px, transparent 2.8px); animation: pa-rise 1.3s linear infinite; }
@keyframes pa-swirl { to { background-position: 62px 0; } }
@keyframes pa-rise { from { transform: translateY(14%); opacity: 1; } to { transform: translateY(-34%); opacity: 0; } }
.scene-object.is-filling-top .liquid-surface, .scene-object.is-filling-side .liquid-surface { animation: pa-ripple .55s ease-in-out infinite; }
@keyframes pa-ripple { 50% { transform: scaleY(1.6) translateY(1px); } }
.tank-chip { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: var(--r-xs); background: rgb(255 255 255 / .95); border: 1px solid var(--n-200); color: var(--n-800); font: 600 var(--fs-2xs)/1.25 var(--font-ui); white-space: nowrap; pointer-events: none; }
.tank-chip::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--chip, var(--pa-fluid)); border: 1px solid rgb(20 32 54 / .4); }
.tank-chip[hidden] { display: none; }
/* Con una mezcladora montada el eje cruza el centro del depósito: la lectura de litros se corre a la esquina. */
.scene-object.has-shaft .tank-reading { left: 8px; transform: none; }
.tank-stream, .tank-jet, .tank-drain-stream { display: none; position: absolute; pointer-events: none; z-index: 2; }
.scene-object.is-filling-top .tank-stream-top { display: block; left: var(--in-top-x); top: 20px; width: 6px; height: max(0px, calc(var(--surface-y) - 20px)); border-radius: 3px; background: repeating-linear-gradient(to bottom, var(--inflow-color) 0 8px, transparent 8px 14px); animation: pa-drip .42s linear infinite; }
.scene-object.is-filling-side:not(.is-side-submerged) .tank-stream-side { display: block; left: calc(var(--wx) + 5px); top: var(--side-y); width: 6px; height: max(0px, calc(var(--surface-y) - var(--side-y))); border-radius: 3px; background: repeating-linear-gradient(to bottom, var(--inflow-color) 0 8px, transparent 8px 14px); animation: pa-drip .42s linear infinite; }
.scene-object.is-filling-side.is-side-submerged .tank-jet { display: block; left: var(--wx); top: calc(var(--side-y) - 3px); width: 50px; height: 6px; border-radius: 3px; background: repeating-linear-gradient(to right, var(--inflow-color) 0 8px, rgb(255 255 255 / .5) 8px 13px); animation: pa-jet .4s linear infinite; }
.scene-object.is-floor-draining .tank-drain-stream { display: block; right: 4px; top: calc(var(--out-y) + 8px); bottom: 2px; width: 6px; border-radius: 3px; background: repeating-linear-gradient(to bottom, var(--drain-color) 0 8px, transparent 8px 14px); animation: pa-drip .42s linear infinite; }
@keyframes pa-drip { to { background-position: 0 14px; } }
@keyframes pa-jet { to { background-position: 13px 0; } }
.tank-drain-wheel { transition: transform .4s var(--ease-out); }
.scene-object.is-draining .tank-drain-wheel { transform: rotate(90deg); }
.scene-object.is-spilling .tank-waterfall { background: repeating-linear-gradient(to bottom, var(--spill-color, var(--pa-fluid)) 0 9px, transparent 9px 16px); }
.scene-object.has-spill .tank-spill-puddle { background: color-mix(in srgb, var(--spill-color, var(--pa-fluid)) 46%, transparent); }
.pipe-fluid { stroke: var(--fluid-color, var(--pa-fluid)); }
.pa-flow-arrow { fill: none; stroke: var(--pa-s6); stroke-width: 2; }
.scene-object.has-flow .pa-flow-arrow { stroke: var(--fluid-color, var(--pa-fluid)); }

/* Bomba: cavita sin líquido, se calienta, humea y se quema */
.pump-bubble { fill: rgb(255 255 255 / .92); opacity: 0; }
.scene-object.is-dry .pump-bubble { opacity: 1; animation: pa-bubble .55s ease-in infinite; }
.pump-bubble.b2 { animation-delay: .14s !important; } .pump-bubble.b3 { animation-delay: .27s !important; } .pump-bubble.b4 { animation-delay: .4s !important; }
@keyframes pa-bubble { 0% { transform: translateY(5px) scale(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-9px) scale(1.15); opacity: 0; } }
.scene-object.is-dry .pa-svg { animation: pa-judder .11s linear infinite; }
@keyframes pa-judder { 25% { transform: translate(.9px, -.6px); } 75% { transform: translate(-.9px, .6px); } }
.pump-smoke { display: none; position: absolute; top: -8px; width: 32px; height: 44px; pointer-events: none; z-index: 4; }
.scene-object.is-overheated .pump-smoke, .scene-object.is-burned .pump-smoke { display: block; }
.pump-smoke i { position: absolute; left: 10px; bottom: 0; width: 14px; height: 14px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgb(88 98 112 / .7), rgb(88 98 112 / 0) 70%); animation: pa-smoke 1.7s ease-out infinite; }
.pump-smoke i:nth-child(2) { animation-delay: .55s; left: 4px; } .pump-smoke i:nth-child(3) { animation-delay: 1.1s; left: 16px; }
.scene-object.is-burned .pump-smoke i { background: radial-gradient(circle, rgb(28 30 36 / .85), rgb(28 30 36 / 0) 70%); }
@keyframes pa-smoke { 0% { transform: translateY(0) scale(.5); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-40px) scale(1.7); opacity: 0; } }
.scene-object.is-overheated .pa-svg { filter: drop-shadow(0 0 calc(var(--heat, .4) * 9px) rgb(224 68 55 / calc(var(--heat, .4) * .75))); }
.scene-object.is-burned .pump-burnt-banner .burn-msg { max-width: 120px; white-space: normal; text-align: center; }

/* Fuente de líquido */
.source-band { fill: var(--fluid-hex, #2fa8e0); stroke: rgb(20 32 54 / .38); }
.source-sight { fill: var(--fluid-hex, #2fa8e0); stroke: none; }
.machine-water_source .machine-source-name { display: flex; align-items: center; justify-content: center; right: auto; bottom: auto; color: #fff; text-shadow: 0 1px 2px rgb(10 20 40 / .55); letter-spacing: .08em; text-align: center; }
.scene-object.has-flow .machine-water_source .source-band { filter: brightness(1.08); }

/* Mezcladora */
.mixer-paddle.a { transform: scaleX(cos(var(--shaft-angle, 0deg))); }
.mixer-paddle.b { transform: scaleX(cos(calc(var(--shaft-angle, 0deg) + 90deg))); }
.mixer-badge { display: none; position: absolute; left: 50%; top: -15px; transform: translateX(-50%); padding: 2px 7px; border-radius: var(--r-xs); background: var(--accent-700); color: var(--n-0); font: 700 var(--fs-2xs)/1.2 var(--font-ui); letter-spacing: .04em; white-space: nowrap; }
.scene-object.is-stirring .mixer-badge, .scene-object.is-dry .mixer-badge { display: block; }
.scene-object.is-dry .mixer-badge { background: var(--warn); color: var(--n-950); }
@media (prefers-reduced-motion: reduce) { .mixer-paddle { transform: none !important; } .scene-object.is-stirred .tank-swirl, .scene-object.is-stirred .tank-bubbles, .scene-object.is-dry .pa-svg, .pump-smoke i, .pump-bubble { animation: none !important; } }

/* Detector de color de líquido */
.lq-swatch { fill: var(--reading-color, #cdd6e2); transition: fill .3s var(--ease-out); }
.lq-tip { fill: var(--pa-led-off); stroke: rgb(20 32 54 / .5); }
.scene-object.is-detecting .lq-tip { fill: var(--detect-color, #2fa14b); filter: drop-shadow(0 0 5px var(--detect-color, #2fa14b)); }
.lq-chip { position: absolute; left: 6px; bottom: 1px; padding: 1px 5px; border-radius: var(--r-xs); background: var(--n-0); border: 1px solid var(--n-300); color: var(--n-700); font: 700 var(--fs-2xs)/1.25 var(--font-ui); letter-spacing: .03em; white-space: nowrap; pointer-events: none; }
.scene-object.is-detecting .lq-chip { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.scene-object.is-detecting .machine-liquid_sensor .sensor-led { fill: var(--pa-ok); }

/* Rótulos con mezcladora: el del depósito pasa debajo y el de la mezcladora a su derecha, para no chocar con el motor */
.scene-object.has-mixer[data-kind="tank"] .object-caption { bottom: auto; top: calc(100% + 4px); }
.scene-object.has-mixer[data-kind="tank"] .object-signal { top: calc(100% + 20px); }
.scene-object[data-kind="mixer"] .object-caption { bottom: auto; top: 6px; left: calc(100% + 6px); right: auto; width: max-content; text-align: left; overflow: visible; }
.scene-object[data-kind="mixer"] .mixer-badge { top: 30px; left: calc(100% + 6px); transform: none; }