/* Cardápio Certo — identidade Zufall.
   Cores iguais às do site: preto #080808, amarelo #F5C518, texto #f0f0f0.
   O amarelo é cor de marca e de destaque; texto corrido usa --tx, nunca amarelo. */

:root {
  --bk: #080808;
  --s1: #111111;
  --s2: #181818;
  --s3: #1f1f1f;
  --linha: #262626;
  --linha2: #1d1d1d;
  --tx: #f0f0f0;
  --mu: #8f8f8f;
  --dim: #6a6a6a;
  --y: #F5C518;
  --y-ink: #141200;
  --bad: #E5484D;
  --good: #3DBE7A;
  --warn: #F0A030;

  --display: "Bricolage Grotesque", "Cabinet Grotesk", system-ui, sans-serif;
  --corpo: "DM Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --r: 10px;
  --r-sm: 7px;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* O atributo hidden do HTML não alcança elemento SVG: o sprite de ícones ficava
   com display:inline e 150px de altura, empurrando o app inteiro para baixo. */
svg[hidden] { display: none; }

body {
  background: var(--bk);
  color: var(--tx);
  font-family: var(--corpo);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--y); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.55rem); }
h3 { font-weight: 700; font-size: 1rem; margin: 16px 0 8px; }
h4 { font-weight: 700; font-size: .98rem; }

p { color: var(--mu); max-width: 70ch; }
p b, li b, td b, .a b { color: var(--tx); font-weight: 600; }

.eyebrow {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--y); font-weight: 600;
}
.mono { font-family: var(--mono); }
.st { font-family: var(--mono); font-size: .74rem; color: var(--dim); }

/* ---------- marca ---------- */
.marca { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; }
.marca .z { color: var(--y); }
.marca small {
  font-family: var(--mono); font-weight: 400; font-size: .66rem;
  color: var(--dim); margin-left: 8px; letter-spacing: .08em;
}

/* ---------- esqueleto do app ---------- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100dvh; }

.lateral {
  background: var(--s1); border-right: 1px solid var(--linha2);
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.lateral .topo-lateral { padding: 18px 18px 14px; border-bottom: 1px solid var(--linha2); }
.lateral .loja {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-bottom: 1px solid var(--linha2);
}
.lateral .loja .inicial {
  width: 32px; height: 32px; border-radius: 8px; background: var(--y); color: var(--y-ink);
  display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1rem; flex: none;
}
.lateral .loja div { min-width: 0; }
.lateral .loja b { display: block; font-size: .87rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .loja span { font-size: .72rem; color: var(--dim); }

.lateral nav { padding: 10px 0 18px; flex: 1; }
.lateral .grupo {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); font-weight: 600; padding: 14px 18px 6px;
}
.lateral nav button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 18px; background: transparent; border: 0; border-left: 2px solid transparent;
  color: var(--mu); font: inherit; font-size: .87rem; cursor: pointer; text-align: left;
}
.lateral nav button:hover { color: var(--tx); background: color-mix(in srgb, var(--s2) 60%, transparent); }
.lateral nav button.on { background: var(--s2); color: var(--tx); border-left-color: var(--y); font-weight: 600; }
.lateral nav button .ic { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; }
.lateral nav button.on .ic { stroke: var(--y); }
.lateral nav button .aviso {
  margin-left: auto; font-family: var(--mono); font-size: .68rem;
  background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad);
  border-radius: 999px; padding: 1px 7px;
}
.lateral .rodape-lateral { padding: 14px 18px; border-top: 1px solid var(--linha2); font-size: .72rem; color: var(--dim); }

.area { min-width: 0; display: flex; flex-direction: column; }
.barra {
  position: sticky; top: 0; z-index: 10; background: var(--bk);
  border-bottom: 1px solid var(--linha2);
  padding: 13px clamp(16px, 2.4vw, 28px);
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
}
.barra .titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.barra h1 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; }
.barra .passo { font-family: var(--mono); font-size: .7rem; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.barra .direita { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.conteudo { padding: 20px clamp(16px, 2.4vw, 28px) 80px; display: grid; gap: 16px; max-width: 1280px; }
section.bloco {
  background: var(--s1); border: 1px solid var(--linha2); border-radius: var(--r);
  padding: clamp(16px, 2.4vw, 24px);
}
section.bloco[hidden] { display: none; }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }

/* No celular os 12 botões empilhados comiam meia tela antes de aparecer qualquer
   número. Viram uma faixa de uma linha só, que rola de lado e prende no item aberto. */
