/*
 * RECEBIMENTO — o mesmo desenho da armazenagem e do romaneio: papel claro,
 * barra escura com o amarelo de segurança, cartões, e o amarelo só onde se
 * age. Quatro passos no topo: Fila, Conferir, Aprovar, Volumes.
 *
 * Os nomes das variáveis são os de antes (o script usa --suave e --erro);
 * os valores agora são os da casa.
 */
:root{
  --papel:#F3F2EE;          /* o fundo da página */
  --carta:#FFFFFF;          /* o cartão */
  --fundo-3:#FAF8F1;        /* o realce dentro do cartão */
  --tinta:#16150F;
  --suave:#6B685E;
  --linha:#DDDAD0;
  --linha-forte:#B9B5A8;
  --amarelo:#FFD400;        /* onde se age */
  --amarelo-claro:#FFF4B8;
  --acento:#7A5E00;         /* texto de destaque: o amarelo some sobre o branco */
  --acento-tinta:#16150F;
  --ok:#137A45;   --ok-claro:#E6F3EA;
  --aviso:#8F5500; --aviso-claro:#FCF2DF;
  --erro:#B3271B; --erro-claro:#FBEAE8;
  --escuro:#16150F;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{overflow-x:hidden}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:400 16px/1.45 "Barlow",system-ui,"Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:"Barlow Condensed",system-ui,sans-serif;font-weight:700;line-height:1.1;margin:0}
button,select,input,textarea{font:inherit;color:inherit}
input[type=text],input[type=search],input[type=number],input[type=password],select,textarea{
  border:1px solid var(--linha-forte);border-radius:8px;padding:11px 14px;background:#fff;min-width:0;max-width:100%;
}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--acento);outline-offset:1px}
input:disabled{background:var(--fundo-3);color:var(--suave)}
.erro{color:var(--erro);font-weight:600;margin:6px 0 0}
.vazio{color:var(--suave);margin:14px 0}
.sub{color:var(--suave);margin:3px 0 0;font-size:1rem}
.eyebrow,.rotulo-mini{font:700 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--acento)}
.dica,.rodape-nota{color:var(--suave);font-size:.95rem;margin:8px 0 0}

