:root{
  /* TEMA CLARO — o padrão (identidade "calorosa e humana", Fase 2 da reforma
     visual, aprovada 26/09/2026 — ficha completa em .claude/design-dna/MASTER.md) */
  --bg:#faf6f0; --bg2:#ffffff; --bg3:#f0e8dd;
  --text:#2a2019; --text2:#6b5d4f; --text3:#7a6a57;
  --border:rgba(60,40,20,0.14);
  --card:#ffffff;

  /* Cores de marca — mesmas nos dois temas */
  --accent:#c2410c; --accent-soft:rgba(194,65,12,.12); --accent-bd:rgba(194,65,12,.30);
  --money:#3f6b1f; --money-soft:rgba(63,107,31,.12); --money-bd:rgba(63,107,31,.30);
  --amber:#b45309; --amber-soft:rgba(180,83,9,.12); --amber-bd:rgba(180,83,9,.30);
  --red:#b3261e; --red-soft:rgba(179,38,30,.12); --red-bd:rgba(179,38,30,.30);
  /* Tom claro de verde/âmbar — parte da barra de estoque até o mínimo (v068) */
  --money-claro:#8fb36b; --amber-claro:#e3a764;

  --radius:16px; --radius-lg:22px;
  --shadow:0 8px 28px rgba(80,50,20,.14);
}
:root[data-theme="dark"]{
  /* TEMA ESCURO — só o que muda */
  --bg:#1c1712; --bg2:#241d16; --bg3:#2e2519;
  --text:#f5ede3; --text2:#b8a990; --text3:#8f8066;
  --border:rgba(255,240,220,0.10);
  --card:#241d16;
  --shadow:0 8px 28px rgba(0,0,0,.55);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{
  font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:16px;line-height:1.5;min-height:100vh;
  transition:background-color .3s ease,color .3s ease;
}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}
/* ── Botão que afunda — padrão Portela Systems (13/10/2026) ───────────────
   Todo botão desce 2px e escurece de leve no instante do toque; a classe
   .apertado (js/ui.js, ligarBotaoQueAfunda) segura o efeito por 120ms
   mesmo num toque rápido, que sem isso acabava antes do olho ver. Usa
   `translate` (não `transform`) pra somar com qualquer transform que o
   botão já tenha. :where() deixa a regra fraca: linha de lista (abaixo)
   e casos especiais ganham fácil. Responde "meu toque pegou?" pra quem
   tem pouca familiaridade com celular. */
:where(button:not(:disabled)):active,
:where(button:not(:disabled)).apertado{translate:0 2px;filter:brightness(.94)}
.cartao-menu:not(:disabled):active,.cartao-menu.apertado{box-shadow:none}
/* Linha de lista que abre detalhe só escurece o fundo (regra de cada uma,
   mais abaixo) — lista inteira pulando a cada toque fica agitada. */
:is(.seletor-item,.conf-item-linha,.mov-produto-linha,.compra-item,.historico-item,.linha-estoque-clicavel,
.linha-estoque-sem-minimo-btn,.catalogo-item,.janela-produto-ver-mais):is(:active,.apertado){translate:none;filter:none}
@media (prefers-reduced-motion:reduce){
  :where(button:not(:disabled)):active,:where(button:not(:disabled)).apertado{translate:none}
}
input{font:inherit}

/* ── Faixa de versão nova ─────────────────────────────────────────────────
   Compara a versão que o navegador tem carregada com version.json — sem
   isso o PWA instalado fica na versão antiga por meses, sem avisar
   ninguém. Mesmo padrão do Passex/Controly, cores do Estok. */
.faixa{
  position:fixed;left:0;right:0;top:0;z-index:150;background:var(--accent);color:#fff;
  padding:calc(9px + env(safe-area-inset-top)) 16px 9px;
  font-size:13px;font-weight:700;display:none;align-items:center;gap:12px;justify-content:center;
  text-align:center;
}
.faixa.on{display:flex}
.faixa button{background:#fff;color:var(--accent);padding:5px 12px;border-radius:8px;
              font-size:13px;font-weight:700;border:none}

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */
header{
  display:flex;align-items:center;flex-wrap:wrap;row-gap:10px;
  padding:14px 20px;background:var(--bg2);border-bottom:1px solid var(--border);
  transition:background-color .3s ease,border-color .3s ease;
}
header .marca{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px}
header .marca .ponto{width:10px;height:10px;border-radius:50%;background:var(--accent)}
/* .info sempre na sua própria linha (flex-basis 100%): evita sobrepor a
   marca quando o nome da cozinha é comprido, em qualquer largura de tela. */
header .info{
  display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text2);
  flex:1 1 100%;justify-content:space-between;
}
header .info b{color:var(--text)}
header .info .quem{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
header .info .botoes{display:flex;align-items:center;gap:10px;flex-shrink:0}

.theme-toggle, .btn-icone{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  background:var(--bg3);display:flex;align-items:center;justify-content:center;
  color:var(--text2);
}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .ic-sol{display:none} .theme-toggle .ic-lua{display:block}
:root[data-theme="dark"] .theme-toggle .ic-sol{display:block}
/* Botão "Conta" do topo: ícone + palavra (quem tem 80 anos não adivinha ícone sozinho). */
.btn-conta{
  height:40px;padding:0 14px 0 11px;border-radius:20px;border:1px solid var(--border);
  background:var(--bg3);display:flex;align-items:center;gap:6px;
  color:var(--text);font-size:14px;font-weight:700;
}
.btn-conta svg{color:var(--text2)}
/* ── Menu Conta (janela no centro) ── */
.menu-conta-quem{font-size:13px;color:var(--text2);overflow-wrap:anywhere;margin:0}
.menu-conta-lista{display:flex;flex-direction:column;gap:8px;margin:18px 0 14px}
.menu-conta-item{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px;border-radius:12px;border:1px solid var(--border);
  background:var(--bg3);color:var(--text);min-height:56px;
}
.menu-conta-icone{font-size:22px;line-height:1;flex-shrink:0}
.menu-conta-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.menu-conta-nome{font-size:16px;font-weight:700}
.menu-conta-sub{font-size:13px;color:var(--text2);overflow-wrap:anywhere}
.menu-conta-versao{text-align:center;font-size:12px;color:var(--text2);margin:0}
:root[data-theme="dark"] .theme-toggle .ic-lua{display:none}

/* ── Telas ─────────────────────────────────────────────────────────────── */
.tela-central{
  min-height:calc(100vh - 73px);display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.cartao{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:32px 28px;width:100%;max-width:400px;
  transition:background-color .3s ease,border-color .3s ease;
}
.cartao h1{font-size:22px;margin-bottom:6px}
.cartao p.sub{color:var(--text2);font-size:14.5px;margin-bottom:24px}

label{display:block;font-size:13.5px;font-weight:600;color:var(--text2);margin-bottom:6px}
label .destaque-unidade{color:var(--accent);font-weight:800}
input[type=email],input[type=password],input[type=text],input[type=number],select{
  width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg3);color:var(--text);margin-bottom:16px;font-size:16px;
}
select{cursor:pointer}
input:focus{outline:2px solid var(--accent-bd);outline-offset:1px}

.btn-primario{
  width:100%;padding:14px;border:none;border-radius:10px;
  background:var(--accent);color:#fff;font-weight:700;font-size:16px;
  transition:transform .12s ease;
}
.btn-primario:disabled{opacity:.6}

.link-secundario{
  display:block;text-align:center;margin-top:18px;color:var(--accent);
  text-decoration:none;font-size:14px;font-weight:600;
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));
  transform:translateX(-50%) translateY(-20px);
  background:var(--money);color:#fff;padding:13px 20px;border-radius:10px;
  font-size:14.5px;font-weight:600;box-shadow:var(--shadow);opacity:0;
  transition:opacity .3s ease,transform .3s ease;z-index:500;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-erro{background:var(--red)}
.toast-aviso{background:var(--amber)}
.toast-aviso-icone{flex:none;width:20px;height:20px;border-radius:50%;background:#fff;color:#000;
  font-weight:800;font-size:13px;line-height:20px;text-align:center}
.toast-check{display:flex;align-items:center;gap:8px;justify-content:center}
.toast-check-icone{flex:none}
.toast-check-icone path{
  stroke-dasharray:24;stroke-dashoffset:24;
  transition:stroke-dashoffset .22s cubic-bezier(0.2,0,0,1) .15s;
}
.toast-check.show .toast-check-icone path{stroke-dashoffset:0}
@media (prefers-reduced-motion: reduce){
  .toast-check-icone path{transition:none;stroke-dashoffset:0}
}
/* Toast em cartão branco da Conferência (13/10/2026): faixa colorida na
   esquerda, texto escuro, só a frase da diferença colorida. */
.toast-cartao{
  background:var(--card);color:var(--text);border:1px solid var(--border);
  border-left:6px solid var(--money);text-align:left;
  display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;min-width:min(320px,90vw);
}
.toast-cartao-ok .toast-check-icone{background:var(--money);border-radius:50%;padding:3px;width:24px;height:24px}
.toast-cartao-pequena{border-left-color:var(--amber)}
.toast-cartao-grande{border-left-color:var(--red)}
.toast-cartao-icone{flex:none;width:26px;height:26px;border-radius:50%;color:#fff;
  font-weight:800;font-size:15px;line-height:26px;text-align:center;background:var(--amber)}
.toast-cartao-grande .toast-cartao-icone{background:var(--red)}
.toast-cartao-texto{display:flex;flex-direction:column;gap:2px;font-size:15px}
.toast-cartao-texto b{font-weight:800}
.toast-cartao-destaque{font-weight:700;color:var(--amber)}
.toast-cartao-grande .toast-cartao-destaque{color:var(--red)}
.toast-cartao-texto small{font-size:13.5px;font-weight:500;color:var(--text2)}

