/* CodeGO Industrial · capa de diseño (Zolvek Cobalt).
   Va la última. Decide la apariencia de la interfaz de trabajo sobre la estructura de las hojas anteriores.
   Reglas de la casa: un solo acento (cobalto), color de estado sólo para señales operativas, 4 radios, sombras casi planas,
   movimiento sólo de estado (≤ 220 ms, salida fuerte), iconos SVG propios, Manrope + monoespaciada sólo para datos.
   Los controles genéricos se aplican a las zonas de interfaz, nunca al arte de planta. */

/* ── 0 · Superficies del navegador ───────────────────────────────────────────── */
:root { color-scheme: light; accent-color: var(--accent-500); }
::selection { background: var(--accent-100); color: var(--n-900); }
html { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
:where(input, textarea) { caret-color: var(--accent-500); }
.studio-shell :focus-visible, dialog :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.studio-shell, dialog { font-feature-settings: "tnum" 1, "cv11" 1; }

/* ── 1 · Iconos ──────────────────────────────────────────────────────────────── */
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* ── 2 · Botones de interfaz (barras, herramientas, diálogos) ────────────────── */
.studio-shell :is(.topbar, .workspace-tabs, .canvas-toolbar, .plant-toolbar, .statusbar, .tool-popover, .inspector-title, .ladder-tools, .zoom-controls, .library-tabs, .editor-modes) button,
dialog :is(.dialog-actions, .dialog-heading, .practice-actions, .button-row) :is(button, .button),
dialog > :is(button, .button), dialog .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; height: auto; padding: 0 var(--sp-3);
  font: 600 var(--fs-md)/1 var(--font-ui); letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: var(--n-900); background: var(--n-0); border: 1px solid var(--n-300); border-radius: var(--r-sm); box-shadow: none; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.studio-shell :is(.topbar, .workspace-tabs, .canvas-toolbar, .plant-toolbar, .statusbar, .tool-popover, .inspector-title, .ladder-tools, .zoom-controls, .library-tabs, .editor-modes) button:hover,
dialog :is(.dialog-actions, .dialog-heading, .practice-actions, .button-row) :is(button, .button):hover, dialog .button:hover { background: var(--n-25); border-color: var(--n-400); }
.studio-shell :is(.topbar, .workspace-tabs, .canvas-toolbar, .plant-toolbar, .statusbar, .tool-popover, .inspector-title, .ladder-tools, .zoom-controls, .library-tabs, .editor-modes) button:active,
dialog :is(button, .button):active { transform: scale(.97); }
.studio-shell button:disabled, dialog button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.studio-shell .primary, dialog .primary { background: var(--accent-500); border-color: var(--accent-500); color: var(--n-0); }
.studio-shell .primary:hover, dialog .primary:hover { background: var(--accent-600); border-color: var(--accent-600); color: var(--n-0); }
.studio-shell .danger, dialog .danger { color: var(--fault-ink); }
.studio-shell .danger:hover, dialog .danger:hover { background: var(--fault-bg); border-color: var(--fault-line); }
/* Botones sólo con icono (lista explícita): cuadrados, discretos. */
.studio-shell :is(#toggle-library, #undo, #redo, #plant-reset, [data-maximize], #plant-zoom-out, #plant-zoom-in, #ladder-zoom-out, #ladder-zoom-in, #close-inspector),
dialog .dialog-heading > button { width: 32px; padding: 0; }
.studio-shell :is(#toggle-library, #undo, #redo, #plant-reset, [data-maximize], #plant-zoom-out, #plant-zoom-in, #ladder-zoom-out, #ladder-zoom-in, #close-inspector) { background: transparent; border-color: transparent; color: var(--n-700); }
.studio-shell :is(#toggle-library, #undo, #redo, #plant-reset, [data-maximize], #plant-zoom-out, #plant-zoom-in, #ladder-zoom-out, #ladder-zoom-in, #close-inspector):hover { background: var(--n-100); border-color: transparent; color: var(--n-900); }

/* ── 3 · Cabecera ────────────────────────────────────────────────────────────── */
.studio-shell .topbar { height: 48px; min-height: 48px; flex-basis: 48px; padding-inline: var(--sp-4); gap: var(--sp-3); background: var(--n-950); border-bottom: 1px solid var(--n-850); color: var(--z-on-dark); }
.studio-shell .topbar .brand { gap: 10px; color: var(--z-on-dark); text-decoration: none; }
.studio-shell .topbar .brand strong { font: 700 var(--fs-xl)/1 var(--font-ui); letter-spacing: -.01em; }
.studio-shell .topbar .edition { font: 500 var(--fs-2xs)/1 var(--font-mono); color: var(--n-400); border: 1px solid var(--n-800); border-radius: var(--r-xs); padding: 3px 5px; background: transparent; }
.studio-shell .topbar button { background: transparent; border-color: transparent; color: var(--z-muted-dark); }
.studio-shell .topbar button:hover { background: rgb(255 255 255 / .08); border-color: transparent; color: var(--z-on-dark); }
.studio-shell .topbar button.primary { background: var(--accent-500); border-color: var(--accent-500); color: var(--n-0); min-width: 96px; }
.studio-shell .topbar button.primary:hover { background: var(--accent-400); border-color: var(--accent-400); color: var(--n-0); }
.studio-shell .topbar #connect-board { border-color: var(--z-panel-line); }
.studio-shell .topbar .project-heading { gap: var(--sp-2); }
.studio-shell .topbar .project-heading input { min-height: 32px; width: 280px; max-width: 32vw; padding: 0 var(--sp-3); font: 600 var(--fs-lg)/1 var(--font-ui); color: var(--z-on-dark); background: rgb(255 255 255 / .06); border: 1px solid transparent; border-radius: var(--r-sm); transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.studio-shell .topbar .project-heading input:hover { border-color: var(--z-panel-line); }
.studio-shell .topbar .project-heading input:focus { outline: none; border-color: var(--accent-on-dark); background: rgb(255 255 255 / .1); }
.studio-shell .topbar #save-state { font: 400 var(--fs-xs)/1 var(--font-ui); color: var(--n-400); }
.studio-shell .topbar #run-state { display: inline-flex; align-items: center; gap: 7px; font: 500 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .08em; color: var(--n-400); }
.studio-shell .topbar #run-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--n-600); box-shadow: none; transition: background-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.studio-shell .topbar #run-state.running { color: var(--z-on-dark); }
.studio-shell .topbar #run-state.running i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 28%, transparent); }
.studio-shell .topbar .connection-summary { font: 400 var(--fs-xs)/1 var(--font-ui); color: var(--n-400); }

/* ── 4 · Barra de herramientas ───────────────────────────────────────────────── */
.studio-shell .workspace-tabs { height: 40px; min-height: 40px; flex-basis: 40px; padding-inline: var(--sp-3); gap: var(--sp-1); background: var(--n-0); border-bottom: 1px solid var(--n-200); }
.studio-shell .workspace-tabs button { min-height: 28px; padding: 0 var(--sp-2); background: transparent; border-color: transparent; color: var(--n-700); }
.studio-shell .workspace-tabs button:hover { background: var(--n-100); border-color: transparent; color: var(--n-900); }
.studio-shell .workspace-tabs button small { font: 500 var(--fs-xs)/1 var(--font-ui); color: var(--n-600); }
.studio-shell .view-tabs, .studio-shell .editor-modes, .studio-shell .library-tabs { display: inline-flex; gap: 2px; padding: 2px; background: var(--n-100); border-radius: var(--r-sm); border: 0; }
.studio-shell :is(.view-tabs, .editor-modes, .library-tabs) button { min-height: 26px; padding: 0 var(--sp-3); border-radius: 4px; border-color: transparent; background: transparent; color: var(--n-700); box-shadow: none; }
.studio-shell :is(.view-tabs, .editor-modes, .library-tabs) button:hover { background: var(--n-150); border-color: transparent; color: var(--n-900); }
.studio-shell :is(.view-tabs, .editor-modes, .library-tabs) button:is(.active, [aria-selected="true"]) { background: var(--n-0); color: var(--accent-600); box-shadow: var(--sh-1); border-color: transparent; }
.studio-shell .workspace-tabs .history-controls { display: inline-flex; gap: 2px; margin-left: var(--sp-2); padding-left: var(--sp-2); border-left: 1px solid var(--n-200); }
.studio-shell .workspace-tabs #show-board { margin-left: var(--sp-1); }
.studio-shell .workspace-tabs .active-practice-pill { background: var(--accent-50); border-color: var(--accent-200); color: var(--accent-600); border-radius: var(--r-pill); }
.studio-shell .workspace-tabs .toolbar-spacer { flex: 1; }

/* ── 5 · Barras del lienzo (Ladder y planta) ─────────────────────────────────── */
.studio-shell :is(.canvas-toolbar, .plant-toolbar) { min-height: 40px; padding-inline: var(--sp-3); gap: var(--sp-2); background: var(--n-0); border-bottom: 1px solid var(--n-200); }
.studio-shell :is(.canvas-toolbar, .plant-toolbar) button { min-height: 28px; padding: 0 var(--sp-2); }
.studio-shell .canvas-toolbar > strong, .studio-shell .plant-toolbar .pane-title { font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: .06em; color: var(--n-700); text-transform: uppercase; }
.studio-shell .canvas-toolbar > strong span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--n-600); }
.studio-shell .zoom-controls, .studio-shell .ladder-tools { display: inline-flex; align-items: center; gap: var(--sp-1); }
.studio-shell #ladder-zoom-label { min-width: 40px; text-align: center; font: 500 var(--fs-xs)/1 var(--font-mono); color: var(--n-700); }
.studio-shell .plant-toolbar summary, .studio-shell .tool-menu > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 var(--sp-2); font: 600 var(--fs-md)/1 var(--font-ui); color: var(--n-700); border-radius: var(--r-sm); cursor: pointer; list-style: none; }
.studio-shell .tool-menu > summary:hover { background: var(--n-100); color: var(--n-900); }
.studio-shell .tool-popover { background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-md); box-shadow: var(--sh-2); padding: var(--sp-3); gap: var(--sp-2); }

/* Zoom: el desplegable necesita ancho para «100 %» y la flecha. */
.studio-shell .zoom-controls select { width: 76px; min-width: 76px; padding: 0 22px 0 var(--sp-2); }
.studio-shell .editor-modes:not(:has(button:not([hidden]))) { display: none; }

/* ── 6 · Biblioteca de componentes ───────────────────────────────────────────── */
.studio-shell .sidebar { background: var(--n-25); border-right: 1px solid var(--n-200); gap: var(--sp-2); padding: var(--sp-2); }
.studio-shell .library-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.studio-shell #component-search { min-height: 32px; padding: 0 var(--sp-3) 0 34px; background: var(--n-0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235d6e8a' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Cpath d='m13 13 3.5 3.5'/%3E%3C/svg%3E") no-repeat 10px center / 16px; }
.studio-shell .component-group { font: 700 var(--fs-2xs)/1.4 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--n-600); padding: var(--sp-3) var(--sp-1) var(--sp-1); }
.studio-shell :is(.plant-library-item, .library-tool) { background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); box-shadow: none; transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.studio-shell :is(.plant-library-item, .library-tool):hover { background: var(--n-0); border-color: var(--n-200); box-shadow: var(--sh-1); }
.studio-shell :is(.plant-library-entry, .library-entry).guide-selected { background: var(--accent-50); outline: 1px solid var(--accent-200); box-shadow: none; border-radius: var(--r-sm); }
.studio-shell :is(.plant-library-item, .library-tool) > span:nth-child(2), .studio-shell .library-tool > span:last-child { font: 600 var(--fs-md)/1.3 var(--font-ui); color: var(--n-900); }
.studio-shell .plant-library-item small { font: 400 var(--fs-xs)/1.4 var(--font-ui); color: var(--n-700); }
.studio-shell .library-info { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-height: 28px; height: 28px; padding: 0; background: transparent; border: 0; border-radius: var(--r-sm); color: var(--n-600); font: inherit; }
.studio-shell .library-info:hover { background: var(--n-100); color: var(--accent-600); }
.studio-shell .library-info[aria-expanded="true"] { background: var(--accent-50); color: var(--accent-600); }
.studio-shell .library-program { background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-sm); color: var(--n-900); font: 600 var(--fs-md)/1 var(--font-ui); }
.studio-shell .library-program small { font: 500 var(--fs-xs)/1 var(--font-mono); color: var(--n-600); }

