/* ==========================================================================
   Contagem visual por IA — VC01, identificar a SKU (mockup)

   Mesmo chão da tela de contagem (`contagem.css`): cabeçalho azul-900 com o
   contexto que o auditor confere de relance, faixas fixas em 100dvh e a ação
   presa na zona do polegar. Reaproveita `.contagem__topo`, `.contagem__sair`,
   `.contagem__setor-fixo`, `.contagem__rodada`, `.sinc` e `.progresso` sem
   redefinir nada; o que é daqui leva o prefixo `.cfoto`.

   Uma ação por vez domina a tela: primeiro o código, depois o produto e o
   botão de fotografar. Nada de quantidade em lugar nenhum (RN-07).
   ========================================================================== */

.cfoto {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  height: 100dvh;
  min-width: 0;
  background: var(--ground);
}
.cfoto > * { min-width: 0; }

/* O aviso de conexão é opcional; sem ele, o corpo ocupa a faixa elástica. */
.cfoto:not(:has(.cfoto__aviso)) { grid-template-rows: auto auto 1fr auto; }

/* VC04 (resultado) não tem a seção `.progresso` separada do VC01 — só
   cabeçalho, corpo e rodapé como filhos diretos do grid. Sem esta classe, a
   contagem de linhas do seletor acima (pensada para o cabeçalho + progresso
   do VC01) desalinha: o rodapé herdava a linha `1fr` e esticava.
   Especificidade igual a `.cfoto:not(:has(.cfoto__aviso))` (0,2,0): repete
   `.cfoto` para vencer por ordem de declaração, não por `!important`. */
.cfoto.cfoto--resultado { grid-template-rows: auto 1fr auto; }

.contagem__identidade .cfoto__titulo { font-size: var(--txt-md); letter-spacing: 0; }

/* Setor e rodada na mesma faixa: são as duas coisas que dizem "onde" e "em
   que volta" o auditor está antes de fotografar. */
.cfoto__setor { color: var(--neutro-0); }
.contagem__topo .cfoto__setor { flex: 1 0 100%; order: 3; }
.cfoto__setor .icone { color: var(--azul-300); }
.cfoto__rodada { margin-left: auto; }

/* --- aviso sem conexão ----------------------------------------------------- */

.cfoto__aviso {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  padding: var(--e-3);
  background: var(--atencao-100);
  color: var(--atencao-texto);
  border-bottom: 1px solid var(--linha);
  font-size: var(--txt-sm);
  line-height: 1.4;
}
.cfoto__aviso .icone { flex: none; margin-top: 1px; }
.cfoto__aviso p { margin: 0; }
.cfoto__aviso strong { color: var(--texto); }

/* --- corpo ------------------------------------------------------------------ */

.cfoto__corpo {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--e-5) var(--e-4) var(--e-4);
  display: flex;
  flex-direction: column;
}

.cfoto__busca {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.cfoto__rotulo {
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto);
}

/* Campo maior que o da bipagem: aqui digitar É o caminho principal, não o
   plano B do coletor. Mono porque o auditor compara dígito a dígito com a
   etiqueta. */
.cfoto__campo {
  height: 56px;
  width: 100%;
  padding: 0 var(--e-4);
  border: 2px solid var(--linha-2);
  border-radius: var(--raio-lg);
  background: var(--surface);
  color: var(--texto);
  font-family: var(--fonte-mono);
  font-size: var(--txt-xl);
  letter-spacing: .04em;
  caret-color: var(--azul-500);
}
.cfoto__campo::placeholder {
  font-family: var(--fonte);
  font-size: var(--txt-md);
  letter-spacing: 0;
  color: var(--texto-3);
}
.cfoto__campo:focus {
  outline: none;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 3px var(--azul-100);
}
.cfoto__campo[aria-invalid="true"] {
  border-color: var(--falta);
  box-shadow: 0 0 0 3px var(--falta-100);
}

.cfoto__ajuda {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--texto-3);
}

.cfoto__erro {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--txt-sm);
  color: var(--falta);
}
.cfoto__erro span { color: var(--texto-2); }

.cfoto__ou {
  margin: var(--e-4) 0;
  text-align: center;
  font-size: var(--txt-sm);
  color: var(--texto-3);
}

