/* Preparación del mando (setup.js): pantallas de una sola acción, grandes y centradas. */
.lab-setup { position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain; padding: 20px 16px max(24px, env(safe-area-inset-bottom)); background: var(--t-paper); }
.lab-setup__card { width: 100%; max-width: 620px; min-height: 100%; margin: 0 auto; padding: 22px 22px 18px; border: 1px solid var(--t-line-2); border-radius: 16px; background: var(--t-panel); display: flex; flex-direction: column; align-items: center; text-align: center; }
.lab-setup [hidden] { display: none !important; }

/* pasos: cuatro rayitas (el texto queda para lectores de pantalla) */
.lab-setup__steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 14px; width: 100%; max-width: 280px; }
.lab-setup__steps li { flex: 1; height: 5px; border-radius: 3px; background: var(--t-line); font-size: 0; color: transparent; overflow: hidden; }
.lab-setup__steps li.is-done { background: var(--t-ink-2); }
.lab-setup__steps li[aria-current] { background: var(--t-signal); }

.lab-setup__chip { margin: 0 0 6px; padding: 6px 14px; border-radius: 999px; background: var(--t-led-soft); color: #1f6b2c; font: 600 13px/1.2 var(--t-mono); animation: ls-pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }

.lab-setup__stage { width: 100%; display: grid; place-items: center; }
.lab-setup__art { width: 100%; display: grid; place-items: center; }
.ls-art { width: min(100%, 320px); height: auto; overflow: visible; }
.lab-setup:not(.is-controller) .ls-art { width: min(100%, 420px); }

.lab-setup__title { margin: 14px 0 4px; font: 400 clamp(34px, 8vw, 54px)/1 var(--t-display); letter-spacing: .01em; color: var(--t-ink); }
.lab-setup__title:focus { outline: none; }
.lab-setup__text { margin: 0 0 6px; color: var(--t-ink-2); font-size: 17px; line-height: 1.4; }
.lab-setup__notice { margin: 6px 0 0; font-size: 14px; color: var(--t-signal-ink); }
.lab-setup__notice:empty { display: none; }
.lab-setup__checks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.lab-setup__pair { width: 100%; display: grid; justify-items: center; }
.lab-setup__pair .lab-pair { max-width: 360px; min-width: 0; margin: 10px 0 4px; text-align: left; }
.lab-setup__pair .lab-pair__qr { max-width: 240px; }
.lab-setup__pair .lab-pair__url { overflow-wrap: anywhere; }

/* aro de «quieto» */
.lab-setup__ring { margin: 10px 0 2px; }
.lab-setup__ring svg { display: block; width: 88px; height: 88px; transform: rotate(-90deg); }
.ls-ring-bg { fill: none; stroke: var(--t-line); stroke-width: 5; }
.ls-ring-fill { fill: none; stroke: var(--t-signal); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset .12s linear; }
.lab-setup__ring.is-full .ls-ring-fill { stroke: var(--t-led); }
.lab-setup__ring.is-full { animation: ls-pop .4s ease-out; }

/* prueba: dos objetivos y el punto */
.lab-setup__preview { position: relative; width: 100%; max-width: 520px; height: 150px; margin: 6px 0 0; }
.lab-setup__preview::before { content: ''; position: absolute; top: 50%; left: 22%; right: 22%; border-top: 2px dashed var(--t-line-2); }
.lab-setup__mark { position: absolute; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; border: 4px solid var(--t-line-2); background: var(--t-paper-2); transition: background .2s, border-color .2s; }
.lab-setup__mark.is-left { left: 16%; }
.lab-setup__mark.is-right { left: 84%; }
.lab-setup__preview.want-left .is-left, .lab-setup__preview.want-right .is-right { border-color: var(--t-signal); animation: ls-want 1s ease-in-out infinite; }
.lab-setup__preview.got-left .is-left, .lab-setup__preview.got-right .is-right { border-color: var(--t-led); background: var(--t-led-soft); animation: ls-pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.lab-setup__preview.got-left .is-left::after, .lab-setup__preview.got-right .is-right::after { content: '✓'; display: grid; place-items: center; height: 100%; font: 700 40px/1 var(--t-body); color: #1f6b2c; }
.lab-setup__cursor { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--t-signal); box-shadow: 0 0 0 6px var(--t-signal-soft); transition: left .07s linear; z-index: 1; }
.lab-setup__preview.is-vertical { width: 150px; height: 300px; }
.lab-setup__preview.is-vertical::before { top: 22%; bottom: 22%; left: 50%; right: auto; border-top: 0; border-left: 2px dashed var(--t-line-2); }
.lab-setup__preview.is-vertical .lab-setup__mark { left: 50%; }
.lab-setup__preview.is-vertical .lab-setup__mark.is-left { top: 84%; }
.lab-setup__preview.is-vertical .lab-setup__mark.is-right { top: 16%; }
.lab-setup__preview.is-vertical .lab-setup__cursor { left: 50%; transition: top .07s linear; }

/* botones: el grande del paso y los secundarios, discretos */
.lab-setup__buttons { display: grid; gap: 10px; width: 100%; max-width: 360px; margin-top: 12px; justify-items: center; }
.lab-setup__buttons .lab-btn { width: 100%; min-height: 54px; }
.lab-setup .lab-btn.is-primary { color: var(--t-ink); }
.lab-setup__tap { display: grid; place-items: center; width: min(78vw, 280px); padding: 8px; border: 0; border-radius: 28px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lab-setup__tap:focus-visible { outline: 3px solid var(--t-signal); }
.lab-setup__tap[disabled] { opacity: .6; }
.lab-setup__links { margin: 8px 0 0; }
.lab-setup__link { border: 0; background: none; padding: 10px 12px; color: var(--t-muted); font: 600 14px var(--t-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lab-setup__slider { display: grid; gap: 6px; width: 100%; max-width: 420px; margin: 10px 0 0; font-size: 14px; color: var(--t-ink-2); }
.lab-setup__slider input { width: 100%; min-width: 0; height: 48px; accent-color: var(--t-signal); }
.lab-setup__foot { margin: auto 0 0; padding-top: 18px; font-size: 12px; line-height: 1.5; color: var(--t-muted); }

/* ---- postura (ilustraciones de la IA de diseño: /lab/_comun/img/setup/) ---- */
.ls-pose-art { position: relative; width: min(100%, 300px); aspect-ratio: 1; }
.lab-setup:not(.is-controller) .ls-pose-art { width: min(100%, 360px); }
.ls-pose-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ls-arrow { position: absolute; inset: 6% 4% auto auto; width: 34%; height: 34%; fill: none; stroke: var(--t-signal); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
/* fuera de la postura: demostración — la otra pose se desvanece y aparece la pedida, con la flecha */
.ls-pose-art.is-demo .ls-from { animation: ls-from 2.8s ease-in-out infinite; }
.ls-pose-art.is-demo .ls-to { animation: ls-to 2.8s ease-in-out infinite; }
.ls-pose-art.is-demo .ls-arrow { animation: ls-arrow 2.8s ease-in-out infinite; }
/* dentro de la postura: solo la pose pedida, quieta (sin instrucciones contradictorias) */
.ls-pose-art.is-in .ls-from, .ls-pose-art.is-in .ls-arrow { opacity: 0; }
.ls-pose-art.is-in .ls-to { opacity: 1; }
.ls-tap-img { display: block; width: 100%; height: auto; animation: ls-tap 1.6s ease-in-out infinite; }
.lab-setup__tap:active .ls-tap-img { transform: scale(.96); }

/* celebración */
.ls-burst line { stroke-width: 5; stroke-linecap: round; transform-origin: 80px 80px; animation: ls-ray .9s ease-out both; }
.ls-ray-a { stroke: var(--t-signal); }
.ls-ray-b { stroke: var(--t-led); }
.ls-check-bg { fill: var(--t-led); animation: ls-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; transform-origin: 80px 80px; }
.ls-check { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; animation: ls-draw .35s .25s ease-out forwards; }

/* botón fijo para volver a centrar (mando, durante la partida) */
.lab-recenter { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 90; display: grid; justify-items: center; gap: 2px; width: 74px; padding: 8px 4px 6px; border: 2px solid var(--t-ink); border-radius: 18px; background: var(--t-panel); color: var(--t-ink); font: 600 11px/1 var(--t-mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); cursor: pointer; }
.lab-recenter svg { width: 44px; height: 44px; }
.lab-recenter:active { transform: scale(.95); }
.lab-recenter[hidden] { display: none; }

@keyframes ls-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ls-want { 50% { transform: scale(1.08); } }
@keyframes ls-from { 0%, 25% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ls-to { 0%, 30% { opacity: 0; } 55%, 100% { opacity: 1; } }
@keyframes ls-arrow { 0%, 15% { opacity: 0; } 30%, 55% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes ls-tap { 50% { transform: scale(.97); } }
@keyframes ls-ray { 0% { transform: scale(.2); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes ls-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ls-pose-art.is-demo .ls-from, .ls-pose-art.is-demo .ls-arrow { animation: none; opacity: 0; }
  .ls-pose-art.is-demo .ls-to { animation: none; opacity: 1; }
  .ls-tap-img, .lab-setup__preview .lab-setup__mark, .lab-setup__chip, .ls-burst line, .ls-check-bg, .lab-setup__ring.is-full { animation: none !important; }
  .ls-check { stroke-dashoffset: 0; animation: none; }
}

@media (max-width: 480px) {
  .lab-setup { padding: 10px 8px max(14px, env(safe-area-inset-bottom)); }
  .lab-setup__card { padding: 16px 14px 14px; }
  .lab-setup__mark { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
  .lab-setup__preview { height: 120px; }
}