/* ── 7 · Barra de estado y chips ─────────────────────────────────────────────── */
.studio-shell .statusbar { min-height: 28px; padding-inline: var(--sp-3); gap: var(--sp-3); background: var(--n-0); border-top: 1px solid var(--n-200); color: var(--n-700); font: 400 var(--fs-xs)/1 var(--font-ui); }
.studio-shell .statusbar #scan-time, .studio-shell .scene-status { font: 500 var(--fs-xs)/1 var(--font-mono); color: var(--n-600); letter-spacing: 0; }
.studio-shell .scene-status { background: var(--n-0); border-top: 1px solid var(--n-200); text-transform: uppercase; }
.studio-shell .statusbar .program-credit { color: var(--n-600); }
.studio-shell .statusbar .program-credit:hover { color: var(--accent-600); }
.studio-shell .statusbar .status-release, .studio-shell .statusbar .app-version { min-height: 20px; padding: 0 var(--sp-2); font: 600 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .02em; color: var(--accent-600); background: var(--accent-50); border: 1px solid var(--accent-200); border-radius: var(--r-pill); }
.studio-shell .statusbar .app-version { color: var(--n-700); background: var(--n-100); border-color: var(--n-200); }
.studio-shell .statusbar .status-release:hover { background: var(--accent-100); }

