/* Naturvida Interno — folha única.
 *
 * Duas regras que valem o arquivo inteiro:
 *
 * 1. Celular ganha barra INFERIOR, desktop ganha barra LATERAL. Mesmo HTML,
 *    trocado por media query, sem JavaScript. Navegação escondida atrás de
 *    ícone de três traços custa mais de 20% de descoberta, segundo a medição
 *    da Nielsen Norman, e aqui cabem cinco módulos.
 *
 * 2. Alvo de toque nunca abaixo de 44px. É celular de loja, usado em pé, com
 *    pressa e às vezes com a mão molhada.
 */

:root {
  --verde: #00AB46;
  --verde-texto: #007A32;
  --escuro: #05351C;
  --profundo: #04240F;
  --creme: #F6F8F1;
  --branco: #fff;
  --tinta: #16261A;
  --suave: #55665A;
  --borda: rgba(5, 53, 28, .12);
  --alerta: #B3261E;
  --atencao: #A66300;
  --raio: 14px;
  --sombra: 0 1px 3px rgba(5, 53, 28, .08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--verde-texto); }

/* ============================================================ estrutura */
.app { min-height: 100dvh; }
@supports not (min-height: 100dvh) { .app { min-height: 100vh; } }

.lateral { display: none; }

.corpo { display: flex; flex-direction: column; min-height: 100dvh; }

.topo {
  position: sticky; top: 0; z-index: 21;   /* sempre acima da barra de filtros */
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem;
  background: var(--escuro); color: #fff;
}
.topo h1 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.quem { display: flex; align-items: center; gap: .5rem; font-size: .82rem; }
.quem span { color: rgba(255, 255, 255, .82); }
.quem a { color: #fff; text-decoration: underline; text-underline-offset: .18em; }

.conteudo {
  flex: 1;
  padding: 1rem;
  /* espaço da barra inferior + área segura do iPhone: sem isto o último
     cartão fica embaixo do indicador de home e ninguém consegue tocar */
  padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
}

/* ==================================================== barra do celular */
.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex;
  background: var(--branco);
  border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.barra-inferior a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem;
  min-height: 56px;
  padding: .45rem .2rem;
  font-size: .68rem;
  color: var(--suave);
  text-decoration: none;
}
.barra-inferior a.ativo { color: var(--verde-texto); font-weight: 700; }
.barra-inferior svg { width: 22px; height: 22px; }

