.vivo-head{padding-bottom:10px}.vivo-head h1{margin:6px 0 2px}.vivo-head .sub{margin:0;color:var(--muted);letter-spacing:.14em}
.vivo-head .meta{font-size:11px;letter-spacing:.14em;color:var(--ink-2)}.back{font-size:13px;color:var(--ink-2)}
.tabs{display:none}.playbar{display:none}
.vivo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"scene net" "scene insp" "scene ctl" "res res" "ppo ppo";gap:14px;align-items:start}
.scene{grid-area:scene;position:sticky;top:72px}.net{grid-area:net}.inspector{grid-area:insp}.controls{grid-area:ctl}.results{grid-area:res}.ppo{grid-area:ppo}
.card.dark{background:#15181e;border-color:#262a31;color:#e7e9ec;padding:10px 12px;box-shadow:0 14px 30px -24px rgba(0,0,0,.8)}
.dhead,.dfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;font-size:11px;letter-spacing:.12em;color:#b9bec7}
.dhead{margin-bottom:8px}.dfoot{margin-top:8px;letter-spacing:.02em}
.chips{color:#8d939c}
.hint-dark{color:#8d939c;font:12px var(--sans);letter-spacing:0}
.hint-dark b{color:#ff8a5c}.hint-dark b.cy{color:#40d8ff}.hint-dark b.gr{color:#6fd65a}
#stage,#net{display:block;width:100%;height:auto;border-radius:2px;background:#101217;touch-action:none}
#stage{cursor:grab}#stage:active{cursor:grabbing}#stage.drag-target{cursor:move}#stage.drag-normal{cursor:alias}
.zone{padding:3px 8px;border-radius:999px;border:1px solid #2f5a39;color:#7fdc92}.zone.out{border-color:#7a2b1c;color:#ff8a5c}
.legend span{display:inline-flex;align-items:center;gap:5px}.lg{display:inline-block;width:9px;height:9px;border-radius:50%}
.lg-neg{border:1.5px solid #9fb6d6}.lg-zero{background:#4a4f58}.lg-pos{background:#ff4b1f;box-shadow:0 0 6px #ff4b1f}
.insp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.inspector h2{margin:0;font-size:18px;display:flex;align-items:center;gap:8px}.inspector h2::before{content:"";width:4px;height:18px;background:var(--signal)}
.joints{display:flex;gap:4px}.joints button{padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--radius);background:#fff;font:600 12px var(--sans);cursor:pointer;color:var(--ink)}
.joints button[aria-pressed=true]{background:var(--graphite);border-color:var(--graphite);color:#f5f5f3}
.bars{display:grid;gap:7px;margin:12px 0 8px}
.axis{display:grid;grid-template-columns:18px minmax(0,1fr) 58px;align-items:center;gap:8px;font:12px var(--mono)}
.track{position:relative;height:10px;background:var(--paper-2);border:1px solid var(--line);border-radius:2px}
.track::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--ink-2)}
.fill{position:absolute;top:0;bottom:0;background:var(--signal)}
.axis .v{text-align:right}
.controls .ctl{margin-bottom:6px}.controls .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 8px}
.controls select{flex:1 1 150px;min-width:0;padding:8px 9px;border:1px solid var(--line-2);border-radius:var(--radius);background:#fff;font:14px var(--sans);color:var(--ink)}
.controls input[type=range]{flex:1 1 160px;accent-color:var(--signal)}
.controls button{padding:8px 12px;border-radius:var(--radius);border:1px solid var(--line-2);background:#fff;font:600 13px var(--sans);cursor:pointer;color:var(--ink)}
.controls button.primary{background:var(--signal);border-color:var(--signal);color:#fff;min-width:110px}
.controls .hint{margin:-4px 0 6px}.chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.results{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:center}
.res{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0}
.res>div{padding:6px 12px;border-right:1px solid var(--line)}.res>div:last-child{border-right:0}
.res dt{font:700 22px var(--mono)}.res dd{margin:2px 0 0;color:var(--muted);font-size:12px}
.res .state dt{font-size:15px;display:flex;align-items:center;gap:7px}.res .state dt::before{content:"";width:10px;height:10px;border-radius:50%;background:#9aa0a8}
.res .state.ok dt::before{background:#55c43b;box-shadow:0 0 8px #55c43b}.res .state.bad dt::before{background:#b3261e}.res .state.run dt::before{background:var(--signal)}
#spark{display:block;width:100%;height:auto;background:var(--paper-2);border:1px solid var(--line);border-radius:2px}
.ppo h2{margin:4px 0 10px}.ppo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ppo h3{margin:0 0 4px;font-size:14px}.ppo p{font-size:13.5px;color:var(--ink-2);margin:0 0 8px}
@media(max-width:1100px){.scene{position:static}.vivo{grid-template-columns:1fr;grid-template-areas:"scene" "net" "insp" "ctl" "res" "ppo"}.ppo-grid{grid-template-columns:1fr 1fr}.results{grid-template-columns:1fr}}
@media(max-width:700px){
  .tabs{display:flex;gap:4px;margin:0 16px 10px;padding:3px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel)}
  .tabs button{flex:1;padding:8px;border:0;border-radius:2px;background:transparent;font:600 14px var(--sans);color:var(--ink-2)}
  .tabs button[aria-selected=true]{background:var(--graphite);color:#f5f5f3}
  .vivo[data-tab=scene] .net,.vivo[data-tab=scene] .inspector{display:none}
  .vivo[data-tab=net] .scene{display:none}
  .vivo{display:flex;flex-direction:column}.results{order:1}.controls{order:2}.ppo{order:3}
  .playbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:6;gap:8px;align-items:center;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(251,251,250,.96);border-top:1px solid var(--line-2);backdrop-filter:blur(6px)}
  .playbar button{padding:10px 12px;border-radius:var(--radius);border:1px solid var(--line-2);background:#fff;font:600 14px var(--sans);color:var(--ink)}
  .playbar button.primary{flex:1;background:var(--signal);border-color:var(--signal);color:#fff}
  .playbar .mono{font-size:12px;color:var(--ink-2)}
  main.vivo{padding-bottom:78px}
  .res{grid-template-columns:repeat(2,minmax(0,1fr))}.res>div:nth-child(2n){border-right:0}.res .state{grid-column:1/-1;border-top:1px solid var(--line)}
  .ppo-grid{grid-template-columns:1fr}.dfoot .hint-dark{display:none}
}
.ring{display:inline-block;width:9px;height:9px;border-radius:50%;border:1.5px solid #40d8ff}
.zone-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.zone-btn{padding:6px 12px;border-radius:999px;border:1px solid #40d8ff;background:transparent;color:#40d8ff;font:600 12px var(--sans);cursor:pointer}
.zone-btn:hover{background:rgba(64,216,255,.12)}
.zone-btn[aria-pressed=true]{border-color:#ff8a5c;color:#ff8a5c}.zone-btn[aria-pressed=true]:hover{background:rgba(255,138,92,.12)}
.version-pick{display:inline-flex;align-items:center;gap:8px}.version-pick select{padding:7px 9px;border:1px solid var(--line-2);border-radius:var(--radius);background:#fff;font:14px var(--sans);color:var(--ink)}
.version-about p{margin:0}

/* DelpaQQ-web: pie de la escena adaptable (aviso de zona + botón + ayuda). */
.scene .dfoot{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.zone-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 10px}
.zone{display:block;min-width:0;padding:5px 10px;border-radius:10px;line-height:1.4;letter-spacing:.06em;overflow-wrap:anywhere}
.zone-btn{white-space:nowrap;min-height:34px}
.scene .dfoot .hint-dark{line-height:1.5}
@media(max-width:560px){
  .zone-row{grid-template-columns:minmax(0,1fr)}
  .zone{letter-spacing:.03em}
  .zone-btn{width:100%;min-height:42px;font-size:13px}
}

/* DelpaQQ-web: menos botones — tres a la vista, el resto en «Más opciones». */
.controls .main-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.controls .main-buttons button{min-height:42px}
.controls .more{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.controls .more summary{cursor:pointer;font:600 13px var(--sans);color:var(--ink-2);padding:6px 0;list-style-position:inside}
.controls .more[open] summary{margin-bottom:6px}
.controls .more .chk select{flex:0 0 auto;padding:4px 6px}
.controls #zone-exit[aria-pressed=true]{border-color:var(--signal);color:var(--signal)}
@media(max-width:700px){
  /* Pausa y Reiniciar ya están en la barra fija de abajo */
  .controls #play,.controls #restart{display:none}
  .controls .main-buttons{grid-template-columns:1fr}
  /* En la columna del celular las tarjetas ocupan todo el ancho (el diseño original usa align-items:start). */
  .vivo>section{align-self:stretch}
}

/* DelpaQQ-web: lenguaje simple (delpaqq-extras.js). */
.version-simple{margin:4px 0 0;max-width:420px;font:14px/1.45 var(--sans);color:var(--ink-2)}
.tech{font-size:12px;color:var(--ink-2)}
.tech summary{cursor:pointer;font:600 12px var(--sans);color:var(--muted);padding:2px 0}
.tech[open] summary{margin-bottom:4px}
.status-box .tech{display:grid;gap:2px;justify-items:inherit}
.stage-wrap{position:relative}
.big-state{position:absolute;left:10px;top:10px;margin:0;padding:8px 14px;border-radius:999px;font:700 16px/1.2 var(--sans);letter-spacing:.01em;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.35);background:rgba(21,24,30,.88);color:#e7e9ec;border:1px solid #3a3f48}
.big-state.run::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#ff8a5c;animation:dv-pulse 1s ease-in-out infinite;vertical-align:1px}
.big-state.ok{background:#1f6b35;border-color:#6fd65a;color:#fff}
.big-state.bad{background:#7a2b1c;border-color:#ff8a5c;color:#fff}
.big-state.pause{background:rgba(21,24,30,.88);color:#b9bec7}
@keyframes dv-pulse{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.big-state.run::before{animation:none}}
.compare-note{position:absolute;left:10px;bottom:10px;right:10px;margin:0;padding:6px 10px;border-radius:8px;background:rgba(64,216,255,.14);border:1px solid rgba(64,216,255,.5);color:#bfefff;font:12px/1.4 var(--sans);pointer-events:none}
.zone-simple{display:block;padding:5px 12px;border-radius:10px;border:1px solid #2f5a39;color:#7fdc92;font:600 13px/1.4 var(--sans)}
.zone-simple.out{border-color:#7a2b1c;color:#ff8a5c}
.hint-mobile{display:none;color:#b9bec7;font:12px/1.4 var(--sans);letter-spacing:0}
.version-plain{font-size:15px;line-height:1.55}
@media(max-width:700px){
  .hint-mobile{display:block}
  .big-state{font-size:14px;padding:6px 11px;left:8px;top:8px}
}
.zone[hidden],.compare-note[hidden]{display:none}

/* DelpaQQ-web: desde 701 px la red es una franja chata ARRIBA de la escena (siempre a la vista, sin pestañas)
   y al lado de la escena va una columna con los botones, los números y la articulación elegida. */
@media(min-width:701px){
  .vivo{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"net net" "scene ctl" "scene res" "scene insp" "scene ." "ppo ppo";gap:12px}
  .scene{position:static}
  .net{padding:6px 10px}.net .dhead{margin-bottom:4px}.net .dfoot{margin-top:4px}
  .controls,.results,.inspector{align-self:start}
  .results{grid-template-columns:1fr;gap:10px}
  .res{grid-template-columns:1fr 1fr}.res>div{padding:6px 8px}.res>div:nth-child(2n){border-right:0}
  .res .state{grid-column:1/-1;border-top:1px solid var(--line)}.res dt{font-size:18px}
  .inspector h2{font-size:16px}
  .ppo-grid{grid-template-columns:1fr}
}
@media(min-width:701px) and (max-width:1100px){
  .vivo-head{padding-top:14px;padding-bottom:8px}.vivo-head h1{font-size:30px;margin:2px 0}
  .vivo{grid-template-columns:minmax(0,1fr) 240px}
}
/* el botón de objetivo al azar vive en la escena, abajo al centro */
.scene-random{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:9px 16px;border-radius:999px;border:1px solid #40d8ff;background:rgba(14,16,20,.85);color:#40d8ff;font:600 14px var(--sans);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);white-space:nowrap}
.scene-random::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:#40d8ff;box-shadow:0 0 8px #40d8ff;vertical-align:0}
.scene-random:hover{background:rgba(64,216,255,.16)}
.scene-random:focus-visible{outline:2px solid #40d8ff;outline-offset:3px}
.compare-note{bottom:60px}
@media(max-width:700px){
  .scene-random{bottom:8px;padding:8px 14px;font-size:13px}
  .controls .main-buttons{display:none}
  .controls .more{margin-top:0;border-top:0;padding-top:0}
}

/* DelpaQQ-web: tema claro / oscuro, igual que la web. En claro todo va en tarjetas blancas con trazos oscuros
   (también la escena); en oscuro, tarjetas grafito. Los lienzos cambian de paleta en doll-vivo.js (PALETTES). */
:root{--hl-signal:#c2360f;--hl-cy:#0a7fb5;--hl-ok:#2f7d1e;--stage-bg:#f1f1ef;--net-neg:#3a6eb2;--net-zero:#b3b4b2;
  --pill-bg:rgba(255,255,255,.94);--pill-ink:var(--ink);--pill-line:var(--line-2);
  --note-bg:rgba(10,132,190,.1);--note-line:rgba(10,132,190,.45);--note-ink:#075e86;
  --ok-line:#9ccf8c;--bad-line:#e7a58f;--grid-line:rgba(28,29,31,.045)}
html[data-theme=dark]{color-scheme:dark;
  --paper:#17191d;--paper-2:#1c1f24;--panel:#24272e;--panel-2:#2c3038;--ink:#f1f0ec;--ink-2:#c7c9d0;--muted:#a4a8b3;--line:#363b45;--line-2:#535966;--edge:#7b818d;
  --signal-ink:#ff987b;--signal-soft:#402a24;--led-ink:#92dca4;--led-soft:#203b29;
  --hl-signal:#ff8a5c;--hl-cy:#40d8ff;--hl-ok:#6fd65a;--stage-bg:#101217;--net-neg:#9fb6d6;--net-zero:#4a4f58;
  --pill-bg:rgba(21,24,30,.88);--pill-ink:#e7e9ec;--pill-line:#3a3f48;
  --note-bg:rgba(64,216,255,.14);--note-line:rgba(64,216,255,.5);--note-ink:#bfefff;
  --ok-line:#2f5a39;--bad-line:#7a2b1c;--grid-line:rgba(255,255,255,.035)}
.taller-grid{background-image:repeating-linear-gradient(30deg,transparent 0 39px,var(--grid-line) 39px 40px),repeating-linear-gradient(150deg,transparent 0 39px,var(--grid-line) 39px 40px)}
.card{box-shadow:0 12px 26px -22px rgba(0,0,0,.45)}
.scene .dhead,.scene .dfoot,.net .dhead,.net .dfoot{color:var(--ink-2)}
.scene .chips,.net .chips,.scene .hint-dark,.net .hint-dark,.hint-mobile{color:var(--muted)}
.hint-dark b{color:var(--hl-signal)}.hint-dark b.cy,.hint-mobile b.cy{color:var(--hl-cy)}.hint-dark b.gr{color:var(--hl-ok)}
#stage,#net{background:var(--stage-bg)}#net{background:var(--panel);border:1px solid var(--line)}#stage{border:1px solid var(--line)}
.lg-neg{border-color:var(--net-neg)}.lg-zero{background:var(--net-zero)}.lg-pos{box-shadow:none}
.big-state,.big-state.pause{background:var(--pill-bg);color:var(--pill-ink);border-color:var(--pill-line)}
.big-state.pause{color:var(--muted)}
.compare-note{background:var(--note-bg);border-color:var(--note-line);color:var(--note-ink)}
.zone-simple,.zone{border-color:var(--ok-line);color:var(--hl-ok)}
.zone-simple.out,.zone.out{border-color:var(--bad-line);color:var(--hl-signal)}
.zone-btn{border-color:var(--hl-cy);color:var(--hl-cy)}
.zone-btn[aria-pressed=true]{border-color:var(--hl-signal);color:var(--hl-signal)}
.ring{border-color:var(--hl-cy)}
.scene-random{background:var(--pill-bg);border-color:var(--hl-cy);color:var(--hl-cy)}
.scene-random::before{background:var(--hl-cy);box-shadow:none}
.scene-random:hover{background:var(--note-bg)}
/* oscuro: botones, selectores y pestañas que eran blancos fijos */
html[data-theme=dark] .controls button:not(.primary),html[data-theme=dark] .joints button,html[data-theme=dark] .playbar button:not(.primary),
html[data-theme=dark] select{background:var(--panel-2);color:var(--ink);border-color:var(--line-2)}
html[data-theme=dark] .joints button[aria-pressed=true],html[data-theme=dark] .tabs button[aria-selected=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
html[data-theme=dark] .playbar{background:rgba(23,25,29,.96)}
.card.scene{padding:10px 12px}
/* el botón de objetivo al azar: como los botones principales (naranja sólido, sin transparencia) */
.scene-random{background:var(--signal);border:1px solid var(--signal);color:#fff;border-radius:var(--radius);min-height:42px;padding:8px 18px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.scene-random::before{display:none}
.scene-random:hover{background:var(--signal-ink);border-color:var(--signal-ink)}
.scene-random:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
/* colores de la casa en los estados: verde = LED (--led*), rojo = señal (--signal*), avisos neutros como las tarjetas */
:root{--hl-ok:var(--led-ink)}
html[data-theme=dark]{--hl-ok:var(--led-ink);--ok-line:#2f5a39}
.big-state.ok{background:var(--led-soft);border-color:var(--led);color:var(--led-ink)}
.big-state.bad{background:var(--signal-soft);border-color:var(--signal);color:var(--signal-ink)}
.big-state.run::before{background:var(--signal)}
.compare-note{background:var(--pill-bg);border-color:var(--line-2);color:var(--ink-2)}
.controls input[type=checkbox],.controls input[type=range]{accent-color:var(--signal)}