/* ── Selo 3D de "despensa completa" (Fase 5, momento único) ──────────────── */
.celebracao-despensa{
  position:fixed;inset:0;z-index:450;display:flex;align-items:center;justify-content:center;
  background:rgba(20,12,4,.55);opacity:0;transition:opacity .3s ease;padding:20px;
}
.celebracao-despensa.show{opacity:1}
.celebracao-despensa-cartao{
  background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:28px 24px;text-align:center;max-width:320px;
}
.celebracao-despensa-canvas-wrap{width:160px;height:160px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
.celebracao-despensa-fallback{font-size:64px}
.celebracao-despensa-cartao h3{margin-bottom:8px}
.celebracao-despensa-cartao p{color:var(--text2);font-size:15px;line-height:1.5}
@media (prefers-reduced-motion: reduce){
  .celebracao-despensa{transition:none}
}

/* ── Casca / telas de aviso ("em breve") ──────────────────────────────── */
.casca{padding:40px 20px;text-align:center;max-width:480px;margin:0 auto}
.casca .ponto-grande{
  width:64px;height:64px;border-radius:50%;background:var(--accent-soft);
  border:1px solid var(--accent-bd);display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;font-size:28px;
}
.casca h2{font-size:20px;margin-bottom:8px}
.casca p{color:var(--text2);font-size:15px;line-height:1.6}

/* ── Páginas de gestão (Fase 2) ───────────────────────────────────────── */
.pagina{max-width:640px;margin:0 auto;padding:28px 20px 60px}
.pagina-topo{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.btn-voltar{
  width:40px;height:40px;flex-shrink:0;border-radius:50%;border:1px solid var(--border);
  background:var(--bg3);color:var(--text);display:flex;align-items:center;justify-content:center;
}
.pagina-topo h2{font-size:21px}
.pagina-sub{color:var(--text2);font-size:15px;margin:-14px 0 24px 0}

.grade-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.cartao-menu{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;box-shadow:var(--shadow);
}
.cartao-menu:disabled{opacity:.55;cursor:default}
.cartao-menu-icone{font-size:30px}
.cartao-menu-nome{font-weight:700;font-size:15px;color:var(--text)}
.cartao-menu-em-breve{font-size:13px;color:var(--text3);font-weight:600}

/* ── Tela da cozinha (Fase 3, papel operacional) ─────────────────────────
   "Botões enormes" pedidos no plano: quem toca aqui é time de cozinha, com
   as mãos ocupadas, o dia inteiro — o alvo de toque tem que ser folgado. Cor
   de fundo é só reforço visual (nunca o único jeito de diferenciar: ícone +
   nome já bastam sozinhos, ver ux-simplicidade-7-80) — verde de Entrada
   (estoque aumentando, mesma cor de "positivo" usada em dinheiro),
   acento da marca pra Saída (uso normal do dia a dia, não é bom nem ruim) e
   âmbar de Desperdício (perda, vale destacar sem ser alarmante feito
   vermelho de erro). */
.cartao-menu-grande{padding:24px 16px;min-height:108px}
.cartao-menu-grande .cartao-menu-icone{font-size:32px;font-weight:800;line-height:1}
/* v122: borda de 2px na cor cheia e nome em negrito escuro — o Pedro achou
   os botões "muito apagados" no celular (15/10/2026); o fundo clarinho
   sozinho sumia na luz da cozinha. */
.cartao-menu-grande{border-width:2px}
.cartao-menu-grande .cartao-menu-nome{font-size:17px;font-weight:800;color:var(--text)}
.cartao-menu-entrada{background:var(--money-soft);border-color:var(--money)}
.cartao-menu-entrada .cartao-menu-icone{color:var(--money)}
.cartao-menu-saida{background:var(--accent-soft);border-color:var(--accent)}
.cartao-menu-saida .cartao-menu-icone{color:var(--accent)}
.cartao-menu-desperdicio{background:var(--amber-soft);border-color:var(--amber)}
.cartao-menu-desperdicio .cartao-menu-icone{color:var(--amber)}

/* Conferir é a operação principal (Fase 4) — cartão de destaque, largura
   cheia, cor sólida em vez de "soft" como os outros três, pra bater o olho
   primeiro nele. Faixa fina (ícone ao lado do nome, não empilhado) — o
   Pedro achou a versão empilhada grande demais (23/09/2026); largura cheia
   e cor sólida já bastam pra destacar, sem precisar de altura extra. */
.cartao-menu-destaque{
  grid-column:1 / -1;flex-direction:row;justify-content:center;padding:16px;min-height:unset;
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.cartao-menu-destaque .cartao-menu-icone{font-size:24px;line-height:1;color:#fff}
.cartao-menu-destaque .cartao-menu-nome{font-size:16px;color:#fff}

/* "Ver estoque" é leitura, não uma ação que muda saldo — por isso continua
   neutro (nunca colorido feito Entrada/Saída/Desperdício), mas agora ocupa
   uma vaga normal da grade em vez de barra separada embaixo: sem isso, com
   "Conferir" virando faixa cheia (acima), sobravam só 3 cartões pra uma
   grade de 2 colunas — sobrava um buraco do lado do Desperdício
   (23/09/2026). */
.cartao-menu-estoque{background:var(--card);border-color:var(--text3);color:var(--text)}
.cartao-menu-estoque .cartao-menu-nome{color:var(--text)}

/* ── Tela de Estoque atual ─────────────────────────────────────────────
   Status em 3 níveis (Fase 5): vermelho pra "Abaixo do mínimo" (já
   comprometido), âmbar pra "Perto do mínimo" (atenção, ainda não é urgência)
   — nunca só a cor, sempre a palavra do lado. "Normal" fica silencioso, sem
   badge nenhum, pra não poluir a lista com o caso comum. */
.linha-estoque-valor{text-align:right;font-weight:700;font-size:16px;white-space:nowrap}

/* Cartão por produto (v075) — um cartão branco por produto sobre o fundo
   bege, com espaço entre eles: cada barra fica claramente dentro do seu
   produto. Nome encolhe/quebra, número nunca sai do canto de cima à
   direita (antes caía de linha quando o nome ou o aviso eram compridos).
   Seletor com .linha-cadastro junto de propósito: a regra base
   .linha-cadastro vem depois no arquivo e, com o mesmo peso, sobrescrevia
   padding e alinhamento (mesma armadilha da cor da barra na v065). */
.linha-cadastro.cartao-estoque{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:14px 16px;margin-bottom:10px;align-items:flex-start;flex-wrap:wrap;
  box-shadow:0 1px 3px rgba(60,40,20,.06);
}
.linha-cadastro.cartao-estoque:last-child{border-bottom:1px solid var(--border)}
.cartao-estoque .linha-cadastro-nome{flex:1 1 0}
.cartao-estoque .linha-estoque-valor{flex:0 0 auto}
.cartao-estoque.linha-estoque-clicavel:active,.cartao-estoque.linha-estoque-clicavel.apertado{background:var(--bg3)}
.linha-estoque-aviso{font-weight:600;font-size:13px;margin-top:2px}
.linha-estoque-aviso-abaixo{color:var(--red)}
.linha-estoque-aviso-perto{color:var(--amber)}

/* Barra por produto (reforma visual) — reaproveita o trilho/fill do Painel
   do gestor, com variantes nomeadas pelo status de estoque. Sem mínimo
   cadastrado: no lugar da barra, botão contornado largo "Cadastrar estoque
   mínimo" — não afirma "ok" e diz o que fazer. */
.linha-estoque-barra-wrap{flex-basis:100%;margin-top:6px}
.linha-estoque-sem-minimo-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:40px;padding:8px 12px;border-radius:10px;
  background:none;border:1.5px dashed var(--accent);font-family:inherit;
  font-size:14px;font-weight:700;color:var(--accent);cursor:pointer;
}
.linha-estoque-sem-minimo-btn:active,.linha-estoque-sem-minimo-btn.apertado{background:var(--bg3)}

/* Cards de resumo da tela de Estoque Atual — 3 numa fileira só, sempre
   coloridos pelo próprio status (não só quando "selecionado"), e clicáveis
   como toggle de filtro (tocar de novo no mesmo card volta a "Todos"). */
.cards-status-estoque{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.cartao-kpi-estoque{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:64px;padding:10px 6px;border-radius:var(--radius);border:1px solid var(--border);
  font-family:inherit;text-align:center;
}
.cartao-kpi-estoque-numero{font-size:22px;font-weight:800;line-height:1.1}
.cartao-kpi-estoque-rotulo{font-size:12px;font-weight:600}
.cartao-kpi-estoque-ok{background:var(--money-soft);border-color:var(--money-bd)}
.cartao-kpi-estoque-ok .cartao-kpi-estoque-numero,.cartao-kpi-estoque-ok .cartao-kpi-estoque-rotulo{color:var(--money)}
.cartao-kpi-estoque-perto{background:var(--amber-soft);border-color:var(--amber-bd)}
.cartao-kpi-estoque-perto .cartao-kpi-estoque-numero,.cartao-kpi-estoque-perto .cartao-kpi-estoque-rotulo{color:var(--amber)}
.cartao-kpi-estoque-abaixo{background:var(--red-soft);border-color:var(--red-bd)}
.cartao-kpi-estoque-abaixo .cartao-kpi-estoque-numero,.cartao-kpi-estoque-abaixo .cartao-kpi-estoque-rotulo{color:var(--red)}
.cartao-kpi-estoque.ativo{border-width:2px}
.cartao-kpi-estoque-ok.ativo{border-color:var(--money)}
.cartao-kpi-estoque-perto.ativo{border-color:var(--amber)}
.cartao-kpi-estoque-abaixo.ativo{border-color:var(--red)}

/* Select de ordenação da tela de Estoque Atual — o padrão de select do
   projeto é width:100%; aqui precisa caber ao lado do rótulo numa fileira. */
.linha-ordenar-estoque{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:12px}
.linha-ordenar-estoque select{width:auto;margin-bottom:0;padding:8px 10px;font-size:14px}

/* ── Lista de compras repensada (28/09/2026) ──────────────────────────────
   Substitui a Fase 5: "marcar comprado" só risca (não é mais entrada de
   estoque direta — isso agora é o passo separado "guardar no estoque",
   Etapa 5). Nomes de classe decididos na Etapa 1 do redesenho — ver
   .claude/design-dna/lista-compras.md e o mockup na mesma pasta. Reaproveita
   .barra-estoque*/.grafico-barra-trilho (traço do mínimo) sem alteração. */
.compra-resumo{margin-bottom:18px}
.compra-resumo-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.compra-resumo-titulo{font-size:15px;font-weight:700}
.compra-resumo-trilho{height:8px;border-radius:99px;background:var(--bg3);overflow:hidden;margin-bottom:14px}
.compra-resumo-fill{height:100%;background:var(--money);border-radius:99px}
.compra-resumo-acoes{display:flex;gap:10px}
.compra-resumo-acoes button{
  flex:1;padding:12px;border-radius:10px;font-weight:700;font-size:14px;
  border:1.5px solid var(--border);background:var(--card);color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.compra-resumo-acoes .btn-principal{background:var(--accent);border-color:var(--accent);color:#fff}

.compra-secao-titulo{
  font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;
  letter-spacing:.3px;margin:18px 0 8px;
}
.compra-secao-titulo:first-child{margin-top:0}

.compra-bloco-aproveitar{
  background:var(--amber-soft);border:1px solid var(--amber-bd);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:20px;
}
.compra-bloco-aproveitar h4{font-size:14.5px;color:var(--amber);margin-bottom:2px}
.compra-bloco-aproveitar p{font-size:13px;color:var(--text2);margin-bottom:12px;line-height:1.5}
.compra-aproveitar-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--amber-bd);
}
.compra-aproveitar-item:last-child{border-bottom:none}
.compra-aproveitar-nome{font-size:14px;font-weight:600}
.compra-aproveitar-nome span{display:block;font-size:12px;font-weight:500;color:var(--text2)}
.btn-mini-add{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--amber);
  background:var(--card);color:var(--amber);font-size:18px;font-weight:800;
}

.compra-item{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 3px rgba(60,40,20,.06);
  display:flex;gap:12px;cursor:pointer;
}
.compra-item:active,.compra-item.apertado{background:var(--bg3)}
.compra-item-check{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;margin-top:2px;
  border:2px solid var(--border);background:var(--card);padding:0;
}
.compra-item-corpo{flex:1;min-width:0}
.compra-item-topo{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.compra-item-nome{font-weight:700;font-size:15px}
.compra-item-qtd{font-weight:800;font-size:15px;color:var(--text);white-space:nowrap}
.compra-item-origem{font-size:12px;color:var(--text2);margin:2px 0 8px}
.compra-tag{
  display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;
  margin-right:5px;vertical-align:middle;
}
.compra-tag-automatico{background:var(--bg3);color:var(--text2)}
.compra-tag-sugestao{background:var(--accent-soft);color:var(--accent)}
.compra-tag-manual{background:var(--bg3);color:var(--text2)}

.compra-item.comprado{opacity:.6}
.compra-item.comprado .compra-item-check{
  background:var(--money);border-color:var(--money);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;
}
.compra-item.comprado .compra-item-nome{text-decoration:line-through;text-decoration-color:var(--text3)}
.compra-item-barra{margin-top:8px;pointer-events:none}
/* Dois blocos lado a lado: o que tem e o que comprar */
.compra-item-numeros{display:flex;gap:8px;margin-top:2px}
.compra-num{flex:1;background:var(--bg3);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:1px}
.compra-num-rotulo{font-size:11.5px;font-weight:600;color:var(--text2)}
.compra-num-valor{font-size:16px;font-weight:800;color:var(--text)}
.compra-num-comprar{background:var(--accent-soft)}
.compra-num-comprar .compra-num-rotulo,.compra-num-comprar .compra-num-valor{color:var(--accent)}

.compra-vazio{text-align:center;padding:50px 20px}
.compra-vazio-icone{
  width:64px;height:64px;border-radius:50%;background:var(--money-soft);
  display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px;
}
.compra-vazio h3{font-size:17px;margin-bottom:6px}
.compra-vazio p{color:var(--text2);font-size:14.5px;line-height:1.6;margin-bottom:20px}

.compra-completo{
  background:var(--money-soft);border:1px solid var(--money-bd);border-radius:var(--radius);
  padding:26px 20px;text-align:center;margin-bottom:20px;
}
.compra-completo-icone{font-size:34px;margin-bottom:10px}
.compra-completo h3{font-size:17px;color:var(--money);margin-bottom:4px}
.compra-completo p{font-size:14px;color:var(--text2);line-height:1.5}
.compra-completo .btn-compras-adicionar{margin-top:16px}

/* Aviso "compras esperando guardar" (Lista de compras + Cozinha) e a folha
   "Guardar no estoque" — Etapa 5. */
.aviso-guardar{
  background:var(--accent-soft);border-radius:var(--radius);padding:10px 14px;
  margin-bottom:14px;display:flex;flex-direction:column;gap:10px;
}
.aviso-guardar-texto{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.3}
.aviso-guardar-texto small{display:block;color:var(--text2);font-size:13px;margin-top:2px}
.aviso-guardar-icone{flex:none;font-size:22px;line-height:1}
.aviso-guardar-texto > span:not(.aviso-guardar-icone){flex:1;min-width:0}
.btn-aviso-esconder{
  flex:none;width:32px;height:32px;margin:-6px -8px 0 0;border:none;border-radius:50%;
  background:transparent;color:var(--text2);font-size:18px;line-height:1;font-family:inherit;
}
.btn-aviso-guardar{
  width:100%;padding:10px;border:none;border-radius:10px;background:var(--accent);
  color:#fff;font-weight:800;font-size:15px;font-family:inherit;
}
.guardar-lista{max-height:46vh;overflow-y:auto;margin:6px 0 14px}
.guardar-linha{
  display:flex;align-items:center;gap:12px;padding:12px 4px;
  border-bottom:1px solid var(--border);font-size:15px;font-weight:600;
}
.guardar-linha:last-child{border-bottom:none}
.guardar-check{width:22px;height:22px;flex-shrink:0;accent-color:var(--accent)}
.guardar-nome{flex:1;min-width:0}
.guardar-nome small{display:block;font-weight:500;font-size:12.5px;color:var(--text3);margin-top:2px}
.guardar-qtd{font-weight:700;white-space:nowrap}

.btn-historico-compras{
  margin-left:auto;padding:9px 14px;border-radius:99px;border:1.5px solid var(--border);
  background:var(--card);color:var(--text);font-weight:700;font-size:13.5px;font-family:inherit;
}
/* Histórico de compras */
.historico-semana-vazia{color:var(--text3);font-weight:500}
.historico-item{
  width:100%;text-align:left;font-family:inherit;color:var(--text);
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:10px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
}
.historico-item:active,.historico-item.apertado{background:var(--bg3)}
.historico-item-data{font-weight:700;font-size:15px}
.historico-item-nomes{font-size:13.5px;color:var(--text2);margin-top:3px;line-height:1.4}
.historico-item-sub{font-size:12.5px;color:var(--text3);margin-top:4px}
.historico-item-guardado{font-size:12.5px;font-weight:700;color:var(--money);margin-top:4px}
.historico-item-pendente{color:var(--amber)}
.historico-item-valor{font-weight:800;font-size:15px;white-space:nowrap}
.historico-vermais{
  display:block;width:100%;text-align:center;padding:12px;margin-top:4px;
  color:var(--accent);font-weight:700;font-size:14.5px;background:none;border:none;font-family:inherit;
}
.historico-detalhe{max-height:52vh;overflow-y:auto;margin:6px 0 14px}
.historico-detalhe-titulo{font-size:12px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin:12px 0 4px}
.historico-detalhe-linha{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:14.5px;font-weight:600}
.historico-detalhe-linha:last-child{border-bottom:none}
.historico-detalhe-linha small{display:block;font-weight:500;font-size:12.5px;color:var(--text3);margin-top:2px}
.historico-detalhe-linha .historico-detalhe-qtd{font-weight:700;white-space:nowrap}

.compra-rodape{
  position:sticky;bottom:0;margin-top:24px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--border);
}
.btn-terminar{
  width:100%;padding:14px;border-radius:12px;border:none;background:var(--money);
  color:#fff;font-weight:800;font-size:15.5px;
}
.btn-terminar:disabled{background:var(--bg3);color:var(--text3)}

.compra-modal-origem{font-size:13px;color:var(--text2);margin:-8px 0 14px}
.compra-modal-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.compra-modal-topo .seletor-fechar{margin-top:-2px}
.compra-modal-saldo{display:flex;gap:16px;background:var(--bg3);border-radius:10px;padding:10px 12px;margin-bottom:16px;font-size:13.5px;color:var(--text2)}
.compra-modal-saldo strong{display:block;font-size:16px;color:var(--text)}

/* ── Painel do gestor (Fase 6) ─────────────────────────────────────────
   4 cartões de KPI (altura fixa, nunca pulam de tamanho conforme o número)
   + 3 seções de lista/gráfico. "Abaixo do mínimo" é o único cartão clicável
   (leva pra Lista de compras) — os outros três são só leitura. */
.grade-kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:26px}
.cartao-kpi{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;min-height:88px;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  text-align:left;font-family:inherit;
}
.cartao-kpi-numero{font-size:26px;font-weight:800;color:var(--text);line-height:1.1}
.cartao-kpi-numero.alerta{color:var(--red)}
.cartao-kpi-rotulo{font-size:13px;color:var(--text2);font-weight:600}

.painel-secao{margin-bottom:26px}
.painel-secao h3{font-size:15.5px;margin-bottom:3px}
.painel-secao-sub{font-size:13px;color:var(--text2);margin-bottom:12px}
.painel-alerta-linha{
  display:flex;justify-content:space-between;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--border);font-size:14.5px;font-weight:600;
}
.painel-alerta-linha:last-child{border-bottom:none}
/* Saídas maiores que o estoque (v130) — âmbar, igual ao aviso da Saída:
   pede atenção, mas não é erro de quem registrou. */
.painel-secao-faltou{
  padding:14px 16px;border-radius:var(--radius);background:var(--amber-soft);border:1px solid var(--amber-bd);
}
.painel-secao-faltou h3{color:var(--amber)}
.painel-faltou-linha > span:first-child{display:flex;flex-direction:column;min-width:0}
.painel-faltou-detalhe{font-size:12.5px;font-weight:500;color:var(--text2);margin-top:2px}
.painel-faltou-qtd{color:var(--amber);white-space:nowrap}
.painel-ver-todos{
  display:block;width:100%;text-align:center;margin-top:10px;padding:10px;
  color:var(--accent);font-weight:700;font-size:14px;background:none;border:none;font-family:inherit;
}
.painel-nota{font-size:13px;color:var(--text3);margin-top:6px}
.painel-resumo-conferencia{
  font-size:13.5px;color:var(--text2);background:var(--bg3);border-radius:var(--radius);
  padding:10px 14px;margin-bottom:20px;
}

.grafico-barra-linha{margin-bottom:14px}
.grafico-barra-linha:last-child{margin-bottom:0}
.grafico-barra-topo{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:600;margin-bottom:6px}
.grafico-barra-trilho{height:10px;border-radius:99px;background:var(--bg3);overflow:hidden}
.grafico-barra-fill{height:100%;background:var(--accent);border-radius:99px}
/* Diferença de conferência: vermelho quando contou menos que o estoque,
   verde quando contou mais — cor puxa o sentido, o texto só descreve. */
.grafico-barra-fill-negativa{background:var(--red)}
.grafico-barra-fill-positiva{background:var(--money)}
/* Variantes pra tela de Estoque Atual — mesmo trilho/fill acima, cor pelo
   status do produto em vez de desvio de conferência. */
.grafico-barra-fill-abaixo{background:var(--red)}
.grafico-barra-fill-perto{background:var(--amber)}
.grafico-barra-fill-ok{background:var(--money)}
.grafico-barra-fill-semref{background:var(--border)}

/* Barra do Estoque Atual com traço do mínimo (v068) — o traço fica fora do
   trilho (que tem overflow:hidden) pra poder ser mais alto que a barra. Os
   segmentos são absolutos dentro do trilho; o arredondamento das pontas vem
   do próprio trilho. */
.barra-estoque{position:relative}
.barra-estoque-trilho{position:relative;height:12px}
.barra-estoque-seg{position:absolute;top:0;bottom:0}
.barra-estoque-ok-claro{background:var(--money-claro)}
.barra-estoque-ok{background:var(--money)}
.barra-estoque-perto-claro{background:var(--amber-claro)}
.barra-estoque-perto{background:var(--amber)}
.barra-estoque-abaixo{background:var(--red)}
.barra-estoque-falta{
  background:repeating-linear-gradient(-45deg,var(--red-soft) 0 4px,var(--red-bd) 4px 7px);
}
.barra-estoque-marca{
  position:absolute;top:-4px;height:20px;width:4px;border-radius:2px;
  background:var(--text);box-shadow:0 0 0 2px var(--card);transform:translateX(-50%);
}
/* Legenda discreta embaixo da barra (v069): distância do mínimo à esquerda,
   o próprio mínimo à direita. Cinza; só a distância ganha a cor do status. */
.barra-estoque-legenda{
  display:flex;justify-content:space-between;gap:8px;margin-top:6px;
  font-size:12.5px;color:var(--text3);
}
.barra-estoque-legenda-abaixo{color:var(--red);font-weight:600}
.barra-estoque-legenda-perto{color:var(--amber);font-weight:600}
.barra-estoque-legenda-ok{color:var(--money);font-weight:600}

/* Linha do Estoque Atual é tocável (abre a janela do produto, v070) —
   setinha discreta no fim do nome avisa que dá pra tocar. */
.linha-estoque-clicavel{cursor:pointer}
.linha-estoque-clicavel:active,.linha-estoque-clicavel.apertado{background:var(--bg3)}
.linha-estoque-seta{margin-left:4px;color:var(--text3);font-weight:700}

/* ── Janela do produto (v070) ─────────────────────────────────────────── */
.modal-cartao.modal-cartao-largo{max-width:460px;padding:22px 18px}
.janela-produto-titulo{margin-bottom:2px!important}
.janela-produto-sub{font-size:13.5px;color:var(--text3);margin-bottom:16px}
.janela-produto-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.janela-produto-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-align:center;background:var(--bg3);border-radius:12px;padding:10px 6px;min-height:84px;
}
.janela-produto-card-rotulo{font-size:11.5px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.3px}
.janela-produto-card-valor{font-size:13px;font-weight:700;line-height:1.3;color:var(--text)}
.janela-produto-card-grande{font-size:18px}
.janela-produto-card-medio{font-size:15px}
/* Quadro do Mínimo é um botão (v072): borda tracejada na cor da marca e
   "✎ Alterar" embaixo, pra ficar óbvio que dá pra tocar. */
.janela-produto-card-editavel{
  font-family:inherit;cursor:pointer;border:1.5px dashed var(--accent-bd);
}
.janela-produto-card-editavel.ativo{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
.janela-produto-card-acao{font-size:11.5px;font-weight:700;color:var(--accent)}
.janela-produto-editor{
  background:var(--bg3);border-radius:12px;padding:14px;margin:-8px 0 18px;
}
.janela-produto-editor .sufixo input{margin-bottom:8px;background:var(--card)}
.janela-produto-editor-dica{font-size:12.5px;color:var(--text2);margin-bottom:12px;line-height:1.45}
/* Mínimo sugerido pelo Estok (v126) — caixa clara com o selo ✦; o botão
   grava, nada vira mínimo sozinho. */
.janela-produto-sugestao{background:var(--accent-soft);border:1.5px solid var(--accent-bd);border-radius:var(--radius);padding:14px;margin:0 0 14px}
.janela-produto-sugestao p{font-size:15px;line-height:1.45;margin:0 0 4px;color:var(--text)}
.janela-produto-sugestao small{display:block;font-size:12.5px;color:var(--text2);margin-bottom:12px}
.janela-produto-sugestao .btn-primario{width:100%;margin:0}
.janela-produto-sugestao-chip{display:block;margin:-4px 0 12px;padding:9px 14px;border-radius:99px;border:1.5px solid var(--accent-bd);background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:14px;font-family:inherit}
/* Fechar sempre à vista, mesmo com a lista longa: rodapé grudado no fim da
   janela (que rola por dentro, max-height 88%). Margens negativas = padding
   do .modal-cartao-largo, pra faixa de fundo ir de borda a borda. */
.janela-produto-rodape{
  position:sticky;bottom:-22px;margin:0 -18px -22px;padding:12px 18px 22px;
  background:var(--card);border-top:1px solid var(--border);
}
.janela-produto-ver-mais{
  display:block;width:100%;margin:4px 0 14px;padding:12px;border-radius:10px;
  background:none;border:1.5px solid var(--border);font-family:inherit;
  font-size:14px;font-weight:700;color:var(--accent);cursor:pointer;
}
.janela-produto-ver-mais:active,.janela-produto-ver-mais.apertado{background:var(--bg3)}
/* Abas da lista (v074): Conferências | Entradas e saídas — reaproveita o
   .chip-filtro dos filtros de categoria. */
.janela-produto-tipo{font-weight:800;font-size:14px;color:var(--text);margin-top:2px}
.janela-produto-mov-qtd{font-weight:700;font-size:15px}
.janela-produto-mov-entrada{color:var(--money)}
.janela-produto-mov-desperdicio{color:var(--amber)}
.janela-produto-mov-saida{color:var(--text)}
.janela-produto-card-sub{font-size:11.5px;color:var(--text3)}
.janela-produto-dif--1{color:var(--red)}
.janela-produto-dif-1{color:var(--money)}
.janela-produto-dif-0{color:var(--money)}
.janela-produto-secao{font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.3px;margin:4px 0 8px}

.grafico-conf{width:100%;height:auto;display:block;margin-bottom:14px;overflow:visible}
.grafico-conf-base{stroke:var(--border);stroke-width:1}
.grafico-conf-area{fill:var(--accent-soft)}
.grafico-conf-linha{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.grafico-conf-ponto{stroke:var(--card);stroke-width:2}
.grafico-conf-valor{font-size:12px;font-weight:700;fill:var(--text)}
.grafico-conf-data{font-size:11px;fill:var(--text3)}
.grafico-conf-data-hoje{font-weight:700;fill:var(--text)}
.grafico-conf-linha-hoje{stroke-dasharray:4 4}
.grafico-conf-minimo{stroke:var(--text2);stroke-width:1.5;stroke-dasharray:5 4}
.grafico-conf-minimo-rotulo{font-size:11px;font-weight:700;fill:var(--text2)}

.janela-produto-conf{
  display:flex;justify-content:space-between;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--border);font-size:13.5px;
}
.janela-produto-conf:last-of-type{border-bottom:none;margin-bottom:14px}
.janela-produto-conf-data{font-weight:600;white-space:nowrap}
.janela-produto-conf-numeros{text-align:right;color:var(--text2)}
.janela-produto-conf-numeros b{color:var(--text)}

/* ── Conferência (Fase 4, parte 2) ────────────────────────────────────────
   Contagem às cegas, um produto por vez: só o essencial fica grande (nome,
   campo, confirmar) — trocar quem conta, escolher outro produto, pular e
   finalizar ficam sempre à mão, mas menores (ux-simplicidade-7-80). */
/* Progresso em barra empilhada: verde=conferido, âmbar=pulado, o resto do
   trilho (--bg3) já É a cor de "falta" — não precisa de um terceiro <div>.
   Uma olhada resolve, sem precisar ler "3 de 12". */
.conf-barra-empilhada{height:14px;border-radius:99px;background:var(--bg3);overflow:hidden;margin-bottom:10px;display:flex}
.conf-barra-parte{height:100%;transform-origin:left;transition:width .3s ease,transform .35s cubic-bezier(0.2,0,0,1)}
.conf-barra-parte-conferidos{background:var(--money)}
.conf-barra-parte-pulados{background:var(--amber)}
@media (prefers-reduced-motion: reduce){
  .conf-barra-parte{transition:none}
}
.conf-legenda{display:flex;flex-wrap:wrap;gap:14px;font-size:13.5px;font-weight:700;margin-bottom:12px}
.conf-legenda-item{display:flex;align-items:center;gap:6px;color:var(--text2)}
.conf-legenda-bolinha{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.conf-legenda-bolinha-conferidos{background:var(--money)}
.conf-legenda-bolinha-pulados{background:var(--amber)}
.conf-legenda-bolinha-faltam{background:var(--text3)}
/* Quem + o quê juntos, bem em cima do cartão — pedido do Pedro, 23/09/2026:
   antes a categoria ficava sozinha no topo e o operador só aparecia embaixo
   da barra, então as duas informações nunca liam juntas de primeira. */
.conferencia-quem{background:none;border:none;color:var(--text2);font-size:14.5px;font-weight:600;padding:0;text-align:left;margin-bottom:10px;display:block}
.conferencia-quem b{color:var(--text)}
.conferencia-trocar{color:var(--accent);font-weight:700}

.conferencia-produto-nome{font-size:22px;margin-bottom:18px;text-align:center}
.conferencia-produto .sufixo input{font-size:22px;font-weight:700;text-align:center;padding:16px 52px 16px 14px}
.conferencia-produto .sufixo>span{font-size:16px;font-weight:700;color:var(--text2)}
/* Campo da quantidade "respira" de leve até o primeiro toque — a tela abre
   sem teclado (13/10/2026) e isso mostra onde tocar. Borda + halo na cor do
   app; quem pede menos movimento vê só a borda colorida, parada. */
.campo-pulsando{border-color:var(--accent-bd);animation:campoPulsando 2s ease-in-out infinite}
@keyframes campoPulsando{
  0%,100%{box-shadow:0 0 0 0 rgba(194,65,12,0)}
  50%{box-shadow:0 0 0 5px rgba(194,65,12,.18)}
}
@media (prefers-reduced-motion:reduce){.campo-pulsando{animation:none}}
.conferencia-produto .btn-primario{margin-top:16px}

.conferencia-acoes-secundarias{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.conferencia-btn-secundario{
  flex:1 1 40%;padding:12px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg3);color:var(--text2);font-weight:600;font-size:14px;
}
/* As duas saídas pra resolver um imprevisto sem sair da conferência ganham
   cor — a mesma cor que Produto/Entrada já têm no resto do app (acento da
   marca pro cadastro, verde de "entrando estoque" pra mercadoria chegando)
   — em vez de ficar igual aos botões neutros de navegação (Pular/Escolher). */
.conferencia-btn-novo{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-bd)}
.conferencia-btn-entrada{background:var(--money-soft);color:var(--money);border-color:var(--money-bd)}
/* "Escolher outro" é o botão de navegação mais usado dos dois neutros —
   ganha contorno na cor da marca pra se diferenciar de "Pular", mas sem o
   preenchimento sólido de "Produto novo" (que é uma cor com outro
   significado: cadastrar algo novo, não navegar pra uma lista). */
.conferencia-btn-escolher{background:var(--bg3);color:var(--accent);border:2px solid var(--accent)}

.conferencia-btn-finalizar{
  width:100%;margin-top:6px;padding:14px;
  background:var(--money);border:none;border-radius:10px;
  color:#fff;font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}

.conferencia-vazio{text-align:center;padding:10px 0}
.conferencia-vazio p{color:var(--text2);font-size:15px;margin-bottom:18px;line-height:1.6}
.cartao-secao.conferencia-vazio-perfeito{
  background:var(--money-soft);border:1px solid var(--money-bd);
  animation:resumoPerfeitoEntrada .3s cubic-bezier(0.2,0,0,1);
}
@keyframes resumoPerfeitoEntrada{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .conferencia-vazio-perfeito{animation:none}
}

/* ── Lista da conferência ("Escolher outro", parte 2) ─────────────────────
   Cada produto mostra o status num círculo (nunca só a cor: ✓/– dentro dele
   diferenciam sozinhos) — conferido some com check verde, pulado com
   traço âmbar, o que falta fica um anel vazio (mesmo "silêncio visual" do
   caso normal em statusEstoque). Já conferido ganha uma 2ª linha com quanto
   contou e a diferença — não fere a contagem às cegas, porque essa
   diferença já foi revelada no toast na hora de confirmar aquele produto. */
.conf-item-linha{
  width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--border);border-left:none;border-right:none;border-top:none;
  text-align:left;background:none;color:var(--text);
}
.conf-item-linha:active,.conf-item-linha.apertado{background:var(--bg3)}
.conf-item-status{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;
}
.conf-item-status-conferido{background:var(--money);border-color:var(--money)}
.conf-item-status-pulado{background:var(--amber);border-color:var(--amber)}
.conf-item-textos{flex:1;min-width:0}
.conf-item-nome{font-weight:700;font-size:15px}
.conf-item-detalhe{font-size:13px;color:var(--text2);margin-top:2px}
.conf-item-dif-positiva{color:var(--money);font-weight:700}
.conf-item-dif-negativa{color:var(--red);font-weight:700}
.conf-item-alterar{flex-shrink:0;font-size:13px;font-weight:700;color:var(--accent)}

/* ── "Qual produto?" da Entrada/Saída/Desperdício (v130) ──────────────────
   Mesma folha com busca + chips da lista da Conferência. Quantidade sempre
   à direita, grande — é o que a pessoa confere antes de tocar. Uma cor só
   (v131): sem alarme de repor aqui; zerado só fica mais apagado. */
.mov-produto-linha{
  width:100%;display:flex;align-items:center;gap:12px;padding:14px 12px;min-height:60px;
  border-bottom:1px solid var(--border);border-left:none;border-right:none;border-top:none;
  text-align:left;background:none;color:var(--text);
}
.mov-produto-linha:active,.mov-produto-linha.apertado{background:var(--bg3)}
.mov-produto-textos{flex:1;min-width:0;display:flex;flex-direction:column}
.mov-produto-nome{font-weight:700;font-size:16px}
.mov-produto-detalhe{font-size:13px;color:var(--text2);margin-top:2px}
.mov-produto-valor{flex-shrink:0;font-weight:800;font-size:17px;white-space:nowrap;text-align:right}
.mov-produto-valor-zerado{color:var(--text3)}

/* Cartão "✓ Entrada registrada" (v130, passo 3) — no lugar do toast. */
.mov-ok{text-align:center;margin-bottom:20px}
.mov-ok h3{margin-bottom:6px}
.mov-ok-icone{
  width:54px;height:54px;border-radius:50%;margin:2px auto 12px;display:flex;align-items:center;justify-content:center;
  background:var(--bg3);color:var(--text);
}
.mov-ok-icone-entrada{background:var(--money-soft);color:var(--money)}
.mov-ok-produto{font-size:17px;font-weight:700;margin-bottom:12px}
.mov-ok-conta{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border-radius:var(--radius);background:var(--bg3);border:1px solid var(--border);
}
.mov-ok-antes{font-size:16px;color:var(--text2);font-weight:600}
.mov-ok-seta{font-size:20px;color:var(--text3)}
.mov-ok-depois{font-size:24px;font-weight:800}
.mov-ok-detalhe{font-size:14px;color:var(--text2);margin-top:10px}
.mov-ok .mov-ok-aviso{margin:14px 0 0;text-align:left}

/* "Tem agora → Vai ficar" no modal de quantidade (v130, passo 2). Verde só
   quando sobe (Entrada). Saída maior que o estoque fica AMARELO, não
   vermelho: não é erro de quem está registrando, e o botão segue liberado. */
.mov-saldo{
  display:flex;align-items:center;gap:10px;margin:4px 0 16px;padding:12px 14px;
  border-radius:var(--radius);background:var(--bg3);border:1px solid var(--border);
}
.mov-saldo-caixa{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.mov-saldo-caixa + .mov-saldo-seta + .mov-saldo-caixa{text-align:right}
.mov-saldo-rotulo{font-size:13px;color:var(--text2)}
.mov-saldo-valor{font-size:20px;font-weight:800;white-space:nowrap}
.mov-saldo-seta{font-size:20px;color:var(--text3);flex-shrink:0}
.mov-saldo-subindo #modal-mov-vai-ficar{color:var(--money)}
.mov-saldo-passou{background:var(--amber-soft);border-color:var(--amber-bd)}
.mov-saldo-passou #modal-mov-vai-ficar{color:var(--amber)}
.janela-produto-faltou{color:var(--amber);font-weight:600;font-size:13px;margin-top:2px}
.mov-saldo-aviso{
  color:var(--amber);font-weight:600;font-size:14.5px;line-height:1.4;margin:-4px 0 14px;
  padding:10px 12px;border-radius:12px;background:var(--amber-soft);border:1px solid var(--amber-bd);
}

/* ── Resumo final da conferência (parte 4) ─────────────────────────────── */
.conf-legenda-centro{justify-content:center;margin-bottom:0}
.conf-resumo-titulo{margin-bottom:12px}
.conf-resumo-diferenca-texto{font-size:13px;color:var(--text2);margin-top:4px}

.modal-botoes-coluna{flex-direction:column}

.cartao-secao{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;margin-bottom:20px;
}

/* Cabeçalho de cartão que abre/fecha (ex: "Cadastro manual") — compacto por
   padrão, só o "+" indica que dá pra abrir. Evita que o formulário inteiro
   (vários campos) ocupe espaço o tempo todo quando o caminho mais rápido
   (catálogo pronto) resolve a maioria dos casos. */
.cartao-secao-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:none;text-align:left;font-family:inherit;padding:0;color:var(--text);
}
.toggle-icone{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);
  background:var(--bg3);color:var(--text2);display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;transition:transform .15s ease;
}
.cartao-secao-toggle[aria-expanded="true"] .toggle-icone{transform:rotate(45deg)}
#secao-manual-conteudo{margin-top:18px}

.lista-vazia{color:var(--text3);font-size:14.5px;text-align:center;padding:20px 0}

/* Mostra só ~2 produtos por vez, com rolagem própria dentro da lista — sem
   isso, uma despensa com muitos itens empurra o card "Novo produto" cada vez
   mais pra baixo, e quem tá cadastrando vários produtos seguidos perde o
   card de vista. A altura deixa a 3ª linha espiando cortada de propósito:
   é a pista visual de que dá pra rolar, sem precisar de texto explicando. */
#lista-produtos{max-height:290px;overflow-y:auto}

/* Chips de filtro por categoria — rolagem horizontal, sem barra visível.
   "Todos" mais as categorias ativas, cada uma com a contagem de produtos. */
.chips-filtro-wrap{position:relative;margin-bottom:16px}
.chips-filtro{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chips-filtro::-webkit-scrollbar{display:none}
.chip-filtro{
  flex-shrink:0;white-space:nowrap;border:1px solid var(--border);background:var(--bg3);
  color:var(--text2);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;
}
.chip-filtro.ativo{background:var(--accent-soft);border-color:var(--accent-bd);color:var(--accent)}

/* Pista de que tem mais categoria pra ver: sombra esmaecendo na borda +
   setinha clicável. No toque o arrastar já funciona sozinho; no mouse, sem
   isso, ninguém adivinha que a lista continua pro lado. Some sozinho quando
   não tem mais nada pra rolar naquela direção — controlado por
   ligarRolagemChips() em js/ui.js. */
.chips-sombra{
  position:absolute;top:0;bottom:0;width:32px;pointer-events:none;
  opacity:0;transition:opacity .2s ease;
}
.chips-sombra-esq{left:0;background:linear-gradient(to right, var(--card), transparent)}
.chips-sombra-dir{right:0;background:linear-gradient(to left, var(--card), transparent)}
.chips-sombra.visivel{opacity:1}

.chips-seta{
  position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  border:1px solid var(--border);background:var(--bg2);color:var(--text2);
  align-items:center;justify-content:center;box-shadow:var(--shadow);z-index:2;
  display:none;
}
.chips-seta.visivel{display:flex}
.chips-seta-esq{left:-4px}
.chips-seta-dir{right:-4px}
.chips-seta svg{width:14px;height:14px}

.linha-cadastro{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--border);
}
.linha-cadastro:last-child{border-bottom:none}
.linha-cadastro.inativa .linha-cadastro-nome{color:var(--text3)}
.linha-cadastro-nome{font-weight:600;font-size:15px;display:flex;flex-direction:column;gap:3px;min-width:0}
.linha-cadastro-detalhe{font-weight:500;font-size:13px;color:var(--text2)}
.linha-cadastro-acoes{display:flex;gap:8px;flex-wrap:wrap}

.badge-inativo{
  font-size:13px;font-weight:700;color:var(--text2);background:var(--bg3);
  border-radius:6px;padding:2px 8px;margin-left:6px;
}

.badge-destaque{
  font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-soft);
  border-radius:6px;padding:2px 8px;margin-left:6px;
}

