@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}

.delay-1s {
    animation-delay: 1s;
}

.delay-2s {
    animation-delay: 2s;
}

.delay-3s {
    animation-delay: 3s;
}


.suggestions-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco translúcido */
    border-radius: 0 0 8px 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px; /* Altura máxima */
    overflow-y: auto; /* Scroll si hay demasiadas sugerencias */
}

.suggestion-item {
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
}

.suggestion-item:hover {
    background-color: rgba(200, 200, 200, 0.3); /* Cambia el color al pasar el mouse */
}

.no-results {
    padding: 10px;
    color: #999;
}