/* SANDBOX — el editor de nodos de /playground/ y de la ficha de Plant Lab (js/playground/). Se carga después de case.css (la barra, el pie y la ficha de proyecto).
   Estética de cartel tipográfico: un campo negro y hojas blancas como la del cartel de referencia (columnas, horas, «+», mayúsculas pequeñas junto a numerales enormes).
   Cada nodo es una hoja de papel de esquinas grandes e iguales (--sb-radius), no una caja: cables hechos de cuentas, puertos como gotas. Lo único que no es
   blanco o negro es el papel de los dibujos.
   Orden: página · lienzo · nodos · puertos y cables · barra · controles · móvil · movimiento. */

:root { --pl-soft: rgba(20, 20, 20, .62); --sb-black: var(--accent); --sb-paper: #fff; --sb-radius: 40px; --sb-pad: 28px; }
button, select, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Página /playground/: toda en negro; el lienzo ocupa la pantalla bajo la barra y el pie queda debajo ---------- */
body.pg-black { background: var(--sb-black); color: #fff; }
body.pg-black .case-head { position: fixed; inset: 0 0 auto; height: var(--nav-h); padding: 0; display: block; } /* en móvil la cabecera de proyecto es una fila de la página; aquí es la barra fija de siempre y el lienzo empieza justo debajo */
.pg-app { position: relative; height: calc(100dvh - var(--nav-h)); margin-top: var(--nav-h); }
.pg-app .pgn-root { position: absolute; inset: 0; }

/* ---------- Ficha de Plant Lab: el sandbox es un bloque negro de esquinas blandas a todo el ancho de la columna de imágenes ---------- */
.st-sandbox { position: relative; height: min(80dvh, 800px); overflow: hidden; background: var(--sb-black); border-radius: calc(var(--sb-radius) + 8px); }
.st-sandbox .pgn-root { position: absolute; inset: 0; }

/* ---------- Lienzo: negro con una trama de puntos muy tenue que acompaña al desplazamiento ---------- */
.pgn-root { overflow: hidden; background: var(--sb-black); color: #fff; --ink: #fff; --bg: var(--sb-black); }
.pgn-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .17) 1px, transparent 1.5px); background-size: var(--gs, 28px) var(--gs, 28px); background-position: var(--gx, 0) var(--gy, 0); }
.pgn-viewport.is-panning { cursor: grabbing; }
.pgn-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pgn-wires { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }

/* ---------- Nodos: hojas de papel de esquinas grandes e iguales ---------- */
.pgn-node { --ink: #141414; --bg: var(--sb-paper); position: absolute; width: 308px; color: var(--ink); background: var(--bg); font-size: var(--fs-s); line-height: var(--lh-ui); letter-spacing: 0; cursor: grab; user-select: none;
  border-radius: var(--sb-radius); outline: 4px solid var(--sb-black); } /* un filo negro recorta cada hoja: dos hojas que se solapan no se funden */