/* ======================================================= desktop */
@media (min-width: 768px) {
  .app { display: grid; grid-template-columns: 232px 1fr; }
  .barra-inferior { display: none; }
  .conteudo { padding: 1.5rem 2rem; padding-bottom: 3rem; max-width: 1180px; }

  /* TRÊS FAIXAS numa coluna de altura fixa (Fábio, 29/07/2026 à noite: "quando
   * exceder, deixa perdas de itens e sugestões fixo como rodapé, e a parte de
   * cima com barra de rolagem"). A marca e o rodapé nunca encolhem; só a lista
   * de módulos do meio rola. O `overflow: hidden` aqui é o que impede a COLUNA
   * de rolar junto — sem ele, a página inteira ganhava barra e o rodapé subia
   * junto com o scroll, que é o problema que ele viu com 18 itens no menu. */
  .lateral {
    display: flex; flex-direction: column;
    background: var(--escuro); color: #fff;
    padding: 1.1rem .7rem;
    position: sticky; top: 0; height: 100dvh;
    overflow: hidden;
  }
  .marca {
    font-weight: 800; font-size: 1.05rem; padding: .2rem .6rem 1.1rem;
    display: flex; flex-direction: column; line-height: 1.15;
    flex: 0 0 auto;            /* logo nunca encolhe nem some no scroll */
  }
  .marca span {
    font-size: .68rem; font-weight: 500; letter-spacing: .14em;
    text-transform: uppercase; color: var(--verde);
  }
  .lateral nav { display: flex; flex-direction: column; gap: .12rem; }
  /* A lista de módulos: cresce pra empurrar o rodapé pro pé quando sobra
   * espaço, e ROLA quando falta.
   *
   * `min-height: 0` é o que faz isto funcionar: por padrão um item de flex
   * não encolhe abaixo do tamanho do próprio conteúdo, então sem essa linha
   * o nav simplesmente estoura a coluna e a barra de rolagem nunca aparece.
   * É a pegadinha clássica de flexbox — não tirar. */
  .lateral nav:not(.nav-fundo) {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    /* barra fina e discreta: precisa ser visível o bastante pra sinalizar que
     * há mais coisa abaixo, sem virar elemento de interface */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .28) transparent;
    overscroll-behavior: contain;   /* rolar até o fim aqui não puxa a página */
  }
  .lateral nav:not(.nav-fundo)::-webkit-scrollbar { width: 6px; }
  .lateral nav:not(.nav-fundo)::-webkit-scrollbar-track { background: transparent; }
  .lateral nav:not(.nav-fundo)::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22); border-radius: 99px;
  }
  .lateral nav:not(.nav-fundo):hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .38);
  }
  /* RODAPÉ FIXO (Sugestões, Itens e vendas perdidas): `flex: 0 0 auto` trava a
   * altura e o `margin-top: auto` saiu de propósito — quem empurra pro pé agora
   * é o nav de cima crescendo. Com os dois, sobrava um vão a mais. */
  .lateral .nav-fundo {
    flex: 0 0 auto; padding-top: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .item {
    display: flex; align-items: center; gap: .65rem;
    padding: .62rem .6rem; border-radius: 10px;
    color: rgba(255, 255, 255, .82); text-decoration: none; font-size: .93rem;
  }
  .item svg { width: 19px; height: 19px; flex: 0 0 19px; }
  .item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  .item.ativo { background: var(--verde-texto); color: #fff; font-weight: 600; }
  .item.breve { opacity: .42; pointer-events: none; }
  .item em {
    margin-left: auto; font-style: normal; font-size: .62rem;
    text-transform: uppercase; letter-spacing: .05em;
  }
}

/* ============================================================ cartões */
.cartoes { display: grid; gap: .75rem; }
@media (min-width: 900px) { .cartoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1300px) { .cartoes { grid-template-columns: repeat(3, 1fr); } }

.cartao {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .9rem 1rem; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: .45rem;
}
.cartao h3 { margin: 0; font-size: 1rem; }
.cartao .meta { font-size: .82rem; color: var(--suave); }
.cartao .valor { font-weight: 700; font-size: 1.05rem; }

/* Ocorrência dentro do cartão de fornecedor, na aba Em cobrança (03/08/2026:
 * "1 card por fornecedor"). É um cartão aninhado dentro de outro cartão —
 * sem esta regra, ficaria caixa dentro de caixa com sombra dobrada. Vira
 * linha simples, separada só por um traço. */
.cartao-aninhado {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: .6rem 0 0; margin-top: .6rem; border-top: 1px solid var(--borda);
}

/* Rótulo por QUEM TRAVA, não pelo nome técnico do estado. "Aguardando você"
 * responde a pergunta que a pessoa faz ao abrir a tela; "confirmado_fornecedor"
 * obriga a traduzir de cabeça. */
.selo {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 700; padding: .2em .6em;
  border-radius: 999px; background: #EDF3EE; color: var(--verde-texto);
  width: fit-content;
}
.selo.voce { background: #FFF3D6; color: #8A5A00; }
.selo.parado { background: #FBE3E1; color: var(--alerta); }
.selo.pronto { background: #E6F4EA; color: var(--verde-texto); }
/* Atraso e do fornecedor; "parado" e do nosso lado. Cores proximas de proposito
 * (os dois sao problema), mas distintas, porque a acao e diferente: um voce
 * cobra por telefone, o outro voce resolve com um clique. */
.selo.atrasado { background: #7A1F1A; color: #FFF; }

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .6rem 1.1rem;
  border: 0; border-radius: 999px;
  background: var(--verde-texto); color: #fff;
  font-size: .95rem; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none;
}
.botao:hover { background: var(--verde); }
.botao.secundario {
  background: transparent; color: var(--verde-texto);
  border: 1.5px solid var(--verde-texto);
}
.botao.perigo { background: transparent; color: var(--alerta); border: 1.5px solid var(--alerta); }
.botao[disabled] { opacity: .5; cursor: default; }

.filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.filtros a {
  padding: .45rem .85rem; border-radius: 999px; font-size: .85rem;
  background: var(--branco); border: 1px solid var(--borda);
  color: var(--tinta); text-decoration: none; min-height: 38px;
  display: inline-flex; align-items: center;
}
.filtros a.ativo { background: var(--escuro); color: #fff; border-color: var(--escuro); }
.filtros a .n { opacity: .6; margin-left: .35rem; font-variant-numeric: tabular-nums; }
/* Mesma linguagem visual do menu lateral (.item.breve) — aba que anuncia algo
 * que ainda não existe, sem fingir que é clicável. */
.filtros a.breve { opacity: .5; pointer-events: none; gap: .35rem; }
.filtros a.breve em {
  font-style: normal; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
}

.vazio {
  background: var(--branco); border: 1px dashed var(--borda);
  border-radius: var(--raio); padding: 2rem 1rem; text-align: center;
  color: var(--suave); margin-bottom: 1rem;
}

/* ===================================================== lista de e-mail
 * Fábio, 04/08/2026: "podia se parecer mais com um e-mail tipo gmail e
 * outros" — o cartão empilhado (bom pra fila de trabalho) não é o formato
 * que qualquer um reconhece como caixa de entrada. Linha compacta, avatar
 * com a inicial, não lida em negrito com risca à esquerda — mesmo recurso
 * visual que "atrasado" já usa em outras telas, não cor nova. Usada em
 * app/paginas/entrada.php (compras@) e app/paginas/rh_entrada.php (rh@). */
.lista-email {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--branco); overflow: hidden;
}
.lista-email .linha-email {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .9rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--borda);
}
.lista-email .linha-email:last-child { border-bottom: 0; }
.lista-email .linha-email:hover { background: var(--creme); }
.lista-email .linha-email.nao-lida {
  border-left: 3px solid var(--verde); padding-left: calc(.9rem - 3px);
  background: #F0F7F2;
}
.lista-email .avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--verde); color: #fff; font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
/* NÃO ".corpo": essa classe já existe global (linha 50, o wrapper de página
 * inteira, min-height:100dvh) — colidiu e esticou cada linha pra altura da
 * tela inteira (achado de 04/08/2026, "super compacto" virou o oposto: uma
 * mensagem só, avatar boiando lá embaixo). Nome único evita o próximo. */
.lista-email .miolo { flex: 1; min-width: 0; display: block; }
.lista-email .linha-topo { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.lista-email .remetente { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--suave); }
.lista-email .quando { font-size: .78rem; color: var(--suave); white-space: nowrap; flex-shrink: 0; }
.lista-email .linha-assunto { display: flex; align-items: center; gap: .4rem; overflow: hidden; }
.lista-email .assunto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-email .anexo-marca { font-size: .74rem; color: var(--suave); flex-shrink: 0; }
.lista-email .extra { font-size: .78rem; color: var(--suave); margin-top: .15rem; }
.lista-email .linha-email.nao-lida .remetente,
.lista-email .linha-email.nao-lida .assunto { font-weight: 700; color: var(--tinta); }

/* ============================================================== login */
.tela-login {
  min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem;
}
.caixa-login {
  width: 100%; max-width: 22rem; background: var(--branco);
  border: 1px solid var(--borda); border-radius: 18px; padding: 1.6rem;
  box-shadow: var(--sombra);
}
.caixa-login h1 { margin: 0 0 .2rem; font-size: 1.2rem; }
.caixa-login p.sub { margin: 0 0 1.2rem; color: var(--suave); font-size: .88rem; }
label { display: block; font-size: .85rem; font-weight: 600; margin: .8rem 0 .3rem; }
input[type=email], input[type=password], input[type=text], input[type=number],
input[type=date], input[type=search], input[type=tel], input[type=file],
select, textarea {
  width: 100%; padding: .7rem .8rem; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--borda); border-radius: 11px; background: #fff; color: var(--tinta);
}
.erro {
  background: #FBE3E1; color: var(--alerta); border-radius: 10px;
  padding: .6rem .8rem; font-size: .87rem; margin-bottom: .8rem;
}
.caixa-login .botao { width: 100%; margin-top: 1.1rem; }

/* Confirmacao usa verde escuro sobre verde claro, nao verde claro sobre branco:
 * o segundo fica bonito e ilegivel, que foi exatamente o erro do nv-prosa no
 * site. Medido: 7.9:1. */
.ok {
  background: #E6F4EA; color: var(--verde-texto); border-radius: 10px;
  padding: .6rem .8rem; font-size: .87rem;
}
.formulario .botao { width: 100%; margin-top: 1.1rem; }
.dica { margin: .35rem 0 0; font-size: .8rem; color: var(--suave); }

/* ============================================================= tabela */
/* Só existe no desktop. No celular a mesma informação vira cartão: gerente não
 * navega doze mil linhas no telefone, ele procura o lançamento de ontem. E
 * tabela que rola de lado em tela de 375px é o padrão que o usuário não
 * percebe que rola. */
.tabela { display: none; }
@media (min-width: 768px) {
  .tabela { display: table; width: 100%; border-collapse: collapse; background: var(--branco); }
  .tabela th, .tabela td {
    text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--borda);
    font-size: .9rem;
  }
  .tabela th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
  .tabela tbody tr:hover { background: #FAFBF8; }
  .so-celular { display: none; }
}

/* ======================================================= visão do master */
/* <details> é o único menu que HTML puro oferece, e basta: abre, escolhe,
 * a página recarrega. */
.visao-menu { position: relative; }
.visao-menu summary {
  cursor: pointer; list-style: none; color: #fff;
  text-decoration: underline; text-underline-offset: .18em;
}
.visao-menu summary::-webkit-details-marker { display: none; }
.visao-menu > div {
  position: absolute; right: 0; top: 1.6rem; z-index: 40;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 12px; box-shadow: var(--sombra); padding: .4rem; min-width: 12rem;
}
.visao-menu form { margin: 0; }
.visao-menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: .55rem .7rem; font: inherit; font-size: .9rem; color: var(--tinta);
  border-radius: 8px; cursor: pointer;
}
.visao-menu button:hover { background: var(--creme); }

