<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Menú</title>

  <!-- Preconnects (fuentes vienen del CSS de tema vía @import) -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="preconnect" href="https://www.gstatic.com" />

  <!-- Estilos base compartidos por TODOS los restaurantes -->
  <link rel="stylesheet" href="/css/base-menu.css" />

  <!--
    Tema del restaurante: lo inyecta menu-app.js según el slug
    (/css/themes/{slug}.css). Si no existe, queda el look base.
  -->
  <link id="themeCss" rel="stylesheet" href="" disabled />

  <style>
    /* ========================================
       ESTILOS DE PLANTILLA (genéricos)
       Skeleton, loading y error — iguales para todos.
       Un tema puede sobreescribirlos si quiere.
       ======================================== */
    .pill-mode {
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .model-badge {
      margin-top: 6px;
      display: inline-flex;
      font-size: .8rem;
      opacity: .82;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,0.10);
      background: rgba(255,255,255,0.75);
      width: fit-content;
    }

    .skeleton {
      background: linear-gradient(90deg,
        rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.06) 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s infinite;
      border-radius: 8px;
    }
    @keyframes skeleton-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .skeleton-item {
      display: flex;
      justify-content: space-between;
      padding: 14px 0;
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .skeleton-item__left { flex: 1; }
    .skeleton-item__name { height: 20px; width: 60%; margin-bottom: 8px; }
    .skeleton-item__desc { height: 14px; width: 80%; margin-bottom: 6px; }
    .skeleton-item__hint { height: 12px; width: 40%; }
    .skeleton-item__price { height: 20px; width: 60px; }
    .skeleton-category { margin-bottom: 1.5rem; }
    .skeleton-category__title { height: 26px; width: 120px; margin: 1rem auto; }

    .loading-indicator {
      text-align: center;
      padding: 20px;
      color: var(--ob-ink-soft, rgba(58,58,58,.72));
      font-size: 0.95rem;
    }

    .error-state { text-align: center; padding: 30px 20px; color: #c53030; }
    .error-state__icon { font-size: 2rem; margin-bottom: 10px; }
    .error-state__retry {
      margin-top: 15px;
      padding: 10px 20px;
      border: 1px solid #c53030;
      background: white;
      color: #c53030;
      border-radius: 999px;
      cursor: pointer;
      font-family: inherit;
    }

    /* Logo oculto hasta que el tema/config diga cuál es */
    .menu-header img[hidden] { display: none; }
  </style>
</head>
<body>

  <div class="menu-wrapper">
    <div class="menu-card">

      <div class="menu-header">
        <img id="restLogo" src="" alt="" hidden>
        <h1 id="restName">Menú</h1>
      </div>

      <div class="menu-info" id="menuInfo"></div>

      <div class="filters-wrap">
        <div id="filters" class="filters"></div>
        <div class="menu-meta">
          <span id="counter" class="counter">Cargando menú...</span>
        </div>
      </div>

      <!-- Skeleton inicial -->
      <div id="menu">
        <div class="skeleton-category">
          <div class="skeleton skeleton-category__title"></div>
          <div class="skeleton-item">
            <div class="skeleton-item__left">
              <div class="skeleton skeleton-item__name"></div>
              <div class="skeleton skeleton-item__desc"></div>
              <div class="skeleton skeleton-item__hint"></div>
            </div>
            <div class="skeleton skeleton-item__price"></div>
          </div>
          <div class="skeleton-item">
            <div class="skeleton-item__left">
              <div class="skeleton skeleton-item__name"></div>
              <div class="skeleton skeleton-item__desc"></div>
              <div class="skeleton skeleton-item__hint"></div>
            </div>
            <div class="skeleton skeleton-item__price"></div>
          </div>
          <div class="skeleton-item">
            <div class="skeleton-item__left">
              <div class="skeleton skeleton-item__name"></div>
              <div class="skeleton skeleton-item__desc"></div>
              <div class="skeleton skeleton-item__hint"></div>
            </div>
            <div class="skeleton skeleton-item__price"></div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Bottom Sheet WhatsApp -->
  <div id="waOverlay" class="wa-overlay" aria-hidden="true"></div>

  <div id="waSheet" class="wa-sheet" role="dialog" aria-modal="true" aria-labelledby="waTitle" aria-hidden="true">
    <div class="wa-sheet__grab" aria-hidden="true"></div>
    <button id="waClose" class="wa-sheet__close" type="button" aria-label="Cerrar">✕</button>

    <div class="wa-sheet__content">
      <div class="wa-sheet__title" id="waTitle">¿Cómo lo querés?</div>
      <div class="wa-sheet__subtitle" id="waSubtitle">Elegí una opción para armar el pedido.</div>

      <div class="wa-sheet__item">
        <div class="wa-sheet__itemName" id="waItemName">—</div>
        <div class="wa-sheet__itemPrice" id="waItemPrice"></div>
      </div>

      <div class="wa-sheet__actions" id="waActions"></div>

      <div class="wa-sheet__fineprint">
        Se abrirá WhatsApp con el pedido prearmado.
      </div>
    </div>
  </div>

  <!-- Toda la lógica vive en un solo lugar, para los 50 restaurantes -->
  <script type="module" src="/js/menu-app.js?v=3"></script>

</body>
</html>