/* ESTILO PARA TARJETAS */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 10px;
    }
    .lista-productos {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap; /* Permite que los elementos se envuelvan en varias líneas */
        justify-content: center; /* Centra los elementos horizontalmente */
        gap: 20px; /* Espacio entre los productos */
    }
    .lista-productos li {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        width: calc(33.333% - 40px); /* Tres columnas en pantallas grandes */
        box-sizing: border-box;
        text-align: center;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .lista-productos li:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .lista-productos li img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }
    .lista-productos li h2 {
        margin: 10px 0;
        font-size: 18px;
    }
    .lista-productos li p {
        margin: 5px 0;
        color: #555;
    }
    .lista-productos li .counter {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
    }
    .lista-productos li .counter button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        margin: 0 5px;
        border-radius: 4px;
    }
    .lista-productos li .counter span {
        margin: 0 10px;
        font-weight: bold;
    }
    .lista-productos li button {
        background-color: #28a745;
        color: white;
        border: none;
        padding: 8px 15px;
        cursor: pointer;
        border-radius: 4px;
        width: 100%;
        margin-top: 10px;
    }
    @media (max-width: 768px) {
        .lista-productos li {
            width: calc(50% - 20px); /* Dos columnas en tablets */
        }
    }
    @media (max-width: 480px) {
        .lista-productos li {
            width: 100%; /* Una columna en móviles */
        }
    }
    .carrito-btn {
        position: fixed; /* Fija el botón en la pantalla */
        cursor: grab; /* Cambia el cursor al pasar sobre el botón */
        width: 60px; /* Tamaño del botón */
        height: 60px;
        background-color: #009ee3; /* Color de fondo */
        border-radius: 50%; /* Forma circular */
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 60px; /* Distancia desde la parte inferior */
        right: 20px; /* Distancia desde el lado derecho */
    }
    .carrito-btn:hover {
        background-color: #218838; /* Cambia el color al pasar el cursor */
        transform: scale(1.1); /* Aumenta ligeramente el tamaño */
    }
    .carrito-btn img {
        width: 30px; /* Tamaño de la imagen */
        height: 30px; /* Tamaño de la imagen */
        filter: brightness(0) invert(1); /* Convierte la imagen a blanco */
    }
    @media (max-width: 768px) {
        .carrito-btn {
            width: 50px; /* Tamaño más pequeño en móviles */
            height: 50px;
            bottom: 15px; /* Ajusta la posición en móviles */
            right: 15px;
        }
        .carrito-btn img {
            width: 25px; /* Imagen más pequeña en móviles */
            height: 25px;
        }
    }
    .ticket {
        max-width: 600px;
        margin: 10px auto 10px auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .apartado-precios {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 100%;
        box-sizing: border-box;
    }
    .precio-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    .precio-item:last-child {
        border-bottom: none; /* Elimina el borde inferior del último elemento */
    }
    .etiqueta {
        font-size: 16px;
        color: #555;
    }
    .valor {
        font-size: 16px;
        font-weight: bold;
        color: #4CAF50;
    }
    .precio-item.total .valor {
        font-size: 18px;
        color: #e74c3c;
    }
    #carrito {
        margin-bottom: 20px;
    }
    .contenedor-tabla {
        width: 100%;
        max-width: 1000px; /* Limita el ancho máximo */
        padding: 0 5px; /* Agrega 5px de separación a los lados */
        box-sizing: border-box; /* Incluye el padding en el ancho total */
    }
    .contenedor-tabla table {
        width: 100%;
        border-collapse: collapse;
        margin: 0; /* Elimina márgenes adicionales */
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        margin-bottom: 20px; /* Espacio debajo de la tabla */
    }
    .contenedor-tabla th {
        background-color: #1d9bbe;
        color: white;
        padding: 12px 15px;
        text-align: left;
    }
    .contenedor-tabla td {
        padding: 12px 15px;
        border-bottom: 1px solid #ddd;
        text-align: left;
    }
    .contenedor-tabla {
        width: 100%;
        max-width: 1000px; /* Limita el ancho máximo */
        padding: 0 5px; /* Agrega 5px de separación a los lados */
        box-sizing: border-box; /* Incluye el padding en el ancho total */
    }
    #opciones-pago {
        margin-bottom: 20px;
    }
    #opciones-pago label {
        display: block;
        margin: 10px 0;
    }
    .opciones-pago {
        display: none;
        margin-top: 20px;
        padding: 15px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f1f1f1;
    }
    #opciones-efectivo {
        display: block; /* Efectivo está seleccionado por defecto */
    }
    .opciones-pago label {
        display: block;
        margin: 10px 0;
    }
    .opciones-pago input[type="text"],
    .opciones-pago input[type="email"] {
        width: 100%;
        padding: 8px;
        margin: 5px 0 10px 0;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .opciones-pago button {
        padding: 10px 20px;
        background-color: #009ee3;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .opciones-pago button:hover {
        background-color: #007bb5;
    }