/* Faixa fixa enquanto emula: esquecer a emulação é registrar dado como quem
 * não se é. Âmbar, não vermelho: é estado, não erro. */
.faixa-visao {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: #FFF3D6; color: #6b4a00; padding: .5rem .9rem; font-size: .85rem;
  border-bottom: 1px solid rgba(166, 99, 0, .25);
}
.faixa-visao form { margin: 0; }
.faixa-visao button {
  background: none; border: 1px solid currentColor; border-radius: 999px;
  color: inherit; font-size: .8rem; padding: .1rem .6rem; cursor: pointer;
}
/* Administrador é a visão de trabalho do Fábio, não emulação de outra pessoa
 * (ele mesmo, 29/07/2026). Sem âmbar e sem "voltar ao": vira rodapé de cabeçalho,
 * discreto, com a saída ainda a um clique. */
.faixa-visao.discreta {
  justify-content: flex-end; background: none; color: var(--suave);
  padding: .3rem .9rem; font-size: .78rem;
  border-bottom: 1px solid var(--borda);
}
.faixa-visao.discreta button { opacity: .75; font-size: .74rem; }
.faixa-visao.discreta button:hover { opacity: 1; }

/* ================================================ formulário de ocorrência */
/* Linhas de item: grid, porque tabela não quebra bem em 375px. As colunas
 * mudam por tipo (baixa: código+qtd; ajuste: código+2 estoques). */
.linhas-item { display: flex; flex-direction: column; gap: .55rem; margin: .4rem 0; }
.linha-item {
  display: grid; gap: .5rem; align-items: start;
  grid-template-columns: 7.5rem 1fr;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 12px; padding: .55rem;
}
.linha-item.tres { grid-template-columns: 7rem 1fr 1fr; }
.linha-item .resolvido {
  grid-column: 1 / -1; font-size: .82rem; color: var(--verde-texto); margin: 0;
}
.linha-item .problema {
  grid-column: 1 / -1; font-size: .82rem; color: var(--alerta); margin: 0;
}
.linha-item .rotulo-mini {
  display: block; font-size: .68rem; font-weight: 600; color: var(--suave);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: .15rem;
}

/* Botões de motivo: rádio escondido, rótulo virando botão de dedo. Motivo por
 * toque é o que matou as 17 grafias de loja — mesma receita. */
.opcoes { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0; }
.opcoes label {
  display: inline-flex; align-items: center; margin: 0; padding: .55rem .85rem;
  border: 1.5px solid var(--borda); border-radius: 999px; background: var(--branco);
  font-size: .9rem; font-weight: 600; cursor: pointer; min-height: 44px;
}
.opcoes input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcoes input:checked + span { color: var(--verde-texto); }
.opcoes label:has(input:checked) {
  border-color: var(--verde); background: #E6F4EA;
}

.confirma {
  background: #FFF3D6; border: 1px solid rgba(166, 99, 0, .3); border-radius: 10px;
  padding: .55rem .8rem; font-size: .85rem; margin: .4rem 0;
}
.confirma label { display: flex; gap: .5rem; align-items: flex-start; margin: 0; font-weight: 600; }
.confirma input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; }

.foto-ok { color: var(--verde-texto); font-size: .85rem; margin: .3rem 0 0; }

/* miniaturas no detalhe */
.fotos { display: flex; gap: .6rem; flex-wrap: wrap; margin: .5rem 0; }
.fotos a { display: block; }
.fotos img {
  width: 104px; height: 104px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--borda); display: block;
}
.fotos .marca-galeria {
  display: block; font-size: .68rem; color: var(--atencao); margin-top: .15rem;
}

/* linha do tempo no detalhe (reuso simples: lista com traço) */
.eventos { list-style: none; margin: .4rem 0; padding: 0; }
.eventos li {
  border-left: 3px solid var(--borda); padding: .15rem 0 .8rem .8rem; margin-left: .35rem;
}
.eventos li:last-child { padding-bottom: .1rem; }
.eventos .quando { font-size: .78rem; color: var(--suave); }

/* ====================================================== contador no menu */
/* So aparece quando tem algo (Fabio, 28/07): fila vazia = menu limpo. */
.item .cont {
  margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 800;
  background: var(--verde); color: #fff; border-radius: 999px;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.item.ativo .cont { background: #fff; color: var(--verde-texto); }

.barra-inferior .icone-caixa { position: relative; display: inline-flex; }
.barra-inferior .cont {
  position: absolute; top: -6px; right: -10px; font-style: normal;
  font-size: .62rem; font-weight: 800; background: var(--alerta); color: #fff;
  border-radius: 999px; min-width: 1.05rem; height: 1.05rem; padding: 0 .2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--branco);
}

/* ============================== tela unica de registro de ocorrencia */
/* Os tres radios de tipo (irmaos que precedem .tipo-pills e .form-oc) comandam
 * tudo por :checked ~ . Uma tela, zero JavaScript (pedido do Fabio, 28/07). */
.tipo-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.tipo-pills { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.tipo-pills label {
  display: inline-flex; align-items: center; margin: 0; padding: .6rem 1.1rem;
  border: 1.5px solid var(--borda); border-radius: 999px; background: var(--branco);
  font-size: .95rem; font-weight: 700; cursor: pointer; min-height: 44px;
}
#t-baixa:checked ~ .tipo-pills label[for="t-baixa"],
#t-ajuste:checked ~ .tipo-pills label[for="t-ajuste"],
#t-recebimento:checked ~ .tipo-pills label[for="t-recebimento"] {
  border-color: var(--verde); background: var(--verde-texto); color: #fff;
}

/* grupos por tipo: escondidos por padrao, o radio marcado liga o seu */
.form-oc .g-baixa, .form-oc .g-ajuste, .form-oc .g-receb { display: none; }
#t-baixa:checked ~ .form-oc .g-baixa,
#t-ajuste:checked ~ .form-oc .g-ajuste,
#t-recebimento:checked ~ .form-oc .g-receb { display: block; }
#t-ajuste:checked ~ .form-oc .g-nao-ajuste { display: none; }

/* segunda foto da quebra: some por padrao (ver .g-baixa acima, ja escondida
 * fora do tipo Baixa) e so aparece com o motivo "quebra" marcado (sugestao
 * #29 da equipe, 03/08/2026). :has() ja e usado no arquivo (.opcoes,
 * .dv-botao), navegador alvo do celular de loja suporta. */
