/* ONDA L (10/09/2026) — a cara do MIM no AppBuffet.
   Tokens de cor, lateral fixa de 180px, gaveta no celular e cartoes de estatistica
   copiados de MIM_PARA_PUBLICAR/js/app.css (fonte do padrao visual, SOMENTE LEITURA).
   Fonte Sora self-hosted (subsets copiados do MIM); sem CDN: se faltar, cai na do sistema. */
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url('fontes/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url('fontes/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --berry:#1D6FB8; --berry-dark:#123C63; --berry-soft:#E4EFFB;
  --bg:#F5F4F7; --card:#FFFFFF; --ink:#241B20; --muted:#6A6072; --line:#E7E3EA;
  --ok:#2F7D46; --ok-soft:#E3F1E8;
  --late:#C13438; --late-soft:#F9E5E5;
  --pend:#9A93A1; --pend-soft:#EEECF1;
  --warn:#C77E14; --warn-soft:#F8EEDB;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Sora',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.45;
}
h1,h2,h3{font-family:'Sora',sans-serif}
.oculta{display:none!important}

/* ---------- header ---------- */
header{
  background:var(--berry-dark); color:#fff;
  padding:10px 18px; min-height:56px;
  display:flex; align-items:center; gap:12px;
  position:sticky; top:0; z-index:20;
  margin-left:180px;
}
#tituloTela{font-weight:800; font-size:18px; letter-spacing:.3px}
/* 30/09/2026: cor e nome da empresa no topo (pedido do Pedro, dois apps sem confundir) */
body[data-cor-empresa] header{background:var(--cor-empresa)}
body[data-cor-empresa] .caixa-login{border-top:8px solid var(--cor-empresa)}
body[data-cor-empresa] .caixa-login h1{color:var(--cor-empresa)}
.faixa-empresa{background:#fff; color:var(--cor-empresa, var(--berry-dark)); font-weight:800; font-size:14px;
  border-radius:99px; padding:5px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw}