/* ── 8 · Campos de formulario ────────────────────────────────────────────────── */
.studio-shell :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), select, textarea), dialog :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), select, textarea) {
  min-height: 32px; padding: 0 var(--sp-3); font: 500 var(--fs-md)/1.3 var(--font-ui); color: var(--n-900);
  background-color: var(--n-0); border: 1px solid var(--n-500); border-radius: var(--r-sm); box-shadow: none;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.studio-shell textarea, dialog textarea { padding: var(--sp-2) var(--sp-3); min-height: 64px; }
.studio-shell :is(input, select, textarea):hover:not(:disabled), dialog :is(input, select, textarea):hover:not(:disabled) { border-color: var(--n-600); }
.studio-shell :is(input, select, textarea):focus, dialog :is(input, select, textarea):focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 22%, transparent); }
.studio-shell :is(input, textarea)::placeholder, dialog :is(input, textarea)::placeholder { color: var(--n-600); opacity: 1; }
.studio-shell :is(input, select, textarea):disabled, dialog :is(input, select, textarea):disabled { background: var(--n-50); color: var(--n-600); border-color: var(--n-300); cursor: not-allowed; }
.studio-shell .topbar input { box-shadow: none; }

/* ── 9 · Diálogos ────────────────────────────────────────────────────────────── */
dialog { background: var(--n-0); color: var(--n-900); border: 1px solid var(--n-200); border-radius: var(--r-md); box-shadow: var(--sh-3); font-family: var(--font-ui); }
dialog::backdrop { background: rgb(var(--shadow-ink) / .5); backdrop-filter: none; }
dialog[open] { animation: dialog-in var(--dur-3) var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
dialog .dialog-heading h2 { font: 700 var(--fs-3xl)/1.25 var(--font-ui); letter-spacing: -.01em; color: var(--n-900); margin: 0; }
dialog .dialog-heading > button { background: transparent; border-color: transparent; color: var(--n-700); }
dialog .dialog-heading > button:hover { background: var(--n-100); border-color: transparent; color: var(--n-900); }
/* Rótulos previos al título («kickers»): decorativos, se ocultan. Los que dan un dato (versión, práctica) pasan a subtítulo bajo el título. */
dialog .eyebrow, dialog .arcade-kicker { display: none; }
dialog .dialog-heading > div:has(> .eyebrow) { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
dialog :is(#release-notes-dialog .eyebrow, #sim-p-badge-id) { display: block; order: 2; font: 500 var(--fs-sm)/1.4 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--n-700); }
dialog .dialog-heading > div > h2 { order: 1; }
dialog .dialog-heading > div > p { order: 3; }

/* ── 10 · Notificaciones y diagnóstico ───────────────────────────────────────── */
.studio-shell #toast, body > #toast { background: var(--n-950); color: var(--z-on-dark); border: 0; border-radius: var(--r-md); box-shadow: var(--sh-2); font: 500 var(--fs-md)/1.4 var(--font-ui); padding: var(--sp-3) var(--sp-4); }
.studio-shell #diagnostics-panel > summary { font: 600 var(--fs-xs)/1 var(--font-ui); }
.studio-shell .diagnostics-heading button { width: 32px; padding: 0; background: transparent; border-color: transparent; }

/* ── 11 · Movimiento reducido: el estado se comunica sin desplazamientos ─────── */
@media (prefers-reduced-motion: reduce) {
  dialog[open] { animation: none; }
  .studio-shell :is(button, .button):active { transform: none; }
}

/* ── 12 · Tarjetas de práctica ───────────────────────────────────────────────── */
.practice-card-actions { display: flex; flex-wrap: nowrap; gap: var(--sp-2); }
.practice-card-actions :is(button, .button) { min-height: 28px; padding: 0 var(--sp-2); font-size: var(--fs-sm); gap: 5px; flex: 0 0 auto; }
.practice-card-actions .primary { flex: 1 1 auto; }
.practice-card-actions .i { width: 14px; height: 14px; }

/* ── 13 · Inspector: sin barras laterales de color y sin tarjetas dentro de tarjetas ── */
.studio-shell .inspector { background: var(--n-25); border-left: 1px solid var(--n-200); }
.studio-shell .inspector-title { padding: 0 var(--sp-3); min-height: 40px; border-bottom: 1px solid var(--n-200); background: var(--n-0); }
.studio-shell .inspector-title strong { font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--n-700); }
.studio-shell .property-section-title { margin: var(--sp-4) 0 var(--sp-2); padding: var(--sp-3) 0 0; border-left: 0; border-top: 1px solid var(--n-200); font: 700 var(--fs-xs)/1.3 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--n-700); }
.studio-shell .component-heading { align-items: center; gap: var(--sp-3); }
.studio-shell .component-heading > div:not(.component-preview) { display: flex; flex-direction: column; }
.studio-shell .component-heading .eyebrow { order: 2; font: 500 var(--fs-xs)/1.3 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--n-600); }
.studio-shell .component-heading h2 { order: 1; font: 700 var(--fs-xl)/1.25 var(--font-ui); letter-spacing: -.005em; margin: 0; }
.studio-shell .signal-list { border: 0; padding: 0; background: transparent; gap: var(--sp-2); }
.studio-shell .signal-card { background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-sm); box-shadow: none; }
.studio-shell .signal-field { background: var(--n-25); border-color: var(--n-200); box-shadow: none; }

