Masterstreet
/
pedidos-express


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550
							<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Biergarten Klein</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Meta tags para evitar cache -->
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  
  <!-- Fuentes + Tailwind -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" as="style" onload="this.rel='stylesheet'"
        href="https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans:wght@400;500;700;900&family=Spline+Sans:wght@400;500;700">
  <link rel="stylesheet" href="express/animations.css">
  <link rel="stylesheet" href="express/styles.css">
  <link rel="stylesheet" href="express/tlw.css">
  <script src="express/js/app.js" type="module"></script>
</head>
<body class="h-[100dvh] max-h-[100dvh] flex flex-col bg-gray-50 overflow-x-hidden"
      style='font-family:"Spline Sans","Noto Sans",sans-serif;'>

  <!-- ---------- HEADER ---------- -->
  <header class="flex-col top-0 inset-x-0 z-10 bg-gray-50 p-2 flex justify-center items-center border-b border-gray-200">
    <h1 id="mainTitle" class="text-[26px] font-bold text-[#101419] tracking-tight">
      Biergarten Klein
    </h1>
  </header>

  <!-- ---------- MAIN  ---------- -->
  <main class="relative flex-1 flex flex-col min-h-0 overflow-x-hidden">  
    <!-- ===== MENÚ tab ===== -->
    <section id="menuTab" data-index="0" class="min-h-0 overflow-y-auto h-full" data-tab>
        <div class="pt-4 pb-3">
            <!-- Barra de progreso para cerveza gratis -->
            <div class="mx-4 mb-6 p-4 bg-gradient-to-r from-amber-50 to-orange-50 rounded-xl border border-amber-200">
                <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center gap-2">
                        <span class="text-lg">🍺</span>
                        <span class="text-sm font-semibold text-amber-800">¡Cerveza gratis al 100%!</span>
                    </div>
                    <span id="progressText" class="text-sm font-bold text-amber-700">100%</span>
                </div>
                
                <div class="relative w-full h-3 bg-amber-100 rounded-full overflow-hidden shadow-inner">
                    <!-- Barra de progreso animada -->
                    <div id="progressBar" class="h-full bg-gradient-to-r from-amber-400 to-orange-500 rounded-full transition-all duration-500 ease-out shadow-sm relative overflow-hidden" style="width: 100%">
                        <!-- Efecto de brillo -->
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-12 animate-pulse"></div>
                    </div>
                    
                    <!-- Indicador de meta -->
                    <div class="absolute right-1 top-1/2 transform -translate-y-1/2">
                        <div class="w-2 h-2 bg-amber-600 rounded-full border border-white shadow-sm"></div>
                    </div>
                </div>
                
                <div class="flex items-center justify-between mt-2">
                    <span class="text-xs text-amber-700">Cada compra suma puntos</span>
                    <button id="rewardBtn" class="text-xs bg-amber-500 hover:bg-amber-600 text-white px-3 py-1 rounded-full font-medium transition-colors duration-200 opacity-50 cursor-not-allowed" disabled>
                        🎉 ¡Reclamar!
                    </button>
                </div>
            </div>
        </div>
        
        <div class="px-4 overflow-y-auto">
              <input type="text" id="searchInput" placeholder="Buscar..." class="w-full px-4 py-2 mb-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#101419]">
            <ul id="productList" class="space-y-6">
            </ul>
        </div>

        <template id="product-card-template">
            <li class="flex items-stretch justify-between gap-4 rounded-xl">
                <div class="flex flex-[2_2_0px] flex-col gap-4">
                    <div class="flex flex-col gap-1">
                        <p class="product-type text-[#58728d] text-sm"></p>
                        <p class="product-name text-[#101419] text-base font-bold leading-tight"></p>
                        <p class="product-description text-[#58728d] text-sm"></p>
                    </div>
                    <div class="flex items-center gap-3">
                        <button class="add-to-cart-btn flex items-center gap-1 w-fit h-8 px-3 rounded-full bg-[#101419] hover:bg-[#37404a] text-white text-sm font-medium">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                                <path d="M12 5v14m7-7H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            Añadir
                        </button>
                        <span class="product-price text-sm font-semibold text-[#101419]"></span>
                    </div>
                </div>
                <div class="product-image flex-1 aspect-video bg-cover bg-center rounded-xl"></div>
            </li>
        </template>
    </section>

    <!-- ===== CHAT ===== -->
    <section id="chatTab" data-index="2" data-tab class="flex hidden flex-col h-full flex-1 min-h-0">
        <!-- Contenedor de mensajes que puede crecer y hacer scroll -->
        <div id="chatContainer" class="flex flex-col h-full flex-1 bg-white border border-gray-200 rounded-xl shadow-sm m-4 overflow-hidden">
          <header>
            <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50">
              <div id="onlineUsers" class="flex items-center gap-3"><span class="rounded-full bg-lime-500 w-2 h-2 inline-block shadow-md shadow-lime-300"></span><h4>4 Usuarios en linea</h4></div>
            </div>
          </header>
          <!-- Mensajes -->
          <div id="chatMessages" class="flex-1 overflow-y-auto px-4 py-3 space-y-1 bg-gray-50 font-mono text-sm">
            <!-- Mensajes de ejemplo estilo IRC -->
            <template id="chatMessageTemplate">
              <div class="chat-message"><span class="text-gray-400 chat-message-time">[00:36]</span> <span class="font-bold chat-message-user">&lt;JuanP_mesa5&gt;</span> <span class="chat-message-text">Yo también quiero!</span></div>
            </template>
            <template id="systemMessageTemplate">
              <div class="system-container"><span class="text-gray-400 chat-message-time">[14:24]</span> <span class="font-bold chat-message-text">*** Maria_mesa2 se ha unido al chat</span></div>
            </template>
          </div>
          <!-- Input y botón -->
          <form id="chatForm" class="flex flex-col relative gap-2 border-t border-gray-200 bg-white px-3 py-2" autocomplete="off">
              <ul id="userList" class="hidden absolute bottom-full w-3/4 rounded-lg border bg-gray-100 flex flex-col gap-2 py-2 px-2">
            
              </ul>
            <div class="flex gap-2 w-full">
              <input id="chatInput" type="text" placeholder="Escribe un mensaje..." class="flex-grow flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#101419] text-sm bg-gray-50" autocomplete="off" maxlength="300" />
              <button id="chatSubmitButton" type="submit" class="bg-blue-500 flex-shrink text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200">Enviar</button>
            </div>
          </form>
        </div>
    </section>

    <!-- ===== CARRITO ===== -->
    <section id="cartTab" data-tab data-index="1" class="flex flex-col hidden flex-1 min-h-0">
      <header class="p-4 border-b border-gray-200">
        <h3 class="text-lg font-bold text-[#101419]">Tu pedido</h3>
      </header>
      
      <div id="cartItems" class="flex-1 overflow-y-auto p-4 space-y-2 max-h-[25vh]"></div>
      <p id="emptyCartText" class="hidden text-center text-gray-400 mt-4">Tu carrito está vacío.</p>

      <footer class="p-4 border-t border-gray-200 space-y-3">
        <div class="flex justify-between text-base">
          <span>Total:</span>
          <span id="cartTotal">$0</span>
        </div>
        <button id="checkoutButton"
                class="w-full bg-[#101419] hover:bg-[#37404a] disabled:opacity-50 text-white py-2 rounded-md"
                disabled>
          Envia tu orden
        </button>
      </footer>

      <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
    <!-- Header con nombre de usuario -->
    <div class="bg-gray-50 px-6 py-2 border-b border-gray-200">
      <h2 id="usernameTable" class="text-[19px] font-bold text-[#101419]">Pedido de Juan Pérez</h2>
    </div>

    <div class="overflow-x-auto max-h-[20vh]">
      <table id="historyTable" class="w-full">
        <thead class="bg-gray-50 border-b border-gray-200">
          <tr>
            <th class="px-6 py-3 text-left text-sm font-bold text-[#101419]">Cantidad</th>
            <th class="px-6 py-3 text-left text-sm font-bold text-[#101419]">Producto</th>
            <th class="px-6 py-3 text-right text-sm font-bold text-[#101419]">Precio</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
          <template id="historyRowTemplate">
            <tr class="hover:bg-gray-50 transition-colors">
              <td class="list-element-quantity px-6 py-4 text-sm text-[#58728d]">1</td>
              <td class="px-6 py-4">
                <div class="flex flex-col">
                  <span class="list-element-name text-sm font-medium text-[#101419]">Klein Lager</span>
                </div>
              </td>
              <td class="list-element-price px-6 py-4 text-sm font-semibold text-[#101419] text-right">$6.000</td>
            </tr>
          </template>
        </tbody>
        
        <!-- Total -->
        <tfoot class="bg-gray-50 border-t border-gray-200">
          <tr>
            <td colspan="2" class="px-6 py-4 text-base font-bold text-[#101419] text-right">
              Total General:
            </td>
            <td id="cartHistoryTotal" class="px-6 py-4 text-lg font-bold text-[#101419] text-right">
              $0
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
    </section>
  </main>

  <!-- ---------- NAVBAR ---------- -->
  <footer class="inset-x-0 z-10 border-t border-gray-200 bg-gray-50 px-4 py-2">
    <nav class="flex gap-2">
      <button data-target="menuTab" data-title="Biergarten Klein" class="active tab-btn flex-1 flex flex-col items-center text-[#58728d]">
         <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="h-8"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg><span class="text-xs font-medium">Inicio</span>
      </button>
      
      <button data-target="cartTab" data-title="Carrito Klein" class="tab-btn flex-1 flex flex-col items-center text-[#58728d]">
        <div id="cartIcon">
          <span id="cartCount">0</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
               viewBox="0 0 256 256" class="h-8">
            <path
              d="M222.14,58.87A8,8,0,0,0,216,56H54.68L49.79,29.14A16,16,0,0,0,34.05,16H16a8,8,0,0,0,0,16h18L59.56,172.29a24,24,0,0,0,5.33,11.27,28,28,0,1,0,44.4,8.44h45.42A27.75,27.75,0,0,0,152,204a28,28,0,1,0,28-28H83.17a8,8,0,0,1-7.87-6.57L72.13,152h116a24,24,0,0,0,23.61-19.71l12.16-66.86A8,8,0,0,0,222.14,58.87ZM96,204a12,12,0,1,1-12-12A12,12,0,0,1,96,204Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,192,204Zm4-74.57A8,8,0,0,1,188.1,136H69.22L57.59,72H206.41Z" />
          </svg>
        </div>
        <span class="text-xs font-medium">Carrito</span>
      </button>
      <button data-target="chatTab" data-title="RetroChat" class="tab-btn flex-1 flex flex-col items-center text-[#58728d]">
        <div id="chatIcon">
          <span class="hidden"></span>
          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="h-8"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9h8" /><path d="M8 13h6" /><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z" /></svg>
          
        </div><span class="text-xs font-medium">Chat IA</span>
      </button>
            
    </nav>
  </footer>

  <!-- ---------- TOAST ---------- -->
  <div id="toastCart"
       class="fixed top-4 left-1/2 -translate-x-1/2 bg-[#101419] text-white text-sm
              rounded-md px-4 py-2 shadow-lg opacity-0 pointer-events-none z-50
              origin-left">
  </div>

  <!-- MODALS -->
  <!-- === MODAL INICIO DE SESIÓN === -->
