/* Cardápio digital + pedido na mesa. Componentes derivados de .menuCardapio, .informacoes e #menu da referência. */

.pagina-cardapio { padding-bottom: env(safe-area-inset-bottom); }
.pagina-cardapio .submenu { position: sticky; top: 0; z-index: 800; transition: top .3s ease-out; }
body.menu-fixo.pagina-cardapio .submenu { top: var(--altura-menu-fixo, 64px); }
.cardapio-corpo { padding-top: 40px; }
.cardapio-corpo > .barra-contato { margin-top: 20px; }
html { scroll-padding-top: 130px; }

/* ---------- Mesa ---------- */
.mesa-box { margin: 0 0 50px; }
.mesa-carregando { color: var(--cinza); font-size: 14px; }
.mesa-cartao {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border: 1px dashed var(--tracejado); background: var(--caixa); padding: 18px 20px;
  border-left: 4px solid var(--vermelho);
}
.mesa-cartao-info { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mesa-numero {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px;
  background: var(--vermelho-fundo); color: var(--branco); font: 700 26px/1 var(--f-menu);
}
.mesa-numero small { display: block; font: 500 10px/1 var(--f-menu); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 3px; }
.mesa-cartao h2 { font: 600 19px/1.3 var(--f-corpo); color: var(--branco); }
.mesa-cartao p { margin: 4px 0 0; font-size: 14px; color: var(--texto); }
.selo { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1 var(--f-menu); letter-spacing: .5px; text-transform: uppercase; padding: 5px 9px; border: 1px solid currentColor; }
.selo-ok { color: #3ddc84; }
.selo-aviso { color: #ffb020; }
.mesa-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.mesa-form .campo { margin: 0; }
.mesa-form input { width: 120px; }
.link-acao { background: none; border: 0; padding: 10px 0; color: var(--texto); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; min-height: 44px; }
.link-acao:hover { color: var(--branco); }

/* ---------- Bloco do rótulo ---------- */
.bloco-rotulo { margin: 0 0 50px; }
.bloco-rotulo > p { font-size: 15px; line-height: 1.6; max-width: 900px; }
.bloco-rotulo > p strong { color: var(--branco); }

/* ---------- Categorias (.menuCardapio) ---------- */
.categoria { margin: 0 0 50px; padding: 0 0 50px; border-bottom: 1px dashed var(--tracejado); scroll-margin-top: 130px; }
.categoria:last-child { margin-bottom: 0; }
.categoria-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 0 0 25px; }
.categoria h3 { font: 700 24px/1 var(--f-corpo); letter-spacing: -1px; color: var(--branco); }
.categoria-desc { margin: -12px 0 25px; font-size: 14px; color: var(--texto); }
.categoria-qtd { font: 400 11px/1 var(--f-corpo); letter-spacing: 2px; text-transform: uppercase; color: var(--texto); }
.pratos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 60px; }

.prato { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px dashed #262626; }
.prato:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
.prato-foto { flex: none; width: 88px; height: 88px; object-fit: cover; background: #111; }
.prato-info { flex: 1; min-width: 0; }
.prato-nome { font: 700 16px/1.3 var(--f-corpo); color: var(--vermelho); margin: 0 0 4px; }
.prato-desc { margin: 0; font-size: 14px; line-height: 21px; color: var(--texto); }
.prato-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.prato-preco { font: 500 17px/1.2 var(--f-menu); color: var(--branco); }
.prato-preco.pendente { font: 400 13px/1.3 var(--f-corpo); color: var(--cinza); font-style: italic; }
.prato.indisponivel .prato-nome { color: #7a7a7a; }
.prato.indisponivel .prato-preco { color: #7a7a7a; text-decoration: line-through; }
.marca-indisponivel { font: 500 11px/1 var(--f-menu); letter-spacing: 1px; text-transform: uppercase; color: #9a9a9a; border: 1px solid #3a3a3a; padding: 6px 8px; }
.botao-add {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px;
  background: transparent; border: 1px solid var(--branco); color: var(--branco);
  font: 600 13px/1 var(--f-corpo); text-transform: uppercase; letter-spacing: .3px;
  transition: var(--t-botao);
}
.botao-add:hover, .botao-add:focus-visible { background: var(--branco); color: var(--preto); }
.botao-add .ico { font-size: 16px; }
.no-carrinho { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--vermelho-fundo); color: var(--branco); font: 700 12px/1 var(--f-menu); border-radius: 11px; }
.botao-add:hover .no-carrinho { background: var(--preto); }

.cardapio-esqueleto { display: grid; gap: 18px; }
.cardapio-esqueleto span { display: block; height: 74px; background: linear-gradient(90deg, #0d0d0d 0%, #171717 50%, #0d0d0d 100%); background-size: 200% 100%; animation: brilho 1.4s linear infinite; }
@keyframes brilho { to { background-position: -200% 0; } }
.aviso { border: 1px dashed var(--tracejado); background: var(--caixa); padding: 20px; color: var(--branco); }
.aviso .botao { margin-top: 14px; }

/* ---------- Pedidos enviados ---------- */
.meus-pedidos { margin: 0 0 50px; scroll-margin-top: 130px; }
.pedido-card { border: 1px dashed var(--tracejado); background: var(--caixa); padding: 20px; margin-bottom: 20px; }
.pedido-card-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pedido-card h3 { font: 700 20px/1.2 var(--f-corpo); color: var(--branco); }
.pedido-card .meta { font-size: 13px; color: var(--texto); margin-top: 4px; }
.status-pill { display: inline-block; font: 600 12px/1 var(--f-menu); letter-spacing: 1px; text-transform: uppercase; padding: 7px 10px; background: #262626; color: var(--branco); }
.status-NOVO { background: #3a2a00; color: #ffcf5a; }
.status-CONFIRMADO { background: #10283f; color: #8cc8ff; }
.status-EM_PREPARO { background: #3b1400; color: #ff9d5c; }
.status-PRONTO { background: #0d3320; color: #5ef2a0; }
.status-ENTREGUE { background: #1d1d1d; color: #bdbdbd; }
.status-CANCELADO { background: #3a0d10; color: #ff7a80; }
.linha-tempo { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.linha-tempo li { position: relative; padding-top: 14px; font: 500 11px/1.25 var(--f-menu); letter-spacing: .4px; text-transform: uppercase; color: #8a8a8a; }
.linha-tempo li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #2a2a2a; }
.linha-tempo li.feito { color: var(--texto); }
.linha-tempo li.feito::before { background: var(--vermelho); }
.linha-tempo li.atual { color: var(--branco); }
.status-texto { margin: 0 0 12px; color: var(--branco); font-size: 15px; }
.pedido-itens { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.pedido-itens li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px dashed #222; }
.pedido-itens li small { display: block; color: var(--cinza); }
.pedido-total { display: flex; justify-content: space-between; font: 700 16px/1.3 var(--f-corpo); color: var(--branco); padding-top: 10px; border-top: 1px solid #333; margin-top: 6px; }

/* ---------- Barra fixa do pedido ---------- */
.barra-pedido { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85) 30%); pointer-events: none; }
.barra-pedido[hidden] { display: none; }
.barra-pedido-botao {
  pointer-events: auto; width: 100%; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 14px;
  min-height: 58px; padding: 10px 18px; border: 0; background: var(--vermelho-fundo); color: var(--branco);
  font: 600 16px/1.2 var(--f-corpo); text-transform: uppercase; box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
  transition: background .3s, transform .2s;
}
.barra-pedido-botao:hover { background: var(--vermelho-escuro); }
.barra-pedido-botao:active { transform: scale(.99); }
.barra-pedido-qtd { flex: none; min-width: 32px; height: 32px; padding: 0 8px; display: grid; place-items: center; background: var(--branco); color: var(--vermelho-fundo); font: 700 15px/1 var(--f-menu); }
.barra-pedido-texto { flex: 1; text-align: left; }
.barra-pedido-total { font: 700 17px/1 var(--f-menu); }
body.tem-barra .rodape { padding-bottom: 90px; }

/* ---------- Folhas (dialog) ---------- */
.folha {
  border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92dvh;
  background: #0a0a0a; color: var(--texto); border-top: 3px solid var(--vermelho);
}
.folha::backdrop { background: rgba(0, 0, 0, .78); }
.folha[open] { animation: sobe .28s ease-out; }
@keyframes sobe { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.folha-conteudo { display: flex; flex-direction: column; max-height: 92dvh; margin: 0; }
.folha-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; }
.folha-topo h2 { font: 700 22px/1.2 var(--f-corpo); letter-spacing: -.5px; color: var(--branco); padding-top: 8px; }
.folha-fechar { flex: none; width: 48px; height: 48px; border: 0; background: transparent; color: var(--branco); font-size: 24px; display: grid; place-items: center; margin: -4px -10px 0 0; }
.folha-fechar:hover { color: var(--vermelho); }
.folha-corpo { padding: 4px 20px 16px; overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.folha-rodape { display: flex; align-items: center; gap: 14px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px dashed var(--tracejado); background: #0a0a0a; }
.folha-rodape-coluna { flex-direction: column; align-items: stretch; }
.botao-largo { flex: 1; width: 100%; }
.item-desc { margin: 0 0 8px; font-size: 15px; }
.item-preco { font: 500 20px/1.2 var(--f-menu); color: var(--branco); margin: 0 0 18px; }
.item-opcoes { border: 1px dashed var(--tracejado); padding: 12px 14px 4px; margin: 0 0 18px; }
.item-opcoes legend { padding: 0 6px; font: 700 13px/1 var(--f-corpo); text-transform: uppercase; color: var(--vermelho); }
.opcao { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px dashed #222; cursor: pointer; }
.opcao:last-child { border-bottom: 0; }
.opcao input { width: 22px; height: 22px; accent-color: var(--vermelho); flex: none; }
.opcao span { flex: 1; color: var(--branco); }
.opcao em { font-style: normal; color: var(--texto); font-size: 14px; }

.campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.campo label { font: 600 14px/1.3 var(--f-corpo); color: var(--branco); }
.campo label span { font-weight: 400; color: var(--cinza); }
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 48px; padding: 12px 14px; background: #000; border: 1px solid #3a3a3a; color: var(--branco);
  font-size: 16px; border-radius: 0; transition: border-color .2s;
}
.campo textarea { resize: vertical; min-height: 64px; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--vermelho); box-shadow: 0 0 0 1px var(--vermelho); }
.campo-erro { color: #ff7a80; font-size: 14px; margin: 0; }

.contador { display: flex; align-items: center; border: 1px solid #3a3a3a; flex: none; }
.contador-btn { width: 48px; height: 48px; border: 0; background: transparent; color: var(--branco); font-size: 20px; display: grid; place-items: center; }
.contador-btn:hover { background: #1a1a1a; }
.contador-btn:disabled { opacity: .3; cursor: not-allowed; }
.contador output { min-width: 34px; text-align: center; font: 700 18px/1 var(--f-menu); color: var(--branco); }
.contador-pequeno .contador-btn { width: 44px; height: 44px; font-size: 18px; }

/* Carrinho */
.carrinho-linhas { list-style: none; margin: 0 0 18px; padding: 0; }
.carrinho-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 14px 0; border-bottom: 1px dashed #262626; }
.carrinho-linha.com-problema { background: rgba(255, 26, 37, .06); box-shadow: -10px 0 0 rgba(255, 26, 37, .06), 10px 0 0 rgba(255, 26, 37, .06); }
.carrinho-linha h3 { font: 700 15px/1.3 var(--f-corpo); color: var(--branco); }
.carrinho-linha .detalhe { font-size: 13px; color: var(--texto); margin: 3px 0 0; }
.carrinho-linha .problema { font-size: 13px; color: #ff7a80; margin: 4px 0 0; }
.carrinho-linha .valor { font: 500 16px/1.2 var(--f-menu); color: var(--branco); text-align: right; white-space: nowrap; }
.carrinho-linha-acoes { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.botao-remover { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; background: none; border: 0; color: var(--texto); font-size: 14px; }
.botao-remover:hover { color: var(--vermelho); }
.carrinho-vazio { text-align: center; padding: 30px 0; color: var(--texto); }
.resumo { display: flex; justify-content: space-between; align-items: baseline; font: 700 18px/1.3 var(--f-corpo); color: var(--branco); }
.resumo span:last-child { font-family: var(--f-menu); font-size: 22px; }
.nota-pagamento { margin: 4px 0 0; font-size: 13px; color: var(--cinza); }
.mesa-resumo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px dashed var(--tracejado); padding: 12px 14px; margin: 0 0 16px; }
.mesa-resumo strong { color: var(--branco); font-size: 17px; }
.erro-envio { border: 1px solid #ff7a80; background: rgba(255, 26, 37, .08); color: #ffd1d3; padding: 12px 14px; margin: 0 0 12px; font-size: 14px; }
.erro-envio strong { color: var(--branco); }

/* Confirmação */
.confirmacao { text-align: center; padding: 10px 0 4px; }
.confirmacao-icone { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--vermelho); color: var(--branco); font-size: 34px; }
.confirmacao h3 { font: 400 28px/1.15 var(--f-marca); text-transform: uppercase; color: var(--branco); margin: 0 0 8px; }
.confirmacao .numero { font: 200 46px/1 var(--f-fina); color: var(--vermelho); letter-spacing: 2px; margin: 6px 0; }
.confirmacao p { margin: 0 0 6px; }
.confirmacao + .pedido-card { margin-top: 18px; text-align: left; }

/* Avisos (toast) */
.avisos { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 4000; display: grid; gap: 8px; width: min(92vw, 460px); pointer-events: none; }
.aviso-toast { background: var(--branco); color: var(--preto); padding: 12px 16px; font: 600 14px/1.35 var(--f-corpo); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); border-left: 4px solid var(--vermelho); animation: sobe .25s ease-out; }
.aviso-toast.erro { background: #2a0a0c; color: #ffd1d3; border-left-color: #ff7a80; }
.aviso-offline { position: sticky; top: 0; z-index: 990; background: #ffb020; color: #000; text-align: center; font: 600 14px/1.3 var(--f-corpo); padding: 8px 16px; }

@media (min-width: 768px) {
  .folha { margin: auto; width: min(560px, 92vw); max-height: 86vh; border-top: 0; border-left: 3px solid var(--vermelho); }
  .folha-conteudo { max-height: 86vh; }
  .folha-carrinho { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(480px, 100vw); }
  .folha-carrinho .folha-conteudo { height: 100%; max-height: 100dvh; }
  .folha-carrinho[open] { animation: entraDireita .28s ease-out; }
  @keyframes entraDireita { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 900px) {
  .pratos { grid-template-columns: 1fr; }
  .prato:nth-child(2) { border-top: 1px dashed #262626; padding-top: 18px; }
  .cardapio-corpo { padding-top: 26px; }
  .mesa-box, .bloco-rotulo, .meus-pedidos { margin-bottom: 36px; }
  .categoria { margin-bottom: 36px; padding-bottom: 36px; }
}
@media (max-width: 425px) {
  .prato-foto { width: 72px; height: 72px; }
  .mesa-numero { width: 56px; height: 56px; font-size: 22px; }
  .mesa-cartao { padding: 16px; }
  .mesa-cartao h2 { font-size: 17px; }
  .linha-tempo li { font-size: 0; }   /* no celular: só as barras; o status atual aparece na etiqueta e no texto */
  .linha-tempo li.atual { font-size: 11px; grid-column: span 2; }
  .barra-pedido-botao { font-size: 15px; gap: 10px; padding: 10px 14px; }
}
@media (max-width: 360px) {
  .barra-pedido-texto { font-size: 13px; }
  .prato-linha { gap: 8px; }
}

/* Submenu de categorias no celular: rola para o lado — esmaecido na borda mostra que tem mais */
@media (max-width: 768px) {
  .pagina-cardapio .submenu { position: sticky; }
  .pagina-cardapio .submenu::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 44px; pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 85%); transition: opacity .2s;
  }
  .pagina-cardapio .submenu.no-fim::after { opacity: 0; }
  .pagina-cardapio .submenu ul { padding: 0 36px 0 var(--gutter); scroll-padding: 0 40px; }
  .pagina-cardapio .submenu a { padding: 15px 13px; font-size: 13px; }
}