/* ==========================================================================
   Relaxmedic — Reversa
   Tema claro, montado sobre a paleta oficial da marca. Foi a escolha certa
   para o galpão: sob luz forte e à luz do dia no celular, fundo claro com
   texto marinho lê melhor do que o contrário, e o logo pode aparecer nas
   cores originais.

   Alvos grandes (56px), contraste alto, nada decorativo. A única peça
   expressiva é o carimbo de destino da Etapa 4 — a informação que o operador
   precisa ler de longe e sem hesitar.

   Para voltar ao tema escuro: <html data-tema="escuro"> no index.html.
   ========================================================================== */

:root {
  /* Paleta oficial (8 faixas):
     #09C8DF ciano · #00133F marinho · #5B7091 azul médio · #77D4E5 ciano claro
     #012B58 azul  · #B3BCD1 cinza-azulado · #031130 marinho escuro · #1FB9D6 ciano médio */

  --fundo:          #F4F7FB;   /* fundo da aplicação */
  --superficie:     #FFFFFF;   /* campos e cartões */
  --superficie-2:   #E9EEF6;   /* superfícies de apoio, estados de repouso */
  --contorno:       #B3BCD1;   /* bordas e divisórias */
  --contorno-forte: #5B7091;   /* bordas em foco e traços de estrutura */
  --rotulo:         #5B7091;   /* rótulos e textos de apoio */
  --texto:          #00133F;   /* texto principal */
  --texto-invertido:#FFFFFF;   /* texto sobre superfícies escuras */

  --ciano:          #09C8DF;   /* ação principal */
  --ciano-medio:    #1FB9D6;   /* estado pressionado */
  --ciano-suave:    #77D4E5;   /* hover e realces leves */
  --marinho:        #012B58;   /* âncoras escuras: topo, texto sobre ciano */

  /* Cores de estado, escurecidas o suficiente para ler sobre fundo claro.
     Cada uma tem um significado fixo em toda a interface. */
  --alerta:         #B06E00;   /* quarentena, avisos */
  --alerta-fundo:   #FDF3E0;
  --erro:           #C0392F;   /* descarte, bloqueio */
  --erro-fundo:     #FCEDEB;
  --ok:             #12805C;   /* novo, gravado */

  --sombra:         0 1px 2px rgba(0, 19, 63, .06), 0 4px 12px rgba(0, 19, 63, .06);

  --raio:  14px;
  --toque: 56px;            /* altura mínima de qualquer alvo tocável */
  --largura: 34rem;

  --fonte: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-dado: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

/* Tema escuro, preservado como alternativa. Só as cores mudam; toda a
   estrutura abaixo é compartilhada. */
[data-tema="escuro"] {
  --fundo:          #031130;
  --superficie:     #00133F;
  --superficie-2:   #012B58;
  --contorno:       #5B7091;
  --contorno-forte: #B3BCD1;
  --rotulo:         #B3BCD1;
  --texto:          #E4E9F2;
  --texto-invertido:#00133F;
  --marinho:        #031130;
  --alerta:         #E9A93D;
  --alerta-fundo:   rgba(233, 169, 61, .12);
  --erro:           #E86A73;
  --erro-fundo:     rgba(232, 106, 115, .12);
  --ok:             #4FD1A5;
  --sombra:         0 12px 32px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

button, input, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--ciano);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

/* --------------------------- estrutura --------------------------- */
.tela { display: none; }
.tela.ativa { display: block; animation: entra .18s ease-out; }
.tela--centro { max-width: var(--largura); margin: 0 auto; padding: 2.5rem 1.25rem; }

@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .tela.ativa { animation: none; }
}

.palco {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 1rem 1.25rem 7rem;
}

/* --------------------------- marca --------------------------- */
/* O logo é a única imagem fixa da interface. Na entrada ele aparece grande,
   porque a tela de login não compete com nada; nas demais telas encolhe para
   uma tarja discreta no cabeçalho, dando lugar ao trabalho. */
.marca { text-align: center; margin-bottom: 2.75rem; }
.marca__logo {
  width: min(19rem, 72vw);
  height: auto;
  display: block;
  margin: 0 auto;
}
.marca__logo--fundo-escuro { display: none; }
[data-tema="escuro"] .marca__logo--fundo-claro { display: none; }
[data-tema="escuro"] .marca__logo--fundo-escuro { display: block; }

.marca__sub {
  display: block;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--ciano);
  width: fit-content;
  margin-inline: auto;
  color: var(--ciano);
  font-size: .78rem; letter-spacing: .42em; text-transform: uppercase;
  padding-left: .42em;  /* compensa o espaçamento da última letra */
}

.titulo-login {
  font-size: 1.15rem; font-weight: 600; text-align: center;
  margin: 0 0 1.5rem;
}