.g-baixa .g-quebra-foto2 { display: none; }
.form-oc:has(#mb-quebra:checked) .g-quebra-foto2 { display: block; }

/* colunas das linhas de item: qtd na baixa/recebimento, dois estoques no ajuste */
.form-oc .col-sis, .form-oc .col-fis { display: none; }
#t-ajuste:checked ~ .form-oc .col-sis,
#t-ajuste:checked ~ .form-oc .col-fis { display: block; }
#t-ajuste:checked ~ .form-oc .col-qtd { display: none; }
#t-ajuste:checked ~ .form-oc .linha-item { grid-template-columns: 7rem 1fr 1fr; }

/* ================================================ medidor de meta (gerencial) */
.medidor {
  position: relative; height: 14px; border-radius: 999px;
  background: var(--borda); overflow: visible;
}
.medidor-preenche {
  height: 100%; border-radius: 999px; background: var(--verde-texto);
  transition: width .3s;
}
.medidor-preenche.atras { background: var(--atencao); }
.medidor-preenche.ok { background: var(--verde-texto); }
/* traço vertical: onde o ritmo deveria estar hoje pra fechar no alvo */
.medidor-marca {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--tinta); border-radius: 2px;
}

/* ==================================================================== manuais */
/* Leitura de manual na loja: celular na mao, cliente na frente. Medida de linha
   curta, entrelinha folgada e tabela que rola sozinha em vez de espremer. */
.busca-manual { display: flex; gap: .5rem; margin: 0 0 1rem; }
.busca-manual input {
  flex: 1; padding: .7rem .85rem; font-size: 1rem;
  border: 1.5px solid var(--borda); border-radius: 10px; background: #fff;
}
.busca-manual input:focus { outline: 2px solid var(--verde-texto); outline-offset: 1px; }
.busca-manual .botao { white-space: nowrap; }

a.cartao.achado { text-decoration: none; color: inherit; display: block; }
a.cartao.achado:hover { border-color: var(--verde-texto); }

.sumario {
  border: 1px solid var(--borda); border-radius: 10px;
  padding: .6rem .85rem; margin: 0 0 1.2rem; background: #fff;
}
.sumario summary { cursor: pointer; font-weight: 700; font-size: .92rem; }
.sumario ol { margin: .6rem 0 .2rem; padding-left: 1.1rem; }
.sumario li { margin: .2rem 0; font-size: .9rem; }
.sumario li.n2 { margin-left: .9rem; list-style: circle; }
.sumario a { color: var(--tinta); text-underline-offset: .18em; }

.manual { max-width: 46rem; line-height: 1.65; }
.manual section { scroll-margin-top: 4.5rem; }
.manual .tit-1 {
  font-size: 1.15rem; margin: 1.8rem 0 .5rem; padding-bottom: .3rem;
  border-bottom: 2px solid var(--escuro);
}
.manual .tit-2 { font-size: 1.02rem; margin: 1.4rem 0 .4rem; }
.manual h4 { font-size: .95rem; margin: 1rem 0 .3rem; }
.manual p { margin: 0 0 .7rem; }
.manual ul, .manual ol { margin: 0 0 .8rem; padding-left: 1.2rem; }
.manual li { margin-bottom: .25rem; }
.manual blockquote {
  margin: .8rem 0; padding: .6rem .9rem; background: var(--creme);
  border-left: 4px solid var(--escuro); border-radius: 0 8px 8px 0;
}
.manual blockquote p:last-child { margin-bottom: 0; }
/* tabela larga rola dentro dela mesma: sem isto a pagina inteira rola de lado
   no celular, que e o defeito classico de manual convertido pra web */
.manual table {
  display: block; overflow-x: auto; width: 100%; border-collapse: collapse;
  margin: .7rem 0 1rem; font-size: .88rem;
}
.manual th, .manual td {
  border: 1px solid var(--borda); padding: .45rem .6rem;
  text-align: left; vertical-align: top;
}
.manual th { background: var(--creme); font-weight: 700; }
.manual code {
  background: var(--creme); padding: .1rem .3rem; border-radius: 4px;
  font-size: .88em;
}
.manual hr { border: 0; border-top: 1px solid var(--borda); margin: 1.4rem 0; }

/* ------------------------------------------------ layouts por uso do manual */
/* Mensagens = varredura visual; Operacoes = pergunta pontual; demais = leitura.
   Pedido do Fabio (28/07/2026): mensagens "sem sumario, sem voltar, estende
   mais pra direita" e em menos paginas. */

.busca-manual.enxuta { margin-bottom: .8rem; max-width: 38rem; }
.busca-manual.enxuta input { padding: .5rem .7rem; font-size: .92rem; }

/* atalhos do Manual de Operacoes: alvo grande pro dedo, palavra visivel */
.atalhos { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; }
.atalhos a {
  /* 44px: a regra de alvo de toque do topo desta folha vale aqui também —
     é celular de loja, em pé e com pressa */
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .4rem .85rem; border: 1.5px solid var(--borda); border-radius: 999px;
  background: #fff; color: var(--tinta); text-decoration: none;
  font-size: .84rem; font-weight: 600; line-height: 1.2;
}
.atalhos a:hover { border-color: var(--verde-texto); color: var(--verde-texto); }
/* subitem (10.1 … 10.8) pesa menos que a parte que o contém — na faixa de chips
   não dá pra recuar, então a hierarquia vem do peso; no índice lateral o recuo
   entra por cima disto (bloco de min-width: 1100px). */
.atalhos a.sub { font-weight: 500; }
/* No celular os 12 atalhos empilhados comiam meia tela antes do conteudo
   comecar. Uma linha so, que desliza com o dedo: alvo continua de 44px e o
   texto do manual aparece logo abaixo. */
@media (max-width: 767px) {
  .atalhos {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; padding-bottom: .25rem;
    scrollbar-width: thin;
  }
  .atalhos a { flex: 0 0 auto; scroll-snap-align: start; }
}

/* largura cheia: tabela de operacoes e bloco de mensagem respiram melhor */
.manual.largo { max-width: none; }
.conteudo:has(.manual.largo) { max-width: none; }

/* MONITOR DE NOTAS: ocupa a tela toda e a barra de rolagem fica SEMPRE visivel.
   Sao 19 colunas -- o teto de 1180px sobrava espaco a direita e escondia coluna
   por nada. Mesmo padrao do .manual.largo acima.

   O `min-width: 0` NAO E ENFEITE, e a metade que faz a coisa funcionar.
   `.corpo` e flex e `.conteudo` e item dele; item de flex/grid nasce com
   `min-width: auto`, que o proibe de encolher abaixo do proprio conteudo. Sem
   isto, tirar o `max-width` fazia os dois esticarem pros 2671px da tabela: a
   PAGINA INTEIRA passava a rolar de lado e a barra da tabela nunca aparecia,
   porque a caixa nunca ficava menor que o conteudo. Medido no navegador --
   lendo so o CSS isso passa despercebido. */