.chip-usuario{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13px; opacity:.95}
.chip-usuario button{background:rgba(255,255,255,.14); color:#fff; border:none; border-radius:99px; padding:7px 14px; font-size:13px; cursor:pointer}
.chip-usuario button:hover{background:rgba(255,255,255,.24)}
.chip-usuario select{background:rgba(255,255,255,.14); color:#fff; border:none; border-radius:99px; padding:6px 10px; font-size:13px; max-width:200px}
.chip-usuario select option{color:#222}
#btnMenu{
  display:none; background:none; border:none; color:#fff;
  width:44px; height:44px; line-height:1; padding:0; cursor:pointer;
  align-items:center; justify-content:center; flex:0 0 auto;
}
#btnMenu svg{display:block}
#menuFundo{display:none}

/* ---------- lateral (sidenav do MIM) ---------- */
.sidenav{
  position:fixed; left:0; top:0; bottom:0; width:180px; z-index:25;
  background:var(--card); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:4px; padding:18px 10px; overflow-y:auto;
}
.marca-empresa{padding:0 8px 14px; display:flex; flex-direction:column; gap:6px}
.marca-empresa img{max-width:100%; height:auto; max-height:44px; object-fit:contain; background:#fff; border-radius:8px; padding:3px 6px; border:1px solid var(--line)}
.marca-empresa .nome-marca{font-weight:800; font-size:16px; color:var(--berry-dark); line-height:1.25}
.sidenav-grupo{display:flex; flex-direction:column; gap:4px}
.sidenav-divisoria{height:1px; margin:8px 10px; background:var(--line); flex:0 0 auto}
.sidenav-titulo{
  padding:2px 12px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); opacity:.75;
}
.sidenav button{
  display:flex; align-items:center; gap:10px; border:none; background:none; cursor:pointer;
  padding:10px 12px; border-radius:10px; font-size:14px; font-weight:600; color:var(--muted); text-align:left;
  font-family:inherit;
}
.sidenav button.on{background:var(--berry-soft); color:var(--berry-dark)}
/* MESMO tamanho de fonte no menu inteiro (licao paga no MIM: fonte menor no grupo de
   apoio pareceu "amador"); o que sinaliza apoio e o ICONE menor, nunca o texto. */
.sidenav .ic{
  width:26px; height:26px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.sidenav .ic svg{width:100%; height:100%; display:block}
.sidenav-secundario button{padding:8px 12px}
.sidenav-secundario button .ic{width:23px; height:23px}

main{max-width:1100px; margin:0 auto; padding:14px 16px 60px; margin-left:180px}
@media (min-width:1290px){ main{margin-left:auto; padding-left:196px} }

/* ---------- gaveta no celular (comportamento do MIM) ---------- */
@media (max-width:700px){
  .sidenav{
    width:250px; transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:2px 0 16px rgba(0,0,0,.18);
  }
  .sidenav.aberta{transform:translateX(0)}
  header,main{margin-left:0}
  #btnMenu{display:flex}
  #menuFundo{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:24}
  #menuFundo.aberta{display:block}
}

/* ---------- cartoes e estatisticas (estilo .stat do MIM) ---------- */
.cartoes{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-bottom:14px}
.cartao{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px}
.cartao .num{font-family:'Sora'; font-weight:800; font-size:24px}
.cartao .num small{font-size:11px; font-weight:600; color:var(--warn)}
.cartao .rot{font-size:12px; color:var(--muted); margin-top:2px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-bottom:10px}
.linha-topo{display:flex; align-items:center; gap:12px; margin:12px 0; flex-wrap:wrap}
.linha-topo h2{margin-right:auto; font-size:17px; font-weight:700}
.vazio{color:var(--muted); text-align:center; padding:26px 10px; font-size:14px}

/* ---------- tabelas: sempre dentro de um quadro que rola sozinho ---------- */
.quadro-tabela{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; -webkit-overflow-scrolling:touch; margin:8px 0}
table{width:100%; border-collapse:collapse; min-width:560px}
th,td{text-align:left; padding:9px 12px; font-size:14px; border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
th{background:var(--pend-soft); font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
tr.linha-click{cursor:pointer}
tr.linha-click:hover{background:var(--berry-soft)}
tr.inativo td{color:var(--pend); text-decoration:line-through}

/* ---------- formularios ---------- */
label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--muted)}
label.mini{flex-direction:row; align-items:center; gap:6px; width:auto}
label.mini input{width:auto}
input,select,textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  font:inherit; background:var(--card); color:var(--ink);
}
textarea{min-height:56px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--berry); border-color:var(--berry)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--berry); outline-offset:2px}
/* ONDA O7 — estado de salvamento dito por escrito (salvando / salvo / NÃO salvo).
   Nunca só por cor: a classe muda a cor, mas o TEXTO diz o estado. */
