/* Comanda — mundo "Porcelana & esmalte".
   A louça é o sistema: fundo de porcelana fria, superfícies vidradas brancas, um azul-cobalto
   de esmalte só para a ação principal e o "ao vivo", e o estado em cores de esmalte cerâmico
   (celadon = pronto/ok, mel = preparando/atenção, sangue-de-boi = atraso/perigo).
   Anéis concêntricos (a xícara vista de cima) marcam quantidade, etapas e mesas. */

@font-face { font-family: "Hanken Grotesk"; src: url(/static/fontes/hanken.woff2) format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(/static/fontes/bodoni.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(/static/fontes/bodoni-italico.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }

:root {
  --porcelana: #eef0f1;
  --louca: #ffffff;
  --biscoito: #e4e7ea;
  --tinta: #12151c;
  --tinta-2: #2b313d;
  --fraco: #586070;
  --fio: #d6dade;
  --fio-forte: #b6bcc5;
  --cobalto: #1d3b8f;
  --cobalto-escuro: #142b6c;
  --cobalto-lavado: #e2e8f6;
  --celadon: #2c6a52;
  --celadon-lavado: #dcede4;
  --mel: #8a5207;
  --mel-forte: #d39a2c;
  --mel-lavado: #f7ebd2;
  --sangue: #a32a2a;
  --sangue-lavado: #f7e1df;

  --sombra: 0 1px 2px rgb(18 21 28 / .05), 0 10px 28px -12px rgb(18 21 28 / .18);
  --sombra-alta: 0 2px 8px rgb(18 21 28 / .08), 0 28px 70px -18px rgb(18 21 28 / .35);
  --raio: 20px;
  --raio-p: 12px;
  --raio-m: 16px;
  --raio-folha: 28px;
  /* escala de tipos: tudo sai daqui */
  --t-3xs: 0.8rem;
  --t-2xs: 0.88rem;
  --t-xs: 0.95rem;
  --t-s: 1rem;
  --t-m: 1.1rem;
  --t-l: 1.2rem;
  --t-xl: 1.5rem;
  --t-2xl: 1.8rem;
  --t-3xl: 2.1rem;
  --t-4xl: 2.4rem;
  --t-display: clamp(2.4rem, 6vw, 3.6rem);
  --ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --suave: cubic-bezier(.16, 1, .3, 1);

  /* nomes antigos, para qualquer regra que ainda os use */
  --bg: var(--porcelana); --painel: var(--louca); --card: var(--louca); --borda: var(--fio);
  --txt: var(--tinta); --acento: var(--cobalto); --ok: var(--celadon); --alerta: var(--mel);

  /*ICONES:INI*/
  --i-mais: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E");
  --i-menos: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14%27%2F%3E%3C%2Fsvg%3E");
  --i-lixo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h16M10%2011v6M14%2011v6M6%207l1%2012a2%202%200%200%200%202%202h6a2%202%200%200%200%202-2l1-12M9%207V4h6v3%27%2F%3E%3C%2Fsvg%3E");
  --i-sino: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%2016v-5a6%206%200%200%201%2012%200v5l1.5%202h-15zM10%2021h4%27%2F%3E%3C%2Fsvg%3E");
  --i-conta: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h12v18l-3-2-3%202-3-2-3%202zM9%208h6M9%2012h6M9%2016h3%27%2F%3E%3C%2Fsvg%3E");
  --i-relogio: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Cpath%20d%3D%27M12%207.5V12l3%202%27%2F%3E%3C%2Fsvg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012.5l4.5%204.5L19%207%27%2F%3E%3C%2Fsvg%3E");
  --i-voltar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15%205l-7%207%207%207%27%2F%3E%3C%2Fsvg%3E");
  --i-seta: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14M13%206l6%206-6%206%27%2F%3E%3C%2Fsvg%3E");
  --i-lapis: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h4L19%209l-4-4L4%2016zM13%207l4%204%27%2F%3E%3C%2Fsvg%3E");
  --i-alerta: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204l9%2016H3zM12%2010v4M12%2017v.5%27%2F%3E%3C%2Fsvg%3E");
  --i-som-off: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%209.5v5h3.5L12%2018V6L7.5%209.5zM16%209.5l5%205M21%209.5l-5%205%27%2F%3E%3C%2Fsvg%3E");
  --i-som-on: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%209.5v5h3.5L12%2018V6L7.5%209.5zM15.5%209a4%204%200%200%201%200%206M18.5%206.5a7.5%207.5%200%200%201%200%2011%27%2F%3E%3C%2Fsvg%3E");
  --i-impressora: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%209V3h10v6M7%2017H4v-7h16v7h-3M7%2014h10v7H7z%27%2F%3E%3C%2Fsvg%3E");
  --i-desfazer: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2014L4%209l5-5M4%209h10.5a5.5%205.5%200%200%201%200%2011H11%27%2F%3E%3C%2Fsvg%3E");
  --i-iniciar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%205.5v13L18.5%2012z%27%2F%3E%3C%2Fsvg%3E");
  --i-esgotado: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Cpath%20d%3D%27M6%206l12%2012%27%2F%3E%3C%2Fsvg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Cpath%20d%3D%27M12%2011v5M12%208v.5%27%2F%3E%3C%2Fsvg%3E");
  --i-sair: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%204h5v16h-5M10%208l-4%204%204%204M6%2012h10%27%2F%3E%3C%2Fsvg%3E");
  --i-chama: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203c3.5%204%205.5%206.5%205.5%2010.5a5.5%205.5%200%200%201-11%200c0-2.3%201-4%202.3-5.5.2%202%201.2%203.2%202.4%203.6C10.6%208.5%2010.4%206%2012%203z%27%2F%3E%3C%2Fsvg%3E");
  --i-xicara: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%209h12v5a5%205%200%200%201-5%205H9a5%205%200%200%201-5-5zM16%2010.5h1.5a2.5%202.5%200%200%201%200%205H16M7%203.5c-.6%201%20.6%201.8%200%203M11%203.5c-.6%201%20.6%201.8%200%203%27%2F%3E%3C%2Fsvg%3E");
  --i-cadeado: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%2710.5%27%20width%3D%2714%27%20height%3D%2710%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2010.5V8a4%204%200%200%201%208%200v2.5%27%2F%3E%3C%2Fsvg%3E");
  --i-estrela: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.5l2.2%205.3%205.6.4-4.3%203.6%201.4%205.5L12%2015.4l-4.9%202.9%201.4-5.5-4.3-3.6%205.6-.4z%27%2F%3E%3C%2Fsvg%3E");
  --i-camera: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%208.5h3.2L9%206h6l1.8%202.5H20V19H4z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2713.5%27%20r%3D%273.4%27%2F%3E%3C%2Fsvg%3E");
  --i-pessoa: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278.5%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M5%2020a7%207%200%200%201%2014%200%27%2F%3E%3C%2Fsvg%3E");
  --i-bandeja: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2018h18M5%2018a7%207%200%200%201%2014%200M12%209V7M10.5%207h3%27%2F%3E%3C%2Fsvg%3E");
  /*ICONES:FIM*/

  font-family: var(--ui);
  color-scheme: light;
  accent-color: var(--cobalto);
  caret-color: var(--cobalto);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--porcelana); color: var(--tinta); line-height: 1.45; -webkit-font-smoothing: antialiased; }
::selection { background: var(--cobalto-lavado); color: var(--cobalto-escuro); }
* { scrollbar-width: thin; scrollbar-color: var(--fio-forte) transparent; }
h1, h2, h3 { text-wrap: balance; }
[hidden] { display: none !important; }
a { color: var(--cobalto); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--cobalto) 45%, transparent); outline-offset: 2px; }

