/* tour.css: el tutorial guiado (tour.js). Usa los colores de theme.css. */
.tour-shield { position: fixed; inset: 0; z-index: 2147483000; background: transparent; }
.tour-hole {
  position: fixed; z-index: 2147483001; pointer-events: none;
  border-radius: var(--r-md, 10px);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px rgba(20, 22, 26, .5);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.tour-hole[hidden] { display: none }
.tour-card {
  position: fixed; z-index: 2147483002; box-sizing: border-box;
  width: min(340px, calc(100vw - 16px));
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.18));
  padding: 16px 16px 12px; font-family: var(--font); font-size: var(--fs-small, 13px);
}
.tour-card.tour-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tour-card.tour-center::before {
  content: ""; position: fixed; inset: -100vh -100vw; z-index: -1;
  background: rgba(20, 22, 26, .5);
}
.tour-step { margin: 0 0 4px; color: var(--ink-3); font-size: var(--fs-micro, 11.5px); }
.tour-title { margin: 0 0 6px; font-size: 15px; font-weight: 640; letter-spacing: -.01em; }
.tour-body { margin: 0 0 14px; color: var(--ink-2); line-height: 1.5; }
.tour-row { display: flex; align-items: center; gap: 8px; }
.tour-sp { flex: 1 }
.tour-card button { width: auto; margin: 0 }
.tour-card .tour-stop {
  border: 0; background: none; box-shadow: none; padding: 4px 0; min-height: 0;
  color: var(--ink-3); font-size: var(--fs-micro, 11.5px); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.tour-card .tour-stop:hover { color: var(--ink); background: none }
.tour-toast {
  position: fixed; z-index: 2147483003; left: 50%; bottom: 20px; transform: translateX(-50%);
  max-width: calc(100vw - 32px); box-sizing: border-box;
  background: var(--ink); color: var(--surface); border-radius: var(--r-md, 10px);
  padding: 10px 14px; font-family: var(--font); font-size: var(--fs-small, 13px); box-shadow: var(--shadow);
}
@media (prefers-reduced-motion: reduce) { .tour-hole { transition: none } }