/* ============================================================
   USECONTAI — estilo

   A tela é operada de pé, numa loja, com uma mão segurando o leitor.
   Isso decide quase tudo aqui:

   · Alvo de toque nunca abaixo de 48px. O padrão de acessibilidade
     fala em 44; numa loja, com pressa, 44 erra.
   · Contraste alto. Reserva de loja tem luz ruim e o tablet fica
     inclinado.
   · Número grande. A quantidade contada é lida de relance, sem parar
     de bipar.
   · Nada de animação de transição entre telas: no meio de uma
     contagem, 200ms de bonito é 200ms de espera.
   ============================================================ */

:root {
  color-scheme: light;

  --teal:        #0E7C7B;
  --teal-forte:  #0A5F5E;
  --teal-fraco:  #E2F0EF;

  --papel:       #F5F7FA;
  --superficie:  #FFFFFF;
  --superficie2: #EDF1F6;
  --tinta:       #111E2B;
  --tinta2:      #3D4C5C;
  --tinta3:      #6B7A8A;
  --linha:       #D6DEE7;

  --bom:         #1F7A4D;
  --bom-fraco:   #E3F1E9;
  --atencao:     #B9631A;
  --atencao-fraco:#F8ECDF;
  --ruim:        #A32E2E;
  --ruim-fraco:  #FBEAEA;

  /* Azul da N. FERNANDES, amostrado do próprio logo (#012349). Existe
     para o rodapé: a linha do cliente sai no verde do app e a da MAD no
     azul do cliente — as duas marcas trocadas, a pedido do David em
     05/10/2026. */
  --marinho:     #0d2542;

  /* AZUL DA MAD, amostrado do próprio monograma (13,37,66 = #0D2542).
     Existe separado do marinho da N. Fernandes porque as duas marcas
     aparecem na mesma tela e, no dia em que um dos dois logos mudar de
     tom, só a sua variável muda. Onde o nome "MAD Soluções" aparece
     escrito, ele usa esta cor — a mesma do logo ao lado. */
  --mad:         #0d2542;

  --raio: 12px;
  --toque: 48px;
  --sombra: 0 1px 2px rgba(17,30,43,.06), 0 6px 16px rgba(17,30,43,.06);
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --teal:        #4FBDB4;
  --teal-forte:  #6FD3CA;
  --teal-fraco:  #12302F;
  --papel:       #0C1219;
  --superficie:  #131C25;
  --superficie2: #1A242F;
  --tinta:       #E8EEF4;
  --tinta2:      #B4C1CE;
  --tinta3:      #7E8D9C;
  --linha:       #26333F;
  --bom:         #5FBE8B;
  --bom-fraco:   #132A20;
  --atencao:     #E09B58;
  --atencao-fraco:#2E2317;
  --ruim:        #E2726F;
  --ruim-fraco:  #2C1718;
  /* O marinho do logo é escuro demais para fundo escuro: aqui ele clareia
     o suficiente para continuar legível sem deixar de ser azul. */
  --marinho:     #9fb4d0;
  /* Mesmo motivo do marinho: o azul do logo some no fundo escuro. */
  --mad:         #9fb4d0;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.3);
}

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

html, body { margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: var(--papel);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.45;
  /* O app trava o zoom por pinça de propósito: no meio da contagem,
     um toque de dois dedos acidental deixava a tela ilegível e o
     representante perdia tempo consertando. */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  /* Espaço para a barra de abas fixa (58px) MAIS o rodapé de três
     linhas com a assinatura da MAD. Apertado demais, a última linha
     do rodapé fica debaixo das abas. */
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
}

h1, h2, h3 { margin: 0; }
.oculto { display: none !important; }

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

.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: var(--teal);
  color: #fff;
}
.topo-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topo-marca strong { display: block; font-size: 17px; line-height: 1.15; }
.topo-marca small { display: block; font-size: 11.5px; opacity: .85; }

/* A logo do cliente. Altura travada: o cliente manda o arquivo que a
   agência entregou, e uma imagem alta empurraria o cabeçalho inteiro
   para baixo em todas as telas. */
.logo-cliente {
  height: 42px; width: auto; max-width: 132px;
  border-radius: 5px; background: #fff; padding: 3px;
  object-fit: contain;
}
.topo-acoes { display: flex; align-items: center; gap: 6px; }

.icone {
  min-width: 40px; height: 40px;
  border: 0; border-radius: 10px;
  background: rgba(255,255,255,.16);
  color: #fff; font-size: 17px; cursor: pointer;
}
.icone:active { background: rgba(255,255,255,.3); }