@media (max-width: 900px) {
  /* minmax(0,1fr): sem isso a faixa de navegacao (flex nowrap) vira o minimo da
     coluna e empurra a pagina inteira para ~1950px de largura. */
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    min-width: 0;
    position: sticky; top: 0; z-index: 20; height: auto; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--linha2);
    background: color-mix(in srgb, var(--bk) 86%, transparent);
    backdrop-filter: blur(12px);
  }
  .lateral .topo-lateral { display: none; }
  .lateral .loja { padding: 10px 14px; border-bottom: 0; }
  .lateral nav {
    display: flex; flex-wrap: nowrap; gap: 6px; padding: 0 14px 10px;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .lateral nav::-webkit-scrollbar { display: none; }
  /* O nome do grupo vira um risco: separa sem ocupar linha. */
  .lateral .grupo {
    flex: none; align-self: center; width: 1px; height: 18px; margin: 0 3px; padding: 0;
    background: var(--linha); overflow: hidden; text-indent: -999px;
  }
  .lateral .grupo:first-of-type { display: none; }
  .lateral nav button {
    flex: none; width: auto; min-height: 42px; border-left: 0; border-radius: 999px;
    padding: 8px 14px; white-space: nowrap; scroll-snap-align: center;
    border: 1px solid var(--linha2); background: var(--s1);
  }
  .lateral nav button.on {
    border-left: 0; border-color: color-mix(in srgb, var(--y) 60%, transparent);
    background: color-mix(in srgb, var(--y) 13%, var(--s2));
  }
  .lateral .rodape-lateral { display: none; }
  /* Duas barras grudadas no topo brigam entre si: só a navegação fica. */
  .barra { position: static; padding: 12px 16px; }
  .barra h1 { font-size: 1.08rem; }
  .conteudo { padding: 14px 14px calc(56px + env(safe-area-inset-bottom)); gap: 12px; }
  section.bloco { padding: 16px 14px; }
}

/* ---------- formulário ---------- */
.campo {
  display: grid; gap: 4px; font-size: .71rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); font-weight: 600;
}
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: .95rem; letter-spacing: 0; text-transform: none;
  color: var(--tx); background: var(--s2); border: 1px solid var(--linha);
  border-radius: var(--r-sm); padding: 9px 11px; width: 100%; min-width: 0;
}
.campo textarea { min-height: 120px; resize: vertical; font-size: .88rem; }
.campo small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dim); font-size: .75rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--y); outline-offset: 2px;
}
input[type=file] { font-size: .8rem; color: var(--mu); }

