/* Tooltips con librería Tippy */
[data-tippy-root] {
    max-width: 280px;
}

.tippy-box {
    background-color: var(--color-neutral-700);
    font: var(--font-caption-medium);
    color: var(--color-neutral-0);
    border-radius: 8px;
    text-align: center;
    max-width: 280px !important;
}

.tippy-content {
    padding: var(--spacing-space-2) var(--spacing-space-3);
    text-align: left;
    word-wrap: break-word;
}

.tippy-arrow {
    width: 8px;
    height: 8px;
}

.tippy-arrow::before {
    background-color: var(--color-neutral-700);
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 2px;
}

.tippy-box[data-placement^=right]>.tippy-arrow:before {
    left: -3px;
    transform: rotate(45deg) translate(25%, 25%);
}

.tippy-box[data-placement^=top]>.tippy-arrow:before {
    bottom: -1px;
    left: 3px;
    transform: rotate(45deg) translate(25%, 25%);
}

.tippy-box[data-placement^=left]>.tippy-arrow:before {
    right: -3px;
    transform: rotate(45deg) translate(-25%, -25%);
}

.tippy-box[data-placement^=bottom]>.tippy-arrow:before {
    left: -3px;
    top: -6px;
    transform: rotate(45deg) translate(25%, 25%);
}