/* JHOW JHOW — desenhado para o celular da bancada: alvo de toque grande, contraste alto e o
   codigo de barras como a maior coisa da tela, porque e ele que a pessoa vai anotar.

   O acento e OURO CHAMPANHE, nao azul: e o material da propria peca, e sobre fundo quase
   preto ele carrega a tela sem precisar de mais nenhuma cor. Verde-agua fica reservado
   para uma coisa so — "achei" — e por isso ele significa algo quando aparece. */

:root {
  /* Fundo com vies azul, nao cinza neutro: cinza puro ao lado de ouro fica sujo. */
  --bg:        #0a0c12;
  --bg2:       #12161f;
  --bg3:       #1a1f2b;
  --bg4:       #232935;
  --borda:     #1e2431;
  --borda2:    #2e3648;

  --texto:     #eef1f7;
  --texto2:    #9ba5ba;
  --texto3:    #6b7590;

  --ouro:      #e3b96b;
  --ouro-alto: #f3d49b;
  --ouro-veu:  rgba(227, 185, 107, .10);
  --ouro-halo: rgba(227, 185, 107, .28);

  --ok:        #45d3b4;
  --ok-veu:    rgba(69, 211, 180, .11);
  --talvez:    #f0c04a;
  --nao:       #f0797c;

  /* `--accent` continua existindo porque metade do CSS o usa. Uma linha aqui vale mais
     que quarenta trocas espalhadas. */
  --accent:    var(--ouro);

  /* O ouro do PAINEL de dados, e ele e mais escuro que o --ouro de proposito: o
     validador do guia de visualizacao poe o #e3b96b em luminosidade 0,81, fora da banda
     de 0,48-0,67 do modo escuro — como bloco grande (uma barra) ele fica gritado. O
     #a8813a cai em 0,65, dentro da banda, e passa o contraste de 3:1 contra o fundo.
     O ouro claro fica na barra do destaque, que e marca pequena. */
  --barra:     #a8813a;

  --raio:      14px;
  --raio-p:    10px;
  --topo-h:    calc(env(safe-area-inset-top, 0px));

  --fonte: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* O `display: none` que o navegador da a [hidden] e regra de user-agent: qualquer
   `display` numa classe vence. Sem esta linha, `.ficha { display: flex }` deixava o
   overlay de tela cheia INVISIVEL mas ativo, interceptando todo toque da tela — o app
   inteiro ficava sem responder. Vale para tudo que a tela liga e desliga por [hidden]. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font: 400 15px/1.55 var(--fonte);
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; }

button { font-family: inherit; }

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

/* ─── topo ─────────────────────────────────────────────────────────────────── */

.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: calc(14px + var(--topo-h)) 16px 14px;
  /* O veu de ouro no alto da tela e o unico gradiente do app: ele marca a marca. */
  background:
    radial-gradient(120% 140% at 0% 0%, var(--ouro-veu), transparent 58%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  border-bottom: 1px solid var(--borda);
}

.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* min-width: 0 deixa o nome encurtar em vez de empurrar as pilulas fora da tela. */
.marca-texto { min-width: 0; }

/* A marca é o próprio robozinho — o mesmo que fica no canto da tela e fala. Antes era um
   olho, e o olho não tinha nada a ver com quem responde as perguntas. */
.marca-robo {
  width: 32px; height: 32px; flex-shrink: 0;
  fill: none; stroke: var(--ouro); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Olhos e a luz da antena são cheios: no traço eles viravam anéis e sumiam a 32 px. */
.marca-robo .cheio { fill: var(--ouro); stroke: none; }

.marca h1 {
  font-size: 20px; font-weight: 800; letter-spacing: .2em;
  line-height: 1.05; color: var(--texto);
}

.marca p {
  margin: 3px 0 0; font-size: 11px; line-height: 1.3;
  color: var(--texto3); letter-spacing: .01em;
}

/* Pilulas de estado: o que a bancada checa antes de fotografar. */
.estado { display: flex; gap: 6px; flex-wrap: wrap; }

.pilula {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--borda2); background: var(--bg3); color: var(--texto2);
  white-space: nowrap;
}
.pilula::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.pilula.ok      { color: var(--ok);     border-color: rgba(69, 211, 180, .32); }
.pilula.atencao { color: var(--talvez); border-color: rgba(240, 192, 74, .32); }
.pilula.ruim    { color: var(--nao);    border-color: rgba(240, 121, 124, .32); }

/* ─── menu ─────────────────────────────────────────────────────────────────────

   A navegação do app inteiro, e agora a única: antes esta barra convivia com quatro
   caixas no Início que iam para os mesmos lugares.

   Chip com ícone, e não aba com sublinhado: o ícone é o que a bancada reconhece de longe,
   com o celular apoiado e a peça na outra mão, e a pastilha inteira é o alvo de toque —
   uma aba sublinhada só acerta na palavra. */

.menu {
  /* Quebra de linha em vez de rolagem: com o item de Acessos (que so o admin ve) sao
     cinco itens, e cinco nomes nao cabem numa linha de 412 px — o menu passava 8 px da
     tela e nascia uma barra de rolagem horizontal na pagina toda. Duas linhas de chip
     ficam bem, e a altura extra o palco desconta sozinho (ele mede o menu). */
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  padding: 9px 12px; background: var(--bg);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 20;
}

.menu-item {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  /* No computador cada item tem a largura do proprio nome: esticado em 1/4 da tela, o
     menu virava quatro faixas enormes com uma palavra no meio. No celular ele estica
     (ver a media query abaixo), porque la o que falta e alvo de toque. */
  flex: 0 1 auto; padding: 10px 18px;
  background: none; border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; letter-spacing: .01em; color: var(--texto3);
  transition: color .16s, background .16s, border-color .16s;
}
.menu-item svg {
  width: 17px; height: 17px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.menu-item:hover { color: var(--texto); background: var(--bg2); }

/* A tela onde a pessoa está: pastilha de ouro cheia. O sublinhado de antes se perdia no
   alto de um celular; a pastilha se acha de relance. */
.menu-item.ativa {
  color: var(--ouro); background: var(--ouro-veu); border-color: var(--ouro-halo);
}

@media (max-width: 620px) {
  .menu { gap: 4px; padding: 8px 8px; }
  .menu-item { flex: 1 1 auto; padding: 9px 10px; gap: 6px; font-size: 12.5px; }
  .menu-item svg { width: 16px; height: 16px; }
}
/* Abaixo de 340 px os quatro nomes não caberiam: fica só o ícone, que é o que a bancada
   usa de qualquer jeito. O nome continua no leitor de tela pelo aria-label do botão. */
@media (max-width: 339px) {
  .menu-item span { display: none; }
}

main { padding: 20px 14px 0; max-width: 860px; margin: 0 auto; }

.painel { display: none; }
.painel.ativo { display: block; animation: entra .2s ease-out; }

@keyframes entra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .painel.ativo { animation: none; }
}

/* ─── início: o palco do JHOW JHOW ────────────────────────────────────────────

   Uma tela, uma peça: o robô no meio, o nome, uma linha do que ele faz, dois botões e um
   exemplo de pergunta. Sem rolagem NUNCA — nem no celular, nem com o aviso de varredura
   ocupando cem pixels no alto.

   COMO ISSO É GARANTIDO. A primeira versão descontava a altura do cabeçalho e do menu na
   mão (`min-height: calc(100dvh - 190px)`), e foi um erro: no dia em que o aviso
   "Varrendo o catálogo…" apareceu em cima, os 190 px viraram 290 e a barra de rolagem
   voltou. Agora ninguém desconta nada — o body é uma coluna flex de `100dvh`, o main
   ocupa o que sobra, e o palco ocupa o que sobra DO MAIN. Cabeçalho de duas linhas,
   aviso, menu maior: o que aparecer é descontado por conta do navegador.

   COMO ISSO É GARANTIDO, PARTE 2. A altura do palco (`--ph`) é MEDIDA pelo app.js: ele
   pega onde o palco começa na tela e desconta isso da altura da janela. Medir em vez de
   descontar na mão é o que faz o aviso de varredura, um cabeçalho de duas linhas ou uma
   janela redimensionada entrarem na conta sozinhos.

   Uma tentativa anterior deixava o flex distribuir (`body` em coluna, `main` com
   `flex: 1`): ficava 2 px maior que a janela e a barra de rolagem aparecia por causa
   desses 2 px de arredondamento do flex. Medido em pixel inteiro, fecha exato.

   E POR QUE O CONTEÚDO CABE. Como `--ph` é a altura do espaço livre (e não do conteúdo),
   cada medida daqui para baixo é uma FRAÇÃO dela: o robô é um terço do palco, o nome 6%,
   e assim por diante — some tudo e dá menos que 100%. Numa tela apertada, quem sobra sai
   (ver `.aperta` no fim desta seção).

   O `--ph` de partida é em vh para a tela nascer certa antes do primeiro cálculo do JS. */

body { min-height: 100dvh; }

.palco {
  --ph: 60vh;
  position: relative; width: 100%; height: var(--ph);
  display: grid; justify-items: center; text-align: center; align-content: center;
  padding: clamp(8px, calc(var(--ph) * .04), 44px) 12px;
  overflow: hidden;
}

/* O véu de ouro atrás do robô. Vive no ::before: decoração que ninguém lê não precisa de
   elemento no HTML. O `overflow: hidden` do palco corta a sobra — sem ele, o retângulo de
   560 px passava da largura do celular e criava rolagem horizontal na tela toda. */
.palco::before {
  content: ""; position: absolute; pointer-events: none;
  left: 50%; top: 0; transform: translateX(-50%);
  width: 560px; max-width: 140%; aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 32%, rgba(227, 185, 107, .16), transparent 58%),
    radial-gradient(circle at 50% 30%, rgba(69, 211, 180, .05), transparent 40%);
}
/* Sem isto o ::before, que é posicionado, pintaria EM CIMA do robô e do texto. */
.palco > * { position: relative; }

.palco-robo {
  display: grid; place-items: center;
  /* Quadrado, e do tamanho que o palco permite. O disco, os anéis e o robô lá dentro são
     todos relativos a ele, então um valor só redimensiona o conjunto. */
  width: min(190px, calc(var(--ph) * .34)); height: min(190px, calc(var(--ph) * .34));
  margin: 0; padding: 0;
  background: none; border: 0; cursor: pointer;
  transition: transform .18s;
}
.palco-robo:hover { transform: scale(1.03); }
.palco-robo:active { transform: scale(.98); }

/* O disco onde ele fica em pé, para não flutuar solto no fundo preto. */
.palco-robo::before {
  content: ""; position: absolute; inset: 12%; border-radius: 50%;
  background: linear-gradient(180deg, var(--bg3), var(--bg2));
  border: 1px solid rgba(227, 185, 107, .16);
  box-shadow: inset 0 1px 0 rgba(243, 212, 155, .10);
}