/* ---------- botões ---------- */
.b {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--linha); background: var(--s2); color: var(--tx);
  border-radius: var(--r-sm); padding: 9px 15px;
}
.b:hover:not(:disabled) { border-color: #3a3a3a; }
.b.y { background: var(--y); color: var(--y-ink); border-color: var(--y); }
.b.y:hover:not(:disabled) { filter: brightness(1.07); }
.b.sm { padding: 5px 10px; font-size: .78rem; }
.b.largo { width: 100%; padding: 11px 15px; }
.b:disabled { opacity: .45; cursor: default; }
.b.link { background: transparent; border-color: transparent; color: var(--mu); padding: 5px 8px; }
.b.link:hover { color: var(--tx); text-decoration: underline; }

.apagar { background: transparent; border: none; color: var(--dim); cursor: pointer; font-size: 1.05rem; padding: 2px 6px; line-height: 1; }
.apagar:hover { color: var(--bad); }

/* ---------- indicadores ---------- */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.kpi div { background: var(--s2); border-radius: var(--r-sm); padding: 12px 14px; }
.kpi b {
  display: block; font-family: var(--display); font-weight: 800; font-size: 1.45rem;
  letter-spacing: -.02em; color: var(--y); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.kpi b.bad { color: var(--bad); } .kpi b.good { color: var(--good); } .kpi b.warn { color: var(--warn); }
.kpi span { font-size: .78rem; color: var(--mu); }

.selo {
  display: inline-block; font-size: .69rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--linha); color: var(--mu); white-space: nowrap;
}
.selo.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.selo.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.selo.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.selo.y { color: var(--y-ink); background: var(--y); border-color: var(--y); }

/* ---------- painel ---------- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 0; }
.cartoes .kpi-cartao { padding: 4px 22px; border-left: 1px solid var(--linha2); }
.cartoes .kpi-cartao:first-child { border-left: 0; padding-left: 4px; }
.kpi-cartao .rotulo { font-size: .8rem; color: var(--mu); margin-bottom: 4px; }
.kpi-cartao .valor {
  font-family: var(--display); font-weight: 800; font-size: 1.62rem; letter-spacing: -.025em;
  line-height: 1.1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.kpi-cartao .valor.bad { color: var(--bad); }
.kpi-cartao .valor.good { color: var(--good); }
.kpi-cartao .valor.warn { color: var(--warn); }
/* .nota global é caixa com borda; dentro do cartão é só uma legenda. */
.kpi-cartao .nota { font-size: .75rem; color: var(--dim); margin: 3px 0 0; border: 0; padding: 0; max-width: none; }
.variacao { font-family: var(--corpo); font-size: .8rem; font-weight: 600; }
.variacao.sobe { color: var(--good); }
.variacao.desce { color: var(--bad); }

.cascata { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 4px; }
.cascata .item { display: flex; align-items: flex-start; gap: 11px; }
.cascata .sinal {
  width: 27px; height: 27px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--mono); font-size: .9rem; font-weight: 500;
}
.cascata .sinal.menos { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.cascata .sinal.mais { background: color-mix(in srgb, var(--y) 16%, transparent); color: var(--y); }
.cascata .sinal.igual { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.cascata .item .rotulo { font-size: .82rem; color: var(--mu); }
.cascata .item .n {
  font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cascata .item .n.forte { color: var(--y); }
.cascata .item .n.ruim { color: var(--bad); }
.cascata .item small { display: block; font-size: .72rem; color: var(--dim); font-family: var(--mono); }

.gfx { width: 100%; height: auto; display: block; margin-top: 6px; }
.gfx .eixo { stroke: var(--linha); stroke-width: 1; }
.gfx .malha { stroke: var(--linha2); stroke-width: 1; }
.gfx .rotulo { fill: var(--dim); font-family: var(--mono); font-size: 9px; }
.gfx .barra { fill: var(--y); }
.gfx .barra.secundaria { fill: color-mix(in srgb, var(--y) 38%, transparent); }
.gfx .linha-abc { stroke: var(--y); stroke-width: 2; fill: none; }
.gfx .area-abc { fill: color-mix(in srgb, var(--y) 14%, transparent); }
.gfx .corte { stroke: var(--good); stroke-width: 1; stroke-dasharray: 4 3; }
.gfx .ponto { fill: var(--y); }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .76rem; color: var(--mu); margin-top: 8px; }
.legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }

.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }

/* ---------- organização do cardápio ---------- */
.cat-bloco { background: var(--s2); border-radius: var(--r-sm); padding: 14px 16px; margin-top: 10px; }
.cat-bloco .cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cat-bloco .cabeca h4 { display: flex; align-items: center; gap: 9px; }
.cat-bloco .cabeca .ordem {
  font-family: var(--mono); font-size: .72rem; color: var(--y-ink); background: var(--y);
  border-radius: 5px; padding: 1px 6px;
}
.cat-bloco .cabeca span { font-family: var(--mono); font-size: .75rem; color: var(--dim); }
.cat-bloco .por-que { font-size: .8rem; color: var(--dim); margin-top: 4px; }
.cat-bloco ol { list-style: none; display: grid; gap: 5px; margin-top: 10px; }
.cat-bloco li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: baseline; font-size: .88rem; }
.cat-bloco li .pos { font-family: var(--mono); font-size: .76rem; color: var(--dim); }
.cat-bloco li .motivo { display: block; font-size: .76rem; color: var(--dim); }
.cat-bloco li .num { font-family: var(--mono); font-size: .78rem; color: var(--mu); white-space: nowrap; }
.ponto-classe { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; }
.ponto-classe.star { background: var(--good); }
.ponto-classe.plow { background: var(--y); }
.ponto-classe.puzzle { background: var(--warn); }
.ponto-classe.dog { background: var(--bad); }

/* ---------- tabelas ---------- */
.tbl { overflow-x: auto; margin-top: 8px; }
table { border-collapse: collapse; width: 100%; font-size: .86rem; min-width: 640px; }
th {
  text-align: left; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--y); padding: 8px; border-bottom: 1px solid var(--linha); white-space: nowrap;
}
td { padding: 6px 8px; border-bottom: 1px solid var(--linha2); vertical-align: middle; color: var(--mu); }
td:first-child { color: var(--tx); }
td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
td input, td select {
  font: inherit; font-size: .86rem; color: var(--tx); background: var(--s2);
  border: 1px solid var(--linha); border-radius: 5px; padding: 5px 7px; width: 100%; min-width: 70px;
}
td input.n { text-align: right; font-family: var(--mono); }
td input.w { min-width: 150px; }
tr.estimado td.custo input { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }

/* ---------- avisos ---------- */
.nota {
  font-size: .85rem; color: var(--mu); border: 1px solid var(--linha2);
  border-radius: var(--r-sm); padding: 11px 13px; margin-top: 12px; max-width: 76ch;
}
.nota.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--tx); }
.nota.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); color: var(--tx); }

/* ---------- cartões ---------- */
.cartao { background: var(--s2); border-radius: var(--r-sm); padding: 15px 17px; }
.cartao h4 { margin-bottom: 6px; }
.cartao .preco { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--y); letter-spacing: -.02em; }
.cartao ul { list-style: none; display: grid; gap: 4px; font-size: .88rem; color: var(--mu); margin-top: 6px; }
.cartao ul li::before { content: "\2192 "; color: var(--y); }
.cartao .meta { font-family: var(--mono); font-size: .73rem; color: var(--dim); margin-top: 8px; }

.caixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 10px; }
.caixa { background: var(--s2); border-radius: var(--r-sm); padding: 17px; display: grid; gap: 9px; align-content: start; }
.caixa p { font-size: .85rem; }

