/* ============================================================================
   pwa.css — Lo que la PWA añade al sistema de diseño ms-*.

   Todo usa los tokens de tokens.css, así que responde a los temas claro y
   oscuro igual que el servidor. Se toman del boceto de entrada de datos sólo
   las ideas que el servidor no necesitaba: zonas seguras del móvil, barra
   inferior de navegación, teclas táctiles grandes y cifras en monoespaciada.
   ========================================================================== */

:root {
  --pwa-topbar-h: 56px;
  --pwa-nav-h: 64px;
  --pwa-safe-top: env(safe-area-inset-top, 0px);
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-gutter: 16px;   /* margen lateral: el mismo en la barra superior y el contenido */
}

@media (min-width: 768px) {
  :root { --pwa-gutter: 24px; }
}

html, body {
  background: var(--ms-bg);
  /* Sin el rebote al arrastrar: en una tablet de pista se confunde con recargar. */
  overscroll-behavior: none;
}

body {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Esqueleto ---------------------------------------------------- */
.pwa {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--pwa-topbar-h) + var(--pwa-safe-top));
  padding-bottom: calc(var(--pwa-nav-h) + var(--pwa-safe-bottom));
}

/* Ancho completo: en tablet y escritorio también se aprovecha la pantalla entera. */
.pwa__main {
  width: 100%;
  padding: 16px var(--pwa-gutter);
}

/* ---------- Barra inferior de navegación --------------------------------- */
.pwa-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: flex;
  height: calc(var(--pwa-nav-h) + var(--pwa-safe-bottom));
  padding: 6px 8px var(--pwa-safe-bottom);
  background: color-mix(in srgb, var(--ms-surface) 92%, transparent);
  border-top: 1px solid var(--ms-border);
  backdrop-filter: blur(14px);
}

.pwa-nav__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 56px;
  border-radius: var(--ms-radius);
  color: var(--ms-text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
}

.pwa-nav__item .ms-icon { width: 22px; height: 22px; }

.pwa-nav__item.active {
  background: var(--ms-brand-soft);
  color: var(--ms-brand);
}

/* ---------- Piezas táctiles ---------------------------------------------- */
/* Tecla grande para las botoneras (calculadora, Válido/Nulo/Pasa…). */
.pwa-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-surface-2);
  color: var(--ms-text);
  font-family: var(--ms-font-mono);
  font-size: 24px;
  font-weight: 700;
  user-select: none;
  touch-action: manipulation;   /* sin retraso ni zoom con el doble toque */
  transition: transform var(--ms-dur) var(--ms-ease), background var(--ms-dur) var(--ms-ease);
}

.pwa-key:active { transform: scale(.95); background: var(--ms-surface-3); }

.pwa-key small {
  font-family: var(--ms-font);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Tecla principal (Intro) en celeste, el mismo tono de "Lista de salida". */
.pwa-key--main { border-color: var(--ms-info); background: var(--ms-info-bg); color: var(--ms-info); }
.pwa-key--main:active { background: var(--ms-info-bd); }

/* Cifras (marcas, dorsales, puestos): monoespaciadas para que no bailen. */
.pwa-metric {
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ---------- Títulos de página -------------------------------------------- */
.pwa-title {
  margin: 4px 0 16px;
  font-size: var(--ms-fs-xl);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ms-text);
}