/* ---------- ícones (desenhados, um só traço) ---------- */
.ic, [data-ic]::before { display: inline-block; flex: none; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -.2em; }
[data-ic]::before { content: ""; }
.ic-sino { --i: var(--i-sino); } .ic-voltar { --i: var(--i-voltar); } .ic-conta { --i: var(--i-conta); }
.ic-mais { --i: var(--i-mais); } .ic-impressora { --i: var(--i-impressora); } .ic-sair { --i: var(--i-sair); }

/* ---------- botões: louça arredondada ---------- */
button {
  font: inherit; color: var(--louca); background: var(--cobalto);
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  padding: .7em 1.25em; min-height: 44px; font-weight: 600; letter-spacing: .005em;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  touch-action: manipulation; transition: background-color .2s, box-shadow .2s, transform .15s var(--suave), color .2s, border-color .2s;
}
button:hover { background: var(--cobalto-escuro); }
button:active { transform: scale(.97); }
button:disabled { opacity: .45; cursor: default; transform: none; }
button.sec { background: var(--louca); color: var(--tinta); border-color: var(--fio-forte); }
button.sec:hover { border-color: var(--tinta-2); background: var(--louca); }
button.perigo { background: var(--sangue); color: var(--louca); }
button.perigo:hover { background: color-mix(in srgb, var(--sangue) 82%, var(--tinta)); }