.palco-anel {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(227, 185, 107, .18);
  animation: anelPulsa 3.8s ease-in-out infinite;
}
.palco-anel.dois {
  inset: 6%; border-color: rgba(227, 185, 107, .10);
  animation-delay: -1.9s;
}
.palco-robo:hover .palco-anel { border-color: var(--ouro-halo); }

@keyframes anelPulsa {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.05); opacity: .45; }
}

.palco-robo .robo {
  position: relative; width: 65%; height: 65%;
  animation: flutua 3.6s ease-in-out infinite;
}

/* "toque para falar comigo" dentro do próprio botão, colado embaixo do robô: sem essa
   linha, um robô grande no meio da tela é enfeite — ninguém descobre que ele é clicável. */
.palco-toque {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  font: 500 10.5px/1 var(--mono); letter-spacing: .04em;
  color: var(--texto3); white-space: nowrap;
  transition: color .16s;
}
.palco-robo:hover .palco-toque { color: var(--ouro); }

/* O robô do palco pisca, acende a antena e move a boca de graça: é a mesma classe `.robo`
   do robô do canto, e o `.falando` que o JS liga quando a voz fala vale para os dois. */
@media (prefers-reduced-motion: reduce) {
  .palco-robo .robo, .palco-anel { animation: none; }
}

.palco-titulo {
  margin-top: clamp(4px, calc(var(--ph) * .02), 14px);
  font-size: clamp(19px, calc(var(--ph) * .058), 30px);
  font-weight: 800; line-height: 1.1;
  /* O mesmo espaçamento largo da marca do cabeçalho. O text-indent devolve o espaço que a
     última letra ganha à direita — sem ele o nome fica visivelmente fora do centro. */
  letter-spacing: .22em; text-indent: .22em;
  background: linear-gradient(180deg, var(--ouro-alto), var(--ouro));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.palco-linha {
  margin: clamp(5px, calc(var(--ph) * .022), 12px) 0 0; max-width: 46ch;
  font-size: clamp(12.5px, calc(var(--ph) * .029), 14.5px);
  line-height: 1.5; color: var(--texto2);
}
.palco-linha b { color: var(--texto); font-weight: 700; }

.palco-acoes {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  width: 100%; max-width: 440px;
  margin-top: clamp(10px, calc(var(--ph) * .036), 22px);
}
.palco-acoes .botao { padding: clamp(11px, calc(var(--ph) * .028), 15px) 14px; }

/* ─── os exemplos ──────────────────────────────────────────────────────────────

   "Pode perguntar o que quiser" não ensina nada: ninguém adivinha que ele acha a cliente
   pelo código, nem de quem é um código de barras. Três perguntas de verdade ensinam o
   alcance dele em três linhas — e tocar numa já manda a pergunta. */

.exemplos {
  margin-top: clamp(10px, calc(var(--ph) * .05), 30px);
  display: grid; justify-items: center; gap: 9px;
}

.exemplos-titulo {
  font: 500 10.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto3);
}

.exemplos-linha { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.exemplo {
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--borda2);
  font-size: 13px; font-weight: 600; color: var(--texto2);
  transition: color .16s, border-color .16s, background .16s;
}
.exemplo:hover {
  color: var(--texto); border-color: var(--ouro-halo); background: var(--bg3);
}
.exemplo::before { content: "“"; }
.exemplo::after  { content: "”"; }

@media (max-width: 620px) {
  .palco { padding-left: 6px; padding-right: 6px; }
  .palco-robo {
    width: min(158px, calc(var(--ph) * .34)); height: min(158px, calc(var(--ph) * .34));
  }
  .palco-titulo { font-size: clamp(19px, calc(var(--ph) * .055), 24px); }
  .palco-acoes { max-width: 100%; }
  /* Lado a lado com fonte menor: os dois rótulos cabem em uma linha cada, e empilhados
     eles custavam 60 px de altura que a tela sem rolagem não tem para dar. */
  .palco-acoes .botao { font-size: 13.5px; padding-left: 8px; padding-right: 8px; min-width: 0; }
  .exemplo { font-size: 12.5px; padding: 8px 12px; }
}

/* ─── palco apertado ───────────────────────────────────────────────────────────

   Quando o espaço livre encolhe — celular pequeno, celular deitado, ou o aviso de
   varredura ocupando o alto da tela — encolher fonte não basta: alguma coisa tem de sair.
   Sai na ordem do que menos custa, e é o app.js que liga estas classes, porque só ele sabe
   quantos pixels o palco realmente recebeu (uma media query só sabe o tamanho da JANELA,
   e a janela não muda quando um aviso aparece dentro dela).

   `.aperta`      — sai o rótulo dos exemplos, sobra um exemplo só.
   `.aperta-muito` — saem os exemplos e a linha de apresentação. Ficam o robô, o nome e os
                     dois botões: o mínimo que ainda é o JHOW JHOW e ainda é clicável. */

.palco.aperta .exemplos-titulo,
.palco.aperta .exemplo:nth-child(n+2) { display: none; }

.palco.aperta-muito .exemplos,
.palco.aperta-muito .palco-toque,
.palco.aperta-muito .palco-linha { display: none; }

/* O bloco de tela BAIXA (celular deitado) mora no FIM deste arquivo: nessa faixa ele
   precisa vencer o `@media (min-width: 640px)`, e entre duas media queries que casam ao
   mesmo tempo quem decide é a ordem no arquivo, não a especificidade. */

.explica { margin: 0 0 18px; font-size: 13px; color: var(--texto3); line-height: 1.6; max-width: 68ch; }
.explica code {
  background: var(--bg3); padding: 1.5px 5px; border-radius: 4px;
  font: 500 11.5px var(--mono); color: var(--texto2);
}

.info { font-size: 13px; color: var(--texto3); line-height: 1.55; }
.info b { color: var(--texto2); }

/* ─── avisos ───────────────────────────────────────────────────────────────── */

.aviso {
  padding: 14px 16px; margin-bottom: 16px; border-radius: var(--raio-p);
  background: var(--bg2); border: 1px solid var(--borda2); border-left: 3px solid var(--talvez);
  font-size: 13.5px; line-height: 1.6; color: var(--texto2);
}
.aviso b { color: var(--texto); }
.aviso code { font: 500 12px var(--mono); background: var(--bg3); padding: 1.5px 5px; border-radius: 4px; }
.aviso.ruim { border-left-color: var(--nao); }
.aviso .botao { margin-top: 12px; }

/* ─── pistas: o que a pessoa ja sabe ───────────────────────────────────────── */

.pistas {
  margin: 0 0 18px; padding: 16px; display: grid; gap: 13px;
  background: var(--bg2); border: 1px solid var(--borda); border-radius: var(--raio);
}

.pistas-titulo { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pistas-titulo span {
  font-size: 11.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--texto2);
}
.pistas-titulo em { font-size: 11.5px; font-style: normal; color: var(--texto3); }

/* Os tres selects lado a lado no computador; empilhados no celular, onde 33% de largura
   nao caberia o nome de uma pedra. */
.pistas-linha { display: grid; gap: 9px; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) { .pistas-linha { grid-template-columns: 1fr; } }

.pista label {
  display: block; margin: 0 2px 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto3);
}
.pista label .so-se {
  font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8;
}

.pista input, .pista select {
  width: 100%; padding: 13px 14px; border-radius: var(--raio-p);
  background: var(--bg3); color: var(--texto); border: 1px solid var(--borda2);
  font-size: 16px;   /* 16px evita o zoom automatico do iOS ao focar o campo */
  font-family: inherit;
}
.pista input { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.pista input::placeholder { color: var(--texto3); letter-spacing: 0; }
.pista input:focus, .pista select:focus {
  outline: none; border-color: var(--ouro); background: var(--bg4);
}

/* O campo da cliente e o que mais muda o acerto: ele ganha a borda de ouro em repouso. */
.pista.destaque input { border-color: var(--ouro-halo); }

/* Campo preenchido fica visivelmente diferente de "pela foto": e uma decisao que a pessoa
   tomou, e ela precisa ver que tomou. */
.pista select.marcado, .pista input:not(:placeholder-shown) {
  border-color: var(--ouro); color: var(--texto);
}

.cliente-info { margin: 2px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--texto3); }
.cliente-info.ok   { color: var(--ok); }
.cliente-info.ruim { color: var(--talvez); }
.cliente-info b { color: var(--texto); }

/* Quantos desenhos a IA vai olhar de verdade — a informacao que decide se vale fotografar. */
.previa {
  margin: 0; padding: 10px 13px; border-radius: var(--raio-p);
  background: var(--bg3); border: 1px solid var(--borda2);
  font-size: 12.5px; line-height: 1.5; color: var(--texto2);
}
.previa.ok   { color: var(--ok); border-color: rgba(69, 211, 180, .3); background: var(--ok-veu); }
.previa.ruim { color: var(--talvez); border-color: rgba(240, 192, 74, .3); }

/* ─── captura ──────────────────────────────────────────────────────────────── */

.captura { display: grid; gap: 10px; }