<div id="sessionModal"
     class="hidden fixed inset-0 bg-black/70 flex items-center justify-center z-40 p-4">
  <form id="loginForm" class="bg-white w-full max-w-md p-8 rounded-xl shadow-xl space-y-6">
    <div class="text-center">
      <h2 id="loginTitle" class="text-2xl font-bold text-gray-900">¡Bienvenido!</h2>
      <p id="loginMessage" class="text-sm text-gray-600 mt-2">
        Ingresa tus datos para comenzar tu pedido
      </p>
    </div>

    <div class="space-y-4">
      <div id="emailInputContainer">
        <label for="emailInput" class="block text-sm font-medium text-gray-700 mb-2">
          Correo electrónico
        </label>
        <input id="emailInput"
               name="email"
               type="email"
               class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:ring-2 focus:ring-[#101419] focus:border-transparent outline-none transition-all"
               placeholder="tu@email.com" 
               required />
      </div>

      <div id="pinInputContainer">
        <label for="pinInput" class="block text-sm font-medium text-gray-700 mb-2">
          PIN de 4 dígitos
        </label>
        <input id="pinInput"
               name="pin"
               type="password"
               maxlength="4"
               pattern="[0-9]{4}"
               class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:ring-2 focus:ring-[#101419] focus:border-transparent outline-none transition-all"
               placeholder="••••" 
               required />
      </div>

      <div id="tableInputContainer">
        <label for="tableInput" class="block text-sm font-medium text-gray-700 mb-2">
          Número de mesa
        </label>
        <input id="tableInput"
               name="table"
               type="number" 
               min="1"
               class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:ring-2 focus:ring-[#101419] focus:border-transparent outline-none transition-all"
               placeholder="Ej: 5" 
               required />
      </div>
    </div>
    <span id="ErrorLogin" class="hidden text-red-500 text-sm"></span>
    <a id="recoveryPIN" href="/recovery" class="block w-full bg-gray-200 text-center text-black py-3 rounded-lg font-medium transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:ring-[#101419]" >Olvide mi PIN</a>
    <button id="sessionAcceptBtn"
            type="submit"
            class="w-full bg-[#101419] hover:bg-[#37404a] text-white py-3 rounded-lg font-medium transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:ring-[#101419]">
      Comenzar pedido
    </button>
    <button id="logoutBtn"
            type="button"
            class="w-full hidden bg-gray-100 hover:bg-gray-200 text-gray-700 py-3 rounded-lg font-medium transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:ring-gray-300">
      Cerrar sesión

    </button>
  </form>
</div>

<!-- Modal de Términos y Condiciones del Regalo -->
<div id="rewardModal" class="fixed hidden inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
  <div class="bg-white w-full max-w-lg max-h-[90vh] rounded-xl shadow-xl overflow-hidden">
    <!-- Header -->
    <div class="bg-gradient-to-r from-amber-500 to-orange-500 px-6 py-4 text-white">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <span class="text-2xl">🍺</span>
          <h2 class="text-xl font-bold">¡Cerveza Gratis!</h2>
        </div>
        <button id="closeRewardModal" class="text-white/80 hover:text-white text-2xl font-bold transition-colors">
          ×
        </button>
      </div>
    </div>

    <!-- Content -->
    <div class="overflow-y-auto max-h-[60vh] px-6 py-4">
      <div class="space-y-4">
        <!-- Descripción del premio -->
        <div class="bg-amber-50 border border-amber-200 rounded-lg p-4">
          <h3 class="font-semibold text-amber-800 mb-2">🎉 ¡Felicitaciones!</h3>
          <p class="text-amber-700 text-sm">
            Has alcanzado el 100% de progreso y puedes reclamar una cerveza gratis de tu elección.
          </p>
        </div>

        <!-- Términos y Condiciones -->
        <div class="space-y-3">
          <h4 class="font-bold text-gray-800 text-base">Términos y Condiciones:</h4>
          
          <div class="text-sm text-gray-600 space-y-2">
            <div class="flex items-start gap-2">
              <span class="text-amber-500 font-bold">•</span>
              <p>Válido únicamente en Biergarten Klein para consumo en el local.</p>
            </div>
            
            <div class="flex items-start gap-2">
              <span class="text-amber-500 font-bold">•</span>
              <p>La cerveza gratis debe ser reclamada el mismo día que se alcanza el 100%.</p>
            </div>
            
            <div class="flex items-start gap-2">
              <span class="text-amber-500 font-bold">•</span>
              <p>Aplica para cervezas de barril regulares (no incluye cervezas premium o importadas).</p>
            </div>
            
            <div class="flex items-start gap-2">
              <span class="text-amber-500 font-bold">•</span>
              <p>No acumulable con otras promociones o descuentos.</p>
            </div>
            
            <div class="flex items-start gap-2">
              <span class="text-amber-500 font-bold">•</span>
              <p>El premio no tiene valor en efectivo y no es transferible.</p>
            </div>
            
            <div class="flex items-start gap-2">
              <span class="text-amber-500 font-bold">•</span>
              <p>Biergarten Klein se reserva el derecho de modificar o cancelar esta promoción sin previo aviso.</p>
            </div>
            
            <div class="flex items-start gap-2">
              <span class="text-amber-500 font-bold">•</span>
              <p>Debes ser mayor de 18 años para reclamar bebidas alcohólicas.</p>
            </div>
          </div>
        </div>

        <!-- Instrucciones -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
          <h4 class="font-semibold text-blue-800 mb-2">📋 Instrucciones:</h4>
          <p class="text-blue-700 text-sm">
            Una vez aceptes los términos, se generará un código que deberás mostrar al mesero junto con tu identificación para reclamar tu cerveza gratis.
          </p>
        </div>
      </div>
    </div>

    <!-- Footer con checkbox y botones -->
    <div class="border-t border-gray-200 px-6 py-4 space-y-4">
      <!-- Checkbox de aceptación -->
      <label class="flex items-start gap-3 cursor-pointer">
        <input id="acceptTermsCheckbox" type="checkbox" class="mt-1 w-4 h-4 text-amber-600 bg-gray-100 border-gray-300 rounded focus:ring-amber-500 focus:ring-2">
        <span class="text-sm text-gray-700">
          He leído y acepto los términos y condiciones para reclamar mi cerveza gratis.
        </span>
      </label>

      <!-- Botones -->
      <div class="flex gap-3">
        <button id="cancelRewardBtn" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 py-3 rounded-lg font-medium transition-colors duration-200">
          Cancelar
        </button>
        <button id="claimRewardBtn" class="flex-1 bg-amber-500 hover:bg-amber-600 text-white py-3 rounded-lg font-medium transition-colors duration-200 opacity-50 cursor-not-allowed" disabled>
          🎉 Reclamar Premio
        </button>
      </div>
    </div>
  </div>
</div>
<div id="successRewardModal" class="fixed hidden inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
   <div class="bg-white w-full max-w-md rounded-xl shadow-xl overflow-hidden">
       <!-- Header -->
       <div class="bg-[#101419] px-6 py-8 text-white text-center relative">
           <!-- Elementos decorativos sutiles -->
           <div class="absolute top-3 left-4 text-amber-300 text-lg">✨</div>
           <div class="absolute top-4 right-6 text-amber-300 text-sm">🎉</div>
           <div class="absolute bottom-3 right-4 text-amber-300 text-sm">💫</div>
           
           <!-- Icono principal -->
           <div class="text-6xl mb-3">🍺</div>
           
           <!-- Título -->
           <h2 class="text-2xl font-bold mb-2">¡FELICIDADES!</h2>
           <div class="bg-white/20 rounded-full px-3 py-1 inline-block">
               <p class="text-gray-100 text-sm font-medium">🎁 Premio Reclamado</p>
           </div>
       </div>

       <!-- Content -->
       <div class="px-6 py-6 space-y-4">
           <!-- Mensaje de bienvenida -->
           <div class="text-center">
               <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                   <h3 class="text-lg font-bold text-[#101419] mb-1">🍻 ¡Tu cerveza gratis te espera!</h3>
                   <p class="text-[#58728d] text-sm">Sigue estos pasos para reclamar tu premio</p>
               </div>
           </div>

           <!-- Instrucciones -->
           <div class="space-y-3">
               <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
                   <div class="bg-[#101419] text-white rounded-full w-7 h-7 flex items-center justify-center text-sm font-bold flex-shrink-0">1</div>
                   <div class="text-sm">
                       <div class="font-bold text-[#101419] mb-1">👨‍💼 Espera al mesero</div>
                       <div class="text-[#58728d]">Este se acercará con tu comprobante de premio</div>
                   </div>
               </div>
               
               <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
                   <div class="bg-[#101419] text-white rounded-full w-7 h-7 flex items-center justify-center text-sm font-bold flex-shrink-0">2</div>
                   <div class="text-sm">
                       <div class="font-bold text-[#101419] mb-1">🍺 Elige tu cerveza favorita</div>
                       <div class="text-[#58728d]">Selecciona cualquier cerveza hasta <span class="font-semibold">$5,000</span></div>
                   </div>
               </div>
               
               <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
                   <div class="bg-[#101419] text-white rounded-full w-7 h-7 flex items-center justify-center text-sm font-bold flex-shrink-0">3</div>
                   <div class="text-sm">
                       <div class="font-bold text-[#101419] mb-1">🎉 ¡Disfruta al máximo!</div>
                       <div class="text-[#58728d]">Tu cerveza gratis está lista para disfrutar 🥳</div>
                   </div>
               </div>
           </div>

           <!-- Nota importante -->
           <div class="bg-amber-50 border border-amber-200 rounded-lg p-3">
               <div class="flex items-center gap-2 mb-1">
                   <span class="text-base">⏰</span>
                   <h4 class="font-semibold text-amber-800 text-sm">Importante</h4>
               </div>
               <p class="text-amber-700 text-sm">Este premio es válido solo para el día de hoy. ¡No pierdas esta oportunidad!</p>
           </div>
       </div>

       <!-- Footer -->
       <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
           <button id="closeSuccessRewardModal" class="w-full bg-[#101419] hover:bg-[#37404a] text-white py-3 rounded-lg font-medium transition-colors duration-200">
               <span class="flex items-center justify-center gap-2">
                   <span>🎊</span>
                   Aceptar
                   <span>🍻</span>
               </span>
           </button>
       </div>
   </div>
</div>
<div id="commentModal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">

  <div class="bg-white w-full max-w-md rounded-xl shadow-xl overflow-hidden">
    
    <div class="hidden bg-gray-50 px-6 py-4 border-b border-gray-200">
      <div class="flex items-center justify-between">
        <h2 id="titleComment" class="text-xl font-bold text-[#101419]">Titulo</h2>
        <button id="closeCommentModal" type="button" class="text-gray-400 hover:text-gray-600 text-2xl font-bold transition-colors">
          &times;
        </button>
      </div>
    </div>
    <!-- 2 posibles modals: un campo con textarea y boton de enviar o un campo desplegable con opciones -->
    <form id="selectCommentTypeForm" class="hidden">
      <div class="p-6 space-y-4">
        <p class="text-sm text-[#58728d]">
          Elige un sabor
        </p>
        <div id="selectOptions" class="flex flex-col gap-2">
            
        </div>
      </div>
    </form>
    <form id="commentForm" class="hidden">
      <div class="p-6 space-y-4">
        <p class="text-sm text-[#58728d]">
          ¿Alguna instrucción para la cocina? (Ej: sin cebolla, muy picante, alergias, etc.)
        </p>
        <div>
          <label for="commentTextarea" class="hidden text-sm font-medium text-gray-700 mb-2">
            Tu comentario
          </label>
          <textarea id="commentTextarea"
                    name="comment"
                    rows="4"
                    class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:ring-2 focus:ring-[#101419] focus:border-transparent outline-none transition-all"
                    placeholder="Escribe tu comentario aquí..."></textarea>
        </div>
      </div>

      <div class="border-t border-gray-200 bg-gray-50 px-6 py-4 flex gap-3">
        <button id="cancelCommentBtn" type="button" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 py-3 rounded-lg font-medium transition-colors duration-200">
          Cancelar
        </button>
        <button id="submitCommentBtn" type="submit" class="flex-1 bg-[#101419] hover:bg-[#37404a] text-white py-3 rounded-lg font-medium transition-colors duration-200">
          Guardar
        </button>
      </div>
    </form>

  </div>
</div>

              <!-- ---------- JS: conmutar tabs + toast ---------- -->
  <script>
    // toast simple
    window.showToast = (msg) => {
      const toast = document.getElementById('toastCart');
      toast.textContent = msg;
      toast.style.animation = 'none';      // reset
      void toast.offsetWidth;              // reflow
      toast.style.opacity = '1';
      toast.style.animation = 'popup 1s ease-out';
      toast.addEventListener('animationend', () => {
        toast.style.animation = 'none';
        toast.style.opacity = '0';
      });
    };
  </script>
</body>
</html>