.sinal { font-size: 26px; line-height: 1; color: #F3B0AC; }
.sinal.ligado { color: #9BE8B4; }

/* ---------- telas ---------- */

.tela { padding: 14px; max-width: 900px; margin: 0 auto; }

.secao {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta3); margin: 22px 0 8px;
}

.dica {
  font-size: 13px; color: var(--tinta2);
  background: var(--superficie2);
  border-left: 3px solid var(--teal);
  padding: 9px 12px; border-radius: 0 8px 8px 0;
  margin: 0 0 14px;
}

.vazio { color: var(--tinta3); text-align: center; padding: 40px 20px; }

/* ---------- botões ---------- */

.botao {
  min-height: var(--toque);
  padding: 0 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--tinta);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.botao:active { transform: translateY(1px); }
.botao.primario { background: var(--teal); border-color: var(--teal); color: #fff; }
.botao.secundario { background: var(--superficie2); }
.botao.grande { flex: 1; min-height: 56px; font-size: 16px; }
.botao.largo { width: 100%; }
.botao[disabled] { opacity: .5; pointer-events: none; }

/* ---------- busca ---------- */

.barra-busca { display: flex; gap: 8px; margin-bottom: 12px; }

.campo, input[type="search"], input[type="text"], select {
  flex: 1; min-height: var(--toque);
  padding: 0 14px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie); color: var(--tinta);
  /* 16px é o mínimo: abaixo disso o Safari do iPhone dá zoom
     automático ao focar o campo e desalinha a tela inteira. */
  font-size: 16px;
  font-family: inherit;
}
.campo:focus, input:focus, select:focus {
  outline: 2px solid var(--teal); outline-offset: 1px;
}

/* ---------- escolha de nível de acesso ---------- */

/* O que cada nível permite é a dúvida de quem cadastra: a descrição fica
   DENTRO da opção, e não num manual que ninguém abre. */
.opcao-papel {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; margin-bottom: 8px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie); cursor: pointer;
}
.opcao-papel:has(input:checked) { border-color: var(--teal); background: var(--teal-fraco); }
.opcao-papel input { width: 20px; height: 20px; accent-color: var(--teal); margin-top: 2px; }
.opcao-papel strong { display: block; font-size: 15px; }
.opcao-papel small { display: block; font-size: 12.5px; color: var(--tinta3); margin-top: 2px; }

/* ---------- filtro de fabricante ---------- */

/* Caixa de seleção de verdade, e não chip: marca é filtro CUMULATIVO
   (quero as duas, ou só uma), e a caixa diz isso sem ninguém explicar.
   O alvo é o rótulo inteiro, não o quadradinho de 16px. */
/* A MARCA EM CARTÃO, COM A LOGOMARCA (05/10/2026). Era uma pílula com
   o nome escrito; virou cartão porque a marca se reconhece pela imagem
   antes de se ler o nome — e porque o alvo de toque de uma pílula de
   40px é pequeno para quem está de pé com o leitor na mão. A caixa de
   seleção continua existindo de verdade (não é desenho): é ela que o
   teclado e o leitor de tela encontram. */