/* --------------------------- topo --------------------------- */
.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.25rem;
  /* Faixa marinho: ancora a tela, separa o cabeçalho do trabalho e devolve
     à marca o fundo escuro em que ela nasceu. */
  background: var(--marinho);
  color: #FFFFFF;
}
.topo__marca { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.topo__logo { height: 22px; width: auto; }
.topo__modulo {
  color: var(--ciano);
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  border-left: 1px solid rgba(255, 255, 255, .28);
  padding-left: .6rem;
}
.topo__direita { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.topo__navegacao { display: flex; align-items: center; gap: .15rem; flex: none; }

.etiqueta {
  white-space: nowrap;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #FFFFFF;
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .8rem;
}
.etiqueta--backlog { border-color: var(--ciano-suave); color: var(--ciano-suave); }

.botao-texto {
  background: none; border: 0; color: rgba(255, 255, 255, .78);
  cursor: pointer; padding: .5rem; text-decoration: underline;
}
.botao-texto:hover { color: #FFFFFF; }

/* --------------------------- trilha de etapas --------------------------- */
.trilha {
  display: flex; gap: .35rem;
  max-width: var(--largura); margin: 0 auto;
  padding: .85rem 1.25rem 0;
}
.trilha__passo {
  flex: 1;
  padding-top: .5rem;
  border-top: 3px solid var(--contorno);
  color: var(--rotulo);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trilha__passo.feito { border-top-color: var(--ciano); color: var(--rotulo); }
.trilha__passo.atual { border-top-color: var(--ciano); color: var(--ciano); font-weight: 700; }

/* O ✓ marca o que ficou para trás; o ponto, onde se está. Numa trilha de
   cinco marcos em tela de celular, a cor sozinha não basta — e para quem
   enxerga cor de outro jeito, não diz nada. */
.trilha__passo.feito::before { content: "✓ "; color: var(--ciano); font-weight: 700; }
.trilha__passo.atual::before { content: "● "; font-size: .8em; }


/* --------------------------- textos de tela --------------------------- */
.segmento {
  margin: .5rem 0 .1rem;
  font-size: 1.6rem; font-weight: 700; color: var(--ciano);
}
.subtitulo { margin: 0 0 1.4rem; color: var(--rotulo); font-size: .95rem; }
.pergunta { margin: 1.5rem 0 1rem; font-size: 1.15rem; font-weight: 600; }

/* --------------------------- campos --------------------------- */
.campos { display: flex; flex-direction: column; }

.campo { display: block; margin-bottom: 1.1rem; }
.campo__rotulo {
  display: block; margin-bottom: .4rem;
  color: var(--rotulo); font-size: .82rem;
  letter-spacing: .05em; text-transform: uppercase;
}
.campo__rotulo em { font-style: normal; text-transform: none; letter-spacing: 0; }

.campo__entrada {
  width: 100%;
  box-shadow: var(--sombra);
  min-height: var(--toque);
  padding: .75rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  color: var(--texto);
}
.campo__entrada::placeholder { color: #55688A; }
.campo__entrada:focus { border-color: var(--ciano); }
.campo__entrada[readonly] { background: var(--superficie-2); color: var(--rotulo); box-shadow: none; }
.campo__entrada--codigo { font-family: var(--fonte-dado); font-size: 1.2rem; letter-spacing: .06em; }
.campo__entrada--pin {
  text-align: center; font-size: 1.8rem; letter-spacing: .5em; padding-left: .5em;
}
.campo--erro .campo__entrada { border-color: var(--erro); }

.campo__grupo { display: flex; gap: .6rem; }
.campo__grupo .campo__entrada { flex: 1; }

/* caixa de seleção que revela um campo opcional */
.opcional {
  display: flex; align-items: center; gap: .7rem;
  min-height: var(--toque);
  padding: 0 1rem;
  margin-bottom: .5rem;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  cursor: pointer;
}
.opcional input { width: 22px; height: 22px; accent-color: var(--ciano); }
.opcional span { font-size: .95rem; }

/* --------------------------- botões ---------------------------
   Três níveis, e só três. O ciano cheio é a ação principal da tela — uma por
   vez, senão nenhuma se destaca. O contornado é tudo o mais que se pode
   fazer ali. O vermelho é o que não tem volta.

   Nenhum botão leva glifo: a regra do projeto é que o desenho marca uma
   *coisa* (um atalho, uma etapa, um destino), nunca uma *ação*. Botão com
   emoji ao lado de botão sem emoji é o que fazia a barra parecer remendada. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: var(--toque);
  padding: .7rem 1.3rem;
  border-radius: 999px;
  border: 1.5px solid var(--contorno-forte);
  background: var(--superficie);
  color: var(--texto);
  font-size: .95rem; font-weight: 700; line-height: 1.2;
  white-space: nowrap;
  /* Também vale para <a class="botao">: sem isto o link vinha sublinhado e
     destoava dos botões vizinhos na mesma barra. */
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.botao:hover:not(:disabled) { background: var(--superficie-2); border-color: var(--ciano-medio); }
.botao:active:not(:disabled) { transform: scale(.98); }
.botao:disabled { opacity: .45; cursor: not-allowed; }

.botao--principal {
  background: var(--ciano); border-color: var(--ciano); color: var(--marinho);
}
.botao--principal:hover:not(:disabled) { background: var(--ciano-suave); border-color: var(--ciano-suave); }
.botao--principal:active:not(:disabled) { background: var(--ciano-medio); }

.botao--fantasma { background: transparent; border-color: var(--contorno); color: var(--rotulo); }
.botao--fantasma:hover:not(:disabled) {
  background: var(--superficie); border-color: var(--contorno-forte); color: var(--texto);
}

.botao--compacto { min-height: 2.5rem; padding: .5rem 1.1rem; font-size: .88rem; }
.botao--largo { width: 100%; margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .botao:active:not(:disabled) { transform: none; }
}

/* seletor segmentado (canal, transportadora, avaliações, destino) */
.segmentado { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.segmentado__opcao {
  flex: 1 1 8rem;
  min-height: var(--toque);
  padding: .7rem .9rem;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  color: var(--texto);
  cursor: pointer;
}
.segmentado__opcao[aria-pressed="true"] {
  background: var(--ciano); border-color: var(--ciano);
  color: var(--marinho); font-weight: 700;
}

/* --------------------------- login --------------------------- */
.formulario-login { max-width: 20rem; margin: 0 auto; }
.formulario-login .botao { width: 100%; margin-top: .5rem; }

/* --------------------------- tela inicial --------------------------- */
/* Todos os atalhos têm o mesmo tamanho. O que muda entre um operador e um
   administrador é quais aparecem, não qual grita mais alto. */
.grupo-home { margin-bottom: 1.6rem; }
.grupo-home:last-child { margin-bottom: 0; }

.grupo-home__titulo {
  margin: 0 0 .7rem;
  color: var(--rotulo);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}

.grade-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .75rem;
}

.atalho-cartao {
  /* Glifo à esquerda ocupando as duas linhas do texto: com a mão ocupada e o
     celular de lado, a forma é encontrada antes da palavra ser lida. */
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
  gap: .15rem .9rem;
  min-height: 5.75rem;
  padding: 1rem 1.15rem;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-left: 4px solid var(--ciano);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  color: var(--texto);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}
.atalho-cartao:hover { background: var(--superficie-2); border-left-color: var(--ciano-medio); }
.atalho-cartao:active { transform: scale(.985); }
.atalho-cartao__icone {
  grid-row: 1 / 3;
  font-size: 1.75rem; line-height: 1; text-align: center;
}
.atalho-cartao__titulo {
  grid-column: 2;
  font-size: 1.15rem; font-weight: 700; line-height: 1.2;
}
.atalho-cartao__dica {
  grid-column: 2;
  color: var(--rotulo); font-size: .85rem; line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .atalho-cartao:active { transform: none; }
}

/* --------------------------- cartão do produto --------------------------- */
.cartao-produto {
  box-shadow: var(--sombra);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem 1rem;
  align-items: center;
  padding: 1rem;
  margin-bottom: 1.2rem;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
}
.cartao-produto__foto {
  width: 76px; height: 76px; object-fit: contain;
  background: #FFFFFF; border: 1px solid var(--contorno); border-radius: 10px; padding: 4px;
}
.cartao-produto__texto { min-width: 0; }
.cartao-produto__sku {
  display: block; font-family: var(--fonte-dado);
  color: var(--ciano); font-size: .82rem; letter-spacing: .06em;
}
.cartao-produto__desc { display: block; font-weight: 600; }

.avisos { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; }
.avisos li {
  padding: .6rem .8rem; margin-top: .5rem;
  background: var(--alerta-fundo);
  border-left: 3px solid var(--alerta);
  border-radius: 6px;
  font-size: .92rem;
}

/* --------------------------- carimbo de destino --------------------------- */
/* A peça expressiva da interface: o resultado da triagem precisa ser lido
   à distância, em pé, e não pode ser confundido com um botão. */
.carimbo {
  position: relative;
  margin: 1.75rem 0 1rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  border: 2px dashed var(--contorno-forte);
  background: var(--superficie);
  border-radius: var(--raio);
}
.carimbo__rotulo {
  display: block; color: var(--rotulo);
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
}
.carimbo__valor {
  display: block; margin-top: .3rem;
  font-size: 2.6rem; font-weight: 800; line-height: 1.1;
  letter-spacing: .04em; text-transform: uppercase;
}
.carimbo__motivo { display: block; margin-top: .3rem; color: var(--alerta); font-size: .88rem; }

/* Um glifo por destino, acima da palavra. É o elemento que se lê de longe,
   em pé, e o único lugar da interface onde vale um sinal desse tamanho. */
.carimbo__valor::before {
  display: block;
  margin-bottom: .2rem;
  font-size: 2rem; line-height: 1;
}
.carimbo[data-destino="Novo"]       .carimbo__valor::before { content: "✅"; }
.carimbo[data-destino="Outlet"]     .carimbo__valor::before { content: "♻️"; }
.carimbo[data-destino="Quarentena"] .carimbo__valor::before { content: "⏸️"; }
.carimbo[data-destino="Descarte"]   .carimbo__valor::before { content: "🗑️"; }

.carimbo[data-destino="Novo"]       { border-color: var(--ok);     }
.carimbo[data-destino="Novo"]       .carimbo__valor { color: var(--ok); }
.carimbo[data-destino="Outlet"]     { border-color: var(--ciano);  }
.carimbo[data-destino="Outlet"]     .carimbo__valor { color: var(--ciano); }
.carimbo[data-destino="Quarentena"] { border-color: var(--alerta); }
.carimbo[data-destino="Quarentena"] .carimbo__valor { color: var(--alerta); }
.carimbo[data-destino="Descarte"]   { border-color: var(--erro);   }
.carimbo[data-destino="Descarte"]   .carimbo__valor { color: var(--erro); }

.opcoes-destino { display: flex; gap: .6rem; flex-wrap: wrap; }
/* O seletor é montado pelo JS como um `.segmentado` aninhado. Sem ocupar a
   largura toda, ele encolhia para o tamanho do conteúdo e quebrava as opções
   em linhas, escondendo a última atrás da barra de navegação. */
.opcoes-destino .segmentado { flex: 1 1 100%; margin-bottom: 0; }
.opcoes-destino .segmentado__opcao { flex: 1 1 9rem; text-align: center; }

/* --------------------------- resumo da conclusão --------------------------- */
.resumo {
  padding: 1rem 1.15rem; margin-bottom: 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  font-size: .92rem;
}
.resumo dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0; }
.resumo dt { color: var(--rotulo); }
.resumo dd { margin: 0; text-align: right; font-weight: 600; word-break: break-word; }

/* --------------------------- navegação fixa --------------------------- */
.navegacao {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; gap: .6rem; justify-content: center;
  padding: .8rem 1.25rem calc(.8rem + env(safe-area-inset-bottom));
  /* Fundo sólido com um fio separando. Sobre fundo claro o degradê deixava o
     conteúdo aparecer por baixo dos botões e apagava os rótulos. */
  background: var(--fundo);
  border-top: 1px solid var(--contorno);
}
.navegacao .botao { flex: 1 1 0; max-width: 11rem; }

/* --------------------------- avisos e diálogo --------------------------- */
.aviso {
  display: flex; align-items: flex-start; gap: .6rem;
  position: fixed; left: 50%; bottom: 6.5rem; transform: translateX(-50%);
  z-index: 40;
  width: min(30rem, calc(100vw - 2rem));
  padding: .9rem 1.1rem;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-left: 4px solid var(--ciano);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.aviso::before { flex: none; font-size: 1.05rem; line-height: 1.4; }
.aviso--info::before { content: "ℹ️"; }
.aviso--erro::before { content: "⚠️"; }
.aviso--ok::before   { content: "✅"; }
.aviso--erro { border-left-color: var(--erro); }
.aviso--ok   { border-left-color: var(--ok); }

.barra-offline {
  position: sticky; top: 0; z-index: 50;
  padding: .5rem; text-align: center;
  background: var(--erro); color: #FFFFFF; font-weight: 700; font-size: .85rem;
}

.dialogo {
  width: min(24rem, calc(100vw - 2rem));
  /* Teto de altura com o corpo rolando por dentro: sem isto, um diálogo
     comprido empurrava os botões para fora da tela do celular, e não havia
     como fechá-lo a não ser pelo botão do sistema. */
  max-height: min(86vh, 46rem);
  padding: 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  color: var(--texto);
}
.dialogo[open] { display: flex; flex-direction: column; }
.dialogo::backdrop { background: rgba(0, 19, 63, .55); }
.dialogo__titulo { margin: 0 0 .75rem; font-size: 1.1rem; }
.dialogo__corpo {
  margin-bottom: 1.25rem;
  overflow-y: auto; overscroll-behavior: contain;
}
.dialogo__acoes { display: flex; flex: none; gap: .6rem; justify-content: flex-end; }
.codigo-grande {
  display: block; text-align: center;
  font-family: var(--fonte-dado); font-size: 2rem; font-weight: 700;
  color: var(--ciano); letter-spacing: .08em;
  padding: 1rem 0;
}
/* Tela vazia é convite, não desculpa: diz o que fazer em seguida. */
.vazio-tela {
  margin: 0;
  padding: 1.25rem 0;
  text-align: center;
  color: var(--rotulo);
  line-height: 1.5;
}
.vazio-tela b { color: var(--texto); }

/* Três linhas por item, em ordem de utilidade: o que foi decidido, qual item
   é, e o carimbo de quando/onde. O painel continua sendo o lugar do resto. */
.lista-registros { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.lista-registros li {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .7rem 0; border-bottom: 1px solid var(--contorno);
  font-size: .88rem;
}
.lista-registros li:last-child { border-bottom: 0; }

.registro__topo { display: flex; align-items: baseline; gap: .5rem; }
.registro__item { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }

.selo-destino {
  flex: none;
  padding: .1rem .5rem;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.selo-destino--Novo       { color: var(--ok); }
.selo-destino--Outlet     { color: var(--ciano-medio); }
.selo-destino--Quarentena { color: var(--alerta); }
.selo-destino--Descarte   { color: var(--erro); }

.registro__ref {
  display: flex; align-items: baseline; gap: .45rem;
  font-family: var(--fonte-dado); font-size: .85rem;
  word-break: break-word;
}
.registro__ref-rotulo {
  flex: none;
  font-family: var(--fonte); color: var(--rotulo);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}

.meus-registros__filtros {
  display: grid;
  grid-template-columns: minmax(9rem, .8fr) minmax(12rem, 1.5fr);
  gap: .75rem;
  margin-bottom: .7rem;
}
.meus-registros__filtros .campo { margin: 0; }
.meus-registros__filtros input { width: 100%; }
.meus-registros__resumo {
  margin: 0 0 .4rem;
  color: var(--rotulo);
  font-size: .8rem;
}
.meus-registros__lista { margin-bottom: .6rem; }
.registro__codigos {
  font-family: var(--fonte-dado);
  color: var(--rotulo);
  font-size: .78rem;
  word-break: break-word;
}

@media (max-width: 520px) {
  .meus-registros__filtros { grid-template-columns: 1fr; gap: .55rem; }
}

/* --------------------------- telas pequenas --------------------------- */
/* Em telas estreitas o nome do módulo e a etiqueta do usuário disputavam o
   mesmo espaço e se sobrepunham. O módulo sai: quem está com o app aberto
   sabe em qual está. */
@media (max-width: 520px) {
  .topo { padding: .75rem 1rem; }
  .topo__modulo { display: none; }
  .topo__logo { height: 19px; }
  .etiqueta { font-size: .75rem; padding: .25rem .65rem; }
  .topo__direita { gap: .25rem; }
  .topo__navegacao .botao-texto { padding: .4rem .35rem; font-size: .78rem; }
}

@media (max-width: 380px) {
  :root { --toque: 52px; }
  .carimbo__valor { font-size: 2.1rem; }
  .segmento { font-size: 1.35rem; }
}


/* --------------------------- conferência do item --------------------------- */
/* Aparece entre a Etapa 3 e a 4, e só quando o produto tem algo a conferir:
   um popup que sempre aparece vira um botão a mais para clicar sem ler. */
.dialogo--largo { width: min(34rem, calc(100vw - 2rem)); }

.analise-cabecalho {
  display: flex; align-items: center; gap: .9rem;
  padding-bottom: .9rem; margin-bottom: .3rem;
  border-bottom: 1px solid var(--contorno);
}
.analise-qtd {
  display: block; margin-top: .25rem;
  color: var(--rotulo); font-size: .88rem;
}
.analise-qtd b { color: var(--texto); font-size: 1.05rem; }

.analise-grupo { margin-top: 1.1rem; }
.analise-grupo__titulo {
  margin: 0 0 .5rem;
  color: var(--rotulo);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}

.analise-item {
  display: flex; align-items: center; gap: .75rem;
  min-height: 48px;
  padding: .5rem .85rem;
  margin-bottom: .4rem;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  cursor: pointer;
}
.analise-item input { width: 21px; height: 21px; accent-color: var(--ciano); flex: none; }
.analise-item span { font-size: .95rem; line-height: 1.3; }
.analise-item:has(input:checked) { background: var(--superficie-2); }
.analise-item:has(input:checked) span { color: var(--rotulo); text-decoration: line-through; }

/* Alertas que não são item de conferência: leia, não marque. */
.analise-alerta {
  display: block;
  padding: .7rem .9rem;
  margin-bottom: .5rem;
  border-left: 4px solid var(--alerta);
  background: var(--alerta-fundo);
  border-radius: 6px;
  font-size: .92rem; line-height: 1.4;
}
.analise-alerta--erro { border-left-color: var(--erro); background: var(--erro-fundo); }


/* Mensagem exibida dentro de um diálogo (ver comentário em avisar(), no JS). */
.mensagem-dialogo {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  border-radius: var(--raio);
  border-left: 4px solid var(--erro);
  background: var(--erro-fundo);
  color: var(--texto);
  font-size: .9rem; line-height: 1.45;
}
.mensagem-dialogo--ok { border-left-color: var(--ok); background: var(--superficie-2); }


/* Nome de acesso sempre em maiúsculas: evita o "senha errada" de quem digitou
   o nome certo com outra caixa. A comparação no servidor também ignora caixa. */
.campo__entrada--maiuscula { text-transform: uppercase; }

.botao-texto--centro {
  display: block;
  width: 100%;
  margin-top: .9rem;
  color: var(--rotulo);
  font-size: .9rem;
}
.botao-texto--centro:hover { color: var(--ciano-medio); }


/* Veredito da conferência: muda enquanto o operador marca, para a
   consequência aparecer antes do clique e não depois dele. */
.analise-veredito {
  margin: 1.1rem 0 .2rem;
  padding: .8rem 1rem;
  border-radius: var(--raio);
  border-left: 4px solid var(--ok);
  background: var(--superficie-2);
  font-size: .92rem; line-height: 1.4;
}
.analise-veredito--descarte {
  border-left-color: var(--erro);
  background: var(--erro-fundo);
}
.analise-veredito b { color: var(--erro); }
.analise-veredito--ok b { color: var(--ok); }


/* --------------------------- volumes recebidos --------------------------- */
.foto-acoes { display: flex; gap: .6rem; flex-wrap: wrap; }
.foto-acoes .botao { flex: 1 1 10rem; }

.foto-previa {
  margin-top: .8rem;
  padding: .6rem;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
}
.foto-previa img {
  display: block; width: 100%; max-height: 15rem;
  object-fit: contain; border-radius: 8px;
  background: var(--superficie-2);
}
.foto-previa .rodape-nota { display: block; margin-top: .4rem; text-align: center; }

.vol-recentes { margin-top: 2rem; }
.vol-recentes__titulo {
  margin: 0 0 .6rem;
  color: var(--rotulo);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.vol-linha {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .9rem; margin-bottom: .4rem;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  font-size: .9rem;
}
.vol-linha__qtd {
  flex: none; min-width: 3rem;
  font-size: 1.25rem; font-weight: 800; color: var(--ciano-medio);
  font-variant-numeric: tabular-nums; text-align: right;
}
.vol-linha__canal { flex: 1; font-weight: 600; }
.vol-linha__hora { color: var(--rotulo); font-size: .82rem; }
.vol-linha__foto { color: var(--ok); font-size: .8rem; }


/* --------------------------- etapa da foto do pacote ---------------------------
   O guia ocupa a tela inteira enquanto não há foto: nesse momento o operador
   está com o pacote na mão e o celular na outra, e o que ele precisa é saber
   como enquadrar. Assim que a foto existe, o guia sai e a prévia entra no
   lugar — a informação certa no momento certo, sem as duas competindo. */
.guia {
  padding: 1rem;
  background: var(--superficie);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.guia__desenho { display: block; width: 100%; max-width: 22rem; margin: 0 auto; }
.guia__caixa    { fill: var(--superficie-2); stroke: var(--contorno-forte); stroke-width: 1.5; }
.guia__fita     { stroke: var(--contorno); stroke-width: 1.5; stroke-dasharray: 6 5; }
.guia__etiqueta { fill: #FFFFFF; stroke: var(--contorno-forte); stroke-width: 1.5; }
/* A etiqueta é sempre branca nos dois temas, então o que é desenhado sobre
   ela usa tinta fixa. Herdar var(--texto) deixava o código de barras branco
   sobre branco no tema escuro. */
.guia__barras rect { fill: #00133F; }
.guia__linha    { stroke: #B3BCD1; stroke-width: 4; stroke-linecap: round; }
/* Vermelho como no manual impresso: é a marcação que a equipe já conhece. */
.guia__marca    { fill: none; stroke: var(--erro); stroke-width: 2; }
.guia__numero   { fill: var(--erro); font-size: 13px; font-weight: 700; }
.guia__mira     { fill: none; stroke: var(--ciano); stroke-width: 2.5; stroke-linecap: round; }

.guia__legenda {
  margin: .9rem 0 1rem;
  color: var(--rotulo);
  font-size: .92rem; line-height: 1.45; text-align: center;
}
.guia__legenda b { color: var(--erro); }

.guia__regras { list-style: none; margin: 0; padding: 0; }
.guia__regra {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem 0;
  border-top: 1px solid var(--contorno);
  font-size: .95rem; line-height: 1.35;
}
.guia__regra:first-child { border-top: 0; }
.guia__marcador {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  font-size: .8rem; font-weight: 700;
}
.guia__regra--sim .guia__marcador { color: var(--ok);   background: rgba(18, 128, 92, .12); }
.guia__regra--nao .guia__marcador { color: var(--erro); background: var(--erro-fundo); }

.guia__links { margin-top: .4rem; }

/* Estado do envio, sob a prévia: o operador segue para a etapa seguinte
   enquanto a foto sobe, então precisa poder conferir se ela chegou. */
.rodape-nota       { color: var(--rotulo); font-size: .85rem; }
.rodape-nota--ok   { color: var(--ok); }
.rodape-nota--erro { color: var(--erro); }

/* Guia de etiquetas por canal — o Módulo 1 do manual dentro do app. */
.guia-canal { padding: .9rem 0; border-top: 1px solid var(--contorno); }
.guia-canal:first-child { border-top: 0; padding-top: 0; }
.guia-canal__titulo {
  margin: 0 0 .5rem;
  color: var(--ciano-medio);
  font-size: .95rem; font-weight: 700;
}
.guia-canal__lista { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; }
.guia-canal__lista dt {
  color: var(--rotulo);
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  padding-top: .1rem;
}
.guia-canal__lista dd { margin: 0; font-size: .92rem; line-height: 1.35; }
.guia-canal__dica {
  margin: .6rem 0 0;
  padding: .5rem .7rem;
  background: var(--alerta-fundo);
  border-left: 3px solid var(--alerta);
  border-radius: 6px;
  font-size: .88rem; line-height: 1.35;
}

/* Com seis etapas na trilha, o rótulo inteiro não cabe em tela estreita —
   e "Receb…" não informa nada. Encolher a fonte preserva as cinco palavras. */
@media (max-width: 26rem) {
  .trilha { gap: .25rem; padding-left: .9rem; padding-right: .9rem; }
  .trilha__passo { font-size: .58rem; letter-spacing: .04em; }
}


/* --------------------------- foto do produto --------------------------- */
.guia__produto   { fill: var(--superficie-2); stroke: var(--contorno-forte); stroke-width: 1.5; }
.guia__acessorio { fill: #FFFFFF; stroke: var(--contorno-forte); stroke-width: 1.5; }
.guia__cabo      { fill: none; stroke: var(--contorno-forte); stroke-width: 2; }
.guia__risco     { stroke: var(--erro); stroke-width: 2.5; stroke-linecap: round; }

/* Produtos com controle de lote ganham uma segunda evidência na mesma etapa.
   A separação visual deixa claro que não é para repetir a foto geral: aqui o
   enquadramento é aproximado, só para preservar lote e validade legíveis. */
.foto-lote {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--contorno);
}
.foto-lote__rotulo {
  display: block; margin-bottom: .35rem;
  color: var(--rotulo); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.foto-lote__instrucao { margin-bottom: .9rem; }
.foto-lote__guia { margin-bottom: .9rem; }

/* --------------------------- leitura por câmera ---------------------------
   O vídeo ocupa a maior parte do diálogo: mirar um código de barras com uma
   janelinha pequena é exercício de paciência, e paciência é o que falta em
   quem tem uma pilha de caixas esperando. */
.leitor-video {
  display: block; width: 100%; max-height: 60vh;
  border-radius: var(--raio);
  background: #000000;
  object-fit: cover;
}
#leitor-estado { display: block; margin-top: .6rem; text-align: center; }

/* Botão só com desenho: quadrado, do tamanho do alvo de toque. */
.botao--icone { flex: none; min-width: var(--toque); padding-left: 0; padding-right: 0; }

/* Itens do guia de abertura: lista curta, uma linha por gesto. */
.guia-abertura__itens { margin: 0; padding-left: 1.1rem; }
.guia-abertura__itens li { margin-bottom: .35rem; font-size: .92rem; line-height: 1.4; }


/* --------------------------- código Meli do dia ---------------------------
   A mesma tela serve a quem consulta e a quem publica: duas telas para o
   mesmo número dariam duas chances de ele divergir. */
.codigo-grande--vazio {
  color: var(--rotulo);
  font-size: 1.1rem; font-weight: 500; letter-spacing: normal;
  text-transform: none;
}

.meli-atual { text-align: center; margin-bottom: 1.2rem; }
.meli-atual .rodape-nota { display: block; margin-top: .4rem; }

.meli-busca {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  flex-wrap: wrap; margin: -.2rem 0 1.2rem; text-align: center;
}
.meli-busca .rodape-nota { flex-basis: 100%; margin: 0; }
.meli-manual-nota { display: block; margin-top: .5rem; text-align: center; }

.meli-historico { margin-top: 1.4rem; }
.meli-historico__titulo {
  margin: 0 0 .5rem;
  color: var(--rotulo);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.meli-linha {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .45rem .1rem;
  border-top: 1px solid var(--contorno);
  font-size: .88rem;
}
.meli-linha__data { flex: none; color: var(--rotulo); font-variant-numeric: tabular-nums; }
.meli-linha__codigo {
  flex: 1; min-width: 0;
  font-family: var(--fonte-dado); word-break: break-all;
}
.meli-linha__quem { flex: none; color: var(--rotulo); font-size: .78rem; }


/* --------------------------- lançamento de backlog ---------------------------
   A conta de backlog digita meses de planilha. O campo de data encabeça a tela
   e se distingue dos demais: é o único cujo valor não vem do pacote na mão. */
.campo--backlog .campo__entrada { border-color: var(--alerta); }
.campo__dica {
  display: block; margin-top: .3rem;
  color: var(--rotulo); font-size: .8rem; line-height: 1.35;
}


/* --------------------------- pacote com vários itens ---------------------------
   Faixa fina acima das etapas, visível a partir do segundo item. Os dados do
   recebimento ficam duas telas atrás, e sem esta referência o operador perde
   de vista qual pacote está na mão. */
.faixa-pacote {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .5rem 1.25rem;
  background: var(--alerta-fundo);
  border-bottom: 1px solid var(--contorno);
}
.faixa-pacote__contagem {
  flex: none;
  color: var(--alerta);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.faixa-pacote__dados {
  color: var(--rotulo); font-size: .85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* --------------------------- busca dentro da lista ---------------------------
   Campo estreito, dentro da própria barra da tabela. O X de limpar vem do
   navegador com type="search"; o Esc faz o mesmo, que é o gesto que todo
   mundo tenta primeiro. */
.campo__busca {
  min-height: 2.5rem;
  width: min(16rem, 42vw);
  padding: .4rem .9rem;
  font-size: .9rem;
}


/* --------------------------- senha com o olho ---------------------------
   O botão fica por cima do campo, à direita. Ao lado, dentro de uma linha
   compartilhada, ele disputava espaço com o campo e a caixa saía torta. */
.campo__senha { position: relative; display: block; }
.campo__senha .campo__entrada { width: 100%; padding-right: 3rem; }
.campo__olho {
  position: absolute; top: 50%; right: .4rem;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--rotulo);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.campo__olho:hover { background: var(--superficie-2); color: var(--texto); }
.campo__olho[aria-pressed="true"] { color: var(--ciano-medio); }

/* --------------------------- e-mail ao fiscal --------------------------- */
.email-periodo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.email-resumo {
  margin: -.25rem 0 1.1rem;
  padding: .65rem .8rem;
  background: var(--superficie-2);
  border-radius: 8px;
  color: var(--rotulo);
  font-size: .88rem;
}
.email-corpo {
  min-height: 17rem;
  resize: vertical;
  font-family: var(--fonte);
  line-height: 1.45;
}
.clickup-email-selecao {
  margin-bottom: 1rem;
  padding: .8rem;
  border: 1px solid var(--contorno);
  border-radius: 10px;
  background: var(--superficie-2);
}
.clickup-email-selecao__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}
.clickup-email-selecao__topo > div:first-child { display: grid; gap: .2rem; }
.clickup-email-selecao__acoes { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.clickup-email-notas {
  display: grid;
  gap: .45rem;
  max-height: 14rem;
  overflow-y: auto;
  padding-right: .2rem;
}
.clickup-email-nota {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  padding: .65rem .7rem;
  border: 1px solid var(--contorno);
  border-radius: 8px;
  background: var(--fundo);
  cursor: pointer;
}
.clickup-email-nota input { margin-top: .18rem; width: 1.05rem; height: 1.05rem; }
.clickup-email-nota__texto { min-width: 0; }
.clickup-email-nota__numero { font-weight: 700; color: var(--texto); }
.clickup-email-nota__detalhe { display: block; margin-top: .16rem; color: var(--rotulo); font-size: .82rem; }
.dialogo__acoes--quebra { flex-wrap: wrap; }
@media (max-width: 520px) {
  .email-periodo { grid-template-columns: 1fr; gap: 0; }
  .dialogo__acoes--quebra .botao { flex: 1 1 9rem; }
  .clickup-email-selecao__topo { display: grid; }
  .clickup-email-selecao__acoes { justify-content: stretch; }
  .clickup-email-selecao__acoes .botao { flex: 1 1 8rem; }
}


/* Prévia do card ClickUp: mostra os mesmos campos principais do formulário. */
#dlg-remessa { width: min(38rem, calc(100vw - 2rem)); }
#dlg-remessa .linha-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
#remessa-descricao { min-height: 8rem; resize: vertical; font-family: var(--fonte); line-height: 1.45; }
@media (max-width: 520px) {
  #dlg-remessa .linha-campos { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------- qualidade v74 --------------------------- */
.dialogo--qualidade {
  width: min(72rem, calc(100vw - 1.25rem));
  max-height: 94vh;
}
.dialogo--qualidade .dialogo__corpo { max-height: 68vh; overflow-y: auto; }
.qualidade-grupo-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .55rem;
}
.qualidade-grupo-topo p { margin: .1rem 0 0; color: var(--rotulo); font-size: .85rem; }
.qualidade-acessorios__grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .45rem;
}
.qualidade-acessorio { margin: 0; }
.qualidade-teste {
  margin-top: .9rem; padding: 1rem;
  border: 1px solid var(--contorno); border-radius: var(--raio);
  background: var(--superficie);
}
.qualidade-teste__topo { display: flex; gap: .75rem; align-items: flex-start; }
.qualidade-teste__numero {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--ciano-suave); color: var(--marinho); font-weight: 800;
}
.qualidade-teste__topo h4 { margin: .05rem 0 .15rem; font-size: 1rem; }
.qualidade-teste__topo small { color: var(--rotulo); line-height: 1.35; }
.qualidade-teste__passos { margin: .8rem 0 .75rem 2.75rem; padding-left: 1.1rem; }
.qualidade-teste__passos li { margin-bottom: .5rem; line-height: 1.45; }
.qualidade-teste__info {
  margin: .65rem 0; padding: .65rem .8rem;
  border: 1px solid color-mix(in srgb, var(--ciano) 45%, var(--contorno));
  border-radius: 8px; background: var(--ciano-suave); font-size: .86rem; line-height: 1.4;
}
.qualidade-teste__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: .75rem; }
.qualidade-resultado {
  min-height: 46px; border-radius: 9px; background: var(--superficie);
  border: 1.5px solid var(--contorno); font: inherit; font-weight: 700; cursor: pointer;
}
.qualidade-resultado--ok { color: var(--ok); border-color: var(--ok); }
.qualidade-resultado--erro { color: var(--erro); border-color: var(--erro); }
.qualidade-resultado--ok[aria-pressed="true"] { background: var(--ok); color: #fff; }
.qualidade-resultado--erro[aria-pressed="true"] { background: var(--erro); color: #fff; }
.analise-veredito--pendente { border-left-color: var(--alerta); background: var(--alerta-fundo); }
.analise-veredito--pendente b { color: var(--alerta); }

@media (min-width: 900px) {
  .dialogo--qualidade #analise-lista {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; align-items: start;
  }
  .dialogo--qualidade .qualidade-acessorios,
  .dialogo--qualidade .analise-alerta { grid-column: 1 / -1; }
  .dialogo--qualidade .qualidade-teste { margin-top: 0; height: 100%; display: flex; flex-direction: column; }
  .dialogo--qualidade .qualidade-teste__acoes { margin-top: auto; }
}

@media (max-width: 640px) {
  .dialogo--qualidade { width: calc(100vw - .7rem); }
  .qualidade-teste__passos { margin-left: 1.25rem; }
  .qualidade-teste__acoes { grid-template-columns: 1fr; }
}

/* --------------------------- qualidade v76 ---------------------------
   Layout aproximado ao mockup aprovado e, principalmente, sem gerar texto:
   critério e execução chegam prontos da planilha da Qualidade. */
.dialogo--qualidade {
  width: min(92rem, calc(100vw - 1.1rem));
  max-height: 96vh;
  padding: 1.05rem 1.15rem .9rem;
  border-radius: 14px;
}
.dialogo--qualidade .dialogo__corpo {
  max-height: 60vh;
  padding: .15rem .1rem .25rem;
  overflow-y: auto;
}
.qualidade-pagina__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.qualidade-pagina__topo .dialogo__titulo { margin-bottom: .15rem; font-size: 1.7rem; }
.qualidade-pagina__topo .subtitulo { margin: 0; }
.qualidade-pagina__aviso {
  flex: 0 1 22rem;
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding: .75rem .9rem;
  border: 1px solid color-mix(in srgb, var(--ciano) 35%, var(--contorno));
  border-radius: 10px;
  background: var(--ciano-suave);
  font-size: .82rem;
  line-height: 1.35;
}
.qualidade-pagina__aviso b { color: var(--marinho); }
.qualidade-pagina__aviso span { color: var(--rotulo); }

.qualidade-produto {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-bottom: .95rem;
  padding: .9rem 1rem;
  border: 1px solid var(--contorno);
  border-radius: 12px;
  background: var(--superficie);
}
.qualidade-produto__foto {
  width: 9.5rem;
  height: 7.7rem;
  object-fit: contain;
  border-radius: 9px;
  background: var(--superficie-2);
}
.qualidade-produto__dados { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.qualidade-produto__linha {
  display: grid;
  grid-template-columns: minmax(8rem, .8fr) minmax(8rem, .9fr) minmax(18rem, 3.8fr);
  gap: 0;
  align-items: stretch;
}
.qualidade-produto__linha > span {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .15rem 1rem .5rem;
  border-right: 1px solid var(--contorno);
}
.qualidade-produto__linha > span:first-child { padding-left: 0; }
.qualidade-produto__linha > span:last-child { border-right: 0; }
.qualidade-produto__linha small {
  color: var(--rotulo);
  font-size: .68rem;
  font-weight: 700;
}
.qualidade-produto__linha b { font-size: .93rem; line-height: 1.3; }
.qualidade-produto__descricao b { text-transform: uppercase; }
.qualidade-produto__linha--secundaria {
  grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 2.2fr);
  padding-top: .55rem;
  margin-top: .25rem;
  border-top: 1px solid var(--contorno);
}

.dialogo--qualidade .qualidade-acessorios {
  margin: 0 0 .85rem;
  padding: .9rem 1rem;
  border: 1px solid var(--contorno);
  border-radius: 12px;
  background: var(--superficie);
}
.dialogo--qualidade .analise-grupo__titulo {
  margin: 0 0 .12rem;
  color: var(--texto);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}
.dialogo--qualidade .qualidade-grupo-topo p { max-width: 56rem; }
.dialogo--qualidade .qualidade-acessorios__grade {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin-top: .65rem;
}
.dialogo--qualidade .qualidade-acessorio {
  min-height: 58px;
  background: var(--superficie-2);
}
.dialogo--qualidade .qualidade-acessorio:has(input:checked) span { text-decoration: none; }

.dialogo--qualidade .qualidade-teste {
  margin: 0;
  padding: .9rem 1rem .85rem;
  border-radius: 12px;
  box-shadow: none;
}
.dialogo--qualidade .qualidade-teste__topo {
  align-items: center;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--contorno);
}
.dialogo--qualidade .qualidade-teste__numero {
  width: 2.35rem;
  height: 2.35rem;
  flex-basis: 2.35rem;
  background: var(--marinho);
  color: #fff;
}
.dialogo--qualidade .qualidade-teste__topo h4 { font-size: 1.05rem; }
.dialogo--qualidade .qualidade-teste__topo small {
  display: block;
  margin-top: .12rem;
  color: var(--rotulo);
  font-size: .76rem;
  line-height: 1.3;
}
.dialogo--qualidade .qualidade-teste__passos {
  margin: .75rem 0;
  padding: 0;
}
.qualidade-passo {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0 0 .58rem;
  font-size: .86rem;
  line-height: 1.42;
}
.qualidade-passo__numero {
  flex: 0 0 1.45rem;
  width: 1.45rem;
  height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ciano-suave);
  color: var(--ciano-medio);
  font-weight: 800;
  font-size: .72rem;
}
.qualidade-passo--nota { color: var(--rotulo); }
.qualidade-passo__numero--nota { font-family: Georgia, serif; font-style: italic; }
.dialogo--qualidade .qualidade-teste__info {
  padding: .62rem .7rem;
  font-size: .78rem;
  font-weight: 600;
}
.qualidade-lote-resumo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  margin: .55rem 0 .7rem;
}
.qualidade-lote-resumo > span {
  min-width: 0;
  padding: .48rem .55rem;
  border: 1px solid var(--contorno);
  border-radius: 8px;
  background: var(--superficie-2);
}
.qualidade-lote-resumo small { display: block; color: var(--rotulo); font-size: .68rem; }
.qualidade-lote-resumo b { font-size: .82rem; }
.qualidade-lote-resumo__foto {
  grid-column: 1 / -1;
  text-align: center;
  border-style: dashed !important;
  background: var(--ciano-suave) !important;
}
.dialogo--qualidade .qualidade-teste__acoes { gap: .55rem; }
.dialogo--qualidade .qualidade-resultado { min-height: 42px; }
.dialogo--qualidade .analise-veredito {
  grid-column: 1 / -1;
  margin-top: .85rem;
}
.dialogo--qualidade .dialogo__acoes {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--contorno);
}

@media (min-width: 900px) {
  .dialogo--qualidade #analise-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
  }
}
@media (max-width: 900px) {
  .qualidade-pagina__topo { flex-direction: column; }
  .qualidade-pagina__aviso { flex-basis: auto; width: 100%; }
  .qualidade-produto { grid-template-columns: 6.5rem 1fr; }
  .qualidade-produto__foto { width: 6.5rem; height: 6.5rem; }
  .qualidade-produto__linha, .qualidade-produto__linha--secundaria { grid-template-columns: 1fr; }
  .qualidade-produto__linha > span { padding: .25rem 0; border-right: 0; }
  .dialogo--qualidade .qualidade-acessorios__grade { grid-template-columns: 1fr; }
}

/* --------------------------- qualidade v77 ---------------------------
   No celular a conferência passa a ser um fluxo por etapas. O diálogo inteiro
   rola (cabeçalho, produto, verificação e botões), evitando blocos presos na
   tela e deixando uma única tarefa por vez. */
.qualidade-progresso {
  margin: 0 0 .8rem;
  padding: .65rem .8rem;
  border: 1px solid var(--contorno);
  border-radius: 10px;
  background: var(--superficie-2);
}
.qualidade-progresso__texto {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: baseline;
  margin-bottom: .45rem;
}
.qualidade-progresso__texto b {
  color: var(--marinho);
  font-size: .78rem;
  white-space: nowrap;
}
.qualidade-progresso__texto span {
  min-width: 0;
  color: var(--rotulo);
  font-size: .78rem;
  text-align: right;
}
.qualidade-progresso__trilho {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--contorno);
}
.qualidade-progresso__trilho i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--ciano);
  transition: width .2s ease;
}

.dialogo--qualidade #analise-lista {
  display: block;
}
.dialogo--qualidade .qualidade-etapa {
  width: 100%;
}
.dialogo--qualidade .qualidade-etapa[hidden] {
  display: none !important;
}
.qualidade-alertas {
  margin-bottom: .7rem;
}
.qualidade-etapa__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .7rem;
}
.qualidade-etapa__tipo {
  display: block;
  margin-bottom: .2rem;
  color: var(--ciano-medio);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.qualidade-etapa__ajuda {
  margin: .7rem 0 0;
  color: var(--rotulo);
  font-size: .78rem;
  line-height: 1.45;
}
.dialogo--qualidade .qualidade-teste__topo {
  padding-bottom: .55rem;
}
.dialogo--qualidade .qualidade-teste__topo h4 {
  margin: 0;
  font-size: 1.12rem;
}
.qualidade-criterio {
  margin: .75rem 0;
  padding: .72rem .78rem;
  border-left: 4px solid var(--ciano);
  border-radius: 8px;
  background: var(--ciano-suave);
}
.qualidade-criterio small {
  display: block;
  margin-bottom: .28rem;
  color: var(--marinho);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.qualidade-criterio p {
  margin: 0;
  color: var(--texto);
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.45;
}
.qualidade-como-fazer > b {
  display: block;
  margin: .15rem 0 .55rem;
  color: var(--texto);
  font-size: .82rem;
}
.dialogo--qualidade .qualidade-teste__passos {
  margin: 0 0 .75rem;
}
.dialogo--qualidade .analise-veredito[hidden] {
  display: none !important;
}

@media (min-width: 900px) {
  .dialogo--qualidade #analise-lista {
    display: block;
  }
  .dialogo--qualidade .qualidade-teste,
  .dialogo--qualidade .qualidade-acessorios {
    max-width: 58rem;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 700px) {
  .dialogo--qualidade {
    width: calc(100vw - .3rem);
    max-height: calc(100dvh - .3rem);
    padding: .8rem .7rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 10px;
  }
  .dialogo--qualidade[open] {
    display: block;
  }
  .dialogo--qualidade .dialogo__corpo {
    max-height: none;
    margin-bottom: .75rem;
    padding: 0;
    overflow: visible;
  }
  .qualidade-pagina__topo {
    display: block;
    margin-bottom: .65rem;
  }
  .qualidade-pagina__topo .dialogo__titulo {
    font-size: 1.35rem;
  }
  .qualidade-pagina__topo .subtitulo {
    font-size: .9rem;
    line-height: 1.45;
  }
  .qualidade-pagina__aviso {
    margin-top: .65rem;
    padding: .6rem .7rem;
    font-size: .77rem;
  }
  .qualidade-produto {
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: .7rem;
    margin-bottom: .65rem;
    padding: .65rem;
  }
  .qualidade-produto__foto {
    width: 5.25rem;
    height: 5.25rem;
  }
  .qualidade-produto__linha,
  .qualidade-produto__linha--secundaria {
    grid-template-columns: 1fr;
  }
  .qualidade-produto__linha > span {
    padding: .15rem 0 .28rem;
  }
  .qualidade-produto__linha small {
    font-size: .62rem;
  }
  .qualidade-produto__linha b {
    font-size: .86rem;
  }
  .qualidade-produto__linha--secundaria {
    padding-top: .35rem;
  }
  .qualidade-progresso {
    margin-bottom: .65rem;
    padding: .55rem .65rem;
  }
  .qualidade-progresso__texto {
    align-items: flex-start;
    flex-direction: column;
    gap: .12rem;
  }
  .qualidade-progresso__texto span {
    text-align: left;
  }
  .dialogo--qualidade .qualidade-acessorios,
  .dialogo--qualidade .qualidade-teste {
    padding: .8rem .75rem;
  }
  .qualidade-etapa__cabecalho {
    flex-direction: column;
  }
  .qualidade-etapa__cabecalho .botao-linha {
    width: 100%;
    min-height: 42px;
  }
  .dialogo--qualidade .qualidade-teste__acoes {
    grid-template-columns: 1fr 1fr;
  }
  .dialogo--qualidade .qualidade-resultado {
    min-height: 48px;
  }
  .qualidade-criterio p,
  .qualidade-passo {
    font-size: .9rem;
  }
  .dialogo--qualidade .dialogo__acoes {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr);
    gap: .55rem;
    margin-top: .45rem;
    padding-top: .65rem;
    position: static;
    background: transparent;
  }
  .dialogo--qualidade .dialogo__acoes .botao {
    width: 100%;
    min-width: 0;
    min-height: 46px;
  }
}

/* --------------------------- qualidade v79: fotos no fluxo --------------------------- */
.dialogo--qualidade .qualidade-etapa--foto {
  max-width: 58rem;
  margin: 0 auto;
  padding: .9rem 1rem;
  border: 1px solid var(--contorno);
  border-radius: 12px;
  background: var(--superficie);
}
.qualidade-foto {
  margin-top: .8rem;
  padding: .8rem;
  border: 1px dashed var(--contorno-forte);
  border-radius: 10px;
  background: var(--superficie-2);
}
.qualidade-foto__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .7rem;
  margin-bottom: .65rem;
}
.qualidade-foto__cabecalho b {
  display: block;
  margin-bottom: .18rem;
  color: var(--texto);
  font-size: .9rem;
}
.qualidade-foto__cabecalho p {
  margin: 0;
  color: var(--rotulo);
  font-size: .78rem;
  line-height: 1.45;
}
.qualidade-foto__obrigatoria {
  flex: none;
  padding: .22rem .42rem;
  border-radius: 99px;
  background: var(--ciano-suave);
  color: var(--ciano-medio);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}
.qualidade-foto__guia .botao { width: 100%; }
.qualidade-foto__previa {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
}
.qualidade-foto__previa[hidden] { display: none !important; }
.qualidade-foto__previa img {
  width: 8rem;
  height: 6rem;
  object-fit: cover;
  border: 1px solid var(--contorno);
  border-radius: 8px;
  background: var(--superficie);
}
.qualidade-foto__previa-acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
}
.qualidade-foto__status {
  color: var(--rotulo);
  font-size: .74rem;
}
.qualidade-foto__status--ok { color: var(--ok); font-weight: 700; }
.qualidade-foto__status--erro { color: var(--erro); font-weight: 700; }
.qualidade-ocorrencia {
  margin-top: .8rem;
  padding: .8rem;
  border-left: 4px solid var(--erro);
  border-radius: 10px;
  background: var(--erro-fundo);
}
.qualidade-ocorrencia[hidden] { display: none !important; }
.qualidade-ocorrencia__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.qualidade-ocorrencia__titulo b { color: var(--erro); }
.qualidade-ocorrencia__titulo span {
  color: var(--erro);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.qualidade-ocorrencia > p {
  margin: .35rem 0 0;
  color: var(--texto);
  font-size: .8rem;
  line-height: 1.45;
}
.qualidade-ocorrencia .qualidade-foto {
  background: var(--superficie);
  border-color: var(--erro);
}
.qualidade-ocorrencia__campo { margin-top: .7rem; }
.qualidade-ocorrencia__campo textarea {
  min-height: 5rem;
  resize: vertical;
  text-transform: none;
}

@media (max-width: 700px) {
  .dialogo--qualidade .qualidade-etapa--foto { padding: .8rem .75rem; }
  .qualidade-foto { padding: .7rem; }
  .qualidade-foto__cabecalho { flex-direction: column; }
  .qualidade-foto__previa {
    grid-template-columns: 1fr;
  }
  .qualidade-foto__previa img {
    width: 100%;
    height: min(52vw, 13rem);
  }
  .qualidade-foto__previa-acoes .botao { width: 100%; }
  .qualidade-ocorrencia__titulo {
    align-items: flex-start;
    flex-direction: column;
    gap: .15rem;
  }
}

/* --------------------------- qualidade v80: avaliação integrada --------------------------- */
.qualidade-avaliacao {
  margin-top: .85rem;
  padding: .85rem;
  border: 1px solid var(--contorno);
  border-radius: 10px;
  background: var(--superficie);
}
.qualidade-avaliacao__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .6rem;
}
.qualidade-avaliacao__topo b { font-size: .95rem; }
.qualidade-avaliacao__topo span {
  color: var(--rotulo);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.qualidade-avaliacao__opcoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
.qualidade-avaliacao__opcao {
  min-height: 44px;
  padding: .55rem .65rem;
  border: 1px solid var(--contorno-forte);
  border-radius: 9px;
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.qualidade-avaliacao__opcao[aria-pressed="true"] {
  border-color: var(--ciano-medio);
  background: var(--ciano-suave);
  color: var(--marinho);
  box-shadow: inset 0 0 0 1px var(--ciano-medio);
}
.qualidade-avaliacao__opcao--ruim[aria-pressed="true"] {
  border-color: var(--erro);
  background: var(--erro-fundo);
  color: var(--erro);
  box-shadow: inset 0 0 0 1px var(--erro);
}
.qualidade-avaliacao__ajuda {
  margin: .55rem 0 0;
  color: var(--rotulo);
  font-size: .72rem;
  line-height: 1.45;
}
.qualidade-resumo__avaliacoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin-top: .8rem;
}
.qualidade-resumo__avaliacoes > div {
  padding: .7rem .75rem;
  border: 1px solid var(--contorno);
  border-radius: 9px;
  background: var(--superficie-2);
}
.qualidade-resumo__avaliacoes small {
  display: block;
  margin-bottom: .2rem;
  color: var(--rotulo);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.qualidade-resumo__avaliacoes b { font-size: .9rem; }
.qualidade-resumo__carimbo { margin-top: .9rem; }
.qualidade-resumo__opcoes { margin-top: .65rem; }
.qualidade-resumo__nota {
  margin: .45rem 0 0;
  color: var(--rotulo);
  font-size: .75rem;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .qualidade-avaliacao { padding: .75rem; }
  .qualidade-avaliacao__topo { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .qualidade-avaliacao__opcao { width: 100%; padding-left: .35rem; padding-right: .35rem; }
  .qualidade-resumo__avaliacoes { grid-template-columns: 1fr; }
}

/* --------------------------- qualidade v81: fluxo enxuto --------------------------- */
.qualidade-lote-edicao {
  margin: .75rem 0;
  padding: .8rem;
  border: 1px solid var(--contorno);
  border-radius: 10px;
  background: var(--superficie-2);
}
.qualidade-lote-edicao__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}
.qualidade-lote-edicao__topo b { font-size: .9rem; }
.qualidade-lote-edicao__topo span {
  color: var(--rotulo);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.qualidade-lote-edicao__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.qualidade-lote-edicao__campos .campo { margin: 0; }
.qualidade-lote-edicao > p {
  margin: .55rem 0 0;
  color: var(--rotulo);
  font-size: .74rem;
  line-height: 1.4;
}

#dlg-gravado .dialogo__acoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: stretch;
  gap: .6rem;
}
#dlg-gravado .dialogo__acoes .botao {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: 100%;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
}

@media (max-width: 700px) {
  .qualidade-lote-edicao__topo {
    align-items: flex-start;
    flex-direction: column;
    gap: .15rem;
  }
  .qualidade-lote-edicao__campos { grid-template-columns: 1fr 1fr; }
  #dlg-gravado .dialogo__acoes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  }
  #dlg-gravado .dialogo__acoes .botao {
    min-height: 46px;
    padding-left: .55rem;
    padding-right: .55rem;
    font-size: .8rem;
  }
}

/* v82 — necessidade de caixa de reposição, marcada no fim do registro. */
.falta-caixa-opcao {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: .15rem 0 1.15rem; padding: .9rem 1rem;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie-2); cursor: pointer;
}
.falta-caixa-opcao span { display: flex; flex-direction: column; gap: .2rem; }
.falta-caixa-opcao b { color: var(--texto); font-size: .95rem; }
.falta-caixa-opcao small { color: var(--rotulo); line-height: 1.35; }
.falta-caixa-opcao input { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; accent-color: var(--ciano-medio); }

/* --------------------------- imagens adicionais v127 --------------------------- */
.fotos-adicionais {
  margin-top: .85rem;
  padding: .8rem;
  border: 1px dashed var(--linha, #c7d2e5);
  border-radius: .8rem;
  background: rgba(255,255,255,.45);
}
.fotos-adicionais__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.fotos-adicionais__cabecalho > div { display: grid; gap: .15rem; }
.fotos-adicionais__cabecalho small { color: var(--texto-suave, #5f7499); }
.fotos-adicionais__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: .55rem;
  margin-top: .65rem;
}
.fotos-adicionais--vazio .fotos-adicionais__lista { display: none; }
.foto-adicional__item {
  position: relative;
  min-height: 88px;
  border: 1px solid var(--linha, #d3dceb);
  border-radius: .7rem;
  overflow: hidden;
  background: #fff;
}
.foto-adicional__item img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  display: block;
}
.foto-adicional__item small {
  display: block;
  padding: .3rem .4rem;
  text-align: center;
  color: var(--texto-suave, #5f7499);
}
.foto-adicional__remover {
  position: absolute;
  top: .25rem;
  right: .25rem;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 999px;
  background: rgba(9, 31, 67, .82);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.fotos-extras-painel {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  max-width: 18rem;
  overflow-x: auto;
  vertical-align: middle;
}
.fotos-extras-painel small { white-space: nowrap; color: var(--texto-suave, #5f7499); }
.miniatura--extra { outline: 2px solid rgba(15, 191, 211, .18); }