/* ==========================================================================
   Tela de contagem — GV Auditoria

   Desenhada para o corredor da loja, não para a mesa: uma das mãos segura o
   coletor, a outra o aparelho, e a luz costuma ser pior do que a do escritório.
   Daí três escolhas que valem para o arquivo inteiro:

   · Altura total dividida em faixas fixas. O campo de leitura e o último item
     nunca saem da tela, aconteça o que acontecer com a lista.
   · Tipografia grande nos números. O auditor confere de relance, a meio metro
     de distância, sem parar de bipar.
   · Alvos de toque sempre em --toque-min. Botão pequeno com a mão ocupada é
     botão que erra.
   ========================================================================== */

body.modo-contagem {
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--azul-900);
}

.contagem {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  height: 100dvh;
  background: var(--ground);
  /* `#app` é um flex column, e um item de flex tem largura mínima automática
     igual ao próprio conteúdo. Sem este `min-width`, o nome comprido da loja
     no cabeçalho esticava a tela INTEIRA para 633 px num aparelho de 390 px:
     o botão da câmera ficava fora do alcance do dedo, à direita do visível.
     Não era teoria — só apareceu clicando no botão num viewport de celular. */
  min-width: 0;
}
/* Mesma armadilha um nível abaixo: cada faixa é um item de grid, e item de
   grid também tem mínimo automático de conteúdo. */
.contagem > * { min-width: 0; }

.contagem__carregando,
.contagem__erro {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-6);
  text-align: center;
  background: var(--surface);
}
.contagem__erro h1 { font-size: var(--txt-xl); color: var(--azul-900); }

/* --- topo ----------------------------------------------------------------- */

.contagem__topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-2) var(--e-3);
  padding-top: max(var(--e-2), env(safe-area-inset-top));
  background: var(--azul-900);
  color: var(--neutro-0);
}

