/* ============================================
   Ponto Roxo — marca: pin/fruta roxa ("o ponto")
   roxo açaí profundo + creme + verde folha + pitaya
   ============================================ */
:root {
  --berry-950: #24072C;
  --berry-900: #3B0F46;
  --roxo:      #6D2177;   /* açaí berry */
  --roxo-esc:  #4A1458;
  --roxo-claro:#F3E4F6;
  --berry-suave:#B983D6;
  --rosa:      #E1377B;   /* pitaya */
  --folha:     #5AAE3E;
  --verde:     #3D8B2A;
  --ouro:      #D98E2B;   /* granola/amêndoas */
  --vermelho:  #D64045;
  --amarelo:   #B07514;
  --fundo:     #FBF7F4;   /* creme quente */
  --card:      #ffffff;
  --texto:     #2B1A33;
  --texto-fraco:#7C6B86;
  --borda:     #EBDFEC;
  --borda-forte:#DCC8E4;
  --creme:     #FBF1DD;
  --sombra:    0 1px 2px rgba(59,15,70,.05), 0 4px 16px rgba(59,15,70,.08);
  --sombra-lift:0 8px 28px rgba(59,15,70,.16);
  --sombra-pop:0 12px 40px rgba(59,15,70,.22);
  --raio:      18px;
  --fonte-ui:  'Segoe UI', system-ui, -apple-system, sans-serif;
  --fonte-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --trans:     .18s cubic-bezier(.4,0,.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--berry-suave); color: var(--berry-950); }