.btn-chip{
  border:1px solid var(--border);background:var(--bg3);color:var(--text);
  border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;
}
.btn-chip-perigo{color:var(--red);border-color:var(--red-bd)}

.form-inline{display:flex;gap:10px;margin-top:4px}
.form-inline input{margin-bottom:0;flex:1}
.form-inline button{width:auto;padding:13px 20px;white-space:nowrap}

/* Campo de dinheiro: "R$" fixo à esquerda, o resto é a máscara de centavos
   (js/calc.js) — mesmo padrão do Passex. */
/* Campo de senha com botão "Mostrar"/"Esconder" (ligarMostrarSenha, js/ui.js).
   A margem sai do input e vai pra caixa, pra o botão ficar centrado no campo. */
.campo-senha{position:relative;margin-bottom:16px}
.campo-senha input{margin-bottom:0;padding-right:118px}
.btn-mostrar-senha{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:6px;min-height:40px;padding:6px 10px;border:0;
  border-radius:8px;background:transparent;color:var(--text2);font:inherit;
  font-size:14px;font-weight:700;cursor:pointer}
.btn-mostrar-senha svg{width:20px;height:20px;flex:none}
.btn-mostrar-senha:hover,.btn-mostrar-senha:focus-visible{background:var(--accent-soft);color:var(--accent)}