.cfoto__bipar {
  min-height: 56px;
  border-width: 2px;
  border-color: var(--azul-500);
  color: var(--azul-700);
}
.cfoto__bipar:hover:not(:disabled) { background: var(--azul-100); }

/* --- produto encontrado ------------------------------------------------------ */

.cfoto__produto {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: var(--e-4);
  align-items: center;
  padding: var(--e-4);
  background: var(--surface);
  border: 2px solid var(--azul-500);
  border-radius: var(--raio-lg);
}

.cfoto__imagem {
  width: 104px;
  height: 104px;
  border-radius: var(--raio);
  object-fit: contain;
  background: var(--surface-2);
}
.cfoto__imagem--vazia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  padding: var(--e-2);
  color: var(--texto-3);
  font-size: var(--txt-xs);
  line-height: 1.2;
  text-align: center;
}

.cfoto__dados { min-width: 0; display: flex; flex-direction: column; gap: var(--e-2); }

.cfoto__nome {
  margin: 0;
  font-size: var(--txt-lg);
  font-weight: 700;
  line-height: 1.25;
  color: var(--azul-900);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}

.cfoto__codigos { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.cfoto__codigos div { display: flex; gap: var(--e-2); align-items: baseline; }
.cfoto__codigos dt {
  min-width: 3.25rem;
  font-size: var(--txt-xs);
  color: var(--texto-3);
}
.cfoto__codigos dd {
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: var(--txt-sm);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.cfoto__confira {
  margin: var(--e-3) 0 0;
  font-size: var(--txt-sm);
  color: var(--texto-2);
}

.cfoto__trocar {
  align-self: flex-start;
  min-height: var(--toque-min);
  margin-left: calc(-1 * var(--e-2));
  padding: 0 var(--e-2);
  border: none;
  border-radius: var(--raio);
  background: none;
  color: var(--azul-700);
  font-size: var(--txt-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cfoto__trocar:hover { background: var(--azul-100); }

/* A regra das 10 unidades aparece já aqui, antes da câmera: o auditor separa
   os produtos na prateleira enquanto ainda está olhando para a tela. */
.cfoto__regra {
  margin-top: auto;
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-lg);
  background: var(--azul-100);
  color: var(--azul-900);
  font-size: var(--txt-sm);
  line-height: 1.45;
}
.cfoto__regra .icone { flex: none; margin-top: 1px; color: var(--azul-700); }
.cfoto__regra p { margin: 0; }

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

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

.cfoto__continuar,
.cfoto__cta {
  min-height: 56px;
  font-size: var(--txt-lg);
}

/* O laranja de marca (#E05E3B) com texto branco mede 3,6:1 — abaixo de AA
   para texto de 18px. Na tela de campo, com luz de loja, usa o degrau
   --laranja-700 (4,8:1): continua sendo a cor de destaque da marca, e é o
   único laranja visível na tela. */
.cfoto__cta {
  background: var(--laranja-700);
  color: var(--neutro-0);
  font-weight: 700;
}
.cfoto__cta:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 2px; }
/* Laranja desbotado ainda parece tocável; indisponível fica neutro. O CTA
   vira `<a>` (navega para o VC02): sem conexão ele fica um link inerte
   marcado `aria-disabled`, não `:disabled` nativo. */
.cfoto__cta:disabled,
.cfoto__cta--desabilitado {
  opacity: 1;
  background: var(--surface-2);
  border-color: var(--linha-2);
  color: var(--texto-3);
  pointer-events: none;
  cursor: default;
}

.cfoto__motivo {
  margin: 0;
  text-align: center;
  font-size: var(--txt-sm);
  color: var(--texto-2);
}

/* Paisagem em celular: a altura some. O corpo rola, rodapé e topo ficam. */
@media (max-height: 480px) {
  .cfoto__corpo { padding-top: var(--e-3); }
  .cfoto__regra { margin-top: var(--e-3); }
}

/* --- ponto de entrada na tela de contagem (mockup S04) ------------------------ */
/* Uma faixa a mais entre o campo de leitura e o último item. O ícone de
   câmera do formulário continua sendo o leitor rápido de barras. */

.contagem--com-foto { grid-template-rows: auto auto auto auto auto 1fr auto; }
.contagem--com-foto .leitura { border-bottom: none; }

.contagem__foto {
  padding: 0 var(--e-3) var(--e-3);
  background: var(--surface);
  border-bottom: 1px solid var(--linha);
}
.contagem__foto-link {
  border-width: 2px;
  border-color: var(--azul-500);
  color: var(--azul-700);
}
.contagem__foto-link:hover { background: var(--azul-100); }

/* ==========================================================================
   VC02 — captura da fotografia

   Câmera como protagonista: vídeo cobrindo o viewport inteiro, controles
   sobrepostos com gradiente atrás (nunca uma faixa sólida que rouba área do
   visor). Mesmo padrão visual de `leitor-camera` em `contagem.css` (fundo
   preto, moldura de cantos, `env(safe-area-inset-*)`), mas layout próprio:
   aqui a captura é deliberada e tem preview, não leitura contínua.
   ========================================================================== */

.cfoto-cam {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--negro);
  overflow: hidden;
}

.cfoto-cam__visor-tela,
.cfoto-cam__preview-tela {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cfoto-cam__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--negro);
}