.alvo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 46px 20px;
  border: 1.5px dashed var(--borda2); border-radius: var(--raio);
  background:
    radial-gradient(90% 120% at 50% 0%, var(--ouro-veu), transparent 62%),
    var(--bg2);
  cursor: pointer; text-align: center;
  transition: border-color .16s, background .16s;
}
.alvo:hover  { border-color: var(--ouro-halo); }
.alvo:active { border-color: var(--ouro); background: var(--bg3); }
.alvo strong { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.alvo span   { font-size: 12.5px; color: var(--texto3); }

.alvo-icone {
  width: 52px; height: 52px; margin-bottom: 2px;
  fill: none; stroke: var(--ouro); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.dica { margin: 4px 2px 0; font-size: 12px; color: var(--texto3); line-height: 1.6; }

/* ─── revisao da foto ──────────────────────────────────────────────────────── */

.revisao { display: grid; gap: 12px; }

.foto-envio {
  position: relative; border-radius: var(--raio); overflow: hidden;
  background: var(--bg3); border: 1px solid var(--borda);
}
.foto-envio img { width: 100%; display: block; max-height: 52vh; object-fit: contain; }

/* Uma foto ocupa a largura toda; de duas em diante viram tira de dois em dois, e cada
   uma encurta — a tira inteira precisa caber na tela do celular sem rolagem. */
.fotos-envio { display: grid; gap: 8px; }
.fotos-envio.varias { grid-template-columns: 1fr 1fr; }
.fotos-envio.varias .foto-envio img { max-height: 24vh; }
.fotos-envio.varias .descartar { width: 30px; height: 30px; top: 7px; right: 7px; font-size: 13px; }

.foto-numero {
  position: absolute; bottom: 7px; left: 9px;
  min-width: 21px; padding: 2px 7px; border-radius: 999px; text-align: center;
  background: rgba(10, 12, 18, .86); border: 1px solid var(--borda2);
  font: 700 11px var(--mono); color: var(--ouro);
}
.fotos-envio:not(.varias) .foto-numero { display: none; }

.descartar {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: grid; place-content: center;
  background: rgba(10, 12, 18, .84); color: var(--texto); border: 1px solid var(--borda2);
  font-size: 15px; line-height: 1;
}
.descartar:hover { border-color: var(--nao); color: var(--nao); }

/* ─── botoes ───────────────────────────────────────────────────────────────── */

.acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.botao {
  flex: 1; min-width: 120px; padding: 15px 14px; border-radius: var(--raio-p);
  cursor: pointer; font-size: 15px; font-weight: 700; letter-spacing: .01em;
  background: var(--bg3); color: var(--texto); border: 1px solid var(--borda2);
  transition: background .16s, border-color .16s;
}
.botao:hover { background: var(--bg4); border-color: var(--texto3); }

.botao.primario {
  background: linear-gradient(180deg, var(--ouro-alto), var(--ouro));
  color: #17130a; border-color: transparent; font-weight: 800;
}
.botao.primario:hover { filter: brightness(1.06); background: var(--ouro-alto); }

.botao:disabled { opacity: .45; cursor: progress; filter: none; }
.botao.mais { margin: 16px 0 4px; }

/* ─── progresso ────────────────────────────────────────────────────────────── */

.progresso { margin-top: 18px; display: grid; gap: 3px; }

.etapa {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: var(--raio-p);
  font-size: 14px; color: var(--texto3); background: var(--bg2);
  border: 1px solid transparent;
  transition: color .2s, border-color .2s, background .2s;
}

.bolha {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 12px var(--mono);
  background: var(--bg3); color: var(--texto3); border: 1px solid var(--borda2);
  transition: background .2s, color .2s, border-color .2s;
}

.etapa.agora {
  color: var(--texto); background: var(--bg3); border-color: var(--ouro-halo);
}
.etapa.agora .bolha {
  background: var(--ouro); color: #17130a; border-color: transparent;
  animation: pulso 1.4s ease-in-out infinite;
}
.etapa.feita { color: var(--texto2); }
.etapa.feita .bolha { background: var(--ok-veu); color: var(--ok); border-color: rgba(69, 211, 180, .4); }

@keyframes pulso { 0%, 100% { box-shadow: 0 0 0 0 var(--ouro-halo); } 50% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .etapa.agora .bolha { animation: none; } }

/* ─── resultado ────────────────────────────────────────────────────────────── */

.resultado { margin-top: 20px; display: grid; gap: 14px; }

.veredito {
  padding: 16px 18px; border-radius: var(--raio);
  font-size: 19px; font-weight: 800; letter-spacing: -.015em;
  border: 1px solid var(--borda2); border-left: 4px solid var(--texto3);
  background: var(--bg2);
}
.veredito.achei     { color: var(--ok);     border-left-color: var(--ok);     background: var(--ok-veu); }
.veredito.talvez    { color: var(--talvez); border-left-color: var(--talvez); }
.veredito.nao_achei { color: var(--nao);    border-left-color: var(--nao); }

.observacao { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--texto2); }
.observacao em { color: var(--texto3); }
.observacao b { color: var(--texto); }

.leitura { display: flex; flex-wrap: wrap; gap: 6px; }

.etiqueta {
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: var(--bg3); color: var(--texto2); border: 1px solid var(--borda2);
}
/* Etiqueta que a pessoa marcou na tela, em vez de sair da leitura da foto. */
.etiqueta.marcada { border-color: var(--ouro); color: var(--ouro); background: var(--ouro-veu); }

.candidato {
  padding: 14px; border-radius: var(--raio);
  background: var(--bg2); border: 1px solid var(--borda);
  display: grid; gap: 11px;
}
/* O primeiro lugar de um "achei" e a resposta: ele ganha halo, e so ele. */
.candidato.melhor {
  border-color: var(--ouro-halo);
  box-shadow: 0 0 0 1px var(--ouro-veu), 0 14px 40px rgba(0, 0, 0, .45);
}

.cand-topo { display: flex; gap: 13px; align-items: flex-start; }

.cand-foto {
  width: 104px; height: 104px; flex-shrink: 0; border-radius: var(--raio-p);
  object-fit: cover; background: var(--bg3); border: 1px solid var(--borda);
}

.cand-info { min-width: 0; display: grid; gap: 5px; align-content: start; }

.cand-nota {
  justify-self: start; padding: 3px 10px; border-radius: 999px;
  font: 800 11.5px var(--mono);
  background: var(--bg3); color: var(--texto2); border: 1px solid var(--borda2);
}
.cand-nota.alta  { background: var(--ok-veu); color: var(--ok); border-color: rgba(69, 211, 180, .4); }
.cand-nota.media { background: rgba(240, 192, 74, .1); color: var(--talvez); border-color: rgba(240, 192, 74, .35); }

.cand-desc { font-size: 13.5px; font-weight: 600; line-height: 1.42; color: var(--texto); }
.cand-motivo { margin: 2px 0 0; font-size: 12px; color: var(--texto3); line-height: 1.55; }

.cand-aviso {
  margin: 0; padding: 11px 13px; border-radius: var(--raio-p);
  background: rgba(240, 192, 74, .08); border: 1px solid rgba(240, 192, 74, .28);
  font-size: 12.5px; line-height: 1.55; color: var(--talvez);
}
.cand-aviso b { color: var(--texto); }

/* ─── codigo de barras: o climax da tela ───────────────────────────────────── */

.barras { display: grid; gap: 6px; }

.barra-linha {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 15px; border-radius: var(--raio-p); cursor: pointer;
  background: var(--bg3); border: 1px solid var(--borda2); text-align: left;
  transition: border-color .16s, background .16s;
}
.barra-linha:hover  { border-color: var(--ouro); background: var(--bg4); }
.barra-linha:active { background: var(--ouro-veu); }

.barra-cod {
  font: 800 25px/1 var(--mono); letter-spacing: .04em;
  color: var(--ouro); font-variant-numeric: tabular-nums; flex-shrink: 0;
}

.barra-meta { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.45; color: var(--texto3); }
.barra-meta b { display: block; font-size: 12.5px; font-weight: 700; color: var(--texto2); }

.barra-copia {
  flex-shrink: 0; font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto3);
}
.barra-linha:hover .barra-copia { color: var(--ouro); }

.sem-barras {
  padding: 11px 15px; border-radius: var(--raio-p);
  background: var(--bg2); border: 1px dashed var(--borda2);
  font-size: 12px; color: var(--texto3); line-height: 1.5;
}

.rodape-custo {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid var(--borda);
  font: 500 11px var(--mono); color: var(--texto3);
  font-variant-numeric: tabular-nums;
}

/* ─── busca ────────────────────────────────────────────────────────────────── */

.filtros { display: grid; gap: 9px; margin-bottom: 16px; }

.filtros input[type="search"], .filtros #f-cliente {
  width: 100%; padding: 13px 14px; border-radius: var(--raio-p);
  background: var(--bg2); color: var(--texto); border: 1px solid var(--borda2);
  font-size: 16px; font-family: inherit;
}
.filtros #f-cliente { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.filtros input::placeholder { color: var(--texto3); }
.filtros input:focus { outline: none; border-color: var(--ouro); background: var(--bg3); }

.selects { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.selects select:first-child { grid-column: 1 / -1; }
.selects select {
  width: 100%; padding: 12px 13px; border-radius: var(--raio-p);
  background: var(--bg2); color: var(--texto); border: 1px solid var(--borda2);
  font-size: 15px; font-family: inherit;
}
.selects select:focus { outline: none; border-color: var(--ouro); }

.chk {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--texto2); cursor: pointer; padding: 3px 2px;
}
.chk input { width: 19px; height: 19px; accent-color: var(--ouro); cursor: pointer; }

/* Cartao largo o suficiente para a descricao ser LIDA. Com 104 px a descricao cabia em
   duas linhas de 10,5 px e saía cortada no meio da palavra; o que identifica a peca é
   justamente esse texto. `align-items: start` evita que o cartao mais alto da linha
   esticasse os vizinhos. */
.grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px; align-items: start;
}

.peca {
  display: flex; flex-direction: column; width: 100%;
  border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
  background: var(--bg2); cursor: pointer; text-align: left; padding: 0;
  color: var(--texto);
  transition: border-color .16s, transform .16s;
}
.peca:hover  { border-color: var(--ouro-halo); }
.peca:active { border-color: var(--ouro); }
.peca img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--bg3); display: block; }

.peca-cod {
  padding: 9px 10px 4px;
  font: 800 15px/1 var(--mono); letter-spacing: .03em; color: var(--ouro);
  font-variant-numeric: tabular-nums;
}

/* Sem line-clamp: a descricao inteira aparece. Ela é o que diz qual peca é aquela. */
.peca-desc {
  padding: 0 10px; font-size: 12.5px; line-height: 1.4;
  color: var(--texto2); overflow-wrap: break-word;
}
.peca-mais {
  padding: 4px 10px 10px; font-size: 10.5px; line-height: 1.4;
  color: var(--texto3); overflow-wrap: break-word;
}
.peca-desc:last-child { padding-bottom: 10px; }

/* Peça sem foto: lugar que DIZ que não tem, em vez de um quadro vazio na grade. */
.sem-foto-quadro {
  width: 100%; aspect-ratio: 1; display: grid; place-content: center;
  background: var(--bg3); border-bottom: 1px solid var(--borda);
  font-size: 12px; font-weight: 700; color: var(--texto3);
  text-align: center; line-height: 1.5; letter-spacing: .02em;
}
.sem-foto-quadro span { font-weight: 500; font-size: 10.5px; opacity: .8; }

/* ─── ficha ────────────────────────────────────────────────────────────────── */

.ficha {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(6, 8, 12, .78); backdrop-filter: blur(3px);
  padding: 0;
}

.ficha-caixa {
  position: relative; width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto;
  padding: 22px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--bg2); border: 1px solid var(--borda2);
  border-radius: var(--raio) var(--raio) 0 0;
  animation: sobeFicha .22s ease-out;
}

@keyframes sobeFicha { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ficha-caixa { animation: none; } }

.ficha-caixa .descartar { position: absolute; top: 14px; right: 14px; }

.ficha-desc {
  font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em;
  margin: 0 44px 8px 0; color: var(--texto);
}
.ficha-meta { font-size: 12px; line-height: 1.65; color: var(--texto3); margin-bottom: 16px; }