/* ── 14 · Biblioteca: rejilla compacta para que los nombres no se partan ─────── */
.studio-shell :is(.plant-library-item, .library-tool) { grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-2); padding: 6px; min-height: 52px; }
.studio-shell :is(.plant-library-entry, .library-entry) { grid-template-columns: minmax(0, 1fr) 28px; gap: 0; }
.studio-shell .plant-library-item > span:nth-child(2) { overflow-wrap: break-word; hyphens: auto; }

/* ── 15 · Barras: si no caben, se desplazan en lugar de pisarse ──────────────── */
.studio-shell :is(.canvas-toolbar, .plant-toolbar) { overflow-x: auto; scrollbar-width: none; }
.studio-shell :is(.canvas-toolbar, .plant-toolbar)::-webkit-scrollbar { display: none; }
.studio-shell :is(.canvas-toolbar, .plant-toolbar) > * { flex-shrink: 0; }
.studio-shell .statusbar :is(.status-release, .app-version) { display: inline-flex; align-items: center; }

/* ── 16 · Marcadores de estado sin barras de color ───────────────────────────── */
#mapping-dialog tr[data-binding="physical"] td:first-child { border-left: 0; }
#mapping-dialog tr[data-binding="physical"] { background: color-mix(in srgb, var(--accent-50) 60%, transparent); }
.practice-mission-box { border: 1px solid var(--accent-200); background: var(--accent-50); color: var(--n-900); border-radius: var(--r-sm); }
#hardware-dialog .connection-notice { border-left: 1px solid var(--n-200); border: 1px solid var(--n-200); background: var(--n-25); border-radius: var(--r-sm); }
.practice-guide .pg-narration { border-left: 0; border: 1px solid var(--n-200); border-radius: var(--r-sm); }
#toast[data-tone=success] { border-left: 1px solid var(--n-200) !important; }
.board-chip { background: var(--n-950); border: 1px solid var(--n-850); color: var(--z-on-dark); }