.pgn-node.is-wide { width: 468px; }
.pgn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 23px var(--sb-pad) 4px; cursor: grab; touch-action: none; user-select: none; }
.pgn-head:active { cursor: grabbing; }
.pgn-title { text-wrap: balance; font-family: var(--font-display); font-size: var(--fs-node); font-weight: var(--fw-title); letter-spacing: -.055em; line-height: .95; }
.pgn-num { margin-left: auto; font-family: var(--font-display); font-size: var(--fs-node); font-weight: var(--fw-title); letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; text-align: right; }
.pgn-x { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin: 2px -6px 0 0; padding: 0; border: 0; border-radius: 999px; background: none; opacity: .6; transition: opacity .2s, background-color .2s; }
.pgn-x:hover { opacity: 1; background: rgba(20, 20, 20, .08); }
.pgn-io { padding: 14px 0 6px; }
.pgn-row.is-in, .pgn-row.is-out { display: block; padding: 3px var(--sb-pad); font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.pgn-row.is-out { text-align: right; }
.pgn-body { display: grid; gap: 16px; padding: 8px var(--sb-pad) var(--sb-pb, 28px); }
/* Padding óptico: la tinta (no la caja) queda a 28 px de los cuatro bordes. El último elemento de cada nodo trae su propio hueco interior (el aire de la línea de texto, el del
   deslizador, el del botón), así que el relleno de abajo se descuenta: valores medidos sobre la captura de cada nodo (tinta a 28 px del borde de abajo, como el de arriba). */
.pgn-node[data-type="seed"] { --sb-pb: 27px; }
.pgn-node[data-type="ink"] { --sb-pb: 27px; }
.pgn-node[data-type="medium"] { --sb-pb: 26px; }
.pgn-node[data-type="paper"], .pgn-node[data-type="stroke"], .pgn-node[data-type="grain"], .pgn-node[data-type="hand"] { --sb-pb: 25px; }
.pgn-node[data-type="plant"] { --sb-pb: 23px; }
.pgn-node[data-type="pose"], .pgn-node[data-type="shape"], .pgn-node[data-type="study"] { --sb-pb: 22px; }
.pgn-body:empty { display: none; padding-bottom: 14px; }
.pgn-body > * { min-width: 0; }
.pgn-node :is(input, select, button, a, label, .pg-pick, .pg-medium, .pg-ink) { cursor: pointer; touch-action: manipulation; } /* sin espera de doble toque en iOS */
.pgn-node input[type="text"] { cursor: text; user-select: text; -webkit-user-select: text; }
.pgn-node .pgn-port { touch-action: none; } /* un cable se tira en cualquier dirección: el dedo que empieza en un puerto nunca desplaza la página */

/* ---------- Puertos (gotas que se montan sobre el borde de la hoja) y cables (cuentas sobre un hilo) ---------- */
.pgn-port { touch-action: none; position: absolute; width: 18px; height: 18px; margin-top: 0; padding: 0; border: 3px solid var(--sb-black); border-radius: 999px; background: #fff; transition: transform .2s var(--ease-out); }
.pgn-row.is-in .pgn-port { left: -9px; }
.pgn-row.is-out .pgn-port { right: -9px; }
.pgn-port::before { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: transparent; transition: background-color .2s; }
.pgn-port::after { content: ""; position: absolute; inset: -5px -10px; } /* área de toque más grande que la gota, sin pisar la del puerto de la fila de al lado */
.pgn-port.is-linked::before { background: var(--sb-black); }
.pgn-port.is-pending { outline: 2px solid #fff; outline-offset: 3px; }
.is-linking .pgn-port:not(.is-target):not(.is-pending) { opacity: .3; }
.pgn-port.is-target { transform: scale(1.4); }
.pgn-port.is-target::before { background: var(--sb-black); }
.pgn-port:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.pgn-wire { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0 8; }
.pgn-wire.is-temp { stroke-width: 4.4; stroke-dasharray: 0 12; }
.pgn-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; }
.pgn-wire-x { opacity: 0; cursor: pointer; pointer-events: all; transition: opacity .16s; }
.pgn-wire-x circle { fill: #fff; stroke: var(--sb-black); stroke-width: 3; r: 11px; }
.pgn-wire-x path { fill: none; stroke: var(--sb-black); stroke-width: 1.6; stroke-linecap: round; }
.pgn-edge { pointer-events: auto; }
.pgn-wire-x.is-hover, .pgn-wire-x:hover { opacity: 1; }
@media (pointer: coarse) { .pgn-wire-x { opacity: 1; } }

/* ---------- Barra y zoom: pastillas blancas sobre el negro ---------- */
.pgn-bar { position: absolute; bottom: 16px; left: var(--edge); z-index: 3000; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.pgn-zoom { position: absolute; right: var(--edge); bottom: 16px; z-index: 3000; display: flex; gap: 8px; }
.pgn-bar .pg-btn, .pgn-zoom .pg-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: var(--sb-black); } /* opacas: pasan por encima de las hojas blancas */
@media (hover: hover) and (pointer: fine) { .pgn-bar .pg-btn:hover, .pgn-zoom .pg-btn:hover { background: #fff; color: var(--sb-black); } }
.pgn-menu { --ink: #141414; --bg: var(--sb-paper); position: absolute; bottom: 52px; left: 0; display: grid; gap: 16px; min-width: 240px; padding: 24px var(--sb-pad) 20px; color: var(--ink); background: var(--bg); border-radius: var(--sb-radius); outline: 4px solid var(--sb-black); }
.pgn-menu[hidden] { display: none; }
.pgn-menu-group p { margin-bottom: 4px; font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: var(--fw-bold); }
.pgn-menu-group button { display: block; width: 100%; padding: 5px 0; border: 0; background: none; font-size: var(--fs-s); text-align: left; }
.pgn-menu-group button:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- Controles: texto en mayúsculas pequeñas con «+», valores en minúscula, hilos y gotas ---------- */
.pg-btn { min-height: 36px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font-size: var(--fs-s); line-height: 1; transition: transform .16s var(--ease-out), background-color .2s, color .2s; }
.pg-btn:active { transform: scale(.97); }
.pg-btn.is-icon { width: 36px; padding: 0; }
.pg-btn.is-primary { background: var(--ink); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .pg-btn:not(.is-primary):hover { background: var(--ink); color: var(--bg); } }
.pg-link { padding: 6px 0; border: 0; background: none; font-size: var(--fs-s); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-align: left; }
.pg-link:hover { text-decoration-thickness: 2px; }
.pg-seed { display: flex; align-items: center; gap: 8px; }
.pg-seed input { width: 4.4ch; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; font-family: var(--font-display); font-size: var(--fs-numeral); font-weight: var(--fw-title); letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-note { font-size: var(--fs-s); line-height: var(--lh-ui); }
.pg-note:empty { display: none; }

.pg-tabs { display: flex; flex-wrap: wrap; column-gap: 16px; }
.pg-tab { padding: 6px 0; border: 0; background: none; font-size: var(--fs-s); color: var(--pl-soft); text-underline-offset: 6px; text-decoration-thickness: 1px; }
.pg-tab:hover { color: var(--ink); }
.pg-tab[aria-pressed="true"] { color: var(--ink); text-decoration: underline; }

.pg-media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.pg-medium { display: block; padding: 0; border: 0; background: none; text-align: left; font-size: var(--fs-s); line-height: var(--lh-ui); letter-spacing: 0; }
.pg-medium canvas { display: block; width: 100%; height: auto; aspect-ratio: 104 / 28; margin-bottom: 4px; border-radius: 10px; background: var(--panel); }
.pg-medium[aria-pressed="true"] canvas { outline: 2px solid var(--ink); outline-offset: 3px; }
.pg-medium[aria-pressed="true"] span { font-weight: var(--fw-bold); }
.pg-inks { display: flex; flex-wrap: wrap; gap: 12px; }
.pg-ink { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px; }
.pg-ink[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 3px; }

.pg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; font-size: var(--fs-s); line-height: var(--lh-ui); letter-spacing: 0; }
.pg-row + .pg-row { margin-top: 6px; }
.pg-row > :first-child { font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.pg-row > :first-child::before { content: "+"; display: inline-block; width: 1.3em; }
.pg-row output { font-variant-numeric: tabular-nums; }
.pg-row-inline { align-items: center; column-gap: 12px; }
input[type="range"] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: none; color: var(--ink); cursor: pointer; touch-action: pan-y; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: currentColor; }
input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: currentColor; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; border: 0; border-radius: 999px; background: currentColor; transition: transform .16s var(--ease-out); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 999px; background: currentColor; }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.3); }

/* Selector que enseña su valor: el <select> real va encima, invisible, y funciona el del sistema (teclado, móvil, lector de pantalla) */
.pg-pick { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 7.5em; padding: 6px 0; border-bottom: 1px solid var(--ink); }
.pg-pick.is-wide { width: 100%; }
.pg-shown { flex: 1; text-align: right; }
.pg-pick.is-wide .pg-shown { text-align: left; }
.pg-pick::after { content: ""; flex: none; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; }
.pg-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pg-pick select option { color: #141414; background: #fff; }
.pg-pick:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.pg-pick.is-locked .pg-shown { font-weight: var(--fw-bold); }
.pg-switch { padding: 6px 0; border: 0; background: none; font-size: var(--fs-s); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pg-switch[aria-pressed="true"] { font-weight: var(--fw-bold); }
.pgn-node input:focus-visible { outline-offset: 2px; }

/* La hoja de papel, su pie en mayúsculas (como la lista de nombres del cartel) y la ficha de la planta */
.pgn-sheet { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 24px; background: var(--panel); }
.pgn-cap { text-wrap: pretty; font-size: var(--fs-xs); letter-spacing: var(--tracking-label); line-height: 1.45; text-transform: uppercase; overflow-wrap: anywhere; }
.pgn-species { font-weight: var(--fw-bold); font-style: italic; }
.pgn-traits { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; }
.pgn-traits dt { font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgba(20, 20, 20, .75); }
.pgn-traits dt::before { content: "+"; display: inline-block; width: 1.3em; }
.pgn-traits dd { text-align: right; }
.pgn-traits dd.is-locked { font-weight: var(--fw-bold); }

/* ---------- Móvil ---------- */
@media (pointer: coarse) {
  .pg-pick select { font-size: var(--fs-m); } /* con menos de 16 px iOS acerca la página al enfocar */ .pg-ink { width: 34px; height: 34px; } .pg-tab, .pg-link, .pg-switch { padding-block: 10px; }
  .pgn-x { width: 40px; height: 40px; margin: -8px -14px -8px 0; } .pgn-row.is-in, .pgn-row.is-out { padding-block: 10px; } .pgn-port::after { inset: -10px -16px; } /* filas más separadas: cada puerto tiene su área de dedo (38 px) sin solaparse */ .pgn-wire-x circle { r: 16px; }
  .pg-btn { min-height: 44px; } .pg-btn.is-icon { width: 44px; }
  /* En la ficha, un dedo que empieza dentro del sandbox sigue desplazando la página (vertical); para mover el lienzo en vertical, Full screen */
  .st-sandbox .pgn-viewport { touch-action: pan-y; }
}
@media (max-width: 700px) {
  .pg-app { height: 72dvh; } /* deja una franja de página debajo para poder seguir bajando con el dedo (el lienzo no hace scroll) */
  .st-sandbox { height: 64dvh; border-radius: calc(var(--sb-radius) + 4px); }
  .pgn-node { width: 288px; }
  .pgn-node.is-wide { width: 340px; }
}

/* ---------- Movimiento: el sandbox sube un poco al abrir; los nodos nuevos brotan; sin «reducir movimiento», nada de esto ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pg-app .pgn-root, .st-sandbox { animation: pgn-in .6s var(--ease-out) both; }
  @keyframes pgn-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0; } }
  .pgn-node.is-new { animation: pgn-grow .45s var(--ease-out) both; }
  @keyframes pgn-grow { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
}
@media (prefers-reduced-motion: reduce) { .pg-btn, .pgn-port, input[type="range"]::-webkit-slider-thumb { transition: none; } }