.prefixo{position:relative}
.prefixo>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);
              font-size:15px;color:var(--text3);font-weight:600;pointer-events:none}
.prefixo input{padding-left:40px}

/* Campo de quantidade: mostra a unidade escolhida do lado direito (ex: "5 kg"),
   sempre visível e atualiza sozinha se trocar a unidade — evita cadastrar
   número sem perceber que a unidade não é a que a pessoa tinha em mente. */
.sufixo{position:relative}
.sufixo>span{position:absolute;right:14px;top:50%;transform:translateY(-50%);
             font-size:14px;color:var(--text2);font-weight:600;pointer-events:none}
.sufixo input{padding-right:52px}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,12,4,.55);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-cartao{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:26px 24px;width:100%;max-width:400px;
}
.modal-cartao h3{font-size:18px;margin-bottom:16px}
.modal-texto{color:var(--text);font-size:15px;line-height:1.6;margin-bottom:22px}
.modal-aviso-corpo .modal-texto{margin-bottom:12px}
.modal-aviso-corpo{margin-bottom:22px}
.lista-cabecalho{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.lista-cabecalho .btn-chip{white-space:nowrap;flex-shrink:0}
/* Botão que aponta o caminho certo: pulso suave de sombra (sem mexer no
   tamanho, pra não desalinhar o toque). Quem pede menos movimento não vê. */
.btn-piscando{animation:botaoPiscando 1.8s ease-in-out infinite}
@keyframes botaoPiscando{
  0%,100%{box-shadow:0 0 0 0 rgba(194,65,12,0);filter:brightness(1)}
  50%{box-shadow:0 0 0 6px rgba(194,65,12,.28);filter:brightness(1.12)}
}
@media (prefers-reduced-motion:reduce){.btn-piscando{animation:none}}
.modal-cartao input[type=text],.modal-cartao input[type=number],.modal-cartao select{margin-bottom:20px}
.modal-cartao{max-height:88%;overflow-y:auto}
/* Teclado aberto (classe posta por protegerDoTeclado, js/ui.js): cartão sobe
   pro topo da faixa visível e aperta o espaçamento, pra mostrar tudo sem rolar. */
.modal-overlay.teclado-aberto{align-items:flex-start;padding:8px 12px}
.modal-overlay.teclado-aberto .modal-cartao{max-height:100%;padding:12px 16px}
.modal-overlay.teclado-aberto .modal-cartao h3{font-size:16px;margin-bottom:6px}
.modal-overlay.teclado-aberto .modal-cartao label{margin-bottom:3px}
.modal-overlay.teclado-aberto .modal-cartao input[type=text],
.modal-overlay.teclado-aberto .modal-cartao input[type=number],
.modal-overlay.teclado-aberto .modal-cartao select{margin-bottom:8px}
/* Texto só informativo some enquanto digita: o que importa é campo + botões. */
.modal-overlay.teclado-aberto .compra-modal-origem,
.modal-overlay.teclado-aberto .compra-modal-saldo{display:none}
.modal-overlay.teclado-aberto .modal-botoes button{padding:10px}
.modal-botoes{display:flex;gap:10px}
.modal-botoes button{flex:1;padding:13px;border-radius:10px;font-weight:700;font-size:15px;border:none}
.modal-btn-cancelar{background:var(--bg3);color:var(--text)}
.modal-btn-confirmar{background:var(--accent);color:#fff}
.modal-btn-perigo{background:var(--red);color:#fff}

/* ── Seletor de opção (categoria, unidade...) ─────────────────────────────
   Substitui <select> nativo: em celular, quem desenha a lista suspensa de um
   select é o sistema operacional, não o Estok — em tema escuro às vezes abre
   branca, sem nada a ver com o resto do app. Aqui o Estok desenha tudo, com
   toque grande, igual em qualquer aparelho. Padrão Portela Systems desde
   13/09/2026. */
.campo-selecao{
  width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg3);color:var(--text);margin-bottom:16px;font-size:16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  text-align:left;font-family:inherit;
}
.campo-selecao.vazio{color:var(--text3)}
.campo-selecao .seta-selecao{flex-shrink:0;color:var(--text3);width:18px;height:18px}

/* ── Campo com erro (validação de formulário) ─────────────────────────────
   Borda vermelha FICA até a pessoa corrigir (destacarErro/limparErro, em
   js/ui.js) — o tremidinho é só um pulso de meio segundo pra chamar o olho
   na hora, não fica piscando pra sempre (cansa a vista, mexe com quem tem
   sensibilidade a luz). Funciona em <input> e em .campo-selecao (mesma
   borda de 1px nos dois). */
input.campo-erro,.campo-selecao.campo-erro{border-color:var(--red)}
@keyframes tremidinho{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.tremendo{animation:tremidinho .4s ease}

/* Regras da senha: cada linha começa cinza (○) e vira verde (✓) conforme a
   pessoa digita — mostra o que falta sem ela precisar errar pra descobrir. */
.regras-senha{list-style:none;margin:10px 0 16px;padding:0;display:flex;flex-direction:column;gap:6px}
.regras-senha li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text3)}
.regras-senha li::before{content:'○';width:18px;text-align:center;font-weight:800}
.regras-senha li.ok{color:var(--money);font-weight:600}
.regras-senha li.ok::before{content:'✓'}

/* Depois de criar a conta: mensagem FIXA (não some sozinha como o aviso
   rápido) no lugar do formulário, só com o caminho de volta pra "Entrar". */
.aviso-conta-criada{
  margin:6px 0 10px;padding:16px;border-radius:12px;
  background:var(--money-soft);border:1px solid var(--money-bd);
  font-size:15px;line-height:1.5;color:var(--text);
}
.aviso-conta-criada strong{display:block;margin-bottom:6px;font-size:17px;color:var(--money)}
.aviso-conta-criada p{margin:0 0 8px}
.aviso-conta-criada p:last-child{margin-bottom:0;color:var(--text2)}
.aviso-conta-criada b{overflow-wrap:anywhere}

/* Caixinha de aceite dos Termos (tela "Abrir sua cozinha"). Alvo de toque
   grande: a caixa e o texto marcam juntos; os links abrem em outra aba. */
.aceite-linha{
  display:flex;align-items:flex-start;gap:12px;margin:18px 0 14px;padding:12px;
  border:1px solid var(--border);border-radius:10px;cursor:pointer;
  font-size:14px;line-height:1.45;color:var(--text2);
}
.aceite-linha input{flex-shrink:0;width:22px;height:22px;margin:0;accent-color:var(--accent,#c8731a)}
.aceite-linha a{color:inherit;font-weight:700;text-decoration:underline}
.aceite-linha.campo-erro{border-color:var(--red)}

.seletor-overlay{
  position:fixed;inset:0;background:rgba(20,12,4,.55);z-index:400;
  display:flex;align-items:flex-end;justify-content:center;padding:0;
}
.seletor-cartao{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:var(--shadow);width:100%;max-width:440px;max-height:80%;
  display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);
}
/* #seletor-overlay (escolherOpcao em js/ui.js — operador, categoria, "quem
   está continuando", produto avulso na Entrada/Conferência) é sempre uma
   lista que cabe rolando dentro de 80% da tela, sem busca: centralizada no
   meio, igual ao .modal-overlay. #catalogo-overlay (escolher do catálogo
   pronto, com busca + chips) continua subindo do fundo — decisão do Pedro,
   20/09/2026: só sobe do fundo quem precisa da altura extra pra rolar muito
   item com busca; o resto (a maioria) é mais fácil de ver centralizado. */
#seletor-overlay{align-items:center;padding:20px}
#seletor-cartao{border-radius:var(--radius-lg);padding-bottom:0}
.seletor-topo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px 14px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.seletor-topo h3{font-size:17px}
.seletor-fechar{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
  background:var(--bg3);color:var(--text2);font-size:16px;flex-shrink:0;
}
.seletor-lista{overflow-y:auto;padding:0}
/* Lista listrada (branco / cinza claro alternado) — pedido do Pedro,
   23/09/2026: linha colada de ponta a ponta, sem cantos e sem espaço entre
   itens, porque listra só funciona lendo como UMA lista contínua. Vale pra
   todo lugar que abre esse modal (operador, categoria, unidade, "quem está
   continuando", produto avulso), não só a Conferência. */
.seletor-item{
  width:100%;padding:15px 20px;border:none;background:var(--card);
  color:var(--text);font-size:15.5px;font-weight:600;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:inherit;
}
.seletor-item:nth-of-type(even){background:var(--bg3)}
.seletor-item:active,.seletor-item.apertado{background:var(--accent-soft)}
.seletor-item.selecionado{background:var(--accent-soft);color:var(--accent)}
.seletor-item .seletor-check{flex-shrink:0;color:var(--accent)}
/* Linha de apoio opcional embaixo do nome (4º item da tupla em escolherOpcao) */
.seletor-item .seletor-detalhe{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:var(--text3)}
/* Opção "especial" (ex: "Despensa toda") — ainda buscando o equilíbrio
   certo, 23/09/2026: negrito+cor+linha (v053) pareceu não parecer botão;
   fundo sólido (v054) o Pedro achou esquisito depois de usar. Decisão dele
   pra fechar a sessão: volta a ficar igual às opções normais da lista, só
   com a letra mais destacada (peso maior) — sem cor nem fundo diferentes.
   Assunto em aberto, ele quer pensar melhor antes de mexer de novo aqui. */
.seletor-item.seletor-item-especial{font-weight:800}
.seletor-vazio{color:var(--text3);font-size:14.5px;text-align:center;padding:24px 20px}
/* Variante em cartões (escolherOpcao({ cartoes: true }), 13/10/2026, pedido do
   Pedro pra Conferência): cada opção é um botão de verdade — borda, sombra
   embaixo e "afunda" ao tocar (desce 3px e a sombra some). Só nos seletores
   curtos da Conferência; o resto do app continua com a lista listrada. */
.seletor-lista-cartoes{display:flex;flex-direction:column;gap:10px;padding:14px 16px 18px}
.seletor-lista-cartoes .seletor-item,
.seletor-lista-cartoes .seletor-item:nth-of-type(even){
  background:var(--card);border:1.5px solid var(--border);border-radius:14px;
  padding:17px 18px;font-size:17px;box-shadow:0 3px 0 var(--border);
  transition:transform .08s ease,box-shadow .08s ease,background .08s ease;
}
.seletor-lista-cartoes .seletor-item:active,
.seletor-lista-cartoes .seletor-item.afundado{
  transform:translateY(3px);box-shadow:0 0 0 var(--border);background:var(--accent-soft);
}
.seletor-lista-cartoes .seletor-item.seletor-item-especial{border-color:var(--accent-bd)}
@media (prefers-reduced-motion:reduce){.seletor-lista-cartoes .seletor-item{transition:none}}

/* ── Escolher do catálogo pronto (Produtos, parte 2) ──────────────────────
   Mesma folha do seletor, só mais alta (tem busca + chips + rodapé fixo em
   cima da lista rolável). A altura é o MENOR entre duas medidas:
   - 92% de `--vh-cheio` (o tamanho de tela ANTES do teclado abrir, travado
     em js/ui.js) — o tamanho "padrão" da folha, sempre o mesmo não importa
     quantos produtos aparecem, resolve o "pulo" do botão "Adicionar"
     mudando de lugar a cada filtro trocado;
   - 100% da altura ATUAL do overlay (que encolhe com o teclado, ver
     `protegerDoTeclado` em js/ui.js) — trava um teto pra folha NUNCA passar
     do espaço de tela que sobra visível, então o botão "Adicionar" nunca
     fica atrás do teclado.
   Sem teclado as duas medidas são quase iguais (folha no tamanho padrão).
   Com teclado grande tomando a tela, a segunda vence e a folha encolhe até
   caber — aí quem cede espaço é a lista de resultado (ela é a única parte
   elástica, com rolagem própria), nunca o cabeçalho, a busca ou o botão. */
.catalogo-cartao{max-height:none;height:min(calc(var(--vh-cheio, 100vh) * 0.92), 100%)}
.catalogo-filtros{padding:14px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.catalogo-filtros input{margin-bottom:12px}
.catalogo-filtros .chips-filtro{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.catalogo-filtros .chips-filtro::-webkit-scrollbar{display:none}
.catalogo-lista{overflow-y:auto;padding:8px 10px;flex:1}
.catalogo-item{
  width:100%;padding:13px 10px;border-radius:10px;border:none;background:transparent;
  color:var(--text);text-align:left;display:flex;align-items:center;justify-content:space-between;
  gap:10px;font-family:inherit;
}
.catalogo-item:active,.catalogo-item.apertado{background:var(--bg3)}
.catalogo-item.selecionado{background:var(--accent-soft)}
.catalogo-item-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.catalogo-item-nome{font-weight:600;font-size:15px}
.catalogo-item-detalhe{font-size:13px;color:var(--text2)}
.catalogo-item-check{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--border);
  color:#fff;display:flex;align-items:center;justify-content:center}
.catalogo-item.selecionado .catalogo-item-check{background:var(--accent);border-color:var(--accent)}
.catalogo-rodape{padding:14px 16px;border-top:1px solid var(--border);flex-shrink:0;
  padding-bottom:calc(14px + env(safe-area-inset-bottom))}

/* ── Convite de instalação (app) ──────────────────────────────────────── */
#pwaInstallBanner,#pwaIosBanner{display:none;position:fixed;left:50%;
  transform:translateX(-50%);bottom:20px;z-index:300;width:calc(100% - 32px);
  max-width:420px;align-items:center;gap:12px;background:var(--bg3);
  border:1px solid var(--accent);border-radius:14px;padding:12px 14px;
  box-shadow:var(--shadow)}
.pwa-banner-icone{width:38px;height:38px;border-radius:9px;overflow:hidden;flex-shrink:0}
.pwa-banner-icone img{width:100%;height:100%;object-fit:cover}
.pwa-banner-txt{flex:1;min-width:0}
.pwa-banner-t{font-size:13px;font-weight:700;color:var(--text)}
.pwa-banner-s{font-size:13px;font-weight:500;color:var(--text2)}
.pwa-banner-btn{background:var(--accent);color:#fff;border:none;border-radius:8px;
  padding:8px 14px;font-size:13px;font-weight:700;white-space:nowrap;flex-shrink:0}
.pwa-banner-x{background:transparent;border:none;color:var(--text2);font-size:16px;
  padding:2px 4px;line-height:1;flex-shrink:0}
.ios-banner-passos{font-size:13px;font-weight:500;color:var(--text2);line-height:1.6}
.ios-banner-passos strong{color:var(--text)}
.modal-cartao.janela-editando .janela-produto-rodape{display:none}

/* ── Comemoração ao finalizar a Conferência (13/10/2026) ──────────────────
   Copiada da Constância (festa grande): confete curto + frase num cartão.
   pointer-events:none em tudo — decora, nunca rouba um toque do resumo.
   Quem pede menos movimento não vê nada (a função nem desenha). */
.festa{position:fixed;inset:0;z-index:450;pointer-events:none;overflow:hidden}
.festa-msg{
  position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);
  text-align:center;background:var(--card);color:var(--text);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow);padding:20px 28px;min-width:240px;
  animation:festaMsg 2.8s cubic-bezier(.2,.9,.3,1) both;
}
.festa-ico{font-size:46px;line-height:1}
.festa-txt{font-size:20px;font-weight:800;letter-spacing:-.3px;margin-top:8px}
.festa-sub{font-size:15px;color:var(--text2);margin-top:4px}
@keyframes festaMsg{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
  24%{transform:translate(-50%,-50%) scale(.97)}
  34%{transform:translate(-50%,-50%) scale(1)}
  82%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-62%) scale(1)}
}
.confete{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:cair linear both}
@keyframes cair{
  from{transform:translateY(-20px) rotate(0);opacity:1}
  to{transform:translateY(105vh) rotate(620deg);opacity:.15}
}
@media (prefers-reduced-motion:reduce){.festa{display:none}}
/* Frase do resumo que valoriza o que deu certo antes da barra (13/10/2026). */
.conf-resumo-destaque{font-size:17px;font-weight:700;color:var(--money);margin-bottom:14px}
/* Finalizar é verde: o halo do pulso acompanha a cor do botão. */
.conferencia-btn-finalizar.btn-piscando{animation-name:botaoPiscandoVerde}
@keyframes botaoPiscandoVerde{
  0%,100%{box-shadow:0 0 0 0 rgba(63,107,31,0);filter:brightness(1)}
  50%{box-shadow:0 0 0 6px rgba(63,107,31,.28);filter:brightness(1.12)}
}

