/* Estilo para el cuerpo de la página */
body {
   /*  text-align: center; /* Centra el contenido horizontalmente */
   /* background-color: #ffffff; /* Color de fondo similar al de la imagen */
   /* padding-top: 0px; /* Añade un poco de espacio en la parte superior */
}

/* Estilo para el campo de entrada */
#busqueda {
    width: 300px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px 5px 0 0;
    font-size: 16px;
    margin: 0 auto; /* Centra el campo de entrada */
    display: block;
    position: relative;
}

/* Estilo para el contenedor de sugerencias */
#suggestions {
    width: 300px;
    max-height: 200px;
    margin: 0 auto; /* Centra el contenedor de sugerencias */
    border: 1px solid #ccc;
    border-radius: 0 0 5px 5px;
    display: none;
    position: absolute;
    overflow-y: auto;
    background: white;
    top: calc(100%px); /* Ajusta la posición para subir un poco el contenedor de sugerencias */
    left: 50%; /* Posiciona el contenedor de sugerencias en el centro horizontalmente */
    transform: translateX(-50%); /* Ajusta la posición para centrar correctamente */
    z-index: 1000;
}

/* Estilo para cada elemento de sugerencia */
.suggestion-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

/* Cambio de color al pasar el ratón por encima de una sugerencia */
.suggestion-item:hover {
    background-color: #f0f0f0;
}

/* Estilo para cuando una sugerencia está seleccionada */
.suggestion-item.selected {
    background-color: #007BFF;
    color: white;
}

/* Estilo para el logo */
.logo {
    margin-top: 20px; /* Añade espacio entre el campo de búsqueda y el logo */
    text-align: center;
}

.logo img {
    width: 150px; /* Ajusta el tamaño del logo según sea necesario */
}