#aside_carrito{
    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*/
    gap: 1rem;
    width: 350px;/*es el ancho del bloque*/
    height: 100vh;/*la altura es el 100% del body*/
    padding: 20px 15px;/*tendrá un padding de 20px para el alto y bajo y 15px para los laterales*/
    /*overflow: hidden;si algo sobrepasas estas dimensiones se ocultará*/
    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);
}
/*Para mostrar el sidebar o barra lateral*/
#aside_carrito.mostrar_sidebar{
    right: 0px;
}
#aside_carrito .encabezado_carrito{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Oswald', sans-serif;
    font-style: italic;
}
#aside_carrito .encabezado_carrito h3{
    font-size: 1.5rem;
    color: var(--color-texto-aside);
}
#aside_carrito .encabezado_carrito 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_carrito .encabezado_carrito span:hover{
    background-color: var(--color-fondo-hover-icono-buscador);
}













#aside_carrito .contenedor_productos_carrito{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 150px;
    height: 100%;
    overflow: hidden;
}
#aside_carrito .contenedor_productos_carrito .productos_carrito {
    /*height: 100%; /* Asegúrate de que el contenedor padre permita esta altura */
    overflow-y: scroll; /* Habilita el scroll vertical */
    overflow-x: hidden;
    height: 100%;
}
#aside_carrito .productos_carrito .mensaje{
    font-family: 'Open+Sans', sans-serif;
    color: var(--color-parrafo-contenido);
}
#aside_carrito .productos_carrito>*:not(:last-child) {
    margin-bottom: 0.5rem;
}
/*estilo del scroll del bloque de navegación de la barra lateral o aside*/
#aside_carrito .productos_carrito::-webkit-scrollbar{
    width: 5px;
}
#aside_carrito .productos_carrito::-webkit-scrollbar-thumb{
    background-color: var(--color-scroll-aside);
    border-radius: 5px;
}
#aside_carrito .productos_carrito::-webkit-scrollbar-thumb:hover{
    background-color: var(--color-scroll-aside-hover);
}
#aside_carrito .producto_carrito{
    display: grid;
    width: 100%;
    grid-template-columns: 70px auto 30px;
    border-radius: 15px;
    border: solid 1px var(--color-fondo-icono-buscador);
    overflow: hidden;
}
#aside_carrito .producto_carrito > *:not(:last-child) {
    border-right: solid 1px var(--color-fondo-icono-buscador);
}
#aside_carrito .producto_carrito .imagen_producto_carrito{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: white;
}
#aside_carrito .producto_carrito .imagen_producto_carrito img{
    object-fit: contain;
    width: 100%;
    aspect-ratio: 1/1;
}
#aside_carrito .producto_carrito .informacion{
    font-family: 'Open+Sans', sans-serif;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-parrafo-contenido);
    padding: 10px;
}
#aside_carrito .producto_carrito .informacion a{
    display: inline;
    text-decoration: none;
    color: var(--color-parrafo-contenido);
}
#aside_carrito .producto_carrito .informacion a:hover{
    color: rgb(151,194,30);
    font-weight: bold;
}
#aside_carrito .producto_carrito .informacion .ContenedorCantidadProductoCarrito{
    display: flex;
    gap: 0.5rem;
    height: 2rem;
}
#aside_carrito .producto_carrito .informacion .ContenedorCantidadProductoCarrito > p{
    margin: auto 0;
}



#aside_carrito .producto_carrito .informacion .ContenedorCantidadProductoCarrito .FormCantidadProductoCarrito{
    display: flex;
}
#aside_carrito .producto_carrito .informacion .ContenedorCantidadProductoCarrito .FormCantidadProductoCarrito .cantidadProductoCarrito{
    width: 2rem;
    border-top: 2px solid rgb(240,242,245);
    border-bottom: 2px solid rgb(240,242,245);
}
#aside_carrito .producto_carrito .informacion .ContenedorCantidadProductoCarrito .FormCantidadProductoCarrito .cantidadProductoCarrito[type="number"]{
    text-align: center;
}
#aside_carrito .producto_carrito .informacion .ContenedorCantidadProductoCarrito .FormCantidadProductoCarrito .cantidadProductoCarrito[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}
#aside_carrito .producto_carrito .informacion .ContenedorCantidadProductoCarrito .FormCantidadProductoCarrito .menosCantidadProductoCarrito{
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    background-color: rgb(240,242,245);
    cursor: pointer;
    width: 1.5rem;
}
#aside_carrito .producto_carrito .informacion .ContenedorCantidadProductoCarrito .FormCantidadProductoCarrito .masCantidadProductoCarrito{
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background-color: rgb(240,242,245);
    cursor: pointer;
    width: 1.5rem;
}
#aside_carrito .producto_carrito .informacion .ContenedorCantidadProductoCarrito .FormCantidadProductoCarrito .menosCantidadProductoCarrito:hover,#aside_carrito .producto_carrito .informacion .ContenedorCantidadProductoCarrito .FormCantidadProductoCarrito .masCantidadProductoCarrito:hover{
    background-color: rgb(151,194,30);
}

#aside_carrito .producto_carrito span.close{
    /*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_carrito .producto_carrito span.close:hover{
    background-color: var(--color-fondo-hover-icono-buscador);
}

/*FINALIZAR COMPRA*/
#aside_carrito .contenedor_productos_carrito .finalizar_compra-precio_total{
    display: none;
    flex-direction: column;
    margin-top: 1rem;
    margin: auto 0; 
}
#aside_carrito .contenedor_productos_carrito .finalizar_compra-precio_total.Active{
    display: flex;
}
#aside_carrito .contenedor_productos_carrito .finalizar_compra-precio_total .finalizar_compra{
    font-family: 'Oswald', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 3rem;
    margin: 0 auto;
    border-radius: 20px;
    background-color: rgb(151,194,30);
    font-weight: bold;
    font-size: 1.5rem;
    cursor: pointer;
}
#aside_carrito .contenedor_productos_carrito .finalizar_compra-precio_total .finalizar_compra:hover{
    background-color: rgb(123, 165, 9);
}
#aside_carrito .contenedor_productos_carrito .finalizar_compra-precio_total .finalizar_compra a{
    color: white;
}
#aside_carrito .contenedor_productos_carrito .finalizar_compra-precio_total .precio_total{
    width: 100%;
    display: flex;
    justify-content: center;
}
#aside_carrito .contenedor_productos_carrito .finalizar_compra-precio_total .precio_total p{
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    font-weight: bolder;
    color: var(--color-texto-aside);
}