/* Pura Folha — identidade visual: erva, frescor, natureza e acolhimento. Mobile primeiro. */
:root {
  --fundo: #F6F3EC;          /* marfim claro */
  --superficie: #FFFFFF;
  --principal: #173F35;      /* verde profundo: navegação e ações */
  --principal-hover: #10302800;
  --secundaria: #2F6B4F;     /* verde folha */
  --secundaria-clara: #E6F0E9;
  --dourado: #B79A5B;        /* só em detalhes (nunca texto pequeno sobre claro) */
  --texto: #1C2823;          /* grafite */
  --texto-2: #4F5C55;        /* texto secundário: contraste 6.6:1 sobre marfim */
  --borda: #DEE5DD;
  --erro: #A8261B;           /* 6.4:1 sobre branco */
  --erro-fundo: #FBEAE8;
  --alerta: #8A5300;         /* 5.6:1 sobre branco */
  --alerta-fundo: #FFF3DC;
  --ok: #1E6B3E;
  --ok-fundo: #E3F2E8;
  --info: #1F4E79;
  --info-fundo: #E5EEF7;
  --raio: 14px;
  --raio-p: 10px;
  --sombra: 0 1px 2px rgba(23, 63, 53, .06), 0 4px 14px rgba(23, 63, 53, .06);
  --toque: 48px;
  --nav-h: 64px;
  --fonte: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte);
  font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
