/*
 * As cores saem da CAIXA da pizzaria: verde da caixa, letra em creme
 * apessegado, e o vermelho escuro dos selos. O cabeçalho fixo segue o
 * padrão da Mateus Informática: faixa, marca à esquerda, nome no meio.
 */
:root {
  --tinta: #123024;
  --faixa: #244028;        /* verde da caixa, medido na foto */
  --creme: #f8c494;        /* letra da caixa, medida na foto */
  --papel: #f6f1e6;        /* fundo das telas */
  --verde: #2c5133;        /* um tom acima do verde da caixa, para botão */
  --vermelho: #8c1b1b;     /* vermelho escuro do bloco lateral */
  --dourado: #c9a227;
  --linha: #ded4c2;
  --texto: #23281f;
  --apagado: #6f7a6b;
  color-scheme: light;
}

* { box-sizing: border-box; }
/* Escondido é escondido: o display: flex das linhas vencia o [hidden]. */
[hidden] { display: none !important; }

body {
  margin: 0; overflow-x: hidden;
  background: var(--papel);
  color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 3rem;
}

/* ------------------------------------------------------- cabeçalho -- */

.cabecalho {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem 1rem;
  background: var(--faixa); color: var(--creme);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.cabecalho__marca {
  width: 104px; color: var(--creme); text-decoration: none;
  display: grid; place-items: center; flex: 0 0 auto;
}
.cabecalho__marca img { width: 100%; height: 100%; object-fit: cover; }
.cabecalho__nome { font-weight: 800; letter-spacing: .02em; }
.cabecalho__lema { font-size: .9rem; font-weight: 700; opacity: .9; }
/* Os botões ficam à DIREITA, encostados na logo da Mateus Informática. */
.cabecalho__acoes {
  /* Encostados na base da faixa, do lado da logo da Mateus. */
  margin: 0 0 0 auto; min-width: 0; display: flex; gap: .5rem;
  flex-wrap: nowrap; align-items: flex-end; align-self: flex-end; justify-content: flex-end;
}

/* Uma folga entre a faixa verde e o conteúdo. */
main { max-width: 1200px; margin: 0 auto; padding: 1.4rem .9rem .9rem; }

h1, h2 { margin: .2rem 0 .8rem; font-size: 1.15rem; }

/* ---------------------------------------------------------- botões -- */

.botao {
  border: 0; border-radius: 999px; padding: .5rem 1rem;
  background: var(--creme); color: var(--faixa);
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
}
.botao:hover { filter: brightness(.96); }
.botao--verde { background: var(--verde); color: #fff; }
.botao--vermelho { background: var(--vermelho); color: #fff; }
.botao--pequeno { padding: .3rem .7rem; font-size: .85rem; }
/* Botão da barra não quebra linha: "Taxas de tele" virava três linhas. */
/* Botão de ÍCONE: o desenho manda e o nome vem pequeno embaixo -- assim
   cabem os três do lado das duas logos, sem cortar palavra. */
.botao--icone {
  display: grid; place-items: center; gap: .1rem; line-height: 1.1;
  padding: .35rem .6rem; border-radius: 14px;
}
.botao--icone span { font-size: .72rem; font-weight: 700; }

/* Os botões da barra têm todos a MESMA largura: o olho lê uma fileira só. */
.cabecalho__acoes .botao {
  /* Mesma largura, mas podem encolher juntos numa janela estreita. */
  white-space: nowrap; flex: 0 0 5.4rem; text-align: center;
}
.botao--simbolo {
  width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  /* line-height 0 tira a sobra da linha de texto, que empurrava o desenho
     para baixo e deixava o símbolo fora do meio do círculo. */
  line-height: 0; font-size: 1.5rem; font-weight: 900;
}
/* O desenho do símbolo cresce junto, e fica no meio do círculo -- um fio
   acima do centro, que é onde o olho o enxerga centrado. */
.botao--simbolo svg { width: 22px; height: 22px; stroke-width: 2.8; display: block; margin-top: -1px; }
/* O "+" escrito como texto (sem desenho) precisa do mesmo acerto. */
.botao--simbolo { padding-bottom: 2px; }
/* A barra fica encostada à direita, como em todas as listas da casa. */
.barra-acoes { display: flex; gap: .5rem; justify-content: flex-end; margin: 0 0 .7rem; }
.col-marcar { width: 1.6rem; }
.botao:disabled { opacity: .45; cursor: default; }

/* ---------------------------------------------------------- campos -- */

.campo { display: block; margin-bottom: .7rem; }
.campo > span { display: block; font-size: .8rem; font-weight: 700; color: var(--apagado); margin-bottom: .15rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .55rem .7rem; font: inherit;
  border: 1px solid var(--linha); border-radius: 10px; background: #fff; color: inherit;
}
.linha { display: flex; gap: .6rem; flex-wrap: wrap; }
.linha > * { flex: 1 1 8rem; }
/* Linha em que o botão acompanha a base do campo ao lado. */
.linha--pe { align-items: flex-end; }
/* Campo de resposta curta (Sim/Não): não precisa da largura toda. */
.campo--curto { flex: 0 0 6.5rem; }

fieldset.grupo {
  border: 1px solid var(--linha); border-radius: 12px; padding: .7rem .8rem; margin: 0 0 .9rem;
  background: #fff;
}
fieldset.grupo > legend { font-size: .8rem; font-weight: 800; color: var(--apagado); padding: 0 .3rem; }

/* ----------------------------------------------------------- lista -- */

/* Título no meio da faixa; a contagem fica na ponta direita. */
.faixa {
  position: relative; text-align: center;
  background: var(--faixa); color: var(--creme);
  padding: .45rem 2.5rem; border-radius: 10px 10px 0 0; font-weight: 800;
}
.faixa .lista__conta, .faixa span {
  position: absolute; right: .8rem; top: .45rem; font-weight: 700;
}
.lista { border: 1px solid var(--linha); border-top: 0; border-radius: 0 0 10px 10px; background: #fff; }
.item {
  display: grid; grid-template-columns: 104px 1fr auto; gap: .9rem; align-items: center;
  padding: .55rem .8rem; border-top: 1px solid var(--linha); cursor: pointer;
}
.item:first-child { border-top: 0; }
/* Listas zebradas: branco e o creme rosado da casa, uma linha de cada. */
.item:nth-child(odd) { background: #fff; }
.item:nth-child(even) { background: #fdf3e6; }
.etiqueta-inativo {
  margin-left: .4rem; padding: 0 .45rem; border-radius: 6px;
  background: var(--vermelho); color: #fff; font-size: .72rem; font-weight: 800; vertical-align: middle;
}
.item__foto { width: 104px; height: 104px; border-radius: 12px; object-fit: cover; background: #f0e6d8; }
img.item__foto { cursor: zoom-in; }
.item__nome { font-weight: 700; }
/* Uma folga entre o nome e a linha dos códigos. */
.item__meta { font-size: .8rem; color: var(--apagado); margin-top: .45rem; }
/* O preço vem dentro de uma pílula verde, letra branca. */
/* Mesma medida da pílula da taxa do bairro. */
.item__preco {
  font-weight: 800; white-space: nowrap; text-align: right;
  background: var(--faixa); color: #fff;
  border: 2px solid var(--verde); border-radius: 999px;
  width: 7.5rem; padding: .5rem .9rem;
}
.item--inativo { opacity: .5; }
.item--cliente { grid-template-columns: 1fr auto; }
.nada { padding: 1.2rem; text-align: center; color: var(--apagado); }

/* ------------------------------------------------- fotos do produto -- */

/* As seis fotos cabem numa linha: cada uma ocupa um sexto do espaço. */
.fotos { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.foto { position: relative; aspect-ratio: 1; }
.foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--linha); }
@media (max-width: 560px) { .fotos { grid-template-columns: repeat(3, 1fr); } }
/* A lixeira fica DENTRO da foto, no canto de baixo à direita. */
.foto__lixo {
  position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: var(--vermelho); color: #fff; cursor: pointer;
  display: grid; place-items: center; line-height: 0;
}
.foto__lixo svg { width: 14px; height: 14px; }

/* ------------------------------------- adicionais e retirar (listas) -- */

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 620px) { .duas { grid-template-columns: 1fr; } }

.mini { list-style: none; margin: .4rem 0 0; padding: 0; }
.mini li {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .1rem; border-top: 1px dashed var(--linha); font-size: .92rem;
}
.mini li span:first-child { flex: 1; }
.mini .preco { font-weight: 700; color: var(--verde); }

/* --------------------------------------------------------- janelas -- */

dialog {
  border: 0; border-radius: 14px; padding: 0; width: min(760px, calc(100vw - 1.5rem));
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
dialog::backdrop { background: rgba(0,0,0,.45); }
.janela__barra {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--faixa); color: var(--creme); padding: .5rem .8rem;
}
.janela__titulo { margin: 0; font-size: 1rem; }
/* Só rola para baixo: barra de rolagem deitada aqui é sinal de campo que
   não coube, e ela aparecia embaixo do quadro de Tamanhos. */
.janela__corpo { padding: .9rem; max-height: 72vh; overflow-y: auto; overflow-x: hidden; }
.janela__pe { display: flex; gap: .5rem; justify-content: flex-end; padding: .7rem .9rem; border-top: 1px solid var(--linha); }

/* --------------------------------------------------------- cardápio -- */

.grupo-titulo { margin: 1.2rem 0 .4rem; font-size: 1.05rem; font-weight: 800; color: var(--verde); }
.aviso { padding: .6rem .8rem; border-radius: 10px; background: #fff3cd; border: 1px solid #f0d9a0; margin-bottom: .8rem; }
.erro { color: var(--vermelho); font-weight: 700; }

/* ------------------------------------------------------------ marca --
 *
 * A marca desenhada em texto, com as fontes que mais se aproximam da
 * caixa da pizzaria: serifa pesada em "THE" e "ITALY", cursiva em
 * "Little" e em "pizza delivery". Enquanto o arquivo oficial não chega,
 * é isto; com ele, troca-se por uma imagem só.
 */
.marca {
  display: grid; place-items: center;
  background: transparent; color: var(--creme);
  line-height: .92; text-align: center; text-decoration: none;
  container-type: inline-size;
}
.marca__the, .marca__italy {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 900; font-size: 30cqw; letter-spacing: .01em;
}
.marca__little {
  font-family: "Yellowtail", "Segoe Script", "Brush Script MT", cursive;
  font-size: 36cqw; line-height: 1.05; margin: .02em 0 .04em;
}
/* "pizza delivery" é SERIFA na caixa, não cursiva. */
.marca__sub {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 400; font-size: 11cqw; margin-top: .3em; letter-spacing: .01em;
}

/* Os dois selos do cabeçalho: The Little Italy à esquerda e a Mateus
   Informática à direita, as duas com o brilho branco por trás (o mesmo
   efeito do MadaLice: sem ele a logo some no fundo). */
.selo {
  width: 92px; height: 92px; object-fit: contain; flex: 0 0 auto;
  border-radius: 50%;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(255,255,255,.55));
}
/* A logo da Mateus ocupa a altura da faixa e cresce na PROPORÇÃO dela
   (o arquivo é largo); o teto evita a barra de rolagem de lado. */
.selo--mateus {
  border-radius: 0; height: calc(104px + 1.1rem); width: auto;
  max-width: min(230px, 36vw); object-fit: contain;
  margin: -.55rem -.6rem -.55rem 0; align-self: stretch;
}

/* ------------------------------------------------------ selo antigo --
 *
 * A marca dentro de um carimbo redondo: círculo verde com aro creme, do
 * jeito dos selos da caixa. É o que o SISTEMA usa no cabeçalho.
 */
.selo-marca {
  aspect-ratio: 1; border-radius: 50%;
  background: var(--faixa); color: var(--creme);
  border: 2px solid var(--creme); box-shadow: 0 0 0 2px rgba(255,255,255,.12) inset;
  padding: 8cqw;
}
.selo-marca .marca__the, .selo-marca .marca__italy { font-size: 22cqw; }
.selo-marca .marca__little { font-size: 26cqw; }
.selo-marca .marca__sub { font-size: 8cqw; margin-top: .2em; }

/* Código sequencial e código do iFood, na linha do produto. */
.item__codigo {
  display: inline-block; min-width: 2.2rem; padding: 0 .35rem;
  border-radius: 6px; background: var(--faixa); color: var(--creme);
  font-size: .78rem; font-weight: 800; text-align: center;
}
.item__ifood {
  margin-left: .4rem; padding: 0 .4rem; border-radius: 6px;
  background: #fde7e7; color: #b32222; font-size: .72rem; font-weight: 700;
}

/* ------------------------------------------------- tela Informações --
 *
 * As fotografias grandes, com o MatIA ao lado (como em todo sistema da
 * casa: quem explica é ele, numa tela centralizada).
 */
.janela--larga { width: min(920px, calc(100vw - 1.5rem)); }
.info { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 680px) { .info { grid-template-columns: 1fr; } }
.info__matia { text-align: center; }
.info__matia img { width: 150px; }
.info__matia p {
  background: #fff; border: 1px solid var(--linha); border-radius: 14px;
  padding: .6rem .7rem; font-size: .9rem; margin: .4rem 0 0; text-align: left;
}
.info__fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
/* Cada foto com a sua legenda embaixo, encostada à esquerda. */
.foto-ficha { margin: 0; }
.foto-ficha figcaption { font-size: .82rem; text-align: left; margin-top: .3rem; }

/* Cada foto dentro de um quadrado preto; sem foto, fica só o quadrado. */
.info__fotos img, .foto-vazia {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border: 2px solid #000; border-radius: 0; background: var(--papel);
}

/* Campo com o símbolo dentro (R$ à esquerda, % à direita). */
.com-simbolo { position: relative; display: block; }
.com-simbolo > i {
  position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  font-style: normal; font-weight: 700; font-size: .85rem; color: var(--apagado);
}
.com-simbolo > input { padding-left: 2.2rem; }
.com-simbolo--fim > i { left: auto; right: .7rem; }
.com-simbolo--fim > input { padding-left: .7rem; padding-right: 1.8rem; }

/* Linha do bairro: nome, o campo da taxa, gravar e excluir. */
/* Nome ocupa a sobra; taxa, gravar e excluir pedem só o que precisam. */
.item--bairro { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .6rem; }
.item--bairro .taxa-campo { width: 7.5rem; }
.item--bairro .taxa-campo > input { width: 100%; padding: .5rem .9rem .5rem 2.3rem; }
/* O campo da taxa mantém a cara da pílula verde de antes: fundo verde,
   letra branca, e o R$ branco também. Só que agora dá para digitar nele. */
.taxa-campo > input {
  background: var(--faixa); color: #fff; font-weight: 800;
  border: 2px solid var(--verde); border-radius: 999px; text-align: right;
}
.taxa-campo > i { color: #fff; }
/* Os símbolos DENTRO da lista ficam no tamanho de antes. */
.item .botao--simbolo svg { width: 18px; height: 18px; stroke-width: 2.2; }

/* Linha de um tamanho já gravado: os mesmos campos da linha de cima, em
   colunas proporcionais -- tudo cabe sem quebrar e sem rolar de lado. */
.tam-linha {
  list-style: none; border-top: 1px dashed var(--linha);
  padding-top: .45rem; margin-top: .45rem;
  display: grid; grid-template-columns: 6.5rem 1fr 1fr 1fr 6rem auto auto; gap: .4rem;
  align-items: center;
}
.tam-linha .campo { display: block; min-width: 0; }
.tam-linha input, .tam-linha select { width: 100%; }
/* Os botões da linha não esticam: eles são do tamanho do círculo. */
.tam-linha .botao--simbolo, .linha--pe .botao--simbolo { flex: 0 0 auto; }

/* O quadrado vazio que abre a pasta para escolher a imagem. */
.foto-nova {
  width: 100%; aspect-ratio: 1; border: 2px dashed var(--faixa); border-radius: 10px;
  background: transparent; cursor: pointer; position: relative;
}
.foto-nova::before, .foto-nova::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--faixa);
  transform: translate(-50%, -50%);
}
.foto-nova::before { width: 26px; height: 3px; }
.foto-nova::after { width: 3px; height: 26px; }

/* Barra de rolagem um pouco mais grossa, para o dedo e para o olho. */
.janela__corpo { scrollbar-width: auto; scrollbar-color: var(--faixa) var(--linha); }
.janela__corpo::-webkit-scrollbar { width: 14px; }
.janela__corpo::-webkit-scrollbar-track { background: var(--linha); border-radius: 8px; }
.janela__corpo::-webkit-scrollbar-thumb {
  background: var(--faixa); border-radius: 8px; border: 3px solid var(--linha);
}

/* ------------------------------------------------ tela de mensagem --
 *
 * Título, o recado no meio e, no rodapé, o OK com o MatIA à direita.
 */
.janela--aviso { width: min(520px, calc(100vw - 1.5rem)); }
/* Na tela de mensagem o título fica no meio da faixa. */
.janela--aviso .janela__titulo { flex: 1; text-align: center; }
.janela__mensagem {
  text-align: center; font-weight: 700; font-size: 1.05rem;
  padding: 1.4rem 1.6rem; line-height: 1.5;
}
/* Rodapé verde, da mesma cor do cabeçalho, com o OK no meio e o MatIA
   saindo do canto direito. */
.janela__pe--aviso {
  display: flex; align-items: center; justify-content: center;
  position: relative; padding: .55rem 1rem; min-height: 0;
  background: var(--faixa); border-top: 0;
}
/* O OK é largo, como os botões da faixa de cima. */
.janela__pe--aviso .botao { min-width: 9rem; }
/* O MatIA sai do rodapé para cima, sem engordar a faixa. */
.aviso__matia { position: absolute; right: .6rem; bottom: 0; height: 96px; }

/* Lista de marcar: os adicionais que o produto aceita. */
.marcaveis {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .25rem .8rem;
  max-height: 190px; overflow: auto;
}
.marcavel { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.marcavel span { flex: 1; }
.marcavel input { width: 18px; height: 18px; }

/* Os três quadros do produto: Sabores, Adicionais e Retirar. */
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
@media (max-width: 860px) { .tres { grid-template-columns: 1fr; } }
.marcavel--todos {
  border-bottom: 1px solid var(--linha); margin-bottom: .3rem; font-weight: 700; font-size: .85rem;
}

/* Linha do cadastro de Retirar: nome, gravar e excluir. */
.item--retirar { grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem; }

/* O campo da linha nova (Adicionais, Sabores, Retirar) tem a mesma cara
   dos campos do cadastro de produto. */
.item input.campo {
  display: block; width: 100%; padding: .55rem .7rem; font: inherit;
  border: 1px solid var(--linha); border-radius: 10px; background: #fff; color: inherit;
}

/* A linha da busca abre com uma folga da barra de cima. */
#busca-linha, #c-busca-linha { margin-top: .5rem; margin-bottom: .8rem; }

/* Título da listagem dentro do quadro de Tamanhos. */
.listagem {
  margin: .7rem 0 .1rem; font-size: .8rem; font-weight: 800; color: var(--apagado);
}


/* A listagem dos tamanhos ganha faixa e rótulos de coluna. */
/* A faixa da listagem é verde clara com letra branca -- destaca sem brigar
   com o verde escuro do cabeçalho. */
.faixa--mini {
  font-size: .85rem; padding: .35rem .6rem; margin-top: .8rem; border-radius: 8px 8px 0 0;
  background: #4a7c57; color: #fff;
}
/* O bloco inteiro da listagem fica destacado do resto do quadro. */
#f-tam-titulo + .mini, .tam-cabecalho { background: #fdf3e6; }
.tam-cabecalho { padding: .4rem .5rem 0; }
#f-tam-titulo + .mini { padding: 0 .5rem .5rem; border-radius: 0 0 8px 8px; margin-top: 0; }
.tam-cabecalho {
  border-top: 0; margin-top: 0; padding: .35rem .1rem 0;
  font-size: .75rem; font-weight: 800; color: var(--apagado);
}
#f-tam-titulo + .mini .tam-linha:first-child { border-top: 0; }

/*
 * Rótulos e linhas da listagem de tamanhos: as MESMAS colunas dos campos de
 * cima (7 / 8 / 8 / 7 / 7 rem e o botão), para cada valor ficar embaixo do
 * seu rótulo. `.mini li` é flex e vencia a grade -- daí o seletor mais forte.
 */
.tam-cabecalho, .mini li.tam-linha {
  display: grid; grid-template-columns: 8.5rem 7rem 7.5rem 6.5rem 5.5rem 2.4rem; gap: .6rem;
  align-items: center;
}
.mini li.tam-linha span:first-child { flex: none; }
.tam-campo { white-space: nowrap; }
.tam-linha--vista .botao--simbolo { justify-self: start; }

/* ---------------------------------------------------------- rodapé --
 *
 * Mesma faixa verde do cabeçalho, presa embaixo da janela.
 */
.rodape {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .45rem 1rem; background: var(--faixa); color: var(--creme);
  font-size: .82rem; font-weight: 700;
  box-shadow: 0 -2px 10px rgba(0,0,0,.25);
}
.rodape__dev { opacity: .85; font-weight: 600; }
body { padding-bottom: 3.2rem; }

/* ------------------------------------------------ cardápio da cliente --
 *
 * Feito para o celular: linhas de escolha altas, fáceis de tocar com o dedo.
 */
.opcao {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .3rem; border-top: 1px dashed var(--linha); cursor: pointer;
}
.grupo .opcao:first-of-type { border-top: 0; }
.opcao input { width: 1.25rem; height: 1.25rem; accent-color: var(--verde); flex: 0 0 auto; }
.opcao__nome { flex: 1; }
.opcao__preco { font-weight: 800; color: var(--verde); white-space: nowrap; }
/* As fotos do produto correm de lado, uma por vez. */
.fotos-cardapio {
  display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-bottom: .7rem;
}
.fotos-cardapio img {
  flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px; scroll-snap-align: start;
}
.item__preco small { font-size: .68rem; font-weight: 600; color: var(--creme); }
@media (max-width: 480px) {
  .item { grid-template-columns: 72px 1fr auto; gap: .6rem; }
  .item__foto { width: 72px; height: 72px; }
  .item__preco { width: auto; padding: .35rem .7rem; font-size: .9rem; }
}
/* Linha do "Meu pedido": sem foto, o preço e o botão de tirar. */
.item.item--pedido { grid-template-columns: 1fr auto auto; cursor: default; }
.total-pedido { text-align: right; font-size: 1.2rem; font-weight: 800; margin: .3rem 0 .8rem; }
.escolha-entrega { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .6rem; margin-bottom: .4rem; }
.escolha-entrega .opcao { border-top: 0; }
/* A confirmação do pedido: o número grande, no meio. */
.recebido { text-align: center; }
.recebido__numero {
  display: inline-block; margin: .4rem 0 .2rem; padding: .4rem 1.4rem; border-radius: 999px;
  background: var(--faixa); color: var(--creme); font-size: 2rem; font-weight: 900;
}
/* O telefone no alto do cardápio, antes dos produtos. */
.quem {
  background: #fff; border: 1px solid var(--linha); border-radius: 12px;
  padding: .8rem .9rem .3rem; margin-bottom: 1rem;
}
.quem .campo input { font-size: 1.2rem; font-weight: 700; letter-spacing: .02em; }
.quem__achado { margin: 0 0 .6rem; font-size: .92rem; color: var(--apagado); min-height: 1.2em; }
.quem__ok {
  display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--verde); color: #fff; font-size: .8rem; font-weight: 900;
}

/* ------------------------------------------------------------ pedidos --
 *
 * O botão Pedidos fica colado na logo da pizzaria, separado dos cadastros,
 * com o contador vermelho dos pedidos ainda não aceitos.
 */
.botao--pedidos { position: relative; align-self: flex-end; flex: 0 0 5.4rem; }
.contador {
  position: absolute; top: -.45rem; right: -.45rem; min-width: 1.45rem; height: 1.45rem;
  display: grid; place-items: center; padding: 0 .3rem; border-radius: 999px;
  background: var(--vermelho); color: #fff; font-size: .78rem; font-weight: 900;
  border: 2px solid var(--faixa);
}
.filtros { display: flex; gap: .5rem; margin-bottom: .7rem; }
.filtro--ativo { background: var(--verde); color: #fff; }
.pedido { padding: .8rem .9rem; border-top: 1px solid var(--linha); }
.pedido:first-child { border-top: 0; }
.pedido:nth-child(even) { background: #fdf3e6; }
.pedido__topo { display: flex; align-items: center; gap: .7rem; margin-bottom: .35rem; }
.pedido__numero { font-size: 1.25rem; font-weight: 900; }
.pedido__hora { color: var(--apagado); font-weight: 700; }
.pedido__situacao {
  margin-left: auto; padding: .15rem .6rem; border-radius: 999px;
  background: var(--faixa); color: var(--creme); font-size: .75rem; font-weight: 800;
}
.pedido--novo .pedido__situacao { background: var(--vermelho); color: #fff; }
.pedido--novo { box-shadow: inset 5px 0 0 var(--vermelho); }
.pedido--cancelado { opacity: .6; }
.pedido__cliente { font-size: .92rem; margin-bottom: .45rem; }
.pedido__itens { list-style: none; margin: 0 0 .45rem; padding: 0; }
.pedido__itens li { padding: .3rem 0; border-top: 1px dashed var(--linha); }
.pedido__itens li > span { float: right; font-weight: 700; }
.pedido__detalhe { font-size: .85rem; color: var(--apagado); }
.pedido__conta { display: flex; gap: .9rem; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; font-size: .9rem; }
.pedido__conta b { font-size: 1.1rem; }
.pedido__acoes { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .6rem; }
/* A engrenagem das Configurações: redonda, menor, logo depois do último botão. */
.cabecalho__acoes .botao--engrenagem {
  flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%;
  display: grid; place-items: center; align-self: center;
}
/* A logo da Mateus encostada na borda direita da faixa. O arquivo tem uma
   sobra transparente à esquerda (quase um quarto da largura): a margem
   negativa come essa sobra e a engrenagem fica colada na logo. */
.selo--mateus { margin-right: -1rem; margin-left: -2.6rem; }
.aviso__numero { font-size: 1.35em; font-weight: 900; }
/* O brinde: na caixa do app, na confirmação e no pedido do sistema. */
.aviso__brinde { display: inline-block; margin-top: .5rem; color: var(--vermelho); font-weight: 900; }
.pedido__brinde {
  margin: .2rem 0 .45rem; padding: .3rem .6rem; border-radius: 8px;
  background: #fbe3e3; color: var(--vermelho); font-weight: 900;
}
/* Pedidos fora da fileira: perto da logo da pizzaria, mas com respiro. */
.cabecalho > .botao--pedidos { margin-left: 1.6rem; }
/* O rodapé do app da cliente: só o endereço, no meio. */
.rodape--app { justify-content: center; text-align: center; font-size: .85rem; }
/* A barra do carrinho do app: verde, presa embaixo, acima do rodapé. */
.barra-pedido {
  position: fixed; left: .8rem; right: .8rem; bottom: 2.9rem; z-index: 25;
  display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem;
  border: 0; border-radius: 14px; background: var(--verde); color: #fff;
  font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.barra-pedido > span:nth-child(2) { flex: 1; text-align: left; }
.barra-pedido__qtd {
  min-width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 999px;
  background: var(--creme); color: var(--faixa); font-weight: 900;
}
/* Folga no fim da lista para a barra não cobrir o último produto. */
#produtos-area { padding-bottom: 5rem; }
/* O carrinho na barra: o desenho do carrinho com o número de itens em cima. */
.barra-pedido__icone { position: relative; display: grid; place-items: center; }
.barra-pedido__icone .barra-pedido__qtd {
  position: absolute; top: -.55rem; right: -.7rem; min-width: 1.25rem; height: 1.25rem; font-size: .72rem;
}
.barra-pedido > span:nth-child(2) { flex: 1; text-align: left; margin-left: .4rem; }
/* O carrinho aberto: item, − quantidade +, e o resumo. */
.carrinho__item { display: flex; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--linha); }
.carrinho__desc { flex: 1; min-width: 0; }
.carrinho__desc .item__meta { margin-top: .15rem; }
.carrinho__preco { margin-top: .3rem; font-weight: 800; color: var(--verde); }
.passo {
  display: flex; align-items: center; gap: .2rem; flex: 0 0 auto;
  border: 1px solid var(--linha); border-radius: 999px; padding: .15rem;
}
.passo button {
  width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent;
  color: var(--vermelho); font: inherit; font-size: 1.2rem; font-weight: 900; cursor: pointer; line-height: 1;
}
.passo b { min-width: 1.4rem; text-align: center; }
.carrinho__mais {
  display: block; width: 100%; margin: .6rem 0; padding: .6rem; border: 0; background: transparent;
  color: var(--vermelho); font: inherit; font-weight: 800; cursor: pointer;
}
.resumo { margin: .2rem 0 1rem; }
.resumo > div { display: flex; justify-content: space-between; padding: .2rem 0; color: var(--apagado); }
.resumo__total { color: var(--texto) !important; font-size: 1.15rem; font-weight: 900; }
/* A senha no alto do Pedido. */
.quem__linha { margin: .5rem 0; font-size: .92rem; }
.quem__linha a { color: var(--vermelho); font-weight: 700; }
.quem__manter { display: flex; align-items: center; gap: .45rem; margin: .5rem 0; font-size: .92rem; }
.quem__manter input { width: 1.15rem; height: 1.15rem; accent-color: var(--verde); }
/* A logo do sistema é link para o início: sem sublinhado, do tamanho da logo. */
.selo-link { display: block; flex: 0 0 auto; line-height: 0; }

/* Título de cada GRUPO no cardápio da cliente (PIZZAS SALGADAS, PIZZAS DOCES). */
.grupo-titulo { margin: 1.2rem 0 .5rem; font-size: 1.15rem; font-weight: 800; letter-spacing: .5px; color: var(--verde, #14392a); }


/* Foto do produto em tela inteira (clicar na miniatura do cadastro). */
.foto img { cursor: zoom-in; }
dialog.foto-grande {
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0;
  border: 0; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
dialog.foto-grande::backdrop { background: rgba(0, 0, 0, .92); }
.foto-grande img { max-width: 96vw; max-height: 94vh; object-fit: contain; box-shadow: 0 0 40px rgba(0, 0, 0, .6); }
.foto-grande__fechar, .foto-grande__seta {
  position: absolute; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff;
  cursor: pointer; font-size: 1.6rem; width: 3rem; height: 3rem; line-height: 3rem; text-align: center;
}
.foto-grande__fechar { top: 1rem; right: 1rem; }
.foto-grande__seta { top: 50%; transform: translateY(-50%); font-size: 2.4rem; }
.foto-grande__seta--ant { left: 1rem; }
.foto-grande__seta--prox { right: 1rem; }
.foto-grande__fechar:hover, .foto-grande__seta:hover { background: rgba(255, 255, 255, .3); }

/* ------------------------------------------------------------------ *
 * APP DA CLIENTE no estilo cardápio de app (modelo do Mateus,
 * 23/09/2026): abas dos grupos presas no topo; item com nome,
 * ingredientes e preço em vermelho, foto à direita.
 * ------------------------------------------------------------------ */
.abas-grupos {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 0; overflow-x: auto;
  background: #fff; border-bottom: 1px solid #e6ded0; margin: .6rem -1rem 0; padding: 0 .5rem;
  scrollbar-width: none;
}
.abas-grupos::-webkit-scrollbar { display: none; }
.aba-grupo {
  flex: 0 0 auto; border: 0; background: none; padding: .9rem .9rem .8rem; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 700; letter-spacing: .5px; color: #6b6255;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.aba-grupo--ativa { color: var(--vermelho, #8c1b1b); border-bottom-color: var(--vermelho, #8c1b1b); }
.cardapio { background: #fff; margin: 0 -1rem; padding: 0 1rem 1rem; }
.secao { scroll-margin-top: 3.4rem; }
.secao__titulo { margin: 0; padding: 1.3rem 0 .4rem; font-size: 1.3rem; font-weight: 900; color: #222; letter-spacing: .3px; }
.prato {
  display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 0;
  border-bottom: 1px solid #eee6da; cursor: pointer;
}
.prato:last-child { border-bottom: 0; }
.prato__texto { flex: 1; min-width: 0; }
.prato__nome { font-size: 1.05rem; font-weight: 600; color: #222; }
.prato__desc { margin-top: .25rem; font-size: .88rem; line-height: 1.35; color: #7a7266; }
.prato__preco { margin-top: .35rem; font-size: .92rem; font-weight: 700; color: var(--vermelho, #8c1b1b); }
.prato__preco small { font-weight: 600; font-size: .75rem; color: #7a7266; }
.prato__foto { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 8px; object-fit: cover; background: #f0e6d8; }

/* Primeiro acesso: as duas senhas e o SALVAR à direita, na mesma linha; no
   celular, um campo embaixo do outro e o botão à direita. */
.senha-nova { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.senha-nova .campo { flex: 1 1 12rem; margin: 0; }
.senha-nova__salvar { flex: 0 0 auto; margin-left: auto; min-width: 7rem; }
@media (max-width: 600px) { .senha-nova .campo { flex-basis: 100%; } }

/* Olhinho dentro do campo de senha, à direita. */
.senha-caixa { position: relative; display: block; }
.senha-caixa input { width: 100%; padding-right: 3rem; }
.senha-caixa__olho {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  border: 0; background: none; padding: .35rem; cursor: pointer; color: #6b6255; line-height: 0;
}
.senha-caixa__olho:hover { color: var(--verde, #14392a); }

/* Pergunta de instalar: continuar o pedido aqui ou salvar o ícone na tela. */
.instalar {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .55); padding: 1rem;
}
.instalar__caixa {
  width: 100%; max-width: 420px; background: #fff; border-radius: 18px; padding: 1.4rem 1.2rem 1.1rem;
  text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.instalar__icone { width: 84px; height: 84px; border-radius: 50%; display: block; margin: -3.4rem auto .6rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.instalar__caixa h2 { margin: 0 0 .35rem; font-size: 1.25rem; color: #222; }
.instalar__caixa p { margin: 0 0 1rem; color: #6b6255; font-size: .95rem; line-height: 1.4; }
.instalar__botao {
  display: block; width: 100%; margin-top: .55rem; padding: .95rem; border-radius: 12px; font: inherit;
  font-weight: 800; font-size: 1.02rem; cursor: pointer; border: 2px solid #244028; background: #fff; color: #244028;
}
.instalar__botao--salvar { background: #244028; color: #fff; }
.instalar__passos { margin-top: .9rem; padding: .8rem; border-radius: 10px; background: #f4efe3; color: #333; font-size: .92rem; line-height: 1.45; text-align: left; }
.instalar__simbolo { font-weight: 900; }

/* Cadastro do cliente no app (telefone novo). */
.janela-cadastro { width: min(520px, 96vw); }
.janela-cadastro .campo { margin-bottom: .6rem; }
.janela-cadastro .campo span small { font-weight: 500; opacity: .8; }
.k-linha { display: flex; gap: .6rem; }
.k-linha .campo { flex: 1 1 0; min-width: 0; }
.k-linha .k-uf { flex: 0 0 4.5rem; }

/* Logo da Mateus Informática no app, igual à do sistema (brilho branco em
   volta) e "Desenvolvimento" na base da pirâmide. */
.assinatura { margin-left: auto; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.assinatura__logo {
  height: 74px; width: auto; max-width: 42vw; object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(255,255,255,.55));
}
.assinatura__texto {
  margin-top: -.35rem; font-size: .72rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.6);
}
.assinatura--porta { margin: 1.6rem auto 3.5rem; }
@media (max-width: 420px) { .assinatura__logo { height: 56px; } .assinatura__texto { font-size: .62rem; letter-spacing: 1px; } }

.secao__vazia { margin: 0; padding: .6rem 0 1rem; color: #9a9184; font-style: italic; }

/* Título do grupo no app: faixa verde, letra branca, centralizado (pedido do Mateus). */
.secao__titulo { margin: 1rem -1rem .2rem; padding: .7rem 1rem; background: #244028; color: #fff; text-align: center; font-size: 1.15rem; letter-spacing: 1px; }

/* LOGIN DO SISTEMA: tela por cima de tudo, até entrar. */
.login-fundo {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: #244028; padding: 1rem; overflow: auto;
}
.login-caixa {
  width: 100%; max-width: 380px; background: #fff; border-radius: 16px; padding: 1.4rem 1.3rem 1.1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.login-caixa__logo { display: block; width: 96px; height: 96px; border-radius: 50%; margin: -3.8rem auto .7rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.login-caixa h2 { margin: 0 0 .8rem; text-align: center; font-size: 1.2rem; color: #222; }
.login-caixa__dica { margin: 0 0 .8rem; font-size: .9rem; color: #6b6255; text-align: center; }
.login-caixa .campo { margin-bottom: .6rem; }
.login-caixa__ok { width: 100%; margin-top: .4rem; }
.login-caixa__links { margin-top: .8rem; text-align: center; font-size: .9rem; }
.usuario-sistema { position: relative; margin-left: .4rem; }
.usuario-sistema__nome {
  border: 0; border-radius: 999px; padding: .45rem .8rem; font: inherit; font-weight: 800; font-size: .8rem;
  background: rgba(255, 255, 255, .12); color: var(--creme, #f4efe3); cursor: pointer; white-space: nowrap;
}
.usuario-sistema__menu {
  position: absolute; right: 0; top: calc(100% + .3rem); z-index: 50; background: #fff; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25); overflow: hidden; min-width: 10rem;
}
.usuario-sistema__menu button { display: block; width: 100%; padding: .7rem 1rem; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.usuario-sistema__menu button:hover { background: #f4efe3; }

/* MEUS PEDIDOS no app: o andamento de cada pedido. */
.quem__linha--logado { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.botao-meus {
  border: 2px solid #244028; background: #fff; color: #244028; border-radius: 999px;
  padding: .35rem .8rem; font: inherit; font-weight: 800; font-size: .85rem; cursor: pointer;
}
.meu-pedido { border: 1px solid #eee6da; border-radius: 12px; padding: .8rem .9rem; margin-bottom: .7rem; }
.meu-pedido__topo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.meu-pedido__quando { font-size: .8rem; color: #8a8174; margin-top: .15rem; }
.meu-pedido__itens { margin-top: .5rem; font-size: .9rem; line-height: 1.45; }
.meu-pedido__total { margin-top: .45rem; font-weight: 800; color: var(--vermelho, #8c1b1b); }
.andamento { padding: .25rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 900; letter-spacing: .5px; white-space: nowrap; }
.and--novo { background: #e7eef9; color: #1f4f99; }
.and--preparo { background: #fff1d6; color: #9a5b00; }
.and--saiu { background: #e1f3ff; color: #005c8a; }
.and--entregue { background: #dff3e3; color: #1f6b2b; }
.and--cancelado { background: #fbe3e3; color: #8c1b1b; }

/* MENUS DO CABEÇALHO (23/09/2026): o usuário logado fica no alto da faixa,
   fora da fileira; os botões encolhem juntos em vez de passar por cima do
   Pedidos. */
.cabecalho .usuario-sistema { position: absolute; top: .35rem; right: 12.5rem; margin: 0; z-index: 30; }
.cabecalho__acoes { gap: .4rem; }
.cabecalho__acoes .botao { flex: 0 1 5.4rem; min-width: 4.3rem; }
.cabecalho__acoes .botao--engrenagem { flex: 0 0 2.6rem; min-width: 2.6rem; }
@media (max-width: 1000px) { .botao--icone span { font-size: .66rem; } .cabecalho > .botao--pedidos { margin-left: .8rem; } }
/* O usuário logado, visível no alto da faixa. */
.cabecalho .usuario-sistema__nome { background: var(--creme, #f4efe3); color: var(--faixa, #244028); padding: .3rem .75rem; font-size: .75rem; }
/* Janela até 1100 px: botões mais estreitos e a logo da Mateus menor, para
   a fileira caber sem passar por cima do Pedidos. */
@media (max-width: 1100px) {
  .cabecalho__acoes { gap: .3rem; }
  .cabecalho__acoes .botao { flex: 0 1 4.6rem; min-width: 3.5rem; padding: .35rem .25rem; }
  .cabecalho .selo--mateus { max-width: 150px; margin-left: -1.6rem; }
  .cabecalho .usuario-sistema { right: 9rem; }
}

/* Horário do app, logo abaixo do cabeçalho: aberto (verde) ou fechado (vermelho). */
.faixa-horario { padding: .55rem 1rem; text-align: center; font-size: .9rem; }
.faixa-horario--aberto { background: #e3f3e5; color: #1f5a2a; }
.faixa-horario--fechado { background: #fbe3e3; color: #8c1b1b; }
/* Juntar sabores: lista que rola dentro da janela do produto. */
.juntar { max-height: 16rem; overflow-y: auto; }
.juntar input:disabled + .opcao__nome { opacity: .45; }

/* TELE GRÁTIS em destaque no topo do app (e o valor, quando houver taxa). */
.faixa-tele { padding: .5rem 1rem; text-align: center; font-size: .92rem; background: #f4efe3; color: #333; }
.faixa-tele--gratis {
  background: #1f7a35; color: #fff; font-size: 1.15rem; letter-spacing: 1px; padding: .7rem 1rem;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
}
.faixa-tele--gratis b { font-weight: 900; }
.selo-gratis { display: inline-block; padding: .15rem .55rem; border-radius: 999px; background: #1f7a35; color: #fff; font-weight: 900; letter-spacing: .5px; }

/* O usuário logado (👤 NOME) centralizado embaixo da logo da Mateus, na
   linha entre a faixa verde e a página (pedido do Mateus, 23/09/2026). */
.cabecalho .usuario-sistema { top: 100%; right: 115px; transform: translate(50%, -50%); }
@media (max-width: 1100px) { .cabecalho .usuario-sistema { right: 75px; } }
.cabecalho .usuario-sistema__nome { box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.cabecalho .usuario-sistema__menu { right: 50%; transform: translateX(50%); }
/* O botão do usuário INTEIRO abaixo da faixa verde, com um respiro,
   centralizado embaixo da logo da Mateus (ajuste do Mateus, 23/09/2026). */
.cabecalho .usuario-sistema { top: calc(100% + .5rem); transform: translateX(50%); }
/* O usuário EM CIMA DO PEDIDOS (substitui as posições anteriores): mesma
   largura do Pedidos, mais fino; o Pedidos fica como estava. */
.coluna-pedidos { display: flex; flex-direction: column; gap: .3rem; align-self: flex-end; margin-left: 1.6rem; flex: 0 0 5.4rem; }
.coluna-pedidos > .botao--pedidos { margin-left: 0; width: 100%; }
.cabecalho .coluna-pedidos .usuario-sistema { position: relative; top: auto; right: auto; transform: none; margin: 0; }
.coluna-pedidos .usuario-sistema__nome {
  width: 100%; padding: .12rem .3rem; font-size: .66rem; line-height: 1.3; box-shadow: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px;
}
.coluna-pedidos .usuario-sistema__menu { left: 0; right: auto; transform: none; top: calc(100% + .25rem); }
@media (max-width: 1000px) { .coluna-pedidos { margin-left: .8rem; } }
.coluna-pedidos > .botao--pedidos { flex: none; align-self: stretch; }

/* ⚙ Impressoras: lista e cadastro. */
.janela-impressoras { width: min(760px, 96vw); }
.imp-linha { display: flex; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--linha, #e6ded0); }
.imp-linha__txt { flex: 1; min-width: 0; }
.imp-linha--parada { opacity: .55; }
.janela-impressoras .dois { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 700px) { .janela-impressoras .dois { grid-template-columns: 1fr; } }
.janela-impressoras .marcaveis { max-height: 15rem; }

/* Pergunta de salvar o ícone: sozinha, sem a página por trás (pedido do Mateus). */
.instalar { background: #244028; align-items: center; }
.instalar__caixa h2 { margin-bottom: 1rem; }

/* A sobra transparente da logo da Mateus cobria a engrenagem e o clique não
   chegava nela: os botões ficam NA FRENTE da logo. */
.cabecalho__acoes { position: relative; z-index: 3; }
.instalar__passos { text-align: center; }
/* "Desenvolvimento" logo abaixo da base da pirâmide (sem subir no
   "Informática"), sem negrito e no centro da pirâmide -- que fica um pouco
   à esquerda do meio da imagem. */
.assinatura__texto { margin-top: .05rem; font-weight: 400; font-size: .62rem; letter-spacing: 2px; transform: translateX(-8px); text-shadow: 0 0 4px rgba(255,255,255,.45); }
@media (max-width: 420px) { .assinatura__texto { font-size: .55rem; letter-spacing: 1.5px; transform: translateX(-6px); } }
/* "Desenvolvimento" de ponta a ponta da BASE da pirâmide (45,5% da largura
   da imagem, no centro dela), letra por letra; o site embaixo. Tudo no centro. */
.assinatura { align-items: center; text-align: center; }
.assinatura__texto {
  display: flex; justify-content: space-between; width: 45.5%; margin: .1rem auto 0;
  text-transform: none; letter-spacing: 0; transform: none; font-weight: 400; font-size: .66rem;
}
.assinatura__site { display: block; margin-top: .15rem; font-size: .58rem; color: #fff; opacity: .85; text-decoration: none; letter-spacing: .3px; }
.assinatura__site:hover { text-decoration: underline; opacity: 1; }
@media (max-width: 420px) { .assinatura__texto { font-size: .54rem; letter-spacing: 0; transform: none; } .assinatura__site { font-size: .5rem; } }
/* A caixa da assinatura tem a largura da LOGO (na tela de entrada ela
   ocupava a tela toda e o "Desenvolvimento" esticava junto). */
.assinatura { width: fit-content; display: flex; }
.assinatura--porta { margin-left: auto; margin-right: auto; }
.assinatura__site { font-size: .68rem; }
@media (max-width: 420px) { .assinatura__site { font-size: .6rem; } }
/* A logo da Mateus também abre o site; o endereço um pouco maior. */
.assinatura__link { display: block; line-height: 0; }
.assinatura__site { font-size: .78rem; }
@media (max-width: 420px) { .assinatura__site { font-size: .7rem; } }

/* Grupos: a linha tem nome, ▲, ▼, gravar e excluir. */
#g-lista .item--retirar { grid-template-columns: minmax(0, 1fr) auto auto auto auto; }
/* O lema da casa na pergunta de salvar o ícone, entre o nome e os botões. */
.instalar__lema { list-style: none; margin: 0 auto 1rem; padding: 0; display: inline-block; text-align: left; color: #333; font-size: .95rem; line-height: 1.7; }
.instalar__lema span { display: inline-block; width: 1.6rem; }
/* A bandeira desenhada: o Windows mostra o emoji 🇮🇹 como "IT". */
.instalar__bandeira { display: inline-block; width: 1.15rem; height: .8rem; vertical-align: -.05rem; border-radius: 2px;
  background: linear-gradient(90deg, #009246 33.3%, #fff 33.3% 66.6%, #ce2b37 66.6%); box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.instalar__caixa h2 { margin-bottom: .6rem; }
/* Pergunta de salvar o ícone: sem o nome escrito, a logo maior no lugar. */
.instalar__icone { width: 132px; height: 132px; margin: -5.2rem auto .9rem; }
.instalar__caixa { padding-top: 1.2rem; }

/* LOGO OFICIAL redonda (23/09/2026): no cabeçalho do app, na entrada e no sistema. */
.logo-cabecalho { display: block; height: 108px; width: 108px; border-radius: 50%; }
@media (max-width: 420px) { .logo-cabecalho { height: 92px; width: 92px; } }
.porta__logo img { border-radius: 50%; box-shadow: 0 6px 24px rgba(0,0,0,.35); }

/* CAPA da pizzaria no fundo da pergunta de salvar o ícone (23/09/2026): a
   foto cobre a tela sem esticar; a caixa fica embaixo, para o nome da casa
   aparecer em cima. Um véu escuro só no pé, atrás da caixa. */
.instalar {
  background: #244028 url(capa.png) center / cover no-repeat;
  align-items: flex-end; padding-bottom: 1.2rem;
}
.instalar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
}
.instalar__caixa { position: relative; }
/* Celular em pé: a capa na parte de cima (nome inteiro e as pizzas dos
   lados), a cor da madeira embaixo, atrás da caixa. */
@media (orientation: portrait) {
  .instalar { background: #2a170d url(capa.png) center top / auto 60vh no-repeat; }
  .instalar::before { background: linear-gradient(to bottom, rgba(42,23,13,0) 45vh, #2a170d 60vh); }
}
.selo-link--mateus { align-self: stretch; margin-right: -1rem; }
.selo-link--mateus .selo--mateus { margin-right: 0; }
/* Pergunta de salvar o ícone: SÓ OS BOTÕES em cima da capa (sem caixa
   branca e sem a logo redonda, para não tapar a capa). */
.instalar__caixa { background: transparent; box-shadow: none; padding: 0; }
.instalar__botao { box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
@media (orientation: portrait) {
  .instalar { background-size: auto 76vh; }
  .instalar::before { background: linear-gradient(to bottom, rgba(42,23,13,0) 62vh, #2a170d 76vh); }
}
/* A frase da casa, centralizada, em amarelo-ouro (combina com a capa). */
.frase-casa {
  margin: .4rem 0 .2rem; text-align: center; font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: 1.12rem; font-weight: 700; color: #b8871b; letter-spacing: .2px;
}
.quem__ola { font-size: 1rem; }
.frase-casa { text-wrap: balance; }
/* SAUDAÇÃO depois de entrar: faixa verde, "Olá, Mateus," + a frase em
   amarelo-ouro na mesma linha, e o "Meus pedidos" branco à direita. */
.saudacao {
  display: flex; align-items: center; gap: .8rem; margin-top: .7rem;
  background: #244028; color: #f4efe3; border-radius: 12px; padding: .7rem .9rem;
}
.saudacao__texto { flex: 1; margin: 0; font-size: 1rem; line-height: 1.35; text-wrap: balance; }
.saudacao__texto b { color: #fff; }
.saudacao .frase-casa { display: inline; margin: 0; font-size: 1.02rem; color: #e0b54a; text-align: left; }
.saudacao .botao-meus { flex: 0 0 auto; background: #fff; color: #244028; border-color: #fff; }
.saudacao .botao-meus:hover { background: #e6f2e7; }
@media (max-width: 560px) {
  .saudacao { flex-wrap: wrap; gap: .5rem; }
  .saudacao__texto { flex-basis: 100%; }
  .saudacao .botao-meus { margin-left: auto; padding: .3rem .8rem; font-size: .8rem; }
}
/* Faixa verde: "Olá, Mateus" à esquerda, a FRASE NO CENTRO, "Meus pedidos" à direita. */
.saudacao__ola { flex: 0 0 auto; font-size: 1rem; }
.saudacao__ola b { color: #fff; }
.saudacao .frase-casa { display: block; flex: 1; text-align: center; margin: 0; text-wrap: balance; }
.saudacao__meio { flex: 1; }
@media (max-width: 560px) {
  .saudacao .frase-casa { order: 3; flex-basis: 100%; }
  .saudacao .botao-meus { order: 2; }
}

/* TAMANHO com a quantidade ao lado do valor: nome | preço | − n + */
.tam-qtd { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px dashed #e6ded0; }
.tam-qtd:last-child { border-bottom: 0; }
.tam-qtd__nome { flex: 1; min-width: 0; }
.tam-qtd__preco { font-weight: 800; color: var(--verde, #244028); white-space: nowrap; }
.tam-qtd__qtd { display: inline-flex; align-items: center; gap: .15rem; border: 2px solid #244028; border-radius: 999px; padding: .1rem; }
.tam-qtd__qtd b { min-width: 1.6rem; text-align: center; font-size: 1rem; }
.tam-qtd__botao { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: #244028; color: #fff; font-size: 1.2rem; font-weight: 900; line-height: 1; cursor: pointer; }
@media (max-width: 420px) {
  .tam-qtd { gap: .4rem; }
  .tam-qtd__nome { font-size: .85rem; }
  .tam-qtd__preco { font-size: .9rem; }
  .tam-qtd__botao { width: 1.8rem; height: 1.8rem; }
}
/* Foto do produto no app: toca e abre grande. */
.fotos-cardapio img { cursor: zoom-in; }
dialog.foto-grande { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; }
dialog.foto-grande::backdrop { background: rgba(0,0,0,.94); }
.foto-grande img { max-width: 100vw; max-height: 100vh; object-fit: contain; touch-action: pinch-zoom; }
.foto-grande__fechar { position: absolute; top: .8rem; right: .8rem; width: 2.8rem; height: 2.8rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 1.4rem; cursor: pointer; }
.tam-qtd__obs { width: 100%; margin: .1rem 0 .5rem; padding: .55rem .8rem; border: 1px solid #e6ded0; border-radius: 10px; font: inherit; font-size: .9rem; background: #fffdf8; }

/* MONTE SUA PIZZA: primeiro o tamanho (cartões), depois os sabores. */
.escolha-tamanho { background: #fff; margin: .6rem -1rem 0; padding: 1rem; }
.escolha-tamanho__titulo { margin: 0 0 .7rem; text-align: center; font-size: 1.2rem; color: #244028; }
.escolha-tamanho__cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.cartao-tamanho {
  display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1rem .6rem;
  border: 2px solid #244028; border-radius: 16px; background: #fff; cursor: pointer; font: inherit;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.cartao-tamanho:hover { background: #f1f7f1; }
.cartao-tamanho__nome { font-size: 1.15rem; font-weight: 900; color: #244028; letter-spacing: .5px; }
.cartao-tamanho__det { font-size: .85rem; color: #6b6255; text-align: center; }
.cartao-tamanho__preco { margin-top: .2rem; font-weight: 900; color: var(--vermelho, #8c1b1b); }
.montar__sub { margin: 0 0 .6rem; text-align: center; color: #6b6255; }
.opcao--sabor .opcao__desc { display: block; font-size: .78rem; color: #8a8174; font-weight: 400; margin-top: .1rem; }
.cartao-tamanho { text-align: center; }
.cartao-tamanho__det { font-size: .9rem; line-height: 1.3; }

/* Tamanho escolhido, pizzas marcadas e a barra da montagem. */
.cartao-tamanho--escolhido { background: #244028; }
.cartao-tamanho--escolhido .cartao-tamanho__nome, .cartao-tamanho--escolhido .cartao-tamanho__det { color: #fff; }
.cartao-tamanho--escolhido .cartao-tamanho__preco { color: #e0b54a; }
.prato--marcado { background: #eef6ee; box-shadow: inset 4px 0 0 #244028; }
.prato--marcado .prato__preco { color: #244028; }
.barra-montagem {
  position: fixed; left: .8rem; right: .8rem; bottom: 2.9rem; z-index: 26; display: flex; align-items: center; gap: .7rem;
  background: #244028; color: #f4efe3; border-radius: 14px; padding: .7rem .8rem; box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.barra-montagem__txt { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.3; }
.barra-montagem__txt small { opacity: .9; }
.barra-montagem__botao { flex: 0 0 auto; border: 0; border-radius: 999px; background: #fff; color: #244028; font: inherit; font-weight: 900; padding: .6rem .9rem; cursor: pointer; }
.barra-montagem__botao:disabled { opacity: .5; cursor: default; }
body.com-montagem .barra-pedido { bottom: 7.4rem; }
body.com-montagem main { padding-bottom: 12rem; }
/* Cartões do tamanho: PEQUENA verde da empresa, GRANDE cor de madeira;
   duas linhas no máximo, tudo centralizado. */
.escolha-tamanho__titulo { text-transform: uppercase; letter-spacing: 1px; text-align: center; }
.cartao-tamanho { border: 0; color: #fff; padding: 1rem .6rem; gap: .35rem; justify-content: center; box-shadow: 0 5px 14px rgba(0,0,0,.18); }
.cartao-tamanho--P { background: #244028; }
.cartao-tamanho--G { background: #6b3e22; }
.cartao-tamanho:hover { filter: brightness(1.08); background-color: inherit; }
.cartao-tamanho--P:hover { background: #244028; }
.cartao-tamanho--G:hover { background: #6b3e22; }
.cartao-tamanho__nome { color: #fff; font-size: 1.45rem; letter-spacing: 1.5px; }
.cartao-tamanho__det { color: #f4efe3; font-size: .88rem; line-height: 1.35; }
.cartao-tamanho__det b { color: #e0b54a; white-space: nowrap; }
/* escolhido: aro dourado em volta */
.cartao-tamanho--escolhido { box-shadow: 0 0 0 3px #e0b54a, 0 5px 14px rgba(0,0,0,.25); }
.cartao-tamanho--escolhido.cartao-tamanho--P { background: #244028; }
.cartao-tamanho--escolhido.cartao-tamanho--G { background: #6b3e22; }
.cartao-tamanho--escolhido .cartao-tamanho__det { color: #f4efe3; }
/* A barra da pizza em montagem é o RODAPÉ: colada embaixo, largura toda,
   sem flutuar em cima dos produtos (pedido do Mateus). */
.barra-montagem { left: 0; right: 0; bottom: 0; border-radius: 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(0,0,0,.25); }
body.com-montagem .rodape--app { display: none; }
body.com-montagem .barra-pedido { bottom: 5.2rem; }
body.com-montagem main { padding-bottom: 11rem; }
.cartao-tamanho__det { text-transform: uppercase; letter-spacing: .3px; }
/* Observação em duas linhas (pizza e produto). */
textarea.tam-qtd__obs { display: block; resize: none; min-height: 3.2rem; line-height: 1.35; }
textarea.tam-qtd__obs[hidden] { display: none; }
/* "Quantas pizzas você quer?" */
.quantas__pergunta { margin: .2rem 0 .8rem; text-align: center; font-size: 1.15rem; font-weight: 800; color: #244028; }
.quantas__qtd { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .6rem; }
.quantas__qtd b { font-size: 2rem; min-width: 2.5rem; text-align: center; color: #244028; }
.quantas__botao { width: 3rem; height: 3rem; font-size: 1.6rem; }

/* MONTE O SEU PEDIDO — tudo em maiúsculas, nas cores da casa. */
.janela-montagem .janela__titulo, .janela-montagem .janela__corpo, .janela-montagem .botao { text-transform: uppercase; }
.quantas__pergunta { margin: .2rem 0 1rem; text-align: center; font-size: 1.2rem; font-weight: 900; color: #244028; letter-spacing: .5px; }
.quantas__linha {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .6rem;
  padding: .8rem 1rem; border-radius: 14px; color: #fff;
}
.quantas__linha--P { background: #244028; }
.quantas__linha--G { background: #6b3e22; }
.quantas__tam { font-size: 1.25rem; font-weight: 900; letter-spacing: 1px; line-height: 1.2; }
.quantas__tam small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .3px; color: #f4efe3; opacity: .9; }
.quantas__linha .quantas__qtd { display: inline-flex; align-items: center; gap: .6rem; margin: 0; }
.quantas__linha .quantas__qtd b { font-size: 1.6rem; min-width: 2rem; text-align: center; color: #fff; }
.quantas__linha .quantas__botao { width: 2.6rem; height: 2.6rem; font-size: 1.4rem; background: #fff; color: #244028; }
.quantas__linha--G .quantas__botao { color: #6b3e22; }
.quantas__total { margin: .4rem 0 0; text-align: center; font-weight: 800; color: #8c1b1b; letter-spacing: .5px; }
/* rodapé da montagem em maiúsculas + VER CARRINHO */
.barra-montagem__txt { text-transform: uppercase; }
.barra-montagem__carrinho {
  flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; position: relative;
  border: 2px solid #f4efe3; border-radius: 12px; background: transparent; color: #f4efe3; padding: .3rem .55rem; cursor: pointer; font: inherit;
}
.barra-montagem__carrinho b { position: absolute; top: -.5rem; right: -.5rem; min-width: 1.3rem; height: 1.3rem; border-radius: 999px; background: #8c1b1b; color: #fff; font-size: .72rem; display: grid; place-items: center; }
.barra-montagem__carrinho span { font-size: .6rem; font-weight: 800; letter-spacing: .3px; white-space: nowrap; }
.barra-montagem__botao { text-transform: uppercase; }
/* O TOTAL do pedido vai aparecendo no rodapé (carrinho + a pizza em montagem). */
.barra-montagem__total { display: inline-block; margin-top: .2rem; font-weight: 900; color: #e0b54a; font-size: .95rem; letter-spacing: .3px; }
/* Montando: o carrinho fica no próprio rodapé (VER CARRINHO). */
body.com-montagem .barra-pedido { display: none; }

/* OUTROS ITENS: o terceiro botão, na largura toda, em vermelho da casa. */
.escolha-tamanho__cartoes .cartao-tamanho--O { grid-column: 1 / -1; background: #8c1b1b; flex-direction: row; justify-content: center; gap: .8rem; padding: .8rem; }
.cartao-tamanho--O:hover { background: #8c1b1b; }
.cartao-tamanho--O .cartao-tamanho__nome { font-size: 1.2rem; }
.cartao-tamanho--escolhido.cartao-tamanho--O { background: #8c1b1b; }
/* Fim das pizzas: dois botões grandes. */
.termino__botoes { display: grid; gap: .6rem; margin-top: .8rem; }
.termino__botao { border: 0; border-radius: 14px; padding: 1rem; font: inherit; font-weight: 900; font-size: 1.05rem; letter-spacing: .5px; cursor: pointer; color: #fff; }
.termino__botao--mais { background: #6b3e22; }
.termino__botao--fim { background: #244028; }
/* UMA LINHA: PEQUENA | ESCOLHA O TAMANHO | GRANDE | BEBIDAS (pedido do Mateus).
   No celular, BEBIDAS desce para a linha de baixo, na largura toda. */
.escolha-tamanho__titulo[hidden] { display: none; }
.escolha-tamanho__cartoes { grid-template-columns: 1fr auto 1fr 1fr; align-items: stretch; }
.escolha-tamanho__meio {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 .4rem;
  font-weight: 900; font-size: .95rem; letter-spacing: 1px; line-height: 1.25; color: #244028;
}
.escolha-tamanho__cartoes .cartao-tamanho--O { grid-column: auto; flex-direction: column; }
.cartao-tamanho--O .cartao-tamanho__nome { font-size: 1.45rem; }
@media (max-width: 700px) {
  .escolha-tamanho__cartoes { grid-template-columns: 1fr auto 1fr; }
  .escolha-tamanho__cartoes .cartao-tamanho--O { grid-column: 1 / -1; }
  .escolha-tamanho__meio { font-size: .72rem; padding: 0 .1rem; }
  .cartao-tamanho__nome { font-size: 1.15rem; }
  .cartao-tamanho__det { font-size: .72rem; }
}
/* A frase ESCOLHA O TAMANHO fica EMBAIXO dos botões, centralizada entre
   PEQUENA e GRANDE (pedido do Mateus). */
.escolha-tamanho__cartoes { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "p g b" "t t ."; row-gap: .45rem; }
.escolha-tamanho__cartoes .cartao-tamanho--P { grid-area: p; }
.escolha-tamanho__cartoes .cartao-tamanho--G { grid-area: g; }
.escolha-tamanho__cartoes .cartao-tamanho--O { grid-area: b; }
.escolha-tamanho__meio { grid-area: t; font-size: 1rem; letter-spacing: 2px; padding: 0; }
@media (max-width: 700px) {
  .escolha-tamanho__cartoes { grid-template-columns: 1fr 1fr; grid-template-areas: "p g" "t t" "b b"; }
  .escolha-tamanho__cartoes .cartao-tamanho--O { grid-column: auto; grid-area: b; }
  .escolha-tamanho__meio { font-size: .9rem; }
}
/* ADICIONAR MAIS ITENS: botão de verdade, na cor madeira da casa. */
.carrinho__mais {
  margin: .8rem 0; padding: .85rem; border-radius: 14px; background: #6b3e22; color: #fff;
  font-weight: 900; letter-spacing: .5px; box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.carrinho__mais:hover { background: #7a4828; }
/* Quem está pedindo: telefone e nome só aparecem, não se altera. */
#p-fone[readonly], #p-nome[readonly] { background: #f1ede4; color: #3a342b; font-weight: 700; cursor: default; border-color: transparent; }
/* PEDIDO: TUDO EM MAIÚSCULAS -- títulos, opções, campos e o que se digita. */
dialog.janela-pedido, dialog.janela-pedido input, dialog.janela-pedido textarea,
dialog.janela-pedido select, dialog.janela-pedido button, dialog.janela-pedido legend { text-transform: uppercase; }
dialog.janela-pedido input::placeholder, dialog.janela-pedido textarea::placeholder { text-transform: uppercase; }

/* CONFIRMA O ENDEREÇO OU ALTERA: dois botões nas cores da casa. */
.confirma-end { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .7rem; }
.confirma-end__botao {
  border: 0; border-radius: 14px; padding: .85rem .5rem; font: inherit; font-weight: 900; letter-spacing: .5px;
  color: #fff; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.confirma-end__botao--ok { background: #244028; }
.confirma-end__botao--alt { background: #6b3e22; }
.confirma-end__botao--feito { background: #2f7a3a; box-shadow: 0 0 0 3px #e0b54a; }
.endereco--travado input, .endereco--travado select {
  background: #f1ede4; color: #3a342b; font-weight: 700; border-color: transparent; opacity: 1;
}
@media (max-width: 420px) { .confirma-end { grid-template-columns: 1fr; } }

/* PIX: QR code com o valor do pedido e o copia e cola. */
.pix { margin-top: 1rem; padding: 1rem; border: 2px solid #244028; border-radius: 16px; background: #fff; text-align: center; }
.pix__titulo { margin: 0 0 .6rem; font-weight: 900; color: #244028; font-size: 1.1rem; letter-spacing: .5px; }
.pix__qr { width: 220px; max-width: 100%; margin: 0 auto; }
.pix__qr svg { width: 100%; height: auto; display: block; }
.pix__dica { margin: .6rem 0; font-size: .8rem; font-weight: 700; color: #6b6255; }
.pix__copiar { width: 100%; border: 0; border-radius: 14px; padding: .85rem; background: #244028; color: #fff; font: inherit; font-weight: 900; letter-spacing: .5px; cursor: pointer; }
.pix__cnpj { margin: .6rem 0 0; font-size: .75rem; color: #6b6255; font-weight: 700; }
/* VER CARRINHO e a barra da montagem: COLADAS NO FIM DA TELA, largura toda,
   sem faixa branca embaixo (pedido do Mateus). */
.barra-pedido, .barra-montagem {
  left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0;
  padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px));
}
body.com-montagem .barra-pedido { bottom: 0; }
.rodape--app { padding-bottom: 5rem; }
.barra-pedido { text-transform: uppercase; letter-spacing: .5px; }

/* BEBIDA: janela de celular organizada -- foto pequena, quantidade grande,
   observação com atalhos. */
dialog.janela-bebida .fotos-cardapio { display: flex; justify-content: center; margin: 0 0 .6rem; }
dialog.janela-bebida .fotos-cardapio img { width: auto; max-width: 100%; height: 170px; object-fit: contain; border-radius: 12px; background: #fff; }
dialog.janela-bebida .fotos-cardapio img + img { display: none; }
dialog.janela-bebida .grupo legend { font-weight: 900; }
dialog.janela-bebida .tam-qtd { padding: .5rem 0; }
dialog.janela-bebida .tam-qtd__nome { font-weight: 800; }
dialog.janela-bebida .tam-qtd__preco { font-size: 1.15rem; font-weight: 900; color: #244028; }
dialog.janela-bebida .tam-qtd__botao { width: 2.8rem; height: 2.8rem; font-size: 1.5rem; }
dialog.janela-bebida .tam-qtd__qtd b { min-width: 2.2rem; font-size: 1.4rem; text-align: center; }
.bebida__rotulo { margin: .7rem 0 .4rem; font-size: .85rem; font-weight: 900; color: #6b6255; letter-spacing: .5px; }
.bebida__atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-bottom: .6rem; }
.bebida__atalho {
  border: 2px solid #244028; border-radius: 999px; background: #fff; color: #244028; padding: .55rem .3rem;
  font: inherit; font-size: .82rem; font-weight: 900; cursor: pointer;
}
.bebida__atalho--sim { background: #244028; color: #fff; }
dialog.janela-bebida textarea.tam-qtd__obs { width: 100%; box-sizing: border-box; min-height: 3.4rem; }
@media (max-width: 600px) {
  dialog.janela-bebida { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 92vh; }
  dialog.janela-bebida .fotos-cardapio img { height: 140px; }
  dialog.janela-bebida .janela__pe { display: grid; grid-template-columns: 1fr 2fr; gap: .5rem; }
  dialog.janela-bebida .janela__pe .botao { width: 100%; padding: .9rem .4rem; }
}

/* Rodapé do pedido: TOTAL | CONTINUAR | FINALIZAR, sempre à vista. */
.pe-pedido { display: grid; grid-template-columns: auto 1fr 1.3fr; align-items: center; gap: .5rem; }
.pe-pedido__total { display: flex; flex-direction: column; line-height: 1.1; padding-right: .3rem; }
.pe-pedido__total small { font-size: .72rem; font-weight: 900; color: #6b6255; letter-spacing: 1px; }
.pe-pedido__total b { font-size: 1.3rem; font-weight: 900; color: #244028; white-space: nowrap; }
.pe-pedido .botao { width: 100%; padding: .85rem .4rem; }

/* Barra da montagem ENXUTA: texto curto | VER | carrinho | CONFIRMAR (direita). */
.barra-montagem { flex-direction: column; align-items: stretch; gap: .45rem; padding-top: .6rem; }
.barra-montagem__linha { display: flex; align-items: center; gap: .45rem; }
.barra-montagem__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; font-size: .88rem; }
.barra-montagem__txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-montagem__txt small { font-size: .75rem; opacity: .85; font-weight: 700; }
.barra-montagem__ver {
  flex: 0 0 auto; border: 2px solid #e0b54a; border-radius: 999px; background: transparent; color: #e0b54a;
  font: inherit; font-size: .75rem; font-weight: 900; padding: .35rem .7rem; cursor: pointer;
}
.barra-montagem__carrinho span { display: none; }
.barra-montagem__botao {
  flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  padding: .45rem .8rem; font-size: .82rem; border-radius: 12px;
}
.barra-montagem__botao small { font-size: .78rem; font-weight: 900; }
.barra-montagem__detalhe { font-size: .8rem; font-weight: 700; line-height: 1.35; border-top: 1px solid rgba(255,255,255,.2); padding-top: .4rem; }
.barra-montagem__detalhe[hidden] { display: none; }
.barra-montagem__total { color: #e0b54a; font-weight: 900; margin-top: .15rem; }
/* APP DA CLIENTE: só a LOGO da Mateus, pequena, no canto direito -- sem
   "Desenvolvimento" e sem o site; tocar nela abre o site (pedido do Mateus). */
.cabecalho .assinatura { margin-left: auto; align-self: center; }
.cabecalho .assinatura__texto, .cabecalho .assinatura__site { display: none; }
.cabecalho .assinatura__logo { width: 64px; height: auto; }
@media (max-width: 600px) { .cabecalho .assinatura__logo { width: 52px; } }

.cabecalho .assinatura__logo { width: 84px; }
@media (max-width: 600px) { .cabecalho .assinatura__logo { width: 72px; } }

/* Período dos pedidos: data inicial, data final e HOJE. */
.periodo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin: .6rem 0; }
.periodo__campo { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; font-weight: 900; color: #6b6255; letter-spacing: .5px; }
.periodo__campo input { font: inherit; font-size: .95rem; font-weight: 700; padding: .45rem .6rem; border: 1px solid #d8cfbf; border-radius: 10px; background: #fff; }
/* Logo da Mateus TIRADA do topo do cardápio (pedido do Mateus). */
.cabecalho .assinatura { display: none !important; }
/* Logo da Mateus DE VOLTA no topo do cardápio, do MESMO TAMANHO da logo da
   casa (pedido do Mateus): mesma altura; no celular, o que couber ao lado. */
.cabecalho .assinatura { display: flex !important; margin-left: auto; align-self: center; }
.cabecalho .assinatura__texto, .cabecalho .assinatura__site { display: none; }
.cabecalho .assinatura__logo { height: 108px; width: auto; max-width: calc(100vw - 108px - 4rem); object-fit: contain; }
@media (max-width: 420px) { .cabecalho .assinatura__logo { height: 92px; max-width: calc(100vw - 92px - 3rem); } }
/* SEM as logos da Mateus Informática: só o crédito, bem pequeno, no rodapé. */
.assinatura, .assinatura--porta, .cabecalho .assinatura { display: none !important; }
.credito { margin: 1.2rem 0 .8rem; text-align: center; font-size: .68rem; opacity: .6; }
.credito a { color: inherit; text-decoration: none; }
.credito--app { margin-bottom: 6rem; }
/* CONCLUÍDO: encerra o pedido de uma vez (vai para Entregues). */
.botao--concluir { background: #1f5f8b; color: #fff; }
.botao--concluir:hover { background: #174a6d; }
/* Botões do pedido TODOS DO MESMO TAMANHO (pedido do Mateus). */
.pedido__acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; }
.pedido__acoes .botao {
  width: 100%; min-height: 2.8rem; padding: .55rem .6rem; margin: 0;
  font-size: .9rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  text-transform: uppercase; letter-spacing: .3px;
}
/* Campo obrigatório que ficou vazio: borda vermelha até preencher. */
.campo--falta { border-color: #c62828 !important; box-shadow: 0 0 0 2px rgba(198,40,40,.25); }
/* Bebida: SEM os botões de atalho da observação (pedido do Mateus); fica só o campo. */
.bebida__atalhos { display: none !important; }