body {
  font-family: var(--fonte-ui);
  background:
    radial-gradient(1100px 420px at 88% -120px, rgba(109,33,119,.10), transparent 60%),
    radial-gradient(800px 520px at -12% 28%, rgba(225,55,123,.07), transparent 55%),
    radial-gradient(600px 500px at 105% 80%, rgba(217,142,43,.05), transparent 60%),
    var(--fundo);
  background-attachment: fixed;
  color: var(--texto);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

h1 { font-size: 1.5rem; }
h1, h2, .logo { font-family: var(--fonte-display); letter-spacing: -.01em; }
h2 { font-weight: 700; }

/* marca "Ponto Roxo": wordmark em dois tons + tagline espaçada */
.rx { color: var(--berry-suave); }
.tag-k {
  display: block; text-align: center; color: var(--berry-suave);
  font-size: .72rem; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; margin: 2px 0 8px;
}

/* ---------- topo ---------- */
.topo {
  background: linear-gradient(108deg, var(--berry-950) 0%, var(--roxo-esc) 52%, var(--roxo) 100%);
  color: #fff;
  padding: 14px 16px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 4px 24px rgba(36, 7, 44, .42);
}
.topo-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.logo {
  font-size: 1.3rem; font-weight: 900; text-decoration: none; color: #fff;
  display: flex; align-items: center; gap: 10px;
}
.logo-img {
  height: 46px; width: auto;
  /* wordmark roxo-escuro precisa de chip claro no topo berry */
  background: var(--creme); padding: 4px 12px; border-radius: 14px;
  box-sizing: content-box;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
  transition: transform .25s;
}
.logo:hover .logo-img { transform: rotate(-6deg) scale(1.05); }
/* nav é SEMPRE dropdown no ☰: o admin tem ~13 links — em qualquer largura
   útil eles ou estouram o header ou ficam escondidos atrás de scroll. Painel
   único = nada escondido, header sempre de uma linha. Âncora no .topo (sticky). */
nav {
  position: absolute; top: 100%; left: 10px; right: 10px; z-index: 60;
  display: none; flex-wrap: wrap; gap: 6px; padding: 12px;
  background: linear-gradient(160deg, var(--berry-950), var(--berry-900));
  border-radius: 0 0 16px 16px; box-shadow: 0 18px 34px rgba(0,0,0,.45);
}
nav.aberto { display: flex; }
nav .nav-link { background: rgba(255,255,255,.09); }

/* quem está logado — sempre visível no header (vendedor vs admin) */
.topo-user {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
  color: #fff; text-decoration: none; padding: 4px 6px; border-radius: 12px;
  min-width: 0;  /* deixa o nome encolher com ellipsis em tela apertada */
}
.topo-user:hover { background: rgba(255,255,255,.1); }
.topo-user > i { font-size: 1.55rem; flex: none; }
.topo-user-info { display: flex; flex-direction: column; line-height: 1.15;
  text-align: right; min-width: 0; }
.topo-user-info b { font-size: .82rem; font-weight: 800; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.papel { font-size: .58rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; border-radius: 999px; padding: 2px 7px;
  margin-top: 2px; align-self: flex-end; }
.papel-admin    { background: var(--rosa); color: #fff; }
.papel-vendedor { background: rgba(90,174,62,.38); color: #D9F2CB; }

.nav-menu-btn {
  position: relative; flex: none; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; border: 0;
  width: 44px; height: 44px; border-radius: 12px; font-size: 1.4rem;
  display: inline-flex; align-items: center; justify-content: center;
}
#nav-menu-badge {
  display: none; position: absolute; top: -6px; right: -6px;
  background: var(--rosa); color: #fff; font-size: .62rem; font-weight: 800;
  border-radius: 999px; padding: 2px 6px; min-width: 18px; text-align: center;
}
/* celular: alvos de toque grandes, ~3 por linha */
@media (max-width: 899px) {
  nav .nav-link { flex: 1 1 28%; text-align: center; padding: 12px 8px; }
}
.nav-link {
  color: #D9C5E3; text-decoration: none; font-weight: 600; font-size: .88rem;
  padding: 9px 14px; border-radius: 999px; white-space: nowrap;
  transition: background var(--trans), color var(--trans), transform var(--trans);
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.12); transform: translateY(-1px); }
.nav-link.ativo {
  background: #fff; color: var(--berry-900); font-weight: 800;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

main { max-width: 960px; margin: 0 auto; padding: 18px 14px 96px; }

/* ---------- cards ---------- */
.card {
  background: var(--card); border-radius: var(--raio);
  border: 1px solid rgba(235,223,236,.7);
  box-shadow: var(--sombra); padding: 20px;
}
.card + .card, .card.mt { margin-top: 14px; }
.card h2 { font-size: 1.05rem; margin-bottom: 12px; }
.stat { text-align: center; padding: 14px 6px; transition: transform var(--trans), box-shadow var(--trans); }
.stat:hover { transform: translateY(-2px); box-shadow: var(--sombra-lift); }
.stat .valor {
  font-size: 1.5rem; font-weight: 900; color: var(--roxo-esc);
  font-family: var(--fonte-display);
}
.stat .rotulo {
  font-size: .72rem; color: var(--texto-fraco); margin-top: 4px;
  text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
}

/* ---------- botões ---------- */
/* .btn sozinho = fantasma (fundo card + borda). NUNCA transparente — um botão
   sem fundo nem borda vira texto invisível no card branco (bug que mordeu
   "Gerar código", "Copiar código Pix", "+ Entrada", "Salvar" de config) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 2px solid var(--borda); border-radius: 12px; padding: 13px 20px;
  font-size: .95rem; font-weight: 700; cursor: pointer; font-family: var(--fonte-ui);
  transition: transform .12s, box-shadow var(--trans), opacity var(--trans), filter var(--trans),
              border-color var(--trans), background var(--trans);
  text-decoration: none; color: var(--texto); position: relative;
  background: var(--card);
}
.btn:hover { filter: brightness(1.06); border-color: var(--borda-forte); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.prim {
  background: linear-gradient(155deg, #7D2E88 0%, var(--roxo) 40%, var(--roxo-esc) 100%);
  color: #fff; box-shadow: 0 5px 16px rgba(109,33,119,.38); border-color: transparent;
}
.btn.prim:hover { box-shadow: 0 8px 22px rgba(109,33,119,.45); }
.btn.verde { background: linear-gradient(155deg, #6CBE50, var(--verde)); color: #fff; box-shadow: 0 5px 14px rgba(61,139,42,.3); border-color: transparent; }
.btn.vermelho { background: linear-gradient(155deg, #E86267, var(--vermelho)); color: #fff; box-shadow: 0 5px 14px rgba(214,64,69,.3); border-color: transparent; }
.btn.fantasma {
  background: var(--card); border: 2px solid var(--borda);
  transition: border-color var(--trans), background var(--trans), transform .12s;
}
.btn.fantasma:hover { border-color: var(--roxo); background: var(--roxo-claro); filter: none; }
.btn.grande { width: 100%; padding: 16px; font-size: 1.05rem; border-radius: 14px; }
.btn.peq { padding: 8px 14px; font-size: .82rem; border-radius: 10px; }

/* ---------- formulário ---------- */
.campo { margin-bottom: 12px; }
.campo label {
  display: block; font-size: .78rem; font-weight: 700; color: var(--texto-fraco);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px;
}
input, select, textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--borda);
  border-radius: 12px; font-size: 1rem; font-family: var(--fonte-ui);
  background: #fff; color: var(--texto);
  transition: border-color var(--trans), box-shadow var(--trans);
}
input:hover, select:hover, textarea:hover { border-color: var(--borda-forte); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--roxo);
  box-shadow: 0 0 0 4px rgba(109,33,119,.13);
}
input[type=checkbox] { width: auto; accent-color: var(--roxo); }
input[type=date] { color: var(--texto); }

