/* Tokens da marca v4 (Grupo Krent's). Fonte da verdade:
   krents/marketing/identidade-visual/Krents-Marca-Pacote/Krents-Marca/tokens.json
   Regra do design system: nada de cor ou tamanho "solto" no CSS; tudo sai destas variáveis. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/fonts/PlusJakartaSans-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --grafite: #141414;
  --brand-500: #FFBF24;      /* amarelo do Grupo: botão primário, ponto do logo */
  --brand-600: #F0AE0A;
  --brand-tint: #FFF4D6;
  --food: #F18B36;           /* cor da unidade Krent's Food */
  --food-tint: #FDE7D3;
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --texto: #141414;
  --texto-suave: #5C5C5C;
  --borda: #E4E2DC;
  --erro: #B42318;
  --erro-tint: #FEECEB;
  --ok: #15803D;
  --ok-tint: #E7F6EC;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --control-md: 48px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--texto);
       font: 400 16px/1.45 "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: var(--space-4); padding-bottom: 120px; }

.topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
        padding: var(--space-3) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--borda); }
.topo img { height: 28px; display: block; }

h1 { font-size: 24px; line-height: 1.2; margin: var(--space-4) 0 var(--space-2); }
h2 { font-size: 18px; margin: var(--space-6) 0 var(--space-3); }
.suave { color: var(--texto-suave); }
.pequeno { font-size: 14px; }

.card { background: var(--surface); border: 1px solid var(--borda); border-radius: var(--radius-lg);
        padding: var(--space-4); margin-bottom: var(--space-3); }
.linha { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.preco { font-weight: 700; white-space: nowrap; }
.produto .lado { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); flex-shrink: 0; }
.produto .linha { align-items: flex-start; }

.selo { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 13px;
        font-weight: 600; background: var(--brand-tint); }
.selo-food { background: var(--food-tint); }
.bloco { display: block; margin-top: 2px; }
.produto.esgotado { opacity: .5; }

/* seletor de quantidade: - 0 + */
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--borda); border-radius: var(--radius-pill); }
.qtd button { width: 44px; height: 44px; border: 0; background: none; font-family: inherit; font-size: 24px; font-weight: 600; line-height: 1; cursor: pointer; color: var(--texto); }
.qtd input { width: 32px; border: 0; text-align: center; font-family: inherit; font-size: 16px; font-weight: 700; background: none; color: var(--texto); -moz-appearance: textfield; }
.qtd input::-webkit-outer-spin-button, .qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.obs { margin-top: var(--space-3); display: none; }
.produto.escolhido .obs { display: block; }
.produto.escolhido { border-color: var(--food); }

label { display: block; font-weight: 600; margin: var(--space-3) 0 var(--space-2); }
input[type=text], input[type=password], select {
  width: 100%; min-height: var(--control-md); padding: 0 var(--space-3); border: 1px solid var(--borda);
  border-radius: var(--radius-md); font: inherit; background: var(--surface); color: var(--texto); }
input:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--grafite); outline-offset: 2px; }

.formas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.formas label { margin: 0; font-weight: 500; display: flex; align-items: center; gap: var(--space-2);
                min-height: var(--control-md); padding: 0 var(--space-3);
                border: 1px solid var(--borda); border-radius: var(--radius-md); background: var(--surface); }
.formas input { accent-color: var(--grafite); width: 18px; height: 18px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
       min-height: var(--control-md); padding: 0 var(--space-6); border-radius: var(--radius-pill);
       border: 1px solid var(--grafite); background: var(--surface); color: var(--texto);
       font: 600 16px "Plus Jakarta Sans", sans-serif; text-decoration: none; cursor: pointer; }
.btn-primario { background: var(--brand-500); border-color: var(--brand-500); }
.btn-primario:hover { background: var(--brand-600); }
.btn-largo { width: 100%; }

.barra-total { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface);
               border-top: 1px solid var(--borda); padding: var(--space-3) var(--space-4); }
.barra-total .btn { max-width: 608px; margin: 0 auto; display: flex; }

.erro { background: var(--erro-tint); color: var(--erro); border-radius: var(--radius-md);
        padding: var(--space-3); margin: var(--space-3) 0; font-weight: 600; }

.senha { font-size: 64px; font-weight: 800; letter-spacing: 2px; text-align: center; margin: var(--space-2) 0; line-height: 1.1; }
.status { border-left: 6px solid var(--brand-500); }
.status.pago { border-left-color: var(--ok); background: var(--ok-tint); }
.status.fim { border-left-color: var(--borda); }
.dica-print { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px;
  border-radius: var(--radius-md); background: var(--brand-tint); font-size: 15px; }
.dica-print svg { flex-shrink: 0; }
hr { border: 0; border-top: 1px solid var(--borda); margin: var(--space-3) 0; }

/* ======================================================================= cardápio: cards, folhas e sacola */
button.produto { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.produto:active { transform: scale(.99); }
button.produto .selo { margin-top: 6px; }
.produto .mais { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-500); color: var(--grafite); }
.produto .mais svg { display: block; }
.voltar { color: var(--texto); font-weight: 600; text-decoration: none; font-size: 15px; }

