/* body {
            font-family: Arial, sans-serif;
            background: linear-gradient(#f9f5ec, #d9f2ff);
            text-align: center;
            margin: 0;
        } */

 h1 {
     padding: 1px;
     /* position: fixed */
 }

 .panel {
     flex: 1;
     /* Cada panel ocupa el mismo ancho */
     padding: 20px;
     box-sizing: border-box;
     /* Incluye padding en el cálculo del ancho */
 }

 .izquierda {
     flex: 2;
 }

 .derecha {
     flex: 2;
 }

 .contenedor {
     display: flex;
     /* Activa Flexbox */
     height: 20vh;
     /* Ocupa toda la altura de la ventana */
 }

 #productos {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     gap: 15px;
     padding: 0px;
 }

 .card {
     background: white;
     border-radius: 15px;
     padding: 5px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     transition: 0.3s;
 }

 .card:hover {
     transform: scale(1.05);
 }

 .icono {
     font-size: 60px;
 }

 input[type="number"] {
     width: 60px;
 }

 button {
     background: #0099ff;
     color: white;
     padding: 15px 30px;
     font-size: 18px;
     border: none;
     border-radius: 30px;
     cursor: pointer;
     margin: 20px;
     height: 50px
 }

 .mesa {
     background: #3b2809;
     padding: 30px;
     border-radius: 60px;
     margin: 20px;
 }

 .itemMesa {
     display: inline-block;
     margin: 15px;
     padding: 1px;
     background: white;
     border-radius: 15px;
 }

 .total {
     font-size: 22px;
     font-weight: bold;
     margin: 10px;
     padding: 5px;
 }

 .car-fija {
     position: fixed;
     /* Fija la posición en la pantalla */
     top: 110px;
     /* Distancia desde la parte superior */
     right: 20px;
     /* Distancia desde el lado derecho */
     width: 400px;
     background-color: #ddc9A3;
     border: 1px solid #ccc;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     padding: 6px;
     z-index: 1000;
     /* Asegura que esté por encima de otros elementos */
 }