/* Mesma grade dos cartões de documento: cartão é cartão em todo o app. */
.marcas {
  display: grid; gap: 14px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.marca-cartao { cursor: pointer; }
.marca-cartao .tema-topo { gap: 12px; }
/* Marca escolhida se anuncia pela borda, como a visita em andamento no
   início — e não por uma cor de fundo diferente a cada tela. */
.marca-cartao:has(input:checked) { border: 2px solid var(--teal); }
.marca-cartao:has(input:checked) .tema-topo { padding: 15px; }
.marcas input { width: 20px; height: 20px; accent-color: var(--teal); margin: 0; flex: 0 0 auto; }
.marca-logo {
  flex: 0 0 auto; width: 104px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.marca-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.marca-logo .marca-mono { display: none; }
/* Sem arquivo de logo, a inicial no lugar — o cartão não encolhe, para
   que a fileira não dance quando uma marca ganhar logomarca. */
.marca-logo.sem-logo { width: 44px; }
.marca-logo.sem-logo img { display: none; }
.marca-logo.sem-logo .marca-mono {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--superficie2); color: var(--tinta2);
  font-weight: 800; font-size: 19px;
}

/* ---------- listas ---------- */

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.lista li {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  min-height: var(--toque);
}
.lista.compacta li { padding: 9px 12px; gap: 10px; }
.lista li .corpo { flex: 1; min-width: 0; }
.lista li .titulo { font-weight: 600; font-size: 15px; }
.lista li .sub {
  font-size: 12.5px; color: var(--tinta3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lista li .qtd {
  font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 44px; text-align: right;
}
.lista li.clicavel { cursor: pointer; }
.lista li.clicavel:active { background: var(--superficie2); }

/* ---------- início: cartões por tema ---------- */

/* PADRÃO DO TOM MAIOR, trazido em 19/09/2026.

   Lá, os cartões do Início traziam uma lista de atalhos por baixo do
   título. Foi removida em 08/08/2026 depois de medida: cada item tinha
   35px de altura contra os 44px de alvo mínimo daquele projeto — 20%
   abaixo do padrão da casa, e catorze alvos ruins numa tela só. O
   cartão INTEIRO virou o alvo.

   Aqui o mínimo é ainda maior (--toque: 48px, porque a tela é operada
   de pé, com uma mão no leitor), e o cartão passa de 70px.

   NÃO recriar botões dentro do cartão. O que se perde — saber o que há
   lá dentro — volta na linha de descrição, que ENUMERA o conteúdo em
   vez de descrevê-lo por alto. */
.inicio-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.tema {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden;
  display: flex; flex-direction: column;
}
/* A visita em andamento se anuncia: o representante abre o app no meio
   da contagem e precisa voltar ao ponto sem procurar. */
.tema.ativo { border: 2px solid var(--teal); }
.tema-topo {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 72px; padding: 16px;
  border: 0; cursor: pointer; text-align: left;
  background: transparent; color: inherit; font: inherit;
}
.tema-topo:active { background: var(--teal-fraco); }
.tema-icone { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
.tema-txt { display: flex; flex-direction: column; min-width: 0; }
.tema-txt b { font-size: 1.05rem; }
.tema-txt small {
  color: var(--tinta3); font-size: .78rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Número no Início é o que faz alguém abrir. Só para PENDÊNCIA: nota
   sem itens, código lido fora do catálogo, fila que não subiu. */
.tema-badge {
  display: inline-block; min-width: 20px; text-align: center;
  padding: 1px 6px; border-radius: 999px; margin-left: 4px;
  background: var(--ruim); color: #fff;
  font-size: .72rem; font-weight: 800; vertical-align: middle;
}

/* ---------- contagem ---------- */

.contagem-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.loja-atual strong { display: block; font-size: 16px; }
.loja-atual small { color: var(--tinta3); font-size: 12px; }

.placar { display: flex; gap: 16px; }
.placar div { text-align: right; }
.placar span {
  display: block; font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.placar small { font-size: 10.5px; text-transform: uppercase; color: var(--tinta3); letter-spacing: .06em; }

.cartao-produto {
  background: var(--superficie);
  border: 2px solid var(--teal);
  border-radius: var(--raio);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--sombra);
  min-height: 132px;
  display: flex; align-items: center;
}
.cartao-produto.vazio { border-style: dashed; border-color: var(--linha); justify-content: center; }
.cartao-espera { color: var(--tinta3); margin: 0; }

.cartao-produto .info { flex: 1; min-width: 0; }
.cartao-produto .desc { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.cartao-produto .cod {
  font-family: Consolas, ui-monospace, monospace;
  font-size: 12px; color: var(--tinta3); margin-top: 3px;
}
.etiquetas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.etiqueta {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--superficie2); color: var(--tinta2);
}
.etiqueta.forte { background: var(--teal-fraco); color: var(--teal); font-weight: 600; }

.cartao-produto .contador { text-align: center; padding-left: 14px; }
.cartao-produto .contador b {
  display: block; font-size: 52px; line-height: .95; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--teal);
}
.cartao-produto .contador small {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta3);
}

.acoes-contagem { display: flex; gap: 8px; margin-bottom: 12px; }

.rodape-acoes {
  display: flex; gap: 8px; margin-top: 20px;
  padding-top: 14px; border-top: 1px solid var(--linha);
}
.rodape-acoes .botao { flex: 1; }

/* ---------- avisos ---------- */

.aviso {
  border-radius: var(--raio); padding: 12px 14px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--superficie2); border: 1px solid var(--linha);
  font-size: 14px;
}
.aviso.destaque { background: var(--teal-fraco); border-color: var(--teal); }
.aviso.alerta { background: var(--atencao-fraco); border-color: var(--atencao); display: block; }
.aviso.erro { background: var(--ruim-fraco); border-color: var(--ruim); display: block; }
.aviso strong { display: block; }
.aviso span { font-size: 13px; color: var(--tinta2); }

/* ---------- tabelas ---------- */

.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.dados, table.grade { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.dados th, table.grade th {
  background: var(--superficie2); color: var(--tinta3);
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  text-align: left; padding: 8px 10px; white-space: nowrap;
  position: sticky; top: 0;
}
table.dados td { padding: 9px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
table.dados .num, table.grade .num { text-align: right; font-variant-numeric: tabular-nums; }
table.dados tr.ruptura td { background: var(--ruim-fraco); }

table.grade td {
  padding: 8px 10px; border: 1px solid var(--linha);
  text-align: center; font-variant-numeric: tabular-nums;
  min-width: 56px;
}
table.grade td.zero { background: var(--ruim-fraco); color: var(--ruim); font-weight: 700; }
table.grade td.tem { background: var(--bom-fraco); color: var(--bom); font-weight: 700; }
table.grade td.nao-existe { background: var(--superficie2); color: var(--tinta3); }
table.grade th.rotulo { text-align: left; position: static; }
/* Tamanho centralizado sobre a coluna: os números das células são
   centralizados, e o cabeçalho à direita parecia de outra coluna. */
table.grade thead th.num { text-align: center; }

/* Escolha de linhas e modelos do talão. Chip em vez de lista com
   caixinha: o dedo acerta o alvo inteiro, e a escolha fica visível de
   longe — quem gera o talão está com o cliente esperando. */
.escolhas {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 168px; overflow-y: auto; padding: 4px 0 10px;
}
.escolhas .chip {
  border: 1px solid var(--linha); background: var(--superficie);
  color: var(--tinta); border-radius: 999px; padding: 5px 12px;
  font-size: 13px; cursor: pointer;
}
.escolhas .chip.ligado { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.escolhas .nada { color: var(--tinta3); font-size: 13px; padding: 4px 0; }
/* Célula com mais de um produto (catálogo sem o atributo que os separa):
   um número por produto, cada um com a própria cor de situação. */
table.grade td.multipla { padding: 4px; text-align: left; }
table.grade td.multipla div { padding: 2px 6px; border-radius: 4px; white-space: nowrap; font-weight: 700; }
table.grade td.multipla div + div { margin-top: 3px; }
table.grade td.multipla div.tem { background: var(--bom-fraco); color: var(--bom); }
table.grade td.multipla div.zero { background: var(--ruim-fraco); color: var(--ruim); }
table.grade td.multipla small { font-weight: 400; font-size: 11px; }

.resumo-cartoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.resumo-cartoes .cartao {
  flex: 1; min-width: 108px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-left: 3px solid var(--teal);
  border-radius: 8px; padding: 10px 12px;
}
.resumo-cartoes .cartao span {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta3);
}
.resumo-cartoes .cartao strong { font-size: 21px; font-variant-numeric: tabular-nums; }

.acoes-entrega { display: flex; flex-wrap: wrap; gap: 8px; }
.acoes-entrega .botao { flex: 1; min-width: 140px; }

/* ---------- abas ---------- */

.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex;
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom);
}
.aba {
  flex: 1; min-height: 58px;
  border: 0; background: none; color: var(--tinta3);
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  border-top: 3px solid transparent;
}
.aba.ativa { color: var(--teal); border-top-color: var(--teal); background: var(--teal-fraco); }

/* ---------- modais ---------- */

.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(9,14,20,.86);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}

.camera-caixa { width: 100%; max-width: 520px; position: relative; }
#video {
  width: 100%; border-radius: var(--raio); background: #000;
  aspect-ratio: 3 / 4; object-fit: cover;
}
.mira {
  position: absolute; left: 8%; right: 8%; top: 38%; height: 22%;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.22);
  pointer-events: none;
}
.camera-acoes { display: flex; gap: 8px; margin-top: 12px; }
.camera-acoes .botao { flex: 1; }
.camera-aviso { color: #fff; font-size: 13px; text-align: center; margin: 10px 0 0; }

.teclado-caixa {
  width: 100%; max-width: 340px;
  background: var(--superficie); border-radius: 16px; padding: 16px;
}
.teclado-titulo { margin: 0 0 8px; font-weight: 600; }
.teclado-visor {
  display: block; min-height: 52px;
  background: var(--superficie2); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 12px;
  font-family: Consolas, ui-monospace, monospace; font-size: 22px;
  letter-spacing: .04em; word-break: break-all;
}
.teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.tecla {
  min-height: 58px;
  border: 1px solid var(--linha); border-radius: 10px;
  background: var(--superficie2); color: var(--tinta);
  font-size: 22px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
.tecla:active { background: var(--teal-fraco); }
.tecla.confirmar { background: var(--teal); border-color: var(--teal); color: #fff; font-size: 17px; }
.tecla.apagar { font-size: 20px; }

/* ---------- formulário em modal ---------- */

.formulario {
  width: 100%; max-width: 480px; max-height: 92vh;
  background: var(--superficie); border-radius: 16px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.formulario-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--linha);
}
.formulario-topo h2 { font-size: 18px; }
.icone.escuro { background: var(--superficie2); color: var(--tinta); }

/* O corpo rola sozinho: no celular deitado, ou com o teclado aberto,
   um formulário sem rolagem própria esconde o botão de salvar e a
   pessoa acha que o cadastro travou. */
.formulario-corpo { padding: 16px 18px; overflow-y: auto; flex: 1; }

.formulario-acoes {
  display: flex; gap: 8px; padding: 14px 18px;
  border-top: 1px solid var(--linha); background: var(--superficie2);
}
.formulario-acoes .botao { flex: 1; }

.formulario.estreito { max-width: 400px; }

.pergunta-texto { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tinta2); }
.pergunta-texto b { color: var(--tinta); }
.pergunta-texto + #perguntaCampoBloco { margin-top: 4px; }

/* Escolha entre dois caminhos: cada opção é um botão alto com título e
   explicação. Melhor que "OK / Cancelar", onde a pessoa precisa ler o
   enunciado para descobrir o que cada botão faz. */
.opcoes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.opcao {
  text-align: left; padding: 12px 14px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie); color: var(--tinta);
  font-family: inherit; font-size: 15px; cursor: pointer;
  min-height: var(--toque);
}
.opcao:hover { border-color: var(--teal); background: var(--teal-fraco); }
.opcao strong { display: block; font-weight: 600; }
.opcao span { display: block; font-size: 12.5px; color: var(--tinta3); margin-top: 2px; }