input, select, textarea {
  font: inherit; color: var(--tinta); background: var(--louca);
  border: 1px solid var(--fio-forte); border-radius: var(--raio-p); padding: .55em .75em;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cobalto); box-shadow: 0 0 0 3px var(--cobalto-lavado); }
input::placeholder, textarea::placeholder { color: var(--fraco); }
input[type=checkbox] { width: 1.3rem; height: 1.3rem; accent-color: var(--cobalto); }

/* ---------- faixas de estado (sem conexão, som) ---------- */
.faixa { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: .85rem 1.2rem; font-weight: 700; text-align: center; border: 0; border-radius: 0; min-height: 0; }
.faixa::before { content: ""; width: 1.25em; height: 1.25em; flex: none; background: currentColor; -webkit-mask: var(--i-alerta) center / contain no-repeat; mask: var(--i-alerta) center / contain no-repeat; }
.faixa-erro { background: var(--sangue); color: var(--louca); }
.faixa-alerta { background: var(--mel-forte); color: var(--tinta); cursor: pointer; }
.faixa-alerta:hover { background: color-mix(in srgb, var(--mel-forte) 90%, var(--tinta)); }
.faixa-alerta::before { -webkit-mask-image: var(--i-som-off); mask-image: var(--i-som-off); }

/* ---------- aviso rápido (toast) ---------- */
#aviso {
  z-index: 60; position: fixed; left: 50%; bottom: 1.5rem; max-width: calc(100vw - 32px);
  transform: translate(-50%, 160%); opacity: 0;
  background: var(--tinta); color: var(--porcelana); padding: .85rem 1.4rem; border-radius: 999px;
  font-weight: 600; text-align: center; box-shadow: var(--sombra-alta);
  transition: transform .45s var(--suave), opacity .3s;
}
#aviso.on { transform: translate(-50%, 0); opacity: 1; }
#aviso.erro { background: var(--sangue); color: var(--louca); }

/* ---------- anéis: a xícara vista de cima ---------- */
.aneis {
  width: 132px; aspect-ratio: 1; border-radius: 50%; position: relative; margin: 0 auto;
  background:
    radial-gradient(circle closest-side, var(--cobalto) 0 47%, transparent calc(47% + .6px)),
    radial-gradient(circle closest-side, transparent 0 63%, var(--fio-forte) 63% calc(63% + 1px), transparent calc(63% + 1.6px) calc(99% - 1px), var(--fio-forte) calc(99% - 1px) 99%, transparent 99.6%);
}

/* ---------- início da equipe ---------- */
body.inicio { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 2rem 16px; }
.inicio-caixa { width: min(760px, 100%); text-align: center; }
.inicio-caixa .aneis { width: 96px; margin-bottom: 1.6rem; }
.inicio h1 { font-family: var(--display); font-weight: 500; font-size: var(--t-display); letter-spacing: -.02em; line-height: 1.05; margin: 0 0 .4rem; }
.inicio-caixa > p { margin: 0 auto; max-width: 52ch; }
.inicio .links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin: 2.2rem 0 1.6rem; text-align: left; }
.grande {
  display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem 1.4rem 1.4rem; min-height: 132px;
  background: var(--louca); color: var(--tinta); border: 1px solid var(--fio); border-radius: var(--raio);
  text-decoration: none; box-shadow: var(--sombra); transition: transform .3s var(--suave), box-shadow .3s, border-color .2s;
}
.grande b { font-size: var(--t-m); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.grande b::after { content: ""; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--i-seta) center / contain no-repeat; mask: var(--i-seta) center / contain no-repeat; opacity: .5; transition: transform .3s var(--suave), opacity .2s; }
.grande span { color: var(--fraco); font-size: var(--t-xs); }
.grande:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--fio-forte); }
.grande:hover b::after { transform: translateX(3px); opacity: 1; }
.grande:not(.sec) { background: var(--cobalto); color: var(--louca); border-color: var(--cobalto); }
.grande:not(.sec) span { color: var(--cobalto-lavado); }
.grande:not(.sec) b::after { opacity: .9; }
.fraco { color: var(--fraco); }