/* ── Ajustes → Ordem da conferência (14/10/2026) ──────────────────────────
   Três opções em cartões grandes com bolinha de marcar (tipo rádio) — dá pra
   ver de cara qual está valendo. Mesmo "afunda ao tocar" dos cartões da
   Conferência. */
.ajustes-titulo{font-size:17px;margin-bottom:4px}
.ajustes-texto{color:var(--text2);font-size:14.5px;margin:0 0 14px}
.opcoes-ordem{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.opcao-ordem{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;font-family:inherit;
  background:var(--card);color:var(--text);border:1.5px solid var(--border);border-radius:14px;
  padding:15px 16px;box-shadow:0 3px 0 var(--border);
  transition:transform .08s ease,box-shadow .08s ease,background .08s ease;
}
.opcao-ordem:active{transform:translateY(3px);box-shadow:0 0 0 var(--border);translate:none}
.opcao-ordem.selecionado{border-color:var(--accent-bd);background:var(--accent-soft)}
.opcao-ordem-marca{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--border);background:var(--bg2);
}
.opcao-ordem.selecionado .opcao-ordem-marca{border:7px solid var(--accent);background:var(--card)}
.opcao-ordem-texto{display:flex;flex-direction:column;gap:3px;min-width:0}
.opcao-ordem-texto b{font-size:16.5px}
.opcao-ordem-texto small{font-size:13.5px;color:var(--text2);font-weight:500}
@media (prefers-reduced-motion:reduce){.opcao-ordem{transition:none}}