.cfoto-cam__topo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  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, .6), transparent);
}
.cfoto-cam__botao {
  flex: none;
  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);
}
.cfoto-cam__produto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-top: 2px;
  color: var(--neutro-0);
}
.cfoto-cam__produto strong {
  font-size: var(--txt-sm);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cfoto-cam__produto span { font-size: var(--txt-xs); color: rgba(255, 255, 255, .7); }

.cfoto-cam__selo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  height: 28px;
  padding: 0 var(--e-2);
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: var(--sinc-ok);
  font-size: var(--txt-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* A moldura mostra o enquadramento sugerido, mas nunca bloqueia o toque: o
   visor inteiro segue tocável (mesma regra do leitor de barras). */
.cfoto-cam__quadro {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 0 var(--e-5);
}
.cfoto-cam__moldura {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
}
.cfoto-cam__canto {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, .85);
}
.cfoto-cam__canto--tl { top: 0;    left: 0;  border-right: none;  border-bottom: none; border-top-left-radius: 10px; }
.cfoto-cam__canto--tr { top: 0;    right: 0; border-left: none;   border-bottom: none; border-top-right-radius: 10px; }
.cfoto-cam__canto--bl { bottom: 0; left: 0;  border-right: none;  border-top: none;    border-bottom-left-radius: 10px; }
.cfoto-cam__canto--br { bottom: 0; right: 0; border-left: none;   border-top: none;    border-bottom-right-radius: 10px; }

.cfoto-cam__rodape {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4);
  padding-bottom: max(var(--e-5), env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, .7) 55%);
}

.cfoto-cam__legenda { text-align: center; color: var(--neutro-0); }
.cfoto-cam__regra {
  margin: 0;
  font-size: var(--txt-md);
  line-height: 1.4;
}
.cfoto-cam__dica {
  margin: var(--e-1) 0 0;
  font-size: var(--txt-sm);
  color: rgba(255, 255, 255, .75);
}

.cfoto-cam__acoes { display: flex; justify-content: center; }

/* Botão de captura: alvo grande, disco branco com anel — vocabulário
   universal de câmera, não precisa de rótulo visível (tem aria-label). */
.cfoto-cam__capturar {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  border: 4px solid rgba(255, 255, 255, .9);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cfoto-cam__capturar:active:not(:disabled) .cfoto-cam__capturar-anel { transform: scale(.82); }
.cfoto-cam__capturar:disabled { opacity: .4; }
.cfoto-cam__capturar-anel {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--neutro-0);
  transition: transform .1s ease;
}

.cfoto-cam__erro {
  position: absolute;
  inset: 0;
  z-index: 2;
  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);
  background: var(--negro);
}
.cfoto-cam__erro p { margin: 0; max-width: 26rem; }

/* --- preview ----------------------------------------------------------------- */