dialog.folha { width: 100%; max-width: 640px; max-height: 92vh; max-height: 92dvh; margin: auto auto 0;
  padding: 0; border: 0; border-radius: 22px 22px 0 0; background: var(--surface); color: var(--texto);
  box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
dialog.folha[open] { animation: folha-sobe .28s cubic-bezier(.2,.9,.3,1); }
dialog.folha::backdrop { background: rgba(20,20,20,.55); }
@keyframes folha-sobe { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.folha-corpo { position: relative; padding: 24px 16px calc(16px + env(safe-area-inset-bottom)); }
.folha-corpo h3 { font-size: 22px; margin: 4px 44px 6px 0; }
.folha-corpo > .preco { font-size: 18px; margin: 0 0 4px; }
.fechar { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--bg); font-size: 26px; line-height: 1; cursor: pointer; color: var(--texto); }
fieldset { border: 0; padding: 0; margin: 18px 0 0; }
legend { font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; padding: 0; }
fieldset .suave { margin: 2px 0 8px; }
.opcoes { display: grid; gap: 8px; margin-top: 8px; }
.opcao { display: flex; align-items: center; gap: 10px; min-height: var(--control-md); margin: 0;
  padding: 0 14px; border: 1px solid var(--borda); border-radius: var(--radius-md); font-weight: 500; cursor: pointer; }
.opcao input { accent-color: var(--grafite); width: 20px; height: 20px; margin: 0; }
.opcao:has(input:checked) { border-color: var(--grafite); background: var(--brand-tint); }
.opcao .extra { margin-left: auto; font-weight: 700; white-space: nowrap; }
.opcao.esgotado { opacity: .5; }
.rodape-folha { position: sticky; bottom: 0; background: var(--surface); padding-top: 16px; margin-top: 8px; }
.rodape-folha .btn { flex: 1; }
.rodape-folha .btn:disabled { background: var(--borda); border-color: var(--borda); color: var(--texto-suave); cursor: not-allowed; }
.btn:disabled { opacity: .7; cursor: not-allowed; }

.sacola { list-style: none; padding: 0; margin: 12px 0; }
.sacola li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.sacola .lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.remover { border: 0; background: none; color: var(--erro); font: 600 14px "Plus Jakarta Sans", sans-serif; cursor: pointer; padding: 4px 0; }
.rotulo { font-weight: 600; margin: 16px 0 8px; }
.troco { margin-top: 4px; padding: 4px 12px 12px; border-radius: var(--radius-md); background: var(--bg); }
.enviar { margin-top: 20px; min-height: 56px; font-size: 17px; }

.aviso { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--grafite); color: #fff; padding: 10px 18px; border-radius: var(--radius-pill);
  font-weight: 600; transition: .25s; z-index: 10; white-space: nowrap; max-width: calc(100vw - 32px);
  overflow: hidden; text-overflow: ellipsis; }
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ======================================================================= boas-vindas
   Sequência (~2,5 s): K se desenha (traço a traço) -> ponto amarelo cai e quica -> nome e
   "Food" aparecem -> chamada -> rota de 4 paradas -> estado e botão. Tudo em CSS: leve no 4G. */
body.boas-vindas { background: var(--grafite); color: #fff; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
.boas-vindas .palco { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; max-width: 480px;
  margin: 0 auto; padding: 48px 24px calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center; gap: 22px; }

.boas-vindas .marca svg { width: min(78vw, 340px); height: auto; overflow: visible; }
.logo-animado .traco { stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenhar .45s cubic-bezier(.6,0,.3,1) forwards; }
.logo-animado .t1 { animation-delay: .15s; }
.logo-animado .t2 { animation-delay: .45s; }
.logo-animado .t3 { animation-delay: .72s; }
.logo-animado .ponto-k { transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: cair .7s cubic-bezier(.3,1.6,.5,1) 1s forwards; }
.logo-animado .nome, .logo-animado .unidade { opacity: 0; transform: translateX(-14px);
  animation: entrar .5s ease-out forwards; }
.logo-animado .nome { animation-delay: 1.25s; }
.logo-animado .unidade { animation-delay: 1.45s; }
.logo-animado .ponto-nome { transform-box: fill-box; transform-origin: center; transform: scale(0);
  animation: estourar .4s cubic-bezier(.3,1.8,.5,1) 1.6s forwards; }

.boas-vindas .chamada { font-size: clamp(32px, 9vw, 44px); line-height: 1.05; font-weight: 800; margin: 8px 0 0;
  letter-spacing: -.5px; opacity: 0; animation: subir .6s ease-out 1.75s forwards; }
.boas-vindas .chamada span { color: var(--brand-500); }
.boas-vindas .apoio { margin: 0; color: #CFCFCF; font-size: 17px; opacity: 0; animation: subir .6s ease-out 1.95s forwards; }

/* rota: 4 paradas ligadas por uma linha tracejada que "anda" */
.rota { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  position: relative; }
.rota::before { content: ""; position: absolute; top: 19px; left: 12%; right: 12%; height: 0;
  border-top: 3px dashed rgba(255,191,36,.55); transform: scaleX(0); transform-origin: left;
  animation: crescer .9s ease-in-out 2s forwards; }
.rota li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #E6E6E6; opacity: 0; transform: translateY(8px);
  animation: subir .4s ease-out forwards; }
.rota li:nth-child(1) { animation-delay: 2.05s; }
.rota li:nth-child(2) { animation-delay: 2.25s; }
.rota li:nth-child(3) { animation-delay: 2.45s; }
.rota li:nth-child(4) { animation-delay: 2.65s; }
.rota b { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grafite); border: 2px solid var(--brand-500); color: var(--brand-500); font-size: 17px; }
.rota li:nth-child(4) b { background: var(--brand-500); color: var(--grafite); }

.boas-vindas .estado { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,.08);
  font-size: 14px; font-weight: 600; opacity: 0; animation: subir .5s ease-out 2.8s forwards; }
