.tooltip {
  position: absolute;
  background-color: var(--navbar-yusapi1);
  color: white;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: var(--esquina-redondeada);
  font-size: 14px;
  white-space: nowrap;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  /* Para evitar que el tooltip interfiera con el mouse */
  width: auto;
  text-align: center;
}

.tooltip::after {
  content: '';
  position: absolute;
  border: 6px solid transparent;
  border-top-color: var(--navbar-yusapi1);
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
}

.tooltip[data-position="bottom"]::after {
  content: '';
  position: absolute;
  border: 6px solid transparent;
  border-bottom-color: var(--navbar-yusapi1);
  /* Flecha apunta hacia arriba */
  left: 50%;
  transform: translateX(-50%);
  top: -10px;
  /* un poco por encima del tooltip */
  bottom: auto;
  /* quitar bottom para que no interfiera */
}

button[data-tooltip],
a[data-tooltip] {
  cursor: pointer;
}