/* ---------- login ---------- */
body.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login form {
  width: min(380px, 100%); display: flex; flex-direction: column; gap: .9rem; text-align: center;
  background: var(--louca); border: 1px solid var(--fio); border-radius: var(--raio-folha); padding: 2.4rem 2rem 1.6rem; box-shadow: var(--sombra-alta);
}
.login .aneis { width: 84px; margin-bottom: .6rem; }
.login h1 { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--t-4xl); letter-spacing: -.02em; line-height: 1; }
.login p { margin: 0; color: var(--fraco); }
.login input { min-height: 52px; text-align: center; font-size: var(--t-m); margin-top: .6rem; border-radius: 999px; }
.login button { min-height: 52px; font-size: var(--t-s); }
#erro { color: var(--sangue); min-height: 1.4em; font-weight: 600; }

/* ---------- cabeçalho comum: admin e caixa ---------- */
body.admin header, body.caixa header {
  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center;
  padding: 1rem clamp(16px, 3vw, 2rem); background: var(--louca); border-bottom: 1px solid var(--fio);
  position: sticky; top: 0; z-index: 10;
}
body.admin header h1, body.caixa header h1 { margin: 0; flex: 1; font-family: var(--display); font-weight: 500; font-size: var(--t-2xl); letter-spacing: -.015em; line-height: 1.1; }
body.admin header a, body.caixa header a { color: var(--tinta-2); font-weight: 600; text-decoration: none; padding: .5em .2em; }
body.admin header a:hover, body.caixa header a:hover { color: var(--cobalto); }
body.admin main, body.caixa main { padding: 1.6rem clamp(16px, 3vw, 2rem) 5rem; max-width: 1200px; margin: auto; }
body.admin h2, body.caixa h2 { font-family: var(--display); font-weight: 500; font-size: var(--t-2xl); letter-spacing: -.015em; margin: 0 0 1rem; }
body.caixa h3 { font-size: var(--t-s); margin: 2.4rem 0 .6rem; }

/* tabelas: livro-caixa de linhas finas */
body.admin table, body.caixa table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
body.admin th, body.caixa th { text-align: left; color: var(--fraco); font-weight: 600; font-size: var(--t-3xs); letter-spacing: .06em; text-transform: uppercase; padding: .5rem .5rem .6rem; border-bottom: 1px solid var(--fio-forte); }
body.admin td, body.caixa td { padding: .55rem .5rem; border-bottom: 1px solid var(--fio); vertical-align: middle; }
body.caixa td.n, body.caixa th.n { text-align: right; }

