/* Tour guiado + balão de 1ª visita (par do tour.js — remover os dois juntos).
   Carregado em DUAS páginas com temas diferentes: index.html (style.css:
   --panel/--border/--fg/--muted/--faint/--accent) e reports.html
   (report-theme.css: --surf/--line/--txt/--txt2/--txt3/--acc). Por isso todo
   uso de cor aqui tem cadeia de fallback: var do painel -> var do tema de
   relatórios -> hex. E os elementos do tour trazem base própria de botão,
   porque reports.html não carrega o style.css. */

/* Garantia de .hidden nos elementos do tour (reports.html não define a classe) */
#tour-overlay.hidden, #tour-hint.hidden, #tour-tip .tour-chain.hidden { display: none !important; }

/* Base própria dos controles do tour (idêntica nas duas páginas) */
#tour-btn, #tour-tip button, #tour-hint button {
  font: inherit; cursor: pointer; border-radius: 8px;
  border: 1px solid var(--border, var(--line, #2a313d));
  background: var(--panel2, var(--surf2, #1e232d));
  color: var(--fg, var(--txt, #e7ebf2));
}
#tour-tip button.primary, #tour-hint button.primary {
  background: linear-gradient(180deg, var(--accent2, var(--acc2, #6ea8ff)), var(--accent, var(--acc, #4f8cff)));
  border-color: var(--accent, var(--acc, #3b74e0)); color: #fff; font-weight: 600;
}
#tour-hint button.ghost { background: transparent; }

/* Botão do header/topbar */
#tour-btn { white-space: nowrap; background: transparent; padding: 7px 13px; font-size: 13px; }
#tour-btn:hover { border-color: var(--accent, var(--acc, #4f8cff)); }
#tour-btn.tour-attn {
  border-color: var(--accent, var(--acc, #4f8cff));
  animation: tour-pulse 2s ease-in-out infinite;
}
@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 140, 255, .45); }
  50% { box-shadow: 0 0 0 6px rgba(79, 140, 255, 0); }
}
/* Agrupa o botão do tour + link "Dashboard" no topbar dos relatórios */
.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* Balão de 1ª visita — ancorado ao botão (posição calculada no tour.js) */
#tour-hint {
  position: fixed; z-index: 900; max-width: 270px;
  background: var(--panel, var(--surf, #161a22));
  border: 1px solid var(--accent, var(--acc, #4f8cff));
  border-radius: 10px; padding: 13px 15px;
  box-shadow: var(--shadow, 0 8px 30px rgba(0, 0, 0, .35));
  font-size: 13px; animation: tour-slidein .18s ease;
}
#tour-hint::before { /* setinha apontando pro botão */
  content: ''; position: absolute; top: -6px; right: 22px; width: 10px; height: 10px;
  background: var(--panel, var(--surf, #161a22));
  border-left: 1px solid var(--accent, var(--acc, #4f8cff));
  border-top: 1px solid var(--accent, var(--acc, #4f8cff));
  transform: rotate(45deg);
}
#tour-hint strong { display: block; margin-bottom: 4px; }
#tour-hint p { margin: 0; color: var(--muted, var(--txt2, #94a0b2)); }
#tour-hint .hint-actions { display: flex; gap: 8px; margin-top: 11px; }
#tour-hint .hint-actions button { padding: 5px 11px; font-size: 12px; }
@keyframes tour-slidein { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Overlay do tour: spotlight (buraco por box-shadow) + tooltip */
#tour-overlay { position: fixed; inset: 0; z-index: 1000; }
#tour-spot {
  position: fixed; border-radius: 10px; pointer-events: none;
  border: 1px solid var(--accent, var(--acc, #4f8cff));
  box-shadow: 0 0 0 200vmax rgba(5, 8, 14, .72), 0 0 18px rgba(79, 140, 255, .35);
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease;
}
#tour-tip {
  position: fixed; width: min(340px, calc(100vw - 24px));
  max-height: calc(100vh - 24px); overflow: auto; /* zoom alto/viewport baixo: rola em vez de estourar */
  background: var(--panel, var(--surf, #161a22));
  border: 1px solid var(--border, var(--line, #2a313d));
  border-radius: 12px; padding: 15px 17px;
  box-shadow: var(--shadow, 0 8px 30px rgba(0, 0, 0, .35));
  font-size: 13px; line-height: 1.5;
  transition: left .22s ease, top .22s ease;
}
#tour-tip h3 { margin: 0 24px 6px 0; font-size: 14px; color: var(--fg, var(--txt, #e7ebf2)); }
#tour-tip p { margin: 0; color: var(--muted, var(--txt2, #94a0b2)); line-height: 1.55; }
#tour-tip .tour-x {
  position: absolute; top: 8px; right: 8px; padding: 2px 8px; font-size: 12px;
  background: transparent; border: none;
  color: var(--muted, var(--txt2, #94a0b2)); /* tom mais fraco reprova contraste AA a 12px */
}
#tour-tip .tour-x:hover { color: var(--fg, var(--txt, #e7ebf2)); filter: none; }
#tour-tip .tour-x:focus-visible {
  outline: 2px solid var(--accent, var(--acc, #4f8cff));
  border-radius: 6px; color: var(--fg, var(--txt, #e7ebf2));
}
/* Link de encadeamento (continuar o tour na outra página) */
#tour-tip .tour-chain {
  display: block; margin: 10px 0 0; padding: 0; text-align: left;
  background: none; border: none; font-size: 12.5px;
  color: var(--accent2, var(--acc, #6ea8ff));
}
#tour-tip .tour-chain:hover { text-decoration: underline; }
#tour-tip .tour-chain:focus-visible {
  text-decoration: underline; border-radius: 4px; outline-offset: 2px;
  outline: 2px solid var(--accent, var(--acc, #4f8cff));
}
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; }
.tour-foot #tour-count { color: var(--muted, var(--txt2, #94a0b2)); font-size: 12px; }
.tour-nav { display: flex; gap: 8px; }
.tour-nav button { padding: 6px 12px; font-size: 12px; }

/* ── Ajustes específicos da página de Relatórios (report-theme.css) ──
   Ela usa gradiente de accent CLARO (--acc2 #A78BFA / --acc #7C8CFF), sobre o qual
   texto branco reprova contraste AA. O próprio tema usa texto ESCURO nesse gradiente
   (.copybtn, .brand .mark); o tour segue a mesma convenção lá. */
.tour-on-reports #tour-tip button.primary,
.tour-on-reports #tour-hint button.primary { color: #0B0E14; }
/* Botão do tour alinhado ao link vizinho do topbar (mesma família mono, radius e borda) */
.tour-on-reports #tour-btn {
  font-family: var(--mono, monospace); font-size: 12px;
  border-radius: 9px; border-color: var(--line2, #323d4f);
}
.tour-on-reports .topbar-actions .site { white-space: nowrap; }
/* Topbar muito estreito (ex.: 320px): esconde o rótulo, mantém o ícone */
@media (max-width: 400px) {
  .tour-on-reports #tour-btn .tour-btn-label { display: none; }
  .tour-on-reports .topbar-actions { gap: 7px; }
}

/* Dashboard: o link "Relatórios & Bugs" não quebra o texto (wrap como item inteiro
   via flex-wrap do header, não em duas linhas dentro do próprio link). */
header .reports-link { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  #tour-btn.tour-attn { animation: none; }
  #tour-hint { animation: none; }
  #tour-spot, #tour-tip { transition: none; }
}