.ficha-fotos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; }
.ficha-fotos img {
  width: 136px; height: 136px; flex-shrink: 0; border-radius: var(--raio-p);
  object-fit: cover; background: var(--bg3); border: 1px solid var(--borda);
}
/* Na ficha o lugar de "sem foto" acompanha o tamanho das outras fotos. */
.ficha-fotos .sem-foto-quadro {
  width: 136px; height: 136px; flex-shrink: 0; aspect-ratio: auto;
  border-radius: var(--raio-p); border: 1px dashed var(--borda2);
}

.ficha-titulo {
  font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--texto3); margin-bottom: 9px;
}

/* ─── catalogo ─────────────────────────────────────────────────────────────── */

.cartao {
  padding: 18px; margin-bottom: 12px; border-radius: var(--raio);
  background: var(--bg2); border: 1px solid var(--borda);
}
.cartao h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px; }

.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }

.numero {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 13px; border-radius: var(--raio-p);
  background: var(--bg3); border: 1px solid var(--borda);
}
.numero b {
  font: 800 19px/1 var(--mono); letter-spacing: -.02em; color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.numero span { font-size: 10.5px; color: var(--texto3); letter-spacing: .02em; }

.migalha { font-size: 12px; line-height: 1.6; color: var(--texto3); }
.migalha b { color: var(--texto2); font-weight: 700; }

/* Bloco do indice de clientes dentro do cartao da empresa. */
.bloco-clientes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }

/* ─── lupa (so no mouse) ───────────────────────────────────────────────────── */

/* A miniatura da grade tem 160 px: ampliar por CSS so deixa o borrao maior. A lupa
   carrega o arquivo de 768 px, que e outra imagem — por isso ela fica nitida. */
.lupa {
  position: fixed; z-index: 60; pointer-events: none;
  padding: 7px; border-radius: var(--raio);
  background: var(--bg2); border: 1px solid var(--ouro-halo);
  box-shadow: 0 20px 56px rgba(0, 0, 0, .66);
}
.lupa img {
  display: block; width: 340px; height: 340px; object-fit: contain;
  border-radius: var(--raio-p); background: var(--bg3);
}
/* Enquanto o arquivo grande nao chegou, mostra o que ja tem em vez de um quadro vazio. */
.lupa.carregando img { opacity: .45; }

img[data-grande] { cursor: zoom-in; }

@media (hover: none), (pointer: coarse) {
  .lupa { display: none !important; }
  img[data-grande] { cursor: default; }
}

/* ─── torrada ──────────────────────────────────────────────────────────────── */

.torrada {
  position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 70; max-width: calc(100vw - 32px);
  padding: 13px 20px; border-radius: 999px;
  background: var(--bg4); color: var(--texto); border: 1px solid var(--ouro-halo);
  font: 700 13.5px var(--fonte); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  animation: sobe .2s ease-out;
}

@keyframes sobe { from { opacity: 0; transform: translate(-50%, 9px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .torrada { animation: none; } }

/* ─── tela larga ───────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  main { padding: 26px 20px 0; }
  .marca h1 { font-size: 22px; }
  .cand-foto { width: 132px; height: 132px; }
  .barra-cod { font-size: 31px; }
  /* Na tela larga o cartao cresce em vez de multiplicar: mais espaco para a descricao,
     que é o que diz qual peca é aquela. */
  .grade { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
  .selects { grid-template-columns: repeat(3, 1fr); }
  .selects select:first-child { grid-column: auto; }
  .ficha { align-items: center; padding: 24px; }
  .ficha-caixa { border-radius: var(--raio); }
}

/* ─── o gabarito: a bancada dizendo se acertou ─────────────────────────────── */

/* Isto fecha o ciclo da identificação. Fica no fim do resultado, depois dos códigos de
   barras, porque a decisão vem depois de olhar — não antes. */
.gabarito {
  margin-top: 16px; padding: 15px; border-radius: var(--raio);
  background: var(--bg2); border: 1px solid var(--borda2);
  display: grid; gap: 10px;
}
.gabarito-titulo { font: 800 14px var(--fonte); color: var(--texto); }
.gabarito-lista { display: grid; gap: 7px; }

.gabarito-op, .gabarito-nao {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: var(--raio-p); cursor: pointer; text-align: left;
  background: var(--bg3); color: var(--texto2);
  border: 1px solid var(--borda2);
  font: 600 13px var(--fonte);
  transition: border-color .16s, background .16s, color .16s;
}
.gabarito-op img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.gabarito-txt b { color: var(--texto); font: 700 12.5px var(--mono); }
.gabarito-op:hover:not(:disabled), .gabarito-nao:hover:not(:disabled) {
  border-color: var(--ouro); color: var(--texto); background: var(--bg4);
}
.gabarito-op:disabled, .gabarito-nao:disabled { opacity: .4; cursor: default; }

/* O quadradinho. É um checkbox de verdade no visual porque é assim que se lê "marque o
   que vale" — mesmo sendo, na prática, uma escolha só. */
.gabarito-caixa {
  width: 19px; height: 19px; flex-shrink: 0; border-radius: 5px;
  border: 2px solid var(--borda2); background: var(--bg);
  display: grid; place-items: center; transition: border-color .16s, background .16s;
}
.gabarito-op:hover .gabarito-caixa, .gabarito-nao:hover .gabarito-caixa { border-color: var(--ouro); }
.gabarito-op.marcada, .gabarito-nao.marcada { opacity: 1; border-color: var(--ok); color: var(--texto); }
.gabarito-op.marcada .gabarito-caixa, .gabarito-nao.marcada .gabarito-caixa {
  background: var(--ok); border-color: var(--ok);
}
.gabarito-op.marcada .gabarito-caixa::after, .gabarito-nao.marcada .gabarito-caixa::after {
  content: "✓"; color: #06231d; font: 900 12px var(--fonte); line-height: 1;
}

.gabarito-nao { color: var(--texto3); }
.gabarito-porque { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--texto3); }

.gabarito-feito {
  padding: 13px 15px; border-radius: var(--raio-p); font-size: 13.5px; line-height: 1.55;
  background: var(--ok-veu); border: 1px solid rgba(69, 211, 180, .3); color: var(--texto);
}
.gabarito-feito.nao { background: var(--bg3); border-color: var(--borda2); }
.gabarito-feito b { color: var(--ouro); }
.gabarito-acoes { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.gabarito-acoes .botao { flex: 1; min-width: 150px; }
.gabarito-dica { display: block; margin-top: 8px; font-size: 11.5px; color: var(--texto3); }

/* ─── nova análise ─────────────────────────────────────────────────────────── */

/* Zera fotos E filtros. O erro clássico da bancada é fotografar a peça nova com o código
   da cliente anterior ainda no campo — e aí a culpa do "não achei" parece ser da IA. */
.nova-analise {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 12px;
}
.nova-analise .nova-icone { color: var(--ouro); }
.nova-analise kbd {
  padding: 1px 6px; border-radius: 5px; font: 700 10.5px var(--mono);
  background: var(--bg); border: 1px solid var(--borda2); color: var(--texto3);
}
@media (max-width: 560px) { .nova-analise kbd { display: none; } }

/* A frase que explica por que a tela mudou de login para "escolha uma senha". Sem ela, a
   pessoa acha que errou a senha e volta a digitar a provisória. */
.entrar-diga {
  margin: 0 0 4px; font-size: 13.5px; line-height: 1.55; color: var(--texto2);
}
.entrar-diga b { color: var(--texto); font-weight: 700; }

/* ─── acessos ──────────────────────────────────────────────────────────────────

   A tela de quem entra no sistema. Fica no mesmo desenho do resto: campos de altura de
   toque, o ouro só no que é ação principal, e o dado em mono. */

.acesso-forma { display: grid; gap: 10px; margin: 0 0 18px; }

.acesso-linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

.campo-rot { display: grid; gap: 5px; flex: 1 1 220px; min-width: 0; }
.campo-rot.curto { flex: 0 1 170px; }
.campo-rot label { font-size: 12px; font-weight: 700; color: var(--texto2); }
.campo-rot label .fraco { font-weight: 500; }
.campo-rot input, .campo-rot select {
  width: 100%; padding: 13px 12px; border-radius: var(--raio-p);
  background: var(--bg2); border: 1px solid var(--borda2); color: var(--texto);
  font: 500 14.5px var(--fonte);
}
.campo-rot input:focus, .campo-rot select:focus { outline: 2px solid var(--ouro); outline-offset: 1px; }
.acesso-linha .botao { flex: 0 0 auto; min-width: 150px; }

/* A credencial recém-criada. Verde-água porque no JHOW JHOW essa cor significa uma coisa
   só — "consegui" — e aqui é exatamente isso. */
.acesso-pronto {
  display: grid; gap: 10px; margin: 0 0 20px;
  padding: 16px; border-radius: var(--raio);
  background: var(--ok-veu); border: 1px solid rgba(69, 211, 180, .32);
}
.acesso-pronto > b { font-size: 15px; color: var(--texto); }

.acesso-cred {
  display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; align-items: center;
}
.acesso-cred span { font-size: 12px; color: var(--texto3); }
.acesso-cred code {
  font: 800 16px/1.3 var(--mono); letter-spacing: .04em; color: var(--texto);
  word-break: break-all;
}

.acesso-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.acesso-acoes .botao { flex: 0 1 auto; min-width: 0; padding: 11px 14px; font-size: 13.5px; text-align: center; }
/* O link de e-mail é um <a>, e <a> não herda a altura de linha do botão. */
.acesso-acoes a.botao { text-decoration: none; line-height: 1.2; }

/* A linha do envio por e-mail: a caixinha, o estado do SMTP e o botão de teste. */
.acesso-envio { align-items: center; gap: 12px; }

.acesso-marca {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--texto2);
}
.acesso-marca input { width: 18px; height: 18px; accent-color: var(--ouro); cursor: pointer; }
.acesso-marca input:disabled { cursor: not-allowed; }
.acesso-marca:has(input:disabled) { color: var(--texto3); cursor: not-allowed; }

.acesso-smtp { font: 500 11px/1.4 var(--mono); color: var(--texto3); letter-spacing: .01em; }
.acesso-smtp.ok   { color: var(--ok); }
.acesso-smtp.ruim { color: var(--talvez); }

.acesso-titulo {
  margin: 22px 0 10px; font-size: 14px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--texto2);
}
.acesso-titulo .fraco { font-weight: 500; text-transform: none; letter-spacing: 0; }

.acesso-lista { display: grid; gap: 8px; }

.acesso-item {
  display: grid; gap: 10px; padding: 13px 15px;
  grid-template-columns: 1fr auto; align-items: center;
  background: var(--bg2); border: 1px solid var(--borda); border-radius: var(--raio);
}
/* Desativado fica visivelmente apagado: numa lista de vinte, "inativo" escrito em cinza
   passa batido e alguém redefine a senha de quem não entra mais. */
