/* Cardápio do QR — mobile primeiro.
   Cores do app do celular (garcom_app/lib/app/theme.dart): cobre #B6531F como
   cor principal, fundo quente #F7F3EE, cartão branco. Sem framework: o
   cliente do bar abre isso numa rede lotada, e cada KB conta. */

:root {
  --cobre: #B6531F;
  --fundo: #F7F3EE;
  --cartao: #FFFFFF;
  --texto: #3D2314;
  --texto-fraco: #7A5C4A;
  --borda: #E7DCD2;
  --preco: #059669;   /* mesmo verde do preço no app do garçom */

  /* Uma medida só para a coluna de conteúdo — cabeçalho, chips, lista e
     rodapé precisam começar exatamente na mesma linha vertical. */
  --largura: 720px;
  --gutter: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Regra única de alinhamento. Antes cada bloco tinha o seu, e a diferença de
   16px entre eles é o que deixava os chips fora de esquadro com a lista. */
.topo-conteudo,
main,
.rodape {
  max-width: var(--largura);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */

.topo {
  background: var(--cobre);
  color: #fff;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: 16px;
}

.topo-conteudo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: contain;
  /* Fundo claro atrás: a maioria dos logos é feita para fundo branco e
     desapareceria sobre o cobre. */
  background: #fff;
  padding: 4px;
}

.topo-texto { min-width: 0; }

.estabelecimento {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.2;
}

.contato {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  opacity: 0.9;
}

/* ── Categorias ────────────────────────────────────────────────────────── */

.categorias {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  /* Alinha os chips com a coluna de conteúdo em tela larga, sem perder o
     fundo de ponta a ponta da barra fixa. No celular cai no gutter normal. */
  padding: 12px max(var(--gutter), calc((100% - var(--largura)) / 2 + var(--gutter)));
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
  /* Esconde a barra de rolagem: no celular ela só ocupa espaço */
  scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  border: 1px solid var(--borda);
  background: var(--cartao);
  color: var(--texto);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.chip[aria-pressed="true"] {
  background: var(--cobre);
  border-color: var(--cobre);
  color: #fff;
  font-weight: 600;
}

/* ── Lista ─────────────────────────────────────────────────────────────── */

main {
  padding-top: 16px;
  padding-bottom: 8px;
}

.grupo-titulo {
  margin: 20px 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.grupo-titulo:first-child { margin-top: 4px; }

.item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}

.item-foto {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--fundo);
}

.item-texto { flex: 1 1 auto; min-width: 0; }

.item-nome {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.item-descricao {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto-fraco);
}

.item-preco {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--preco);
  white-space: nowrap;
}

/* ── Estados ───────────────────────────────────────────────────────────── */

.aviso {
  text-align: center;
  color: var(--texto-fraco);
  font-size: 15px;
  line-height: 1.6;
  padding: 40px 8px;
}

.aviso strong { color: var(--texto); }

.recarregar {
  display: inline-block;
  margin-top: 16px;
  background: var(--cobre);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}

/* ── Esgotado ──────────────────────────────────────────────────────────── */

.item-esgotado { opacity: 0.55; }

.item-esgotado .item-foto { filter: grayscale(1); }

.selo-esgotado {
  display: inline-block;
  margin-top: 8px;
  background: #FBE9E7;
  color: #B3261E;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
}

/* ── Rodapé ────────────────────────────────────────────────────────────── */

.rodape {
  padding-top: 20px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--texto-fraco);
  font-size: 12px;
  line-height: 1.6;
}

.rodape p { margin: 0; }

.rodape .marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  opacity: 0.7;
}

.rodape .marca img { border-radius: 3px; }

/* O cardápio é uma vitrine impressa em papel: um tema escuro automático
   deixaria a foto do prato num fundo que o dono não escolheu. Fica claro
   nos dois modos, de propósito. */