/* ------------------------------------------------------------ botões */
button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
.principal,#vol-imprimir,.finalizar,#form-conta button[type=submit]{
  border:0;border-radius:10px;background:var(--amarelo);color:var(--acento-tinta);font-weight:700;padding:13px 20px;
}
.secundario,.acao,.discreta{
  border:1px solid var(--linha-forte);border-radius:8px;background:#fff;padding:10px 16px;font-weight:600;
}
.secundario:hover,.discreta:hover{border-color:var(--tinta)}
.link{background:none;border:0;padding:0;color:var(--acento);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.perigo,.texto-risco{color:var(--erro)}
.texto-risco{background:none;border:0;padding:6px 0;font-weight:600;text-decoration:underline}
.lixeira{border:1px solid var(--linha-forte);border-radius:8px;background:#fff;padding:8px 10px;color:var(--erro);display:inline-flex;align-items:center;gap:6px}
.lixeira.confirma{background:var(--erro);color:#fff;border-color:var(--erro)}

/* ------------------------------------------------------------- porta */

/* ------------------------------------------------------ a barra do site */
.barra-site{background:var(--escuro);color:#fff;border-bottom:3px solid var(--amarelo);position:sticky;top:0;z-index:30}
.barra-dentro{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:24px;min-height:58px}
.marca{font:700 1.05rem/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--amarelo);white-space:nowrap}
.passos{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.passos .aba{
  display:flex;align-items:center;gap:7px;background:none;border:0;color:#CFCBC0;font-weight:600;
  padding:17px 11px 14px;border-bottom:3px solid transparent;margin-bottom:-3px;white-space:nowrap;
}
.passos .aba:hover{color:#fff}
.passos .aba.ativa{color:#fff;border-bottom-color:#fff}
.aba-passo{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 .78rem/1 "Barlow Condensed",sans-serif;
  background:#3A362C;color:#DEDAD0}
.passos .aba.ativa .aba-passo{background:var(--amarelo);color:var(--escuro)}
.selo{min-width:20px;padding:2px 6px;border-radius:999px;background:var(--amarelo);color:var(--escuro);font:700 .75rem/1.2 "Barlow",sans-serif;text-align:center}

/* A faixa das ferramentas: empresa, histórico, contas. Fica fora dos
   passos porque não é etapa — é onde se procura. */
.ferramentas{max-width:1240px;margin:0 auto;padding:10px 20px 0;display:flex;gap:6px 14px;align-items:center;flex-wrap:wrap}
.escolhe-conta{display:flex;align-items:center;gap:8px;margin-right:auto}
.escolhe-conta span{font-weight:600;color:var(--suave);font-size:.92rem}
.escolhe-conta select{padding:7px 10px}
.aba.fraca{background:none;border:0;color:var(--acento);font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:6px 2px}
a.aba{text-decoration:underline;color:var(--acento)}
.aba.fraca.ativa{color:var(--tinta);text-decoration:none}

/* ------------------------------------------------------------ página */
#app{max-width:1240px;margin:0 auto;padding:14px 20px 120px}
.so-conta{margin:0 0 12px;padding:8px 12px;border-radius:8px;background:var(--amarelo-claro);border:1px solid var(--linha-forte);font-weight:600}
.topo{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin:6px 0 16px}
.topo h1{font-size:2rem}
.topo-dir{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
@media (min-width:761px){.topo-dir{flex-wrap:nowrap}}
.filtro{width:min(100%,280px)}
.lista-secao{background:var(--carta);border:1px solid var(--linha);border-radius:10px;padding:16px 18px;margin-top:16px}
.lista-secao h2{font-size:1.25rem;margin-bottom:10px}
.lista-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.paginacao{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:var(--suave);font-size:.95rem}

/* -------------------------------------------------- estados (selos) */
.estado{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:6px;font-size:.8rem;font-weight:700;white-space:nowrap;vertical-align:1px}
.estado.aberta{background:var(--amarelo-claro);color:var(--aviso)}
.estado.fechada{background:var(--ok-claro);color:var(--ok)}
.estado.reconferencia,.estado.urgente{background:var(--erro-claro);color:var(--erro)}
.estado.semxml{background:var(--fundo-3);color:var(--suave);border:1px solid var(--linha)}
.estado.revisar{background:var(--erro-claro);color:var(--erro)}

/* -------------------------------------------------------------- fila */
.nota-fila{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:6px 14px;align-items:center;
  background:var(--carta);border:1px solid var(--linha);border-radius:10px;padding:12px 14px;
}
.nota-fila.a-revisar{opacity:.72}
.nota-fila .numero{font:700 1.35rem/1 "Barlow Condensed",sans-serif}
.quem-e{min-width:0}
.quem-e strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quem-e span{color:var(--suave);font-size:.92rem}
.qt{text-align:right;color:var(--suave);font-size:.9rem;white-space:nowrap}
.nota-fila > button:not(.lixeira){border:0;border-radius:8px;background:var(--amarelo);font-weight:700;padding:10px 16px}
.nota-fila > button.secundario{background:#fff;border:1px solid var(--linha-forte)}
.apagar-pergunta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.apagar-pergunta input{width:10rem}
.tiradas{margin-top:14px;color:var(--suave)}
.tiradas summary{cursor:pointer;font-weight:600}
.tiradas ul{list-style:none;padding:0;display:grid;gap:6px;margin:8px 0 0}
.tiradas li{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* ------------------------------------------------------- conferência */
.bipe{background:var(--carta);border:1px solid var(--linha);border-radius:10px;padding:16px 18px}
.bipe > label{display:block;font-weight:700;margin-bottom:8px}
.linha-bipe{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
#codigo,#codigo-travado{font:700 1.35rem/1.2 ui-monospace,"Cascadia Mono",monospace;padding:16px;border:3px solid var(--amarelo);border-radius:10px}
.qt-bipe{display:grid;gap:4px;font-size:.85rem;color:var(--suave);font-weight:600}
.qt-bipe input{width:92px;text-align:center;font-weight:700}
body.fechado #codigo{border-color:var(--linha-forte);opacity:.55}
.presenca{margin:10px 0 0;padding:8px 12px;border-radius:8px;background:var(--fundo-3);border:1px solid var(--linha);color:var(--suave);font-size:.92rem}
.recado{margin:10px 0 0;padding:11px 14px;border-radius:8px;font-weight:600;background:var(--fundo-3);border:1px solid var(--linha-forte)}
.recado.ok{background:var(--ok-claro);border-color:var(--ok);color:var(--ok)}
.recado.aviso{background:var(--aviso-claro);border-color:var(--aviso);color:var(--aviso)}
.recado.erro{background:var(--erro-claro);border-color:var(--erro);color:var(--erro)}
.tarja{margin:0 0 12px;padding:10px 14px;border-radius:8px;font-weight:600}
.tarja.urgente{background:var(--erro-claro);color:var(--erro);border:1px solid var(--erro)}

.numeros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.num{background:var(--carta);border:1px solid var(--linha);border-radius:10px;padding:10px 14px}
.num span{display:block;font:700 1.9rem/1.05 "Barlow Condensed",sans-serif}
.num small{color:var(--suave)}
.num.grande{border-color:var(--erro)}
.num.grande span{color:var(--erro)}
.num.grande.limpo{border-color:var(--ok)}
.num.grande.limpo span{color:var(--ok)}

.item-conf{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 14px;align-items:center;
  padding:10px 12px 10px 28px;border:1px solid var(--linha);border-radius:8px;background:var(--carta);
  position:relative;--estado:var(--linha-forte);
}
.item-conf::before{content:"";position:absolute;left:11px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--estado)}
.item-conf.bate{--estado:var(--ok)}
.item-conf.falta{--estado:var(--erro)}
.item-conf.sobra{--estado:var(--aviso)}
.item-conf.recontar{background:var(--erro-claro)}
.item-conf.travando{outline:3px solid var(--amarelo)}
.item-conf.feito{opacity:.6}
.item-conf.contando{--estado:var(--linha-forte)}
.qt-bipe input.ativo,#qtd.ativo{border:2px solid var(--aviso);background:var(--aviso-claro)}
.oque{min-width:0}
.oque strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oque span{color:var(--suave);font-size:.88rem}
.contagem{font:700 1.4rem/1 "Barlow Condensed",sans-serif;white-space:nowrap;text-align:right}
.contagem small{font:500 .9rem "Barlow",sans-serif;color:var(--suave)}
.contagem .antes{display:block;font-size:.75rem}
.dif{font:700 1.1rem "Barlow Condensed",sans-serif;min-width:2.6rem;text-align:right}
.item-conf.falta .dif{color:var(--erro)}
.item-conf.sobra .dif{color:var(--aviso)}
.item-conf.bate .dif{color:var(--ok)}
.acoes-item,.acoes{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.acoes-item button{padding:7px 12px;border:1px solid var(--linha-forte);border-radius:8px;background:#fff;font-size:.9rem;font-weight:600}
.qt-tirar{width:6rem}
.aviso-vinculo{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:8px 10px;border-radius:8px;background:var(--aviso-claro);color:var(--aviso)}
.aviso-vinculo input{width:10rem}
.finalizar{width:100%;margin-top:14px;font-size:1.05rem;display:grid;gap:2px}
.finalizar small{font-weight:500}

/* O PRODUTO QUE ESTÁ SENDO CONTADO ocupa a tela inteira: entre um bipe e
   outro a pessoa olha uma coisa só. */
.travado{
  position:fixed;inset:0;z-index:50;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom));background:var(--papel);
}
.travado > *{width:min(100%,720px);margin-left:auto;margin-right:auto}
.travado-topo{display:flex;justify-content:space-between;align-items:center}
.travado strong{display:block;font:700 1.6rem/1.2 "Barlow Condensed",sans-serif;margin-top:6px}
.travado-sku{color:var(--suave)}
.travado-aviso{margin:6px auto;padding:10px 12px;border-radius:8px;background:var(--aviso-claro);color:var(--aviso)}
.travado-numero{margin:10px auto;display:flex;align-items:baseline;gap:10px}
.travado-numero span{font:700 4.5rem/1 "Barlow Condensed",sans-serif}
.travado-numero small{color:var(--suave);font-size:1.1rem}
.travado.so-bloqueio > *:not(#bloqueio){display:none}
.travado.divergente{background:var(--erro-claro)}
.bloqueio{margin-top:12px;padding:16px;border-radius:10px;background:var(--erro-claro);border:2px solid var(--erro);display:grid;gap:10px}
.bloqueio-titulo{font:700 1.4rem "Barlow Condensed",sans-serif;color:var(--erro)}
.bloqueio p{margin:0}
.bloqueio-rotulo{font-weight:600}
#bloqueio-escolha{display:grid;gap:8px}
#bloqueio-ok,.bloqueio-principal{border:0;border-radius:10px;background:var(--amarelo);font-weight:700;padding:14px}
.bloqueio-outro{border:1px solid var(--linha-forte);border-radius:10px;background:#fff;font-weight:600;padding:12px}
.bloqueio-conta{color:var(--suave);font-size:.9rem}

/* ---------------------------------------------------------- aprovação */
.cartao-aprov{background:var(--carta);border:2px solid var(--ok);border-radius:10px;padding:16px 18px;margin-bottom:14px;display:grid;gap:10px}
.cartao-aprov.diverge{border-color:var(--erro)}
.cartao-aprov h3{font-size:1.3rem}
.cartao-aprov .sub{margin:0}
.obs{margin:0;padding:10px 12px;border-radius:8px;background:var(--fundo-3)}
.obs b{display:block;font-size:.85rem;color:var(--suave)}
.itens-dif{display:grid;gap:6px;padding:10px 12px;border-radius:8px;background:var(--fundo-3)}
.itens-dif label{display:flex;gap:8px;align-items:flex-start}
.cartao-aprov textarea,.cartao-aprov input[type=text]{width:100%}
.decisao{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.decisao .principal{padding:12px 22px}
.decisao .perigo{border:1px solid var(--erro);border-radius:8px;background:#fff;color:var(--erro);padding:11px 16px;font-weight:600}

/* ------------------------------------------------------------ volumes */
.vol-plano{background:var(--carta);border:1px solid var(--linha);border-radius:10px;padding:14px 16px;margin-bottom:16px;display:grid;gap:12px;min-width:0}
.vol-plano-topo{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.vol-plano-topo h2{font-size:1.25rem}
.vol-plano-todos{color:var(--suave);font-size:.9rem;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.vol-plano-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vol-plano-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px 12px;border:1px solid var(--linha);border-radius:8px;min-width:0}
.vol-plano-item.pede{border-color:var(--aviso);background:var(--aviso-claro)}
.vol-plano-prod{min-width:0}
.vol-plano-prod b{font-family:'Barlow Condensed',sans-serif;font-size:1.15rem}
.vol-plano-prod .qt{margin-left:6px;font-weight:700}
.vol-plano-prod small{display:block;color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vol-plano-motivo{grid-column:1/-1;margin:0;font-size:.92rem;color:var(--suave)}
.vol-plano-item.pede .vol-plano-motivo{color:var(--aviso);font-weight:700}
.vol-plano-aviso{grid-column:1/-1;margin:0;font-size:.9rem;color:var(--erro);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--linha-forte);border-radius:8px;overflow:hidden}
.seg button{border:0;border-radius:0;padding:8px 12px;background:var(--carta);font-weight:700;color:var(--tinta)}
.seg button+button{border-left:1px solid var(--linha-forte)}
.seg button[aria-pressed="true"]{background:var(--tinta);color:var(--amarelo)}
.sn-modo{display:grid;grid-template-columns:1fr 1fr}
.sn-modo button{padding:12px;font-size:1rem}
.sn-modo-diz{margin:0;font-size:.92rem;color:var(--suave)}
.campos .sn-sku{flex:2 1 16rem}
.vol-plano-fim{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* Sete destinos: a faixa ocupa a linha inteira e quebra; a divisão é uma grade de quantidades. */
.seg-destinos{grid-column:1/-1;flex-wrap:wrap;width:100%}
.seg-destinos button{flex:1 1 auto}
.seg-destinos button+button{border-left:1px solid var(--linha-forte)}
.seg-destinos button[data-destino="reserva"][aria-pressed="true"]{background:#3A5F8F;color:#fff}
.vol-dividir-item{justify-self:end;white-space:nowrap}
.vol-partes{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:6px 10px}
.vol-partes label{display:grid;gap:2px;font-size:.85rem;font-weight:700;color:var(--suave)}
.vol-partes input{width:100%;min-width:0;font-size:1.05rem;padding:6px 8px}
.vol-partes-resto{grid-column:1/-1;margin:0;font-weight:700;color:var(--aviso)}
.vol-partes-resto:empty{display:none}
.chip-reserva{display:inline-block;padding:1px 8px;border-radius:999px;background:#DCE7F5;color:#1E3A5F;font-weight:700;font-size:.85rem}
.vol-destino{font-weight:700}
.vol-plano-fim .vol-pronto{flex:1;min-width:12rem}
@media (max-width:560px){.vol-plano-item{grid-template-columns:minmax(0,1fr)}.seg{width:100%}.seg button{flex:1;padding:10px 6px}}
.vol-montar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.vol-montar input{width:5.5rem}
.vol-saldo{margin:0 0 12px}
.vol-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:12px}
.vol-cartao{background:var(--carta);border:1px solid var(--linha);border-radius:10px;padding:12px 14px;display:grid;gap:8px;min-width:0}
.vol-cartao.guardado{opacity:.6}
.vol-cartao header{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vol-cartao header span{color:var(--suave);font-size:.88rem;flex:1;min-width:0}
.vol-cartao>*{min-width:0}
.vol-cartao ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;min-width:0}
/* O SKU em cima, a descrição embaixo (até duas linhas), a quantidade à direita: nada sai do cartão. */
.vol-cartao li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;min-width:0;padding-bottom:8px;border-bottom:1px solid var(--linha)}
.vol-cartao li:last-child{border-bottom:0;padding-bottom:0}
.vol-cartao li span{display:grid;gap:1px;min-width:0}
.vol-cartao li span b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vol-cartao li small{color:var(--suave);font-size:.85rem;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vol-cartao li input{width:6.5rem;text-align:right;padding:8px 10px}
.vol-cartao select{width:100%;max-width:100%;min-width:0}
.vol-cartao header select{width:auto;flex:none}
.vol-cartao header .lixeira{margin-left:auto}
.vol-cartao header .vol-pecas{font-weight:700;color:var(--tinta);flex:none}
.vol-tiny{margin-top:16px;padding:14px 16px;background:var(--aviso-claro);border:1px solid var(--aviso);border-radius:10px;display:grid;gap:8px;max-width:40rem}
.vol-tiny h2{font-size:1.15rem}
.vol-tiny p{margin:0}
.vol-tiny button[aria-pressed="true"]{background:var(--amarelo-claro);border-color:var(--tinta)}
.modo-tiny{padding:8px 11px;border-radius:8px;background:var(--fundo-3);color:var(--suave);font-size:.92rem}
.modo-tiny.balanco{background:var(--aviso-claro);color:var(--aviso)}
.vol-tiny-lista{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vol-tiny-lista li{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.vol-tiny-lista .subiu{color:var(--ok);font-weight:700}
.vol-imprimir{margin-top:16px;display:grid;gap:10px;max-width:34rem}
.vol-rolo{margin:0;padding:10px 12px;border-radius:8px;background:var(--aviso-claro);color:var(--aviso);font-weight:600}
.vol-botoes{display:flex;flex-wrap:wrap;gap:8px}
.vol-pronto{margin:0;font-weight:700;color:var(--ok)}
.vol-previa{max-width:min(100%,20rem);border:1px solid var(--linha);border-radius:8px;background:#fff}
.vol-etapas{margin:0;padding-left:1.25rem;display:grid;gap:6px}
.vol-etapas li{display:grid}
.vol-etapas li span,.vol-etapas li small{color:var(--suave)}

/* -------------------------------------------------- janelas e contas */
.modal{position:fixed;inset:0;z-index:60;background:rgba(22,21,15,.45);display:grid;place-items:center;padding:16px;overflow-y:auto}
.modal-cartao{width:min(100%,640px);background:var(--carta);border-radius:12px;padding:18px 20px;display:grid;gap:12px}
.modal-topo{display:flex;justify-content:space-between;align-items:center}
.modal-topo h2{font-size:1.4rem}
.fechar-x{background:none;border:0;font-size:1.8rem;line-height:1;color:var(--suave)}
.campos{display:flex;gap:10px;flex-wrap:wrap}
.campos label,.campo-largo{display:grid;gap:4px;flex:1 1 12rem;font-weight:600}
.campos label span,.campo-largo span{font-size:.88rem;color:var(--suave)}
.campo-largo input{width:100%}
.item-sn{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid var(--linha);border-radius:8px}
.item-sn button{border:1px solid var(--linha-forte);border-radius:8px;background:#fff;padding:6px 10px}
dialog{border:0;border-radius:12px;background:var(--carta);color:var(--tinta);padding:18px 20px;max-width:540px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(22,21,15,.45)}
dialog .campos{flex-direction:column}
dialog textarea{width:100%}
.form-fim{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}

/* --------------------------------------------------------- o rodapé */
/* O aviso solto: o que deu errado fora da conferência. Some sozinho. */
.aviso-solto{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:60;margin:0;width:min(560px,calc(100vw - 32px));padding:12px 16px;border-radius:10px;background:var(--escuro);color:#fff;font-weight:600;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.versao-nova{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:80;padding:10px 16px;border-radius:999px;border:0;background:var(--escuro);color:var(--amarelo);font-weight:700;box-shadow:0 6px 20px -8px rgba(0,0,0,.5)}

/* ---------------------------------------------------------- celular */
@media (max-width:760px){
  .barra-dentro{gap:12px;padding:0 12px}
  .so-largo{display:none}
  .marca{font-size:.9rem;letter-spacing:.12em}
  .passos .aba{padding:17px 7px 14px;gap:5px}
  .ferramentas{padding:10px 16px 0}
  #app{padding:12px 16px 120px}
  .topo h1{font-size:1.7rem}
  .filtro{width:100%}
  .topo-dir{width:100%}
  .nota-fila{grid-template-columns:auto minmax(0,1fr) auto}
  .nota-fila .qt{grid-column:2/3;text-align:left}
  .nota-fila > button:not(.lixeira){grid-column:1/3}
  .nota-fila > .lixeira,.nota-fila > .apagar-pergunta{grid-column:3/4;justify-self:end}
  .numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .linha-bipe{grid-template-columns:minmax(0,1fr) 84px}
  .qt-bipe input{width:84px}
  .travado-numero span{font-size:3.6rem}
}
/* O menu do celular, o mesmo da armazenagem (menu.js): um botão com o nome
   da etapa abre as quatro, paradas, em grade. */
.menu-botao{display:none}
@media (max-width:560px){
  .barra-dentro{justify-content:space-between;padding:0 16px}
  .menu-botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;
    background:#2A271F;border:1px solid #3A362C;color:#fff;border-radius:8px;padding:8px 12px;
    font:700 1.05rem/1 "Barlow Condensed",sans-serif;letter-spacing:.04em;text-transform:uppercase}
  .menu-botao .seta{width:0;height:0;border:5px solid transparent;border-top-color:var(--amarelo);margin-top:5px}
  .menu-aberto .menu-botao .seta{border-top-color:transparent;border-bottom-color:var(--amarelo);margin:0 0 5px}
  .passos{display:none;position:absolute;left:0;right:0;top:100%;margin-top:3px;overflow:visible;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 16px 16px;
    background:var(--escuro);border-bottom:3px solid var(--amarelo);box-shadow:0 12px 24px rgba(0,0,0,.25)}
  .barra-site.menu-aberto .passos{display:grid}
  .passos .aba{justify-content:center;padding:14px 12px;margin:0;border:1px solid #3A362C;border-radius:8px}
  .passos .aba.ativa{background:var(--amarelo);color:var(--escuro);border-color:var(--amarelo)}
  .passos .aba.ativa .aba-passo{background:var(--escuro);color:var(--amarelo)}
}
.bloqueio.com-escolha #bloqueio-ok{background:#fff;border:1px solid var(--linha-forte);font-weight:600}
.topo-dir button{white-space:nowrap}

/* Pré-recebimento: o estado de cada linha, e a linha nova no lote aberto. */
.estado.pre{background:var(--sel-claro,#E3EDFA);color:var(--sel,#1C5FB8)}
.estado-pre{display:inline-block;font-size:.78rem;font-weight:700;padding:1px 7px;border-radius:6px;margin-right:4px}
.estado-pre.sem_sku{background:var(--erro-claro);color:var(--erro)}
.estado-pre.sem_ean{background:var(--amarelo-claro);color:var(--aviso)}
.estado-pre.pronta{background:var(--ok-claro);color:var(--ok)}
.etiqueta-pre{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;grid-column:1/-1}
.etiqueta-pre select{max-width:14rem}.etiqueta-pre input{width:5rem}
.pre-add{display:grid;grid-template-columns:minmax(0,1fr) 7rem auto;gap:8px;margin-top:12px}
@media (max-width:560px){.pre-add{grid-template-columns:minmax(0,1fr) 6rem}.pre-add button{grid-column:1/-1}}