.acesso-item.inativo { opacity: .55; border-style: dashed; }

.acesso-quem { display: grid; gap: 3px; min-width: 0; }
.acesso-mail {
  font: 700 14px/1.3 var(--fonte); color: var(--texto);
  overflow-wrap: anywhere;
}
.acesso-meta { font: 500 11px/1.45 var(--mono); color: var(--texto3); letter-spacing: .01em; }

.acesso-etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.acesso-etiqueta {
  padding: 2px 8px; border-radius: 999px; font: 700 10.5px/1.6 var(--fonte);
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--borda2); color: var(--texto3);
}
.acesso-etiqueta.admin { color: var(--ouro); border-color: var(--ouro-halo); background: var(--ouro-veu); }
.acesso-etiqueta.eu    { color: var(--ok);   border-color: rgba(69, 211, 180, .32); }
.acesso-etiqueta.off   { color: var(--nao);  border-color: rgba(240, 121, 124, .32); }
.acesso-etiqueta.trocar { color: var(--talvez); border-color: rgba(240, 192, 74, .32); }

.acesso-item-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.acesso-bt {
  padding: 8px 11px; border-radius: var(--raio-p); cursor: pointer; white-space: nowrap;
  background: var(--bg3); border: 1px solid var(--borda2); color: var(--texto2);
  font: 700 12px var(--fonte);
}
.acesso-bt:hover { background: var(--bg4); color: var(--texto); }
.acesso-bt.perigo:hover { color: var(--nao); border-color: rgba(240, 121, 124, .45); }

@media (max-width: 620px) {
  .acesso-item { grid-template-columns: 1fr; }
  .acesso-item-acoes { justify-content: flex-start; }
  .acesso-linha .botao { flex: 1 1 100%; }
}

/* ─── painel de dados ──────────────────────────────────────────────────────────

   O painel que o robô monta. As medidas aqui não são gosto: saíram do guia de
   visualização, e cada uma tem um motivo que aparece quando ela é ignorada.

   A COR. Uma série só — "quantas peças" por categoria — então UMA cor, em duas
   tonalidades do mesmo ouro: a clara na barra que é a resposta, a escura nas outras. Isso
   é ÊNFASE, e não paleta categórica: a cor aqui não identifica ninguém, ela mede. Doze
   cores diferentes num ranking enterrariam justamente o dado que a pessoa perguntou.

   O `--barra` (#a8813a) foi medido, não escolhido no olho: o validador do guia põe o ouro
   claro do app (#e3b96b) em luminosidade 0,81, fora da banda de 0,48–0,67 do modo escuro —
   como bloco grande ele fica gritado. O #a8813a cai em 0,65, dentro da banda, e passa o
   contraste de 3:1 contra o fundo. O ouro claro fica onde ele é bom: numa marca pequena,
   a barra do destaque.

   O TEXTO nunca veste a cor do dado: rótulo e valor usam os tokens de texto, e a
   identidade vem da barra ao lado. Ouro claro como texto sobre este fundo é ilegível. */

.pnl {
  position: fixed; inset: 0; z-index: 78;
  background: var(--bg);
  display: flex; flex-direction: column;
  animation: galeriaEntra .22s ease-out;
}
@media (prefers-reduced-motion: reduce) { .pnl { animation: none; } }

.pnl-topo {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
  border-bottom: 1px solid var(--borda);
  background: var(--bg2);
}
.pnl-quem { min-width: 0; }
.pnl-quem h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.pnl-quem span { font-size: 12px; color: var(--texto3); }
.pnl-topo-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.pnl-topo-acoes .botao { flex: 0 0 auto; min-width: 0; padding: 10px 13px; font-size: 13px; }

.pnl-corpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 16px 14px calc(24px + env(safe-area-inset-bottom, 0px));
  max-width: 860px; width: 100%; margin: 0 auto;
}

/* ─── os cartões ───────────────────────────────────────────────────────────────
   Contrato do cartão: rótulo em caixa de frase, valor em semibold, dica opcional. O valor
   usa os algarismos proporcionais da fonte — `tabular-nums` num número grande deixa o
   "121" frouxo, e só serve para coluna que precisa alinhar (a tabela, ali embaixo). */

.pnl-cartoes {
  display: grid; gap: 10px; margin-bottom: 22px;
  /* 118px e nao 140: com 140 o sexto cartao ("em promocao") sobrava sozinho numa
     segunda fileira, e cartao orfao parece dado de outra natureza. */
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.pnl-cartao {
  padding: 14px 16px; border-radius: var(--raio);
  background: var(--bg2); border: 1px solid var(--borda);
}
.pnl-cartao dt { font-size: 12px; color: var(--texto2); margin-bottom: 5px; }
.pnl-cartao dd {
  margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--texto);
  line-height: 1.15;
}
.pnl-cartao .dica2 { display: block; margin-top: 4px; font: 500 11px/1.4 var(--mono); color: var(--texto3); }

/* ─── o ranking de barras ─────────────────────────────────────────────────────
   Barra HORIZONTAL porque os rótulos são longos ("FORNECEDOR ALFA - MATRIZ", "OURO E RÓDIO"): em
   coluna vertical eles viram texto de lado. */

.pnl-grafico { margin: 0; }
.pnl-grafico figcaption {
  font-size: 13px; color: var(--texto2); margin-bottom: 12px;
}
.pnl-grafico figcaption b { color: var(--texto); font-weight: 700; }

/* Sem régua de zero, e de propósito. A primeira versão tinha uma hairline à esquerda,
   mas ela caía na borda da LINHA (antes do rótulo) e não no zero da barra, o que fazia
   parecer moldura em vez de eixo. Com o valor escrito na ponta de cada barra e todas
   nascendo do mesmo x, um eixo não acrescenta nada: rótulo direto vem antes de grade. */
.pnl-barras { display: grid; gap: 2px; }

.pnl-linha {
  display: grid; grid-template-columns: minmax(88px, 27%) 1fr; align-items: center;
  gap: 10px; padding: 3px 0 3px 10px;
  cursor: default;
}
.pnl-linha:hover { background: var(--bg2); }

.pnl-rot {
  font-size: 12.5px; color: var(--texto2); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pnl-linha.destaque .pnl-rot { color: var(--texto); font-weight: 700; }
.pnl-linha.cauda .pnl-rot { color: var(--texto3); font-style: italic; }

.pnl-trilha { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* 14 px de altura: o teto do guia é 24, e a sobra da faixa é ar de propósito — barra que
   preenche a linha inteira lê como bloco. Ponta arredondada em 4 px só do lado do dado; o
   lado do zero fica quadrado, porque é onde a barra nasce. */
.pnl-barra {
  height: 14px; border-radius: 0 4px 4px 0;
  background: var(--barra); min-width: 2px;
  transition: filter .12s;
}
.pnl-linha.destaque .pnl-barra { background: var(--ouro); }
.pnl-linha:hover .pnl-barra { filter: brightness(1.15); }

.pnl-val {
  font: 700 12.5px/1 var(--mono); color: var(--texto2); white-space: nowrap;
  flex-shrink: 0;
}
.pnl-linha.destaque .pnl-val { color: var(--texto); }

/* ─── o balão de hover ────────────────────────────────────────────────────────
   Um gráfico em HTML É interativo: passar o mouse tem de dizer o valor exato, porque
   comprimento de barra responde "quem é maior" e não "quanto". */
.pnl-dica {
  position: fixed; z-index: 79; pointer-events: none;
  padding: 8px 11px; border-radius: var(--raio-p);
  background: var(--bg4); border: 1px solid var(--borda2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  font-size: 12.5px; color: var(--texto); max-width: 260px;
}
.pnl-dica b { display: block; margin-bottom: 3px; }
.pnl-dica span { font: 500 11.5px/1.5 var(--mono); color: var(--texto2); }

/* ─── a tabela ─────────────────────────────────────────────────────────────────
   Aqui `tabular-nums` é o certo: são colunas de números que precisam alinhar. */
.pnl-tab { width: 100%; border-collapse: collapse; margin-top: 4px; }
.pnl-tab th, .pnl-tab td {
  padding: 9px 10px; text-align: left; font-size: 13px;
  border-bottom: 1px solid var(--borda);
}
.pnl-tab th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto3); }
.pnl-tab td { color: var(--texto2); }
.pnl-tab .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.pnl-tab tr.destaque td { color: var(--texto); font-weight: 700; }

@media (max-width: 620px) {
  .pnl-cartao dd { font-size: 22px; }
  .pnl-linha { grid-template-columns: minmax(74px, 34%) 1fr; gap: 8px; }
  .pnl-rot { font-size: 11.5px; }
  .pnl-val { font-size: 11.5px; }
  .pnl-topo-acoes .botao { padding: 9px 10px; font-size: 12px; }
}

/* ─── visor ────────────────────────────────────────────────────────────────────

   A foto em tela cheia que amplia. Fundo quase opaco e nada de cor: aqui a única coisa
   que importa é a peça, e um fundo claro atrás de uma joia clara come o contorno dela.

   `touch-action: none` no palco é o que faz a pinça funcionar: sem isso o navegador do
   celular pega o gesto para si e dá zoom na PÁGINA — a tela inteira aumenta, a foto não. */

.visor {
  position: fixed; inset: 0; z-index: 90;
  /* Opaco de verdade, e nao 96%: os 4% deixavam a ficha atras aparecer por tras do texto
     das informacoes, e duas telas visiveis ao mesmo tempo confundem quem esta comparando
     a peca da mao com a foto. */
  background: #05070c;
  display: flex; flex-direction: column;
  animation: visorEntra .18s ease-out;
}
@keyframes visorEntra { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .visor { animation: none } }

.visor-palco {
  flex: 1 1 auto; min-height: 0;
  display: grid; place-items: center; overflow: hidden;
  touch-action: none; cursor: zoom-in;
}
.visor-palco.ampliado { cursor: grab; }
.visor-palco.arrastando { cursor: grabbing; }

#visor-img {
  max-width: 100%; max-height: 100%;
  transform-origin: center center;
  will-change: transform;
  user-select: none; -webkit-user-drag: none;
}
/* Sem transição durante a pinça: animar cada quadro do gesto dá arrasto na imagem. */
#visor-img.macio { transition: transform .18s ease-out; }

.visor-x {
  position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(26, 31, 43, .9); border: 1px solid var(--borda2); color: var(--texto);
  font-size: 16px; line-height: 1;
}
.visor-x:hover { background: var(--bg4); border-color: var(--texto3); }

.visor-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 74px; cursor: pointer;
  background: rgba(26, 31, 43, .8); border: 1px solid var(--borda2); color: var(--texto);
  font-size: 30px; line-height: 1; padding: 0;
  border-radius: 12px;
}
.visor-seta.ant  { left: 8px; }
.visor-seta.prox { right: 8px; }
.visor-seta:hover { background: var(--bg4); }
.visor-seta[hidden] { display: none; }

