/* Tooltip custom (Tailwind-compatible) */
[tooltip] {
  position: relative;
  cursor: pointer;
}

[tooltip]::before {
  content: attr(tooltip);
  position: absolute;
  bottom: 125%; /* acima do elemento */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.75rem; /* text-xs */
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

[tooltip]::after {
  content: "";
  position: absolute;
  bottom: 115%; /* logo abaixo do tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

[tooltip]:hover::before,
[tooltip]:hover::after {
  opacity: 1;
}