.corpo:has(.tabela-larga) { min-width: 0; }
.conteudo:has(.tabela-larga) { max-width: none; min-width: 0; }

/* `scroll` e nao `auto` de proposito: com `auto` a barra so aparece durante a
   rolagem (barra sobreposta, padrao no Mac e no Windows 11), entao quem abre a
   tela nao tem pista de que existe coluna a direita -- e as colunas escondidas
   sao justamente as de Destinatario e Transportador. Barra reservada e mais
   honesta que barra bonita. */
/* A CAIXA TEM A ALTURA DA JANELA, e essa e a parte que faz a barra ser util.
   Antes ela rolava so na horizontal e crescia pra baixo sem limite: com 100
   linhas a tabela tem uns 4 mil pixels, entao a barra ficava no fim de tudo e
   so aparecia pra quem rolasse a pagina inteira ate embaixo. Presa na altura da
   tela, ela fica sempre no rodape do quadro, a vista.

   O cabecalho gruda no topo pelo mesmo motivo: rolar 100 linhas sem cabecalho e
   ler numero sem saber de que coluna. */
/* A CAIXA OCUPA O QUE SOBRA, e nao uma altura que eu chutei.
   A primeira versao usava `max-height: calc(100vh - 15rem)`, com o 15rem sendo
   o meu palpite da altura do que vem acima. Medido: a caixa comeca em 257px e
   eu descontei 240, entao o fundo dela caia em 917px numa janela de 900 -- a
   barra ficava 17px abaixo da dobra. E qualquer filtro que quebrasse linha
   mudava o numero de novo.
   Com a coluna flex abaixo, o navegador calcula a sobra sozinho e a barra fica
   no rodape da tela em qualquer altura de janela e qualquer quebra de filtro. */
/* PRENDER A TELA NA ALTURA DA JANELA FOI ABANDONADO (01/08/2026).
   Eu travei `.app` em 100dvh com overflow hidden pra a barra horizontal ficar
   sempre a vista. Funcionou na medicao e QUEBROU O LAYOUT: a barra de filtros
   passou por cima do formulario de busca. Trocar a altura de um ancestral que
   sustenta a pagina inteira pra resolver um detalhe de uma tela e preco alto
   demais -- e o Fabio, vendo o estrago, disse que a barra nem precisa estar
   sempre visivel. O que ele quer e ver ate a coluna de CNPJ sem rolar, que se
   resolve com largura de coluna, nao com altura de pagina. */
