/* ─── Tooltip leve (GAM-05 PR 3, P1.3) ──────────────────────────────────
   Botões de ícone do header (cronômetro/foco/notificações) tinham só
   `title` nativo — funciona no hover de mouse, mas a maioria dos
   browsers NÃO mostra `title` em foco por teclado (Tab), então quem
   navega sem mouse ficava sem a dica visual (o `aria-label` cobre o
   leitor de tela, mas não o usuário vidente que navega por teclado).
   `[data-tooltip]` cobre hover E `:focus-visible` com o mesmo texto do
   `title`/`aria-label` (index.html mantém os três em sincronia). */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--dark);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  padding: .3rem .6rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 50;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::after { transition: none; }
}