/* ---------- admin ---------- */
body.admin section { background: var(--louca); border: 1px solid var(--fio); border-radius: var(--raio); padding: 1.6rem clamp(1rem, 2.5vw, 1.8rem) 1.4rem; margin-bottom: 1.4rem; box-shadow: var(--sombra); }
body.admin td input[type=text] { width: 100%; }
body.admin input.desc { margin-top: .35rem; font-size: var(--t-2xs); color: var(--fraco); }
body.admin .curto { width: 6.5em; }
body.admin tr.inativo td { opacity: .5; }
body.admin tr.inativo td:nth-last-child(2) { opacity: 1; }
body.admin .linha { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
body.admin .filtro { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin-bottom: .9rem; color: var(--tinta-2); font-weight: 600; }
body.admin .filtro small { font-weight: 400; color: var(--fraco); flex-basis: 100%; }
body.admin td a { font-weight: 600; margin-right: .3rem; }
body.admin td button.sec { min-height: 40px; padding: .45em 1em; font-size: var(--t-xs); }
body.admin header { flex-wrap: wrap; }
.dica-salvar { color: var(--fraco); font-size: var(--t-2xs); flex-basis: 100%; order: 3; }
body.admin input, body.admin select { min-height: 44px; }
body.admin .campo-salvo { border-color: var(--celadon) !important; box-shadow: 0 0 0 3px var(--celadon-lavado) !important; }
body.admin .campo-erro { border-color: var(--sangue) !important; box-shadow: 0 0 0 3px var(--sangue-lavado) !important; }
body.admin input#nome-loja { width: min(100%, 24rem); }
@media (max-width: 760px) {
  body.admin table, body.admin tbody, body.admin tr, body.admin td { display: block; }
  body.admin thead { display: none; }
  body.admin tr { padding: .8rem 0; border-bottom: 1px solid var(--fio-forte); }
  body.admin td { border: 0; padding: .2rem 0; }
  body.admin td[data-rotulo]:not([data-rotulo=""])::before { content: attr(data-rotulo); display: block; color: var(--fraco); font-size: var(--t-3xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin: .5rem 0 .25rem; }
  body.admin td input[type=text], body.admin select { width: 100%; }
}

/* ---------- controles compartilhados: botões só de ícone e chave liga/desliga ---------- */
.icone { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; background: transparent; color: var(--tinta-2); border: 1px solid transparent; }
.icone:hover { background: var(--louca); border-color: var(--fio-forte); }
.icone:disabled { opacity: .22; }
.icone::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i-voltar) center / contain no-repeat; mask: var(--i-voltar) center / contain no-repeat; }
.icone.subir::before { transform: rotate(90deg); }
.icone.descer::before { transform: rotate(-90deg); }
.icone.lixo { color: var(--sangue); }
.icone.lixo::before { -webkit-mask-image: var(--i-lixo); mask-image: var(--i-lixo); }
.chave { display: flex; align-items: center; gap: .7rem; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--tinta-2); }
.chave input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 50px; height: 30px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--fio-forte); cursor: pointer; transition: background-color .25s; }
.chave input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--louca); box-shadow: 0 1px 3px rgb(18 21 28 / .3); transition: transform .3s var(--suave); }
.chave input:checked { background: var(--celadon); }
.chave input:checked::after { transform: translateX(20px); }
.chave input:focus { box-shadow: none; }
.chave input:focus-visible { outline: 3px solid color-mix(in srgb, var(--cobalto) 45%, transparent); outline-offset: 2px; }