.contagem__identidade {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.contagem__identidade strong { font-size: var(--txt-sm); letter-spacing: .02em; }
.contagem__identidade span {
  font-size: var(--txt-xs);
  color: var(--azul-300);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Linha que junta o número da auditoria ao selo de rodada — os dois cabem
   lado a lado; quando não cabem, o número (que tem `text-overflow: ellipsis`
   próprio) cede primeiro, nunca o selo. */
.contagem__linha {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
}

/* Selo de rodada (2ª/3ª contagem). Chip preenchido em vez de laranja em
   texto: laranja de marca sobre o azul-900 do cabeçalho mede 2,7:1, abaixo
   do mínimo de contraste (WCAG AA pede 3:1 mesmo em texto grande) — a receita
   de --laranja-100 com texto --azul-900 é a mesma que os badges semânticos
   do resto do app usam, e mede 7,6:1. */
.contagem__rodada {
  flex: none;
  padding: 0 var(--e-2);
  height: 20px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--raio-sm);
  background: var(--laranja-100);
  color: var(--azul-900);
  font-size: var(--txt-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* No celular o seletor de área desce para a segunda linha do cabeçalho.
   Disputando a mesma linha com o selo de sincronização e o botão de sair,
   sobravam 9 px para o número da auditoria — o auditor perdia de vista em
   qual auditoria está bipando, que é a informação que ele mais confere. */
.contagem__area {
  flex: 1 0 100%;
  order: 3;
  max-width: none;
  height: 36px;
  padding: 0 var(--e-2);
  border-radius: var(--raio-sm);
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: var(--neutro-0);
  font-size: var(--txt-xs);
}
.contagem__area option { color: var(--texto); }

/* Tela larga: tudo cabe numa linha só, como antes. */
@media (min-width: 600px) {
  .contagem__area { flex: 0 1 auto; order: 0; max-width: 9rem; }
}

/* Contagem por Setores (S04): o `<select>` de área livre acima vira este
   cabeçalho fixo quando a navegação por setor está em uso — mudar de setor
   passa a ser via "Voltar aos setores" (S01), não um dropdown que trocaria
   de contexto sem sair da tela. Mesma posição/quebra de linha do
   `.contagem__area` que substitui. */
.contagem__setor-fixo {
  flex: 1 0 100%;
  order: 3;
  display: flex;
  align-items: center;
  gap: var(--e-1);
  height: 36px;
  padding: 0 var(--e-2);
  border-radius: var(--raio-sm);
  background: rgba(255, 255, 255, .08);
  color: var(--azul-300);
  font-size: var(--txt-xs);
  font-weight: 600;
}
@media (min-width: 600px) {
  .contagem__setor-fixo { flex: 0 1 auto; order: 0; }
}

/* O número da auditoria é o que o auditor confere de relance; a razão social
   da loja é contexto. Quando o espaço aperta, é a segunda que corta. */
.contagem__identidade strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Alvo em `--toque-min`: esta tela é usada em pé, no estoque, com o aparelho
   numa mão só — 40px era menor que o mínimo do próprio projeto. O ícone
   continua com 20px; o que cresce é a área de clique. */
.contagem__sair {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--toque-min);
  height: var(--toque-min);
  border-radius: var(--raio);
  color: var(--azul-300);
  text-decoration: none;
}
.contagem__sair:hover { background: rgba(255, 255, 255, .1); color: var(--neutro-0); }

/* --- indicador de sincronização ------------------------------------------- */
/* O ponto colorido carrega a informação; o texto confirma. Cor sozinha não
   comunica para quem não distingue verde de âmbar. */

.sinc {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  font-size: var(--txt-xs);
  white-space: nowrap;
}
.sinc__ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.sinc--sincronizado { color: var(--sinc-ok); }
.sinc--enviando     { color: var(--sinc-atencao); }
.sinc--enviando .sinc__ponto { animation: pulso 1.1s ease-in-out infinite; }
.sinc--offline      { color: var(--sinc-alerta); }
.sinc--erro         { color: var(--sinc-alerta); }
.sinc--bloqueado    { color: var(--sinc-bloqueado); background: rgba(174, 53, 42, .35); }

@keyframes pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .sinc--enviando .sinc__ponto { animation: none; }
}

/* --- progresso ------------------------------------------------------------ */

.progresso {
  padding: var(--e-2) var(--e-3) var(--e-3);
  background: var(--azul-900);
  color: var(--neutro-0);
}
.progresso__trilho {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}
.progresso__preenchimento {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--azul-300);
  transition: width .3s ease;
}
.progresso__linha {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  margin-top: var(--e-2);
  font-size: var(--txt-xs);
}
.progresso__texto  { font-weight: 600; font-variant-numeric: tabular-nums; }
.progresso__extra  { color: var(--azul-300); text-align: right; }

/* --- campo de leitura ----------------------------------------------------- */

.leitura {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto auto auto;
  gap: var(--e-2);
  padding: var(--e-3);
  background: var(--surface);
  border-bottom: 1px solid var(--linha);
}

.leitura__qtd,
.leitura__codigo {
  height: var(--toque-min);
  border: 2px solid var(--linha-2);
  border-radius: var(--raio);
  background: var(--surface);
  color: var(--texto);
  font-size: var(--txt-lg);
  padding: 0 var(--e-3);
}
.leitura__qtd {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 0;
}
.leitura__codigo {
  font-family: var(--fonte-mono);
  min-width: 0;
}
.leitura__codigo:focus,
.leitura__qtd:focus {
  outline: none;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 3px var(--azul-100);
}