.num, .valor, td.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--secundaria); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- estrutura ---------- */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: 20; background: var(--principal); color: #fff;
  display: flex; align-items: center; gap: 10px; padding: 8px 16px; min-height: 56px;
  padding-top: max(8px, env(safe-area-inset-top));
}
.topo .marca { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.topo .marca img { width: 36px; height: 36px; border-radius: 50%; background: #fff; flex: none; }
.topo .marca b { font-size: 17px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .conexao { font-size: 13px; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.12); white-space: nowrap; }
.topo .conexao.off { background: #FFE2B8; color: #5A3600; font-weight: 600; }
/* modo suporte Nexosys: faixa fixa enquanto alguém da central estiver no painel */
.faixa-suporte { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 44px; box-sizing: border-box; background: #8A3B00; color: #fff; font-weight: 650; font-size: 13px; padding: 6px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.faixa-suporte + .topo { top: 44px; } /* o topo gruda logo abaixo da faixa */
.faixa-suporte .curto { display: none; }
@media (max-width: 700px) {
  .faixa-suporte { gap: 8px; font-size: 12px; line-height: 1.2; }
  .faixa-suporte .longo { display: none; }
  .faixa-suporte .curto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } /* até 2 linhas */
}
.faixa-suporte span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa-suporte button { flex: none; background: #fff; color: #5A2600; border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; font-weight: 700; cursor: pointer; min-height: 32px; }
.faixa-demo { background: var(--dourado); color: #1C2823; text-align: center; font-weight: 700; font-size: 14px; padding: 6px 12px; }

.conteudo { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 16px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }

.nav-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--principal);
  display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgba(0,0,0,.12);
}
.nav-inferior a, .nav-lateral a {
  color: #CFE0D7; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: var(--nav-h); font-size: 13px; font-weight: 600; position: relative;
}
.nav-inferior a.ativo, .nav-lateral a.ativo { color: #fff; }
.nav-inferior a.ativo::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--dourado); }
.nav-inferior svg, .nav-lateral svg { width: 24px; height: 24px; }
.badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #FFD98A; color: #3D2A00; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.nav-lateral { display: none; }

@media (min-width: 900px) {
  .app { flex-direction: row; }
  .nav-inferior { display: none; }
  .nav-lateral {
    display: flex; flex-direction: column; width: 232px; flex: none; background: var(--principal); position: sticky; top: 0; height: 100dvh; padding: 14px 12px; gap: 4px;
  }
  .nav-lateral .marca-lateral { display: flex; align-items: center; gap: 10px; color: #fff; padding: 4px 6px 16px; }
  .nav-lateral .marca-lateral img { width: 52px; height: 52px; border-radius: 50%; background: #fff; }
  .nav-lateral .marca-lateral b { font-size: 16px; line-height: 1.2; }
  .nav-lateral a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 14px; min-height: 48px; border-radius: 10px; font-size: 15px; }
  .nav-lateral a:hover { background: rgba(255,255,255,.07); }
  .nav-lateral a.ativo { background: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 var(--dourado); }
  .nav-lateral .badge { position: static; margin-left: auto; }
  .nav-lateral .rodape-nav { margin-top: auto; color: #CFE0D7; font-size: 13px; padding: 8px 6px; }
  .principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .topo .marca { visibility: hidden; }
  .conteudo { padding: 24px 28px 40px; }
}

/* ---------- tipografia e blocos ---------- */
h1 { font-size: 22px; line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 18px; margin: 0; font-weight: 650; }
h3 { font-size: 16px; margin: 0; font-weight: 650; }
.cabecalho { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: var(--toque); flex-wrap: wrap; }
.cabecalho .titulo { flex: 1; min-width: min(190px, 100%); overflow-wrap: anywhere; }
.cabecalho .sub, .sub { color: var(--texto-2); font-size: 14px; }
.secao { margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.secao h2 { font-size: 16px; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; }
.cartao + .cartao, .lista > * + * { margin-top: 10px; }
.grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grade-2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cresce { flex: 1; min-width: 0; }
.quebra { overflow-wrap: anywhere; }
.muted { color: var(--texto-2); }
.pequeno { font-size: 14px; }
.vazio { text-align: center; padding: 32px 16px; color: var(--texto-2); }
.vazio svg { width: 40px; height: 40px; color: var(--secundaria); opacity: .7; }
.vazio b { display: block; color: var(--texto); margin: 8px 0 4px; font-size: 17px; }
hr.div { border: 0; border-top: 1px solid var(--borda); margin: 14px 0; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--toque); padding: 0 18px;
  border-radius: 12px; border: 1px solid transparent; background: var(--principal); color: #fff; font-weight: 650; font-size: 16px;
  cursor: pointer; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn:hover { filter: brightness(1.08); }
.btn[disabled], .btn.carregando { opacity: .55; cursor: not-allowed; filter: none; }
.btn.carregando::after { content: ''; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.btn.sec { background: var(--superficie); color: var(--principal); border-color: #BFD0C5; }
.btn.folha { background: var(--secundaria); }
.btn.claro { background: var(--secundaria-clara); color: var(--principal); }
.btn.perigo { background: var(--superficie); color: var(--erro); border-color: #E6B8B3; }
.btn.perigo-cheio { background: var(--erro); }
.btn.txt { background: transparent; color: var(--secundaria); padding: 0 10px; }
.btn.bloco { width: 100%; }
.btn.grande { min-height: 60px; font-size: 17px; border-radius: 14px; }
.btn.icone { width: var(--toque); padding: 0; }
.btn.peq { min-height: 40px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.acoes { display: grid; gap: 10px; }
.acoes-3 { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .acoes-3 { grid-template-columns: 1.3fr 1fr 1fr; } }
.acoes-3 .btn { flex-direction: column; gap: 4px; min-height: 72px; font-size: 15px; }
.acoes-3 .btn svg { width: 24px; height: 24px; }
@media (max-width: 559px) { .acoes-3 .btn { flex-direction: row; min-height: 56px; justify-content: flex-start; padding: 0 18px; } }

/* ---------- etiquetas de situação (texto + cor) ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; padding: 3px 10px; border-radius: 99px; white-space: nowrap; border: 1px solid transparent; }
.tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag.livre { background: #F1F4F1; color: #46534C; border-color: var(--borda); }
.tag.ocupada { background: var(--info-fundo); color: var(--info); }
.tag.parcial { background: var(--alerta-fundo); color: var(--alerta); }
.tag.quitada, .tag.ok { background: var(--ok-fundo); color: var(--ok); }
.tag.pendente { background: var(--alerta-fundo); color: var(--alerta); }
.tag.preparado { background: var(--info-fundo); color: var(--info); }
.tag.entregue { background: var(--ok-fundo); color: var(--ok); }
.tag.cancelado, .tag.erro { background: var(--erro-fundo); color: var(--erro); }
.tag.neutra { background: #F1F4F1; color: #46534C; }

/* ---------- mesas ---------- */
.mesa {
  display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px; min-height: 118px; border-radius: var(--raio);
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra); cursor: pointer; color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mesa:hover { border-color: #B9CDBF; }
.mesa .nome { font-size: 18px; font-weight: 700; }
.mesa .valor { font-size: 20px; font-weight: 700; margin-top: auto; }
.mesa .falta { font-size: 14px; color: var(--alerta); font-weight: 650; }
.mesa .info { font-size: 13px; color: var(--texto-2); }
.mesa.ocupada { border-left: 5px solid var(--secundaria); }
.mesa.parcial { border-left: 5px solid #C98A12; }
.mesa.quitada { border-left: 5px solid var(--ok); }
.mesa.livre { background: #FBFAF6; }

/* ---------- conta ---------- */
.resumo-conta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.resumo-conta div { background: var(--fundo); border-radius: var(--raio-p); padding: 10px 6px; }
.resumo-conta span { display: block; font-size: 13px; color: var(--texto-2); }
.resumo-conta b { font-size: clamp(14px, 4.3vw, 18px); font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .resumo-conta { gap: 6px; } .resumo-conta div { padding: 10px 4px; } }
.resumo-conta .destaque { background: var(--principal); color: #fff; }
.resumo-conta .destaque span { color: #CFE0D7; }
.item { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--borda); align-items: flex-start; }
.item:first-child { border-top: 0; }
.item .qtd { font-weight: 700; min-width: 30px; font-variant-numeric: tabular-nums; }
.item .preco { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item.cancelado { opacity: .6; text-decoration: line-through; }
.pedido-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--texto-2); margin-bottom: 4px; }

/* ---------- formulários ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label, .rotulo { font-weight: 600; font-size: 15px; }
.campo .ajuda { font-size: 13px; color: var(--texto-2); }
.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: var(--toque); padding: 10px 14px; border-radius: 12px; border: 1px solid #B9C8BE; background: #fff; font-size: 16px;
}
textarea.entrada { min-height: 80px; resize: vertical; }
.entrada:focus { border-color: var(--secundaria); outline: 3px solid rgba(47,107,79,.18); }
.entrada.invalida { border-color: var(--erro); }
.entrada.dinheiro, .entrada.grande { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.erro-campo { color: var(--erro); font-size: 14px; font-weight: 600; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid var(--borda); background: #fff; cursor: pointer; min-height: var(--toque); }
.check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--secundaria); }
.segmentado { display: flex; background: #E9EEE9; border-radius: 12px; padding: 4px; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.segmentado button { flex: 1; min-height: 42px; border: 0; background: transparent; border-radius: 9px; font-weight: 650; font-size: 14px; color: var(--texto-2); cursor: pointer; white-space: nowrap; padding: 0 12px; }
.segmentado button.ativo { background: #fff; color: var(--principal); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid #B9C8BE; background: #fff; font-weight: 650; cursor: pointer; font-variant-numeric: tabular-nums; }
.chip.ativo { background: var(--principal); border-color: var(--principal); color: #fff; }
.passo { display: inline-flex; align-items: center; border: 1px solid #B9C8BE; border-radius: 12px; overflow: hidden; background: #fff; }
.passo button { width: 48px; height: 48px; border: 0; background: transparent; font-size: 22px; font-weight: 700; color: var(--principal); cursor: pointer; }
.passo span { min-width: 36px; text-align: center; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.formas button { min-height: 64px; border-radius: 12px; border: 2px solid var(--borda); background: #fff; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.formas button svg { width: 22px; height: 22px; }
.formas button.ativo { border-color: var(--principal); background: var(--secundaria-clara); color: var(--principal); }

/* ---------- avisos ---------- */
.aviso { border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.aviso svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.aviso.alerta { background: var(--alerta-fundo); color: #5A3600; }
.aviso.erro { background: var(--erro-fundo); color: #7A1A12; }
.aviso.info { background: var(--info-fundo); color: #173A5A; }
.aviso.ok { background: var(--ok-fundo); color: #134A2A; }
.aviso .btn { margin-top: 8px; }

/* ---------- folha (modal inferior no celular, centralizado no computador) ---------- */
.veu { position: fixed; inset: 0; z-index: 50; background: rgba(15, 30, 25, .45); display: flex; align-items: flex-end; justify-content: center; }
.folha {
  background: var(--fundo); width: 100%; max-width: 640px; max-height: 92dvh; border-radius: 20px 20px 0 0; display: flex; flex-direction: column;
  box-shadow: 0 -8px 30px rgba(0,0,0,.18); animation: sobe .18s ease-out;
}
.folha.cheia { max-height: 100dvh; height: 100dvh; border-radius: 0; }
@keyframes sobe { from { transform: translateY(24px); opacity: .6; } }
.folha-cab { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--borda); background: #fff; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.folha-cab h2 { flex: 1; min-width: 0; }
.folha-corpo { padding: 16px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.folha-rodape { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); background: #fff; display: grid; gap: 8px; }
@media (min-width: 700px) {
  .veu { align-items: center; padding: 24px; }
  .folha { border-radius: 20px; max-height: 88dvh; }
  .folha.cheia { height: auto; max-height: 88dvh; border-radius: 20px; }
  .folha-rodape { border-radius: 0 0 20px 20px; }
}

/* ---------- avisos rápidos ---------- */
.toasts { position: fixed; left: 16px; right: 16px; top: calc(12px + env(safe-area-inset-top)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { background: var(--texto); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 520px; pointer-events: auto; display: flex; gap: 10px; align-items: center; }
.toast.ok { background: var(--ok); }
.toast.erro { background: var(--erro); }
.toast svg { width: 20px; height: 20px; flex: none; }
@media (min-width: 900px) { .toasts { top: 20px; left: 260px; } }

/* ---------- produtos no pedido ---------- */
.produto { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--borda); border-radius: 12px; min-height: 64px; cursor: pointer; width: 100%; text-align: left; }
.produto + .produto { margin-top: 8px; }
.produto .preco { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.produto.sem-estoque { opacity: .6; }
.produto .mais { width: 40px; height: 40px; border-radius: 10px; background: var(--secundaria-clara); color: var(--principal); display: grid; place-items: center; flex: none; }
.produto .mais svg { width: 22px; height: 22px; }
.carrinho { background: #fff; border-top: 1px solid var(--borda); }
.erva-op { display: flex; align-items: center; gap: 10px; padding: 12px; border: 2px solid var(--borda); border-radius: 12px; background: #fff; cursor: pointer; width: 100%; text-align: left; min-height: 56px; }
.erva-op + .erva-op { margin-top: 8px; }
.erva-op.ativo { border-color: var(--principal); background: var(--secundaria-clara); }
.erva-op[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- tabelas simples / listas ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela th, .tabela td { padding: 10px 8px; border-top: 1px solid var(--borda); text-align: left; vertical-align: top; }
.tabela th { font-size: 13px; color: var(--texto-2); font-weight: 600; border-top: 0; }
.tabela td.num, .tabela th.num { text-align: right; white-space: nowrap; }
.linha-lista { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--borda); min-height: 56px; }
.linha-lista:first-child { border-top: 0; }
a.linha-lista, button.linha-lista { color: inherit; text-decoration: none; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; cursor: pointer; font: inherit; }
.linha-lista > svg { width: 22px; height: 22px; color: var(--secundaria); flex: none; }
.indicador { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px; }
.indicador span { display: block; font-size: 13px; color: var(--texto-2); font-weight: 600; }
.indicador b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.indicador small { display: block; color: var(--texto-2); font-size: 13px; margin-top: 4px; }
.estimado { font-size: 12px; font-weight: 700; color: var(--alerta); background: var(--alerta-fundo); border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.saldo-grande { font-size: 28px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ---------- entrada / configuração inicial ---------- */
.tela-entrada { flex: 1; width: 100%; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(circle at 50% 0%, #E7EFE6 0, var(--fundo) 60%); }
.tela-entrada .caixa-entrada { width: 100%; max-width: 420px; }
.tela-entrada .logo-entrada { display: block; width: 168px; height: 168px; margin: 0 auto 16px; border-radius: 50%; box-shadow: 0 10px 30px rgba(23,63,53,.18); background: #fff; }
.tela-entrada h1 { text-align: center; margin-bottom: 4px; }
.tela-entrada .sub { text-align: center; margin-bottom: 20px; }

/* ---------- conta do cliente e comprovante ---------- */
.conta-cliente { max-width: 520px; margin: 0 auto; }
.conta-cliente .topo-conta { text-align: center; margin-bottom: 14px; }
.conta-cliente .topo-conta img { width: 96px; height: 96px; border-radius: 50%; background: #fff; }
.conta-cliente .item { font-size: 17px; }
.conta-cliente .totais div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 18px; font-variant-numeric: tabular-nums; }
.conta-cliente .totais .falta { font-size: 24px; font-weight: 800; color: var(--principal); }
.comprovante { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 14px; background: #fff; padding: 16px; max-width: 360px; margin: 0 auto; border: 1px dashed #B9C8BE; }
.comprovante .linha-c { display: flex; justify-content: space-between; gap: 8px; }
.comprovante h3 { text-align: center; font-size: 15px; }
@media print {
  body * { visibility: hidden !important; }
  .imprimir, .imprimir * { visibility: visible !important; }
  .imprimir { position: absolute; left: 0; top: 0; border: 0; width: 100%; max-width: none; }
  .veu { background: none; }
}

/* ---------- carregamento ---------- */
.esqueleto { background: linear-gradient(90deg, #ECEFEA 25%, #F5F6F2 37%, #ECEFEA 63%); background-size: 400% 100%; animation: brilho 1.3s ease infinite; border-radius: var(--raio); min-height: 100px; }
@keyframes brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- cardápio do cliente (QR code da mesa) ---------- */
.cardapio { max-width: 640px; margin: 0 auto; min-height: 100dvh; }
.cab-cardapio { display: flex; align-items: center; gap: 14px; padding: calc(18px + env(safe-area-inset-top)) 16px 18px; background: var(--principal); color: #fff; }
.cab-cardapio img { width: 64px; height: 64px; border-radius: 50%; background: #fff; flex: none; object-fit: contain; }
.cab-cardapio h1 { color: #fff; font-size: 22px; margin: 0 0 4px; }
.mesa-cardapio { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); border-radius: 99px; padding: 4px 12px; font-size: 15px; }
.mesa-cardapio svg { width: 16px; height: 16px; }
.corpo-cardapio { padding: 8px 16px calc(110px + env(safe-area-inset-bottom)); }
.secao-cardapio { margin-top: 18px; }
.secao-cardapio h2 { font-size: 20px; margin: 0 0 2px; }
.secao-cardapio > .pequeno { margin: 0 0 8px; }
.lista-cardapio { display: grid; gap: 10px; margin-top: 8px; }
.item-cardapio { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.item-cardapio .preco { margin-top: 4px; font-weight: 750; color: var(--principal); font-variant-numeric: tabular-nums; }
.item-cardapio .btn { flex: none; }
.item-cardapio.esgotado { opacity: .6; }
.barra-carrinho { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--fundo) 70%, transparent); }
.barra-carrinho .btn { max-width: 608px; margin: 0 auto; display: flex; gap: 12px; }
.barra-carrinho .bolha { min-width: 30px; height: 30px; border-radius: 15px; background: #fff; color: var(--principal); display: grid; place-items: center; font-weight: 800; padding: 0 6px; }
.pagina-cardapio .toasts { left: 16px; }

/* ---------- QR code das mesas (impressão) ---------- */
.qr-mesa { text-align: center; }
.qr-mesa svg { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }
.qr-mesa .qr-nome { font-size: 22px; font-weight: 800; margin: 6px 0 2px; }
.qr-folha { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.qr-folha .qr-mesa { border: 1px dashed #B9C8BE; border-radius: 12px; padding: 14px; break-inside: avoid; }
.qr-url { font-size: 12px; overflow-wrap: anywhere; color: var(--texto-2); }
@media print {
  .qr-folha { grid-template-columns: repeat(2, 1fr); }
  .qr-folha .qr-mesa { page-break-inside: avoid; }
}

.badge.alerta-estoque { background: var(--erro-fundo, #FDE2DE); color: var(--erro, #B3261E); left: auto; right: calc(50
/* LGPD, segurança da conta e alerta de estoque (14/11/2026) */
.badge.alerta-estoque { background: var(--erro-fundo, #FDE2DE); color: var(--erro, #B3261E); left: auto; right: calc(50% - 22px); }
.nav-lateral .badge.alerta-estoque { right: auto; }
.texto-legal { white-space: pre-wrap; line-height: 1.5; font-size: 14px; max-height: 60vh; overflow: auto; }
.codigos-rec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; font-family: ui-monospace, Consolas, monospace; font-size: 16px; margin: 10px 0; }
.qr-2fa svg { width: 200px; height: 200px; display: block; margin: 8px auto; background: #fff; }