.cfoto-cam__preview-imagem {
  flex: 1;
  min-height: 0;
  background: #111;
  display: flex;
}
.cfoto-cam__foto {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cfoto-cam__foto--mock {
  background:
    linear-gradient(135deg, #2a2f33 25%, transparent 25%) 0 0/24px 24px,
    linear-gradient(225deg, #2a2f33 25%, transparent 25%) 0 0/24px 24px,
    #1b1e20;
}

.cfoto-cam__preview-rodape {
  padding: var(--e-4);
  padding-bottom: max(var(--e-4), env(safe-area-inset-bottom));
  background: var(--negro);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.cfoto-cam__preview-legenda {
  margin: 0;
  font-size: var(--txt-sm);
  color: rgba(255, 255, 255, .85);
  text-align: center;
}
.cfoto-cam__preview-legenda strong { color: var(--neutro-0); }

.cfoto-cam__preview-acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
}
.cfoto-cam__preview-acoes .btn { min-height: 56px; }

/* Paisagem: a moldura quadrada não cabe na altura — encolhe e a legenda some
   da leitura por cima da moldura (o texto do rodapé já basta). */
@media (max-height: 480px) {
  .cfoto-cam__quadro { padding: 0 var(--e-3); }
  .cfoto-cam__moldura { max-width: min(60vh, 340px); }
  .cfoto-cam__rodape { padding: var(--e-2) var(--e-4); gap: var(--e-2); }
  .cfoto-cam__regra { font-size: var(--txt-sm); }
  .cfoto-cam__dica { display: none; }
}

/* ==========================================================================
   VC03 — analisando / nova tentativa

   Dois climas diferentes na mesma família de telas. "Analisando" e "falha
   técnica" são a continuação direta da câmera (fundo escuro, sem interação
   possível): o auditor acabou de confirmar a foto, ainda está na mesma
   postura. "Qualidade ruim" já é uma decisão a tomar — volta ao chão claro
   do VC01, com o motivo em destaque e uma única ação.
   ========================================================================== */

.cfoto-an__tela {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cfoto-an__tela--escura { background: var(--negro); color: var(--neutro-0); }

.cfoto-an__cabecalho {
  display: flex;
  flex-direction: column;
  padding: var(--e-3);
  padding-top: max(var(--e-3), env(safe-area-inset-top));
}
.cfoto-an__tela--escura .cfoto-an__cabecalho {
  background: linear-gradient(rgba(0, 0, 0, .6), transparent);
}
.cfoto-an__cabecalho strong {
  font-size: var(--txt-sm);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cfoto-an__tela--escura .cfoto-an__cabecalho span { color: rgba(255, 255, 255, .7); }
.cfoto-an__cabecalho span { font-size: var(--txt-xs); color: var(--texto-3); }

.cfoto-an__miolo {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-6);
  text-align: center;
}
.cfoto-an__miolo .icone { color: var(--sinc-alerta); }

.cfoto-an__spinner {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 4px solid rgba(255, 255, 255, .25);
  border-top-color: var(--neutro-0);
  animation: cfoto-girar 0.85s linear infinite;
}
@keyframes cfoto-girar { to { transform: rotate(360deg); } }

.cfoto-an__titulo { margin: 0; font-size: var(--txt-lg); font-weight: 700; }
.cfoto-an__texto {
  margin: 0;
  max-width: 26rem;
  font-size: var(--txt-sm);
  color: rgba(255, 255, 255, .75);
}
.cfoto-an__tela:not(.cfoto-an__tela--escura) .cfoto-an__texto { color: var(--texto-2); }

.cfoto-an__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4);
  padding-bottom: max(var(--e-4), env(safe-area-inset-bottom));
}
.cfoto-an__acoes .btn { min-height: 56px; }
.cfoto-an__acoes--clara {
  background: var(--surface);
  border-top: 1px solid var(--linha);
}

/* --- qualidade ruim (chão claro) ---------------------------------------------- */

.cfoto-an__conteudo {
  flex: 1;
  overflow-y: auto;
  padding: var(--e-5) var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  background: var(--ground);
}

.cfoto-an__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  height: 28px;
  padding: 0 var(--e-3);
  border-radius: 999px;
  background: var(--atencao-100);
  color: var(--atencao-texto);
  font-size: var(--txt-xs);
  font-weight: 700;
}

.cfoto-an__motivo-titulo {
  margin: 0;
  font-size: var(--txt-xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--azul-900);
}

.cfoto-an__motivo-caixa {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-lg);
  background: var(--surface);
  border: 1px solid var(--linha);
}
.cfoto-an__motivo-rotulo {
  margin: 0 0 2px;
  font-size: var(--txt-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-3);
}
.cfoto-an__motivo-texto {
  margin: 0;
  font-size: var(--txt-md);
  font-weight: 600;
  color: var(--texto);
}