/* ── 17 · Casillas de comprobación y estado vacío (sustituyen glifos Unicode) ─── */
.check-box { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 1.5px solid var(--accent-600); border-radius: var(--r-xs); }
.scene-empty > span .i { width: 44px; height: 44px; stroke-width: 1.1; }
.practice-detail-block h4 { display: flex; align-items: center; gap: 8px; }
.practice-detail-block h4 .i { color: var(--accent-600); }
.mission-box-head .icon { display: inline-flex; color: var(--accent-600); }
/* La carga circula sobre la banda: su nombre y su señal van debajo, donde no los tapan las piezas */
.scene-object[data-kind="conveyor"] .object-caption { bottom: auto; top: calc(100% + 4px); }
.scene-object[data-kind="conveyor"] .object-signal { top: calc(100% + 20px); }

/* ── 18 · Símbolos Ladder vectoriales en paleta y menú de inserción ───────────── */
.ladder-sym { display: block; width: 48px; height: 34px; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: butt; stroke-linejoin: round; }
.ladder-sym text { fill: currentColor; stroke: none; font: 600 19px/1 var(--font-mono); text-anchor: middle; }
.studio-shell .library-symbol { display: flex; align-items: center; justify-content: center; color: var(--n-700); transition: color var(--dur-1) var(--ease-out); }
.studio-shell .library-tool:hover .library-symbol, #insert-options button:hover .library-symbol { color: var(--accent-600); }
#insert-options button { display: flex; align-items: center; gap: 10px; }
#library .library-tool { grid-template-columns: 48px minmax(0, 1fr); }

