#buscador {
    padding: 10px;
    font-size: 16px;
    width: 0;
    opacity: 0;
    transition: width 0.4s ease, opacity 0.5s ease;
    outline: var(--input_buscador_box-shadow);
    box-shadow: var(--input_buscador_box-shadow);
    border: var(--input_buscador_borde);
    border-bottom: var(--input_buscador_border-bottom);
}

.buscar-btn {
    background-color: var(--btn_buscar);
    color: var(--btn_buscar_color);
    padding: 10px;
    font-size: 14px;
    border-radius: 0 10px 10px 0;
    border: var(--btn_buscar_border);
    cursor: pointer;
}

.spinner {
    font-size: 16px;
    color: var(--color_buscador_cargando);
    text-align: center;
    padding: 10px;
}


/*--------------------------------------------------------------------------------------------*/
.search-container {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 0;
}

#resultados {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    width: 100%;
    max-width: 400px;
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--fondo_buscador_resultado);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/*    border-radius: 4px;*/
    display: none;
    z-index: 1000;
}

.show #resultados {
    display: block; /* Mostrar al activar */
}

.fila-producto {
    display: flex;
    align-items: center;
    padding: 8px;
    margin: 5px 0;
    border-bottom: var(--borde_buscador_resultado);
    transition: background-color 0.2s ease-in-out;
}
.buscador{
    background-color: var(--input_buscador);
    border: 2px solid black;
}

.fila-producto:hover {
    background-color: var(--hover_buscador_resultado);
}

.fila-producto a {
    text-decoration: none;
    color: inherit;
    flex: 1;
    display: flex;
}

.fila-producto a div {
    flex: 1;
    text-align: left;
    font-size: 14px;
    padding: 5px 8px;
}

.fila-producto img {
    margin-right: 10px;
    border-radius: 4px;
}

.mensaje-error {
    color: red;
    text-align: center;
    padding: 16px;
    font-size: 14px;
}

/* Responsividad */
@media screen and (max-width: 768px) {
    .search-container {
        width: calc(100% - 50px);
    }

    #resultados {
        width: 100%;
        right: 0;
    }
}


/*--------------------------------------------------------------------------------------------*/



/* Responsividad */
@media screen and (max-width: 768px) {
    .search-container {
        display: flex;
        justify-content: flex-end;
        width: calc(100% - 10px);
        margin: 0px 0px 15px 5px;
    }

    #buscador {
/*        margin-right: 5px;*/
    }

    .search-container button {
        width: 100px;
        font-size: 16px;
    }

    .search-container img{
        width: 15px;
    }

    .show #buscador {
        width: 80%;
        opacity: 1;
    }
}

@media screen and (min-width: 769px) {
    .search-container {
        display: flex;
        justify-content: flex-end;
        margin: 10px;
    }

    #buscador {
        max-width: 300px;
    }

    .search-container button {
        width: 120px;
        font-size: 18px;
    }

    .search-container img{
        width: 15px;
    }

    .show #buscador {
        width: 50%; /* Ancho del campo de búsqueda al ser desplegado en PC */
        opacity: 1;  /* Para hacer el input visible */
    }

}