/* From Uiverse.io by elijahgummer */
.tooltip-container {
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
}

.tooltip {
    position: absolute;
    top: 100%;
    left: 10%;
    transform: translateX(-10%) translateY(-10%); /* Adjusted the initial position */
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    background: var(--colorToolTip);
    color: var(--colorWhite);
    font-family: var(--fuente);
    border-radius: 0.3em;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 0.8rem;
    width: max-content; /* Adjusted the width */
    padding: 0.5em 1em; /* Adjusted padding */
    white-space: nowrap; /* Prevent text wrapping */
}

.tooltip-container:hover .tooltip {
    top: -100%; /* Adjusted the tooltip position */
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}