/* atalho do admin para o editor do cardápio */
.abrir-editor { display: flex; align-items: center; gap: 1.2rem; padding: 1.3rem 1.4rem; border-radius: var(--raio); background: var(--cobalto); color: var(--louca); text-decoration: none; box-shadow: var(--sombra); transition: transform .3s var(--suave), box-shadow .3s; }
.abrir-editor:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.abrir-editor div { flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.abrir-editor b { font-size: var(--t-l); }
.abrir-editor span { color: var(--cobalto-lavado); font-size: var(--t-xs); max-width: 62ch; }
.abrir-editor::after { content: ""; width: 1.6em; height: 1.6em; flex: none; background: currentColor; -webkit-mask: var(--i-seta) center / contain no-repeat; mask: var(--i-seta) center / contain no-repeat; }

/* ---------- caixa ---------- */
body.caixa #imprimir::before { content: ""; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--i-impressora) center / contain no-repeat; mask: var(--i-impressora) center / contain no-repeat; }
body.caixa .controles .filtro { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--tinta-2); }
body.caixa #titulo { margin: 1.4rem 0 .4rem; font-size: clamp(var(--t-2xl), 4vw, var(--t-4xl)); }
body.caixa #titulo::first-letter { text-transform: uppercase; }
/* resumo: uma faixa de livro-caixa — total do dia em destaque, formas de pagamento em colunas */
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 1.2rem 0 .5rem; background: var(--louca); border: 1px solid var(--fio); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.resumo div { padding: 1.2rem 1.4rem 1.3rem; border-left: 1px solid var(--fio); }
.resumo div:first-child { border-left: 0; }
.resumo div.geral { background: var(--cobalto); color: var(--louca); }
.resumo span { color: var(--tinta-2); font-size: var(--t-xs); font-weight: 600; display: block; }
.resumo b { font-family: var(--display); font-weight: 500; font-size: var(--t-2xl); display: block; margin: .35rem 0 .15rem; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.resumo small { color: var(--fraco); font-size: var(--t-2xs); }
.resumo .geral span, .resumo .geral small { color: var(--cobalto-lavado); }
.resumo .geral b { font-size: var(--t-4xl); }
body.caixa .aviso-aberta { display: flex; gap: .6rem; align-items: center; color: var(--mel); background: var(--mel-lavado); padding: .75rem 1rem; border-radius: var(--raio-p); font-weight: 600; }
body.caixa .aviso-aberta::before { content: ""; width: 1.2em; height: 1.2em; flex: none; background: currentColor; -webkit-mask: var(--i-alerta) center / contain no-repeat; mask: var(--i-alerta) center / contain no-repeat; }
body.caixa #t-contas td:only-child { white-space: nowrap; color: var(--fraco); }
@media (max-width: 560px) {
  body.caixa #t-contas th:nth-child(4), body.caixa #t-contas td:nth-child(4), body.caixa #t-contas th:nth-child(5), body.caixa #t-contas td:nth-child(5) { display: none; }
  body.caixa th, body.caixa td { padding-inline: .35rem; }
}
@media print {
  body.caixa header button, body.caixa header a, body.caixa .controles { display: none; }
  body, body.caixa header { background: var(--louca); color: var(--tinta); }
  .resumo, .resumo div.geral { background: var(--louca); color: var(--tinta); box-shadow: none; border-color: var(--fio-forte); }
  .resumo .geral span, .resumo .geral small { color: var(--fraco); }
}

/* ---------- em qual conta o aparelho está (conta.js) ---------- */
.conta { display: inline-flex; align-items: center; gap: .35em; padding: .35em .9em .35em .6em; border-radius: 999px; font-size: var(--t-2xs); white-space: nowrap; cursor: help; }
.conta::before { content: ""; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--i-pessoa) center / contain no-repeat; mask: var(--i-pessoa) center / contain no-repeat; }
.conta b { font-weight: 700; }
.conta-admin { background: var(--cobalto-lavado); color: var(--cobalto-escuro); }
.conta-cozinha { background: var(--biscoito); color: var(--tinta-2); }
.conta-linha { margin: 1rem 0 0 !important; }
.barra-edicao .conta { background: rgb(255 255 255 / .12); color: var(--porcelana); }

/* ---------- janela da página (dialogo.js) ---------- */
.dlg-fundo { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgb(18 21 28 / .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: dlg-fundo .3s ease-out; }
.dlg { background: var(--louca); border-radius: var(--raio-folha); padding: 1.8rem 1.7rem 1.5rem; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: var(--sombra-alta); animation: dlg-entra .45s var(--suave); }
@keyframes dlg-fundo { from { opacity: 0; } }
@keyframes dlg-entra { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.dlg h3 { margin: 0 0 .7rem; font-family: var(--display); font-weight: 500; font-size: var(--t-xl); letter-spacing: -.015em; line-height: 1.15; }
.dlg p { margin: 0 0 1rem; color: var(--tinta-2); font-size: var(--t-s); }
.dlg textarea { width: 100%; resize: none; font-size: var(--t-m); padding: .8em .9em; border-radius: var(--raio-m); }
.dlg-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .7rem 0 0; }
.dlg-chips button { padding: .45em .95em; font-weight: 500; font-size: var(--t-xs); min-height: 40px; }
.dlg-botoes { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-top: 1.3rem; }
.dlg-botoes button { padding: .8em 1.4em; font-size: var(--t-s); min-height: 52px; }
.dlg-linhas { border-top: 1px solid var(--fio-forte); border-bottom: 1px solid var(--fio-forte); padding: .3rem 0; margin-bottom: 1rem; }
.dlg-linhas > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; font-variant-numeric: tabular-nums; }
.dlg-linhas > div + div { border-top: 1px solid var(--fio); }
.dlg-linhas .total { font-weight: 700; font-size: var(--t-m); }
.dlg-linhas .total span:last-child { font-family: var(--display); font-weight: 600; font-size: var(--t-xl); font-variant-numeric: lining-nums tabular-nums; }
.dlg-nota { font-size: var(--t-xs) !important; color: var(--fraco) !important; }

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