/* ---------- DICA ---------- */

[data-dica] {
  position: relative;
  /* atraso antes de a dica aparecer — mude aqui para mudar TODAS as dicas */
  --dica-atraso: 500ms;
}

[data-dica]::after {
  content: attr(data-dica);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  padding: 4px 8px;
  background-color: var(--fundo-contraste);
  color: var(--texto-invertido);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra-flutuante);
  font-size: 11px;
  font-weight: 500;
  white-space: pre-line;   /* permite \n no data-dica → a dica vira lista de várias linhas */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* aparece com leve fade após o atraso; some na hora ao tirar o mouse */
[data-dica]:hover::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease var(--dica-atraso), visibility 0s var(--dica-atraso);
}

/* Quando não há espaço acima — JS adiciona essa classe */
[data-dica].dica--baixo::after {
  bottom: auto;
  top: calc(100% + 4px);
}

/* Quando o elemento está perto da borda direita — JS adiciona essa classe */
[data-dica].dica--esquerda::after {
  left: auto;
  right: 0;
  transform: none;
}

/* Dica para a direita — usada pelo menu lateral quando recolhido (JS gerencia data-dica e esta classe) */
[data-dica].dica--direita::after {
  left: calc(100% + 4px);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}