/* Tablet de la obra (flujo 6): pantalla completa, letras y teclas grandes para usar con guantes y a pleno sol. */
:root { --fondo: #10151c; --texto: #f4f6f8; --suave: #a9b4c0; --acento: #f2a900; --ok: #2fbf71; --error: #ff6b5e; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.tablet { background: var(--fondo); color: var(--texto); font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; }
.tablet__barra { display: flex; justify-content: space-between; padding: 12px 20px; color: var(--suave); font-size: 1.1rem; }
.tablet__pantalla, .tablet__centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 16px; text-align: center; }
.tablet__pantalla[hidden] { display: none; }
.tablet__camara { width: min(90vw, 520px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; transform: scaleX(-1);
  border: 3px solid var(--acento); background: #000; }
.tablet__titulo { font-size: 2rem; font-weight: 700; margin: 0; }
.tablet__saludo { font-size: 2.6rem; font-weight: 800; margin: 0; }
.tablet__detalle { font-size: 1.6rem; color: var(--ok); margin: 0; }
.tablet__texto { font-size: 1.3rem; color: var(--suave); margin: 0; }
.tablet__error { font-size: 1.3rem; color: var(--error); margin: 0; }
.tablet__puntos { font-size: 3rem; letter-spacing: 12px; min-height: 3.6rem; margin: 0; }
.tablet__teclado { display: grid; grid-template-columns: repeat(3, minmax(88px, 120px)); gap: 12px; }
.tablet__tecla { font-size: 2.2rem; font-weight: 700; height: 88px; border-radius: 16px; border: 0; background: #223040;
  color: var(--texto); }
.tablet__tecla:active { background: var(--acento); color: #111; }
.tablet__tecla--chica { font-size: 1.1rem; }
.tablet__tipos { display: flex; gap: 12px; }
.tablet__tipo { font-size: 1.4rem; padding: 14px 28px; border-radius: 999px; border: 2px solid var(--suave); background: transparent;
  color: var(--texto); }
.tablet__tipo[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: #111; font-weight: 700; }
.tablet__boton { font-size: 1.4rem; padding: 16px 32px; border-radius: 12px; border: 0; background: var(--acento); color: #111;
  font-weight: 700; }
.tablet__boton--texto { background: transparent; color: var(--suave); text-decoration: underline; }
.tablet__form { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.tablet__codigo { font-size: 1.8rem; text-align: center; letter-spacing: 4px; padding: 12px; border-radius: 12px;
  border: 2px solid var(--suave); background: #0b0f14; color: var(--texto); width: min(90vw, 420px); }

/* Pantalla de personal: dos botones grandes, el casco que acompaña y las opciones de voz */
.tablet__botones { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 18px; width: min(92vw, 720px); }
.tablet__grande { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 800; letter-spacing: 2px; min-height: 34vh; border: 0;
  border-radius: 24px; color: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.35); }
.tablet__grande:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.tablet__grande--entrada { background: var(--ok); }
.tablet__grande--salida { background: #3f7fc2; }
.tablet__chip { font-size: 1.3rem; font-weight: 800; letter-spacing: 2px; padding: 6px 18px; border-radius: 999px; margin: 0; }
.tablet__chip--entrada { background: var(--ok); color: #fff; }
.tablet__chip--salida { background: #3f7fc2; color: #fff; }
.tablet__opciones { display: flex; gap: 12px; }
.tablet__opcion { font-size: 1.05rem; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--suave); background: transparent;
  color: var(--suave); }
.tablet__opcion[aria-pressed="true"] { border-color: var(--acento); color: var(--acento); }

.casco { width: clamp(90px, 18vh, 150px); height: auto; }
.casco__casco, .casco__visera { fill: var(--acento); }
.casco__franja { fill: #ffd34d; }
.casco__cara { fill: #e9c39b; }
.casco__ojos circle { fill: #1b2430; transform-origin: center; animation: parpadeo 4s infinite; }
.casco__boca { fill: none; stroke: #1b2430; stroke-width: 4; stroke-linecap: round; transform-origin: 60px 96px; }
.casco--habla .casco__boca { animation: hablar .25s infinite alternate; }
.casco--contento .casco__boca { d: path("M44 92q16 16 32 0"); }
.casco--contento { animation: salto .5s ease 2; }
@keyframes parpadeo { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes hablar { from { transform: scaleY(1); } to { transform: scaleY(1.9); } }
@keyframes salto { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .casco__ojos circle, .casco--habla .casco__boca, .casco--contento { animation: none; } }
.tablet__marcando { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: center;
  width: min(96vw, 980px); }
.tablet__ver, .tablet__pin { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tablet__marcando .tablet__camara { width: min(44vw, 420px); }
.tablet__texto--ok { color: var(--ok); font-weight: 800; font-size: 1.6rem; }