/* Base común de los Labs interactivos (papel, tinta, acento naranja).
   Tokens copiados de views/website/layout/layout.html (:root --t-*). Si cambian allí,
   actualizar aquí: los demos corren en iframes y no heredan las variables del padre. */
:root {
  --t-mono: "JetBrains Mono", "Cascadia Mono", Consolas, Menlo, monospace;
  --t-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --t-body: "Mulish", "Muli", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-paper: #ededeb;
  --t-paper-2: #f5f5f3;
  --t-panel: #fbfbfa;
  --t-ink: #1c1d1f;
  --t-ink-2: #3f4145;
  --t-muted: #646669;
  --t-line: #d2d2cf;
  --t-line-2: #b3b4b2;
  --t-signal: #ff4b1f;
  --t-signal-ink: #c2360f;
  --t-signal-soft: #ffe5dc;
  --t-led: #55c43b;
  --t-led-soft: #e3f4dc;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--t-paper); color: var(--t-ink); font: 15px/1.5 var(--t-body); -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--t-signal); outline-offset: 3px; }
[hidden] { display: none !important; }

.lab-label { font: 400 11px/1.4 var(--t-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--t-muted); margin: 0; }
.lab-title { font: 400 clamp(30px, 5vw, 48px)/.95 var(--t-display); letter-spacing: .01em; margin: 0; }
.lab-grid {
  background-color: var(--t-paper-2);
  background-image:
    repeating-linear-gradient(30deg, transparent 0 39px, rgba(28,29,31,.045) 39px 40px),
    repeating-linear-gradient(150deg, transparent 0 39px, rgba(28,29,31,.045) 39px 40px);
}

/* Botones */
.lab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; border-radius: 10px;
  border: 1px solid var(--t-ink); background: var(--t-panel); color: var(--t-ink);
  font: 600 12px/1.2 var(--t-mono); letter-spacing: .08em; text-transform: uppercase;
  touch-action: manipulation; user-select: none;
}
.lab-btn:hover { background: #fff; }
.lab-btn:active { transform: translateY(1px); }
.lab-btn.is-primary { background: var(--t-signal); border-color: var(--t-signal-ink); color: #fff; }
.lab-btn.is-primary:hover { background: #ff5d35; }
.lab-btn.is-ghost { border-color: var(--t-line-2); background: transparent; }
.lab-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* LED de estado */
.lab-led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--t-line-2); box-shadow: 0 0 0 2px var(--t-paper-2); flex: 0 0 auto; }
.lab-led.is-on { background: var(--t-led); box-shadow: 0 0 0 2px var(--t-led-soft); }
.lab-led.is-busy { background: var(--t-signal); box-shadow: 0 0 0 2px var(--t-signal-soft); animation: lab-blink 1.2s steps(2, end) infinite; }
@keyframes lab-blink { 50% { opacity: .25; } }

/* Tarjeta de emparejamiento (PC) */
.lab-pair { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--t-ink); border-radius: 14px; background: var(--t-panel); max-width: 320px; }
.lab-pair__qr { width: 100%; max-width: 188px; aspect-ratio: 1; image-rendering: pixelated; border: 1px solid var(--t-line); border-radius: 8px; background: #fff; justify-self: center; }
.lab-pair__code { font: 600 28px/1 var(--t-mono); letter-spacing: .22em; text-align: center; }
.lab-pair__row { display: flex; align-items: center; gap: 8px; font: 11px/1.4 var(--t-mono); color: var(--t-ink-2); }
.lab-pair__warn { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--t-signal-soft); color: var(--t-signal-ink); font-size: 12px; line-height: 1.45; }
.lab-pair__invite { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--t-line); }
.lab-pair__url { font: 11px/1.4 var(--t-mono); color: var(--t-muted); word-break: break-all; margin: 0; }

/* Aviso flotante */
.lab-toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 50;
  max-width: min(92vw, 420px); padding: 10px 14px; border-radius: 10px;
  background: var(--t-ink); color: #fff; font-size: 13px; line-height: 1.4; text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* Mando (celular) */
.lab-remote { min-height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; }
.lab-remote__status { display: flex; align-items: center; gap: 8px; font: 11px/1.4 var(--t-mono); color: var(--t-ink-2); }
.lab-remote__join { display: grid; gap: 10px; }
.lab-remote__join input {
  min-height: 52px; padding: 8px 12px; border: 1px solid var(--t-ink); border-radius: 10px; background: var(--t-panel);
  font: 600 24px/1 var(--t-mono); letter-spacing: .24em; text-transform: uppercase; text-align: center; color: var(--t-ink);
}
.lab-pad { position: relative; flex: 1 1 auto; min-height: 220px; border: 1px dashed var(--t-line-2); border-radius: 14px; background: var(--t-paper-2); touch-action: none; user-select: none; display: grid; place-items: center; color: var(--t-muted); font: 11px/1.4 var(--t-mono); text-align: center; padding: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }