/* Garçom MbMAX: o verde do M da marca, branco sobre o verde, letra grande para usar andando. */
:root {
  --verde: #12d46c;
  --verde-escuro: #07863f;
  --verde-claro: #e3f8ec;
  --fundo: #eef7f1;
  --cartao: #ffffff;
  --tinta: #0f1f17;
  --texto2: #3f5148;
  --texto3: #6b7c73;
  --borda: #dbe7df;
  --laranja: #e8890c;
  --laranja-claro: #fff1dc;
  --azul: #2f7de1;
  --azul-claro: #e2eeff;
  --vermelho: #d6453d;
  --raio: 18px;
  /* Lateral das teclas: um tom mais escuro que a face (com color-mix, segue a cor da empresa). */
  --borda-relevo: #c7d2cd;
  --lateral-principal: #055c2b;
  --lateral-clara: rgba(7, 134, 63, 0.33);
  --lateral-verde: #0c9a4e;
  --lateral-laranja: #b86a06;
  --lateral-azul: #1f5fb0;
  --lateral-perigo: #e3a1ac;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --lateral-principal: color-mix(in srgb, var(--verde-escuro) 72%, #000);
    --lateral-clara: color-mix(in srgb, var(--verde-escuro) 33%, transparent);
    --lateral-verde: color-mix(in srgb, var(--verde) 72%, #000);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fundo); color: var(--tinta); }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; min-height: 100vh; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
button:disabled { opacity: 0.45; cursor: default; }
.carregando { text-align: center; color: var(--texto3); margin-top: 40vh; }

/* Topo verde: quem está atendendo, quantas mesas abertas e o Trocar (uma ação só para a pessoa). */
.topo { position: sticky; top: 0; z-index: 5; background: var(--verde); color: #fff; padding: calc(env(safe-area-inset-top) + 10px) 16px 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 14px rgba(11, 19, 16, 0.12); }
.topo h1 { font-size: 19px; margin: 0; flex: 1; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.topo small { display: block; font-size: 13px; font-weight: 600; opacity: 0.92; letter-spacing: 0; }
.topo .voltar, .topo .sair { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.22); color: #fff; border-radius: 999px; padding: 8px 14px 8px 11px; font-weight: 700; font-size: 14px; min-height: 40px; }
.topo .voltar { width: 40px; height: 40px; padding: 0; justify-content: center; }
.topo .voltar .icone { width: 22px; height: 22px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--verde-escuro); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; flex: none; box-shadow: 0 2px 0 rgba(0,0,0,0.12); }

/* Ícones em traço: herdam a cor do texto. */
.icone { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.conteudo { padding: 18px 16px 120px; display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin: 0 auto; }
.secao-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 2px 0; }
.secao-linha:first-child { margin-top: 0; }
.secao { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--tinta); margin: 0; letter-spacing: -0.01em; }
p.secao { font-size: 13px; font-weight: 700; color: var(--texto3); text-transform: uppercase; letter-spacing: 0.04em; margin: 4px 2px -4px; }
.contagem { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--tinta); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.secao-extra { font-size: 13px; font-weight: 600; color: var(--texto3); }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; }
.dica { color: var(--texto3); font-size: 14px; text-align: center; margin: 0; }
.faixa { border-radius: 14px; padding: 12px 14px; font-weight: 600; font-size: 14px; line-height: 1.35; }
.faixa.fila { background: var(--laranja-claro); color: #8a4f00; }
.faixa.erro { background: #fde7e5; color: var(--vermelho); }
.faixa.recusado { display: flex; align-items: center; gap: 10px; }
.faixa.recusado span { flex: 1; }

/* Entrada */
.entrada { min-height: 100vh; background: var(--verde); color: #fff; padding: calc(env(safe-area-inset-top) + 48px) 24px 32px; display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.entrada h1 { margin: 0; font-size: 28px; }
.entrada p { margin: 0; opacity: 0.92; max-width: 320px; }
.entrada .campo { width: 100%; max-width: 320px; font-size: 28px; letter-spacing: 0.3em; text-align: center; padding: 14px; border-radius: var(--raio); border: 0; color: var(--tinta); }
.entrada .principal { width: 100%; max-width: 320px; }
.entrada .erro { color: #fff; background: rgba(0,0,0,0.18); border-radius: 12px; padding: 8px 12px; font-weight: 600; }
.pessoas-lista { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; }
.pessoas-lista button { background: #fff; color: var(--tinta); border-radius: var(--raio); padding: 16px; font-size: 18px; font-weight: 700; display: flex; justify-content: space-between; }
.pessoas-lista small { color: var(--texto3); font-weight: 500; }
.pontos { display: flex; gap: 14px; justify-content: center; }
.pontos span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; }
.pontos span.cheio { background: #fff; }
.teclado { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px; justify-content: center; }
.teclado button { height: 76px; border-radius: 50%; background: rgba(255,255,255,0.24); color: #fff; font-size: 28px; font-weight: 700; }
.teclado button.vazio { visibility: hidden; }

/* Tecla (como no app, src/ui/tema.ts): a face em cima, a lateral mais escura embaixo e sombra suave;
   no toque a face desce sobre a lateral. A lateral fica fora da caixa: margin-bottom guarda o lugar. */
.principal, .secundario, .pequeno, .topo .voltar, .topo .sair, .mesa, button.item-lista, .levei, .numeros button {
  --relevo: 5px;
  --lateral: var(--borda-relevo);
  --brilho: rgba(255, 255, 255, 0.7);
  --sombra: 0 calc(var(--relevo) + 2px) 4px rgba(11, 19, 16, 0.16), 0 calc(var(--relevo) + 7px) 16px rgba(11, 19, 16, 0.1);
  --sombra-apertada: 0 2px 3px rgba(11, 19, 16, 0.16);
  margin-bottom: var(--relevo);
  box-shadow: inset 0 1px 0 var(--brilho), inset 0 -3px 6px rgba(11, 19, 16, 0.07), 0 var(--relevo) 0 var(--lateral), var(--sombra);
  transition: transform 70ms ease-out, box-shadow 70ms ease-out;
}
.principal:active, .secundario:active, .pequeno:active, .topo .voltar:active, .topo .sair:active, .mesa:active, button.item-lista:active, .levei:active, .numeros button:active {
  transform: translateY(calc(var(--relevo) - 1px));
  box-shadow: inset 0 1px 0 var(--brilho), inset 0 -3px 6px rgba(11, 19, 16, 0.07), 0 1px 0 var(--lateral), var(--sombra-apertada);
}

/* Botões */
.principal { background: var(--verde-escuro); color: #fff; border-radius: 999px; min-height: 56px; padding: 0 22px; font-weight: 800; font-size: 17px; width: 100%; --lateral: var(--lateral-principal); --brilho: rgba(255, 255, 255, 0.3); }
/* Sobre o verde: tecla branca com sombra leve (a sombra forte vira mancha no verde). */
.entrada .principal { background: #fff; color: var(--verde-escuro); --lateral: var(--borda-relevo); --brilho: #fff; --sombra: 0 calc(var(--relevo) + 1px) 3px rgba(11, 19, 16, 0.12); --sombra-apertada: 0 1px 2px rgba(11, 19, 16, 0.1); }
.secundario { background: var(--verde-claro); color: var(--verde-escuro); border-radius: 999px; min-height: 52px; padding: 0 20px; font-weight: 700; font-size: 16px; width: 100%; --lateral: var(--lateral-clara); --brilho: rgba(255, 255, 255, 0.9); }
.pequeno { position: relative; background: var(--verde-claro); color: var(--verde-escuro); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; white-space: nowrap; --relevo: 3px; --lateral: var(--lateral-clara); --brilho: rgba(255, 255, 255, 0.9); }
/* Folga do toque: o botão pequeno aceita o dedo um pouco além da borda. */
.pequeno::after { content: ""; position: absolute; inset: -7px -4px; }
.pequeno.perigo { background: #fde7e5; color: var(--vermelho); --lateral: var(--lateral-perigo); }
/* Véu sobre o verde do topo: tecla baixa e sem sombra (a sombra escura vira mancha no verde). */
.topo .voltar, .topo .sair { --relevo: 3px; --lateral: rgba(0, 0, 0, 0.16); --brilho: rgba(255, 255, 255, 0.35); --sombra: 0 0 0 transparent; --sombra-apertada: 0 0 0 transparent; }
.acoes { display: flex; flex-direction: column; gap: 10px; }

/* Listas do topo (pronto para levar, pedindo a conta, minhas mesas): a placa da mesa à esquerda,
   o que está acontecendo no meio, o valor ou a ação à direita. Cartão branco, a cor fica na placa. */
.item-lista { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 12px 12px 12px; --relevo: 3px; }
.item-lista .descricao { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.3; }
.item-lista .descricao b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-lista .descricao small { color: var(--texto3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-lista .descricao em { font-style: normal; font-weight: 800; color: var(--verde-escuro); }
.item-lista .valor { font-size: 16px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-lista .seta { width: 18px; height: 18px; color: var(--texto3); margin-left: -4px; }
.item-lista.meu, .item-lista.minha { border-color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde), 0 var(--relevo) 0 var(--lateral-clara), var(--sombra); }
.item-lista.conta.minha { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul), 0 var(--relevo) 0 rgba(47, 125, 225, 0.3), var(--sombra); }
.item-lista.pronto:not(.meu) { opacity: 0.88; }
.minha-mesa .estado { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto3); }
.minha-mesa.ocupada .estado { color: var(--verde-escuro); }
.minha-mesa.esperando { border-color: var(--laranja); box-shadow: inset 0 0 0 1px var(--laranja), 0 var(--relevo) 0 rgba(232, 137, 12, 0.35), var(--sombra); }
.minha-mesa.esperando .estado { color: #8a4f00; }
.minha-mesa.conta .estado { color: var(--azul); }

/* Placa da mesa: "MESA" pequeno em cima do número. */
.placa { flex: none; width: 52px; height: 52px; border-radius: 14px; background: #eef2f0; color: var(--texto2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.placa small { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; margin-bottom: 3px; }
.placa.ocupada { background: var(--verde); color: #fff; }
.placa.esperando { background: var(--laranja); color: #fff; }
.placa.conta { background: var(--azul); color: #fff; }

/* Levei: a ação do pronto, verde cheio (é o que o garçom mais toca). */
.levei { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--verde-escuro); color: #fff; border-radius: 999px; min-height: 44px; padding: 0 16px 0 12px; font-weight: 800; font-size: 15px; --relevo: 3px; --lateral: var(--lateral-principal); --brilho: rgba(255, 255, 255, 0.3); }

.minhas { display: flex; flex-direction: column; gap: 8px; }
.sem-mesa { margin: 0; display: flex; align-items: center; gap: 10px; background: transparent; border: 1.5px dashed var(--borda); border-radius: 14px; padding: 12px 14px; color: var(--texto3); font-size: 14px; line-height: 1.35; }
.sem-mesa .icone { width: 20px; height: 20px; color: var(--verde-escuro); }

/* Mapa das mesas: a livre fica quieta (branca, baixa); a aberta ganha cor, valor e quem atende. */
.grade-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.mesa { --relevo: 3px; position: relative; background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 10px 11px; min-height: 84px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1px; min-width: 0; }
.mesa .num { font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mesa .estado { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto3); }
.mesa .valor { font-size: 15px; font-weight: 800; margin-top: auto; padding-top: 4px; font-variant-numeric: tabular-nums; }
.mesa .info { font-size: 12px; color: var(--texto3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa.livre { --lateral: #dfe7e2; --sombra: 0 calc(var(--relevo) + 1px) 3px rgba(11, 19, 16, 0.08); --sombra-apertada: 0 1px 2px rgba(11, 19, 16, 0.08); }
.mesa.livre .num { color: var(--texto2); }
.mesa.minha .info { color: var(--verde-escuro); font-weight: 800; }
.mesa.ocupada { background: var(--verde-claro); border-color: var(--verde); --lateral: var(--lateral-verde); }
.mesa.ocupada .estado { color: var(--verde-escuro); }
.mesa.esperando { background: var(--laranja-claro); border-color: var(--laranja); --lateral: var(--lateral-laranja); }
.mesa.esperando .estado { color: #8a4f00; }
.mesa.conta { background: var(--azul-claro); border-color: var(--azul); --lateral: var(--lateral-azul); }
.mesa.conta .estado { color: var(--azul); }
/* A mesa dele leva uma marca no canto, além do "Você". */
.mesa.minha::after { content: ""; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-escuro); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--texto2); margin-top: 4px; }
.legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); }
.legenda .l-livre { --c: #fff; }
.legenda .l-livre::before { box-shadow: inset 0 0 0 1px var(--borda); }
.legenda .l-ocupada { --c: var(--verde); }
.legenda .l-esperando { --c: var(--laranja); }
.legenda .l-conta { --c: var(--azul); }
.conteudo.com-carrinho { padding-bottom: 340px; }

/* Conta da mesa */
.resumo-mesa { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.resumo-mesa .total { font-size: 30px; font-weight: 800; }
.lancamento { border-top: 1px solid var(--borda); padding: 12px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.lancamento:first-of-type { border-top: 0; padding-top: 4px; }
.lancamento .cabeca { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13px; color: var(--texto3); }
.lancamento .linha { display: flex; justify-content: space-between; gap: 8px; font-size: 16px; }
.lancamento .obs { font-size: 14px; color: #8a4f00; background: var(--laranja-claro); border-radius: 10px; padding: 4px 8px; align-self: flex-start; }
.lancamento.cancelado .linha { text-decoration: line-through; color: var(--texto3); }
.selo { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; }
.selo.cozinha { background: var(--laranja-claro); color: #8a4f00; }
.selo.pronto { background: var(--verde); color: #fff; }
.selo.entregue { background: var(--verde-claro); color: var(--verde-escuro); }
.selo.cancelado { background: #eef0ef; color: var(--texto3); }

/* Quantas pessoas */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.numeros button { --relevo: 4px; background: var(--cartao); border: 2px solid var(--borda); border-radius: var(--raio); height: 64px; font-size: 22px; font-weight: 800; }

/* Cardápio */
.categorias { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.categorias button { background: #fff; border: 1px solid var(--borda); border-radius: 999px; padding: 10px 16px; font-weight: 700; color: var(--texto2); white-space: nowrap; }
.categorias button.ativa { background: var(--verde); border-color: var(--verde); color: #fff; }
.produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.produto { background: var(--cartao); border: 2px solid var(--borda); border-radius: var(--raio); padding: 8px; display: flex; flex-direction: column; gap: 6px; text-align: left; position: relative; }
.produto.escolhido { border-color: var(--verde); background: var(--verde-claro); }
.produto img, .produto .sem-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: #f6f4f0; display: block; }
.produto .nome { font-weight: 700; font-size: 15px; padding: 0 4px; }
.produto .preco { font-weight: 800; color: var(--verde-escuro); padding: 0 4px 2px; }
.produto .qtd { position: absolute; top: 14px; right: 14px; background: var(--verde); color: #fff; border-radius: 999px; min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.produto .acabou { color: var(--vermelho); font-weight: 800; padding: 0 4px; }

/* Carrinho fixo embaixo */
.carrinho { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--cartao); border-top: 1px solid var(--borda); box-shadow: 0 -6px 18px rgba(15,31,23,0.08); padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px); display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.carrinho .linha { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.carrinho .linha .nome { flex: 1; }
.carrinho .menos, .carrinho .mais { width: 34px; height: 34px; border-radius: 50%; background: var(--verde-claro); color: var(--verde-escuro); font-weight: 800; font-size: 20px; line-height: 1; }
.carrinho input { width: 100%; border: 1px solid var(--borda); border-radius: 12px; padding: 12px; font: inherit; }

/* Aviso que aparece e some */
.aviso { position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 24px); z-index: 10; background: var(--tinta); color: #fff; border-radius: 16px; padding: 14px 16px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,0.25); max-width: 560px; margin: 0 auto; }
.aviso.bom { background: var(--verde-escuro); }
.aviso.ruim { background: var(--vermelho); }
.lancamento .pequeno { align-self: flex-end; }
.faixa.recusado small { display: block; font-weight: 500; margin-top: 4px; color: #8f2f29; }
.faixa.recusado .botoes-faixa { display: flex; flex-direction: column; gap: 6px; flex: none; }