*{margin:0;padding:0;box-sizing:border-box;font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif}body,html{height:100%;margin:0}body{display:flex;flex-direction:column;line-height:1.6;background-color:#f8f9fa;color:#333}#container{display:flex;flex-direction:column;min-height:100vh}header{background-color:#fea;color:#2c7bc3;padding:20px;animation:fadeIn 1s ease-in-out}.header-layout{display:flex;align-items:center;justify-content:space-between;letter-spacing:1px;border-bottom:2px solid #ffc000}#Logo img{height:50px}.header h1{font-size:1.5rem;margin-left:15px;animation:slideIn .5s ease-out}nav ul{display:flex;list-style-type:none;justify-content:flex-end}nav ul li{margin-top:10px;margin-left:20px}nav ul li a{text-decoration:none;color:#5ea2ee;font-weight:700;text-transform:uppercase}nav ul li a:hover{text-decoration:underline;transition:text-decoration .3s ease-in}main{flex:1;max-width:800px;margin:20px auto;padding:20px;background-color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1);border-radius:8px;animation:fadeIn 1s ease-in-out}#cart-container{margin-bottom:20px}.cart-item{display:flex;flex-direction:column;border-bottom:1px solid #e0e0e0;padding:10px 0;margin:10px 0}.cart-item h3{font-size:1.2rem;margin-bottom:10px}.item-details{display:flex;justify-content:space-between;align-items:center;padding:5px 0}.item-price,.item-total{flex:1;text-align:center}.quantity-controls{display:flex;align-items:center}.quantity-controls button{padding:5px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer;margin:0 5px;transition:background-color .3s ease-in-out}.quantity-controls button:hover{background-color:#0056b3}.remove-item{padding:5px 10px;background-color:#ff4d4d;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease-in-out}.remove-item:hover{background-color:#ff1a1a}#total-container{text-align:right;font-size:1.2rem;font-weight:700;margin-top:20px}#total-container button{padding:10px;background-color:#28a745;color:#fff;border:none;border-radius:5px;cursor:pointer;animation:bounceIn 1.5s ease-out}footer{padding:20px;background-color:#fea;color:#2c7bc3;text-align:center;animation:fadeIn 1.5s ease-in-out;width:100%;margin-top:auto}.social-media{margin-top:10px}.social-media img{width:30px;height:30px;transition:opacity .3s}.social-media img:hover{opacity:.7}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes bounceIn{0%{transform:scale(.9);opacity:0}50%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}@media screen and (max-width:768px){.header h1{font-size:1.2rem}nav ul{flex-direction:column}nav ul li{margin:10px 0}}@media screen and (max-width:480px){.header h1{font-size:1rem}}
/* Estilos para la imagen del contador del carrito */
#cartIcon img {
    width: 20px;
    height: 20px;
    margin-right: 3px;
}

/* Estilos para el contador de productos del carrito */
#counter {
    background-color: red;
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    position: absolute;
    top: 95px;
    right: 8px;
}

/* Estilos para el marco y pestañas de la lista de productos */
#containerProduct{
  max-width: 500px;
  margin: auto;
}

.cardProduct{
  display: flex;
  align-items: center;
  height: 100px;
  gap: 20px;
  margin-top: 25px;
}

.cardProduct img{
  height: 100%;
}

.cardProduct h3{
  width: 130px;
}

.cardProduct div{
  background-color: var(--color-acento-claro);
  padding: 3px;
  border-radius: 5px;
}

#total, #emptyCart{
  text-align: center;
}

.hidden {
  display: none;
}

/* Estilos para productos */
.product-name { /* Nombre del Producto */
font-size: 1.2em;
color: #333;
margin-bottom: 8px;
}

.product-price { /* Precio del Producto */
display: flex;
font-size: 1.1em;
color: #4CAF50;
font-weight: bold;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}

.quantity-controls { /* Controles de Cantidad del Producto */
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 12px;
}

.decrement-btn, .increment-btn { /* Botones para Incrementar y Decrementar Cantidades */
width: 30px;
height: 30px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s;
}

.decrement-btn:hover, .increment-btn:hover {
background-color: #e0e0e0;
}

.product-quantity { /* Cantidad del Producto */
font-size: 1.1em;
width: 24px;
text-align: center;
color: #555;
}

/* Estilos para los botones Comprar y Borrar */
button#fullCart, button#reboot {
padding: 10px 20px;
font-size: 1em;
font-weight: bold;
color: #f0f0f0;
border: none;
border-radius: 5px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
margin-bottom: 25px;
}

button#fullCart { /* Botón ¡Comprar! */
background-color: #0c03fd;
}

button#fullCart:hover {
background-color: #0c03fd;
transform: scale(1.05);
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

button#reboot { /* Botón ¡Borrar! */
background-color: #fc1406;
}

button#reboot:hover {
background-color: #fc1406;
transform: scale(1.05);
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}