:root {
  --fundo: #10100f;
  --superficie: #1b1a18;
  --superficie-2: #23211e;
  --borda: #33302b;
  --texto: #f3efe9;
  --texto-fraco: #a49e94;
  --tomate: #d64541;
  --tomate-claro: #e8635f;
  --queijo: #e9b949;
  --manjericao: #4f9d69;
  --aviso: #d98324;
  --raio: 10px;
}

@media (prefers-color-scheme: light) {
  :root {
    --fundo: #f7f4ef;
    --superficie: #ffffff;
    --superficie-2: #f0ebe3;
    --borda: #ded6ca;
    --texto: #221f1c;
    --texto-fraco: #6d6459;
  }
}

* { box-sizing: border-box; }

/* `hidden` precisa vencer qualquer `display` declarado por classe.
   A regra do navegador é `[hidden] { display: none }`, de mesma força que um
   seletor de classe — e a folha da página vem depois, então `.sobreposicao`,
   com `display: flex`, anulava o atributo. O resultado era a janela de escolha
   de sabores permanentemente aberta por cima da tela, invisível de tão vazia
   mas cobrindo tudo e engolindo cada clique. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 10;
}

header.topo h1 { font-size: 1.1rem; margin: 0; }
header.topo nav { display: flex; gap: 6px; flex-wrap: wrap; }

main { max-width: 1100px; margin: 0 auto; padding: 20px; }
.estreito { max-width: 620px; }

/* Painel do gerente: encostado na esquerda e colado em cima.
   A loja é vitrine e fica centralizada; o painel é ferramenta de trabalho, e
   quem trabalha nele quer o conteúdo onde o olho já está — no canto, sem a
   moldura de margem da loja. Vale só aqui: `main` segue centralizado em todas
   as outras telas.
   A largura é a mesma do menu do cliente (`#painel-cardapio`, 320px): as duas
   colunas ficam iguais lado a lado no sistema. Mexeu numa, mexa na outra. */
main.painel { max-width: 320px; margin-left: 0; padding-top: 0; padding-left: 0; }

/* As opções do painel do gerente, encostadas: sem vão e sem linha entre elas,
   formando um bloco só. Escopado em `main.painel` de propósito — a mesma
   `.caixa-opcao` monta o menu da loja, e lá as caixas separadas continuam. */
main.painel .caixas-opcao { gap: 0; }
main.painel .caixa-opcao { border-width: 0; border-radius: 0; }

/* A espiada lateral: ocupa o resto do monitor à direita da coluna de 320px.
   `top` é medido no JS, na altura em que o cabeçalho termina. */
#espiada {
  position: fixed;
  left: 320px;
  width: calc(100vw - 320px);
  bottom: 0;
  overflow: auto;
  padding: 12px;
  background: var(--fundo);
  border-left: 1px solid var(--borda);
  z-index: 20;
}

h2 { font-size: 1.15rem; margin: 24px 0 12px; }
h3 { font-size: 1rem; margin: 0 0 8px; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  margin-bottom: 12px;
}