.estado-salvar{display:inline-block; margin-left:8px; font-size:.92em}
.estado-salvar.salvando{color:#6b5b4a}
.estado-salvar.salvo{color:#1c7a4a; font-weight:600}
.estado-salvar.nao-salvo{color:#b3261e; font-weight:600}
/* campo cuja gravação falhou: a borda marca, e o title/aviso diz o motivo em texto */
.campo-com-erro{border-color:#b3261e!important; outline:2px solid #b3261e}
/* telas-2409 (T1): numero que a tela nao entendeu (ex.: "1.5") - nada foi gravado com ele */
.campo-ilegivel{border-color:#b3261e!important; outline:2px solid #b3261e}
.grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:10px 0}
.grade .larga{grid-column:1/-1}
@media (max-width:700px){ .grade{grid-template-columns:1fr} }

/* ---------- botoes ---------- */
button{font:inherit; cursor:pointer; color:inherit; border:none; border-radius:10px; padding:10px 14px; background:var(--pend-soft); font-size:14px}
button.destaque{background:var(--berry); color:#fff; font-weight:700; border-radius:12px; padding:11px 16px}
button.destaque:active{background:var(--berry-dark)}
button.perigo{background:transparent; border:1px solid var(--late); color:var(--late)}
button.mini{padding:6px 10px; font-size:12.5px}
button[disabled],button:disabled{opacity:.45; cursor:not-allowed}
.acoes{display:flex; gap:10px; margin:12px 0; flex-wrap:wrap}

/* ---------- avisos e etiquetas ---------- */
.aviso{background:var(--warn-soft); border:1px solid var(--warn); color:#7a5600; padding:9px 12px; border-radius:10px; margin:8px 0; font-size:13.5px}
/* SOLDA DA ONDA P (12/09/2026): o par positivo do .aviso (ate aqui a tela so tinha
   caixa de alerta, e "pode fechar a proposta" precisava de uma caixa que nao assuste),
   o bloco de dado lido do documento, e a grade simples de campos do formulario. */
.ok{background:var(--ok-soft); border:1px solid var(--ok); color:#17513a; padding:9px 12px; border-radius:10px; margin:8px 0; font-size:13.5px}
/* SOLDA DA FASE 3 (13/09/2026): faltava a caixa VERMELHA. A tela tinha a amarela
   (.aviso) e a verde (.ok), e a tela de copias de seguranca precisa dizer "os dados
   estao sem protecao AGORA" — isso nao e um aviso ameno. */
.ruim{background:var(--late-soft); border:1px solid var(--late); color:#7a1f22; padding:9px 12px; border-radius:10px; margin:8px 0; font-size:13.5px}
.bloco-dado{background:var(--card,#fff); border:1px solid var(--linha,#e3e8ee); border-radius:10px; padding:10px 12px; margin:8px 0; font-size:12.5px; max-height:320px; overflow:auto; white-space:pre-wrap}
.campos{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0}
.campos label{display:flex; flex-direction:column; gap:3px; font-size:12.5px; min-width:160px; flex:1}
/* etiqueta do item escolhido no cardapio da proposta. ATENCAO: `.chip-usuario` (do
   cabecalho) ja existia, mas `.chip` NAO — a primeira versao desta tela usava a
   classe achando que existia, e as etiquetas sairiam sem desenho nenhum. */
.chips{display:flex; flex-wrap:wrap; gap:7px; margin:8px 0}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--berry-soft); color:var(--berry-dark); border:1px solid var(--berry); border-radius:99px; padding:5px 10px; font-size:12.5px; font-weight:600}
.chip button{background:transparent; border:none; color:var(--berry-dark); padding:0 2px; font-size:14px; line-height:1; cursor:pointer}
.chip button:hover{color:var(--late)}
.dica{font-size:12.5px; color:var(--muted); margin:4px 0}
.sem-custo{color:var(--late); font-size:12px; font-weight:600}
.sit{display:inline-block; padding:2px 9px; border-radius:99px; font-size:11.5px; font-weight:700}
.sit-orcamento{background:var(--warn-soft); color:var(--warn)}
.sit-fechada{background:var(--ok-soft); color:var(--ok)}
.sit-realizada{background:var(--berry-soft); color:var(--berry)}
.sit-cancelada{background:var(--late-soft); color:var(--late)}
.badge{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px}
.b-ok{background:var(--ok-soft); color:var(--ok)}
.b-late{background:var(--late-soft); color:var(--late)}
.b-pend{background:var(--pend-soft); color:var(--muted)}
.b-warn{background:var(--warn-soft); color:var(--warn)}
.b-azul{background:var(--berry-soft); color:var(--berry)}

/* aba APAGADA (decisao do dono): visivel, desbotada, sem clique util — acende quando a
   etapa da implantacao conclui. O JS ignora o clique; o cursor avisa que nao e botao. */
.sidenav button.apagada{opacity:.38; cursor:default}
.sidenav button.desligada-empresa{display:none!important} /* aba que a empresa desligou: some do menu (01/10/2026) */
.sidenav button.apagada:hover{background:none}

/* sacola de Cadastros: cartoes grandes de dedo (melhor no celular que submenu aninhado) */
.cads-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.cad-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; cursor:pointer; display:flex; flex-direction:column; gap:4px; min-height:96px;
}
.cad-card:hover{border-color:var(--berry); background:var(--berry-soft)}
.cad-card b{font-size:15px; color:var(--berry-dark)}
.cad-conta{font-family:'Sora'; font-weight:800; font-size:20px}

/* ---------- telas que moram DENTRO de outra aba (ordem do Pedro, 14/09/2026) ----------
   Sete telas perderam o botao do menu e passaram a ser alcancadas por esta faixa,
   dentro da aba mae. O botao e grande de dedo e leva a frase do que ele faz junto,
   porque quem chega aqui nao viu mais o nome no menu lateral. */
.atalhos-filhas{display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; margin:10px 0 14px}
.atalhos-filhas:empty{display:none}
.atalhos-rotulo{align-self:center; font-size:12.5px; color:var(--muted); margin-right:2px}
button.atalho-filha{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  text-align:left; padding:8px 12px; font-size:13.5px; font-weight:700;
  border:1px solid var(--line); border-radius:10px; background:var(--card); cursor:pointer;
}
button.atalho-filha:hover{border-color:var(--berry); background:var(--berry-soft)}
button.atalho-filha .dica{margin:0; font-weight:400; font-size:11.5px}
button.atalho-filha.apagada{opacity:.55}

/* a porta de saida da tela filha: sem ela a pessoa fica presa numa tela que
   nao tem mais nome no menu lateral */
.barra-mae{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px}
.barra-mae .dica{margin:0}
.barra-mae.oculta{display:none}

/* ---------- busca de itens do evento ---------- */
.resultado-busca{max-height:260px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; margin-top:4px}
.resultado-busca .grupo-titulo{background:var(--pend-soft); padding:4px 10px; font-size:12px; font-weight:700; color:var(--berry-dark); position:sticky; top:0}
.resultado-busca .op{padding:9px 10px; cursor:pointer; font-size:14px; display:flex; gap:8px}
.resultado-busca .op:hover{background:var(--berry-soft)}
.resultado-busca .op .cod{color:var(--pend); min-width:56px}
.resultado-busca .op .custo{margin-left:auto; color:var(--muted)}
.op-avulso{font-style:italic; color:var(--warn)}
.versao{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin:6px 0; font-size:13px}
.versao summary{cursor:pointer; font-weight:600}
#formEncomenda,#formCadastro,.painel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-top:10px}

footer{text-align:center; color:var(--muted); font-size:12px; padding:18px; margin-left:180px}
@media (max-width:700px){ footer{margin-left:0} }

/* ---------- login ---------- */
.tela-login{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:16px}
.caixa-login{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; width:360px; max-width:100%; display:flex; flex-direction:column; gap:12px}
.caixa-login h1{color:var(--berry-dark); font-size:26px; font-weight:800}
.campo-senha{position:relative; display:block}
.campo-senha input{width:100%; padding-right:46px}
.olhinho{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:transparent; border:0; cursor:pointer; font-size:17px; line-height:1; width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:8px; opacity:.7}
.olhinho:hover{background:var(--berry-soft); opacity:1}
.olhinho:focus-visible{outline:2px solid var(--berry); opacity:1}

/* ---------- fluxograma ideal ---------- */
.quadro-fluxo{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:6px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.quadro-fluxo svg{display:block; width:100%; height:auto; min-width:1000px}
.legenda-fluxo{display:flex; flex-wrap:wrap; gap:14px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:9px 14px; margin-bottom:10px; font-size:13px; color:var(--muted)}
.legenda-fluxo i{display:inline-block; width:24px; height:14px; vertical-align:-2px; margin-right:6px; border:2px solid #2f6be0; background:#eef3ff; border-radius:4px}
.legenda-fluxo i.dec{transform:rotate(45deg) scale(.8); border-color:#c78c05; background:#fff7e6; border-radius:2px; width:15px; height:15px; margin-right:11px}
.legenda-fluxo i.des{border-color:#d0393e; background:#ffeced}
/* classes do desenho, copiadas do arquivo aprovado (!FLUXO-INSUMOS-BUFFET.html) */
.cx{fill:#eef3ff;stroke:#2f6be0;stroke-width:2}
.cx2{fill:#fff7e6;stroke:#c78c05;stroke-width:2}
.cx3{fill:#eaf8f0;stroke:#1a8f55;stroke-width:2}
.cx4{fill:#f3eeff;stroke:#6d3fe0;stroke-width:2}
.cx5{fill:#e6f6f9;stroke:#0d8797;stroke-width:2}
.dec{fill:#fff7e6;stroke:#c78c05;stroke-width:2}
.desv{fill:#ffeced;stroke:#d0393e;stroke-width:2}
.term{fill:#e3ebfb;stroke:#2f6be0;stroke-width:2.5}
.quadro-fluxo text{font-family:"Segoe UI",system-ui,sans-serif;fill:#12151b}
.t{font-size:17px;font-weight:600}
.td{font-size:16px;font-weight:600;fill:#7a5600}
.tdes{font-size:15.5px;font-weight:600;fill:#a8262b}
.rot{font-size:13.5px;fill:#5b6373;font-weight:700}
.fase-tt{font-size:14px;fill:#6b7280;font-weight:700;letter-spacing:.14em}
.fio{stroke:#7b8496;stroke-width:2.4;fill:none}
.fio-r{stroke:#d0393e;stroke-width:2.4;fill:none;stroke-dasharray:7 5}
.fio-v{stroke:#1a8f55;stroke-width:2.4;fill:none;stroke-dasharray:7 5}
.fio-loop{stroke:#6d3fe0;stroke-width:2.6;fill:none;stroke-dasharray:9 6}

/* ---------- estoque e rotulagem (onda de integracao, 10/09/2026) ---------- */
.etiqueta-caixa{
  width:320px; max-width:100%; border:1px dashed var(--muted); border-radius:8px;
  background:#fff; padding:12px 14px; display:flex; flex-direction:column; gap:4px; margin:10px 0;
}
.etiqueta-caixa b{font-size:17px; line-height:1.2}
.etiqueta-caixa span{font-size:13.5px}

/* lista agrupada por grupo de produtos (Fichas e Precificacao): cabecalho recolhivel
   e FIXO no topo enquanto o grupo rola (sticky abaixo do header do app) */
.grupo-lista{margin:8px 0}
.grupo-lista summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--berry-soft); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; position:sticky; top:56px; z-index:5;
}
.grupo-lista summary::before{content:'▸'; color:var(--berry-dark); font-size:13px}
.grupo-lista[open] summary::before{content:'▾'}
.grupo-lista summary b{color:var(--berry-dark)}
.grupo-lista .quadro-tabela{margin-top:4px}

/* ---------- importacao de ficha (conferencia humana antes de gravar) ---------- */
/* linha pendente DESTACADA: fundo vermelho claro + tarja na esquerda (padrao --late ja usado) */
#impTabela tr.imp-pendente td{background:var(--late-soft)}
#impTabela tr.imp-pendente td:first-child{border-left:3px solid var(--late)}
#impTabela td .imp-original{display:block; font-size:12px; color:var(--muted); margin-top:2px}
#impTabela input,#impTabela select{padding:8px 10px}
#impTabela .imp-qtd{width:96px}
#impTabela .imp-unid{width:64px}
#impTabela .imp-insumo{min-width:200px; max-width:280px}

/* ---------- falta preco nas fichas (ordem do dono, 28/09/2026) ---------- */
/* a bolinha vermelha da coluna "Falta preço" e a linha do ingrediente sem preço na ficha aberta */
.bolinha-falta-preco{color:var(--late); font-size:18px; line-height:1; cursor:help}
tr.ingrediente-sem-preco td{background:var(--late-soft); color:#7a1f22}
tr.ingrediente-sem-preco td:first-child{border-left:3px solid var(--late)}

/* ---------- impressao (o fluxograma vai impresso para a cliente) ---------- */
@media print{
  .sidenav,header,footer,#btnMenu,#menuFundo,.acoes,.linha-topo button,.nao-imprime{display:none!important}
  main{margin:0; max-width:100%; padding:0}
  body{background:#fff}
  .quadro-fluxo{border:none; padding:0; overflow:visible}
  .quadro-fluxo svg{min-width:0; width:100%; height:auto}
  .card,.cartao{break-inside:avoid; border-color:#bbb}
  /* ONDA O7 — impressão multipágina: linha de tabela NUNCA corta no meio da quebra
     de página, e o cabeçalho repete em cada página (papel da cozinha e relatórios). */
  tr{break-inside:avoid; page-break-inside:avoid}
  thead{display:table-header-group}
  .quadro-tabela{overflow:visible!important}
  .painel,.aviso{break-inside:avoid}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---- escolha de produtos dentro do evento (11/09/2026) ---- */
.linha-busca-item{display:flex; gap:8px; align-items:center}
.linha-busca-item input{flex:1}
.resultado-busca .op.ja-escolhido{opacity:.55}
.cardapio-evento{margin-top:8px; border:1px solid var(--line); border-radius:10px; padding:10px; background:var(--card); max-height:420px; overflow:auto}
.grupo-cardapio{border-bottom:1px solid var(--line)}
.grupo-cardapio:last-child{border-bottom:none}
.grupo-cardapio>summary{cursor:pointer; padding:8px 6px; font-weight:700; font-size:14px; color:var(--berry-dark)}
.grupo-cardapio .op{padding:8px 10px; cursor:pointer; font-size:14px; display:flex; gap:8px}
.grupo-cardapio .op:hover{background:var(--berry-soft)}
.grupo-cardapio .op .cod{color:var(--pend); min-width:56px}
.grupo-cardapio .op .custo{margin-left:auto; color:var(--muted)}
.grupo-cardapio .op.ja-escolhido{opacity:.55}
.grupo-cardapio .quantos{font-weight:400; color:var(--muted); font-size:12px}

/* ---- telas de relatorios (11/09/2026) ---- */
.abas-rel{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0}
.abas-rel .abaRel.on{background:var(--berry-dark); color:#fff}
/* pilulas do filtro por divisao do estoque (onda B2) */
.abas-rel .pilulaDivisao.on{background:var(--berry-dark); color:#fff}
@media print{
  .sidenav, header, .abas-rel, .linha-topo button, #menuFundo{display:none !important}
  .tela{margin:0 !important}
  body{font-size:12px}
}

/* ---- planilha de producao: o papel da cozinha ---- */
.setor-producao{margin:18px 0 6px; font-size:16px; text-transform:uppercase; letter-spacing:.05em; color:var(--berry-dark)}
.tabela-producao td{text-align:center}
.tabela-producao td:first-child{text-align:left}
.tabela-producao th{vertical-align:top}

/* ---- bipar codigo de barras (celular) ---- */
#bipVideo{width:100%; max-width:520px; border-radius:12px; background:#000; margin:8px 0; aspect-ratio:4/3; object-fit:cover}
.bipDestino.on{background:var(--berry-dark); color:#fff}
#bipResultado .cartoes{margin-top:8px}

/* =========================================================================
   CELULAR — a equipe vai usar no telefone, em pé, na cozinha (11/09/2026).
   Alvo de toque grande, tabela que rola sozinha e nada saindo da tela.
   ========================================================================= */
@media (max-width:700px){
  body{font-size:16px}
  .wrap, main{padding-left:12px; padding-right:12px}
  .linha-topo{flex-wrap:wrap; gap:8px}
  .linha-topo h2{width:100%}
  .linha-topo input, .linha-topo select{flex:1 1 140px; min-width:0; width:auto !important}
  .linha-busca-item{flex-direction:column; align-items:stretch}
  .linha-busca-item button{width:100%}
  .abas-rel{overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px}
  .abas-rel .abaRel{white-space:nowrap}
  /* botao no celular: alto o bastante para o dedo, sem precisar de mira */
  button, .mini{min-height:44px; padding:10px 14px; font-size:15px}
  input, select, textarea{min-height:44px; font-size:16px} /* 16px evita o zoom do iPhone */
  .cartoes{grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px}
  .cartao .num{font-size:20px}
  /* tabela larga rola dentro da propria caixa, em vez de empurrar a pagina */
  .quadro-tabela{max-width:100%; overflow-x:auto}
  table{font-size:13.5px; min-width:520px}
  .tabela-producao{min-width:640px}
  /* o cardapio e a busca ocupam a tela inteira, sem coluna apertada */
  .resultado-busca{max-height:50vh}
  .cardapio-evento{max-height:60vh}
  #bipVideo{max-width:100%}
  .acoes{display:flex; flex-wrap:wrap; gap:8px}
  .acoes button{flex:1 1 160px}
  h1{font-size:22px} h2{font-size:19px} h3{font-size:17px}
}
/* celular pequeno: cartao em duas colunas continua legivel */
@media (max-width:420px){
  .cartoes{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .cartao .rot{font-size:11px}
}

/* ===== EDITOR DE FICHA: blocos de rendimento e preco (12/09/2026) =====
   Copia a IDEIA das duas caixas lado a lado do app Fichas Tecnicas do dono
   (public/index.html:707-748 de la), com o visual desta casa. */
.ficha-final{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin:14px 0}
.painel-interno{background:#fff; border:1px solid var(--borda,#e3e7ee); border-radius:12px; padding:14px 16px}
.painel-interno h4{margin:0 0 10px; font-size:1rem}
.painel-interno label{display:block; margin:8px 0}
.painel-interno label small{color:var(--suave,#6b7280); font-weight:400}
.linha-calc{display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:7px 0; border-bottom:1px dashed var(--borda,#e3e7ee)}
.linha-calc:last-child{border-bottom:none}
.linha-calc span{color:var(--suave,#4b5563); font-size:.9rem}
.linha-calc b{font-variant-numeric:tabular-nums}
.linha-calc.destaque b{color:var(--acento,#1E5AA8); font-size:1.05rem}

/* cartao de ficha no catalogo por setor (12/09/2026) */
.ficha-cartao{cursor:pointer}
.ficha-cartao-num{display:flex; flex-direction:column; gap:2px; margin-top:6px; font-size:.85rem}
.ficha-cartao-num em{font-style:normal; font-size:.78rem}

/* tabela de estoque que se edita na celula (12/09/2026) */
.tabela-estoque .et-cel{cursor:text}
.tabela-estoque .et-cel:hover{background:#f0f5fc; outline:1px solid #cfe0f5}
.tabela-estoque input.et-editando{width:100%; min-width:70px; padding:4px 6px; font-size:inherit;
  border:2px solid var(--acento,#1E5AA8); border-radius:6px}

/* ===== CONTAS A RECEBER (12/09/2026) ===== */
.cr-barra{position:relative; background:#eef1f6; border-radius:999px; height:22px; overflow:hidden}
.cr-barra-dentro{height:100%; border-radius:999px; transition:width .2s}
.cr-cheia{background:#1c7a4a}
.cr-andando{background:#1E5AA8}
.cr-atrasada{background:#c0872a}
.cr-barra-texto{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; color:#182030}
.cr-barra-vazia{display:flex; align-items:center; justify-content:center; height:100%;
  font-size:.75rem; color:#6b7280}
.cr-semanas{display:flex; gap:10px; align-items:flex-end; overflow-x:auto; padding:10px 0 4px}
.cr-semana{display:flex; flex-direction:column; align-items:center; gap:3px; min-width:66px}
.cr-semana .cr-col{width:34px; background:#1E5AA8; border-radius:6px 6px 0 0}
.cr-semana b{font-size:.76rem} .cr-semana span{font-size:.72rem; color:#6b7280}

/* as faixas de escolha das telas novas usam o mesmo visual das abas de relatorio,
   com classe propria — .abaRel e capturada globalmente por relatorios.js */
.abaModo, .abaSetor{border-radius:999px}
.abaModo.on, .abaSetor.on{background:var(--acento,#1E5AA8); color:#fff; border-color:transparent}
.abaSetor .quantos{opacity:.75; font-size:.8em; margin-left:4px}

/* ===== ANALISE DE VENDAS A/B/C/D (12/09/2026) — as cores das faixas sao as do app dele ===== */
.av-colunas{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-top:12px}
.av-coluna{background:#fff; border:1px solid var(--borda,#e3e7ee); border-radius:12px; padding:12px 14px}
.av-coluna h4{margin:0 0 8px; font-size:.95rem}
.av-tabela{font-size:.85rem}
.av-tag{display:inline-block; width:20px; text-align:center; font-weight:700; border-radius:4px; background:#fff8}
.av-faixa-A{background:#c6f6d5}
.av-faixa-B{background:#e2f3d9}
.av-faixa-C{background:#fef0c7}
.av-faixa-D{background:#fed7d7}