/* tour.css — Guía interactiva (onboarding) + botón de ayuda. Paleta oscura de
   la marca; funciona sobre cualquier página (usa fallbacks de variables). */
.tour-ov { position: fixed; inset: 0; z-index: 3000; }
.tour-ov.tour-dim { background: rgba(4, 8, 14, .82); }

/* Foco: el hueco se ve claro y todo lo demás se oscurece con un box-shadow gigante. */
.tour-spot {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(4, 8, 14, .82), 0 0 0 2px rgba(68, 224, 164, .85) inset;
  transition: all .2s ease;
}

.tour-card {
  position: fixed; z-index: 3001; width: min(340px, calc(100vw - 36px));
  background: #0d1626; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px; padding: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.tour-card-center { top: 50%; left: 50%; transform: translate(-50%, -50%) !important; }
.tour-prog { font: 700 10px "JetBrains Mono", monospace; letter-spacing: .1em;
  color: #4fd8ff; margin-bottom: 8px; }
.tour-card h3 { margin: 0 0 8px; font: 700 17px "Inter", sans-serif; color: #eaf2fb; }
.tour-card p { margin: 0; font: 400 14px/1.5 "Inter", sans-serif; color: #b7c6d9; }
.tour-card p b { color: #eaf2fb; }
.tour-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.tour-actions button {
  font: 600 13px "Inter", sans-serif; border-radius: 10px; padding: 9px 14px;
  cursor: pointer; border: 1px solid rgba(255, 255, 255, .12); background: none; color: #8fa1b8;
}
.tour-back { margin-right: auto; }
.tour-skip { color: #8fa1b8; }
.tour-next, .tour-done {
  margin-left: auto; border: none; color: #04141c;
  background: linear-gradient(135deg, #4fd8ff, #44e0a4); font-weight: 700;
}

/* Botón "?" flotante — arriba del bottom-nav, discreto pero siempre a mano. */
.tour-help {
  position: fixed; right: 16px; bottom: 88px; z-index: 900;
  width: 40px; height: 40px; border-radius: 50%;
  background: #0d1626; border: 1px solid rgba(79, 216, 255, .4); color: #4fd8ff;
  font: 800 19px "Inter", sans-serif; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center;
}
.tour-help:hover { border-color: #4fd8ff; }
@media (min-width: 1024px) { .tour-help { bottom: 24px; } }