.campo-rotulo {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--tinta2); margin: 14px 0 5px;
}
.campo-rotulo b { color: var(--ruim); }
.campo.largo { width: 100%; }
textarea.campo { min-height: 62px; padding: 10px 14px; line-height: 1.4; resize: vertical; }

.ajuda { font-size: 12px; color: var(--tinta3); margin: 6px 0 0; }

.linha-check {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; min-height: var(--toque);
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.linha-check input { width: 22px; height: 22px; accent-color: var(--teal); }

/* ---------- filtros ---------- */

.filtros { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; }
.filtro {
  flex: 0 0 auto; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--superficie); color: var(--tinta2);
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  white-space: nowrap;
}
.filtro.ativo { background: var(--teal); border-color: var(--teal); color: #fff; }

/* Produto inativo continua visível na lista de manutenção, mas
   apagado: quem procura um item para editar precisa distinguir de
   relance o que está em linha do que saiu. */
.lista li.inativo .titulo,
.lista li.inativo .sub { opacity: .5; }
.lista li.inativo .titulo { text-decoration: line-through; }

.acoes-linha { display: flex; gap: 6px; flex-shrink: 0; }
.acoes-linha .botao { min-height: 38px; padding: 0 12px; font-size: 13px; }

/* ---------- cartão de alerta ----------
   Mais forte que o aviso comum: tem símbolo, borda inteira e fica na
   tela até alguém resolver. É para o que exige uma decisão, não para o
   que só precisa ser lido. */

.cartao-alerta {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--atencao-fraco);
  border: 2px solid var(--atencao);
  border-radius: var(--raio);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.cartao-alerta .sinal-alerta {
  width: 34px; height: 34px; flex-shrink: 0; margin-top: 1px;
}
.cartao-alerta .sinal-alerta path { fill: var(--atencao); }
.cartao-alerta .sinal-alerta .haste,
.cartao-alerta .sinal-alerta .ponto { fill: var(--atencao-fraco); }
.cartao-alerta .corpo { flex: 1; min-width: 0; }
.cartao-alerta strong { display: block; font-size: 15.5px; color: var(--atencao); }
.cartao-alerta p { margin: 4px 0 0; font-size: 13.5px; color: var(--tinta2); }
.cartao-alerta code {
  font-family: Consolas, ui-monospace, monospace;
  background: var(--superficie); border-color: var(--atencao);
}

@media (max-width: 560px) {
  /* No celular as ações descem para baixo do texto: lado a lado, os
     dois botões espremem a mensagem a ponto de ela não ser lida. */
  .cartao-alerta { flex-wrap: wrap; }
  .cartao-alerta .acoes-linha { width: 100%; }
  .cartao-alerta .acoes-linha .botao { flex: 1; min-height: var(--toque); }
}

.linha-dupla { display: flex; gap: 8px; }
.linha-dupla > div { flex: 1; min-width: 0; }
.linha-dupla > div.curto { flex: 0 0 84px; }
/* O CEP não cabe em 84px: 00000-000 são nove caracteres. */
.linha-dupla > div.curto.cep { flex: 0 0 116px; }

/* ---------- ficha da loja ---------- */

.ficha-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.ficha-topo h2 { font-size: 20px; line-height: 1.2; }
.ficha-topo .sub { margin: 4px 0 0; font-size: 13px; color: var(--tinta3); }

.lista li .selo {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: var(--superficie2); color: var(--tinta3); white-space: nowrap;
}
.lista li .selo.pendente { background: var(--atencao-fraco); color: var(--atencao); }
.lista li .selo.ok { background: var(--bom-fraco); color: var(--bom); }

/* Variação entre contagens: verde é venda (estoque caiu), vermelho é
   estoque parado ou subindo. A cor diz mais rápido que o número. */
.variacao { font-variant-numeric: tabular-nums; font-size: 13px; }
.variacao.caiu { color: var(--bom); }
.variacao.subiu { color: var(--ruim); }
.variacao.igual { color: var(--tinta3); }

/* ---------- flash de leitura ----------
   Cobre a tela inteira por 180ms. Parece exagero numa mesa; numa
   loja, com o representante olhando para a prateleira e não para o
   tablet, é o que confirma a leitura pela visão periférica. */

.flash {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none; opacity: 0;
  background: var(--teal);
}
.flash.mostrar { animation: piscar .18s ease-out; }
.flash.erro { background: var(--ruim); }
.flash.atencao { background: var(--atencao); }

@keyframes piscar {
  0% { opacity: .42; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flash.mostrar { animation-duration: .01s; }
  .botao:active { transform: none; }
}

/* ---------- recado ---------- */

.recado {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 80;
  background: var(--tinta); color: var(--papel);
  padding: 11px 18px; border-radius: 999px;
  font-size: 14px; max-width: 90vw; text-align: center;
  box-shadow: var(--sombra);
}
.recado.erro { background: var(--ruim); color: #fff; }

/* Com um formulário aberto, o aviso sobe. Embaixo ele cobria os
   botões "Cancelar / Salvar" — escondia justamente o que a pessoa ia
   clicar em seguida. Onde :has() não existir, o aviso só continua
   embaixo: some sozinho em 3 segundos e nada quebra. */
body:has(.modal:not(.oculto)) .recado {
  bottom: auto;
  top: 16px;
}

/* ---------- diagnóstico e chamado ---------- */

/* Rótulo à esquerda, número à direita: a leitura é sempre a mesma, e
   quem confere corre o olho pela coluna dos valores. */
.di-lista { margin-bottom: 14px; }
.di-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--linha);
  font-size: 13.5px;
}
.di-row b { font-variant-numeric: tabular-nums; text-align: right; }
.texto-chamado {
  white-space: pre-wrap; word-break: break-word;
  background: var(--superficie2); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 10px 12px; font-size: 12px;
  max-height: 260px; overflow: auto;
}
textarea.campo { min-height: 110px; padding: 10px 14px; line-height: 1.45; resize: vertical; }

/* ---------- saudação do início ---------- */

.ola { font-size: 20px; margin-bottom: 6px; }

/* ---------- barra de voltar ---------- */

/* Fica acima do conteúdo, e não no fim: numa tela de 1.600 produtos,
   botão de voltar no rodapé exige rolar a lista inteira para sair. */
.barra-voltar {
  display: flex; gap: 8px;
  max-width: 900px; margin: 0 auto; padding: 10px 14px 0;
}
.barra-voltar .botao { min-height: 42px; padding: 0 14px; font-size: 14px; }

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

.rodape {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; font-size: 11.5px; color: var(--tinta3);
  padding: 20px 14px 8px;
}
.rodape .rod-produto { opacity: .85; }
/* A linha do meio é a que se lê no suporte: cliente, versão e build.
   Por isso é a única em negrito e com tinta mais forte. */
.rodape .rod-cliente { font-weight: 700; font-size: 12.5px; color: var(--teal); }
.rodape .credito { font-size: 11px; }
.rodape .credito b { color: var(--mad); }
.rodape .credito { display: inline-flex; align-items: center; gap: 6px; }
/* O MONOGRAMA, como no BATUTA (David, 05/10/2026): sem o quadrado, a
   assinatura fica mais leve. No tema escuro o mesmo arquivo serve:
   brightness(0) leva o opaco a preto e invert(1) o devolve branco,
   preservando o alfa das bordas. */
.rodape .cred-marca { height: 16px; width: auto; flex: none; }
:root[data-tema="escuro"] .rodape .cred-marca { filter: brightness(0) invert(1); }

/* ---------- telas largas ----------
   No notebook do escritório o app não pode virar uma coluna estreita
   no meio da tela: quem confere contagem grande precisa de linha
   larga para ler descrição sem cortar. */

/* ============================================================
   TELA LARGA — tablet deitado, notebook, PC de mesa

   A navegação SOBE para o topo. Barra de abas no rodapé é padrão de
   celular, onde ela existe por um motivo físico: é onde o polegar
   alcança. Num notebook não há polegar — há cursor, e o cursor não
   tem alcance limitado. Deixada embaixo, ela fica solta no fim de uma
   tela quase vazia, longe de tudo, e o app parece quebrado.

   A troca é de posição, não de código: o mesmo <nav> muda de lugar
   pela ordem do flex.
   ============================================================ */
@media (min-width: 760px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Sem a barra fixa embaixo, a folga do rodapé deixa de ser
       necessária — ela só existia para o conteúdo não sumir atrás. */
    padding-bottom: 0;
  }

  header.topo { order: 1; }
  .abas { order: 2; }
  /* A barra de voltar entra entre as abas e o conteúdo. Sem ordem
     explícita ela cairia ANTES do cabeçalho: neste layout a posição vem
     do flex, não da ordem no HTML. */
  .barra-voltar { order: 3; width: 100%; }
  main#telas { order: 4; flex: 1; width: 100%; }
  footer.rodape { order: 5; }

  /* A barra ocupa a largura inteira e só os BOTÕES ficam centrados.
     Limitar a barra a 900px deixava a linha de baixo terminando no
     meio da tela, como se o desenho tivesse sido cortado. */
  .abas {
    position: static;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 0 20px;
    background: var(--superficie);
    border-top: 0;
    border-bottom: 1px solid var(--linha);
  }
  .aba {
    flex: 0 0 auto;
    min-width: 132px;
    min-height: 48px;
    border-top: 0;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
  }
  .aba.ativa {
    border-top-color: transparent;
    border-bottom-color: var(--teal);
  }

  .tela { padding: 24px 20px 40px; }
  .cartao-produto .contador b { font-size: 62px; }

  /* O aviso sobe para o topo. Embaixo ele caía em cima do rodapé e,
     pior, em cima dos botões "Cancelar / Salvar" do formulário de
     loja — escondendo justamente o que a pessoa ia clicar. */
  .recado { bottom: auto; top: 84px; }

  /* Formulário de loja e teclado ficam presos ao topo da janela, não
     centralizados: num monitor alto, um modal no meio vertical obriga
     a pessoa a procurar onde a tela mudou. */
  .modal { align-items: flex-start; padding-top: 6vh; }
}