.leitura__ok,
.leitura__teclado,
.leitura__camera {
  width: var(--toque-min);
  height: var(--toque-min);
  border-radius: var(--raio);
  border: 1px solid transparent;
  font-size: var(--txt-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.leitura__ok      { background: var(--azul-500); color: var(--neutro-0); }
.leitura__teclado,
.leitura__camera  { background: var(--surface-2); color: var(--texto-2); border-color: var(--linha); }

/* --- leitura por câmera (R-16) --------------------------------------------- */
/* Tela cheia: um visor pequeno, no meio de um dialog padrão, não daria
   margem para mirar o código com a mão ocupada segurando o aparelho. */

.leitor-camera {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--negro);
  display: flex;
  flex-direction: column;
}
.leitor-camera::backdrop { background: var(--negro); }

.leitor-camera__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leitor-camera__topo {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: var(--e-2);
  padding: var(--e-3);
  padding-top: max(var(--e-3), env(safe-area-inset-top));
  background: linear-gradient(rgba(0, 0, 0, .55), transparent);
}
.leitor-camera__botao {
  width: var(--toque-min);
  height: var(--toque-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(0, 0, 0, .35);
  color: var(--neutro-0);
  font-size: var(--txt-xl);
}
.leitor-camera__botao--ativo { background: var(--azul-500); border-color: var(--azul-500); }

.leitor-camera__visor {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.leitor-camera__moldura {
  position: relative;
  width: min(85vw, 380px);
  height: clamp(120px, 32vw, 170px);
}
.leitor-camera__canto {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 3px solid var(--azul-300);
}
.leitor-camera__canto--tl { top: 0;    left: 0;  border-right: none;  border-bottom: none; border-top-left-radius: 8px; }
.leitor-camera__canto--tr { top: 0;    right: 0; border-left: none;   border-bottom: none; border-top-right-radius: 8px; }
.leitor-camera__canto--bl { bottom: 0; left: 0;  border-right: none;  border-top: none;    border-bottom-left-radius: 8px; }
.leitor-camera__canto--br { bottom: 0; right: 0; border-left: none;   border-top: none;    border-bottom-right-radius: 8px; }

.leitor-camera__moldura--sucesso .leitor-camera__canto { border-color: var(--sinc-ok); }

.leitor-camera__legenda {
  position: relative;
  z-index: 1;
  padding: var(--e-4);
  padding-bottom: max(var(--e-6), env(safe-area-inset-bottom));
  text-align: center;
  color: var(--neutro-0);
  font-size: var(--txt-sm);
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
}

/* A alternativa ao teclado fica dentro do visor, não escondida atrás do
   "fechar": quando o código não lê (etiqueta rasgada, luz ruim), obrigar o
   auditor a sair da câmera para descobrir que existe outro caminho é o
   momento exato em que ele desiste e anota no papel. */
.leitor-camera__rodape {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 0 var(--e-4) var(--e-4);
  padding-bottom: max(var(--e-4), env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .55);
}
.leitor-camera__digitar {
  min-height: var(--toque-min);
  padding: 0 var(--e-5);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  color: var(--neutro-0);
  font-size: var(--txt-sm);
  font-weight: 600;
}

/* Sem o rodapé, a legenda carrega a área segura sozinha; com ele, quem
   carrega é o rodapé — senão sobra uma faixa preta no lugar errado. */
.leitor-camera__legenda:has(+ .leitor-camera__rodape) {
  padding-bottom: var(--e-2);
}

.leitor-camera__erro {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-6);
  text-align: center;
  color: var(--neutro-0);
}

/* --- último item ---------------------------------------------------------- */
/* O bloco mais importante da tela: é a confirmação de que a bipagem certa
   entrou. Fica logo abaixo do campo, no caminho natural do olhar. */

.ultimo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  min-height: 5.5rem;
  background: var(--azul-100);
  border-bottom: 1px solid var(--linha);
}
.ultimo--vazio { background: var(--surface-2); }
.ultimo__vazio { color: var(--texto-3); font-size: var(--txt-sm); }

.ultimo--desconhecido { background: var(--laranja-50); }

.ultimo__quantidade {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.5rem;
}
.ultimo__quantidade strong {
  font-size: var(--txt-2xl);
  font-variant-numeric: tabular-nums;
  color: var(--azul-900);
  line-height: 1;
}
.ultimo__fator {
  font-size: var(--txt-xs);
  color: var(--texto-3);
  font-family: var(--fonte-mono);
}

.ultimo__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ultimo__descricao {
  font-size: var(--txt-md);
  line-height: 1.25;
  color: var(--azul-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ultimo__codigo     { font-size: var(--txt-xs); color: var(--texto-3); }
.ultimo__acumulado  { font-size: var(--txt-sm); color: var(--azul-700); font-weight: 600; }
.ultimo__aviso      { font-size: var(--txt-xs); color: var(--atencao-texto); }

/* --- lista de leituras ---------------------------------------------------- */

.leituras__caixa {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
}
.leituras__titulo {
  position: sticky;
  top: 0;
  padding: var(--e-2) var(--e-3);
  background: var(--surface);
  border-bottom: 1px solid var(--linha);
  font-size: var(--txt-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-3);
}

.leituras { list-style: none; margin: 0; padding: 0; }

.leituras__item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--linha);
}
.leituras__vazio { padding: var(--e-5); text-align: center; color: var(--texto-3); }

.leituras__qtd {
  min-width: 3rem;
  text-align: right;
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--azul-700);
}
.leituras__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.leituras__desc {
  font-size: var(--txt-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leituras__meta { font-size: var(--txt-xs); color: var(--texto-3); }

/* Estorno some da linha estornada: reverter duas vezes é o erro que a
   restrição do banco impede, mas a interface não deve nem sugerir. */
.leituras__item--estornada { opacity: .55; }
.leituras__item--estornada .leituras__desc { text-decoration: line-through; }
.leituras__item--ajuste .leituras__qtd { color: var(--falta); }

/* Estornar é destrutivo e fica numa lista densa: alvo cheio (`--toque-min`),
   não 40px, para não estornar a leitura errada com o dedo. */
.leituras__estornar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--toque-min);
  height: var(--toque-min);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio);
  background: var(--surface);
  color: var(--texto-2);
  flex: none;
}
.leituras__estornar:hover { background: var(--surface-2); color: var(--falta); }

