#aside_favoritos{
    position: fixed;/*Se posicionara sobre la ventana principal y estara en relacion a la posicion de pantalla, osea si bajo esta barra no se movera*/
    display: flex;/*que los bloques se podran acomodar verticalmente*/
    flex-direction: column;/*ahora estan en columna*/
    justify-content: space-between;/*los elementos estaran separados */
    width: 350px;/*es el ancho del bloque*/
    height: 100vh;/*la altura es el 100% del body*/
    /*overflow: hidden;si algo sobrepasas estas dimensiones se ocultará*/
    padding: 20px 15px;/*tendrá un padding de 20px para el alto y bajo y 15px para los laterales*/
    padding-bottom: 70px;
    background-color: var(--color-barra-lateral);/*es el color de fondo de la barra lateral*/
    transition: width 0.5s ease,background-color 0.3s ease,right 0.5s ease;/*tendra una transición de ancho, de color de fondo y cuando la posición horizontal desde la izquierda cambia tendran un tiempo de transición*/
    z-index: 100;/*este bloque estará en el z-index:50, por lo tanto estará ubicado sobre los demas elementos*/
    right: -350px;/*se desplaza el ancho del elemento, ocultandolo*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    gap: 1rem;
}
/*Para mostrar el sidebar o barra lateral*/
#aside_favoritos.mostrar_sidebar{
    right: 0px;
}
#aside_favoritos .encabezado_favoritos{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Oswald', sans-serif;
    font-style: italic;
}
#aside_favoritos .encabezado_favoritos h3{
    font-size: 1.5rem;
    color: var(--color-texto-aside);
}
#aside_favoritos .encabezado_favoritos span{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--color-fondo-icono-buscador);
    color: var(--color-icono-menu-buscador);
}
#aside_favoritos .encabezado_favoritos span:hover{
    background-color: var(--color-fondo-hover-icono-buscador);
}
#aside_favoritos .contenedor_productos_favorito{
    height: 100%;
    position: relative;
    overflow: hidden;
}
#aside_favoritos .productos_favorito {
    height: 100%; /* Asegúrate de que el contenedor padre permita esta altura */
    overflow-y: scroll; /* Habilita el scroll vertical */
}
#aside_favoritos .productos_favorito .mensaje{
    font-family: 'Open+Sans', sans-serif;
    color: var(--color-parrafo-contenido);
}
#aside_favoritos .productos_favorito>*:not(:last-child) {
    margin-bottom: 0.5rem;
}
/*estilo del scroll del bloque de navegación de la barra lateral o aside*/
#aside_favoritos .productos_favorito::-webkit-scrollbar{/*Este pseudo-elemento específico de WebKit (motor utilizado por navegadores como Chrome y Safari) selecciona la barra de desplazamiento del elemento.*/
    width: 5px;/*El ancho de la barra de desplazamiento sera de 5 pixeles*/
}
#aside_favoritos .productos_favorito::-webkit-scrollbar-thumb{/*de la barra de desplazamiento seleccionamos el thumb que es la barrita pequeña que se desplaza en la barra de desplazamiento con el fin de bajar o subir*/
    background-color: var(--color-scroll-aside);/*el color del thumb del scrool*/
    border-radius: 5px;/*las esquinas del thumb seran redondeadas*/
}
#aside_favoritos .productos_favorito::-webkit-scrollbar-thumb:hover{/*cuando el mause se posicione sobre el thumb del scroll este cambiara su color*/
    background-color: var(--color-scroll-aside-hover);
}
#aside_favoritos .producto_favorito{
    display: grid;
    width: 100%;
    grid-template-columns: 70px auto 30px;
    border-radius: 15px;
    border: solid 1px var(--color-fondo-icono-buscador);
    overflow: hidden;
}
#aside_favoritos .producto_favorito > *:not(:last-child) {
    border-right: solid 1px var(--color-fondo-icono-buscador);
}
#aside_favoritos .producto_favorito .imagen_producto_favorito{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: white;
}
#aside_favoritos .producto_favorito .imagen_producto_favorito img{
    object-fit: contain;
    width: 100%;
    aspect-ratio: 1/1;
}
#aside_favoritos .producto_favorito .informacion{
    font-family: 'Open+Sans', sans-serif;
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--color-parrafo-contenido);
    padding: 10px;
}
#aside_favoritos .producto_favorito span{
    /*background-color: #ccc;*/
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-icono-menu-buscador);
    background-color: var(--color-fondo-icono-buscador);
    cursor: pointer;
}
#aside_favoritos .producto_favorito span:hover{
    background-color: var(--color-fondo-hover-icono-buscador);
}