/* ---------- matriz de cardápio ---------- */
.matriz { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.matriz .q { border-radius: var(--r-sm); padding: 13px 15px; background: var(--s2); border-top: 3px solid var(--linha); }
.matriz .q.star { border-top-color: var(--good); }
.matriz .q.plow { border-top-color: var(--y); }
.matriz .q.puzzle { border-top-color: var(--warn); }
.matriz .q.dog { border-top-color: var(--bad); }
.matriz .acao { font-size: .78rem; color: var(--dim); margin: 3px 0 9px; }
.matriz ul { list-style: none; font-size: .86rem; display: grid; gap: 3px; }
.matriz li { display: flex; justify-content: space-between; gap: 8px; }
.matriz li span { font-family: var(--mono); color: var(--mu); font-size: .77rem; }

/* ---------- auditoria ---------- */
.achados { display: grid; gap: 8px; margin-top: 12px; }
.achados .a {
  display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
  background: var(--s2); border-radius: var(--r-sm); padding: 11px 13px; font-size: .9rem; color: var(--mu);
}
.achados .ic {
  font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.achados .alta .ic { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }
.achados .media .ic { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.achados .ok .ic { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.achados em { color: var(--dim); font-style: normal; font-family: var(--mono); font-size: .77rem; display: block; margin-top: 3px; }

/* ---------- publicar ---------- */
.difs { display: grid; gap: 8px; margin-top: 12px; }
.dif {
  background: var(--s2); border-radius: var(--r-sm); padding: 11px 13px;
  display: grid; grid-template-columns: 26px 1fr; gap: 11px; align-items: start; font-size: .88rem; color: var(--mu);
}
.dif input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--y); }
.dif .de { color: var(--dim); text-decoration: line-through; }
.dif .para { color: var(--good); font-weight: 600; }
.dif .pv { font-family: var(--mono); font-size: .77rem; margin-top: 4px; }

pre.saida {
  font-family: var(--mono); font-size: .79rem; white-space: pre-wrap; background: var(--s2);
  border-radius: var(--r-sm); padding: 15px; color: var(--tx); max-height: 56vh; overflow: auto; margin-top: 10px;
}

/* ---------- entrar / criar conta ---------- */
.porta { min-height: 100dvh; display: grid; place-items: center; padding: 28px 18px; }
.porta .cartao-login {
  width: 100%; max-width: 430px; background: var(--s1); border: 1px solid var(--linha2);
  border-radius: var(--r); padding: clamp(24px, 5vw, 36px); display: grid; gap: 15px;
}
.porta .marca { font-size: 1.15rem; }
.porta h1 { font-size: 1.6rem; }
.porta .alternar { text-align: center; font-size: .85rem; color: var(--mu); }
.porta .recado { font-size: .86rem; border-radius: var(--r-sm); padding: 10px 12px; display: none; }
.porta .recado.erro { display: block; background: color-mix(in srgb, var(--bad) 14%, transparent); color: #ffb4b4; }
.porta .recado.ok { display: block; background: color-mix(in srgb, var(--good) 14%, transparent); color: #a8e7c2; }
.porta .rodape { text-align: center; font-size: .74rem; color: var(--dim); }
.porta .lista { list-style: none; display: grid; gap: 5px; font-size: .86rem; color: var(--mu); }
.porta .lista li::before { content: "\2192 "; color: var(--y); }

/* ---------- avisos globais ---------- */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--s3); border: 1px solid var(--linha); color: var(--tx);
  border-radius: 999px; padding: 9px 18px; font-size: .85rem; z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.toast.ver { opacity: 1; }
.toast.erro { border-color: color-mix(in srgb, var(--bad) 55%, transparent); }

.rodape-app {
  max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px) 40px;
  font-size: .74rem; color: var(--dim); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

@media (max-width: 640px) {
  .matriz { grid-template-columns: 1fr; }
  .topo { padding-bottom: 6px; }
}


/* =======================================================================
   Comanda, movimento e telas estreitas
   ---------------------------------------------------------------------
   A referência é a comanda que sai da impressora térmica: o dono já lê
   esse papel todo dia. Ela aparece em UM lugar — a cascata do faturamento,
   que é literalmente o extrato de quanto sobra do pedido. O resto fica quieto.
   ======================================================================= */

::selection { background: var(--y); color: var(--y-ink); }
* { scrollbar-width: thin; scrollbar-color: var(--linha) transparent; }

/* ---------- a comanda ---------- */
.cascata {
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
  background: var(--s2);
  border-radius: var(--r-sm);
  padding: 20px 16px 22px;
  margin-top: 16px;
}
/* A serrilha é desenhada por cima da borda, na cor do bloco de trás. */
.cascata::before,
.cascata::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px; pointer-events: none;
  background: radial-gradient(circle at 6px 0, var(--s1) 5.5px, transparent 6px) repeat-x;
  background-size: 14px 9px;
}
.cascata::before { top: 0; }
.cascata::after { bottom: 0; transform: scaleY(-1); }

.cascata .item {
  display: grid; grid-template-columns: 27px minmax(0, 1fr);
  gap: 11px; align-items: baseline; padding: 7px 0;
}
.cascata .item > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px; align-items: baseline;
}
/* Rótulo e valor ligados por pontilhado, como no papel. */
.cascata .item .rotulo { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.cascata .item .rotulo::after {
  content: ""; flex: 1 1 auto; min-width: 14px;
  border-bottom: 1px dotted var(--linha); transform: translateY(-4px);
}
.cascata .item .n {
  font-family: var(--mono); font-weight: 500; font-size: 1rem; letter-spacing: -.01em;
}
.cascata .item small { grid-column: 1 / -1; margin-top: 1px; }
/* Bruto e sobra são as duas linhas que fecham a conta. */
.cascata .item:first-child,
.cascata .item:last-child { padding: 11px 0; }
.cascata .item:last-child { border-top: 1px solid var(--linha); margin-top: 5px; }
.cascata .item:last-child .n { font-size: 1.2rem; font-weight: 600; }

/* ---------- tabela em tela estreita ---------- */
@media (max-width: 760px) {
  table { min-width: 560px; }
  .tbl th:first-child, .tbl td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--s1);
  }
  .tbl td:first-child { box-shadow: 1px 0 0 var(--linha2); }
  .kpi { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .cartoes { grid-template-columns: 1fr 1fr; }
  .cartoes .kpi-cartao { padding: 10px 12px; border-left: 0; border-top: 1px solid var(--linha2); }
  .cartoes .kpi-cartao:first-child { padding-left: 12px; }
  .kpi-cartao .valor { font-size: 1.32rem; }
  .duas { grid-template-columns: 1fr; }
  pre.saida { font-size: .72rem; }
}
/* Sombra nas bordas enquanto houver tabela fora da tela. */
.tbl {
  background:
    linear-gradient(to right, var(--s1) 34%, transparent) left center / 26px 100% no-repeat local,
    linear-gradient(to left, var(--s1) 34%, transparent) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .42), transparent) left center / 13px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .42), transparent) right center / 13px 100% no-repeat scroll;
}

