/* css/barra_busqueda.css */

.contenedor-busqueda {
    display: flex;
    align-items: center;
    background-color: #ffffff; 
    border-radius: 0px; /* ¡Aquí quitamos lo redondito para hacerla rectangular! */
    padding: 8px 15px; 
    width: 700px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

.input-busqueda {
    border: none;
    outline: none;
    width: 100%;
    color: #555;
    font-size: 16px;
    background-color: transparent;
}

.btn-lupa {
    background: none;
    border: none;
    color: #777; 
    cursor: pointer;
    font-size: 18px;
    padding-left: 10px;
}

/* Efecto cuando pasas el ratón por la lupa */
.btn-lupa:hover {
    color: #ff6b6b; 
}

/* Estilos para el botón desplegable sin fondo feo */
.boton-desplegable {
    color: #ffffff;
    font-weight: bold;
    font-size: 15px;
    background: transparent;
    border: none;
    padding: 0;
}

/* Que no se ponga azul o raro cuando le damos clic */
.boton-desplegable:hover, .boton-desplegable:focus, .boton-desplegable:active {
    color: #f8f9fa !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Estilo de la cajita blanca que se despliega */
.menu-categorias-derecha {
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-top: 10px !important;
}

/* Letra de las categorías */
.menu-categorias-derecha .dropdown-item {
    font-size: 14px;
    padding: 10px 20px;
    color: #333;
    transition: background-color 0.3s ease;
}

/* Color suave cuando el cliente pasa el dedito o el mouse por la categoría */
.menu-categorias-derecha .dropdown-item:hover {
    background-color: #f1f1f1;
    color: #ff6b6b; /* Este color debe hacer juego con tu barra */
    font-weight: bold;
}

/* Estilos para que la hoja lateral se vea elegante */
.list-group-item-action {
    font-size: 15px;
    font-weight: 500;
    color: #444;
    transition: all 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

.list-group-item-action:hover {
    background-color: #fff0f0;
    color: #ff6b6b;
    padding-left: 25px !important; /* Efecto bonito de que el texto se mueve un poquito a la derecha */
}