.visor-baixo {
  flex: 0 0 auto;
  display: grid; gap: 9px; justify-items: center;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, rgba(10, 12, 18, .9) 30%);
}

/* As outras fotos da mesma peça. Só aparece quando existe mais de uma — um seletor com um
   item só é enfeite que ocupa altura. */
.visor-fotos { display: flex; gap: 7px; }
.visor-fotos:empty { display: none; }
.visor-fotos button {
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  border-radius: 8px; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--borda2);
}
.visor-fotos button.atual { border-color: var(--ouro); }
.visor-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }

.visor-info {
  max-width: 70ch; text-align: center;
  font-size: 13px; line-height: 1.5; color: var(--texto2);
}
.visor-info b { color: var(--texto); font-weight: 700; }
/* O código de barras é o que a pessoa vai anotar: mono, grande e destacado, como no resto
   do app. Ele é um botão porque copiar é o que se faz com ele. */
.visor-info .cod {
  display: inline-block; margin-top: 6px; cursor: pointer;
  padding: 5px 12px; border-radius: 8px;
  font: 800 16px/1.2 var(--mono); letter-spacing: .06em;
  background: var(--ouro-veu); border: 1px solid var(--ouro-halo); color: var(--ouro-alto);
}
.visor-info .cod:hover { background: var(--bg3); }
.visor-info .promo { color: var(--ok); font-weight: 700; }

.visor-barra { display: flex; align-items: center; gap: 10px; }
.visor-bt {
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--borda2); color: var(--texto);
  font-size: 17px; line-height: 1;
}
.visor-bt:hover { background: var(--bg3); }
.visor-nivel, .visor-conta {
  font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--texto3);
  min-width: 42px; text-align: center;
}

@media (max-width: 620px) {
  /* No celular quem troca de peça é o dedo, arrastando: as setas roubariam a foto. */
  .visor-seta { display: none; }
  .visor-info { font-size: 12.5px; }
}

/* ─── a galeria que o robô abre ────────────────────────────────────────────── */

.galeria {
  position: fixed; inset: 0; z-index: 75;
  background: var(--bg); display: flex; flex-direction: column;
  animation: galeriaEntra .22s ease-out;
}
@keyframes galeriaEntra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .galeria { animation: none; } }

.galeria-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
  border-bottom: 1px solid var(--borda); background: var(--bg2);
}
.galeria-topo h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.galeria-topo span { font-size: 12px; color: var(--texto3); }
.galeria-topo kbd {
  margin-left: 5px; padding: 1px 5px; border-radius: 4px; font: 700 10px var(--mono);
  background: var(--bg); border: 1px solid var(--borda2); color: var(--texto3);
}

.galeria-grade {
  flex: 1; overflow-y: auto; padding: 14px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-content: start;
}

.gal-item {
  margin: 0; border-radius: var(--raio-p); overflow: hidden;
  background: var(--bg2); border: 1px solid var(--borda);
}
.gal-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--bg3); }
.gal-item figcaption { padding: 8px 9px 10px; display: grid; gap: 4px; }
.gal-item b { font-size: 11.5px; line-height: 1.35; color: var(--texto); font-weight: 700; }
.gal-resto { font-size: 10.5px; color: var(--texto3); }

/* O código de barras é a razão de a pessoa estar olhando: ele é clicável e copia. */
.gal-cod {
  justify-self: start; padding: 3px 8px; border-radius: 6px; cursor: pointer;
  background: var(--ouro-veu); border: 1px solid var(--ouro-halo); color: var(--ouro);
  font: 700 11.5px var(--mono); letter-spacing: .03em;
}
.gal-cod:hover { background: var(--ouro); color: #17130a; }
.gal-sem { font-size: 10.5px; color: var(--texto3); font-style: italic; }

/* ─── o robozinho que se apresenta ─────────────────────────────────────────── */

.robo-fundo {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(5, 7, 11, .82); backdrop-filter: blur(4px);
  padding: 0;
}

.robo-caixa {
  position: relative; width: 100%; max-width: 560px;
  max-height: 94vh; overflow-y: auto;
  padding: 26px 22px calc(24px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  border: 1px solid var(--borda2); border-top: 2px solid var(--ouro);
  border-radius: 20px 20px 0 0;
  display: grid; gap: 18px;
  animation: roboEntra .28s cubic-bezier(.2, .9, .3, 1);
}

@keyframes roboEntra { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.robo-topo { display: flex; align-items: flex-start; gap: 15px; }

.robo { width: 82px; height: 82px; flex-shrink: 0; }
.robo .corpo-robo { fill: var(--bg4); stroke: var(--ouro); stroke-width: 1.6; }
.robo .visor      { fill: #0a0c12; stroke: var(--ouro); stroke-width: 1.4; }
.robo .olho-robo  { fill: var(--ouro); }
.robo .antena     { fill: none; stroke: var(--ouro); stroke-width: 1.6; stroke-linecap: round; }
.robo .luz        { fill: var(--ok); }
.robo .braco      { fill: none; stroke: var(--ouro); stroke-width: 1.6; stroke-linecap: round; }

/* Pisca devagar: dá vida sem virar distração numa tela que a pessoa vai ler. */
@keyframes piscar { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
.robo .olhos { animation: piscar 4.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes acende { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.robo .luz { animation: acende 2.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .robo .olhos, .robo .luz { animation: none; }
  .robo-caixa { animation: none; }
}

/* A fala sai de um balão com bico apontando para o robô. */
.robo-fala {
  position: relative; flex: 1; min-width: 0;
  padding: 15px 17px; border-radius: 14px;
  background: var(--bg3); border: 1px solid var(--borda2);
}
.robo-fala::before {
  content: ""; position: absolute; left: -7px; top: 26px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--bg3); border-left: 1px solid var(--borda2); border-bottom: 1px solid var(--borda2);
}
.robo-fala h2 {
  font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 7px;
  color: var(--texto);
}
.robo-fala p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--texto2); }
.robo-fala p + p { margin-top: 9px; }
.robo-fala b { color: var(--texto); font-weight: 700; }
.robo-fala .num {
  font: 700 .95em var(--mono); color: var(--ouro); font-variant-numeric: tabular-nums;
}

.robo-progresso { display: flex; align-items: center; justify-content: center; gap: 10px; }
.robo-passos { display: flex; gap: 6px; }
.robo-passos span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--borda2); transition: background .25s, width .25s;
}
/* O passo ja ouvido fica aceso pela metade: a fileira mostra o quanto falta, e nao so
   onde a pessoa esta. Numa apresentacao de seis telas isso e a diferenca entre "ja vai
   acabar" e "quantas ainda tem?". */
.robo-passos span.feito { background: var(--ouro-halo); }
.robo-passos span.agora { background: var(--ouro); width: 22px; border-radius: 999px; }

.robo-conta {
  font: 700 11px var(--mono); color: var(--texto3);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}

.robo-acoes { display: flex; gap: 8px; }
.robo-acoes .botao { flex: 1; }

.robo-pular {
  justify-self: center; margin: -6px auto 0; padding: 4px 8px;
  background: none; border: none; cursor: pointer;
  font: 600 12px var(--fonte); color: var(--texto3);
}
.robo-pular:hover { color: var(--texto2); }

/* O destaque: quatro palavras em cima do titulo, do tamanho de uma etiqueta. Ele existe
   para o olho ter onde pousar enquanto o robo fala — a tela so com a voz ficava vazia. */
.robo-destaque {
  display: inline-block; margin-bottom: 8px; padding: 4px 11px;
  border-radius: 999px; background: var(--ouro-veu); border: 1px solid var(--ouro-halo);
  font: 800 11px var(--fonte); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ouro);
}

/* Cada passo entra com um movimento curto. Sem isto, avancar so troca o texto no lugar —
   e cinco trocas sem movimento nenhum parecem uma tela travada. */
@keyframes passoEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.robo-caixa.virou .robo-fala { animation: passoEntra .32s cubic-bezier(.2, .9, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .robo-caixa.virou .robo-fala { animation: none; }
}

@media (min-width: 640px) {
  .robo-fundo { align-items: center; padding: 24px; }
  .robo-caixa { border-radius: 20px; border-top-width: 1px; }
  .robo { width: 96px; height: 96px; }
}

/* ─── conta no cabeçalho ───────────────────────────────────────────────────── */

.conta { display: flex; align-items: center; gap: 8px; }

.conta-email {
  font-size: 11.5px; color: var(--texto3); max-width: 20ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.conta-botao {
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  background: var(--bg3); color: var(--texto2); border: 1px solid var(--borda2);
  font: 700 11.5px var(--fonte); letter-spacing: .02em;
}
.conta-botao:hover { border-color: var(--ouro); color: var(--ouro); }

@media (max-width: 560px) {
  /* No celular o e-mail sai: o espaço é do estado do sistema, que muda. */
  .conta-email { display: none; }
}

/* ─── o robô do canto ──────────────────────────────────────────────────────── */

/* Ele mora aqui: a bancada precisa poder chamá-lo no meio do trabalho, sem procurar
   botão em cabeçalho nenhum. Fica acima da área segura do iPhone. */
.robo-canto {
  position: fixed; z-index: 65;
  right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: flex-end; gap: 10px;
  max-width: calc(100vw - 28px);
}

.robo-canto-botao {
  width: 60px; height: 60px; flex-shrink: 0; padding: 6px;
  border-radius: 50%; cursor: pointer;
  background: radial-gradient(120% 120% at 30% 20%, var(--bg4), var(--bg2));
  border: 1px solid var(--ouro-halo);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  display: grid; place-items: center;
  transition: transform .18s, border-color .18s;
}
.robo-canto-botao:hover { border-color: var(--ouro); transform: translateY(-2px); }
.robo-canto-botao:active { transform: translateY(0) scale(.96); }
.robo-canto-botao .robo { width: 100%; height: 100%; }

/* Balanço lento, de quem está esperando sem pressa. */
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.robo-canto-botao .robo { animation: flutua 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .robo-canto-botao .robo { animation: none; } }

/* A fala sai à esquerda do robô, com o bico apontando para ele. */
.robo-canto-fala {
  position: relative; max-width: 260px;
  padding: 13px 34px 13px 15px; border-radius: 15px;
  background: var(--bg3); border: 1px solid var(--ouro-halo);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  font-size: 13.5px; line-height: 1.5; color: var(--texto);
  animation: falaEntra .26s cubic-bezier(.2, .9, .3, 1);
}
.robo-canto-fala::after {
  content: ""; position: absolute; right: -6px; bottom: 20px;
  width: 11px; height: 11px; transform: rotate(45deg);
  background: var(--bg3);
  border-right: 1px solid var(--ouro-halo); border-top: 1px solid var(--ouro-halo);
}
.robo-canto-fala b { color: var(--ouro); font-weight: 800; }
.robo-canto-fala .fraco { display: block; margin-top: 5px; font-size: 11.5px; color: var(--texto3); }

@keyframes falaEntra { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .robo-canto-fala { animation: none; } }

.robo-canto-fechar {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  background: none; border: none; color: var(--texto3);
  font-size: 11px; line-height: 1; display: grid; place-items: center;
}
.robo-canto-fechar:hover { color: var(--texto); background: var(--bg4); }

/* No celular a fala não cabe ao lado: ela sobe para cima do robô. */
@media (max-width: 480px) {
  .robo-canto { flex-direction: column; align-items: flex-end; }
  .robo-canto-fala { max-width: min(280px, calc(100vw - 32px)); }
  .robo-canto-fala::after { right: 22px; bottom: -6px; transform: rotate(135deg); }
}

/* A boca do robô se move enquanto ele fala. Um robô parado com voz em cima não parece
   falar — parece ter alguém falando atrás dele. */
.robo .boca {
  fill: none; stroke: var(--ouro); stroke-width: 2; stroke-linecap: round;
  transition: stroke-width .12s;
}
@keyframes bocaFala {
  0%, 100% { stroke-width: 2; }
  50%      { stroke-width: 7; }
}
.robo.falando .boca { animation: bocaFala .38s ease-in-out infinite; }
.robo.falando .luz  { animation-duration: .9s; }
@media (prefers-reduced-motion: reduce) { .robo.falando .boca { animation: none; stroke-width: 5; } }

/* ─── apresentação só com voz ──────────────────────────────────────────────── */

/* Ele fala; a tela não repete por escrito. O robô cresce e vai para o centro, porque
   agora ele é a única coisa acontecendo ali. */
.robo-caixa.so-voz .robo-topo { flex-direction: column; align-items: center; text-align: center; }
.robo-caixa.so-voz .robo { width: 132px; height: 132px; }
.robo-caixa.so-voz .robo-fala {
  background: none; border: none; padding: 4px 8px 0; box-shadow: none;
}
.robo-caixa.so-voz .robo-fala::before { display: none; }
.robo-caixa.so-voz .robo-fala h2 {
  font-size: 21px; margin-bottom: 0; text-wrap: balance; line-height: 1.32;
}

/* Um halo atras do robo, que acende quando ele abre a boca. Numa tela onde a unica coisa
   acontecendo e o som, e ele que diz "esta rolando" antes de o audio chegar — e o que
   resolve o celular no silencioso, em que nada na tela mudava. */
.robo-caixa.so-voz .robo { transition: filter .3s; filter: drop-shadow(0 0 0 transparent); }
.robo-caixa.so-voz .robo.falando {
  filter: drop-shadow(0 0 18px var(--ouro-halo));
  animation: roboPulsa 1.5s ease-in-out infinite;
}
@keyframes roboPulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .robo-caixa.so-voz .robo.falando { animation: none; } }

/* Ondinhas de som ao lado do robô enquanto ele fala: a tela confirma que o som saiu, o
   que importa quando o celular está no silencioso e ninguém entende por que "não falou". */
.robo-caixa.so-voz .robo-fala h2::after {
  content: ""; display: block; height: 3px; width: 0;
  margin: 12px auto 0; border-radius: 999px; background: var(--ouro);
  transition: width .3s;
}
.robo-caixa.so-voz .robo-topo:has(.robo.falando) .robo-fala h2::after {
  width: 54px; animation: ondaSom 1.1s ease-in-out infinite;
}
@keyframes ondaSom { 0%, 100% { width: 26px; opacity: .5; } 50% { width: 62px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .robo-caixa.so-voz .robo-topo:has(.robo.falando) .robo-fala h2::after { animation: none; width: 44px; }
}

/* ─── perguntar ao robô ────────────────────────────────────────────────────── */

.robo-canto-fala { display: grid; gap: 10px; max-width: 320px; }

.robo-pergunta { display: flex; gap: 5px; align-items: center; }

.robo-pergunta input {
  flex: 1; min-width: 0; padding: 9px 11px; border-radius: 9px;
  background: var(--bg2); color: var(--texto); border: 1px solid var(--borda2);
  font: 400 14px var(--fonte);
}
.robo-pergunta input::placeholder { color: var(--texto3); }
.robo-pergunta input:focus { outline: none; border-color: var(--ouro); }

.robo-mini.enviar {
  background: var(--ouro); color: #17130a; font-weight: 800; font-size: 14px;
  width: 30px; height: 30px;
}
.robo-mini.enviar:hover { background: var(--ouro-alto); }
.robo-mini#robo-mic {
  width: 32px; height: 32px; background: var(--bg2); border: 1px solid var(--ouro-halo);
  transition: border-color .18s, background .18s, transform .18s;
}
.robo-mini#robo-mic:hover { border-color: var(--ouro); transform: scale(1.06); }

/* Ouvindo agora: anel vermelho que pulsa. Quem esta falando com o celular na bancada nao
   olha o campo de texto — precisa ver de canto de olho que o microfone esta aberto. */
.robo-mini#robo-mic.ouvindo {
  border-color: var(--nao); color: var(--nao); background: rgba(240, 121, 124, .12);
  animation: micPulsa 1.2s ease-in-out infinite;
}
@keyframes micPulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 121, 124, .45); }
  70%      { box-shadow: 0 0 0 7px rgba(240, 121, 124, 0); }
}