.cfoto-an__orientacao {
  margin: 0;
  font-size: var(--txt-md);
  line-height: 1.5;
  color: var(--texto-2);
}

/* ==========================================================================
   VC04 — resultado da análise (quantidade, confiança, confirmação)

   Volta ao chão claro do VC01 (`.cfoto`, mesmo cabeçalho): o auditor já
   fotografou, agora decide. A foto usada some para segundo plano — o número
   grande é o que domina, porque é a única decisão real desta tela (regra 78:
   IA sugere, Auditor confirma). Prefixo `.cres__`.
   ========================================================================== */

/* O corpo herda `overflow-y: auto` de `.cfoto__corpo` — dentro de um
   contêiner com scroll, `justify-content: center` não centraliza quando o
   conteúdo cabe (a Flexbox alinha ao início do eixo de scroll). `margin:
   auto` no miolo resolve nos dois casos: centraliza quando sobra espaço,
   rola normalmente quando não sobra. Sem isso, numa tela alta sobra ar
   vazio embaixo do stepper — e o número grande é a única coisa que deveria
   dominar a tela. */
.cres__corpo { gap: var(--e-4); }
.cres__miolo { margin: auto 0; display: flex; flex-direction: column; gap: var(--e-4); }

.cres__midia {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.cres__foto {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--raio);
  object-fit: cover;
  background: var(--surface-2);
}
.cres__foto--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-3);
}
.cres__midia-legenda { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cres__midia-legenda strong {
  font-size: var(--txt-sm);
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cres__midia-legenda span { font-size: var(--txt-xs); font-family: var(--fonte-mono); color: var(--texto-3); }

.cres__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  height: 28px;
  padding: 0 var(--e-3);
  border-radius: 999px;
  background: var(--atencao-100);
  color: var(--atencao-texto);
  font-size: var(--txt-xs);
  font-weight: 700;
}

.cres__numero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--e-4) 0 var(--e-1);
  text-align: center;
}
.cres__numero strong {
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--azul-900);
}
.cres__numero span { margin-top: var(--e-1); font-size: var(--txt-md); color: var(--texto-2); }

.cres__explicacao {
  margin: 0 auto;
  max-width: 30rem;
  text-align: center;
  font-size: var(--txt-sm);
  color: var(--texto-2);
}