/* ---------- abertura de tela ---------- */
@keyframes cc-entra { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
section.bloco:not([hidden]) { animation: cc-entra .34s cubic-bezier(.2, .7, .3, 1) both; }
section.bloco:not([hidden]):nth-of-type(2) { animation-delay: .05s; }
section.bloco:not([hidden]):nth-of-type(3) { animation-delay: .1s; }
section.bloco:not([hidden]):nth-of-type(4) { animation-delay: .15s; }

/* A barra é horizontal: ela cresce da esquerda, uma depois da outra, e o número
   só aparece quando a barra dele chega. O atraso de cada uma vem do app.js. */
@keyframes cc-cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gfx .barra {
  transform-box: fill-box; transform-origin: left center;
  animation: cc-cresce .55s cubic-bezier(.2, .8, .3, 1) both;
  transition: fill .16s;
}
.gfx .barra:hover { fill: #ffd94f; }
.gfx .valor-barra { animation: cc-entra .35s both; }

@keyframes cc-risca { from { stroke-dashoffset: 3000; } to { stroke-dashoffset: 0; } }
.gfx .linha-abc { stroke-dasharray: 3000; animation: cc-risca 1.1s cubic-bezier(.4, 0, .2, 1) both; }
.gfx .area-abc { animation: cc-entra .6s .5s both; }
.gfx .corte { animation: cc-entra .4s .9s both; }
.gfx .ponto { transform-box: fill-box; transform-origin: center; animation: cc-pinga .34s both; }
@keyframes cc-pinga {
  from { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.5); opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- micro-interação ---------- */
.b { transition: border-color .16s, background .16s, color .16s, filter .16s, transform .07s; }
.b:active:not(:disabled) { transform: translateY(1px); }
.lateral nav button { transition: background .16s, color .16s, border-color .16s; }
.campo input, .campo select, .campo textarea, td input, td select { transition: border-color .15s, background .15s; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #3a3a3a; }
tbody tr { transition: background .14s; }
tbody tr:hover { background: color-mix(in srgb, var(--s2) 55%, transparent); }
.achados .a, .dif { transition: background .16s; }
.achados .a:hover, .dif:hover { background: var(--s3); }
.toast { transform: translate(-50%, 14px); transition: opacity .2s, transform .2s cubic-bezier(.2, .8, .3, 1); }
.toast.ver { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* =======================================================================
   Painel como instrumento
   ---------------------------------------------------------------------
   A faixa de indicadores é a primeira coisa que o dono olha às 15h, entre
   o almoço e a janta. Ela ganha leitura de instrumento: malha fina parada
   atrás, uma varredura que passa uma vez quando a tela abre, e uma barra
   que carrega sob cada número. Nada disso se repete em laço — piscar sem
   motivo cansa quem abre a ferramenta todo dia.
   ======================================================================= */

#t-painel .cartoes {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--y) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--y) 7%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: -1px -1px;
}
#t-painel .cartoes::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -34%; width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--y) 13%, transparent), transparent);
  animation: cc-varre 1.15s .1s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes cc-varre { to { left: 100%; } }

.kpi-cartao { position: relative; }
.kpi-cartao::after {
  content: ""; position: absolute; left: 4px; right: 22px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--y), transparent);
  opacity: .5;
  transform: scaleX(0); transform-origin: left;
  animation: cc-carrega .8s .18s cubic-bezier(.2, .8, .3, 1) both;
}
.cartoes .kpi-cartao:first-child::after { left: 0; }
@keyframes cc-carrega { to { transform: scaleX(1); } }

/* Brilho curto no número: o suficiente pra ele parecer aceso, não pra virar néon. */
#t-painel .kpi-cartao .valor { text-shadow: 0 0 22px color-mix(in srgb, currentColor 22%, transparent); }

/* Fita amarela da seção aberta cresce do meio, em vez de aparecer pronta. */
@media (min-width: 901px) {
  .lateral nav button.on { border-left-color: transparent; position: relative; }
  .lateral nav button.on::before {
    content: ""; position: absolute; left: -2px; top: 5px; bottom: 5px; width: 2px;
    background: var(--y); transform-origin: center;
    animation: cc-fita .3s cubic-bezier(.2, .8, .3, 1) both;
  }
  @keyframes cc-fita { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}


/* =======================================================================
   Vitrine: o cardápio como o cliente vê
   ---------------------------------------------------------------------
   Duas simulações lado a lado, cardápio próprio e iFood, alimentadas pelo
   mesmo cálculo. É onde o dono enxerga o que a reorganização faz: o que
   sobe pra primeira tela e o preço que muda de um canal pro outro.
   ======================================================================= */

.alternador { display: inline-flex; background: var(--s2); border: 1px solid var(--linha); border-radius: 999px; padding: 3px; gap: 3px; }
.alternador button {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--mu); cursor: pointer;
  background: transparent; border: 0; border-radius: 999px; padding: 6px 14px;
  transition: background .16s, color .16s;
}
.alternador button.on { background: var(--y); color: var(--y-ink); }
.alternador button:not(.on):hover { color: var(--tx); }

.vitrines { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 18px; margin-top: 16px; }

.fone {
  background: #0d0d0d; border: 1px solid var(--linha); border-radius: 20px;
  overflow: hidden; max-width: 420px; width: 100%; justify-self: center;
  display: flex; flex-direction: column;
}
.fone .marca-canal {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; font-size: .78rem; font-weight: 600;
  background: var(--s2); border-bottom: 1px solid var(--linha2); color: var(--mu);
}
.fone .marca-canal .selo { font-size: .62rem; }
.fone.ifood .marca-canal { background: #c4121f; color: #fff; border-bottom-color: #a00f1a; }
.fone.ifood .marca-canal .selo { color: #fff; border-color: rgba(255,255,255,.5); }

.fone .capa {
  padding: 16px; display: grid; gap: 3px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--y) 16%, var(--s1)), var(--s1));
}
.fone.ifood .capa { background: linear-gradient(160deg, #2a1113, var(--s1)); }
.fone .capa b { font-family: var(--display); font-size: 1.1rem; letter-spacing: -.02em; }
.fone .capa span { font-size: .74rem; color: var(--dim); font-family: var(--mono); }

.fone .faixa { display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linha2); }
.fone .faixa::-webkit-scrollbar { display: none; }
.fone .faixa span {
  flex: none; font-size: .72rem; font-weight: 600; color: var(--mu);
  border: 1px solid var(--linha); border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
.fone .faixa span.on { background: var(--y); color: var(--y-ink); border-color: var(--y); }
.fone.ifood .faixa span.on { background: #c4121f; color: #fff; border-color: #c4121f; }

.fone .grupo-vit { padding: 12px 14px 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fone .grupo-vit h5 { font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.fone .grupo-vit em { font-style: normal; font-family: var(--mono); font-size: .66rem; color: var(--dim); }

.fone .destaque-vit { padding: 12px 14px; border-bottom: 1px solid var(--linha2); }
.fone .destaque-vit .carrossel { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fone .destaque-vit .carrossel::-webkit-scrollbar { display: none; }
.fone .destaque-vit .cartao-vit { flex: none; width: 118px; }
.fone .destaque-vit .foto-vit { width: 118px; height: 84px; }
.fone .destaque-vit b { display: block; font-size: .76rem; margin-top: 5px; line-height: 1.25; }
.fone .destaque-vit i { font-style: normal; font-family: var(--mono); font-size: .74rem; color: var(--y); }

.vit-item {
  display: grid; grid-template-columns: 1fr 76px; gap: 12px; align-items: start;
  padding: 11px 14px; border-bottom: 1px solid var(--linha2);
  animation: cc-entra .3s both;
}
.vit-item .txt b { display: block; font-size: .84rem; font-weight: 600; line-height: 1.3; }
.vit-item .txt p { font-size: .73rem; color: var(--dim); margin-top: 3px; line-height: 1.35; }
.vit-item .preco-vit { display: block; margin-top: 6px; font-family: var(--mono); font-size: .82rem; color: var(--y); }
.fone.ifood .vit-item .preco-vit { color: #ff8a92; }
.vit-item.fraco { opacity: .45; }
.vit-item .aviso-vit { display: inline-block; margin-top: 5px; font-size: .64rem; color: var(--dim); font-family: var(--mono); }

.foto-vit {
  width: 76px; height: 76px; border-radius: 8px; overflow: hidden; background: var(--s2);
  border: 1px dashed var(--linha); display: grid; place-items: center; cursor: pointer;
  color: var(--dim); font-size: .62rem; text-align: center; padding: 4px; line-height: 1.2;
  transition: border-color .16s, color .16s;
}
.foto-vit:hover { border-color: var(--y); color: var(--y); }
.foto-vit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-vit.tem { border-style: solid; border-color: var(--linha2); }

.fone .vazio-vit { padding: 22px 16px; font-size: .82rem; color: var(--dim); }

@media (max-width: 760px) {
  .vitrines { grid-template-columns: 1fr; }
}