/* Plant workbench: physical components share a scaled, layered scene. */
.library-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--n-100);
  border-radius: var(--r-sm);
  margin-bottom: 12px;
}
.library-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  min-height: 30px;
  font-size: var(--fs-xs);
}
.library-tabs button.active {
  background: var(--n-0);
  color: var(--green);
  box-shadow: var(--sh-1);
}
#component-search {
  font-size: var(--fs-xs);
  background: var(--n-0);
  margin-bottom: 10px;
  min-height: 34px;
}
.component-group {
  font: var(--fs-2xs) var(--font-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--n-600);
  margin: 17px 4px 6px;
}
.plant-library-item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  padding: 8px 5px;
  gap: 8px;
  min-height: 48px;
  font-size: var(--fs-xs);
  cursor: grab;
  white-space: normal;
}
.plant-library-item:hover {
  border-color: var(--n-300);
  background: var(--n-0);
}
.plant-library-item:active {
  cursor: grabbing;
}
.plant-library-item small {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--n-600);
  margin-top: 4px;
}
.component-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 32px;
  font: var(--fs-xl) var(--font-mono);
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.drag-grip {
  margin-left: auto;
  color: var(--n-400);
}
.scene-layers {
  padding: 20px;
  border-top: 1px solid var(--line);
}
#scene-layers {
  max-height: 235px;
  overflow: auto;
}
.layer-row {
  display: flex;
  align-items: center;
  border-radius: var(--r-xs);
  min-width: 0;
}
.layer-row.active {
  background: var(--n-50);
}
.layer-row button {
  border: 0;
  background: transparent;
  padding: 5px;
  min-height: 30px;
  font-size: var(--fs-2xs);
}
.layer-row > .layer-select {
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
}
.layer-select > span:first-child {
  font: var(--fs-xs) var(--font-mono);
  width: 23px;
  color: var(--green);
  flex-shrink: 0;
}
.layer-select > span:last-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.plant-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  background: var(--n-0);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.plant-toolbar button,
.plant-toolbar .button {
  font-size: var(--fs-xs);
  min-height: 31px;
  padding: 5px 9px;
}
.editor-modes {
  display: flex;
  background: var(--n-50);
  padding: 3px;
  border-radius: var(--r-sm);
}
.editor-modes button {
  border: 0;
  background: transparent;
  color: var(--n-600);
}
.editor-modes button.active {
  background: var(--n-0);
  box-shadow: var(--sh-1);
  color: var(--accent-600);
  font-weight: 600;
}
.zoom-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}
.zoom-controls select {
  width: 64px;
  min-height: 31px;
  font: var(--fs-2xs) var(--font-mono);
  padding: 4px;
}
.zoom-controls > button:not(:last-child) {
  width: 27px;
  padding: 0;
  font-size: var(--fs-xl);
}
.plant-viewport {
  min-height: 0;
  background: var(--n-100);
  position: relative;
  touch-action: none;
  overscroll-behavior: contain;
}
.plant-viewport:active {
  cursor: grabbing;
}
#scene-sizer {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}
.plant-viewport #plant-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  transform-origin: 0 0;
  background-color: var(--n-25);
  background-image: radial-gradient(var(--n-200) 0.8px, transparent 0.8px);
  background-size: 20px 20px;
  height: 720px;
  width: 1200px;
  box-shadow: inset 0 0 0 1px var(--n-200);
}
.plant-viewport #plant-stage.with-background {
  background-size: contain;
  background-repeat: no-repeat;
}
.plant-viewport #plant-stage.no-grid:not(.with-background) {
  background-image: none;
}
.plant-viewport #plant-stage.drop-ready {
  box-shadow: inset 0 0 0 4px var(--accent-400);
}
.scene-status {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--n-25);
  border-top: 1px solid var(--line);
  padding: 8px 15px;
  font: var(--fs-2xs) var(--font-mono);
  color: var(--n-600);
  flex-shrink: 0;
  min-height: 32px;
}
.scene-status label {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.scene-status input {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: var(--green);
}
#scene-time {
  margin-left: auto;
  white-space: nowrap;
}
.scene-object {
  position: absolute;
  user-select: none;
  touch-action: none;
  cursor: grab;
  outline: 1.5px solid transparent;
  outline-offset: 7px;
  border-radius: var(--r-xs);
}
.scene-object:hover {
  outline-color: var(--accent-200);
}
.scene-object.selected {
  outline-color: var(--ok);
}
.scene-object.locked {
  cursor: default;
}
.scene-object[data-kind="label"] {
  outline-offset: 2px;
}
.object-caption {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  right: 0;
  text-align: center;
  font: var(--fs-xs) var(--font-mono);
  font-weight: 600;
  color: var(--accent-600);
  white-space: nowrap;
  pointer-events: none;
}
.object-signal {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  text-align: center;
  font: var(--fs-2xs) var(--font-mono);
  color: var(--accent-500);
  white-space: nowrap;
  pointer-events: none;
}
.scene-graphic {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: none;
}
.scene-graphic svg,
.scene-graphic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.scene-graphic button {
  pointer-events: auto;
}
.scene-object[data-kind="label"] .object-caption,
.scene-object[data-kind="label"] .object-signal,
.scene-object[data-kind="image"] .object-signal {
  display: none;
}
.scene-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: pre-wrap;
  overflow: hidden;
  font-size: clamp(13px, 1.4vw, 19px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.5px;
}
.scene-object[data-kind="label"][style*="height: 30"] .scene-text {
  font-weight: 400;
}
.object-resize {
  display: none;
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 12px;
  height: 12px;
  padding: 0;
  min-height: 12px;
  border: 2px solid var(--ok);
  border-radius: var(--r-xs);
  background: var(--n-0);
  cursor: nwse-resize;
  z-index: 20;
}
.scene-object.selected:not(.locked) .object-resize {
  display: block;
}
#plant-stage[data-mode="operate"] .scene-object {
  cursor: default;
}
#plant-stage[data-mode="operate"] .object-resize {
  display: none;
}
#plant-stage[data-mode="operate"] .physical-control {
  cursor: pointer;
}
#plant-stage[data-mode="edit"] .physical-control {
  pointer-events: none;
}
.scene-rotor {
  transform-box: fill-box;
  transform-origin: center;
}
.scene-object[data-kind="cargo"] .object-caption {
  font-size: var(--fs-2xs);
  bottom: calc(100% + 7px);
}
.scene-object[data-kind="cargo"] .object-signal {
  display: none;
}
.image-placeholder {
  width: 100%;
  height: 100%;
  border: 2px dashed var(--n-400);
  background: var(--n-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--accent-500);
}
.image-placeholder small {
  font-size: var(--fs-xs);
  margin-top: 8px;
}
.scene-empty {
  padding: 100px 45px;
  color: var(--n-600);
  text-align: center;
  max-width: 1000px;
}
.scene-empty > span {
  font-size: 50px;
  color: var(--n-400);
}
.scene-empty h2 {
  color: var(--n-700);
  font-weight: 500;
}
.scene-empty p {
  font-size: var(--fs-lg);
  line-height: 1.8;
}
.property-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
.property-grid input {
  min-width: 0;
}
input[type="color"] {
  padding: 4px;
  height: 36px;
}
.inspector .check-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-2xs);
}
.check-label input {
  min-height: 0;
  accent-color: var(--green);
}
.ladder-tools {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ladder-tools button {
  min-height: 29px;
  font-size: var(--fs-xs);
  padding: 3px 8px;
}
.ladder-tools span {
  font: var(--fs-2xs) var(--font-mono);
  color: var(--muted);
}
.io-value:disabled {
  opacity: 1;
}
.library-section {
  flex: 1;
  overflow: auto;
}
.scene-object:focus-visible {
  outline: 3px solid var(--ok);
  outline-offset: 7px;
}
@media (max-width: 1150px) {
  .plant-toolbar {
    gap: 6px;
    padding: 8px;
  }
  .scene-status {
    gap: 8px;
    padding: 7px;
    font-size: var(--fs-2xs);
  }
  .plant-library-item {
    font-size: var(--fs-2xs);
    gap: 6px;
  }
  .component-icon {
    width: 28px;
    height: 29px;
    font-size: var(--fs-lg);
  }
}
@media (max-width: 900px) {
  .scene-layers {
    border-left: 1px solid var(--line);
    max-height: 290px;
    overflow: auto;
  }
  .io-monitor {
    grid-column: 1/-1;
  }
  .scene-text {
    font-size: var(--fs-xl);
  }
}
@media (max-width: 600px) {
  .library-section {
    overflow: visible;
  }
  .library-tabs {
    display: flex !important;
    margin: 0 0 6px;
  }
  .library-tabs button {
    font-size: var(--fs-xs);
  }
  #component-search {
    display: none;
  }
  #plant-library {
    display: flex;
    gap: 5px;
    overflow: auto;
    padding-bottom: 4px;
  }
  #plant-library .plant-library-entry {
    position: relative;
    display: block;
    flex: 0 0 100px;
  }
  #plant-library .plant-library-info {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 2;
  }
  .component-group {
    display: none;
  }
  .plant-library-item {
    min-width: 90px;
    max-width: 100px;
    flex-direction: column;
    font-size: var(--fs-2xs);
    gap: 4px;
    padding: 5px;
    border-color: var(--line);
    text-align: center;
  }
  .plant-library-item small,
  .drag-grip {
    display: none;
  }
  .component-icon {
    width: 28px;
    height: 26px;
    font-size: var(--fs-lg);
  }
  .plant-toolbar {
    padding: 7px;
    gap: 5px;
  }
  .zoom-controls {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
  .editor-modes button {
    font-size: var(--fs-2xs);
  }
  .scene-status label {
    font-size: var(--fs-2xs);
  }
  .scene-status {
    flex-wrap: wrap;
    gap: 7px;
  }
  .scene-status #scene-time {
    margin-left: 0;
  }
  .plant-viewport {
    min-height: 300px;
  }
  .workspace-content {
    max-height: none;
    min-height: 450px;
  }
  .workspace-content[data-view="split"] .plant-viewport {
    min-height: 280px;
  }
  .workspace-content[data-view="split"] .ladder-sheet {
    max-height: 320px;
  }
  .scene-layers {
    border-left: 0;
    max-height: 280px;
  }
  .scene-text {
    font-size: var(--fs-xl);
  }
  .ladder-tools > button:last-child {
    font-size: var(--fs-2xs);
  }
  .canvas-toolbar .ladder-tools {
    gap: 3px;
  }
  .plant-pane {
    min-height: 450px;
  }
}
.process-connections {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.process-pipe-border,
.process-pipe-flow {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.process-pipe-border {
  stroke: var(--n-500);
  stroke-width: 13;
}
.process-pipe-flow {
  stroke: var(--n-300);
  stroke-width: 7;
}
.process-pipe-flow.flowing {
  stroke: var(--accent-400);
  stroke-dasharray: 14 7;
  animation: process-flow 1s linear infinite;
}
@keyframes process-flow {
  to {
    stroke-dashoffset: -42;
  }
}
.scene-object.object-hidden {
  opacity: 0.2;
}
#plant-stage[data-mode="operate"] .scene-object.object-hidden {
  visibility: hidden;
}
.scene-object[data-kind="pipe"] .scene-graphic svg {
  overflow: visible;
}
.property-dialog {
  width: min(640px, 94vw);
}
.property-dialog #inspector-content {
  padding: 0;
}
.property-dialog #inspector-content form {
  display: block;
}
.property-dialog .property-grid {
  grid-template-columns: repeat(3, 1fr);
}
.property-dialog label {
  font-size: var(--fs-sm);
}
.property-dialog .full-width {
  width: 100%;
}
.property-dialog .button-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.property-dialog .button-row button {
  flex: 1;
}