.estado i { width: 10px; height: 10px; border-radius: 50%; background: #9A9A9A; }
.estado.aberto i { background: #34D399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: radar 1.8s ease-out 3s infinite; }

.boas-vindas .cta { min-height: 58px; font-size: 18px; font-weight: 700; color: var(--grafite); width: 100%;
  opacity: 0; animation: subir .5s ease-out 2.95s forwards, pulsar 2.4s ease-in-out 4s infinite; }
.boas-vindas .cta:active { transform: scale(.98); }
.boas-vindas .rodape { margin: -8px 0 0; text-align: center; color: #A8A8A8; font-size: 14px;
  opacity: 0; animation: subir .5s ease-out 3.1s forwards; }

/* ícones flutuando ao fundo */
.boas-vindas .fundo { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.flutua { position: absolute; width: 92px; height: 92px; color: var(--food); opacity: 0;
  animation: aparecer 1.2s ease-out forwards, deriva 14s ease-in-out infinite alternate; }
.flutua.f1 { top: 5%;  left: 68%; animation-delay: .4s, 0s; }
.flutua.f2 { top: 15%; left: -6%; width: 76px; animation-delay: .7s, -3s; color: #fff; }
.flutua.f3 { top: 37%; left: 82%; width: 70px; animation-delay: 1s, -6s; }
.flutua.f4 { top: 56%; left: -9%; width: 104px; animation-delay: 1.2s, -2s; color: var(--brand-500); }
.flutua.f5 { top: 73%; left: 78%; width: 80px; animation-delay: 1.4s, -8s; color: #fff; }
.flutua.f6 { top: 88%; left: 14%; width: 72px; animation-delay: 1.6s, -5s; }
.flutua.f7 { top: 1%;  left: 22%; width: 64px; animation-delay: 1.8s, -10s; color: var(--brand-500); }
.flutua.f8 { top: 86%; left: 60%; width: 66px; animation-delay: 2s, -7s; color: #fff; }
.flutua.f9 { top: 94%; left: 84%; width: 84px; animation-delay: 2.2s, -4s; }
@media (min-width: 700px) { .flutua { width: 130px; height: 130px; } }

@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes cair { 0% { opacity: 0; transform: translateY(-120px) scale(.6); } 60% { opacity: 1; }
                  100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes entrar { to { opacity: 1; transform: none; } }
@keyframes estourar { to { transform: scale(1); } }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes crescer { to { transform: scaleX(1); } }
@keyframes aparecer { to { opacity: .16; } }
@keyframes deriva { from { transform: translate(0, 0) rotate(-8deg); } to { transform: translate(18px, -26px) rotate(9deg); } }
@keyframes radar { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 100% { box-shadow: 0 0 0 12px rgba(52,211,153,0); } }
@keyframes pulsar { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,191,36,.45); } 50% { box-shadow: 0 0 0 10px rgba(255,191,36,0); } }

/* Toque adianta tudo; quem pede menos movimento no celular vê a tela pronta, sem animação. */
/* atraso negativo: animações de entrada já começam "no fim"; as contínuas (flutuar, pulsar) seguem normais */
body.pular *, body.pular *::before { animation-delay: -10s !important; }
@media (prefers-reduced-motion: reduce) {
  .boas-vindas *, .boas-vindas *::before { animation: none !important; opacity: 1 !important;
    transform: none !important; stroke-dashoffset: 0 !important; }
  .flutua { opacity: .16 !important; }
}

/* ======================================================================= sistema do caixa (notebook)
   Duas camadas: os TOKENS de cada tema (.claro / .escuro, no body) e os COMPONENTES, que só usam
   tokens. Trocar o tema é trocar a classe do body; nenhum componente precisa saber qual tema é. */
.claro {
  --bg: #F4F3EF; --surface: #FFFFFF; --surface-2: #FAFAF7; --surface-solida: #FFFFFF;
  --texto: #141414; --texto-suave: #5C5C5C; --borda: #E4E2DC; --borda-forte: #CFCBC2;
  --brand-tint: #FFF4D6; --food-tint: #FDE7D3;
  --erro: #B42318; --erro-tint: #FEECEB; --ok: #15803D; --ok-tint: #E7F6EC;
  --barra-bg: rgba(255,255,255,.88); --menu-bg: #F4F3EF; --campo-bg: #FFFFFF;
  --sombra: 0 1px 2px rgba(20,20,20,.04), 0 8px 24px rgba(20,20,20,.06);
  --grade: rgba(20,20,20,.035); --brilho: .14; --vidro: none;
}
.escuro {
  --bg: #050505; --surface: rgba(255,255,255,.055); --surface-2: rgba(255,255,255,.035); --surface-solida: #121212;
  --texto: #F5F5F5; --texto-suave: #A3A3A3; --borda: rgba(255,255,255,.12); --borda-forte: rgba(255,255,255,.22);
  --brand-tint: rgba(255,191,36,.13); --food-tint: rgba(241,139,54,.16);
  --erro: #FF8A80; --erro-tint: rgba(255,90,80,.14); --ok: #4ADE80; --ok-tint: rgba(74,222,128,.12);
  --barra-bg: rgba(5,5,5,.78); --menu-bg: rgba(255,255,255,.04); --campo-bg: rgba(0,0,0,.4);
  --sombra: 0 12px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  --grade: rgba(255,255,255,.03); --brilho: .26; --vidro: blur(16px);
}
body.tema-caixa, body.tela-login { background: var(--bg); color: var(--texto); min-height: 100vh; min-height: 100dvh; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* fundo: grade sutil e brilhos de cor (mais fortes no escuro) */
.caixa-fundo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size: 44px 44px; }
.caixa-fundo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, transparent 25%, var(--bg) 80%); }
.brilho { position: absolute; border-radius: 50%; filter: blur(70px); }
.brilho-1 { width: 420px; height: 420px; background: radial-gradient(circle, #F18B36, transparent 70%);
  right: -60px; top: 80px; opacity: var(--brilho); animation: orbitar 16s ease-in-out infinite alternate; }
.brilho-2 { width: 360px; height: 360px; background: radial-gradient(circle, #FFBF24, transparent 70%);
  left: -80px; bottom: -60px; opacity: calc(var(--brilho) * .7); animation: orbitar 20s ease-in-out -6s infinite alternate; }
@keyframes orbitar { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 40px) scale(1.12); } }

/* ------------------------------------------------------------ barra de menu (topo inteiro) */
.barra-sistema { position: sticky; top: 0; z-index: 30; display: flex; align-items: stretch; gap: 16px;
  padding: 8px 16px; background: var(--barra-bg); border-bottom: 1px solid var(--borda);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.marca-sistema { display: flex; align-items: center; flex-shrink: 0; padding-right: 8px; }
.marca-sistema img { height: 28px; display: block; }
.escuro .logo-claro, .claro .logo-escuro { display: none; }
.menu-sistema { flex: 1; display: flex; gap: 6px; min-width: 0; }
.menu-item, .menu-form { flex: 1 1 0; min-width: 0; }
.menu-form { display: flex; margin: 0; }
.menu-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 58px; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--menu-bg);
  color: var(--texto); text-decoration: none; font: 700 12px/1.1 "Plus Jakarta Sans", sans-serif; letter-spacing: .05em;
  text-transform: uppercase; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.menu-item svg { width: 22px; height: 22px; flex-shrink: 0; }
.menu-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.menu-item:hover { border-color: var(--brand-500); }
.menu-item:active { transform: translateY(1px); }
.menu-item.ativo { background: var(--brand-500); border-color: var(--brand-500); color: var(--grafite); box-shadow: 0 6px 20px rgba(255,191,36,.25); }
.menu-form .menu-item { width: 100%; }
.menu-sair:hover { border-color: var(--erro); color: var(--erro); }
.menu-contador { position: absolute; top: 5px; right: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  display: grid; place-items: center; background: var(--erro); color: #fff; font-size: 12px; letter-spacing: 0; }
.escuro .menu-contador { background: #E5484D; }
.menu-item.ativo .menu-contador { background: var(--grafite); color: var(--brand-500); }
.menu-sistema .menu-item { margin: 0; }  /* o <label> do tema não herda a margem dos rótulos de formulário */
.tema-chave { position: relative; display: flex; align-items: center; justify-content: space-between; width: 60px; height: 30px;
  padding: 0 7px; border-radius: 15px; background: var(--borda-forte); }
.tema-chave svg { position: relative; z-index: 1; width: 16px; height: 16px; transition: color .25s; }
.tema-bolinha { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-500);
  box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.escuro .tema-bolinha { transform: translateX(30px); }
.claro .tema-sol, .escuro .tema-lua { color: var(--grafite); }
.claro .tema-lua, .escuro .tema-sol { color: var(--texto-suave); }
@media (max-width: 1100px) { .menu-item { font-size: 10.5px; letter-spacing: .02em; } .marca-sistema img { height: 22px; } }
@media (max-width: 820px) {
  .barra-sistema { flex-direction: column; gap: 8px; }
  .menu-sistema { overflow-x: auto; }
  .menu-item, .menu-form { flex: 0 0 104px; }
}

/* ------------------------------------------------------------ área das telas */
main.area-sistema { max-width: 1280px; margin: 0 auto; padding: 24px 28px 48px; }
main.area-sistema.tela-cheia { max-width: none; }
main.area-sistema.tela-lancar { max-width: 1280px; padding-bottom: 120px; }
@media (max-width: 600px) { main.area-sistema { padding: 16px; } }
.cabecalho-tela { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 18px; }
.cabecalho-tela h1 { margin: 0 0 4px; font-size: 28px; }
.cabecalho-tela p { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acoes form { margin: 0; }
.voltar { display: inline-block; margin-bottom: 8px; color: var(--texto); font-weight: 600; text-decoration: none; }
.link-forte { color: var(--texto); font-weight: 700; text-decoration-color: var(--brand-500); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tema-caixa h2 { font-size: 18px; }

.tema-caixa .card, .kpi, .alerta, .faixa-caixa {
  background: var(--surface); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra);
  -webkit-backdrop-filter: var(--vidro); backdrop-filter: var(--vidro); }
.escuro .card, .escuro .kpi, .escuro .alerta, .escuro .faixa-caixa { background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); }
.tema-caixa .card { padding: 18px; margin-bottom: 16px; }
.titulo-card { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 17px; }
.titulo-card svg { width: 20px; height: 20px; }
.duas-colunas { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .duas-colunas { grid-template-columns: 1.2fr 1fr; } }
.duas-colunas.iguais { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.duas-colunas > .card, .duas-colunas > section > .card:last-child { margin-bottom: 0; }
.duas-colunas + .duas-colunas, .duas-colunas + .card { margin-top: 16px; }

/* botões e campos */
.tema-caixa .btn { min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--borda-forte);
  background: var(--surface); color: var(--texto); font-size: 15px; }
.tema-caixa .btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.tema-caixa .btn:hover { border-color: var(--brand-500); }
.tema-caixa .btn-primario { background: var(--brand-500); border-color: var(--brand-500); color: var(--grafite); box-shadow: 0 6px 20px rgba(255,191,36,.22); }
.tema-caixa .btn-primario:hover { background: var(--brand-600); }
.tema-caixa .btn-perigo { color: var(--erro); border-color: var(--erro); background: transparent; }
.tema-caixa .btn-fechar { background: #E5484D; border-color: #E5484D; color: #fff; }
.tema-caixa .btn-fechar:hover { background: #CE2C31; border-color: #CE2C31; }
.tema-caixa .btn-pequeno { min-height: 34px; padding: 0 12px; font-size: 14px; border-radius: 8px; }
.tema-caixa .btn-fantasma { border-color: transparent; background: transparent; color: var(--texto-suave); }
.botao-som.ativo { border-color: var(--ok) !important; color: var(--ok) !important; }
.tema-caixa input[type=text], .tema-caixa input[type=password], .tema-caixa input[type=number],
.tema-caixa input[type=search], .tema-caixa select {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--borda-forte); border-radius: 10px;
  background: var(--campo-bg); color: var(--texto); font: inherit; }
.tema-caixa input:focus-visible, .tema-caixa select:focus-visible { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(255,191,36,.25); }
.tema-caixa input[type=range] { width: 100%; accent-color: var(--brand-500); }
.escuro input:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 1000px #151515 inset; transition: background-color 9999s 0s; }
.tema-caixa .formas label, .tema-caixa .opcao { background: var(--surface-2); border-color: var(--borda); color: var(--texto); border-radius: 10px; }
.tema-caixa .formas label:has(input:checked), .tema-caixa .opcao:has(input:checked) { border-color: var(--brand-500); background: var(--brand-tint); }
.tema-caixa .formas input, .tema-caixa .opcao input { accent-color: var(--brand-500); }
.tema-caixa .troco { background: var(--surface-2); }
.tema-caixa .selo { background: var(--brand-tint); color: var(--texto); }
.escuro .selo { color: var(--brand-500); }
.tema-caixa .erro { background: var(--erro-tint); color: var(--erro); border: 1px solid var(--erro); border-color: color-mix(in srgb, var(--erro) 35%, transparent); }
.sucesso { margin: 12px 0; padding: 12px 14px; border-radius: 10px; font-weight: 600; background: var(--ok-tint); color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.tema-caixa hr { border-top-color: var(--borda); }
.linha-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.linha-form input { flex: 1 1 200px; width: auto !important; }
.ponto-status { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #9A9A9A; flex-shrink: 0; }
.ponto-status.ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-tint); }
code { font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--borda); }

/* tabelas */
.tema-caixa .tabela { width: 100%; border-collapse: collapse; background: transparent; font-size: 15px; }
.tema-caixa .tabela th, .tema-caixa .tabela td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tema-caixa .tabela thead th { color: var(--texto-suave); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tema-caixa .tabela tfoot th { border-bottom: 0; font-size: 15px; }
.tema-caixa .tabela a { color: var(--texto); }
.tema-caixa .tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-rolavel { overflow-x: auto; }
.tabela tr[hidden] { display: none; }
.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }
.status-pill { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 13px; font-weight: 700; white-space: nowrap;
  background: var(--surface-2); color: var(--texto-suave); border: 1px solid var(--borda); }
.status-pill.pago { background: var(--ok-tint); color: var(--ok); border-color: transparent; }
.status-pill.aguardando_pagamento { background: var(--brand-tint); color: var(--texto); border-color: transparent; }
.status-pill.cancelado { background: var(--erro-tint); color: var(--erro); border-color: transparent; }
.status-pill.grande { font-size: 15px; padding: 6px 14px; }

/* ------------------------------------------------------------ PEDIDOS: quadro de cartões */
.chip-celular svg { color: var(--ok); }
.chip-celular.pausado { border-color: var(--erro) !important; color: var(--erro); background: var(--erro-tint) !important; }
.chip-celular.pausado svg { color: var(--erro); }
.contadores { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; color: var(--texto-suave); font-size: 15px; }
.contadores b { color: var(--texto); font-size: 17px; }
.contador-alerta { color: var(--erro); font-weight: 700; }
.quadro { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.cartao-pedido, .cartao-vazio { min-height: 174px; border-radius: 14px; }
.cartao-vazio { display: grid; place-items: center; padding: 16px; border: 2px dashed var(--borda); color: var(--texto-suave);
  font-size: 14px; font-weight: 600; text-align: center; background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.cartao-vazio:empty { opacity: .55; }
.cartao-pedido { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px 18px; overflow: hidden;
  color: var(--texto); text-decoration: none; background: var(--surface); border: 1px solid var(--borda); border-left: 6px solid var(--brand-500);
  box-shadow: var(--sombra); transition: transform .15s, border-color .15s; -webkit-backdrop-filter: var(--vidro); backdrop-filter: var(--vidro); }
.escuro .cartao-pedido { background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); }
.cartao-pedido:hover { transform: translateY(-2px); border-color: var(--brand-500); }
.cartao-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.senha-fila { font-size: 38px; font-weight: 800; letter-spacing: 1px; line-height: 1; }
.cartao-nome { font-size: 19px; }
.cartao-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--borda); }
.cartao-itens { color: var(--texto-suave); font-size: 13.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cartao-tempo { display: flex; justify-content: space-between; margin-top: auto; color: var(--texto-suave); font-size: 13px; font-weight: 600; }
.tempo-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--borda); }
.tempo-barra span { display: block; height: 100%; background: var(--ok); }
.cartao-pedido.vencendo { border-left-color: var(--erro); }
.cartao-pedido.vencendo .tempo-barra span { background: var(--erro); }
.cartao-pedido.vencendo .cartao-tempo span:last-child { color: var(--erro); }
.vazio-grande { display: grid; justify-items: center; gap: 8px; padding: 64px 16px; text-align: center; border: 2px dashed var(--borda); border-radius: 18px; }
.vazio-grande svg { width: 48px; height: 48px; color: var(--brand-500); }
.vazio-grande h2 { margin: 4px 0 0; font-size: 22px; }

/* pedido que acabou de chegar */
.etiqueta-novo { display: none; }
.cartao-pedido.novo { border: 2px solid var(--brand-500); border-left-width: 8px;
  background: linear-gradient(145deg, rgba(255,191,36,.22), rgba(255,191,36,.06)) !important;
  animation: chegou-entra .55s cubic-bezier(.2,1.4,.4,1), chegou-pulsa 1.6s ease-in-out .55s infinite; }
.cartao-pedido.novo .etiqueta-novo { display: inline-block; order: -1; align-self: flex-start; padding: 3px 12px;
  border-radius: 6px; background: var(--brand-500); color: var(--grafite); font-size: 12px;
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.claro .cartao-pedido.novo .senha-fila { color: #B76E00; }
.escuro .cartao-pedido.novo .senha-fila { color: var(--brand-500); }
@keyframes chegou-entra { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes chegou-pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,191,36,.55); } 50% { box-shadow: 0 0 0 10px rgba(255,191,36,0), 0 0 46px rgba(255,191,36,.35); } }

/* aviso grande no topo da tela */
.chegou-pilha { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 50;
  display: flex; flex-direction: column; gap: 10px; width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.chegou { position: relative; overflow: hidden; pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "rotulo rotulo acao" "senha nome acao" "senha info acao"; column-gap: 18px; align-items: center;
  padding: 16px 22px; border-radius: 18px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, rgba(255,191,36,.30), rgba(241,139,54,.18)), rgba(10,10,10,.9);
  border: 1px solid rgba(255,191,36,.7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 60px rgba(255,191,36,.35); animation: aviso-desce .5s cubic-bezier(.2,1.3,.4,1); }
.chegou.saindo { animation: aviso-sobe .4s ease-in forwards; }
.chegou-rotulo { grid-area: rotulo; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-500); }
.chegou-senha { grid-area: senha; font-size: 48px; font-weight: 800; line-height: 1; }
.chegou-nome { grid-area: nome; font-size: 22px; font-weight: 700; align-self: end; }
.chegou-info { grid-area: info; color: #E0E0E0; font-size: 15px; align-self: start; }
.chegou-acao { grid-area: acao; padding: 10px 16px; border-radius: 10px; background: var(--brand-500); color: var(--grafite); font-weight: 800; white-space: nowrap; }
.chegou-tempo { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--brand-500);
  transform-origin: left; animation: aviso-tempo 12s linear forwards; }
@keyframes aviso-desce { from { transform: translateY(-30px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aviso-sobe { to { transform: translateY(-20px); opacity: 0; } }
@keyframes aviso-tempo { to { transform: scaleX(0); } }
@media (max-width: 600px) { .chegou { grid-template-columns: auto 1fr; grid-template-areas: "rotulo rotulo" "senha nome" "senha info" "acao acao"; }
  .chegou-acao { margin-top: 10px; text-align: center; } .chegou-senha { font-size: 38px; } }
/* borda da tela inteira pisca em amarelo quando chega pedido */
body.chegando::after { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  box-shadow: inset 0 0 0 6px var(--brand-500), inset 0 0 90px rgba(255,191,36,.45); animation: borda-pisca .8s ease-in-out 4 alternate; }
@keyframes borda-pisca { from { opacity: 1; } to { opacity: .15; } }

/* ------------------------------------------------------------ cobrar um pedido */
.senha-titulo { font-size: 40px; margin: 0; }
.senha-titulo span { font-size: 24px; font-weight: 600; margin-left: 8px; }
.item-caixa { align-items: flex-start; padding: 6px 0; }
.item-caixa .bloco { color: var(--texto-suave); font-size: 15px; }
.item-caixa .destaque-obs { color: var(--erro); font-weight: 600; }
.total-caixa { font-size: 20px; }
.troco-calculado { font-size: 18px; margin: 12px 0 0; }
.tema-caixa .status { border-left: 6px solid var(--brand-500); }
.tema-caixa .status.pago { border-left-color: var(--ok); background: var(--ok-tint); }
.tema-caixa .status.fim { border-left-color: var(--borda-forte); }
.confirmado h1 { font-size: 30px; }
.quadro-comanda { position: absolute; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
.tema-caixa .cancelar { border-color: var(--erro-tint); }

/* ------------------------------------------------------------ CAIXA */
.abas { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--borda); overflow-x: auto; }
.abas a { display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--texto-suave); text-decoration: none;
  font-weight: 700; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.abas a svg { width: 18px; height: 18px; }
.abas a:hover { color: var(--texto); }
.abas a.ativa { color: var(--texto); border-bottom-color: var(--food); }
.faixa-caixa { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 16px 18px; margin-bottom: 16px;
  border-left: 5px solid var(--ok) !important; background: var(--ok-tint) !important; }
.faixa-caixa > div:nth-child(2) { flex: 1; min-width: 220px; }
.faixa-caixa strong { font-size: 18px; }
.faixa-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: var(--ok); }
.faixa-icone svg { width: 24px; height: 24px; }
.alertas-linha { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.alerta { display: flex; align-items: center; flex: 1 1 280px; padding: 12px 14px; border-left-width: 5px !important; color: var(--texto); text-decoration: none; font-size: 15px; }
.alerta.atencao { border-left-color: var(--brand-500) !important; background: var(--brand-tint) !important; }
.alerta.critico { border-left-color: var(--erro) !important; background: var(--erro-tint) !important; }
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
@media (min-width: 1000px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; color: var(--texto); text-decoration: none; text-align: left; font: inherit; }
button.kpi, a.kpi { cursor: pointer; }
button.kpi:hover, a.kpi:hover { border-color: var(--brand-500); }
.kpi-rotulo { font-size: 14px; color: var(--texto-suave); font-weight: 600; }
.kpi-valor { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi-nota { font-size: 13px; color: var(--texto-suave); }
.kpi-principal { border-color: var(--brand-500) !important; }
.kpi-alerta { border-color: var(--erro) !important; }
.kpi-alerta .kpi-valor { color: var(--erro); }
.kpi-atencao { border-color: var(--brand-500) !important; }
.coluna-barra-tabela { width: 34%; }
.coluna-barra-tabela .barra-trilho { display: inline-block; width: calc(100% - 44px); vertical-align: middle; margin-right: 6px; height: 12px; }
.gaveta-conta { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.gaveta-conta dt { color: var(--texto-suave); }
.gaveta-conta dd { margin: 0; text-align: right; font-weight: 700; }
.gaveta-conta .total { padding-top: 8px; border-top: 1px solid var(--borda); color: var(--texto); font-weight: 800; font-size: 18px; }
.barra-filtros { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--borda); background: var(--surface); color: var(--texto);
  font: 600 14px "Plus Jakarta Sans", sans-serif; text-decoration: none; cursor: pointer; }
.filtro:hover { border-color: var(--brand-500); }
.filtro.ativo { background: var(--grafite); border-color: var(--grafite); color: #fff; }
.escuro .filtro.ativo { background: #fff; border-color: #fff; color: var(--grafite); }
.tema-caixa .busca { max-width: 280px; }
.abrir-caixa .formas { margin-top: 8px; }
.protegido { border-top: 3px solid var(--brand-500) !important; }
.protegido.perigo { border-top-color: var(--erro) !important; }
.protegido-rodape { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borda); }
.historico-linha { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--borda); font-size: 15px; }
.historico-linha:last-child { border-bottom: 0; }

/* gráficos (barras ranqueadas e colunas por hora; uma cor só, validada nos dois temas) */
.barras { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.barras li { display: grid; grid-template-columns: minmax(90px, 30%) 1fr 9.5em; align-items: center; gap: 10px; }
.barras.curtas li { grid-template-columns: minmax(90px, 34%) 1fr 3em; }
.barra-nome { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-trilho { height: 16px; border-radius: 0 4px 4px 0; background: var(--surface-2); }
.escuro .barra-trilho { background: rgba(255,255,255,.06); }
.barra { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: #C2611F; }
.barra-valor { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.colunas { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 28px; }
.coluna { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; outline: none; }
.coluna-area { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--borda); }
.coluna-barra { width: min(24px, 70%); min-height: 2px; border-radius: 4px 4px 0 0; background: #C2611F; }
.coluna-rotulo { font-size: 12px; color: var(--texto-suave); margin-top: 4px; }
.coluna-dica { position: absolute; bottom: calc(100% - 22px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--texto); color: var(--bg); font-size: 12px; padding: 4px 8px; border-radius: 6px; opacity: 0;
  pointer-events: none; transition: opacity .15s; z-index: 2; }
.coluna:hover .coluna-dica, .coluna:focus .coluna-dica { opacity: 1; }
.coluna-pico { position: absolute; bottom: calc(var(--altura) + 22px); font-size: 12px; font-weight: 700; white-space: nowrap; }
.coluna:hover .coluna-pico, .coluna:focus .coluna-pico { opacity: 0; }
.coluna:hover .coluna-barra, .coluna:focus .coluna-barra { background: #A8521A; }
.ver-tabela { margin-top: 12px; font-size: 14px; }
.ver-tabela summary { cursor: pointer; color: var(--texto-suave); font-weight: 600; }

/* ------------------------------------------------------------ PAINEL ADMIN */
.admin-layout { display: grid; gap: 20px; }
@media (min-width: 1000px) { .admin-layout { grid-template-columns: 220px 1fr; align-items: start; } }
.admin-indice { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 1000px) { .admin-indice { position: sticky; top: 100px; flex-direction: column; } }
.admin-indice a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda);
  background: var(--surface); color: var(--texto); font-weight: 700; text-decoration: none; }
.admin-indice a:hover { border-color: var(--brand-500); }
.admin-indice svg { width: 20px; height: 20px; }
.admin-conteudo .card { scroll-margin-top: 100px; }
.grade-config { display: grid; gap: 14px; }
.grade-config label { margin: 0 0 6px; }
.grade-config fieldset { margin: 0; }
.grade-config legend { font-size: 15px; margin-bottom: 8px; }
.interruptor { display: flex !important; align-items: flex-start; gap: 12px; margin: 0 !important; font-weight: 600; cursor: pointer; }
.interruptor input { appearance: none; flex-shrink: 0; width: 44px; height: 26px; margin: 0; border-radius: 13px; position: relative; cursor: pointer;
  background: var(--borda-forte); transition: background .2s; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.interruptor input:checked { background: var(--ok); }
.interruptor input:checked::after { transform: translateX(18px); }
.interruptor input:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.interruptor > span { padding-top: 2px; }
.acoes-usuario { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.acoes-usuario input { flex: 1 1 120px; width: auto !important; min-height: 34px !important; font-size: 14px; }
tr.inativo td { opacity: .55; }
.novo-usuario { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borda); }
.novo-usuario h3 { margin: 0 0 10px; font-size: 16px; }
.grade-novo-usuario { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.lista-info { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.lista-info dt { color: var(--texto-suave); font-weight: 600; }
.lista-info dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ ESTOQUE */
.tabela-estoque tbody tr.esgotado td:first-child strong { text-decoration: line-through; color: var(--texto-suave); }
.tabela-estoque tbody tr.baixo, .tabela-estoque tbody tr.acabando { background: var(--brand-tint); }
.tabela-estoque tbody tr.esgotado { background: var(--erro-tint); }
.interruptor-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 128px; min-height: 36px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--borda-forte); background: var(--surface); color: var(--texto); font: 700 14px "Plus Jakarta Sans", sans-serif; }
.interruptor-btn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.interruptor-btn.off { border-color: var(--erro); color: var(--erro); background: var(--erro-tint); }
.interruptor-btn.off::before { background: var(--erro); }
.interruptor-btn:hover { border-color: var(--brand-500); }
.estoque-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.estoque-form input { width: 110px !important; min-height: 36px !important; }
.repor { display: flex; gap: 4px; }
.etiqueta { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.etiqueta.atencao { background: var(--brand-500); color: var(--grafite); }
.etiqueta.critico { background: var(--erro); color: #fff; }
.texto-alerta { color: var(--erro); font-weight: 700; }
.texto-ok { color: var(--ok); font-weight: 700; }
.disponivel { padding: 8px 0; border-bottom: 1px solid var(--borda); }
.disponivel:last-child { border-bottom: 0; }
.disponivel.off span { color: var(--texto-suave); text-decoration: line-through; }

/* ------------------------------------------------------------ LANÇAR PEDIDO (cardápio do cliente dentro do sistema) */
.tema-caixa button.produto { color: var(--texto); background: var(--surface); }
.tema-caixa .barra-total { background: var(--barra-bg); border-top-color: var(--borda); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tema-caixa dialog.folha { background: var(--surface-solida); color: var(--texto); border: 1px solid var(--borda); }
.tema-caixa .rodape-folha { background: var(--surface-solida); }
.tema-caixa .fechar { background: var(--surface-2); color: var(--texto); }
.grade-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cartao-produto { display: flex; flex-direction: column; gap: 6px; min-height: 196px; padding: 16px; margin: 0; text-align: left;
  border: 1px solid var(--borda); border-radius: 14px; background: var(--surface) !important; box-shadow: var(--sombra);
  font: inherit; color: var(--texto); cursor: pointer; transition: transform .12s, border-color .12s; }
.escuro .cartao-produto { background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)) !important; }
.cartao-produto:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--brand-500); }
.cartao-produto:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; }
.cartao-produto.esgotado { opacity: .45; cursor: not-allowed; }
.cp-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cp-icone { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--food-tint); color: var(--food); }
.cp-icone svg { width: 34px; height: 34px; }
.cp-topo .selo { font-size: 12px; }
.cp-nome { font-size: 17px; line-height: 1.25; margin-top: 4px; }
.cp-desc { color: var(--texto-suave); font-size: 13.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cp-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; }
.cp-rodape .preco { font-size: 19px; }
.aviso-cardapio { margin: 12px 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--brand-tint); font-weight: 600; }

/* ======================================================================= login */
body.tela-login { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px 16px; margin: 0; overflow-x: hidden; }
.login-cartao { display: grid; grid-template-columns: 1fr 1fr; width: min(960px, 100%); max-width: none; margin: 0; padding: 0; min-height: 540px; border-radius: 22px; overflow: hidden;
  background: var(--surface-solida); border: 1px solid var(--borda); box-shadow: 0 30px 80px rgba(20,20,20,.12);
  animation: subir .6s ease-out; }
.escuro .login-cartao { background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: 0 30px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1); }
.login-vitrine { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 40px 36px 28px;
  background: linear-gradient(160deg, #FFF8E4, #FDEBD8); text-align: center; }
.escuro .login-vitrine { background: linear-gradient(160deg, rgba(255,191,36,.10), rgba(241,139,54,.05)); border-right: 1px solid var(--borda); }
.vitrine-trilho { position: relative; flex: 1; min-height: 360px; }
.vitrine-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transform: translateX(30px); transition: opacity .55s ease, transform .55s ease; pointer-events: none; }
.vitrine-slide.ativo { opacity: 1; transform: none; pointer-events: auto; }
.vitrine-slide h2 { margin: 26px 0 8px; font-size: 26px; color: #C2611F; }
.escuro .vitrine-slide h2 { color: var(--food); }
.vitrine-slide p { margin: 0; max-width: 320px; color: var(--texto-suave); font-size: 15px; }
.vitrine-arte { position: relative; width: 280px; height: 200px; }
.vitrine-arco { position: absolute; left: -6px; bottom: -18px; width: 150px; height: 150px; border-radius: 50%; border: 2px solid var(--food); opacity: .7; }
.vitrine-tela { position: absolute; left: 34px; top: 6px; width: 212px; height: 160px; border-radius: 22px; display: grid; place-items: center;
  background: var(--grafite); box-shadow: 0 18px 40px rgba(20,20,20,.25); }
.vitrine-icone { width: 76px; height: 76px; color: var(--brand-500); }
.vitrine-slide.ativo .vitrine-icone { animation: icone-entra .7s cubic-bezier(.2,1.4,.4,1) .15s both; }
.vitrine-extra { position: absolute; width: 58px; height: 58px; color: var(--food); padding: 10px; border-radius: 16px;
  background: var(--surface-solida); box-shadow: 0 10px 24px rgba(20,20,20,.15); }
.escuro .vitrine-extra { background: #1b1b1b; }
.vitrine-extra.e1 { right: -2px; top: 54px; }
.vitrine-extra.e2 { right: 34px; bottom: -14px; color: var(--grafite); }
.escuro .vitrine-extra.e2 { color: #fff; }
.vitrine-slide.ativo .vitrine-extra { animation: deriva 6s ease-in-out infinite alternate; }
@keyframes icone-entra { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.vitrine-pontos { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.vitrine-pontos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--borda-forte); cursor: pointer; transition: width .3s, background .3s; }
.vitrine-pontos button.ativo { width: 26px; background: #C2611F; }
.escuro .vitrine-pontos button.ativo { background: var(--brand-500); }
.login-form-lado { display: flex; flex-direction: column; justify-content: center; padding: 44px 48px; }
.login-logo { display: flex; justify-content: center; }
.login-logo svg { width: min(100%, 280px); height: auto; overflow: visible; }
.claro .logo-animado .traco { stroke: var(--grafite); }
.claro .logo-animado .nome { fill: var(--grafite); }
.login-chamada { margin: 10px 0 22px; text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-suave); opacity: 0; animation: subir .6s ease-out 1.6s forwards; }
.login-form-lado label { margin: 14px 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.campo-icone { position: relative; }
.campo-icone > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--texto-suave); pointer-events: none; }
.tela-login input[type=text], .tela-login input[type=password] { width: 100%; min-height: 50px; padding: 0 48px 0 44px; border-radius: 10px;
  border: 1px solid var(--borda-forte); background: var(--campo-bg); color: var(--texto); font: inherit; transition: border-color .2s, box-shadow .2s; }
.tela-login input:focus-visible { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(255,191,36,.25); }
.escuro.tela-login input:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 1000px #151515 inset; transition: background-color 9999s 0s; }
.campo-senha button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--texto-suave); cursor: pointer; }
.campo-senha button svg { width: 20px; height: 20px; }
.campo-senha button:hover, .campo-senha button.ativo { color: var(--texto); background: var(--surface-2); }
.aviso-caps { margin: 8px 0 0; color: var(--erro); font-size: 14px; font-weight: 600; }
.tela-login .erro { background: var(--erro-tint); color: var(--erro); }
.tela-login .entrar { margin-top: 24px; min-height: 52px; border-radius: 10px; font-size: 17px; color: var(--grafite); box-shadow: 0 8px 30px rgba(255,191,36,.25); }
.tela-login .entrar:hover { box-shadow: 0 8px 36px rgba(255,191,36,.4); }
.login-rodape { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 8px; text-align: center; font-size: 13px; color: var(--texto-suave); }
@media (min-width: 600px) { .login-rodape span + span::before { content: "·"; margin-right: 8px; } }
.login-rodape strong { color: var(--texto); font-weight: 700; }
@media (max-width: 820px) {
  .login-cartao { grid-template-columns: 1fr; min-height: 0; }
  .login-vitrine { display: none; }
  .login-form-lado { padding: 36px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cartao-pedido.novo, .chegou, body.chegando::after, .chegou-tempo, .brilho, .vitrine-icone, .vitrine-extra, .login-cartao { animation: none !important; }
  .vitrine-slide { transition: none; }
  .tela-login .logo-animado *, .tela-login .login-chamada { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}