/* ── 19 · Tabla de símbolos: cabecera de la zona de asignación ─────────────────── */
#mapping-dialog .section-title { display: flex; align-items: center; gap: 12px; }
#mapping-dialog .section-title strong { flex: none; white-space: nowrap; }
#add-variable { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }

/* ── 20 · Vista dividida: las herramientas se parten en dos filas en lugar de cortarse ─── */
.workspace-content[data-view="split"] :is(.canvas-toolbar, .plant-toolbar) { height: auto; min-height: 40px; flex: 0 0 auto; flex-wrap: wrap; row-gap: 4px; padding-block: 4px; overflow: visible; }
.workspace-content[data-view="split"] .canvas-toolbar > .ladder-tools { flex: 1 1 0; min-width: 0; flex-wrap: wrap; row-gap: 4px; }

/* ── 21 · Pie del inspector siempre dentro de la ventana ───────────────────────── */
.property-actions { bottom: 0; padding: 12px 0; }

/* ── 22 · Panel de ayuda «i»: jerarquía de lectura (el azul queda para señales) ─── */
.library-guide { border: 1px solid var(--n-200); border-radius: var(--r-md); box-shadow: var(--sh-3); background: var(--n-0); }
.library-guide .library-guide-kicker { color: var(--n-500); font: 500 var(--fs-2xs)/1.2 var(--font-mono); letter-spacing: .08em; }
.library-guide > strong { font: 700 var(--fs-lg)/1.3 var(--font-ui); color: var(--n-900); }
.library-guide .library-guide-description { color: var(--n-600); font: 400 var(--fs-sm)/1.45 var(--font-ui); }
.library-guide .behavior-demo small { color: var(--n-600); font: 400 var(--fs-xs)/1.4 var(--font-mono); }