/* Etiqueta de alerta no card de contagem: item fora de linha. Ele é
   contado normalmente — a peça está na prateleira —, mas o
   representante precisa ver isso antes de sugerir a compra dele. */
.etiqueta.alerta {
  background: var(--atencao-fraco);
  color: var(--atencao);
  font-weight: 700;
}

/* Botão de ação destrutiva. A cor é o último aviso antes do clique —
   encerrar visita e substituir base não têm volta. */
.botao.primario.perigo { background: var(--ruim); border-color: var(--ruim); }

/* ============================================================
   BLOCOS, FILTROS, INDICADORES E AUDITORIA EM TABELA

   Padrão trazido do BATUTA em 05/10/2026, a pedido do David: as telas
   de Auditoria, Ajuda e Desenvolvedor dos dois apps são atendidas pela
   mesma pessoa, e ler a mesma forma nos dois poupa a pergunta "onde
   fica aquilo aqui?".
   ============================================================ */

/* O "card" do BATUTA. Aqui chama bloco para não disputar com
   .cartao-produto e .resumo-cartoes, que já existem e são outra coisa. */
.bloco {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.bloco-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.bloco-topo h3 { margin: 0; font-size: 16px; color: var(--tinta); }
.bloco .dica:last-child { margin-bottom: 0; }

/* Duas colunas onde cabem; uma só no tablet em pé. */
.grade-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 860px) { .grade-2 { grid-template-columns: 1fr 1fr; } }
.grade-2 > .bloco { margin-bottom: 0; }