.fila-previa{margin:0;padding-left:28px;display:flex;flex-direction:column;gap:8px}
.fila-previa li{font-size:15px;font-weight:600}
.fila-previa li small{display:block;font-size:12.5px;font-weight:500;color:var(--text3)}
.fila-previa .fila-previa-mais{list-style:none;margin-left:-28px;color:var(--text3);font-weight:500}

/* Minha ordem: abas "Faltam / Na fila" e lista de tocar em sequência. */
#abas-minha-ordem{margin-bottom:14px}
#abas-minha-ordem .chip-filtro{font-size:15px;padding:10px 18px}
.ordem-item-faltam{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 4px;border:none;border-bottom:1px solid var(--border);background:none;
  color:var(--text);font-family:inherit;font-size:16px;font-weight:600;text-align:left;
}
.ordem-item-faltam:last-child{border-bottom:none}
.ordem-item-faltam:active{background:var(--accent-soft);translate:none}
.ordem-item-mais{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;
}
.ordem-item-fila{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.ordem-item-fila:last-child{border-bottom:none}
.ordem-item-numero{
  flex-shrink:0;min-width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;padding:0 6px;
}
.ordem-item-nome{flex:1;min-width:0;font-weight:600;font-size:15.5px;overflow-wrap:anywhere}
.ordem-item-acoes{display:flex;gap:6px;flex-shrink:0}
.ordem-item-acoes .btn-chip,.linha-cadastro-acoes .btn-chip[data-acao="subir"],
.linha-cadastro-acoes .btn-chip[data-acao="descer"]{min-width:42px}
.btn-chip:disabled{opacity:.35}
#btn-recomecar-ordem:not([hidden]){display:block;margin:0 auto}

/* Produto sem mínimo que já teve estoque (15/10/2026): barra cinza de
   "quanto sobrou da última vez que subiu". Neutra de propósito — sem mínimo
   não dá pra dizer se é pouco ou muito. Tom firme, não clarinho: cinza
   apagado parece "desativado" pra quem tem pouca prática com celular.
   O "Definir mínimo" é um link
   discreto (reaproveita o clique do botão grande, mas sem a borda). */
.barra-estoque-neutra{background:var(--text2)}
.barra-estoque-legenda-neutra{color:var(--text2);font-weight:600}
/* Selo do que o Estok calculou sozinho (consumo, 16/10/2026) — discreto, mas sempre escrito */
.barra-estoque-selo{margin:3px 0 0;font-size:12px;color:var(--text3)}
.linha-estoque-sem-minimo-btn.linha-estoque-definir-minimo{
  width:auto;min-height:0;padding:6px 0;margin:-6px 0;border:none;border-radius:0;
  font-size:12.5px;font-weight:700;text-decoration:underline;text-underline-offset:2px;
}
.linha-estoque-sem-minimo-btn.linha-estoque-definir-minimo:active{background:none}

/* Lista de compras — bloco "Sem mínimo, confira você" (15/10/2026). Neutro
   (cinza, igual à barra sem mínimo): informa, não manda comprar. Reaproveita
   a linha e o "+" do bloco "Aproveitar a ida?". */
.compra-bloco-sem-minimo{
  background:var(--card);border:1.5px dashed var(--border);border-radius:var(--radius);
  padding:14px 16px;margin:4px 0 20px;
}
.compra-bloco-sem-minimo h4{font-size:14.5px;color:var(--text);margin-bottom:2px}
.compra-bloco-sem-minimo p{font-size:13px;color:var(--text2);margin-bottom:8px;line-height:1.5}
.compra-bloco-sem-minimo .compra-aproveitar-item{border-bottom-color:var(--border)}
.compra-bloco-sem-minimo .compra-aproveitar-item:last-of-type{border-bottom:none}
.compra-bloco-sem-minimo .btn-mini-add{border-color:var(--text2);color:var(--text2)}
.compra-sem-minimo-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.compra-vazio + .compra-bloco-sem-minimo{text-align:left}

/* Conferência — faixa com o resultado da última contagem (15/10/2026). Fica
   DENTRO do cartão do próximo produto, no topo: o cartão é o que sobe
   colado acima do teclado, então a faixa aparece junto sem cobrir o nome,
   o campo nem os botões (o toast flutuante cobria). Cor pelo resultado;
   primeira contagem (estoque inicial) é verde, não erro. */
.conf-ultima{
  display:flex;align-items:flex-start;gap:10px;margin:-6px -6px 14px;
  padding:10px 12px;border-radius:12px;border:1px solid;font-size:14.5px;line-height:1.4;
}
.conf-ultima-icone{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;margin-top:1px;
}
.conf-ultima-texto small{font-size:12.5px;color:var(--text2)}
.conf-ultima-primeira,.conf-ultima-certo{background:var(--money-soft);border-color:var(--money-bd)}
.conf-ultima-primeira .conf-ultima-icone,.conf-ultima-certo .conf-ultima-icone{background:var(--money)}
.conf-ultima-pequena{background:var(--amber-soft);border-color:var(--amber-bd)}
.conf-ultima-pequena .conf-ultima-icone{background:var(--amber)}
.conf-ultima-grande{background:var(--red-soft);border-color:var(--red-bd)}
.conf-ultima-grande .conf-ultima-icone{background:var(--red)}

/* Resumo da conferência (15/10/2026): estoque inicial à parte, título que
   diz quantas diferenças aparecem e de quantas, e "Ver todas". */
.conf-resumo-sub{font-size:14px;color:var(--text2);line-height:1.5;margin:-6px 0 10px}
.conf-resumo-sub:last-child{margin-bottom:0}
/* v122: quem contou / quem finalizou / quando, logo abaixo do título */
.conf-resumo-quem{font-size:14.5px;color:var(--text);font-weight:600;line-height:1.5;margin:0 0 10px}
.conf-resumo-primeiras{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.conf-resumo-titulo-de{font-weight:600;color:var(--text2);font-size:.85em}
.conf-resumo-ver-todas{display:block;width:100%;margin-top:12px;padding:12px;font-size:14.5px}
.painel-ver-resumo-conferencia{display:block;margin-top:8px}

/* Troca de unidade (v128) */
.conferencia-link-unidade{margin:16px 0 0;font-size:14px;font-weight:500;color:var(--text2)}
.janela-produto-troca-unidade{
  margin:10px 0;padding:8px 12px;border-radius:10px;text-align:center;
  background:var(--bg3);font-size:14px;color:var(--text2);
}