/* ---------- tabela (cobre .tabela E <table> cru dentro de card/wrap) ---------- */
.tabela, .card table, .tabela-wrap table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.tabela th, .card table th, .tabela-wrap th {
  text-align: left; color: var(--texto-fraco); font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .7px; padding: 8px 8px;
  border-bottom: 2px solid var(--borda);
}
.tabela td, .card table td, .tabela-wrap td {
  padding: 11px 8px; border-bottom: 1px solid var(--borda);
  transition: background var(--trans);
}
.tabela tr:last-child td, .card table tr:last-child td, .tabela-wrap tr:last-child td { border-bottom: none; }
.tabela td.num, .tabela th.num,
.card table td.num, .card table th.num,
.tabela-wrap td.num, .tabela-wrap th.num { text-align: right; }
.tabela tr[data-id], .card table tr[data-id] { cursor: pointer; }
.card table tbody tr:hover td, .tabela-wrap tbody tr:hover td { background: #FAF3FC; }
tr.inativo td { opacity: .5; }
.tabela-wrap { overflow-x: auto; border-radius: 12px; }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 11px; border-radius: 999px;
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px;
}
.badge.verde { background: #E1F2DA; color: var(--verde); }
.badge.vermelho { background: #FBDBDC; color: var(--vermelho); }
.badge.amarelo { background: #F7E8C8; color: var(--amarelo); }
.badge.roxo { background: var(--roxo-claro); color: var(--roxo-esc); }
.badge.cinza { background: #EEE; color: #666; }
.badge.rosa { background: #FADBEA; color: var(--rosa); }

/* ---------- utilidades ---------- */
.linha { display: flex; justify-content: space-between; align-items: center;
         gap: 8px; flex-wrap: wrap; } /* sem wrap o conteúdo estoura pro lado
                                         em vez de descer (badges do card da fila) */
.sub { font-size: .8rem; color: var(--texto-fraco); }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }
.vazio { text-align: center; color: var(--texto-fraco); padding: 26px; font-size: .9rem; }
.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.check { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: .95rem; }

/* ---------- tabs/categorias ---------- */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 2px solid var(--borda); background: var(--card); border-radius: 999px;
  padding: 9px 18px; font-size: .88rem; font-weight: 700; cursor: pointer;
  white-space: nowrap; font-family: var(--fonte-ui); color: var(--texto-fraco);
  transition: all var(--trans);
}
.tab:hover { border-color: var(--roxo); color: var(--roxo); }
.tab.ativo {
  background: linear-gradient(155deg, var(--roxo), var(--roxo-esc));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(109,33,119,.3);
}

/* ---------- produtos (PDV) ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.prod-btn {
  border: 2px solid var(--borda); background: var(--card); border-radius: 16px;
  padding: 14px 12px; text-align: left; cursor: pointer; font-family: var(--fonte-ui);
  display: flex; flex-direction: column; gap: 5px; position: relative;
  transition: transform .12s, border-color var(--trans), box-shadow var(--trans);
}
.prod-btn::before {
  content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 3px;
  background: linear-gradient(90deg, var(--roxo), var(--rosa)); border-radius: 0 0 4px 4px;
  opacity: 0; transition: opacity var(--trans);
}
.prod-btn:hover { border-color: var(--roxo); box-shadow: var(--sombra-lift); transform: translateY(-2px); }
.prod-btn:hover::before { opacity: 1; }
.prod-btn:active { transform: scale(.96); }
.prod-btn .tipo {
  font-size: .64rem; font-weight: 800; color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .5px;
}
.prod-btn .nome { font-weight: 800; font-size: .9rem; line-height: 1.2; }
.prod-btn .prod-img {
  width: 100%; height: 66px; object-fit: cover; border-radius: 10px;
  display: block; margin: 2px 0 4px; background: var(--roxo-claro);
}
.prod-btn .preco { color: var(--roxo); font-weight: 900; font-size: 1.02rem; }
.prod-btn .disp, .prod-btn .est {
  position: absolute; top: 8px; right: 8px; font-size: .66rem; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px;
}
.prod-btn .disp.ok, .prod-btn .est.ok { background: #E1F2DA; color: var(--verde); }
.prod-btn .disp.baixo, .prod-btn .est.baixo { background: #F7E8C8; color: var(--amarelo); }
.prod-btn .disp.sem, .prod-btn .est.zerado { background: #FBDBDC; color: var(--vermelho); }
.prod-btn.zerado { opacity: .45; }
.prod-btn.esgotado { opacity: .45; pointer-events: none; }

/* complementos */
.comp-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.comp-btn {
  border: 2px solid var(--borda); background: var(--card); border-radius: 12px;
  padding: 12px 10px; font-size: .85rem; cursor: pointer; font-family: var(--fonte-ui);
  display: flex; flex-direction: column; gap: 2px; font-weight: 600;
  transition: all var(--trans);
}
.comp-btn:hover { border-color: var(--roxo); }
.comp-btn.sel {
  border-color: var(--roxo); background: var(--roxo-claro);
  box-shadow: inset 0 0 0 1px var(--roxo);
}
.comp-btn span:last-child { font-size: .75rem; color: var(--texto-fraco); }
.comp-btn.sel span:last-child { color: var(--roxo); font-weight: 700; }

/* ---------- carrinho (PDV) ---------- */
.carrinho {
  position: sticky; bottom: 0; z-index: 40;
  background: var(--card); border-radius: 20px 20px 0 0;
  border: 1px solid var(--borda); border-bottom: none;
  box-shadow: 0 -6px 28px rgba(36,7,44,.16); padding: 14px 16px;
  margin: 0 -14px -16px;
}

.carrinho-fixo { margin-top: 1rem; }

.carrinho-fixo .card { position: sticky; top: 76px; }
.cart-item, .carrinho-item { padding: 8px 0; border-bottom: 1px dashed var(--borda); }
.cart-item:last-child, .carrinho-item:last-child { border-bottom: none; }
.cart-item .comps, .carrinho-item .comps { font-size: .75rem; color: var(--texto-fraco); }
.carrinho-item { display: flex; align-items: flex-start; gap: 10px; }
.cart-count {
  background: var(--roxo); color: #fff; font-size: .72rem; font-weight: 800;
  padding: 2px 9px; border-radius: 999px; vertical-align: middle;
}

/* quantidade */
.qtd-ctrl { display: flex; align-items: center; gap: 4px; }
.qtd-ctrl button {
  width: 36px; height: 36px; border: 2px solid var(--borda); background: #fff;
  border-radius: 10px; font-size: 1.1rem; font-weight: 800; cursor: pointer; color: var(--roxo);
  transition: all var(--trans);
}
.qtd-ctrl button:hover { border-color: var(--roxo); background: var(--roxo-claro); }
.qtd-ctrl button:active { transform: scale(.92); }
.qtd-ctrl b { min-width: 34px; text-align: center; font-size: 1.05rem; }

/* pagamento */
.pago-botoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pago-btn {
  border: 2px solid var(--borda); background: #fff; border-radius: 14px;
  padding: 14px 6px; font-size: .88rem; font-weight: 700; cursor: pointer;
  font-family: var(--fonte-ui); text-align: center;
  transition: all var(--trans);
}
.pago-btn:hover { border-color: var(--roxo); }
.pago-btn.sel {
  border-color: var(--roxo);
  background: linear-gradient(160deg, var(--roxo-claro), #F0DBF5);
  color: var(--roxo-esc); box-shadow: inset 0 0 0 1px var(--roxo);
}

/* ---------- fila de produção ---------- */
.fila-card { transition: transform .15s, box-shadow .2s; }
.fila-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-lift); }
.fila-num { font-family: var(--fonte-display); font-size: 1.6rem; font-weight: 900; color: var(--roxo-esc); }

/* micro-animações do dia a dia — cada uma carrega um sinal, não é enfeite:
   'entra' = pedido NOVO chegou (o olho acompanha o deslize);
   'pulsa' = pedido mudou de coluna (avançou) no poll; sem isso os cards
   pulavam de coluna sem avisar e o vendedor perdia quem andou */
@keyframes filaEntra {
  from { transform: translateY(-10px) scale(.98); opacity: 0; }
  to   { transform: translateY(0)     scale(1);   opacity: 1; }
}
.fila-card.entra { animation: filaEntra .32s cubic-bezier(.3,1.2,.4,1); }

@keyframes filaPulsa {
  0%   { box-shadow: 0 0 0 0 rgba(109,33,119,.4); }
  100% { box-shadow: 0 0 0 14px rgba(109,33,119,0); }
}
.fila-card.pulsa { animation: filaPulsa .7s ease-out; }

/* contador da coluna "soca" quando o número cresce */
@keyframes bumpNum { 50% { transform: scale(1.4); } }
.bump { animation: bumpNum .3s ease; display: inline-block; }

/* menu ☰ desce suave em vez de pipocar */
@keyframes menuDesce {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
nav.aberto { animation: menuDesce .2s ease-out; }

/* grid do PDV responde vivo na troca de aba (stagger leve como o kiosk) */
@keyframes prodEntra {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.prod-btn { animation: prodEntra .28s ease-out backwards;
            animation-delay: var(--i, 0ms); }

/* linhas de tabela (vendas) entram em cascata curta — lista lê de cima */
@keyframes linhaEntra { from { opacity: 0; transform: translateY(4px); } }
#lista tr[data-id] { animation: linhaEntra .25s backwards;
                     animation-delay: var(--i, 0ms); }

/* respeito a quem desligou movimento no sistema (e evita tontura de epilepsia) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
.sub.atraso { color: var(--vermelho); font-weight: 700; }

/* ---------- chips de filtro (presets de data) ---------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1.5px solid var(--borda); background: var(--card); border-radius: 999px;
  padding: 6px 14px; font-size: .78rem; font-weight: 700; cursor: pointer;
  font-family: var(--fonte-ui); color: var(--texto-fraco);
  transition: all var(--trans);
}
.chip:hover { border-color: var(--roxo); color: var(--roxo); }
.chip.sel, .chip.ativo {
  background: var(--roxo); border-color: var(--roxo); color: #fff;
}

/* ---------- gráfico de barras (relatórios) ---------- */
.barras {
  display: flex; align-items: flex-end; gap: 10px;
  min-height: 150px; padding-top: 10px;
}
.barra-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 6px;
}
.barra {
  width: 100%; max-width: 42px;
  background: linear-gradient(180deg, var(--roxo), var(--roxo-esc));
  border-radius: 6px 6px 0 0;
  transition: height .3s ease, filter var(--trans);
}
.barra-col:hover .barra { filter: brightness(1.15); }
.barra-rotulo {
  font-size: .68rem; font-weight: 600; color: var(--texto-fraco);
  white-space: nowrap;
}

/* ---------- segmented control (R$/%) ---------- */
.seg {
  display: inline-flex; background: var(--roxo-claro);
  border-radius: 10px; padding: 3px; gap: 2px;
}
.seg button {
  border: none; background: transparent; color: var(--roxo-esc);
  padding: 5px 14px; border-radius: 8px; font-weight: 800; font-size: .82rem;
  cursor: pointer; font-family: var(--fonte-ui); transition: all var(--trans);
}
.seg button.ativo {
  background: #fff; color: var(--roxo);
  box-shadow: 0 2px 6px rgba(59,15,70,.18);
}

/* ---------- modal ---------- */
.modal-fundo {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(36, 7, 44, .55); backdrop-filter: blur(4px);
  align-items: flex-end; justify-content: center;
}
.modal-fundo.aberto { display: flex; }
.modal {
  background: #fff; width: 100%; max-width: 520px; max-height: 92vh;
  border-radius: 24px 24px 0 0; padding: 22px; overflow-y: auto;
  box-shadow: var(--sombra-pop);
  animation: sobeModal .28s cubic-bezier(.34,1.3,.5,1);
}
@keyframes sobeModal {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.modal h2 { margin-bottom: 14px; font-size: 1.2rem; }

/* diálogo confirm/prompt (dlgConfirm/dlgPrompt no app.js) */
.dlg { max-width: 380px; }
.dlg-msg { white-space: pre-line; line-height: 1.45; }
.dlg-acoes { display: flex; gap: 8px; }
.dlg-acoes .btn { flex: 1; }

/* ---------- toast ---------- */
.toast {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%) translateY(-120px);
  background: var(--berry-900); color: #fff; padding: 13px 24px; border-radius: 999px;
  font-size: .88rem; font-weight: 700; z-index: 200; opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.4,.5,1), opacity .25s;
  box-shadow: var(--sombra-pop);
  max-width: 90vw; text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.erro { background: linear-gradient(155deg, #E86267, var(--vermelho)); }
.toast.ok { background: linear-gradient(155deg, #6CBE50, var(--verde)); }

/* QR code do Pix */
.qr-img {
  width: 220px; max-width: 70vw; image-rendering: pixelated;
  border: 8px solid #fff; border-radius: 16px; box-shadow: var(--sombra);
  margin-bottom: 8px;
}
textarea[readonly], input[readonly] {
  background: #faf8ff; color: var(--texto-fraco); font-size: .75rem;
}

/* ---------- comprovante ---------- */
.recibo {
  font-family: 'Consolas', 'Courier New', monospace; font-size: .82rem;
  background: #fff; padding: 14px; border-radius: 10px; border: 1px dashed var(--borda-forte);
}
.recibo .centro { text-align: center; }
.recibo .separador { border-top: 1px dashed #999; margin: 8px 0; }
.recibo .r-linha { display: flex; justify-content: space-between; }
.recibo .r-total { font-size: 1rem; font-weight: 700; }

@media print {
  body * { visibility: hidden; }
  .recibo, .recibo * { visibility: visible; }
  .recibo { position: absolute; left: 0; top: 0; width: 100%; border: none; }
  .no-print { display: none !important; }
}

/* ---------- responsivo ---------- */
@media (max-width: 640px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stat .valor { font-size: 1.25rem; }
  .logo { font-size: 1.05rem; }
  .logo-img { height: 34px; padding: 3px 10px; }
  .topo { padding: 10px 12px; }
  main { padding: 14px 12px 90px; }
  .card { padding: 16px; }
}
@media (max-width: 420px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .pago-botoes { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .pago-btn { font-size: .78rem; padding: 12px 4px; }
}

/* kanban da fila: ~780px pra baixo uma coluna estreita é ilegível e os botões
   do card escapam — empilha as etapas (na fila → preparando → prontos já é
   a ordem natural do fluxo). Acima disso as 3 colunas respiram. */
@media (max-width: 780px) {
  #fila-colunas { grid-template-columns: 1fr; }
  #fila-colunas h2 { font-size: 1rem; margin: 10px 0 6px; }
}