/* ── overlay-jornada.css — overlay de espera/cierre de jornada ─────────────
   Compartido entre frontend/index.html (dashboard espectador) y
   frontend/tablet.html — antes vivía duplicado (estilado en index.css,
   sin ningún estilo en tablet, solo texto pelado) — un solo lugar ahora,
   mismo look en los dos. Clase compartida .overlay-jornada en vez de
   IDs (#espera-overlay/#cierre-overlay/#tablet-espera-overlay/
   #tablet-cierre-overlay son 4 IDs distintos, misma pinta). */

/* [hidden] explícito porque .overlay-jornada ya trae display:flex propio —
   mismo nivel de especificidad que la regla nativa del navegador para
   [hidden], y sin este empate ganaba el display:flex: el overlay quedaba
   "oculto" solo en el atributo pero seguía tapando todo en pantalla (mismo
   bug ya encontrado y arreglado a mano en tablet — con esto ya no hace
   falta el JS extra de overlay.style.display, [hidden] alcanza). */
.overlay-jornada {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, #14161d 0%, #05060a 75%);
  color: var(--text);
  text-align: center;
  padding: 24px;
  opacity: 1;
}
.overlay-jornada[hidden] { display: none; }
.overlay-jornada.overlay-jornada--cierre { overflow-y: auto; }
.overlay-jornada .sb-list { width: 100%; max-width: 480px; flex: none; height: auto; }

/* Al revelar el dashboard: un flash blanco→rojo que se apaga, en vez del
   corte seco de antes ("queda muy fantasma") — dura lo mismo que el
   setTimeout de JS que después le agrega [hidden]. */
.overlay-jornada.espera-saliendo {
  animation: espera-revelar 0.6s ease forwards;
  pointer-events: none;
}
@keyframes espera-revelar {
  0% { opacity: 1; background: #fff; }
  35% { opacity: 1; background: var(--danger); }
  100% { opacity: 0; background: var(--danger); }
}

.espera-logo { max-width: 220px; max-height: 220px; object-fit: contain; }

.espera-sello {
  border: 3px solid var(--danger);
  color: var(--danger);
  font-weight: 800;
  letter-spacing: 0.35em;
  padding: 6px 22px;
  border-radius: 4px;
  transform: rotate(-4deg);
  font-size: 0.9rem;
  margin-bottom: 6px;
  box-shadow: 0 0 24px -6px var(--danger);
}

.espera-titulo {
  font-size: 2.2rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
}

.espera-label {
  font-size: 1.15rem;
  color: var(--text);
  max-width: 700px;
}

.espera-countdown {
  font-family: 'Courier New', monospace;
  font-size: 5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--danger);
  text-shadow: 0 0 30px rgba(255, 77, 106, 0.45);
  font-variant-numeric: tabular-nums;
}

.espera-sub {
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}