html {
    scroll-behavior: smooth;
}

/* Base styles */
body {
    background-color: #FDFBF7;
}

/* Modal transitions */
.modal-enter {
    opacity: 0;
    transform: scale(0.95);
}

.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 300ms, transform 300ms;
}

.modal-leave {
    opacity: 1;
    transform: scale(1);
}

.modal-leave-active {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 300ms, transform 300ms;
}

/* Custom Styles for smooth accordion & interactions */
 .accordion-content {
     transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease-in-out;
     max-height: 0;
     opacity: 0;
     overflow: hidden;
     padding-top: 0;
     padding-bottom: 0;
 }

 .accordion-content.open {
     max-height: 2000px;
     /* arbitrary large value */
     opacity: 1;
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
 }

 .accordion-icon {
     transition: transform 0.3s ease;
 }

 .accordion-header.open .accordion-icon {
     transform: rotate(180deg);
 }

 /* Tooltip implementation */
 .tooltip .tooltip-text {
     visibility: hidden;
     background-color: #262626;
     color: #fff;
     text-align: center;
     border-radius: 4px;
     padding: 4px 8px;
     position: absolute;
     z-index: 10;
     bottom: 125%;
     left: 50%;
     transform: translateX(-50%);
     opacity: 0;
     transition: opacity 0.3s;
     font-size: 0.75rem;
     white-space: nowrap;
 }

 .tooltip .tooltip-text::after {
     content: "";
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: -4px;
     border-width: 4px;
     border-style: solid;
     border-color: #262626 transparent transparent transparent;
 }

 .tooltip:hover .tooltip-text {
     visibility: visible;
     opacity: 1;
 }

.svg-okapi {
    fill: currentColor; /* Esto hace que el SVG use el color del texto (color: #xxx) */
    display: inline-block;
    vertical-align: middle;
}

.spinner-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white; /* O el color de fondo de tu modal */
    transition: opacity 0.3s ease;
    z-index: 10;
}

.loader {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000; /* Color principal de tu web */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}