/* PURPOSE: Tooltip CSS-only con :hover/:focus-within. Posiciones top/bottom/left/right.
   KEY CLASSES: .tooltip, .tooltip-content
   DEPENDS ON: --hg-color-primary, --hg-color-white, --hg-typo-font-family-primary-regular (config); --border-radius.
   DEMO: dist/componentes.html#tooltip */

.tooltip {
  position: relative;
  display: inline-flex;
}

.tooltip-content {
  position: absolute;
  z-index: 60;
  padding: 6px 10px;
  font-family: var(--hg-typo-font-family-primary-regular);
  font-size: 12px;
  line-height: 1.3;
  color: var(--hg-color-white);
  background: var(--hg-color-primary);
  border-radius: var(--border-radius);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.tooltip:hover .tooltip-content,
.tooltip:focus-within .tooltip-content {
  opacity: 1;
  transform: translateY(0);
}

/* Posiciones */
.tooltip .tooltip-content,
.tooltip-top > .tooltip-content {
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 4px);
}

.tooltip-top:hover > .tooltip-content,
.tooltip:hover .tooltip-content,
.tooltip:focus-within .tooltip-content {
  transform: translate(-50%, 0);
}

.tooltip-bottom > .tooltip-content {
  top: calc(100% + 6px);
  left: 50%;
  bottom: auto;
  transform: translate(-50%, -4px);
}

.tooltip-bottom:hover > .tooltip-content {
  transform: translate(-50%, 0);
}

.tooltip-left > .tooltip-content {
  right: calc(100% + 6px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translate(4px, -50%);
}

.tooltip-left:hover > .tooltip-content {
  transform: translate(0, -50%);
}

.tooltip-right > .tooltip-content {
  left: calc(100% + 6px);
  top: 50%;
  bottom: auto;
  transform: translate(-4px, -50%);
}

.tooltip-right:hover > .tooltip-content {
  transform: translate(0, -50%);
}