/* Modo conversa, entre uma pergunta e outra: o microfone vai reabrir sozinho quando ele
   terminar de falar. Fica dourado — aceso, mas nao gravando. */
.robo-mini#robo-mic.conversando { border-color: var(--ouro); background: var(--ouro-veu); }
@media (prefers-reduced-motion: reduce) { .robo-mini#robo-mic.ouvindo { animation: none; } }

.robo-link {
  justify-self: start; padding: 0; background: none; border: none; cursor: pointer;
  font: 600 11.5px var(--fonte); color: var(--texto3);
  text-decoration: underline; text-underline-offset: 2px;
}
.robo-link:hover { color: var(--ouro); }

/* Enquanto ele consulta o catálogo: três pontinhos, para a espera ter forma. */
.robo-pensando { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.robo-pensando i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--ouro);
  animation: pensa 1.1s ease-in-out infinite;
}
.robo-pensando i:nth-child(2) { animation-delay: .16s; }
.robo-pensando i:nth-child(3) { animation-delay: .32s; }
@keyframes pensa { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .robo-pensando i { animation: none; opacity: .7; } }


/* ─── tela de entrar ───────────────────────────────────────────────────────────

   A tela é um VISOR, não um cartão com texto. À esquerda o sistema está olhando uma peça
   — anel em nuvem de pontos, girando, com a linha de leitura descendo por cima e a tarja
   de código de barras se acendendo quando a leitura termina. É o que o app faz, mostrado
   em vez de escrito: por isso saiu a frase explicando e ficaram só os números do índice.

   À direita, o mínimo: dois campos e um botão. Sem rótulo em cima do campo, sem parágrafo
   de aviso — o movimento fica todo no visor, nunca atrás do campo de senha. */

.corpo-entrar { min-height: 100vh; padding-bottom: 0; }

.entrar-grade {
  min-height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 33rem);
}

/* ─── o visor ─── */

.cena {
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 2.6vh, 30px);
  padding: clamp(24px, 4vh, 44px) clamp(24px, 4.6vw, 64px);
  background: var(--bg);
  border-right: 1px solid var(--borda);
}

/* Um halo de ouro atrás do anel: dá profundidade à cena sem nenhum objeto novo. */
.cena::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(95% 85% at 50% 44%, rgba(227, 185, 107, .09), transparent 74%);
}

.cena-topo {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}

.entrar-marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.entrar-marca .marca-robo { width: 38px; height: 38px; stroke-width: 1.5; }
.entrar-marca h1 {
  font-size: clamp(20px, 2.1vw, 27px); font-weight: 800;
  letter-spacing: .17em; line-height: 1; color: var(--texto); white-space: nowrap;
}

/* Estado do sistema em duas palavras e um ponto pulsando — a única "frase" que sobrou,
   e ela é status, não explicação. */
.chip-online {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 6px 12px; border: 1px solid rgba(69, 211, 180, .3); border-radius: 999px;
  background: var(--ok-veu); color: var(--ok);
  font: 700 9.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
}
.chip-online i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@keyframes pulsa-ponto {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(69, 211, 180, .45); }
  55%      { opacity: .4; box-shadow: 0 0 0 5px rgba(69, 211, 180, 0); }
}
.chip-online i { animation: pulsa-ponto 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .chip-online i { animation: none; } }

/* O quadro da leitura (mira, e nao .visor: o robozinho ja tem um <rect class="visor">). Quadrado, centralizado, com as quinas marcadas: é a moldura de
   mira de um leitor, e ela diz "aqui é onde a peça entra" sem legenda. */
.mira {
  position: relative; z-index: 1; place-self: center;
  width: 100%; max-width: min(600px, 60vh); aspect-ratio: 1 / 1;
}
.mira canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  pointer-events: none;
}
.mira .canto {
  position: absolute; width: 20px; height: 20px;
  border: 1px solid var(--ouro); opacity: .45;
}
.mira .ct-ne { top: 0; left: 0;  border-width: 1px 0 0 1px; }
.mira .ct-no { top: 0; right: 0; border-width: 1px 1px 0 0; }
.mira .ct-se { bottom: 0; left: 0;  border-width: 0 0 1px 1px; }
.mira .ct-so { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* Telemetria, não vitrine: rótulo minúsculo em mono e o número grande em ouro. */
.entrar-numeros {
  position: relative; z-index: 2; margin: 0;
  display: flex; gap: clamp(20px, 3.6vw, 44px); flex-wrap: wrap;
}
.entrar-numeros > div { display: flex; flex-direction: column; justify-content: space-between; }
.entrar-numeros dt {
  margin-bottom: 7px;
  font: 700 9.5px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto3);
}
.entrar-numeros dd {
  margin: 0; font: 700 clamp(19px, 2.1vw, 26px)/1 var(--mono);
  letter-spacing: -.02em; color: var(--ouro); font-variant-numeric: tabular-nums;
}

/* ─── painel do formulário ─── */