/* Faixa do modo desenvolvedor: a borda amarela à esquerda é o aviso de
   que esta tela não é do cliente. */
.dev-hero {
  border-left: 4px solid var(--atencao);
  background: var(--atencao-fraco);
}
.dev-hero h3 { font-size: 17px; }
/* O nome da MAD sai na cor da logomarca, aqui e em qualquer outro
   lugar: era vermelho de alerta nesta faixa, o que fazia o cartão
   parecer aviso de erro. */
.dev-hero h3 span { color: var(--mad); }

/* Para o nome escrito no meio de um texto corrido. */
.mad { color: var(--mad); font-weight: 700; }
:root[data-tema="escuro"] .mad { color: var(--mad); }

/* Linha de filtros: rótulo em cima do campo, tudo na mesma linha
   enquanto couber. O botão desce junto, alinhado pela base. */
.filtros {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-bottom: 12px;
}
.filtro-campo { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.filtro-campo.cresce { flex: 1; min-width: 200px; }
.filtro-campo .campo-rotulo { margin: 0; }
.filtros .botao { min-height: 48px; }
.campo.estreito { max-width: 230px; }

/* Indicadores. Número grande e rótulo pequeno: a tela é lida de
   relance, de pé, como todo o resto do app. */
/* COLUNAS FIXAS, NÃO auto-fit. Com seis indicadores, o auto-fit abria
   cinco colunas na largura do notebook e deixava o sexto sozinho,
   colado no texto de baixo — o David viu e disse que ficou feio. Três
   colunas fecham duas linhas cheias; duas colunas no tablet em pé. */
.kpi-grade {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px) { .kpi-grade { grid-template-columns: repeat(3, 1fr); } }

/* Cartões de ação dentro de uma tela: mesmo desenho e mesmo alvo do
   início, para que a mão aprenda um gesto só no app inteiro. */
.acoes-grid {
  display: grid; gap: 14px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.kpi {
  background: var(--superficie2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.kpi span { font-size: 12px; color: var(--tinta3); text-transform: uppercase; letter-spacing: .3px; }
.kpi strong { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--tinta); }
.kpi small { font-size: 12px; color: var(--tinta3); }

/* Auditoria: a etiqueta da coluna ONDE. Cor só para separar as partes
   do app de relance — nenhuma delas é melhor ou pior que a outra. */
.tag-ent {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  background: var(--superficie2); color: var(--tinta2);
}
.tag-ent.ent-contagem { background: var(--teal-fraco); color: var(--teal-forte); }
.tag-ent.ent-clientes { background: var(--bom-fraco); color: var(--bom); }
.tag-ent.ent-catalogo { background: var(--atencao-fraco); color: var(--atencao); }
.tag-ent.ent-equipe   { background: #E8E6F5; color: #4A3F8F; }
.tag-ent.ent-suporte  { background: var(--ruim-fraco); color: var(--ruim); }

table.dados.auditoria td { font-size: 13px; }
table.dados.auditoria .quando { white-space: nowrap; color: var(--tinta2); }

/* O usuário de suporte da MAD aparece sem botões: ele não se edita nem
   se inativa (ver usuarios.js). A palavra é a mesma do BATUTA. */
.selo-protegido {
  color: var(--tinta3); font-size: 12.5px; font-style: italic;
  padding: 0 6px; white-space: nowrap;
}

/* DIAS SEM VISITA. É o número que decide a quem ligar, então ele tem o
   tamanho de um número, e não o da linha de legenda em que morava. */
.dias-selo {
  margin-left: auto; flex: 0 0 auto; text-align: center;
  display: flex; flex-direction: column; line-height: 1.05;
  font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--atencao);
}
.dias-selo small {
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--tinta3);
}
/* Nunca contado não é "muitos dias": é outra situação, e some num
   número grande. Fica vermelho e sem contagem. */
.dias-selo.nunca { color: var(--ruim); }

/* O select da contagem encostava na caixa de texto logo abaixo (David,
   05/10/2026). Campo largo dentro de um bloco ganha respiro embaixo —
   e o mesmo vale para a linha de filtros que vem antes dele. */
.bloco .campo.largo { margin-bottom: 12px; }
.bloco .filtros { margin-bottom: 14px; }

/* CAMPO DE ARQUIVO (print do chamado). O botão nativo do navegador não
   tem respiro nenhum: encostava na borda da caixa, como se estivesse
   fora do lugar (David, 05/10/2026). Aqui ele ganha a mesma altura e o
   mesmo desenho dos botões secundários do app. */
input[type="file"].campo {
  padding: 10px 12px; line-height: 1.8; font-size: 14px;
  color: var(--tinta2);
}
input[type="file"].campo::file-selector-button {
  margin-right: 12px; padding: 0 16px; min-height: 40px;
  border: 1px solid var(--linha); border-radius: 8px;
  background: var(--superficie2); color: var(--tinta);
  font: inherit; font-weight: 700; cursor: pointer;
}
input[type="file"].campo::file-selector-button:hover {
  background: var(--teal-fraco); border-color: var(--teal); color: var(--teal-forte);
}

/* Cabeçalho da listagem: a marca escolhida continua à vista, com o
   caminho de volta ao lado. Sem ele, quem entrou pela Theramart e
   procurou um produto da Sigvaris concluiria que ele sumiu. */
.marca-atual {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 10px 14px; margin-bottom: 12px;
}
.marca-atual-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.marca-atual-txt b { font-size: 15px; }
.marca-atual-txt small { font-size: 12px; color: var(--tinta3); }
.marca-atual .botao { margin-left: auto; }

/* ---------- PORTÃO DE ACESSO (padrão BATUTA) ----------
   Cobre o app inteiro: enquanto ninguém entrou, não há tela por trás
   para tocar sem querer. Em cima do cabeçalho também, de propósito —
   o botão de tema e o de sair não servem a quem não entrou. */
.gate {
  position: fixed; inset: 0; z-index: 60;
  background: var(--papel);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh 20px 24px; overflow-y: auto;
}
.gate-box {
  width: 100%; max-width: 400px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 26px 24px 20px; text-align: center;
}
.gate-logo { display: block; max-height: 60px; max-width: 72%; margin: 0 auto 18px; }
.gate-box h2 { margin: 0 0 6px; font-size: 20px; }
.gate-box .dica { text-align: left; }
.gate-box .campo { margin-bottom: 10px; text-align: left; }
.gate-box .botao { margin-top: 4px; }
.gate-box #gateEsqueci { margin-top: 8px; background: transparent; border: 0; color: var(--teal); }
.gate-marca {
  margin: 18px 0 0; font-size: 11.5px; color: var(--tinta3);
  letter-spacing: .03em;
}
#loginErro:not(:empty) { margin: 2px 0 10px; text-align: left; }

/* Quem está logado, no cabeçalho. Discreto: é conferência, não
   anúncio — mas tem de ser lido sem abrir menu nenhum. */
.user-chip {
  color: #fff; font-size: 12.5px; font-weight: 600; opacity: .92;
  max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 420px) { .user-chip { max-width: 26vw; font-size: 12px; } }