/* App de gestão no celular: bege da marca, vermelho só para alerta, toques de 44 px ou mais. */
:root {
  --ambar-fundo: #FBEFD3;
  --ambar: #7A5200;
  --verde-fundo: #E3F1E6;
  --verde: #1D5E36;
  --alerta-fundo: #FBE3E4;
  --abas-altura: 68px;
}
::selection { background: var(--vermelho); color: var(--bege); }
body { font-size: 15px; font-variant-numeric: tabular-nums; }
.sprite { position: absolute; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.aviso-cheio { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px; }
.aviso-cheio h1 { margin: 0; font-size: 1.4rem; max-width: 22ch; }
.aviso-cheio p { margin: 0; max-width: 34ch; color: var(--chumbo-suave); }

#app { max-width: 520px; margin: 0 auto; min-height: 100dvh; }

/* Topo */
.topo {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
  background: var(--bege);
}
.simbolo { width: 34px; height: auto; flex: none; }
.voltar { width: 44px; height: 44px; margin-left: -8px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; flex: none; }
.voltar svg { width: 24px; height: 24px; }
.voltar:active { background: var(--bege-fundo); }
.topo-texto { min-width: 0; }
.topo h1 { margin: 0; font-size: 1.3rem; line-height: 1.15; }
.status { margin: 2px 0 0; font-size: .82rem; color: var(--chumbo-suave); }
.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); margin-right: 6px; vertical-align: 1px; }
.status.sem-contato .ponto { background: var(--ambar); }
.aviso-conexao { margin: 0 16px 8px; padding: 10px 12px; border-radius: 12px; background: var(--ambar-fundo); color: var(--ambar); font-size: .88rem; line-height: 1.35; }
.aviso-conexao strong { display: block; }

.conteudo { padding: 4px 16px calc(var(--abas-altura) + 28px + env(safe-area-inset-bottom)); }
.atualizando { opacity: .5; transition: opacity .2s; }

/* Período */
.periodo { display: flex; gap: 8px; margin-bottom: 18px; }
.segmentos { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bege-fundo); border-radius: 999px; padding: 3px; }
.segmentos button { min-height: 42px; border: 0; border-radius: 999px; background: none; font-size: .88rem; }
.segmentos button[aria-pressed="true"] { background: var(--branco); font-weight: 700; box-shadow: 0 1px 3px rgba(32, 30, 27, .18); }
.icone-botao { width: 48px; min-height: 48px; border: 0; border-radius: 50%; background: var(--bege-fundo); display: grid; place-items: center; flex: none; }
.icone-botao svg { width: 22px; height: 22px; }
.icone-botao[aria-pressed="true"] { background: var(--chumbo); color: var(--bege); }
.datas { background: var(--branco); border-radius: 16px; padding: 12px 14px; margin: -8px 0 18px; }
.datas-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.datas label { display: grid; gap: 4px; font-size: .82rem; color: var(--chumbo-suave); }
.datas input { min-height: 44px; border: 2px solid var(--bege-fundo); border-radius: 12px; padding: 0 10px; background: var(--branco); font-size: 1rem; width: 100%; }
.datas .botao { width: 100%; margin-top: 10px; min-height: 48px; }
.datas .erro { margin: 8px 0 0; font-size: .88rem; }

/* Números */
.rotulo { margin: 0; font-size: .9rem; color: var(--chumbo-suave); }
.valor-grande { margin: 2px 0; font-size: 2.4rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.05; }
.compara { margin: 0 0 16px; font-size: .88rem; color: var(--chumbo-suave); text-wrap: balance; }
.faixa { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--branco); border-radius: 16px; margin-bottom: 8px; }
.faixa > * { padding: 12px 10px; color: inherit; text-decoration: none; }
.faixa > * + * { border-left: 1px solid var(--bege-fundo); }
.faixa b { display: block; font-size: 1.15rem; }
.faixa span { display: block; font-size: .82rem; color: var(--chumbo-suave); line-height: 1.25; }
.faixa a span:last-child { text-decoration: underline; text-underline-offset: 3px; }

/* Listas */
h2 { font-size: 1rem; margin: 24px 0 8px; }
.lista { background: var(--branco); border-radius: 16px; padding: 2px 14px; }
.item { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--bege-fundo); font-size: .92rem; color: inherit; text-decoration: none; }
.lista > .item:last-child { border-bottom: 0; }
a.item:active { background: var(--bege); }
.item .texto { flex: 1; min-width: 0; }
.item .texto small { display: block; color: var(--chumbo-suave); font-size: .82rem; margin-top: 2px; }
.item .direita { text-align: right; white-space: nowrap; min-width: 92px; }
.item .direita small { display: block; color: var(--chumbo-suave); font-size: .82rem; }
.medida { height: 6px; border-radius: 3px; background: var(--bege-fundo); margin-top: 6px; }
.medida i { display: block; height: 100%; border-radius: 3px; background: var(--chumbo); }
.foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--bege-fundo); }
.seta { width: 18px; height: 18px; flex: none; color: var(--chumbo-suave); }
.vazio { background: var(--branco); border-radius: 16px; padding: 16px; color: var(--chumbo-suave); font-size: .92rem; }
.vazio strong { display: block; color: var(--chumbo); margin-bottom: 4px; }
.nota { margin: 22px 2px 0; font-size: .82rem; color: var(--chumbo-suave); line-height: 1.4; }

