:root { /* Mejor usar nombressemánticos */ --color-boton-primario: #3498db; --color-boton-secundario: #2ecc71; --color-letra1: white; /*1*/ --fondo1: #E7EFC7; --fondo2:#AEC8A4; --fondo3:#8A784E; --fondo4:#3B3B1A; }
* {margin: 0;padding: 0;box-sizing: border-box;}
body {min-height: 100vh;display: grid;grid-template-rows: auto 1fr auto; /* Header, Main, Footer */font-family: Arial, sans-serif} 
header {display:grid;grid-template-columns:1fr 0fr;background:var(--fondo4);color: white;padding: 0.5rem;text-align: center;}
label, h1 {text-align: center;height: 1em;line-height: 1em;font-size: 2em;}
a{color:white;}
button{background: var(--color-boton-primario);color:var(--color-letra1);padding:1rem;border-radius:10px;}
nav ul{list-style-type:none;}
nav li{display: inline-block;gap:1rem;}
main { padding: 1rem; background:var(--fondo2); }
footer { background: #2c3e50; color: white; padding: 1rem; text-align: center; }
/*.whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 40px; right: 40px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 30px; box-shadow: 2px 2px 3px #999; z-index: 100; display: flex; align-items: center; justify-content: center; transition: all 0.4s; }
.whatsapp-float:hover { background-color: #128C7E; transform: scale(1.1); }*/
/* Contenedor principal con Grid */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px; }
        
/* Contenedor alternativo con Flexbox y wrap */
.product-flex { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: 40px; }
.product-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; }
.product-card:hover { transform: translateY(-5px); }
.product-image { width: 100%; height: 200px; object-fit: cover; }
.product-cart-image { width: 100%; height: 100px; object-fit: contain; }
.product-info { padding: 15px; }
.product-title { font-size: 1.1rem; margin-bottom: 10px; color: #333; }
.product-price { font-weight: bold; color: #2a9d8f; margin-bottom: 10px; }
.product-description { font-size: 0.9rem; color: #666; margin-bottom: 15px; }
.add-to-cart { background-color: #2a9d8f; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; width: 100%; transition: background-color 0.3s; }
.add-to-cart:hover { background-color: #21867a; }
.section-title { text-align: center; margin: 30px 0 20px; color: #444; }

.menu-toggle {display: none; /* Oculta el checkbox */}

.tabla-simple {
  width: 100%;
  border-collapse: collapse;
}

.tabla-simple th {
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
  text-align: left;
  border-bottom: 2px solid #ddd;
}

.tabla-simple td {
  border-bottom: 1px solid #ddd;
}

.tabla-simple tr:hover {
  background-color: #f5f5f5;
}

/* Zebra striping para mejor legibilidad */
.tabla-simple tr:nth-child(even) {
  background-color: #f9f9f9;
}
.quantity-input{width:50%;}
.update-button, .remove-button{width:80px;}
@media (max-width: 600px) {
/*.whatsapp-float { width: 50px; height: 50px; bottom: 20px; right: 20px; font-size: 25px; }*/
}
@media (max-width: 400px) {
}
@media (max-width: 768px) {
  .menu-icon {display: block; /* Mostrar icono en móviles */}

  .nav-menu {display: none; /* Ocultar menú en móviles */width: 100%;}
  /* Mostrar menú cuando el checkbox está checked */
  .menu-toggle:checked ~ .nav-menu { display: block; }
  .nav-menu ul { flex-direction: column; padding: 0; }
  .nav-menu li { margin: 0; gap: 1rem; }
  h3 {text-align: start; margin: 12px 0 7px; font-size: 30px; color: #333; }
  p{ font-size: 22px; }
  .precio{ font-size: 40px; }
  .button{ font-size: 22px; }
  }