.cres__ajuste {
  margin-top: var(--e-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
}
.cres__ajuste-rotulo {
  font-size: var(--txt-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-3);
}

.cres__stepper {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--linha-2);
  border-radius: var(--raio-lg);
  overflow: hidden;
}
.cres__stepper-botao {
  width: var(--toque-min);
  min-height: var(--toque-min);
  border: none;
  background: var(--surface-2);
  color: var(--azul-700);
  font-size: var(--txt-2xl);
  line-height: 1;
  font-weight: 600;
}
.cres__stepper-botao:disabled { color: var(--texto-3); opacity: .5; }
.cres__stepper-botao:hover:not(:disabled) { background: var(--azul-100); }
.cres__stepper-campo {
  width: 4.5rem;
  min-height: var(--toque-min);
  border: none;
  border-left: 1px solid var(--linha-2);
  border-right: 1px solid var(--linha-2);
  background: var(--surface);
  color: var(--texto);
  text-align: center;
  font-size: var(--txt-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.cres__stepper-campo::-webkit-outer-spin-button,
.cres__stepper-campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cres__stepper-campo:focus { outline: none; background: var(--azul-100); }

/* Correção não é erro do Auditor (regra 80): tom neutro, não de alerta. */
.cres__corrigido {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  margin: 0;
  font-size: var(--txt-xs);
  color: var(--texto-2);
}
.cres__corrigido .icone { flex: none; color: var(--azul-700); }

.cres__confirmar { font-size: var(--txt-lg); }

/* ==========================================================================
   VC05 — acumulado da SKU (fotos confirmadas, total, próxima ação)

   Diferente do VC04, aqui o conteúdo é uma LISTA que pode crescer (mais
   fotos = mais linhas) — o corpo rola normalmente em vez de centralizar
   (`.cres__miolo` não se aplica). O total fica fixo logo acima do rodapé,
   sempre visível sem depender de rolar até o fim da lista. Prefixo `.cacu__`.
   ========================================================================== */

.cacu__corpo { gap: var(--e-4); }

.cacu__produto {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.cacu__produto-foto {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--raio);
  object-fit: cover;
  background: var(--surface-2);
}
.cacu__produto-foto--vazia { display: flex; align-items: center; justify-content: center; color: var(--texto-3); }
.cacu__produto-legenda { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cacu__produto-legenda strong {
  font-size: var(--txt-sm);
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cacu__produto-legenda span { font-size: var(--txt-xs); font-family: var(--fonte-mono); color: var(--texto-3); }

.cacu__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  overflow: hidden;
}
.cacu__item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  background: var(--surface);
}
.cacu__item + .cacu__item { border-top: 1px solid var(--linha); }

.cacu__item-miniatura {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--raio-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--texto-3);
}
.cacu__item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cacu__item-rotulo { font-size: var(--txt-sm); font-weight: 600; color: var(--texto); }
.cacu__item-selo {
  align-self: flex-start;
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--atencao-texto);
}
.cacu__item-qtd {
  flex: none;
  font-size: var(--txt-lg);
  font-variant-numeric: tabular-nums;
  color: var(--azul-900);
}

.cacu__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-lg);
  background: var(--azul-100);
}
.cacu__total-rotulo { font-size: var(--txt-sm); font-weight: 600; color: var(--azul-900); }
.cacu__total-numero {
  font-size: var(--txt-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--azul-900);
}

.cacu__rodape { flex-direction: column; gap: var(--e-2); }
.cacu__rodape .btn { min-height: 56px; }

/* ==========================================================================
   VC06 — estado após finalizar SKU (sucesso, quantidade lançada, próxima)

   Última tela do subfluxo: confirmação breve, não uma celebração. Mesma
   estratégia de centralização vertical do VC04 (`.cres__miolo`) — aqui
   `.csuc__miolo`, mesmo motivo (pouco conteúdo, não deve ficar preso ao
   topo com ar vazio embaixo). Prefixo `.csuc__`.
   ========================================================================== */

.csuc__corpo { gap: var(--e-4); }
.csuc__miolo {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  text-align: center;
}

.csuc__selo {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--conforme-100);
  color: var(--conforme);
}

.csuc__titulo {
  margin: 0;
  font-size: var(--txt-xl);
  font-weight: 700;
  color: var(--azul-900);
}

.csuc__produto {
  margin-top: var(--e-2);
  width: 100%;
  max-width: 22rem;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  border-radius: var(--raio-lg);
  background: var(--surface);
  border: 1px solid var(--linha);
  text-align: left;
}
.csuc__produto-foto {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--raio);
  object-fit: cover;
  background: var(--surface-2);
}
.csuc__produto-foto--vazia { display: flex; align-items: center; justify-content: center; color: var(--texto-3); }
.csuc__produto-legenda { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.csuc__produto-legenda strong {
  font-size: var(--txt-sm);
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csuc__produto-legenda span { font-size: var(--txt-xs); font-family: var(--fonte-mono); color: var(--texto-3); }
.csuc__produto-qtd {
  flex: none;
  font-size: var(--txt-xl);
  font-variant-numeric: tabular-nums;
  color: var(--azul-900);
}

.csuc__rodape { flex-direction: column; gap: var(--e-2); }
.csuc__rodape .btn { min-height: 56px; }

@media (min-width: 768px) {
  .cfoto {
    max-width: 34rem;
    margin: 0 auto;
    box-shadow: var(--sombra-lg);
  }
}