/*
 * 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: #16233D;
  --faixa: #071B3D;        /* verde da caixa, medido na foto */
  --creme: #DBE6F8;        /* letra da caixa, medida na foto */
  --papel: #F4F7FD;        /* fundo das telas */
  --verde: #1668E3;        /* um tom acima do verde da caixa, para botão */
  --vermelho: #8c1b1b;     /* vermelho escuro do bloco lateral */
  --dourado: #63A6FF;
  --linha: #DBE6F8;
  --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; }
/* NOVO e PROCURAR das listas iguais aos botões do menu de cima (pedido do
   Mateus, 23/09/2026): salmão, cantos arredondados, desenho e nome embaixo. */
.barra-acoes .botao--acao { width: 4.4rem; min-height: 3.2rem; }
.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: #EAF1FD; }
.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: GestorFood à 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: #EAF1FD; }
.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: #EAF1FD; }
.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 PARADO (NOVO sem aceitar há X min, Configurações): pisca vermelho. */
.pedido--parado { animation: pedido-pisca 1s steps(1, end) infinite; }
@keyframes pedido-pisca { 50% { background: #f8d4d4; box-shadow: inset 8px 0 0 var(--vermelho); } }
.pedido__parado { color: #fff; background: var(--vermelho); border-radius: 999px; padding: .1rem .55rem; font-size: .72rem; font-weight: 900; }
/* SAIU PARA ENTREGA: no lugar do botão, o aviso de que o motoboy confirma. */
.botao--aguardando {
  background: #1668E3; color: #fff; cursor: default; animation: aguarda 2s ease-in-out infinite;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  line-height: 1.2; font-size: .85rem; padding: .45rem .9rem; text-wrap: balance;
}
.botao--aguardando:hover { filter: none; }
@keyframes aguarda { 50% { opacity: .65; } }
/* ESPERANDO ENTREGA (NFC-e emitida, aguardando o motoboy): selo âmbar. */
.pedido--esperando .pedido__situacao, .ver__situacao--esperando { background: #1668E3; color: #fff; }
.pedido--esperando { box-shadow: inset 5px 0 0 #1668E3; }
/* MOTOBOY (24/09/2026): quem entregou, no pedido; e o relatório por motoboy. */
.pedido__entrega { margin-top: .45rem; padding: .35rem .6rem; border-radius: 8px; background: #e3f3e5; color: #16233D; font-size: .88rem; }
.pedido__saida { background: #fff3d6; color: #7a5a00; }
.tabela-mb { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .85rem; }
.tabela-mb th, .tabela-mb td { text-align: left; padding: .25rem .35rem; border-bottom: 1px solid var(--linha); }
.janela-relatorio-mb { width: min(820px, 96vw); }
/* VER: ao lado da situação, abre o pedido inteiro (24/09/2026). */
.pedido__ver { padding: .15rem .7rem; font-size: .75rem; font-weight: 800; }
.janela-ver-pedido { width: min(560px, 96vw); }
.ver { font-size: 1rem; }
.ver__topo { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.ver__quando { color: var(--apagado); font-weight: 700; }
.ver__situacao { margin-left: auto; }
.ver__situacao--novo { background: var(--vermelho); color: #fff; }
.ver__bloco { padding: .6rem .7rem; border: 1px solid var(--linha); border-radius: 10px; margin-bottom: .7rem; line-height: 1.5; }
.ver__nome { font-size: 1.15rem; font-weight: 900; }
.ver__itens { list-style: none; margin: 0 0 .7rem; padding: 0; border-top: 2px dashed var(--linha); }
.ver__item { padding: .55rem 0; border-bottom: 1px dashed var(--linha); }
.ver__linha { display: flex; justify-content: space-between; gap: .8rem; }
.ver__det { font-size: .9rem; color: #444; padding-left: 1.4rem; }
.ver__det--sem { color: var(--vermelho); font-weight: 800; }
.ver__obs { background: #fff8e6; }
.ver__contas { display: grid; gap: .25rem; }
.ver__total { font-size: 1.25rem; font-weight: 900; border-top: 2px solid var(--faixa); padding-top: .35rem; margin-top: .2rem; }
.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 -.9rem 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 -.9rem; padding: 0 .9rem 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 #071B3D; background: #fff; color: #071B3D;
}
.instalar__botao--salvar { background: #071B3D; color: #fff; }
.instalar__passos { margin-top: .9rem; padding: .8rem; border-radius: 10px; background: #EAF1FD; 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 -.9rem .2rem; padding: .7rem 1rem; background: #071B3D; 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: #071B3D; 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, #EAF1FD); 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: #EAF1FD; }

/* 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 #071B3D; background: #fff; color: #071B3D; 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, #EAF1FD); color: var(--faixa, #071B3D); 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: #16233D; }
.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: #EAF1FD; 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; }

/* SINCRONIZAR, logo à direita do Pedidos; o ícone gira enquanto sincroniza. */
.botao--sinc { align-self: flex-end; flex: 0 0 5.4rem; margin-left: .6rem; }
.botao--sinc:disabled { opacity: .7; cursor: wait; }
.botao--sinc-girando svg { animation: sinc-gira 1s linear infinite; }
@keyframes sinc-gira { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .botao--sinc { flex-basis: 4.6rem; padding: .35rem .25rem; } }

/* ⚙ 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: #071B3D; 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: #071B3D 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: #071B3D url(capa.png) center top / auto 60vh no-repeat; }
  .instalar::before { background: linear-gradient(to bottom, rgba(42,23,13,0) 45vh, #071B3D 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, #071B3D 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: #071B3D; color: #EAF1FD; 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: #63A6FF; text-align: left; }
.saudacao .botao-meus { flex: 0 0 auto; background: #fff; color: #071B3D; 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, #071B3D); white-space: nowrap; }
.tam-qtd__qtd { display: inline-flex; align-items: center; gap: .15rem; border: 2px solid #071B3D; 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: #071B3D; 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. */
/* As faixas de ponta a ponta puxam EXATAMENTE a borda do main (.9rem): com
   -1rem passavam 1,6 px da tela e o app ESCORREGAVA para o lado no celular
   (Mateus, 24/09/2026). */
.escolha-tamanho { background: #fff; margin: .6rem -.9rem 0; padding: 1rem; }
.escolha-tamanho__titulo { margin: 0 0 .7rem; text-align: center; font-size: 1.2rem; color: #071B3D; }
.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 #071B3D; 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: #071B3D; 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: #071B3D; }
.cartao-tamanho--escolhido .cartao-tamanho__nome, .cartao-tamanho--escolhido .cartao-tamanho__det { color: #fff; }
.cartao-tamanho--escolhido .cartao-tamanho__preco { color: #63A6FF; }
.prato--marcado { background: #eef6ee; box-shadow: inset 4px 0 0 #071B3D; }
.prato--marcado .prato__preco { color: #071B3D; }
.barra-montagem {
  position: fixed; left: .8rem; right: .8rem; bottom: 2.9rem; z-index: 26; display: flex; align-items: center; gap: .7rem;
  background: #071B3D; color: #EAF1FD; 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: #071B3D; 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: #071B3D; }
.cartao-tamanho--G { background: #6b3e22; }
.cartao-tamanho:hover { filter: brightness(1.08); background-color: inherit; }
.cartao-tamanho--P:hover { background: #071B3D; }
.cartao-tamanho--G:hover { background: #6b3e22; }
.cartao-tamanho__nome { color: #fff; font-size: 1.45rem; letter-spacing: 1.5px; }
.cartao-tamanho__det { color: #EAF1FD; font-size: .88rem; line-height: 1.35; }
.cartao-tamanho__det b { color: #63A6FF; white-space: nowrap; }
/* escolhido: aro dourado em volta */
.cartao-tamanho--escolhido { box-shadow: 0 0 0 3px #63A6FF, 0 5px 14px rgba(0,0,0,.25); }
.cartao-tamanho--escolhido.cartao-tamanho--P { background: #071B3D; }
.cartao-tamanho--escolhido.cartao-tamanho--G { background: #6b3e22; }
.cartao-tamanho--escolhido .cartao-tamanho__det { color: #EAF1FD; }
/* 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: #071B3D; }
.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: #071B3D; }
.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: #071B3D; 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: #071B3D; }
.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: #EAF1FD; 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: #071B3D; }
.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 #EAF1FD; border-radius: 12px; background: transparent; color: #EAF1FD; 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: #63A6FF; 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: #071B3D; }
/* 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: #071B3D;
}
.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: #071B3D; }
.confirma-end__botao--alt { background: #6b3e22; }
.confirma-end__botao--feito { background: #2f7a3a; box-shadow: 0 0 0 3px #63A6FF; }
.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 #071B3D; border-radius: 16px; background: #fff; text-align: center; }
.pix__titulo { margin: 0 0 .6rem; font-weight: 900; color: #071B3D; 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: #071B3D; 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: #071B3D; }
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 #071B3D; border-radius: 999px; background: #fff; color: #071B3D; padding: .55rem .3rem;
  font: inherit; font-size: .82rem; font-weight: 900; cursor: pointer;
}
.bebida__atalho--sim { background: #071B3D; 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: #071B3D; 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 #63A6FF; border-radius: 999px; background: transparent; color: #63A6FF;
  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: #63A6FF; 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 #C3D3EA; 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; }

/* VOLTAR e ALTERAR no pedido. */
.botao--voltar { background: #6b3e22; color: #fff; }
.botao--voltar:hover { background: #573118; }
.botao--alterar { background: #63A6FF; color: #2b2418; }
.botao--alterar:hover { background: #cfa33c; }
dialog.janela-alterar { width: min(760px, 96vw); }
.alterar__cliente { margin: 0 0 .6rem; }
.alterar__item { display: grid; grid-template-columns: 1fr auto 6.5rem; gap: .4rem .7rem; align-items: center; padding: .55rem 0; border-bottom: 1px dashed #e2d9c8; }
.alterar__item small { display: block; color: #6b6255; font-size: .78rem; }
.alterar__qtd { display: flex; align-items: center; gap: .4rem; }
.alterar__qtd b { min-width: 1.6rem; text-align: center; font-size: 1.1rem; }
.alterar__valor { text-align: right; font-weight: 800; }
.alterar__obs { grid-column: 1 / -1; font: inherit; padding: .4rem .6rem; border: 1px solid #C3D3EA; border-radius: 8px; text-transform: uppercase; }
.alterar__item--sai { opacity: .5; }
.alterar__item--sai .alterar__valor { color: #c62828; }
.alterar__total { text-align: right; font-size: 1.05rem; margin: .6rem 0 0; }
dialog.janela-alterar input, dialog.janela-alterar select { text-transform: uppercase; }

/* FECHAMENTO DE PEDIDOS */
.botao--fechamento { background: #071B3D; color: #fff; }
dialog.janela-fechamento { width: min(560px, 96vw); }
.fech__linha { display: flex; justify-content: space-between; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid #eee4d3; font-weight: 800; }
.fech__linha small { color: #6b6255; font-weight: 700; }
.fech__linha--sub { padding: .3rem 0 .3rem 1rem; font-weight: 600; font-size: .9rem; color: #4a4338; }
.fech__linha--ok b { color: #071B3D; }
.fech__linha--cancel b { color: #8c1b1b; }
.fech__linha--aberto b { color: #6b3e22; }
.fech__total { display: flex; justify-content: space-between; margin-top: .8rem; padding: .8rem 1rem; background: #071B3D; color: #fff; border-radius: 12px; font-size: 1.25rem; font-weight: 900; }
.fech__total b { color: #63A6FF; }
.fech__nota { text-align: center; color: #6b6255; font-weight: 700; font-size: .8rem; margin: .6rem 0 0; }
.fech__tabela { width: 100%; border-collapse: collapse; font-size: .82rem; margin-bottom: .8rem; }
.fech__tabela th { text-align: left; font-size: .7rem; color: #6b6255; border-bottom: 2px solid #071B3D; padding: .3rem .3rem; }
.fech__tabela td { padding: .35rem .3rem; border-bottom: 1px solid #eee4d3; }
.fech__tabela td:last-child, .fech__tabela th:last-child { text-align: right; white-space: nowrap; }
.fech__cancelado td { color: #8c1b1b; text-decoration: line-through; }
.fech__cancelado td:nth-child(5) { text-decoration: none; font-weight: 800; }
dialog.janela-fechamento { width: min(820px, 96vw); }

/* AGUARDANDO MOTOBOY: do tamanho dos outros botões, na mesma linha, texto centralizado (24/09/2026). */
.pedido__acoes .botao--aguardando { text-align: center; justify-content: center; line-height: 1.2; white-space: normal; }

/* TROCO no app (24/09/2026): total à vista, 'troco para' com R$ e o troco calculado (só leitura). */
.troco { margin-top: .6rem; }
.troco__total { font-size: 1rem; margin-bottom: .4rem; }
.troco__total b { font-size: 1.15rem; }
.troco__linha { display: flex; gap: .6rem; }
.troco__campo { flex: 1 1 0; margin: 0; }
#p-troco-volta { background: #eef7ef; color: #16233D; font-weight: 900; pointer-events: none; }
.troco__aviso { color: #8c1b1b; font-weight: 800; margin: .4rem 0 0; font-size: .9rem; }

/* ENTREGA x RETIRADA no topo de cada pedido, com cores diferentes (Mateus, 24/09/2026). */
.pedido__tipo { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-weight: 800; font-size: .85rem; letter-spacing: .03em; color: #fff; }
.pedido__tipo--entrega { background: #1565c0; }
.pedido__tipo--retirada { background: #7b1fa2; }

/* Nome do sistema no rodape, em negrito (Mateus, 24/09/2026). */
.rodape__sistema { font-weight: 900; letter-spacing: .02em; }

/* iFOOD (Mateus, 24/09/2026): botao vermelho do iFood nos filtros, etiqueta
   "VEIO DO iFood" no pedido e o pedido NOVO do iFood piscando em vermelho. */
.ifood-marca { font-family: Arial, Helvetica, sans-serif; font-weight: 900; font-style: italic; letter-spacing: -.02em; }
.filtro--ifood { background: #ea1d2c; color: #fff; position: relative; }
.filtro--ifood .ifood-marca { font-size: 1.05em; }
.filtro--ifood.filtro--ativo { background: #b3121f; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.filtro--ifood .contador { position: absolute; top: -.45rem; right: -.45rem; background: #fff; color: #ea1d2c; border: 2px solid #ea1d2c; }
.pedido__tipo--ifood { background: #ea1d2c; }
.pedido--ifood { box-shadow: inset 6px 0 0 #ea1d2c; }
.pedido--ifood.pedido--novo { animation: ifood-pisca 1s steps(1, end) infinite; }
@keyframes ifood-pisca { 50% { background: #fde0e2; box-shadow: inset 8px 0 0 #ea1d2c; } }

/* CONFIGURACOES -> iFood (Mateus, 24/09/2026). */
.botao--ifood { background: #ea1d2c; color: #fff; }
.botao--ifood .ifood-marca { font-size: 1.1em; }
.ifood-selo { background: #ea1d2c; color: #fff; border-radius: 8px; padding: .05rem .5rem; margin-right: .35rem; }
.ifood-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 .9rem; }
.ifood-links a { background: #fde0e2; color: #b3121f; border-radius: 999px; padding: .3rem .8rem; font-weight: 800; font-size: .82rem; text-decoration: none; }
.ifood-links a:hover { background: #ea1d2c; color: #fff; }
.ifood-liga { margin: .2rem 0 .7rem; }

/* LUCRATIVIDADE (Mateus, 24/09/2026). */
.lucro-filtros { display: flex; flex-wrap: wrap; gap: .6rem; }
.lucro-filtros .campo { flex: 1 1 11rem; }
.lucro-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; margin: .8rem 0; }
.lucro-card { background: #EAF1FD; border-radius: 12px; padding: .6rem .8rem; display: flex; flex-direction: column; }
.lucro-card span { font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: #5b5b4f; }
.lucro-card b { font-size: 1.25rem; color: #071B3D; }
.lucro-card small { font-size: .75rem; color: #5b5b4f; }
.lucro-card--ifood { background: #fde0e2; }
.lucro-card--ifood b { color: #b3121f; }
.lucro-tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.lucro-tabela th { text-align: right; font-size: .72rem; letter-spacing: .04em; color: #fff; background: #071B3D; padding: .45rem .5rem; }
.lucro-tabela td { text-align: right; padding: .4rem .5rem; border-bottom: 1px solid #e6dfcd; white-space: nowrap; }
.lucro-tabela th:first-child, .lucro-tabela td:first-child { text-align: left; white-space: normal; }
.lucro-tabela td small { display: block; font-size: .7rem; color: #7a7a6a; }
.lucro-tabela tfoot td { font-weight: 900; background: #EAF1FD; border-bottom: 0; }
@media (max-width: 700px) { .lucro-tabela { font-size: .78rem; } .lucro-tabela th:nth-child(5), .lucro-tabela td:nth-child(5) { display: none; } }

/* Lucratividade: o periodo na propria janela. */
.lucro-filtros .lucro-data { flex: 0 1 12rem; }
.lucro-filtros .lucro-hoje { align-self: flex-end; margin-bottom: .15rem; }
.mb-extra { color: #b3121f; font-weight: 800; }

/* Atalhos de periodo (HOJE / ULTIMA SEMANA / 15 DIAS / 30 DIAS) alinhados
   na base dos campos de data (Mateus, 24/09/2026). */
.lucro-filtros { align-items: flex-end; }
.lucro-filtros .campo { margin-bottom: 0; }
.atalhos-periodo { display: flex; flex-wrap: wrap; gap: .4rem; align-items: stretch; }
.atalhos-periodo .botao { height: 3.1rem; padding: 0 1rem; display: inline-flex; align-items: center; white-space: nowrap; border-radius: 12px; }

/* Verificar precos: codigo e produto a esquerda. */
.lucro-tabela--precos th:nth-child(2), .lucro-tabela--precos td:nth-child(2) { text-align: left; white-space: normal; }
.lucro-tabela--precos td small { display: inline; margin-left: .25rem; }
.lucro-tabela--precos td:nth-child(2) small { display: block; margin-left: 0; }

/* VERIFICAR PREÇOS (Mateus, 24/09/2026): na linha dos filtros da
   Lucratividade, da altura dos campos, cantos iguais aos atalhos de período,
   sem o contorno preto de foco ao abrir a janela. */
.lucro-filtros .lucro-precos {
  flex: 0 0 auto; align-self: flex-end; height: 2.7rem; padding: 0 1.2rem;
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  border-radius: 12px; font-size: .95rem; letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.lucro-filtros:has(.lucro-precos) .campo { flex-basis: 9.5rem; }   /* cabe o botão na mesma linha */
.lucro-filtros .lucro-precos:hover { background: #2f5234; }
.lucro-filtros .lucro-precos:focus:not(:focus-visible) { outline: none; }
.lucro-filtros .lucro-precos:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }

/* LOGIN (Mateus, 24/09/2026): os links (Esqueci minha senha, Voltar,
   Cancelar) em verdinho, da casa; a lista de usuários do Master. */
.login-caixa__links a { color: var(--verde); font-weight: 700; text-decoration: none; }
.login-caixa__links a:hover { color: var(--faixa); text-decoration: underline; }
.login-caixa__dica { color: var(--apagado); }
.login-caixa select { width: 100%; }

/* TRIBUTAÇÃO do produto (Mateus, 24/09/2026): 🔄 Atualizar ao lado do regime;
   produto JÁ CADASTRADO = campos travados em verdinho claro. */
.fiscal__topo { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.fiscal__topo .fiscal__regime { margin: 0; }
.fiscal__aviso { margin: 0 0 .5rem; }
.fiscal--travado input:disabled, .fiscal--travado select:disabled,
.fiscal input[readonly] { background: #e6f2e7; color: #071B3D; border-color: #c9dfcb; opacity: 1; cursor: default; -webkit-text-fill-color: #071B3D; }

/* iFOOD -- homologação (Mateus, 24/09/2026): avisos no card do pedido
   (agendado, coleta, CPF, cancelamento, disputa) e a situação da loja. */
.ifood-aviso { margin: .35rem 0; padding: .4rem .6rem; border-radius: 10px; background: #fdf1f1; color: #5a1a1a; font-size: .9rem; }
.ifood-aviso--agendado { background: #EAF1FD; color: #5c4400; }
.ifood-aviso--disputa { background: #ea1d2c; color: #fff; }
.ifood-aviso--disputa b { color: #fff; }
.ifood-aviso__botoes { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.ifood-aviso--disputa .botao--vermelho { background: #fff; color: #ea1d2c; }
.ifood-alerta { margin: .6rem 0; padding: .6rem .8rem; border-radius: 10px; background: #EAF1FD; color: #5c4400; }
.ifood-situacao { margin: .4rem 0 .6rem; }
.ifood-situacao__linha { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; padding: .2rem 0; }
.ifood-situacao__linha small { color: var(--apagado); }
.ifood-ok { color: var(--verde); }
.ifood-atencao { color: #a36b00; }
.ifood-fechada { color: #b3121f; }

/* APP NO CELULAR (Mateus, 24/09/2026): trava de segurança -- nada de
   rolagem para o lado nas telas do app da cliente (o sistema não é afetado). */
html:has(#produtos-area), html:has(#produtos-area) body { overflow-x: clip; }

/* CADASTRO DA EMPRESA (24/09/2026): a validade do certificado digital. */
.empresa-cert { padding: .5rem .7rem; border-radius: 10px; background: #e6f2e7; color: #071B3D; }
.empresa-cert--vencendo { background: #EAF1FD; color: #5c4400; }
.empresa-cert--vencido { background: #fdecec; color: #8c1b1b; }
dialog.janela-empresa { width: min(760px, 96vw); }

/* EMPRESA: o campo que a consulta do CNPJ preencheu/atualizou fica em destaque. */
.campo--novo { background: #EAF1FD !important; border-color: #63A6FF !important; }

/* CERTIFICADO: cartões no jeito da janela do Windows que o Master abre (24/09/2026). */
.cert-lista { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0; }
.cert-cartao { display: flex; gap: .8rem; align-items: center; padding: .7rem .9rem; border: 2px solid #e6ded0; border-radius: 12px; background: #fff; cursor: pointer; }
.cert-cartao input { flex: 0 0 auto; }
.cert-cartao__icone { font-size: 2rem; line-height: 1; }
.cert-cartao__txt { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; color: #3d3a33; }
.cert-cartao__txt b { color: #071B3D; }
.cert-cartao--escolhido { border-color: #071B3D; background: #eef6ef; }
.cert-cartao--vencido { opacity: .6; }

/* EMPRESA: NF-e / NFC-e / NFS-e na linha do DF-e. */
.em-docs__marcas { display: flex; gap: .8rem; align-items: center; min-height: 2.7rem; }
.em-docs__marcas .marcavel { margin: 0; }

/* EMPRESA NUMA TELA SÓ (Mateus, 24/09/2026): janela larga e a linha do DF-e
   compacta -- NF-e, NFC-e e NFS-e lado a lado. */
dialog.janela-empresa { width: min(1180px, 97vw); }
dialog.janela-empresa .janela__corpo { max-height: 80vh; }
.em-docs__marcas { flex-direction: row; flex-wrap: nowrap; gap: 1rem; }
.em-docs__marcas .marcavel { display: inline-flex; width: auto; align-items: center; gap: .3rem; white-space: nowrap; }
dialog.janela-empresa .grupo { margin-bottom: .6rem; }
dialog.janela-empresa .campo { margin-bottom: .45rem; }

/* BARRA DE CIMA: TODOS OS BOTÕES DO MESMO TAMANHO (Mateus, 24/09/2026) --
   Pedidos, Sincronizar, WhatsApp e os cadastros; fora o CAIXA1 e a engrenagem. */
.cabecalho .botao--icone:not(.botao--engrenagem) { flex: 0 0 4.6rem; width: 4.6rem; min-width: 0; padding-left: .25rem; padding-right: .25rem; }
.cabecalho .coluna-pedidos { flex: 0 0 auto; align-items: flex-start; }
.cabecalho .coluna-pedidos > .botao--pedidos { width: 4.6rem; align-self: flex-start; }
@media (max-width: 1100px) {
  .cabecalho .botao--icone:not(.botao--engrenagem) { flex-basis: 4.2rem; width: 4.2rem; }
  .cabecalho .coluna-pedidos > .botao--pedidos { width: 4.2rem; }
}

/* SENHA DO DIA: o campo no aviso do MatIA (24/09/2026). */
.senha-dia__campo { display: block; width: 100%; max-width: 16rem; margin: .7rem auto .2rem; font: inherit; font-size: 1.2rem; text-align: center; padding: .5rem .8rem; border: 2px solid #071B3D; border-radius: 10px; }

/* GERENCIADOR DE PEDIDOS (Mateus, 24/09/2026): em cor diferente (dourado da
   casa) e do MESMO TAMANHO dos outros -- todos com a mesma altura. */
.cabecalho .botao--icone:not(.botao--engrenagem) { height: 3.3rem; }
.cabecalho .coluna-pedidos > .botao--pedidos { align-self: flex-start; height: 3.3rem; }
.cabecalho .botao--pedidos { background: #63A6FF; color: #071B3D; }
.cabecalho .botao--pedidos:hover { background: #8FC0FF; }
.cabecalho .botao--pedidos svg { width: 20px; height: 20px; }
.cabecalho .botao--pedidos span { font-size: .6rem; line-height: 1.05; white-space: normal; text-align: center; }
/* ...mais LARGO, a mesma altura (nome numa linha só). */
.cabecalho > .botao--pedidos.botao--icone { width: 8.4rem; flex: 0 0 8.4rem; }
/* Na coluna do CAIXA1 (coluna = flex vertical): a largura é width, a altura fica fixa. */
.cabecalho .coluna-pedidos > .botao--pedidos.botao--icone { width: 8.4rem; flex: none; height: 3.3rem; }
.cabecalho .botao--pedidos svg { width: 26px; height: 26px; }
.cabecalho .botao--pedidos span { font-size: .72rem; white-space: nowrap; }
@media (max-width: 1100px) { .cabecalho > .botao--pedidos.botao--icone { width: 7.6rem; flex-basis: 7.6rem; } .cabecalho .coluna-pedidos > .botao--pedidos.botao--icone { width: 7.6rem; } .cabecalho .botao--pedidos span { font-size: .66rem; } }

/* GERENCIADOR DE PEDIDOS CABENDO NO BOTÃO (Mateus, 24/09/2026): ícone à
   esquerda e o nome em duas linhas à direita, na mesma altura dos outros;
   o CAIXA1 centralizado em cima dele. */
.cabecalho .botao--pedidos.botao--icone { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .45rem; padding: .3rem .55rem; overflow: hidden; }
.cabecalho .botao--pedidos.botao--icone span { font-size: .78rem; line-height: 1.1; white-space: normal; text-align: left; }
.cabecalho .botao--pedidos.botao--icone svg { flex: 0 0 auto; width: 24px; height: 24px; }
.cabecalho .coluna-pedidos { align-items: center; }
.cabecalho .coluna-pedidos > .botao--pedidos.botao--icone { align-self: center; }
.cabecalho .coluna-pedidos .usuario-sistema { align-self: center; }

/* AGUARDANDO PEDIDOS: letras grandes e verde (Mateus, 24/09/2026). */
.nada--aguardando { font-size: 2rem; font-weight: 900; color: var(--verde, #1668E3); letter-spacing: 2px; padding: 2.2rem 1rem; text-align: center; }
@media (max-width: 700px) { .nada--aguardando { font-size: 1.4rem; } }

/* PRECISA DE TROCO? SIM / NÃO (24/09/2026) */
.troco__pergunta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .3rem 0 .6rem; font-weight: 800; }
.troco__pergunta > span { flex: 1 1 100%; }
.troco__opcao { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem;
  border: 2px solid #C3D3EA; border-radius: 12px; background: #fff; cursor: pointer; }
.troco__opcao input { width: 18px; height: 18px; margin: 0; }
.troco__opcao:has(input:checked) { border-color: #071B3D; background: #EAF1FD; }
/* MAPA DO MOTOBOY (mapa.js, 24/09/2026): app da cliente e painel da loja. */
.janela-mapa { width: min(720px, 96vw); padding: 0; border: 0; border-radius: 16px; overflow: hidden; }
.janela-mapa .mapa__info { padding: .7rem 1rem; font-size: .95rem; background: #EAF1FD; color: #222; }
.janela-mapa .mapa__mapa { height: min(62vh, 520px); width: 100%; }
.mapa__moto { font-size: 30px; line-height: 40px; text-align: center; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.botao-mapa { display: block; width: 100%; margin-top: .6rem; padding: .7rem; border: 0; border-radius: 12px; font: inherit; font-weight: 900;
  background: #071B3D; color: #fff; cursor: pointer; }
.pedido__mapa { margin-left: .35rem; }
/* BOTÕES DO PEDIDO TODOS NA MESMA LINHA, SEMPRE (Mateus, 24/09/2026): dividem a
   largura por igual; o texto quebra dentro do botão, nunca vai para outra linha. */
.pedido__acoes { display: flex; flex-wrap: nowrap; gap: .4rem; }
.pedido__acoes > .botao { flex: 1 1 0; min-width: 0; width: auto; padding: .45rem .35rem; font-size: .78rem;
  letter-spacing: 0; white-space: normal; line-height: 1.15; text-align: center; }
/* 💬 CHAT COM O CLIENTE (chat-painel.js, 24/09/2026): no espaço da direita do
   Gerenciador de Pedidos. Conversas alternando BRANCO e AMARELINHO (#EAF1FD). */
main:has(#aba-pedidos:not([hidden])) { max-width: 1640px; }
#aba-pedidos:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 1rem; align-items: start; }
#aba-pedidos > * { grid-column: 1; }
#aba-pedidos > .chat { grid-column: 2; grid-row: 1 / span 20; position: sticky; top: .6rem; }
.chat { display: flex; flex-direction: column; height: calc(100vh - 8.5rem); min-height: 420px; border: 1px solid var(--linha);
  border-radius: 12px; background: #fff; overflow: hidden; }
.chat__topo { background: var(--faixa); color: var(--creme); font-weight: 900; padding: .65rem .9rem; letter-spacing: .4px;
  display: flex; align-items: center; gap: .5rem; }
.chat__topo .contador { position: static; }
.chat__lista { flex: 1; overflow-y: auto; }
.chat__item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--linha); padding: .65rem .9rem;
  background: #fff; font: inherit; color: inherit; cursor: pointer; }
.chat__item:nth-child(even) { background: #EAF1FD; }
.chat__item:hover { filter: brightness(.97); }
.chat__item--ok { opacity: .7; }
.chat__linha1 { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.chat__linha1 .contador { position: static; }
.chat__linha2 { display: block; font-size: .9rem; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: .15rem 0; }
.chat__linha3 { display: block; font-size: .78rem; color: var(--apagado); }
.chat__pend { color: #1668E3; } .chat__ok { color: #1668E3; }
.chat__vazio { padding: 1rem; color: var(--apagado); text-align: center; }
.chat__conversa { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat__cab { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-bottom: 1px solid var(--linha); background: #EAF1FD; }
.chat__cab b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__situacao { background: #1668E3; color: #fff; white-space: nowrap; }
.chat__situacao--ok { background: #1668E3; }
.chat__msgs { flex: 1; overflow-y: auto; padding: .7rem; display: flex; flex-direction: column; gap: .45rem; background: #fff; }
.chat__msg { max-width: 82%; padding: .5rem .7rem; border-radius: 12px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.chat__msg small { display: block; font-size: .7rem; opacity: .65; margin-top: .2rem; }
.chat__msg--cliente { align-self: flex-start; background: #EAF1FD; border: 1px solid #DBE6F8; }
.chat__msg--loja { align-self: flex-end; background: var(--faixa); color: #fff; }
.chat__escrever { display: flex; gap: .4rem; padding: .5rem; border-top: 1px solid var(--linha); }
.chat__escrever textarea { flex: 1; resize: none; font: inherit; padding: .45rem .6rem; border: 1px solid var(--linha); border-radius: 10px; }
@media (max-width: 1100px) {
  #aba-pedidos:not([hidden]) { display: block; }
  #aba-pedidos > .chat { position: static; height: 480px; margin-top: 1rem; }
}

/* CHAT NO APP (Meus pedidos). */
.chat-app__msgs { height: min(52vh, 420px); overflow-y: auto; display: flex; flex-direction: column; gap: .45rem; padding: .3rem; }
.chat-app__msg { max-width: 82%; padding: .5rem .7rem; border-radius: 12px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.chat-app__msg small { display: block; font-size: .7rem; opacity: .65; margin-top: .2rem; }
.chat-app__msg--cliente { align-self: flex-end; background: #071B3D; color: #fff; }
.chat-app__msg--loja { align-self: flex-start; background: #EAF1FD; border: 1px solid #DBE6F8; }
.chat-app__escrever { display: flex; gap: .4rem; margin-top: .5rem; }
.chat-app__escrever textarea { flex: 1; resize: none; font: inherit; padding: .5rem .6rem; border: 2px solid #C3D3EA; border-radius: 10px; }
.botao-chat { display: block; width: 100%; margin-top: .5rem; padding: .7rem; border: 2px solid #071B3D; border-radius: 12px; font: inherit;
  font-weight: 900; background: #fff; color: #071B3D; cursor: pointer; }
.botao-chat b { display: inline-block; min-width: 1.4rem; margin-left: .35rem; padding: 0 .35rem; border-radius: 99px; background: #8c1b1b; color: #fff; }
.chat__atraso { color: #fff; background: #8c1b1b; padding: 0 .35rem; border-radius: 6px; }

/* CHAT COM O ESPAÇO TODO DA DIREITA (Mateus, 24/09/2026): a tela inteira na aba
   Pedidos; a lista fica com a largura de sempre (até 1200px) e o chat com o resto. */
main:has(#aba-pedidos:not([hidden])) { max-width: none; }
#aba-pedidos:not([hidden]) { grid-template-columns: minmax(0, 1200px) minmax(380px, 1fr); }
/* CHAT ALINHADO AOS CABEÇALHOS E MAIS ESTREITO (Mateus, 24/09/2026): começa na
   faixa "Pedidos" (mesma altura) e tem 340px; os pedidos ficam com o resto. */
#aba-pedidos:not([hidden]) { grid-template-columns: minmax(0, 1fr) 340px; }
#aba-pedidos > .chat { grid-row: 3 / span 20; height: calc(100vh - 12rem); }
#aba-pedidos > .chat .chat__topo { min-height: 2.3rem; padding: .45rem .9rem; border-radius: 10px 10px 0 0; }
/* DATAS E RELATÓRIOS NUMA LINHA SÓ (Mateus, 24/09/2026): os botões dividem o
   espaço ao lado das datas; o texto quebra dentro do botão, nunca a linha. */
#ped-periodo { flex-wrap: nowrap; align-items: stretch; }
#ped-periodo .periodo__campo { flex: 0 0 auto; justify-content: flex-end; }
#ped-periodo .periodo__campo input { width: 9.6rem; }
#ped-periodo > .botao { flex: 1 1 0; min-width: 0; align-self: flex-end; min-height: 2.45rem; padding: .35rem .5rem;
  font-size: .78rem; line-height: 1.1; white-space: normal; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
#ped-periodo > #ped-hoje { flex: 0 0 auto; }
/* OBS COLOCADA DEPOIS pela loja (24/09/2026): destacada no cartão. */
.pedido__obs-loja { margin: .5rem 0 .2rem; padding: .45rem .7rem; border-radius: 8px; background: #EAF1FD; border: 1px solid #63A6FF; color: #16233D; }

/* CHAT: título CENTRALIZADO e o quadro começando ACIMA da faixa "Pedidos", na linha
   das datas e relatórios (Mateus, 24/09/2026). */
#aba-pedidos > .chat { grid-row: 2 / span 20; height: calc(100vh - 9.5rem); margin-top: .6rem; }
#aba-pedidos > .chat .chat__topo { justify-content: center; text-align: center; }
/* CHAT ALINHADO AO TOPO DOS BOTÕES (HOJE, RELATÓRIOS...) -- Mateus, 24/09/2026. */
#aba-pedidos > .chat { margin-top: 1.9rem; height: calc(100vh - 10.8rem); }

/* SÓ VER O CARDÁPIO (24/09/2026): o iconezinho no alto e a barra de baixo. */
.ver-cardapio { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); display: inline-flex; flex-direction: column; align-items: center;
  gap: 0; padding: .35rem .55rem; border: 2px solid var(--creme); border-radius: 12px; background: transparent; color: var(--creme);
  font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; z-index: 5; }
.ver-cardapio span { font-size: .6rem; font-weight: 900; letter-spacing: .5px; margin-top: .15rem; }
.so-ver-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: .6rem; padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background: var(--faixa); box-shadow: 0 -4px 16px rgba(0,0,0,.25); }
.so-ver-barra button { flex: 1; border: 0; border-radius: 14px; padding: .9rem; font: inherit; font-weight: 900; font-size: 1.05rem; cursor: pointer; }
.so-ver-barra__pedir { background: var(--creme); color: var(--faixa); flex: 2 !important; }
.so-ver-barra__sair { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5) !important; }
body.so-ver main { padding-bottom: 6rem; }
body.so-ver .barra-pedido { display: none !important; }body.so-ver .escolha-tamanho { display: none !important; }

/* NENHUM BOTÃO POR CIMA DE OUTRO, EM TELA NENHUMA (Mateus, 24/09/2026): os
   botões do alto encolhem juntos até um mínimo; se ainda não couber, descem
   para a linha de baixo -- nunca se sobrepõem. */
.cabecalho { flex-wrap: wrap; row-gap: .4rem; }
.cabecalho__acoes { flex: 1 1 0; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: .4rem; }
.cabecalho .botao--icone:not(.botao--engrenagem):not(.botao--pedidos) { flex: 0 1 4.6rem; width: auto; min-width: 3.1rem; padding-left: .15rem; padding-right: .15rem; }
.cabecalho__acoes { gap: .3rem; }
@media (max-width: 1400px) { .cabecalho .botao--icone:not(.botao--pedidos) span { font-size: .62rem; } .cabecalho .botao--icone svg { width: 22px; height: 22px; } }
.cabecalho .botao--icone:not(.botao--pedidos) span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecalho .botao--sinc { margin-left: .3rem; }
.cabecalho .selo--mateus { margin-left: 0 !important; flex-shrink: 0; }@media (max-width: 1400px) { .cabecalho .selo--mateus { max-width: 105px !important; height: auto; } .cabecalho__acoes { gap: .25rem; } .cabecalho .botao--icone:not(.botao--engrenagem):not(.botao--pedidos) { min-width: 2.95rem; } }
.cabecalho__acoes { min-width: min(100%, 24rem); }

/* SUPORTE FIXO EMBAIXO DO CHAT (24/09/2026): a lista/conversa rola; o suporte fica. */
.chat__suporte { flex: 0 0 auto; border-top: 2px solid var(--linha); background: #EAF1FD; padding: .5rem .6rem .55rem; text-align: center; }
.chat__suporte-titulo { display: block; font-weight: 900; color: var(--faixa); letter-spacing: 1px; font-size: .9rem; }
.chat__suporte-fones { display: flex; align-items: center; justify-content: center; gap: .45rem; flex-wrap: wrap; margin: .2rem 0; }
.chat__suporte-fones a { font-weight: 900; color: var(--faixa); text-decoration: none; font-size: .95rem; white-space: nowrap; }
.chat__suporte-fones a:hover, .chat__suporte-site:hover { text-decoration: underline; }
.chat__suporte-fones svg { flex: 0 0 auto; }
.chat__suporte-site { font-size: .8rem; color: var(--apagado); text-decoration: none; }
/* BOTÕES DO ALTO SEMPRE NUMA LINHA SÓ (Mateus, 24/09/2026): encolhem juntos; em
   tela apertada ficam só com o ícone (o nome aparece ao passar o mouse). Nunca
   quebram linha e nunca um fica por cima do outro. */
.cabecalho { flex-wrap: nowrap; }
.cabecalho__acoes { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; }
.cabecalho .botao--icone:not(.botao--engrenagem):not(.botao--pedidos) { flex: 0 1 4.6rem; min-width: 2.2rem; overflow: hidden; }
.cabecalho .botao--engrenagem { flex: 0 0 2.6rem; }
.cabecalho > *, .cabecalho .coluna-pedidos { flex-shrink: 1; min-width: 0; }
.cabecalho > .selo-link:first-child, .cabecalho .selo-link:not(.selo-link--mateus) { flex-shrink: 0; }
@media (max-width: 1250px) {
  .cabecalho .botao--icone:not(.botao--pedidos) span { font-size: .58rem; }
  .cabecalho .selo--mateus { max-width: 90px !important; }
}
@media (max-width: 1120px) {
  .cabecalho .botao--icone:not(.botao--pedidos):not(.botao--engrenagem) span { display: none; }
  .cabecalho .botao--icone:not(.botao--engrenagem):not(.botao--pedidos) { flex-basis: 3rem; }
}
@media (max-width: 820px) {
  .cabecalho .selo-link--mateus { display: none; }
  .cabecalho .coluna-pedidos > .botao--pedidos.botao--icone, .cabecalho > .botao--pedidos.botao--icone { width: 6.2rem; flex-basis: 6.2rem; }
  .cabecalho .botao--pedidos.botao--icone span { font-size: .66rem; }
}
@media (max-width: 600px) {
  .cabecalho .logo-cabecalho, .cabecalho .selo { max-width: 52px; max-height: 52px; }
  .cabecalho .botao--pedidos.botao--icone span { display: none; }
  .cabecalho .coluna-pedidos > .botao--pedidos.botao--icone, .cabecalho > .botao--pedidos.botao--icone { width: 3rem; flex-basis: 3rem; }
  .cabecalho { gap: .3rem; padding-left: .4rem; padding-right: .4rem; }
}/* Trava: se ainda sobrar, o grupo da direita nunca invade o da esquerda. */
.cabecalho__acoes { justify-content: safe flex-end; }
@media (max-width: 820px) {
  .cabecalho { gap: .3rem; }
  .cabecalho__acoes { gap: .2rem; }
  .cabecalho .botao--icone:not(.botao--engrenagem):not(.botao--pedidos) { min-width: 1.85rem; flex-basis: 2.4rem; margin-left: 0; padding-left: .1rem; padding-right: .1rem; }
  .cabecalho .botao--icone svg { width: 20px; height: 20px; }
  .cabecalho .logo-cabecalho, .cabecalho .selo:not(.selo--mateus) { max-width: 62px; max-height: 62px; }
  .cabecalho .botao--engrenagem { flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; }
}
/* SÓ VER O CARDÁPIO: topo e grupos parados, só os produtos rolam (24/09/2026). */
body.so-ver--preso { overflow: hidden; }
body.so-ver--preso main { padding-bottom: 0; }
body.so-ver--preso #lista { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.so-ver--preso .credito--app, body.so-ver--preso .rodape { display: none !important; }

/* FAZER PEDIDO e SAIR do mesmo tamanho (Mateus, 24/09/2026). */
.so-ver-barra button, .so-ver-barra__pedir { flex: 1 1 0 !important; }

/* A frase da casa no topo verde do CARDÁPIO (só ver) -- 24/09/2026. */
.cabecalho .frase-topo { flex: 1; margin: 0 .4rem 0 .8rem; text-align: center; font-size: clamp(.95rem, 3.6vw, 1.35rem); line-height: 1.25; }

/* CHAT: escrita livre e o ENVIAR embaixo do campo, na largura toda (24/09/2026). */
.chat__escrever { flex-direction: column; gap: .35rem; }
.chat__escrever textarea { width: 100%; text-transform: none; }
.chat__escrever .botao { width: 100%; }

/* CHAT POR DIA: o calendário embaixo do título (24/09/2026). */
.chat__dia { display: flex; gap: .4rem; align-items: center; justify-content: center; padding: .4rem .6rem; background: #EAF1FD; border-bottom: 1px solid var(--linha); }
.chat__dia input { font: inherit; font-weight: 700; padding: .3rem .5rem; border: 1px solid #C3D3EA; border-radius: 8px; background: #fff; }

/* A MatIA também nas janelas de ENTREGA e de CANCELAR NO iFOOD (24/09/2026). */
.janela-entrega .janela__pe { position: relative; padding-right: 6rem; }

/* TEMPO ATÉ O DESTINO: o contador no canto do mapa (24/09/2026). */
.janela-mapa { position: relative; }
.mapa__eta { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 1000; background: var(--faixa); color: #fff; padding: .45rem 1rem; border-radius: 99px; font-size: 1.15rem; box-shadow: 0 4px 14px rgba(0,0,0,.35); white-space: nowrap; }
.mapa__eta b { font-size: 1.35rem; color: #DBE6F8; }

/* LOGO DA MATEUS À DIREITA (Mateus, 24/09/2026): menor, CENTRALIZADA na altura dos
   botões e no espaço que sobrar -- diminui com a tela, sem sumir e sem cortar. */
.cabecalho .selo-link--mateus { display: flex !important; align-items: center; justify-content: center; align-self: center;
  flex: 0 1 150px; min-width: 44px; margin: 0 0 0 .5rem; }
.cabecalho .selo-link--mateus .selo--mateus { height: auto !important; width: 100%; max-width: 150px !important; max-height: 4.4rem;
  margin: 0 !important; align-self: center; object-fit: contain; }
@media (max-width: 1400px) { .cabecalho .selo-link--mateus { flex-basis: 110px; } .cabecalho .selo-link--mateus .selo--mateus { max-width: 110px !important; max-height: 3.6rem; } }
@media (max-width: 1120px) { .cabecalho .selo-link--mateus { flex-basis: 84px; } .cabecalho .selo-link--mateus .selo--mateus { max-width: 84px !important; max-height: 3rem; } }
@media (max-width: 820px) { .cabecalho .selo-link--mateus { flex-basis: 56px; margin-left: .25rem; } .cabecalho .selo-link--mateus .selo--mateus { max-width: 56px !important; max-height: 2.4rem; } }.cabecalho .selo-link--mateus { align-self: flex-end; height: 3.3rem; min-width: 0; }
@media (max-width: 820px) { .cabecalho .selo-link--mateus { height: 2.8rem; } }
.cabecalho .selo-link--mateus { overflow: hidden; }
.cabecalho .selo-link--mateus .selo--mateus { min-width: 0; max-width: 100% !important; }
@media (min-width: 1401px) { .cabecalho .selo-link--mateus .selo--mateus { max-width: 150px !important; } }
@media (max-width: 700px) { .cabecalho .selo-link--mateus { flex: 0 1 40px; margin-left: .15rem; } }
@media (max-width: 720px) { .cabecalho .selo-link--mateus { display: none !important; } }

/* DEMO MATEUS INFORMÁTICA -- paleta do site www.mateusinformatica.com.br */
:root { --tinta: #16233D; --faixa: #071B3D; --creme: #DBE6F8; --papel: #F4F7FD; --verde: #1668E3;
  --vermelho: #C62828; --dourado: #63A6FF; --linha: #DBE6F8; --texto: #16233D; --apagado: #4D5D7A; }
/* O logo da Mateus SEM círculo, com o brilho branco atrás (como luz). */
.logo-cabecalho, .selo, .porta__logo img, .porta__logo, .login__logo, .login img { border-radius: 0 !important; background: transparent !important; box-shadow: none !important; object-fit: contain; }
.logo-cabecalho, .selo:not(.selo--mateus), .porta__logo img, .login img { filter: drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 16px rgba(255,255,255,.7)); }

.login-caixa__logo, .porta__logo img { border-radius: 0 !important; background: transparent !important; box-shadow: none !important; object-fit: contain !important; height: auto !important; filter: drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 16px rgba(255,255,255,.7)); }
.porta__logo { height: auto !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.login-caixa__logo { width: 200px !important; max-width: 70% !important; margin-top: -3.2rem !important; }

/* LOGOS DA MATEUS INFORMÁTICA NO CABEÇALHO (GestorFoodMI, 25/09/2026): o arquivo é
   LARGO (378x122); a caixa quadrada de 92px (feita para a logo redonda da pizzaria)
   e a trava de 3,3rem da direita deixavam as duas miúdas. Agora ocupam as pontas. */
.cabecalho > .selo-link:first-child .selo, .cabecalho .selo-link:not(.selo-link--mateus) .selo {
  width: 190px; height: auto; max-width: 190px; max-height: 5.8rem; border-radius: 0; }
.cabecalho .selo-link--mateus { flex: 0 0 190px; height: auto; overflow: visible; align-self: center; }
.cabecalho .selo-link--mateus .selo--mateus { width: 190px; max-width: 190px !important; max-height: 5.8rem; height: auto !important; }
@media (max-width: 1400px) {
  .cabecalho > .selo-link:first-child .selo, .cabecalho .selo-link:not(.selo-link--mateus) .selo { width: 150px; max-width: 150px; }
  .cabecalho .selo-link--mateus { flex-basis: 150px; }
  .cabecalho .selo-link--mateus .selo--mateus { width: 150px; max-width: 150px !important; }
}
@media (max-width: 1120px) {
  .cabecalho > .selo-link:first-child .selo, .cabecalho .selo-link:not(.selo-link--mateus) .selo { width: 110px; max-width: 110px; }
  .cabecalho .selo-link--mateus { flex-basis: 110px; }
  .cabecalho .selo-link--mateus .selo--mateus { width: 110px; max-width: 110px !important; }
}
@media (max-width: 820px) {
  .cabecalho > .selo-link:first-child .selo, .cabecalho .selo-link:not(.selo-link--mateus) .selo { width: 72px; max-width: 72px; }
}