/* --- rodapé --------------------------------------------------------------- */

.contagem__acoes {
  display: flex;
  gap: var(--e-2);
  padding: var(--e-3);
  padding-bottom: max(var(--e-3), env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--linha);
}
.contagem__acoes .btn { flex: 1; }

/* Pausada: a tela inteira muda de tom. Sem isso, o auditor continuaria
   bipando contra uma contagem que não aceita leitura. */
.contagem--pausada .leitura { background: var(--surface-2); opacity: .6; }
.contagem--pausada .leitura__codigo { border-style: dashed; }

/* --- tela de pendências (mesa, não corredor) ------------------------------ */

.pendencia__cabecalho {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}
.pendencia__codigo { font-size: var(--txt-lg); color: var(--azul-900); }
.pendencia__acoes {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
  margin-top: var(--e-3);
}

/* Foto do produto sem SKU (o auditor tira na hora; o gestor vê aqui). */
.pendencia__fotos { margin-top: var(--e-3); display: flex; flex-direction: column; gap: var(--e-2); }
.pendencia__observacao { margin: 0; color: var(--texto-2); font-size: var(--txt-sm); }
.pendencia__sem-foto { margin-top: var(--e-2); }

.foto-sem-sku__camera { width: 100%; min-height: 3rem; justify-content: center; }
.foto-sem-sku__previa {
  width: 100%;
  max-height: 16rem;
  object-fit: contain;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--surface-2);
}

.busca-resultados {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e-2);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.busca-resultado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: var(--e-2);
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  background: transparent;
  text-align: left;
}
.busca-resultado:hover { background: var(--surface-2); }
.busca-resultado--ativo {
  background: var(--azul-100);
  border-color: var(--azul-500);
}

/* --- telas maiores -------------------------------------------------------- */
/* A contagem também é usada em tablet apoiado no carrinho. Centralizar e
   limitar a largura evita a linha de 90 caracteres que ninguém lê. */

@media (min-width: 768px) {
  .contagem {
    max-width: 34rem;
    margin: 0 auto;
    box-shadow: var(--sombra-lg);
  }
  .leitura { grid-template-columns: 5rem 1fr auto auto; }
  .ultimo__descricao { font-size: var(--txt-lg); }
}