.entrar-forma-painel {
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  /* Recuo esquerdo curto de proposito: e ele que puxa o formulario para perto da divisa,
     em vez de deixar a coluna com uma margem de livro no meio da tela. */
  padding: clamp(30px, 6vh, 56px) clamp(26px, 3.4vw, 54px)
           calc(clamp(24px, 4vh, 40px) + env(safe-area-inset-bottom, 0px)) clamp(26px, 2.2vw, 38px);

  /* Antes este painel era `--bg2` cheio, um cinza-azulado bem mais claro e mais frio que a
     cena do lado — lia como duas telas coladas. Agora ele parte do mesmo quase-preto e
     leva o mesmo hálito de ouro que a cena, só um pouco mais alto no canto de cima para
     a coluna não desaparecer. Uma tela, dois lados. */
  background:
    radial-gradient(115% 80% at 100% 6%, rgba(227, 185, 107, .075), transparent 62%),
    linear-gradient(196deg, #111621, #0c0f17 58%, #0a0c12);
  /* A divisa em ouro fraco, e não a borda cinza: é o acento que costura os dois lados. */
  border-left: 1px solid rgba(227, 185, 107, .16);
}

.entrar-forma-caixa { width: 100%; display: grid; gap: 16px; }
.entrar-form { display: grid; gap: 14px; }

/* O robozinho recebe, e a palavra diz o que é. Sem os dois, o painel da direita era só
   dois campos soltos no escuro — ninguém tinha certeza de que ali era a entrada. */
.entrar-cabecalho {
  display: flex; align-items: center; gap: 14px; margin-bottom: 6px;
}
.entrar-cabecalho h2 {
  font-size: 38px; font-weight: 800; letter-spacing: -.015em; color: var(--texto);
}

/* Halo de ouro atrás do robô: é o que faz o olho ir para o canto de entrar em vez de
   ficar na peça girando do outro lado. */
.entrar-robo-halo {
  position: relative; display: grid; place-items: center; flex-shrink: 0;
  width: 76px; height: 76px;
}
.entrar-robo-halo::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, var(--ouro-halo), transparent 68%);
}
.entrar-robo-halo .robo { position: relative; width: 72px; height: 72px; }
@keyframes respira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.entrar-robo-halo .robo { animation: respira 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .entrar-robo-halo .robo { animation: none; } }

/* Rótulo existe para o leitor de tela; na tela, o próprio campo diz o que é. */
.oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.campo input {
  width: 100%; padding: 18px 17px; border-radius: var(--raio-p);
  border: 1px solid var(--borda2); background: rgba(255, 255, 255, .022);
  color: var(--texto);
  font: 400 16px/1.4 var(--fonte);   /* 16px evita o zoom automático do iOS */
  transition: border-color .18s, background .18s;
}
.campo input::placeholder { color: var(--texto3); }
.campo input:focus {
  outline: none; border-color: var(--ouro); background: rgba(227, 185, 107, .05);
  /* Anel de ouro fraco em volta do campo focado: diz onde se está digitando sem gritar. */
  box-shadow: 0 0 0 3px rgba(227, 185, 107, .12);
}
.campo input:-webkit-autofill { -webkit-text-fill-color: var(--texto); transition: background-color 9999s; }

/* ─── o olho da senha ─── */

.campo-com-olho { position: relative; display: block; }
/* Espaço à direita para o olho não ficar em cima do que se digita. */
.campo-com-olho input { padding-right: 54px; }

.olho-senha {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: none; border-radius: 9px; background: none; cursor: pointer;
  color: var(--texto3); transition: color .16s, background .16s;
}
.olho-senha:hover { color: var(--ouro); background: rgba(227, 185, 107, .08); }
.olho-senha svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Senha escondida: olho inteiro, "mostrar". Senha à mostra: olho cortado, "esconder".
   O risco é uma linha só que aparece — trocar o desenho todo piscaria o ícone. */
.olho-senha .risco { opacity: 0; transition: opacity .14s; }
.olho-senha[aria-pressed="true"] { color: var(--ouro); }
.olho-senha[aria-pressed="true"] .risco { opacity: 1; }

/* Sólido, sem gradiente: gradiente em botão é a marca do amadorismo. O brilho embaixo é
   sombra, não gradiente — levanta o botão do fundo escuro sem sujar o ouro. */
.entrar-botao {
  margin-top: 6px; padding: 19px 18px; border: none; border-radius: var(--raio-p);
  cursor: pointer; background: var(--ouro); color: #14100a;
  font: 800 14px var(--fonte); letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 9px 28px -16px rgba(227, 185, 107, .6);
  transition: background .16s, transform .1s, box-shadow .16s;
}
.entrar-botao:hover {
  background: var(--ouro-alto);
  box-shadow: 0 11px 32px -14px rgba(227, 185, 107, .72);
}
.entrar-botao:active { transform: translateY(1px); }
.entrar-botao:disabled { opacity: .5; cursor: progress; }

.entrar-erro {
  padding: 11px 13px; border-radius: 8px;
  background: rgba(240, 121, 124, .09); border-left: 2px solid var(--nao);
  font-size: 13px; line-height: 1.5; color: var(--nao); font-weight: 600;
}


/* ─── uma coluna: celular e janela estreita ─── */

@media (max-width: 900px) {
  /* auto/1fr, e nao auto/auto: com auto/auto o painel do formulario para onde o texto
     acaba e sobra uma faixa preta no pe da tela. */
  .entrar-grade { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  .cena {
    padding: calc(22px + env(safe-area-inset-top, 0px)) 22px 22px;
    border-right: none; border-bottom: 1px solid var(--borda);
  }
  .mira { max-width: min(300px, 46vw); }
  .entrar-marca .marca-robo { width: 32px; height: 32px; }
  .entrar-marca h1 { font-size: 21px; letter-spacing: .14em; }

  /* Empilhado, a divisa é horizontal: a borda de ouro tem que virar com ela, senão fica
     um risco vertical na lateral esquerda da tela, sem nada do outro lado. */
  .entrar-forma-painel {
    justify-content: flex-start;
    border-left: none; border-top: 1px solid rgba(227, 185, 107, .16);
    background:
      radial-gradient(130% 55% at 100% 8%, rgba(227, 185, 107, .07), transparent 64%),
      linear-gradient(180deg, #0b0e15, #10141e 62%, #121722);
  }
}

@media (max-width: 460px) {
  .entrar-numeros { gap: 16px; }
  .entrar-numeros > div { flex: 1; }
  .entrar-numeros dt { font-size: 8.5px; letter-spacing: .12em; }
  .entrar-numeros dd { font-size: 17px; }
  .mira { max-width: min(210px, 54vw); }
  .chip-online { padding: 5px 9px; font-size: 8.5px; letter-spacing: .12em; }

  /* Celular: o robô e o "Login" encolhem para caber com o teclado aberto, e o alvo de
     toque do olho cresce — 38 px é confortável no mouse e apertado no dedo. */
  .entrar-robo-halo { width: 62px; height: 62px; }
  .entrar-robo-halo .robo { width: 58px; height: 58px; }
  .entrar-cabecalho h2 { font-size: 31px; }
  .olho-senha { width: 44px; height: 44px; right: 6px; }
  .campo-com-olho input { padding-right: 58px; }
}

/* Celular baixo (iPhone SE e parentes): faltavam 46 px para o botão de entrar caber sem
   rolar. O que encolhe é a peça e o robô — decoração —, nunca os campos. */
@media (max-width: 900px) and (max-height: 700px) {
  .cena { gap: 12px; padding-bottom: 16px; }
  .mira { max-width: min(168px, 44vw); }
  .entrar-numeros dd { font-size: 15px; }
  .entrar-robo-halo { width: 54px; height: 54px; }
  .entrar-robo-halo .robo { width: 50px; height: 50px; }
  .entrar-cabecalho { margin-bottom: 0; }
  .entrar-cabecalho h2 { font-size: 27px; }
  .entrar-forma-painel { padding-top: 20px; }
}

/* Celular DEITADO, e qualquer janela achatada: empilhado, a página ficava 420 px mais alta
   que a tela. Aqui as duas colunas voltam mesmo em tela estreita — do lado é a única forma
   de a peça e o login caberem juntos em 390 px de altura.
   Vem depois dos blocos de largura de propósito: com a mesma especificidade, quem está
   embaixo vence, e é isso que faz esta regra desfazer o empilhamento. */
@media (max-height: 620px) and (min-width: 620px) {
  .entrar-grade { grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem); grid-template-rows: 1fr; }
  .cena {
    padding: 18px 22px; gap: 12px;
    border-right: 1px solid var(--borda); border-bottom: none;
  }
  .mira { max-width: min(250px, 52vh); }
  .entrar-numeros dd { font-size: 16px; }
  .entrar-forma-painel {
    justify-content: center; padding: 22px clamp(20px, 3vw, 34px);
    border-top: none; border-left: 1px solid rgba(227, 185, 107, .16);
    background:
      radial-gradient(115% 80% at 100% 6%, rgba(227, 185, 107, .075), transparent 62%),
      linear-gradient(196deg, #111621, #0c0f17 58%, #0a0c12);
  }
  .entrar-cabecalho { margin-bottom: 0; }
  .entrar-cabecalho h2 { font-size: 27px; }
  .entrar-robo-halo { width: 50px; height: 50px; }
  .entrar-robo-halo .robo { width: 46px; height: 46px; }
  .campo input { padding: 13px 15px; }
  .entrar-botao { padding: 15px 18px; }
  .entrar-form { gap: 10px; }
  .entrar-forma-caixa { gap: 12px; }
}

/* ─── tela baixa: celular deitado ─────────────────────────────────────────────

   Medido num 740x360 com o aviso de varredura na tela: cabeçalho 112, menu 59, respiro do
   main 26, aviso 52 e rodapé 8 somam 257 dos 360 px — sobravam 87 px de palco, menos que o
   piso de 120 que o app.js garante, e a rolagem aparecia.

   Nesta faixa a folga do app inteiro encolhe. O maior gasto era o CABEÇALHO, que quebra em
   três linhas: sai o subtítulo e saem as pastilhas de estado — o aviso, que é o que aparece
   justamente quando o catálogo está carregando, continua. É a única coisa da tela que perde
   informação, e perde para os dois botões continuarem clicáveis.

   Este bloco é o ÚLTIMO do arquivo de propósito. Ver o comentário lá em cima. */

@media (max-height: 470px) {
  body { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  main { padding-top: 8px; }

  /* Cabeçalho em uma linha: só a marca, o e-mail e o Sair. */
  .topo { padding: calc(7px + var(--topo-h)) 12px 7px; flex-wrap: nowrap; gap: 10px; }
  .marca p, .estado { display: none; }
  .marca-robo { width: 26px; height: 26px; }
  .marca h1 { font-size: 17px; letter-spacing: .16em; }

  .menu { padding: 6px 8px; }
  .menu-item { padding: 8px 12px; }

  /* O aviso de varredura em UMA linha, cortada com reticências. Em duas ele come 52 dos
     360 px de altura, e ler o começo ("Varrendo o catálogo…") já diz o que interessa. */
  .aviso {
    margin-bottom: 8px; padding: 7px 12px; font-size: 12.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}