/* 9. PUERTOS DE ACOPLE MAGNÉTICO IDENTIFICADOS (DOCK PORTS) */
.dock-port {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 3px;
  background: color-mix(in srgb, var(--n-950) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-on-dark) 40%, transparent);
  color: var(--accent-on-dark);
  border-radius: var(--r-xs);
  padding: 1px 4px;
  font: 700 var(--fs-2xs) var(--font-mono);
  pointer-events: none;
  z-index: 10;
  opacity: 0.4;
  transition: all 0.15s ease-out;
  white-space: nowrap;
}
.scene-object:hover .dock-port,
.stage.dragging-object .dock-port {
  opacity: 0.95;
  border-color: var(--accent-on-dark);
  box-shadow: var(--sh-2);
}
.dock-port.is-docked,
.dock-port.is-magnet-snapped {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--accent-700) 95%, transparent) !important;
  border-color: var(--ok) !important;
  color: var(--ok-line) !important;
  box-shadow: var(--sh-2) !important;
  transform: scale(1.08);
}

/* 10. FLOATING MAGNETIC SNAP HUD & TETHER */
.magnetic-snap-hud {
  position: absolute;
  transform: translate(-50%, -100%);
  margin-top: -12px;
  background: color-mix(in srgb, var(--n-950) 96%, transparent);
  border: 1.5px solid var(--accent-on-dark);
  color: var(--n-25);
  padding: 4px 10px;
  border-radius: var(--r-md);
  font: 600 var(--fs-xs) var(--font-ui);
  box-shadow: var(--sh-2);
  pointer-events: none;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: hudPop 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes hudPop {
  0% { transform: translate(-50%, -80%) scale(0.85); opacity: 0; }
  100% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}

/* 11. MANECILLA DE ROTACIÓN INTERACTIVA Y BOTÓN RÁPIDO */
.object-rotate-handle {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--n-950);
  border: 2px solid var(--accent-on-dark);
  color: var(--accent-on-dark);
  display: none;
  align-items: center;
  justify-content: center;
  font: 700 var(--fs-lg) var(--font-ui);
  cursor: grab;
  box-shadow: var(--sh-2);
  z-index: 50;
  transition: transform 0.1s, border-color 0.15s, background-color 0.15s;
}
.object-rotate-handle::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: var(--accent-on-dark);
}
.object-rotate-handle:hover {
  background: var(--accent-400);
  color: var(--n-0);
  border-color: var(--accent-200);
  transform: translateX(-50%) scale(1.15);
  box-shadow: var(--sh-2);
}
.object-rotate-handle:active {
  cursor: grabbing;
  transform: translateX(-50%) scale(1.05);
}
.quick-rotate-btn {
  position: absolute;
  top: -30px;
  right: -8px;
  background: color-mix(in srgb, var(--n-950) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-on-dark) 60%, transparent);
  color: var(--accent-on-dark);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  font: 700 var(--fs-2xs) var(--font-mono);
  cursor: pointer;
  z-index: 50;
  box-shadow: var(--sh-2);
  display: none;
  align-items: center;
  gap: 3px;
  transition: all 0.15s;
}
.quick-rotate-btn:hover {
  background: var(--accent-400);
  color: var(--n-0);
  border-color: var(--accent-on-dark);
  transform: scale(1.08);
}
.scene-object.selected .object-rotate-handle,
.scene-object.multi-selected .object-rotate-handle,
.scene-object.selected .quick-rotate-btn,
.scene-object.multi-selected .quick-rotate-btn {
  display: flex !important;
}
#plant-stage[data-mode="operate"] .object-rotate-handle,
#plant-stage[data-mode="operate"] .quick-rotate-btn,
.stage[data-mode="operate"] .object-rotate-handle,
.stage[data-mode="operate"] .quick-rotate-btn {
  display: none !important;
}