/* ── 23 · Asas de redimensionado: barra discreta centrada en lugar del glifo ⋮ ──── */
.panel-grip { display: flex; align-items: center; justify-content: center; font-size: 0; color: transparent; }
.panel-grip::after { content: ""; width: 2px; height: 28px; border-radius: 1px; background: var(--n-400); opacity: 0; transition: opacity var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.panel-grip:hover, .panel-grip:focus-visible { background: color-mix(in srgb, var(--accent-200) 40%, transparent); }
.panel-grip:hover::after, .panel-grip:focus-visible::after { opacity: 1; background: var(--accent-500); }

/* ── 24 · Sin franjas laterales de color: peldaño seleccionado e insignias de tiempo ── */
.rung-block { border-left: 1px solid var(--n-200); }
.rung-block.selected { border-color: var(--accent-400); box-shadow: 0 0 0 1px var(--accent-400), var(--sh-1); }
.badge-time, .modal-badge-time { display: inline-flex; align-items: center; gap: 4px; }
.badge-time .i, .modal-badge-time .i { width: 12px; height: 12px; }

/* ── 25 · Contraste AA sobre fondos tintados ──────────────────────────────────── */
.library-guide .library-guide-kicker, .rung-number { color: var(--n-600); }
.chip-pin.virtual, .pin-capacity-note, .cap-sep, .cap-total { color: var(--n-700); }

/* ── 25 · Puertos con polaridad, imán y rechazo ────────────────────────────────────────────────────────────
   Cada boca es un anillo centrado en su punto de acople: ámbar = piezas, azul = líquido. Al arrastrar, las que aceptan la pieza
   pulsan en verde y las que la rechazan se apagan en rojo; el acople completado destella y se oye un «clac». */
.dock-port { --port: var(--n-600); min-width: 14px; height: 14px; padding: 0 3px; transform: translate(-50%, -50%); justify-content: center; gap: 0; border: 2px solid var(--port); border-radius: 999px; background: var(--n-0); color: var(--port); font: 700 8px/10px var(--font-mono); box-shadow: 0 1px 3px rgb(20 32 54 / .28); transition: opacity var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.dock-port.medium-cargo { --port: #b86f00; }
.dock-port.medium-liquid { --port: var(--accent-600); }
.dock-port.role-surface, .dock-port.role-sense, .dock-port.role-mount, .dock-port.role-wall { min-width: 10px; height: 10px; padding: 0; border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg); }
.dock-port::after { content: ""; position: absolute; width: 0; height: 0; border: 4px solid transparent; pointer-events: none; }
.dock-port.role-surface::after, .dock-port.role-sense::after, .dock-port.role-mount::after, .dock-port.role-wall::after { display: none; }
.dock-port[data-dir="r"][data-role="out"]::after, .dock-port[data-dir="l"][data-role="in"]::after { left: 100%; top: 50%; margin: -4px 0 0 1px; border-left-color: var(--port); border-right-width: 0; }
.dock-port[data-dir="l"][data-role="out"]::after, .dock-port[data-dir="r"][data-role="in"]::after { right: 100%; top: 50%; margin: -4px 1px 0 0; border-right-color: var(--port); border-left-width: 0; }
.dock-port[data-dir="d"][data-role="out"]::after, .dock-port[data-dir="u"][data-role="in"]::after { top: 100%; left: 50%; margin: 1px 0 0 -4px; border-top-color: var(--port); border-bottom-width: 0; }
.dock-port[data-dir="u"][data-role="out"]::after, .dock-port[data-dir="d"][data-role="in"]::after { bottom: 100%; left: 50%; margin: 0 0 1px -4px; border-bottom-color: var(--port); border-top-width: 0; }
.stage.dragging-object .dock-port, #plant-stage.dragging-object .dock-port { opacity: .9; }
.dock-port.port-offer { opacity: 1 !important; --port: var(--ok); background: var(--ok-bg); border-color: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: port-offer 1s ease-out infinite; z-index: 20; }
.dock-port.port-refuse { opacity: .4 !important; --port: var(--fault); border-style: dashed; background: var(--fault-bg); }
.dock-port.is-magnet-snapped, .dock-port.is-docked { opacity: 1 !important; --port: var(--ok); background: var(--ok); color: var(--n-0); border-color: var(--n-0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 45%, transparent), var(--sh-2); animation: none; transform: translate(-50%, -50%) scale(1.25); }
.dock-port.role-surface.is-docked, .dock-port.role-surface.is-magnet-snapped, .dock-port.role-mount.is-magnet-snapped, .dock-port.role-sense.is-docked, .dock-port.role-wall.is-docked { transform: translate(-50%, -50%) rotate(45deg) scale(1.25); }
.dock-port.port-repel { opacity: 1 !important; --port: var(--fault); background: var(--fault); color: var(--n-0); border-color: var(--n-0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fault) 45%, transparent); animation: port-shake .28s linear 2; }
@keyframes port-offer { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--ok) 0%, transparent); } }
@keyframes port-shake { 25% { margin-left: -3px; } 75% { margin-left: 3px; } }
.scene-object.is-attracted { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ok) 70%, transparent)); transition: transform .16s var(--ease-out); }
.scene-object.is-repelled { animation: object-recoil .3s linear 2; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--fault) 60%, transparent)); }
@keyframes object-recoil { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
.scene-object.just-docked { animation: object-clack .34s var(--ease-out); }
@keyframes object-clack { 0% { scale: 1; } 35% { scale: 1.035; } 100% { scale: 1; } }
.dock-flash { position: absolute; z-index: 60; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 3px solid var(--ok); pointer-events: none; animation: dock-flash .65s ease-out forwards; }
@keyframes dock-flash { from { transform: scale(.6); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }
.link-joint { fill: none; stroke: var(--ok); stroke-width: 2.4; opacity: .85; }
.link-joint.liquid { stroke: var(--accent-500); }
.link-joint.cargo { stroke: #b86f00; }
#plant-stage.simulation-running .link-joint { opacity: .35; }
.process-pipe-flow.flowing { stroke: var(--fluid-color, var(--accent-400)); }
.magnetic-snap-hud { gap: 8px; max-width: 280px; padding: 6px 11px 7px; border-width: 1.5px; align-items: flex-start; white-space: normal; }
.magnetic-snap-hud .hud-icon { flex: none; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-500); color: var(--n-0); }
.magnetic-snap-hud .hud-icon .i { width: 14px; height: 14px; }
.magnetic-snap-hud .hud-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.magnetic-snap-hud .hud-text b { font: 700 var(--fs-xs)/1.3 var(--font-ui); }
.magnetic-snap-hud .hud-text small { font: 400 var(--fs-2xs)/1.35 var(--font-ui); color: var(--n-300); }
.magnetic-snap-hud.is-ok { border-color: var(--ok); }
.magnetic-snap-hud.is-ok .hud-icon { background: var(--ok); }
.magnetic-snap-hud.is-refuse { border-color: var(--fault); animation: hudPop .15s cubic-bezier(.175, .885, .32, 1.275), hud-shake .3s linear .15s 2; }
.magnetic-snap-hud.is-refuse .hud-icon { background: var(--fault); }
@keyframes hud-shake { 25% { margin-left: -4px; } 75% { margin-left: 4px; } }
@media (prefers-reduced-motion: reduce) { .dock-port.port-offer, .dock-port.port-repel, .scene-object.is-repelled, .scene-object.just-docked, .dock-flash, .magnetic-snap-hud.is-refuse { animation: none !important; } }

/* ── 26 · Barras ajustables: asa visible, rango amplio y biblioteca en columnas cuando se ensancha ────────────── */
.panel-grip { width: 10px; right: 0; z-index: 30; }
.inspector .panel-grip { left: 0; right: auto; }
.panel-grip::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 46px; margin: -23px 0 0 -3px; border-radius: 4px; background: var(--n-0); border: 1px solid var(--n-400); box-shadow: 0 1px 3px rgb(20 32 54 / .2); background-image: radial-gradient(circle, var(--n-500) 1px, transparent 1.4px); background-size: 4px 8px; background-position: center 2px; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.panel-grip::after { opacity: 0; }
.panel-grip:hover::before, .panel-grip:focus-visible::before, .panel-grip.is-dragging::before { border-color: var(--accent-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 22%, transparent); }
.panel-grip:hover, .panel-grip:focus-visible, .panel-grip.is-dragging { background: color-mix(in srgb, var(--accent-200) 35%, transparent); }
.sidebar { container-type: inline-size; container-name: library; }
@container library (min-width: 400px) {
  #plant-library:not([hidden]), #library:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; }
  #plant-library .component-group { grid-column: 1 / -1; }
}
@container library (min-width: 600px) {
  #plant-library:not([hidden]), #library:not([hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.library-guide { resize: none !important; }
.library-guide-grip { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; border-radius: 3px; background: linear-gradient(135deg, transparent 0 46%, var(--n-500) 46% 52%, transparent 52% 62%, var(--n-500) 62% 68%, transparent 68% 78%, var(--n-500) 78% 84%, transparent 84%); opacity: .8; }
.library-guide-grip:hover, .library-guide-grip:focus-visible { opacity: 1; background-color: color-mix(in srgb, var(--accent-200) 45%, transparent); outline: none; }
.library-guide[data-custom] { transition: none; }

/* ── 27 · El Supervisor se ancla a la planta ───────────────────────────────────────────────────────────────── */
.plant-pane, .workspace-content { position: relative; }