.tabela-larga {
  overflow-x: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;                     /* Firefox */
  scrollbar-color: #9aa5a0 transparent;
}
.tabela-larga thead th { position: sticky; top: 0; z-index: 2; background: #fff; }
.tabela-larga thead tr:first-child th { top: 0; }

/* barra unica de filtros + acoes do Monitor */
.barra-notas { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; }
.barra-notas .divisor { width: 1px; height: 1.4rem; background: #d6ded9; margin: 0 .35rem; }
.barra-notas .contagem { margin-left: .2rem; white-space: nowrap; }
.botao.peq { padding: .3rem .7rem; font-size: .82rem; }

/* paginacao discreta: e navegacao, nao conteudo. Estava com botao de tamanho
   normal e comia altura que pertence a lista (Fabio, 01/08/2026: "acho q ocupou
   mto a tela"). */
.paginacao { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; font-size: .8rem; }
.paginacao .botao { padding: .15rem .55rem; font-size: .78rem; }

/* A CHAVE ENCOLHE PRA O NOME DO EMITENTE CABER.
   Sao 44 digitos que ninguem le em voz alta -- quem identifica a nota na
   conversa e o NUMERO, e ele virou link pra DANFE. A chave continua inteira e
   selecionavel pra copiar; so ocupa menos. Isso libera ~90px, que e o que falta
   pro nome do fornecedor entrar na primeira tela junto com o CNPJ. */
.tabela-larga td.nfchave { font-size: .61rem; letter-spacing: -.02em; }
.tabela-larga td, .tabela-larga th { padding-left: .45rem; padding-right: .45rem; }
.tabela-larga::-webkit-scrollbar { height: 11px; -webkit-appearance: none; }
.tabela-larga::-webkit-scrollbar-track {
  background: #eef1ef;
  border-radius: 6px;
}
.tabela-larga::-webkit-scrollbar-thumb {
  background: #9aa5a0;
  border-radius: 6px;
  border: 2px solid #eef1ef;
}
.tabela-larga::-webkit-scrollbar-thumb:hover { background: #7d8884; }

/* Mensagens prontas em colunas: o texto e curto e independente, entao coluna
   corta pela metade a rolagem. Uma coluna no celular, ate quatro no monitor. */
.manual.colunas { columns: 21rem; column-gap: 1.5rem; }
.manual.colunas section,
.manual.colunas blockquote,
.manual.colunas table,
.manual.colunas ul { break-inside: avoid; page-break-inside: avoid; }
.manual.colunas section { margin-bottom: .2rem; }
/* mais compacto que o layout de leitura: cabe mais mensagem por tela */
.manual.colunas .tit-1 {
  font-size: 1rem; margin: .2rem 0 .5rem; padding-bottom: .25rem;
  border-bottom: 2px solid var(--escuro);
}
.manual.colunas h3, .manual.colunas h4 { font-size: .9rem; margin: .7rem 0 .2rem; }
.manual.colunas p { margin: 0 0 .45rem; font-size: .9rem; }
.manual.colunas blockquote {
  margin: .25rem 0 .7rem; padding: .5rem .7rem; font-size: .88rem;
  line-height: 1.5; background: var(--branco); border: 1px solid var(--borda);
  border-left: 4px solid var(--verde-texto); border-radius: 0 8px 8px 0;
}
.manual.colunas hr { display: none; }

/* cada mensagem e um cartao que nao parte no meio da coluna */
.manual.colunas .msg { break-inside: avoid; page-break-inside: avoid; margin-bottom: .55rem; }
.manual.colunas .msg p { margin: 0 0 .2rem; }
.manual.colunas section { break-inside: auto; }

/* --- Mensagens: tudo aberto, numa tela so -------------------------------- */
/* O texto fica a vista (nada de clicar pra abrir): a pessoa ve e copia. Caber
   numa tela vira problema de densidade — coluna estreita, tipografia compacta,
   cartao com pouca margem. */
.manual.colunas {
  --fs: 13.5px;             /* o script mede a tela e substitui */
  display: flex; gap: 1rem; align-items: stretch;
}
/* Coluna montada pelo script: o espaco que sobra e distribuido ENTRE os
   cartoes, entao o pe de todas as colunas termina na mesma linha. */
.manual.colunas .col {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
}
/* sem isto o cartao ENCOLHE pra caber na coluna em vez de transbordar, e o
   montador nunca percebe que passou do limite (o texto e que ficava cortado) */
.manual.colunas .col > * { flex: 0 0 auto; }
/* Sem JavaScript (ou no celular) volta ao fluxo em coluna simples: nada some,
   so nao ha o alinhamento no pe. */
.manual.colunas.sem-ajuste { display: block; columns: 16rem; column-gap: 1rem; }
.manual.colunas .msg {
  break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 .42em; padding: .4em .6em;
  background: var(--branco); border: 1px solid var(--borda);
  border-left: 3px solid var(--verde-texto); border-radius: 0 7px 7px 0;
}
.manual.colunas .msg .rot {
  margin: 0 0 .16em; font-weight: 650; font-size: calc(var(--fs) * .96); line-height: 1.3;
}
.manual.colunas .msg blockquote {
  margin: 0; padding: 0; border: 0; background: none;
  font-size: var(--fs); line-height: 1.45;
}
.manual.colunas .msg blockquote p { margin: 0 0 .18em; }
.manual.colunas .msg blockquote p:last-child { margin-bottom: 0; }
/* nota entre parenteses: existe, mas nao compete com a mensagem */
.manual.colunas .msg > p:not(.rot) {
  margin: 0 0 .18em; font-size: calc(var(--fs) * .85); line-height: 1.3; color: var(--suave);
}
.manual.colunas .msg.aviso { border-left-color: var(--atencao); }
/* cabecalho de secao: marca o grupo sem roubar altura */
.manual.colunas .tit-1 {
  font-size: calc(var(--fs) * .8); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--verde-texto);
  margin: .05rem 0 .22rem; padding: 0 0 .12rem;
  break-after: avoid-column; page-break-after: avoid;
  border-bottom: 1.5px solid var(--verde-texto);
}
.manual.colunas section { break-inside: auto; margin: 0; }
.manual.colunas hr { display: none; }
/* Secao de referencia (enderecos, PIX, parcelamento, dados da empresa): e dado
   de consulta, nao mensagem de conversa. Mesma informacao, sem a moldura de
   cartao e com linha mais junta — foi o que liberou espaco pra tela caber. */
.manual.colunas section.ref .msg {
  border: 0; border-left: 2px solid var(--borda); border-radius: 0;
  background: none; padding: .08rem .45rem; margin: 0 0 .26rem;
}
.manual.colunas section.ref .msg .rot { font-size: calc(var(--fs) * .97); margin: 0 0 .1em; }
.manual.colunas section.ref .msg blockquote { font-size: calc(var(--fs) * .95); line-height: 1.36; }
.manual.colunas section.ref .msg > p:not(.rot) { font-size: .66rem; }

/* a tela de mensagens nao tem rodape nem acao: o respiro do fim da pagina
   pode ser menor, e sao esses pixels que fecham a conta de caber numa tela */
.conteudo:has(.manual.colunas) { padding-top: 1rem; padding-bottom: 1rem; }
/* Mensagem que e de UMA loja (endereco, horario, dados da empresa): quem esta
   logado numa loja ve so a dela. Venancio nao atende cliente de Lajeado, e as
   outras duas viram ruido no balcao (Fabio, 28/07/2026). Master e
   administrativo nao recebem classe nenhuma e continuam vendo as tres. */
.manual.so-loja-1 .msg.loja:not(.loja-1),
.manual.so-loja-3 .msg.loja:not(.loja-3),
.manual.so-loja-4 .msg.loja:not(.loja-4) { display: none; }

/* === Marketing (calendario, aprovacao, midia da loja) — 29/07/2026 ======== */

/* navegacao de mes */
.mkt-navmes { display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; margin: .2rem 0 1rem; }
.mkt-navmes .botao { white-space: nowrap; }

/* calendario: 7 colunas, rola de lado no celular dentro do proprio quadro */
.mkt-cal { display: grid; grid-template-columns: repeat(7, minmax(88px, 1fr));
  gap: 4px; min-width: 640px; }
.mkt-cal-wd { font-size: .7rem; font-weight: 700; text-transform: uppercase;
  color: var(--suave); text-align: center; padding: .2rem 0; }
.mkt-cal-dia { background: var(--branco); border: 1px solid var(--borda);
  border-radius: 8px; min-height: 78px; padding: .25rem; }
.mkt-cal-dia.vazio { background: transparent; border: 0; }
.mkt-cal-dia.domingo { background: #F1EFE9; }        /* domingos em cinza */
.mkt-cal-dia.hoje { outline: 2px solid var(--verde-texto); outline-offset: -1px; }
.mkt-cal-num { font-size: .72rem; color: var(--suave); font-weight: 600; }
.mkt-cal-pub { display: block; margin-top: .2rem; padding: .15rem .3rem;
  background: var(--creme); border-left: 3px solid var(--verde-texto);
  border-radius: 0 5px 5px 0; text-decoration: none; color: var(--tinta); }
.mkt-cal-fmt { display: block; font-size: .56rem; font-weight: 800;
  letter-spacing: .03em; color: var(--suave); text-transform: uppercase;
  /* o corte agora e' aqui, com reticencias: cortar no PHP virava "CARROS" no
     lugar de "CARROSSEL", que le como outra palavra (Fabio, 29/07) */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-cal-tit { display: -webkit-box; font-size: .66rem; line-height: 1.15;
  overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mkt-legenda { display: flex; gap: 1rem; flex-wrap: wrap; margin: .5rem 0 0;
  font-size: .8rem; }

/* roteiro cena a cena */
.mkt-cena { display: flex; gap: .6rem; align-items: flex-start; }
.mkt-cena-n { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 999px;
  background: var(--verde-texto); color: #fff; font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center; }

/* comentario ancorado (por cena ou geral): amarelo, como "atencao" */
.mkt-com { background: #FFF8E8; border-left: 3px solid var(--atencao);
  border-radius: 0 6px 6px 0; padding: .35rem .5rem; margin: .4rem 0 0; }
.mkt-com-quem { font-size: .72rem; color: var(--suave); font-weight: 600; }
.mkt-com p { margin: .15rem 0 0; font-size: .9rem; white-space: pre-line; }
.mkt-comentar { margin: .4rem 0 0; }
.mkt-comentar summary { cursor: pointer; color: var(--verde-texto);
  font-size: .82rem; font-weight: 600; }
.mkt-comentar textarea, .mkt-decisao textarea, .mkt-envio input[type=text] {
  width: 100%; margin: .35rem 0; padding: .5rem; border: 1px solid var(--borda);
  border-radius: 8px; font: inherit; }
.mkt-decisao textarea { min-height: 3.2rem; }
.mkt-botoes { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }

/* galeria da midia enviada */
.mkt-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: .4rem; margin-top: .4rem; }
.mkt-galeria img, .mkt-galeria video { width: 100%; border-radius: 8px;
  aspect-ratio: 1 / 1; object-fit: cover; background: #000; }

/* envio da loja: botao de anexar grande, alvo de dedo */
.mkt-envio { margin-top: .7rem; }
.mkt-arquivo { display: block; }
.mkt-arquivo input[type=file] { position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; }
.mkt-arquivo span { display: block; text-align: center; padding: .7rem .8rem;
  border: 1.5px dashed var(--verde-texto); border-radius: 10px;
  color: var(--verde-texto); cursor: pointer; font-weight: 600; }
.mkt-arquivo input[type=file]:focus + span { outline: 2px solid var(--verde-texto);
  outline-offset: 2px; }


/* === Documento de aprovação (modelo universal) — 29/07/2026 ============== */
.aprov-secao { border-top: 1px solid var(--borda); padding-top: .1rem; margin-top: .4rem; }
.aprov-secao:first-of-type { border-top: 0; }
.aprov-corpo { font-size: .95rem; line-height: 1.6; }
.aprov-corpo p { margin: .4rem 0; }
.aprov-corpo ul, .aprov-corpo ol { margin: .4rem 0 .4rem 1.3rem; padding: 0; }
.aprov-corpo li { margin: .28rem 0; }
.aprov-corpo strong { font-weight: 700; }
.aprov-corpo blockquote { margin: .5rem 0; padding: .45rem .85rem;
  border-left: 3px solid var(--verde-texto); background: var(--branco);
  border-radius: 0 8px 8px 0; color: var(--suave); }
.aprov-corpo h2, .aprov-corpo h3, .aprov-corpo h4 { margin: .8rem 0 .3rem; line-height: 1.25; }

/* ============ manual longo: indice lateral, medida de linha, topo ============ */
/* Medida de linha: 50-75 caracteres e o intervalo com evidencia (Baymard,
   WCAG 1.4.8 poe 80 como teto). No "largo" o texto corrido ficava com 120+
   caracteres por linha no monitor da loja — o pior cenario pra leitura com
   pressa. Tabela e bloco de alerta seguem em largura cheia. */
.manual.largo > section > p,
.manual.largo > section > ul,
.manual.largo > section > ol { max-width: 70ch; }

/* Indice lateral fixo a partir do monitor: acompanha a rolagem, entao trocar de
   secao nao exige voltar ao topo. Abaixo disso continua a faixa de chips. */
@media (min-width: 1100px) {
  .conteudo:has(.atalhos.indice) {
    display: grid; grid-template-columns: 15rem 1fr; gap: 1.6rem;
    align-items: start;
  }
  .conteudo:has(.atalhos.indice) > .busca-manual { grid-column: 1 / -1; }
  .atalhos.indice {
    position: sticky; top: 4.5rem; align-self: start;
    display: flex; flex-direction: column; gap: .1rem;
    max-height: calc(100dvh - 6rem); overflow-y: auto;
    padding-right: .3rem; margin: 0;
  }
  .atalhos.indice a {
    min-height: 0; padding: .42rem .6rem; border: 0; border-radius: 8px;
    border-left: 3px solid transparent; text-align: left; font-weight: 600;
    font-size: .84rem; background: transparent;
  }
  .atalhos.indice a:hover {
    background: var(--branco); border-left-color: var(--verde-texto);
  }
  /* subitem numerado (10.1 … 10.8): recua e pesa menos que a parte que o
     contém — o número já diz que é filho, o recuo faz o olho ver isso sem ler */
  .atalhos.indice a.sub {
    padding-left: 1.5rem; font-weight: 500; font-size: .82rem;
  }
  .atalhos.indice a:target, .atalhos.indice a.ativo {
    background: var(--branco); border-left-color: var(--verde-texto);
    color: var(--verde-texto);
  }
}

/* termo da busca grifado no texto (feito no servidor) */
.manual mark {
  background: #FFF0B3; color: inherit; padding: 0 .12em; border-radius: 3px;
}

/* voltar ao topo: canto inferior, com texto (icone sozinho e ambiguo) */
.ao-topo {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 40;
  display: none; align-items: center; gap: .3rem;
  padding: .55rem .9rem; border-radius: 999px;
  background: var(--escuro); color: #fff; text-decoration: none;
  font-size: .82rem; font-weight: 700; box-shadow: 0 2px 8px rgba(5,53,28,.22);
}
.ao-topo.visivel { display: inline-flex; }
@media (max-width: 767px) { .ao-topo { bottom: 4.8rem; } }

/* Botao Atualizar da caixa de entrada: mora dentro de .filtros mas nao e aba --
   nao ganha estado ativo nem contador, e fica descolado dos irmaos pra nao ser
   confundido com mais uma pasta de e-mail. */
.filtros .atualizar {
  margin-left: auto;
  border-style: dashed;
}

/* Nomes de quem conferiu, todos à vista. Alvo de 40px de altura porque e tela
   de balcao, usada em pe e com pressa -- e porque lista suspensa cobria os
   botoes de acao logo abaixo. */
.nomes-conf { display: flex; flex-wrap: wrap; gap: .35rem; }
.nomes-conf label { cursor: pointer; }
.nomes-conf input { position: absolute; opacity: 0; width: 0; height: 0; }
.nomes-conf span {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .2rem .85rem; border-radius: 999px;
  border: 1px solid var(--borda); background: #fff;
  font-size: .9rem; line-height: 1;
}
.nomes-conf input:checked + span {
  background: var(--verde-texto); border-color: var(--verde-texto);
  color: #fff; font-weight: 600;
}
/* foco visivel pra quem navega por teclado -- o input real esta escondido */
.nomes-conf input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 2px; }

/* Divergencia do recebimento: fechada por padrao, aberta por um toque.
   Checkbox invisivel + label-botao = HTML puro, nada navega -- e por isso o
   nome e a hora ja preenchidos nao se perdem, que foi o defeito da versao com
   link (o clique jogava fora o formulario inteiro). */
.dv-toggle { display: none; }
.dv-toggle:not(:checked) ~ .dv-painel { display: none; }
.dv-toggle:checked ~ div .dv-botao { background: #FBE3E1; font-weight: 700; }
.dv-botao { cursor: pointer; }

/* Mesmo mecanismo do dv-toggle acima, pro painel de validade (Controle de
   validades, 05/08/2026) -- independente da divergencia, verde em vez de
   vermelho porque registrar validade nao e problema, e opcional. */
.val-toggle { display: none; }
.val-toggle:not(:checked) ~ .val-painel { display: none; }
.val-toggle:checked ~ div .val-botao { background: #EAF3EC; font-weight: 700; }
.val-botao { cursor: pointer; }

/* ABAS FIXAS NO TOPO (Fábio, 01/08/2026: "como agora dá pra mover, essa parte
   de cima precisa ficar sempre visível").
   Vale pra TODO MUNDO e não só pra quem arrasta: a barra sumir ao rolar já
   incomodava antes: com 6.523 concluídas, trocar de aba exigia voltar ao topo.
   O arraste só tornou o defeito impossível de ignorar — alvo que rola pra fora
   da tela não é alvo.
   Fundo opaco de propósito: sticky transparente deixa o card passar por baixo
   e o alvo se perde no meio do texto. */
.filtros-fixos {
  position: sticky;
  /* ABAIXO DO CABEÇALHO, não por cima dele. Com `top: 0` os dois grudavam na
     mesma linha e a barra de abas cobria o nome do usuário e o "trocar" (medido
     no celular em 01/08: cabeçalho 0-49px, barra 0-120px). O `.topo` também
     subiu de z-index pra ganhar a disputa se o cabeçalho crescer com zoom. */
  top: 3.1rem;
  z-index: 20;
  /* `var(--fundo)` NÃO EXISTE nesta folha — a variável indefinida derrubava a
     declaração inteira e o fundo virava transparente, que é exatamente o que o
     comentário acima diz ter evitado: medido na tela, os cartões passavam por
     baixo da barra. O fundo da página é `--creme`. */
  background: var(--creme);
  padding: .5rem 0 .4rem;
  margin-bottom: .2rem;
  box-shadow: 0 6px 8px -6px rgba(0, 0, 0, .18);
}

/* BUSCA DE PRODUTO (venda perdida, 01/08/2026) — a lista flutua sobre o resto
   do formulário em vez de empurrá-lo: no celular, empurrar tira o campo de
   baixo do dedo bem na hora de escolher. */
.busca-produto { position: relative; }
.sugestoes-produto {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  margin: .15rem 0 0; padding: 0; list-style: none;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 10px; max-height: 16rem; overflow-y: auto;
  box-shadow: 0 10px 24px rgba(5, 53, 28, .16);
}
.sugestoes-produto li + li { border-top: 1px solid var(--borda); }
.sugestoes-produto button {
  display: block; width: 100%; text-align: left; min-height: 2.9rem;
  padding: .5rem .65rem; background: none; border: 0; font: inherit;
  color: var(--tinta); cursor: pointer; line-height: 1.25;
}
.sugestoes-produto button:hover,
.sugestoes-produto button:focus,
.sugestoes-produto .marcado button { background: var(--creme); outline: none; }
.sugestoes-produto .cod { display: block; color: var(--suave); font-size: .78rem; }
/* `.opcao` (singular) — a linha de rádio empilhada, usada quando o rótulo é
   longo demais pra virar pílula (tipo de demanda, escolha de produto). Existia
   no HTML desde 29/07 SEM NENHUMA REGRA na folha: virava uma linha de ~22px,
   metade do alvo de toque que a regra do topo deste arquivo manda. */
.opcao {
  display: flex; align-items: flex-start; gap: .5rem;
  min-height: 44px; padding: .4rem .5rem;
  border: 1px solid transparent; border-radius: 10px;
  font-weight: 400; cursor: pointer;
}
.opcao input { margin-top: .18rem; flex: 0 0 auto; }
.opcao:hover { background: var(--creme); }
.opcao:has(input:checked) { border-color: var(--verde); background: #E6F4EA; }

/* escolha manual quando o servidor achou vários (caminho sem JavaScript) */
.opcoes-produto {
  border: 1px solid var(--borda); border-radius: 10px;
  padding: .4rem .55rem; margin: .3rem 0 .2rem; background: var(--creme);
}

/* METAS EM VELOCÍMETRO (Fábio, 02/08/2026). O cartão é centrado e o número
   grande é o protagonista: o desenho serve pra dizer "perto ou longe" de
   relance, e o número pra dizer quanto. */
.metao .numerao {
  margin: -.6rem 0 0; font-size: 2.2rem; font-weight: 700;
  color: var(--tinta); line-height: 1.1;
}
.metao svg { max-width: 100%; height: auto; }
.grade-metas {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
@media (max-width: 480px) {
  /* no celular da loja, um por linha: dois velocímetros lado a lado ficam
     pequenos demais pra ler a agulha */
  .grade-metas { grid-template-columns: 1fr; }
  .metao .numerao { font-size: 1.9rem; }
}

/* OS QUE MAIS FALTARAM (venda perdida, 02/08/2026). Toque em vez de digitação:
   venda perdida é quase sempre um item que a rotina de ruptura já sabe que
   ficou zerado nesta loja. */
.faltaram { margin: .1rem 0 .5rem; }
.faltaram-lista { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip-falta {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  min-height: 44px; padding: .35rem .7rem;
  border: 1.5px solid var(--borda); border-radius: 12px;
  background: var(--branco); color: var(--tinta);
  font: inherit; font-size: .84rem; font-weight: 600; text-align: left;
  cursor: pointer; line-height: 1.2;
}
.chip-falta span {
  font-size: .7rem; font-weight: 400; color: var(--atencao);
}
.chip-falta:hover, .chip-falta:focus {
  border-color: var(--verde-texto); outline: none;
}

/* ---------------------------------------------------------------- LUPA
   Peça gráfica se avalia em tamanho cheio (Fábio, 02/08/2026, no módulo de
   aprovação — depois repetido pelo João no módulo de Vagas, 04/08/2026:
   mesmo pedido, dois módulos na mesma semana). RENOMEADO de .aprov-zoom
   pra .nv-zoom quando virou componente compartilhado
   (app/parciais/lupa.php) — o nome antigo prendia o componente ao módulo
   de aprovação, que não é mais o único usuário. O botão é transparente de
   propósito: quem olha vê a imagem, não um controle. */
.nv-zoom {
  display: block; width: 100%; max-width: 820px; margin: .3rem auto;
  padding: 0; border: 0; background: none; cursor: zoom-in; position: relative;
}
.nv-zoom img {
  display: block; width: 100%;
  border: 1px solid var(--borda); border-radius: 8px;
}
.nv-zoom-dica {
  position: absolute; right: .5rem; bottom: .5rem;
  padding: .18rem .5rem; border-radius: 999px;
  background: rgba(0, 0, 0, .62); color: #fff;
  font-size: .7rem; letter-spacing: .01em; pointer-events: none;
}
.nv-zoom:focus-visible { outline: 3px solid var(--verde-texto); outline-offset: 3px; }

.lupa {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 17, 17, .93); padding: 3.2rem .5rem 1rem;
}
.lupa[hidden] { display: none; }
.lupa img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 6px; background: #fff;
}
.lupa-topo {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; background: rgba(0, 0, 0, .5);
}
.lupa-legenda {
  flex: 1 1 auto; min-width: 0; color: #fff; font-size: .84rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lupa-botao {
  flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center;
  padding: .3rem .7rem; border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 8px; background: none; color: #fff;
  font: inherit; font-size: .8rem; text-decoration: none; cursor: pointer;
}
.lupa-botao:hover, .lupa-botao:focus { background: rgba(255, 255, 255, .16); }
.lupa-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 64px; border: 0; border-radius: 8px;
  background: rgba(0, 0, 0, .42); color: #fff; font-size: 2rem; line-height: 1;
  cursor: pointer;
}
.lupa-seta:hover, .lupa-seta:focus { background: rgba(0, 0, 0, .68); }
.lupa-ant { left: .4rem; }
.lupa-prox { right: .4rem; }
@media (max-width: 560px) {
  .lupa-seta { width: 38px; height: 54px; font-size: 1.6rem; }
  .lupa { padding: 3rem .25rem .5rem; }
}