.grade { display: grid; gap: 12px; }
.grade.duas { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade.tres { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.crescer { flex: 1; }

button, .botao {
  font: inherit;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--texto);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover:not(:disabled) { border-color: var(--texto-fraco); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* Vale para <a class="botao principal">, e nao so para <button>: o link que
   leva a cadastrar a senha e uma ancora, e sem isto ficava cinza no meio de
   um aviso que existe justamente para ser apertado. */
button.principal, .botao.principal { background: var(--tomate); border-color: var(--tomate); color: #fff; font-weight: 600; }
button.principal:hover:not(:disabled), .botao.principal:hover { background: var(--tomate-claro); }
button.sucesso { background: var(--manjericao); border-color: var(--manjericao); color: #fff; }
button.perigo  { background: transparent; border-color: var(--tomate); color: var(--tomate-claro); }
button.pequeno { padding: 5px 9px; font-size: .85rem; }

input, select, textarea {
  font: inherit;
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--texto);
}
label { display: block; margin-bottom: 10px; font-size: .9rem; color: var(--texto-fraco); }
label > input, label > select, label > textarea { margin-top: 4px; color: var(--texto); }
label.inline { display: flex; align-items: center; gap: 8px; color: var(--texto); }
label.inline input { width: auto; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); font-size: .92rem; }
th { color: var(--texto-fraco); font-weight: 600; }
.direita { text-align: right; }

.etiqueta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
}
.etiqueta.novo         { background: #3a2b1b; border-color: var(--aviso); color: #f0c088; }
.etiqueta.aceito,
.etiqueta.em_preparo   { background: #2b2f3a; border-color: #6b7fa8; color: #b8c7e8; }
.etiqueta.pronto       { background: #1f3328; border-color: var(--manjericao); color: #9bd6b0; }
.etiqueta.saiu_entrega { background: #33291f; border-color: var(--queijo); color: #f0d38a; }
.etiqueta.entregue,
.etiqueta.fechado      { background: #23211e; color: var(--texto-fraco); }
.etiqueta.recusado,
.etiqueta.cancelado    { background: #3a2020; border-color: var(--tomate); color: #f0a6a4; }
.etiqueta.pago         { background: #1f3328; border-color: var(--manjericao); color: #9bd6b0; }
.etiqueta.pendente     { background: #3a2b1b; border-color: var(--aviso); color: #f0c088; }

.aviso, .erro, .ok {
  padding: 10px 12px;
  border-radius: 8px;
  margin: 10px 0;
  font-size: .92rem;
  border: 1px solid;
}
.erro  { background: #3a2020; border-color: var(--tomate); color: #f7c9c7; }
.ok    { background: #1f3328; border-color: var(--manjericao); color: #b6e6c6; }
.aviso { background: #33291f; border-color: var(--aviso); color: #f2d5ad; }

.fraco { color: var(--texto-fraco); font-size: .88rem; }
.vazio { color: var(--texto-fraco); padding: 24px; text-align: center; }
.preco { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Cardápio */
/* Cada sabor começa fechado, só com nome e preço: são 31 numa categoria, e
   a lista inteira aberta obriga a rolar muito para comparar dois sabores.
   O detalhe (ingredientes, borda e o botão de adicionar) abre no clique. */
.produto { border-bottom: 1px solid var(--borda); }
.produto:last-child { border-bottom: 0; }
.produto h4 { margin: 0; font-size: .98rem; }

.sabor-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 4px;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.sabor-topo:hover { background: var(--superficie-2); }
.sabor-sinal { color: var(--texto-fraco); font-size: 1.15rem; line-height: 1; }
.sabor-sinal::before { content: "+"; }
.produto.aberto .sabor-sinal::before { content: "\00d7"; }
.produto.aberto > .sabor-topo h4 { color: var(--tomate-claro); }

.sabor-detalhe { padding: 0 4px 14px; }
.sabor-detalhe .acoes { margin-top: 10px; }


/* Fila da cozinha — o layout muda conforme a configuração do gerente */
.fila { display: grid; gap: 12px; }
.fila.celular { grid-template-columns: 1fr; }
.fila.tablet  { grid-template-columns: repeat(2, 1fr); }
.fila.monitor { grid-template-columns: repeat(3, 1fr); }
.fila.tv      { grid-template-columns: repeat(4, 1fr); font-size: 1.15rem; }
.fila.tv .cartao { padding: 22px; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 16px; flex-wrap: wrap; }
.abas button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 10px 14px; }
.abas button.ativa { border-bottom-color: var(--tomate); color: var(--tomate-claro); font-weight: 600; }

/* Tela do gerente: duas portas no topo (Configurações, Relatório), igual o
   MENU do cliente — mesmas classes `.caixas-opcao`/`.caixa-opcao`, sem CSS
   próprio. Dentro de Configurações, a lista de grupos usa a mesma classe de
   novo, um nível abaixo. */

.travado { opacity: .5; }
.travado input, .travado select { pointer-events: none; }

/* =========================================================
   Menu lateral (formato de portal)
   Painel escuro sempre com o mesmo tom, claro ou escuro o
   tema do sistema: é a peça de navegação, e trocar de cor
   junto com o conteúdo faria ela perder a identidade.
   ========================================================= */

header.topo .marca { color: inherit; text-decoration: none; }

.topo-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.topo-botao.destaque { background: var(--tomate); border-color: var(--tomate); color: #fff; }
.topo-botao.destaque:hover { background: var(--tomate-claro); border-color: var(--tomate-claro); }

.menu-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  /* Some só depois de a opacidade chegar a zero; ao abrir, aparece na hora */
  transition: opacity .22s ease, visibility 0s linear .22s;
  z-index: 40;
}
.menu-fundo.aberto { opacity: 1; visibility: visible; transition: opacity .22s ease, visibility 0s; }

/* Entra pela esquerda, o mesmo lado em que fica a barra fixa no computador:
   o cardápio mora sempre do mesmo lado, em qualquer tela. */
.menu-lateral {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: min(340px, 88vw);
  height: 100dvh;
  overflow-y: auto;
  background: #16150f;
  color: #efe9e0;
  border-right: 1px solid #000;
  transform: translateX(-100%);
  visibility: hidden;
  /* `visibility` sem animação na abertura: se ela também fosse animada, o
     painel ficaria invisível durante a entrada e o foco não teria onde
     pousar — o campo de busca abria sem receber o cursor. */
  transition: transform .22s ease, visibility 0s linear .22s;
}
.menu-lateral.aberto { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; }

@media (prefers-reduced-motion: reduce) {
  .menu-lateral, .menu-fundo { transition: none; }
}

/* Trava a rolagem do conteúdo enquanto o menu está aberto */
body.menu-aberto { overflow: hidden; }

.menu-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #2b2823;
}
.menu-marca {
  color: #efe9e0;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.menu-fechar {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 1;
  font-size: 1.3rem;
  border-radius: 999px;
  background: #2b2823;
  border-color: #3a3630;
  color: #efe9e0;
}

.menu-busca { padding: 12px 18px; border-bottom: 1px solid #2b2823; }
.menu-busca input { background: #0f0e0b; border-color: #3a3630; color: #efe9e0; }
.menu-sem-resultado { padding: 18px; color: #a49e94; font-size: .9rem; }

.menu-secoes { list-style: none; margin: 0; padding: 0; }
.menu-itens { list-style: none; margin: 0; padding: 0; }

.menu-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  border: 0;
  border-bottom: 1px solid #2b2823;
  border-radius: 0;
  background: #16150f;
  color: #efe9e0;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-cabeca:hover { background: #23211a; }
.menu-secao.aberta > .menu-cabeca { background: #4a4640; color: var(--tomate-claro); }
a.menu-cabeca.atual { color: var(--tomate-claro); }

/* "+" quando fechada, "×" quando aberta — o sinal indica o que o
   clique vai fazer, igual ao portal que serviu de referência. */
.menu-sinal::before { content: "+"; font-size: 1.1rem; line-height: 1; }
/* Só o cabeçalho da própria seção troca o sinal: sem o `>`, abrir a seção
   virava "×" também em cada sabor de dentro dela. */
.menu-secao.aberta > .menu-cabeca .menu-sinal::before,
.menu-linha.aberto > .menu-item .menu-sinal::before { content: "\00d7"; }

.menu-item {
  display: block;
  padding: 13px 18px 13px 30px;
  background: #26241d;
  color: #e6e0d8;
  border-bottom: 1px solid #16150f;
  font-size: .95rem;
  text-decoration: none;
}
.menu-item:hover { background: #322f26; }
.menu-item.atual { color: var(--tomate-claro); font-weight: 600; }

/* Item que abre detalhe é botão: precisa parecer com os links vizinhos */
button.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #16150f;
  border-radius: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.menu-linha.aberto > .menu-item { color: var(--tomate-claro); font-weight: 600; }

/* Sabor já escolhido para a pizza em montagem: fica marcado na mesma cor da
   seleção enquanto o cliente termina de escolher os demais. */
.menu-linha.escolhido > .menu-item {
  background: #3b2a26;
  color: var(--tomate-claro);
  font-weight: 600;
}
.menu-linha.escolhido > .menu-item .menu-sinal::before { content: "\2713"; }
/* A pizza em montagem acompanha a rolagem: o cliente escolhe os sabores lá
   embaixo e continua vendo o que já juntou. */
#menu-montagem { position: sticky; top: 0; z-index: 3; }
.menu-detalhe.montagem {
  background: #211f1a;
  border-top: 1px solid #2b2823;
  border-bottom: 1px solid #2b2823;
}
.resumo-pizza { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.resumo-pizza dt { color: #a49e94; font-size: .82rem; }
.resumo-pizza dd { margin: 0; }

/* Pizza completa: o resumo vira uma caixa no meio da área de escolha, e um
   véu cobre o resto. Naquele momento a única decisão que faz sentido é a que
   está dentro dela — "Editar" a devolve para o lugar e libera os campos. */
.montagem-bloqueio {
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(0, 0, 0, .55);
}
.menu-detalhe.montagem.flutuante {
  position: fixed;
  z-index: 55;
  top: 50%;
  transform: translateY(-50%);
  left: 8px;                               /* mesmo lado do painel */
  width: calc(min(340px, 88vw) - 16px);
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--tomate);
  border-radius: var(--raio);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .55);
}
@media (min-width: 900px) {
  body.menu-fixo .menu-detalhe.montagem.flutuante {
    width: calc(var(--barra) - 16px);
  }
}

/* Ingredientes e escolha do sabor, dentro do próprio painel */
.menu-detalhe {
  padding: 12px 18px 16px 30px;
  background: #16150f;
  border-bottom: 1px solid #2b2823;
  font-size: .9rem;
  color: #c9c2b7;
}
.menu-detalhe .preco { color: #efe9e0; }
/* `label` e `label.inline` fixam a cor do tema, que no tema claro é escura —
   sobre o painel preto o texto sumia. Aqui a cor vem do painel. */
.menu-detalhe label { color: #efe9e0; }
.menu-detalhe label:has(input:disabled) { color: #8a837a; }
.menu-detalhe .fraco { color: #a49e94; }
.menu-detalhe select,
.menu-detalhe input {
  margin: 10px 0;
  background: #0f0e0b;
  border-color: #3a3630;
  color: #efe9e0;
}
.menu-detalhe button { background: #2b2823; border-color: #3a3630; color: #efe9e0; }
/* O topo do painel tambem e escuro: botao ali herdava o cinza claro do tema e
   aparecia como um retangulo pallido no meio do preto. */
#menu-topo-extra button { background: #2b2823; border-color: #3a3630; color: #efe9e0; }
#menu-topo-extra button:hover { border-color: var(--texto-fraco); }
.menu-detalhe button.principal { background: var(--tomate); border-color: var(--tomate); color: #fff; }

/* Sabor que ja entrou na pizza. O botao neutro se confundia com o "Escolher"
   dos vizinhos: quem passava o olho nao sabia se o sabor tinha entrado ou
   nao. A marca diz o estado, o botao vermelho diz o que ele faz. A cor e a
   mesma da linha marcada no menu, para o cliente ligar as duas. */
.menu-detalhe .na-pizza { color: var(--tomate-claro); font-weight: 600; }
.menu-detalhe .na-pizza::before { content: "\2713"; margin-right: 5px; }
.menu-detalhe button.tirar {
  background: #3b2a26;
  border-color: var(--tomate);
  color: var(--tomate-claro);
  font-weight: 600;
}
/* O "Continuar comprando" fica encostado no titulo, e nao jogado na outra
   ponta da linha: quem abre o carrinho procura a volta perto do que leu.
   A margem sai do h2 e vai para a linha, senao o botao desce em relacao ao
   texto -- no flex a margem do titulo entra na conta de quem centraliza. */
.cabecalho-carrinho { margin: 24px 0 12px; gap: 14px; }
.cabecalho-carrinho h2 { margin: 0; }

.menu-detalhe button.tirar:hover:not(:disabled) {
  background: var(--tomate);
  border-color: var(--tomate);
  color: #fff;
}

/* =========================================================
   Tela do cliente: faixa de foto, abas e painel embutido
   ========================================================= */

/* A foto entra como imagem de fundo desta faixa quando existir. Altura
   reservada desde já para o resto da página não pular quando ela chegar. */
.faixa-foto {
  height: 200px;
  background: #16150f center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--borda);
}
.faixa-foto .fraco { color: #6f6a62; }

/* A marca da loja: a foto da pizza, redonda, e o nome ao lado — o mesmo
   encaixe do desenho original, com a foto de verdade no lugar dele. */
.marca-loja { display: flex; align-items: center; gap: 22px; max-width: 92%; }

/* `flex: none` para a foto não ser espremida quando o nome for largo, e
   `object-fit: cover` para ela preencher o círculo sem distorcer — a foto é
   em pé, o círculo não. O amarelo é o mesmo da borda da pizza desenhada,
   escrito à mão porque a faixa é sempre escura e o `--queijo` muda no modo
   claro do sistema. */
.marca-pizza {
  width: 140px; height: 140px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 3px solid #e9b949;
}
.marca-nome { max-height: 104px; max-width: 100%; width: auto; height: auto; min-width: 0; }

/* Em tela estreita a foto encolhe para o nome não quebrar. */
@media (max-width: 560px) {
  .marca-loja { gap: 14px; }
  .marca-pizza { width: 96px; height: 96px; }
  .marca-nome { max-height: 74px; }
}

.barra-abas {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding: 0 8px 0 0;
}
.barra-abas > .linha { gap: 0; }

.aba-cardapio {
  border: 0;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--texto);
  padding: 14px 22px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
}
.aba-cardapio:hover { background: var(--superficie-2); }
.aba-cardapio.ativa { border-bottom-color: var(--tomate); color: var(--tomate); }

/* Aplicativo e equipe: presentes, sem disputar atenção com o cardápio.
   A equipe fica encostada na borda direita, que é onde ninguém procura. */
.link-discreto {
  align-self: center;
  padding: 6px 10px;
  font-size: .8rem;
  color: var(--texto-fraco);
  text-decoration: none;
  white-space: nowrap;
}
.link-discreto:hover { color: var(--texto); text-decoration: underline; }
.link-discreto.borda-direita { padding-right: 4px; }

/* O acesso deixou de ser "coisa da equipe": o cliente tambem entra por aqui.
   Por isso deixou de ser link cinza encostado na borda e virou botao com
   contorno -- quem procura a propria conta precisa achar de primeira. */
.botao-login {
  align-self: center;
  padding: 6px 14px;
  border: 1px solid var(--tomate);
  border-radius: 8px;
  color: var(--tomate);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  white-space: nowrap;
}
.botao-login:hover { background: var(--tomate); color: #fff; }

/* Lista de escolha dentro da janela de pergunta: "qual endereco substituir"
   precisa mostrar os tres inteiros, senao a escolha e as cegas. */
.lista-opcoes { display: grid; gap: 8px; margin-top: 10px; }
.lista-opcoes label {
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  cursor: pointer;
}
.lista-opcoes label:hover { border-color: var(--texto-fraco); }
.lista-opcoes input { width: auto; margin-top: 3px; }

/* Cardápio encostado na margem esquerda, logo abaixo da linha das abas; ao
   lado dele a coluna do pedido, e depois o resto da página. */
.duas-colunas { display: flex; align-items: flex-start; gap: 20px; }
#painel-cardapio { flex: 0 0 320px; max-width: 320px; }
#painel-pedido { flex: 0 0 300px; max-width: 300px; }
.coluna-central { flex: 1; min-width: 0; }

@media (min-width: 901px) {
  body.menu-embutido main { max-width: none; padding: 0 20px 20px 0; }

  /* Encostado na borda: sem canto arredondado nem traço do lado de fora */
  body.menu-embutido .menu-lateral.embutido {
    border-left: 0;
    border-top: 0;
    border-radius: 0 0 var(--raio) 0;
  }
  /* Acompanha a rolagem sem sair da esquerda */
  #painel-cardapio, #painel-pedido {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }
  /* No computador o resumo mora na coluna ao lado, não no alto do menu */
  body.menu-embutido #menu-montagem { display: none; }
}

@media (max-width: 900px) {
  /* Sem largura para uma segunda coluna: o resumo continua no alto do menu */
  #painel-pedido { display: none; }
}

/* Embutido: o mesmo painel, sem flutuar nem virar gaveta */
.menu-lateral.embutido {
  position: static;
  width: 100%;
  height: auto;
  transform: none;
  visibility: visible;
  transition: none;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
body.menu-embutido .menu-fundo { display: none; }
/* Sem contêiner que role por dentro, a faixa da pizza gruda na janela */
body.menu-embutido #menu-montagem { top: 0; }

@media (max-width: 800px) {
  .faixa-foto { height: 130px; }
  .duas-colunas { flex-direction: column; }
  #painel-cardapio { flex: none; max-width: none; width: 100%; }
  .aba-cardapio { flex: 1; padding: 12px 10px; }
  .barra-abas { padding: 0; }
  .barra-abas > .linha:last-child { width: 100%; justify-content: flex-end; padding-right: 10px; }
}

/* Rótulo dos campos do alto do menu, no mesmo tom das seções */
.menu-detalhe .rotulo-campo {
  display: block;
  margin-bottom: 6px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #efe9e0;
}
/* Complemento do rótulo em texto normal: "BORDA RECHEADA — Até 2 sabores" */
.menu-detalhe .rotulo-campo .sem-caixa-alta { text-transform: none; letter-spacing: 0; }

/* Uma caixa de seleção por sabor de borda que a loja permite */
.menu-detalhe .campo-borda { margin: 0 0 8px; }

/* Quadradinho do tamanho, no mesmo desenho do que marca a borda.
   Conteúdo em linha própria, sem quebrar: dentro de `.linha`, que quebra por
   padrão, o nome do tamanho caía embaixo do quadradinho. */
.caixa-opcao .opcao-conteudo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.caixa-opcao .marcador {
  flex: none;
  width: 15px;
  height: 15px;
  border: 1px solid #6d675f;
  border-radius: 3px;
  background: #0f0e0b;
}
.caixa-opcao.escolhida .marcador {
  background: var(--tomate);
  border-color: var(--tomate);
  box-shadow: inset 0 0 0 2px #0f0e0b;
}

/* Tamanhos como caixas escolhíveis, todas à vista */
.caixas-opcao { display: grid; gap: 8px; }
.caixa-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  text-align: left;
  background: #0f0e0b;
  border: 1px solid #3a3630;
  border-radius: 8px;
  color: #efe9e0;
  cursor: pointer;
  font-size: .9rem;
}
.caixa-opcao:hover { border-color: var(--texto-fraco); }
.caixa-opcao.escolhida { border-color: var(--tomate); background: #2a1d1b; }
.caixa-opcao .fraco { color: #a49e94; }

/* Rodape do agendamento: escolher um horario passou a ser dois passos, e o
   segundo precisa estar sempre a vista. Fica fora da lista que rola, entao
   nao se afasta enquanto o cliente procura o horario. */
.agendar-rodape {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
}

/* Caixa de escolha múltipla com a mesma cara do campo de tamanho. Fechada
   mostra o que está escolhido; aberta, revela a lista. Um <select> não serve:
   ele escolhe um valor só, e a borda pode ir com mais de um sabor. */
.caixa-escolha { margin: 10px 0; }
.caixa-escolha > summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 11px;
  border: 1px solid #3a3630;
  border-radius: 8px;
  background: #0f0e0b;
  color: #efe9e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.caixa-escolha > summary::-webkit-details-marker { display: none; }
.caixa-escolha > summary::after { content: "▾"; color: #a49e94; }
.caixa-escolha[open] > summary { border-radius: 8px 8px 0 0; }
.caixa-escolha[open] > summary::after { content: "▴"; }

.caixa-escolha-lista {
  border: 1px solid #3a3630;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #0f0e0b;
  padding: 6px 11px 10px;
  max-height: 260px;
  overflow-y: auto;
}
.caixa-escolha-lista label { padding: 6px 0; margin: 0; }

/* Escolha dos demais sabores da pizza */
.sobreposicao {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.caixa-modal {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  width: min(460px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
/* Lista rola sozinha: são 31 sabores, e o botão de confirmar não pode
   sumir abaixo da dobra enquanto o cliente procura o segundo sabor. */
.montar-lista {
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 4px;
}
.montar-lista label { padding: 7px 0; border-bottom: 1px solid var(--borda); }
.montar-lista label:has(input:disabled) { opacity: .45; }

/* ---------------------------------------------------------
   Barra fixa (tela do cliente, a partir de 900px)
   O mesmo painel, sem entrar e sair: fica encostado à
   esquerda, do alto ao rodapé, e o conteúdo anda para o lado.
   Abaixo de 900px ele volta a ser gaveta — 280px de menu num
   celular não deixariam largura para escolher a pizza.
   --------------------------------------------------------- */
@media (min-width: 900px) {
  body.menu-fixo { --barra: 280px; }

  body.menu-fixo .menu-lateral {
    width: var(--barra);
    transform: none;
    visibility: visible;
    transition: none;
  }
  body.menu-fixo .menu-fundo { display: none; }

  body.menu-fixo header.topo,
  body.menu-fixo main { margin-left: var(--barra); }

  /* Com a barra sempre à vista, os botões do topo e o "×" não têm função */
  body.menu-fixo .topo-botao,
  body.menu-fixo .menu-fechar { display: none; }

  /* A busca deixa de ser um extra e passa a morar na barra. Quem tira o
     `hidden` é o próprio script, em alternarMenu: forçar por CSS voltaria a
     brigar com o atributo, que é justamente o defeito consertado lá em cima. */

  body.menu-fixo.menu-aberto { overflow: auto; }
}

@media (max-width: 600px) {
  main { padding: 14px; }
  .fila.monitor, .fila.tv, .fila.tablet { grid-template-columns: 1fr; }
  header.topo { flex-direction: column; align-items: stretch; }
  header.topo nav { justify-content: flex-end; }
  .esconde-estreito { display: none; }
}

/* ---------------------------------------------------------------------
   Relógio da reserva de horário

   Fica grudado no alto da área de conteúdo porque o cliente monta a pizza
   rolando a tela: um aviso que sobe junto com o cardápio some da vista logo
   no primeiro sabor, e o tempo continua correndo do mesmo jeito.
   --------------------------------------------------------------------- */
.relogio-reserva {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: .92rem;
  border: 1px solid var(--manjericao);
  border-radius: 8px;
  background: #1f3328;
  color: #b6e6c6;
}

/* Tabular: sem isso o "1" é mais estreito que o "8" e o relógio treme a cada segundo */
.relogio-reserva .contador {
  font-variant-numeric: tabular-nums;
  font-size: 1.2em;
  font-weight: 600;
}

/* A cor é o aviso; o texto continua legível para quem não distingue vermelho */
.relogio-reserva.acabando {
  border-color: var(--tomate);
  background: #3a2020;
  color: #f7c9c7;
}
.relogio-reserva.acabando .contador { color: #ff8a85; }

/* O botão anda com o contador, na mesma frase: em telas largas ele ficava
   na outra ponta da faixa, longe do número que faz alguém querer apertá-lo. */
.relogio-reserva button {
  white-space: nowrap;
  margin-left: 8px;
  vertical-align: middle;
}

/* Linha do resumo do pedido: conteudo, valor e acao.

   O valor tem largura fixa e vai encostado a direita para cair na MESMA
   coluna no endereco e em cada item. Sem isso cada numero comecava onde o
   texto ao lado terminava, e a coluna dancava de linha em linha -- o cliente
   conferindo a conta tinha de cacar cada valor.

   O conteudo leva min-width: 0 porque em flex o padrao e nao encolher abaixo
   do conteudo: nome de pizza comprido empurrava o valor para fora da tela do
   celular em vez de quebrar a linha. */
.linha-resumo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.linha-resumo .conteudo { flex: 1; min-width: 0; }
.linha-resumo .preco { min-width: 5.5rem; text-align: right; white-space: nowrap; }
.linha-resumo .acao { flex: none; }

/* O nome do documento tem de parecer um link, e nao texto grifado */
a.destaque { color: var(--tomate); font-weight: 700; text-decoration: underline; }

/* Pagina de texto longo: linha mais curta e respiro entre paragrafos */
.documento { line-height: 1.6; }
.documento h3 { margin: 22px 0 8px; font-size: 1rem; }
.documento p, .documento li { margin: 8px 0; }

/* Pergunta de uma linha (substitui prompt(), que webview embutida ignora) */
.caixa-pergunta {
  width: min(420px, 100%);
  margin: 0;
}
.caixa-pergunta label { margin: 0; }
.linha.direita { justify-content: flex-end; }

/* ---------------------------------------------------------------------
   Agenda: horário que não é de hoje

   A lista pula o dia fechado sem avisar — de domingo, o próximo horário é
   terça. Quem rola olhando só as horas marcaria para outro dia achando que
   é para hoje, então a linha inteira muda de cor. A palavra ("Amanhã" ou o
   dia da semana) vai junto: cor sozinha não serve para quem não distingue
   vermelho, nem para quem lê a tela em voz alta.
   --------------------------------------------------------------------- */
.caixa-opcao.outro-dia,
.caixa-opcao.outro-dia strong,
.caixa-opcao.outro-dia .legenda-dia {
  color: var(--tomate);
}