/* Pedidos por hora */
.horas { display: grid; gap: 4px; align-items: end; height: 96px; background: var(--branco); border-radius: 16px 16px 0 0; padding: 12px 12px 0; }
.horas i { display: block; background: var(--chumbo); border-radius: 3px 3px 0 0; min-height: 2px; }
.horas i.vazia { background: var(--bege-fundo); }
.horas i.pico { background: var(--vermelho); }
.horas-rotulos { display: grid; gap: 4px; padding: 4px 12px 8px; font-size: .82rem; color: var(--chumbo-suave); text-align: center; background: var(--branco); border-radius: 0 0 16px 16px; }

/* Caixa */
.estado-caixa { margin: 0 0 14px; font-size: .9rem; color: var(--chumbo-suave); }
.estado-caixa b { color: var(--verde); }
.cupom { background: var(--branco); border-radius: 16px; padding: 12px 16px; font-size: .92rem; }
.cupom div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.cupom .total { border-top: 2px dashed var(--bege-fundo); margin-top: 6px; padding-top: 10px; font-weight: 700; }

/* Selos */
.selo { display: inline-block; font-size: .82rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex: none; }
.selo-ambar { background: var(--ambar-fundo); color: var(--ambar); }
.selo-verde { background: var(--verde-fundo); color: var(--verde); }
.selo-alerta { background: var(--alerta-fundo); color: var(--vermelho-escuro); }
.selo-neutro { background: var(--bege); color: var(--chumbo-suave); }
.etiqueta { display: inline-block; font-size: .82rem; padding: 1px 7px; border-radius: 6px; background: var(--bege); color: var(--chumbo-suave); margin-left: 6px; vertical-align: 1px; }
.caixa-aviso { border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; font-size: .9rem; line-height: 1.4; }
.caixa-aviso.ambar { background: var(--ambar-fundo); color: var(--ambar); }
.caixa-aviso.alerta { background: var(--alerta-fundo); color: var(--vermelho-escuro); }
.caixa-aviso.neutro { background: var(--branco); color: var(--chumbo-suave); }
.caixa-aviso strong { display: block; color: inherit; }

/* Pedidos */
.busca { display: flex; align-items: center; gap: 8px; background: var(--branco); border-radius: 999px; padding: 0 16px; min-height: 48px; margin-bottom: 10px; }
.busca svg { width: 18px; height: 18px; color: var(--chumbo-suave); flex: none; }
.busca input { flex: 1; min-width: 0; border: 0; background: none; font-size: 1rem; min-height: 46px; }
.busca input:focus-visible { outline: none; }
.busca:focus-within { box-shadow: 0 0 0 3px var(--chumbo); }
.filtros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.filtros button { min-height: 54px; border: 0; border-radius: 14px; background: var(--bege-fundo); padding: 4px 6px; line-height: 1.15; }
.filtros b { display: block; font-size: 1.05rem; }
.filtros span { font-size: .82rem; }
.filtros button[aria-pressed="true"] { background: var(--chumbo); color: var(--bege); }

/* Cardápio e Mais */
.botao-largo { display: flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; text-align: center; }
.texto-corrido { margin: 0 0 14px; line-height: 1.45; }
.mais-texto { background: var(--branco); border-radius: 16px; padding: 12px 16px; line-height: 1.45; font-size: .92rem; }
.mais-texto p { margin: 0 0 8px; }
.mais-texto p:last-child { margin-bottom: 0; }

/* Abas */
nav.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
  display: grid; grid-template-columns: repeat(5, 1fr);
  max-width: 520px; margin: 0 auto;
  background: var(--branco);
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -1px 0 var(--bege-fundo), 0 -6px 18px rgba(32, 30, 27, .06);
}
nav.abas a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; font-size: .82rem; color: var(--chumbo-suave); text-decoration: none; }
nav.abas .icone { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; }
nav.abas svg { width: 22px; height: 22px; }
nav.abas a[aria-current="page"] { color: var(--chumbo); font-weight: 700; }
nav.abas a[aria-current="page"] .icone { background: var(--bege); color: var(--vermelho-escuro); }

@media (prefers-reduced-motion: reduce) {
  .atualizando { transition: none; }
}

/* Acesso de fora da loja (Mais) */
.acesso-fora { display: grid; gap: 10px; }
.acesso-fora p { margin: 0; }
.mais-texto .botao-largo + .botao-texto, .mais-texto .botao + .botao-texto { justify-self: center; }
.campo-rotulo { display: grid; gap: 4px; font-size: .82rem; color: var(--chumbo-suave); }
.campo-texto { min-height: 48px; border: 2px solid var(--bege-fundo); border-radius: 12px; padding: 0 12px; background: var(--branco); font-size: 1rem; width: 100%; color: var(--chumbo); }
.campo-codigo { font-size: 1.4rem; font-weight: 700; letter-spacing: .2em; }
.chave-fora { font-size: 1.1rem; font-weight: 700; letter-spacing: .06em; word-spacing: .3em; user-select: all; overflow-wrap: anywhere; background: var(--bege); border-radius: 10px; padding: 10px 12px; }
.mais-texto > .botao-largo { margin-top: 10px; }