(flex: 1 1 auto, versão anterior): isso deixava o relatório espremido com scroll próprio sempre que o espaço disponível era menor que o conteúdo (ex: fora do embed, numa janela de navegador normal, bem menor que o visual do Power BI -- pedido de Lucas, 2026-08-28: "fora do embed a parte de relatório fica muito pequena"). Com altura natural (soma do conteúdo, agora sempre igual), quem decide se precisa de rolagem é só o

mesmo (overflow-y: auto ali em cima) -- sobra espaço numa janela grande, mostra tudo; falta espaço no visual pequeno do Power BI, rola a página toda normalmente. */ html.pagina-bi .relatorio-conteudo { flex: 0 0 auto; } /* Cada tabela do relatório já tem max-height: 420px inline (ganha rolagem própria quando estoura, ver relatorios/_conteudo.html) -- mas sem um MÍNIMO igual, uma tabela filtrada até ficar vazia (só cabeçalho + "Nenhuma contagem encontrada") encolhia bem menos que isso, deixando um vão em branco grande no fim do bloco (pedido de Lucas, 2026-08-28: "deixa o mínimo = máximo... assim o bloco todo fica sempre estático"). Trava as três tabelas do relatório sempre no tamanho máximo -- cheias ou vazias, ocupam sempre o mesmo espaço. */ html.pagina-bi .relatorio-conteudo .table-responsive { min-height: 420px; } html.pagina-bi #lancamento-contagens { flex: 0 0 auto; } /* "Lançar Contagem de Estoque"/"Relatórios" somem da navbar quando a Home está dentro de um iframe (ver script no de base.html) -- CSS puro, decidido antes do navbar ser desenhado, de propósito: esconder isso via JS só depois que a página carrega (como era antes) causava um "flash" visível dos dois botões por uma fração de segundo antes de sumirem. */ html.embed-home #navLinkContagem, html.embed-home #navLinkRelatorios { display: none; } /* Download de arquivo via não funciona dentro do sandbox do Power BI (mesma categoria de limitação de clipboard/modal/form/scroll já documentada nesse arquivo) -- clicar não faz nada, então some o botão em vez de deixar ali parecendo quebrado (pedido de Lucas, 2026-08-28: "o botão não funciona dentro do BI"). Ao contrário de embed-home (só a Home), "embedado" vale em qualquer página -- ver script no de base.html. */ html.embedado .btn-baixar-csv { display: none; } /* Tamanho fixo (em px, não escala com o font-size do acima) pras tabelas do relatório e pros títulos/itens em destaque dos cards -- pedido explícito de valores exatos pra comparar visualmente. Escopado a .relatorio-conteudo (não .card-ja genérico) pra não encolher sem querer tabelas/cards de outras telas (login, admin, usuários...) que reusam a mesma classe .card-ja. */ .relatorio-conteudo table { font-size: 12px; } /* Enquanto atualizarConteudo() (ver relatorios.js) busca o fragmento novo -- indicador bem discreto de propósito, essa troca costuma ser rápida (só um fetch, sem repintar a página inteira) -- não precisa de um overlay chamativo, só um sinal de "algo tá acontecendo". */ .relatorio-conteudo.relatorio-atualizando { opacity: 0.6; pointer-events: none; transition: opacity 0.15s ease; } .relatorio-conteudo .card-header, .relatorio-conteudo .fs-4 { /* !important pra vencer os utilitários .fs-4/.fw-semibold do Bootstrap, que já usam !important neles mesmos (senão essa regra perde mesmo com mais especificidade). */ font-size: 14px !important; font-weight: 700 !important; } .ja-navbar { background-color: var(--ja-verde-escuro); } .card-ja { border: 1px solid #e3e9e7; } /* Cabeçalho fixo pras tabelas roláveis de /auth/produtos — sem isso, o título das colunas some assim que rola, e fica confuso qual coluna é qual numa tabela com 100+ linhas. */ .tabela-cabecalho-fixo thead th { position: sticky; top: 0; background-color: #fff; z-index: 1; } .card-ja .card-header { background-color: var(--ja-verde); color: #fff; } .btn-ja-primary { background-color: var(--ja-verde); border-color: var(--ja-verde); color: #fff; } .btn-ja-primary:hover { background-color: var(--ja-verde-escuro); border-color: var(--ja-verde-escuro); color: #fff; } .btn-outline-ja { border-color: var(--ja-verde); color: var(--ja-verde); } .btn-outline-ja:hover { background-color: var(--ja-verde); color: #fff; } /* Etiqueta de valor selecionado num filtro multi-seleção (Microrregião, Estado, Cidade, Agrupamento, Produto, Revenda). */ .chip-filtro { display: inline-flex; align-items: center; gap: 4px; background: #eaf3ef; border: 1px solid #c8e0d4; border-radius: 12px; padding: 1px 4px 1px 8px; font-size: 0.78rem; line-height: 1.6; max-width: 100%; } .chip-filtro .chip-remover { border: none; background: none; color: var(--ja-verde-escuro); font-size: 1rem; line-height: 1; padding: 0 3px; cursor: pointer; } .chip-filtro .chip-remover:hover { color: #a00; } /* Campo de filtro com largura própria fixa — flex-shrink:0 impede que ele encolha e "vaze" por cima do próximo campo quando o espaço aperta; nesse caso, quem cede é o wrap (o campo desce pra próxima linha), nunca a sobreposição. */ .filtro-campo { flex-shrink: 0; } /* Ícone de borracha em cima de cada campo da cascata de filtros — limpa só aquele campo específico (diferente do botão "Limpar filtros", que reseta tudo de uma vez). Mesmo espírito do botão de limpar filtro do Power BI. */ .btn-limpar-campo { border: none; background: none; padding: 0 2px; line-height: 1; color: #8a8a8a; font-size: 0.85rem; } .btn-limpar-campo:hover { color: var(--ja-verde); } .user-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; } /* Cortina de "Gravando..." — bloqueia interação com o resto da tela (seção 3 do handoff: "durante o processo... bloqueia interação com o resto da tela, com animação de carregamento"). */ .overlay-gravando { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Escala de cores por urgência de vencimento — seção 3 do handoff. Cortes fixos calibrados para uma janela de 90 dias (o último valor usado em produção); a janela em si é configurável via DIAS_JANELA_VENCIMENTO. */ .venc-vencido { color: #960000; font-weight: 600; } .venc-critico { color: rgb(220, 40, 40); font-weight: 600; } /* <= 7 dias */ .venc-urgente { color: rgb(230, 100, 20); } /* 8-15 dias */ .venc-atencao { color: rgb(200, 120, 0); } /* 16-30 dias */ .venc-alerta { color: rgb(210, 170, 0); } /* 31-45 dias */ .venc-moderado { color: rgb(230, 200, 60); } /* 46-60 dias */ .venc-tranquilo { color: rgb(30, 140, 30); } /* 61-90 dias */ .venc-sem-validade { color: #333; } /* apenas ausência de dado */ /* Régua de cor da matriz "Estoque Atual por Revenda" (Vencimento mais próximo / Dias para Vencer) — 7 faixas fixas do documento do BI, distinta da régua .venc-* acima (essa é calibrada pra galeria de contagem, com janela configurável; a da matriz é fixa e mais granular). */ .matriz-venc-vencido { color: #FF0000; } .matriz-venc-menos15 { color: #C00000; } .matriz-venc-15a29 { color: #8B0000; } .matriz-venc-30a59 { color: #C55A11; } .matriz-venc-60a89 { color: #B8860B; } .matriz-venc-90a179 { color: #2E7D32; } .matriz-venc-180mais { color: #2E75B6; } /* Régua de cor de "Dias Desde Última Contagem" — menos dias é melhor. */ .matriz-dias-ate7 { color: #2E7D32; } .matriz-dias-8a14 { color: #9C6500; } .matriz-dias-15mais { color: #C00000; } .matriz-arvore .linha-toggle { cursor: pointer; } .matriz-arvore .linha-toggle:hover { background-color: #f5f8f7; } .matriz-arvore .icone-expandir { display: inline-block; width: 1em; transition: transform 0.15s ease; } .matriz-arvore .linha-toggle.expandida > td .icone-expandir { transform: rotate(90deg); } /* Enquanto carregarFilhosArvore() busca os filhos de uma linha pela primeira vez (ver relatorios.js) -- sinal discreto de "algo tá acontecendo" só na primeira abertura; reabrir depois não passa por aqui de novo (os filhos já ficam em cache no DOM). */ .matriz-arvore .linha-toggle.carregando-filhos { opacity: 0.6; cursor: wait; } .matriz-arvore .linha-total { font-weight: 600; border-top: 2px solid #124a36; } /* Régua de cor da Variação no histórico por produto — % sobre a qtd anterior (ver agregacao.py:_classe_variacao). */ .matriz-var-caiu-forte { color: #2E7D32; } .matriz-var-caiu-leve { color: #66A968; } .matriz-var-estavel { color: #7F7F7F; } .matriz-var-subiu-normal { color: #2E75B6; } .matriz-var-subiu-forte { color: #C00000; } /* Colunas redimensionáveis (arrastar a borda direita do cabeçalho) — ver app/static/js/tabela-redimensionavel.js. table-layout:fixed é o que faz o navegador respeitar a largura definida via JS em vez de recalcular pelo conteúdo. */ table.tabela-colunas-ajustaveis { /* width:auto + min-width:100% (em vez do width:100% fixo do Bootstrap) é o que permite a tabela crescer além do espaço visível quando as colunas exigem mais espaço — sem isso, table-layout:fixed respeita o width:100% à risca e nunca aciona a rolagem horizontal, mesmo com min-width nas colunas. table-layout:fixed em si é aplicado via JS (tabela-redimensionavel.js), só depois de medir a largura natural de cada coluna — aplicar direto aqui faria o navegador distribuir as colunas de forma uniforme, perdendo a proporção baseada em conteúdo. */ width: auto; min-width: 100%; } table.tabela-ordenavel thead th { color: var(--ja-verde); cursor: pointer; user-select: none; } table.tabela-ordenavel thead th:hover { background-color: #eaf3ef; } table.tabela-ordenavel thead th .icone-ordenacao { font-size: .75em; } table.tabela-colunas-ajustaveis th { white-space: normal; word-wrap: break-word; border-right: 1px solid #c8d2ce; } table.tabela-colunas-ajustaveis td { border-right: 1px solid #e3e9e7; } table.tabela-colunas-ajustaveis th:last-child, table.tabela-colunas-ajustaveis td:last-child { border-right: none; } .resizer-coluna { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; user-select: none; touch-action: none; z-index: 1; } .resizer-coluna:hover, .resizer-coluna.redimensionando { background: var(--ja-verde); opacity: 0.6; } .produto-card { border: 1px solid #e3e9e7; border-radius: 8px; padding: 0.75rem; height: 100%; position: relative; } /* Selo no canto do card pra distinguir, de longe, produto que já tem contagem registrada (qualquer data) de produto nunca contado — sem isso, um item contado sem data de validade fica com a mesma cara de um nunca contado (a cor por vencimento só entra quando há validade). */ .badge-contado { position: absolute; top: 6px; right: 6px; background: var(--ja-verde); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; } /* Cor do card pela proximidade do vencimento (última contagem com validade). Faixas confirmadas: vinho=vencido, vermelho=0-15, laranja=16-45, amarelo=46-60, verde=61-90, azul=91+ dias. */ .produto-card.card-venc-azul { background: #eaf3fb; border-color: #4a90d9; border-left: 4px solid #4a90d9; } .produto-card.card-venc-verde { background: #eaf7ec; border-color: #2f9e44; border-left: 4px solid #2f9e44; } .produto-card.card-venc-amarelo { background: #fdf7e3; border-color: #d4ad00; border-left: 4px solid #d4ad00; } .produto-card.card-venc-laranja { background: #fdece0; border-color: #e0691a; border-left: 4px solid #e0691a; } .produto-card.card-venc-vermelho { background: #fbe4e4; border-color: #d92626; border-left: 4px solid #d92626; } .produto-card.card-venc-vinho { background: #f3e1e1; border-color: #6e1414; border-left: 4px solid #6e1414; } /* Espaçador que reserva o espaço da barra flutuante abaixo, pra ela não cobrir o fim da galeria de produtos. Altura ajustada no media query junto com a barra (o botão fica maior/mais alto no celular). */ .barra-gravar-espacador { height: 88px; } /* Barra flutuante do botão "Gravar contagem" — fica sempre visível na parte inferior da tela, sem precisar rolar até o fim da galeria. */ .barra-gravar-flutuante { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid #e3e9e7; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1); padding: 0.75rem 1.5rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: flex-end; } @media (max-width: 767.98px) { .barra-gravar-flutuante { padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); } .barra-gravar-flutuante #btnGravar { width: 100%; } .barra-gravar-espacador { height: 76px; } } /* Layout fixo da tela de contagem quando embedada (só acontece com a navbar escondida, ver base.html) -- dentro do iframe do Power BI o espaço visível costuma ser bem menor que uma janela de navegador normal, e o botão "Gravar" flutuante (position:fixed, acima) ficava fixo em relação ao iframe INTEIRO, não ao que estava realmente visível -- pra alcançar ele, a pessoa tinha que rolar a página toda, o que escondia os filtros lá em cima junto. Aqui cabeçalho+filtros e o botão de gravar ficam sempre visíveis, e só a galeria de produtos rola, não importa o quão pequeno seja o espaço que o Power BI reservou. */ html:has(body.sem-navbar) { height: 100%; } body.sem-navbar { height: 100%; overflow: hidden; display: flex; flex-direction: column; } body.sem-navbar main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: 0.75rem !important; /* era py-4 (1.5rem) do Bootstrap -- sobra pouco espaço aqui */ padding-bottom: 0.5rem !important; } body.sem-navbar .contagem-topo { flex: 0 0 auto; } /* Aperta os espaçamentos do cabeçalho/filtros -- cada "mb-4" do Bootstrap (1.5rem) sozinho já era quase 1/4 da altura total disponível no embed. */ body.sem-navbar .contagem-topo .page-header { margin-bottom: 0.5rem !important; } body.sem-navbar .contagem-topo .card { margin-bottom: 0.5rem !important; } body.sem-navbar .contagem-topo .card-body { padding: 0.5rem 0.75rem !important; } /* Fonte dos filtros (rótulo + campo) compatível com os cards de produto já compactados abaixo -- ficava bem maior que o resto no embed. */ body.sem-navbar .contagem-topo .form-label { font-size: 0.76rem; } body.sem-navbar .contagem-topo .form-control-sm { font-size: 0.76rem; padding: 0.25rem 0.5rem; } body.sem-navbar .contagem-topo h4 { font-size: 1.15rem; } body.sem-navbar .contagem-topo .page-header small { font-size: 0.72rem; } body.sem-navbar .contagem-topo .autocomplete-item, body.sem-navbar .contagem-topo .autocomplete-vazio { font-size: 0.76rem; padding: 0.35rem 0.6rem; } body.sem-navbar .contagem-galeria-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; /* sem isso, o browser converte overflow-x pra "auto" sozinho assim que overflow-y vira "auto" -- e a margem negativa do .row do Bootstrap (gutter) já é o suficiente pra virar uma barra de rolagem horizontal visível, mesmo sem nenhum conteúdo real vazando. */ min-height: 0; padding-right: 2px; /* evita a barra de rolagem vertical encostar direto nos cards */ } /* Cards mais compactos só no embed -- o espaço visível dentro do "Web content" do Power BI costuma ser pequeno, e cada card tinha várias linhas de texto/inputs empilhadas ocupando mais altura do que cabia. */ body.sem-navbar .produto-card { padding: 0.5rem; } body.sem-navbar .produto-card, body.sem-navbar .produto-card .form-label, body.sem-navbar .produto-card small { font-size: 0.76rem; } body.sem-navbar .produto-card .form-control-sm { padding: 0.2rem 0.5rem; font-size: 0.76rem; } body.sem-navbar .produto-card .mb-1 { margin-bottom: 0.35rem !important; } body.sem-navbar .produto-card .mb-2 { margin-bottom: 0.5rem !important; } body.sem-navbar #listaProdutos.row { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; } /* 5 cards por linha no embed (o JS marca cada card com col-md-4 col-lg-3, pensado pro navegador normal -- aqui força 20% de largura direto, independente de breakpoint, já que o espaço disponível é sempre pequeno). !important necessário: as classes do Bootstrap têm a mesma especificidade e vêm depois na cascata em alguns breakpoints. */ body.sem-navbar #listaProdutos.row > [class*="col-"] { flex: 0 0 20% !important; max-width: 20% !important; width: 20% !important; } body.sem-navbar .barra-gravar-espacador { display: none !important; } body.sem-navbar .barra-gravar-flutuante { position: static; box-shadow: none; flex: 0 0 auto; } /* Autocomplete customizado dos campos de busca (Microrregião, Revenda, Agrupamento, Produto etc.) — substitui o nativo, que no celular tem suporte inconsistente (a lista de sugestões às vezes nem aparece) e concorre visualmente com a barra de previsão de texto do próprio teclado. */ .autocomplete-wrap { position: relative; } .autocomplete-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 1060; max-height: 260px; overflow-y: auto; margin-top: 2px; background: #fff; border: 1px solid #ced4da; border-radius: 0.375rem; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } .autocomplete-item { padding: 0.5rem 0.75rem; font-size: 0.875rem; cursor: pointer; } .autocomplete-item:hover, .autocomplete-item.autocomplete-ativo { background: #eaf2ee; color: var(--ja-verde-escuro); } .autocomplete-vazio { padding: 0.5rem 0.75rem; font-size: 0.875rem; color: #6c757d; } /* Calendário customizado do campo "Validade" (ver date-picker.js pro porquê de não usar o nativo — o popup nativo abre fora do lugar quando embedado dentro do visual do Power BI). */ .campo-validade { position: relative; } .campo-validade .input-validade { padding-right: 1.75rem; } .campo-validade .input-validade:disabled { cursor: not-allowed; } .campo-validade > i.bi-calendar3 { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.75rem; color: #6c757d; pointer-events: none; } /* O ícone de validação padrão do Bootstrap (.is-invalid) ocupa o mesmo canto direito do nosso ícone de calendário -- desliga o dele (a borda vermelha + a mensagem abaixo já avisam sozinhas) pra não sobrepor. */ .campo-validade .input-validade.is-invalid { background-image: none; padding-right: 1.75rem; } .campo-validade .invalid-feedback { font-size: 0.75rem; } .datepicker-painel { position: fixed; z-index: 1080; width: 240px; padding: 0.5rem; background: #fff; border: 1px solid #ced4da; border-radius: 0.375rem; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); font-size: 0.875rem; } .datepicker-cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.375rem; font-weight: 600; color: var(--ja-verde-escuro); } .datepicker-nav { border: 0; background: none; line-height: 1; font-size: 1.1rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; color: var(--ja-verde-escuro); } .datepicker-nav:hover { background: #eaf2ee; } /* Título "Agosto de 2026"/ano no cabeçalho -- clicável, sobe pra visão de anos (ver data-nivel="anos" em date-picker.js), pra chegar num ano distante sem precisar navegar mês a mês. */ .datepicker-titulo { border: 0; background: none; font: inherit; font-weight: inherit; color: inherit; padding: 0.125rem 0.375rem; border-radius: 0.25rem; } .datepicker-titulo:hover { background: #eaf2ee; } .datepicker-grade-meses, .datepicker-grade-anos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; } .datepicker-mes, .datepicker-ano { border: 0; background: none; padding: 0.5rem 0; border-radius: 0.25rem; text-transform: capitalize; } .datepicker-mes:hover, .datepicker-ano:hover { background: #eaf2ee; } .datepicker-mes-selecionado, .datepicker-ano-selecionado { background: var(--ja-verde); color: #fff; } .datepicker-mes-selecionado:hover, .datepicker-ano-selecionado:hover { background: var(--ja-verde-escuro); } .datepicker-semana, .datepicker-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .datepicker-semana { margin-bottom: 0.25rem; color: #6c757d; font-size: 0.75rem; } .datepicker-dia { border: 0; background: none; padding: 0.3rem 0; border-radius: 0.25rem; } .datepicker-dia:hover { background: #eaf2ee; } .datepicker-dia-hoje { font-weight: 600; color: var(--ja-verde-escuro); } .datepicker-dia-selecionado { background: var(--ja-verde); color: #fff; } .datepicker-dia-selecionado:hover { background: var(--ja-verde-escuro); } .datepicker-rodape { display: flex; justify-content: space-between; margin-top: 0.5rem; padding-top: 0.375rem; border-top: 1px solid #eee; } .datepicker-rodape button { border: 0; background: none; font-size: 0.8125rem; color: var(--ja-verde); padding: 0.125rem 0.375rem; } .datepicker-rodape button:hover { text-decoration: underline; }