/* ============================================================================
   cliniX — Tutorial de primeiro acesso (tour guiado).
   Overlay que BLOQUEIA cliques (só os botões do balão funcionam) + "spotlight"
   sobre o alvo + balão. Theme-aware via tokens --cx-* (claro/escuro). Ver tour.js.
   ============================================================================ */

/* Camada que captura TODOS os cliques da página (bloqueia tudo fora do balão). */
.cx-tour-overlay { position: fixed; inset: 0; z-index: 9000; pointer-events: auto; }
.cx-tour-overlay.is-hidden { display: none; }

/* Recorte/realce sobre o elemento-alvo — só visual (não captura clique). O
   box-shadow gigante escurece todo o resto da tela. */
.cx-tour-spot {
  position: absolute; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
  outline: 2px solid var(--cx-teal, #0e7c6c); outline-offset: 3px;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}

/* Balão (único elemento interativo do tour). */
.cx-tour-tip {
  position: fixed; z-index: 9001; width: min(340px, calc(100vw - 28px));
  background: var(--cx-card, #fff); color: var(--cx-ink, #13211d);
  border: 1px solid var(--cx-rule, #ece8e0); border-radius: 14px;
  box-shadow: var(--cx-shadow-float, 0 14px 40px rgba(0, 0, 0, .28));
  padding: 15px 16px 12px; pointer-events: auto;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}
.cx-tour-tip.is-hidden { display: none; }
.cx-tour-tip__title { font-weight: 700; font-size: .96rem; color: var(--cx-ink, #13211d); margin: 0 0 6px; }
.cx-tour-tip__body { font-size: .85rem; line-height: 1.5; color: var(--cx-ink-soft, #4a5752); margin: 0 0 14px; }
.cx-tour-tip__foot { display: flex; align-items: center; gap: 8px; }
.cx-tour-tip__count { font-size: .73rem; color: var(--cx-ink-faint, #8a938e); font-variant-numeric: tabular-nums; }
.cx-tour-tip__spacer { flex: 1; }

.cx-tour-btn {
  border: 1px solid var(--cx-rule, #ece8e0); background: transparent; color: var(--cx-ink-soft, #4a5752);
  font-family: inherit; font-weight: 600; font-size: .82rem; padding: 7px 13px; border-radius: 9px; cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.cx-tour-btn:hover { border-color: var(--cx-teal, #0e7c6c); color: var(--cx-teal, #0e7c6c); }
.cx-tour-btn--skip { border-color: transparent; color: var(--cx-ink-faint, #8a938e); padding-left: 4px; padding-right: 4px; }
.cx-tour-btn--skip:hover { color: var(--cx-danger, #c0392b); }
.cx-tour-btn--next { background: var(--cx-teal, #0e7c6c); border-color: var(--cx-teal, #0e7c6c); color: #fff; }
.cx-tour-btn--next:hover { background: var(--cx-teal-700, #0a5d50); border-color: var(--cx-teal-700, #0a5d50); color: #fff; }

/* Botão fixo "ver tutorial de novo" — empilhado acima do toggle de tema. */
.cx-tour-replay {
  position: fixed; left: 16px; bottom: 66px; z-index: 70;
  width: 42px; height: 42px; border-radius: 999px;
  display: none; align-items: center; justify-content: center;
  background: var(--cx-card, #fff); color: var(--cx-ink-soft, #4a5752);
  border: 1px solid var(--cx-rule, #ece8e0); box-shadow: var(--cx-shadow-card, 0 4px 14px rgba(0, 0, 0, .12));
  cursor: pointer; padding: 0; font-family: inherit;
  transition: color .15s, border-color .15s, transform .15s;
}
.cx-tour-replay.is-visible { display: inline-flex; }
.cx-tour-replay:hover { color: var(--cx-teal, #0e7c6c); border-color: var(--cx-teal, #0e7c6c); transform: translateY(-1px); }
.cx-tour-replay svg { width: 20px; height: 20px; display: block; }

@media print { .cx-tour-overlay, .cx-tour-tip, .cx-tour-replay { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .cx-tour-spot { transition: none; } }