.total-container {
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0;
    right: 0;
    padding: 0px 20px; 
  }
  
  .total-text {
    font-size: 18px;
    text-align: left;
  }
  
  .total-value {
    font-size: 18px;
    text-align: right;
  }
.carrito-deslizante {
position: fixed;
right: -600px;
top: 0;
width: 500px;
height: 100%;
background-color: #fff;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
z-index: 1000;
transition: right 0.3s ease;
overflow-y: auto;
padding: 20px;
}

.carrito-deslizante.activo {
right: 0;
}

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}

.overlay.activo {
display: block;
}

.overlay:hover {
cursor: url('/img/x-over.svg'), auto; 
}

.overlay:hover::before {
content: '';
z-index: 1000; 
}

/* Estilo del botón cerrar */
.cerrar-carrito {
position: absolute;
right: 20px;
background: transparent;
border: none;
font-size: 16px;
cursor: pointer;
color: #333;
}

.carrito-titulo {
font-size: 22px;
text-align: -webkit-left;
border-bottom: 1px solid #ddd;
padding-bottom: 10px; 
margin-bottom: 20px;
color: #333;
}

.carrito-contenido {
margin-bottom: 10px;
max-height: 300px;
overflow-y: auto;
}
.no-hay-productos{
text-align: center;
}

.carrito-totales {
display: flex;
justify-content: space-between;
margin: 10px 0;
padding: 10px 0;
font-size: 16px;
color: #555;
}

.total-valor {
font-size: 18px;
font-weight: bold;
color: #333;
text-align: right;
}

.boton-compra {
border: 0 solid;
top: 20px;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: button;
color: #fff;
cursor: pointer;
width: 100%;
font-size: 100%;
font-weight: 900;
line-height: 1.5;
margin: 0;
padding: 0;
border-width: 1px;
position: relative;
text-transform: uppercase;
padding: 1rem 2rem;
}

.btn-finalizar {
background-color: #000; /* Estilo específico para "Finalizar compra" */
}

.btn-ver-carrito {
background-color: #e2e2e2; /* Estilo específico para "Ver carrito" */
}

.btn-seguir-comprando {
background-color: #e2e2e2; /* Estilo específico para "Seguir comprando" */
}

.btn-finalizar:disabled,
.btn-ver-carrito:disabled,
.btn-seguir-comprando:disabled {
cursor: default;
}

.btn-finalizar:before,
.btn-ver-carrito:before,
.btn-seguir-comprando:before {
--progress: 100%;
background: #fff;
clip-path: polygon(
100% 0,
var(--progress) var(--progress),
0 100%,
100% 100%
);
content: "";
inset: 0;
position: absolute;
transition: clip-path 0.2s ease;
}

.btn-finalizar:hover:before,
.btn-ver-carrito:hover:before,
.btn-seguir-comprando:hover:before {
--progress: 0%;
}

.btn-finalizar .text-container,
.btn-ver-carrito .text-container,
.btn-seguir-comprando .text-container {
display: block;
overflow: hidden;
position: relative;
}

.btn-finalizar .text,
.btn-ver-carrito .text,
.btn-seguir-comprando .text {
display: block;
font-weight: 900;
mix-blend-mode: difference;
position: relative;
}

.btn-finalizar:hover .text,
.btn-ver-carrito:hover .text,
.btn-seguir-comprando:hover .text {
animation: move-up-alternate 0.3s ease forwards;
}

@keyframes move-up-alternate {
0% { transform: translateY(0); }
50% { transform: translateY(80%); }
51% { transform: translateY(-80%); }
to { transform: translateY(0); }
}

/* Estilos responsivos */
@media (max-width: 768px) {
.carrito-deslizante {
width: 79%;
}

.boton-compra {
font-size: 14px;
padding: 10px;
}
}


/*ss*/
.producto-en-carrito {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #ddd;
}

.producto-imagen {
width: 80px;
height: 80px;
object-fit: cover;
}

.producto-detalles {
flex: 1;
padding-left: 15px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}

.producto-titulo {
font-size: 16px;
font-weight: normal;
margin: 0;
color: #333;
}

.producto-info {
font-size: 14px;
color: #999; /* Gris suave */
display: flex;
gap: 5px;
margin: 5px 0;
}

.producto-precio {
font-size: 16px;
color: #333;
margin: 10px 0;
}

.producto-controles {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px; 
width: 100%;
}

.producto-cantidad-controles {
display: flex;
align-items: center;
justify-content: space-between;
width: 100px;
border: 1px solid #ccc;
padding: 5px;
background-color: #fff;
}

.producto-cantidad-controles button {
background-color: transparent;
border: none;
color: #666; 
font-size: 18px;
cursor: pointer;
}

.producto-cantidad {
font-size: 16px;
color: #333;
margin: 0 10px;
}

.eliminar-producto {
background-color: transparent;
border: none;
color: #666;
cursor: pointer;
font-size: 14px;
margin-left: auto;
white-space: nowrap; 
}
.producto-enlace {
text-decoration: none; 
color: inherit;
}

.producto-enlace:hover {
text-decoration: underline; 
}


.carrito-contenido::-webkit-scrollbar {
  width: 8px; /* Ancho del scrollbar */
}

.carrito-contenido::-webkit-scrollbar-thumb {
  background-color: #888; 
  border-radius: 10px; 
}

.carrito-contenido::-webkit-scrollbar-thumb:hover {
  background-color: #555; 
}

.carrito-contenido::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px; 
}