/* ============================================================ Portal AGÁS — folha de estilos do NÚCLEO Identidade Bloo (10/2026): azul #354E9C, vermelho #D34523, amarelo #F8B233, verde #176C3E, claro #F3F5FB, escuro #353535. Fontes: Plus Jakarta Sans (títulos) + Manrope (texto). LAYOUT 2026 (09/10/2026, pedido do Guilherme: "remodelação total, algo profissional"): barra lateral azul com os módulos, topo branco com o título da tela, cartões sem sombra (borda fina), botões de 44px. Os NOMES de classe dos módulos (.cartao, .kpi, .tabela, .botao, .selo, .filtros, .grade-*, .ter-abas…) continuam os mesmos: quem usa o núcleo ganha o visual novo sem mexer em template. ============================================================ */ :root { --topo-altura: 64px; /* altura do topo fixo — todo sticky sob o topo usa isto */ --lateral-largura: 248px; /* barra lateral (desktop) */ /* PALETA OFICIAL (brand pack Bloo, 10/2026 — "PALETA AGÁS.pdf"): azul #354E9C (Pantone 2728), vermelho #D34523 (7597), amarelo #F8B233 (143), verde #176C3E (6159), claro #F3F5FB, escuro #353535. Derivados (escuro/claro de cada cor) são meus, para hover e fundos. */ --azul: #354E9C; /* azul da marca */ --azul-escuro: #27397A; --azul-claro: #E9EDF7; --azul-texto-claro: #DCE3F7; /* texto sobre o azul (lateral) */ --azul-rotulo: #AFC0F2; /* rótulos discretos sobre o azul */ --vermelho: #D34523; /* vermelho da chama */ --vermelho-escuro: #B2391C; --vermelho-claro: #FBE9E3; --amarelo: #F8B233; /* amarelo da chama */ --amarelo-claro: #FDF2DC; --amarelo-texto: #9A6400; --verde: #176C3E; /* verde da chama (medicinais) */ --verde-claro: #E4F2EA; --tinta: #353535; /* escuro da paleta */ --tinta-2: #5F6478; --tinta-3: #9AA0B5; --superficie: #FFFFFF; --fundo: #F3F5FB; /* claro da paleta */ --linha: #E3E7F2; --linha-forte: #C9D2EC; /* borda de botão secundário e campo em foco */ --ok: #176C3E; /* = verde da marca */ --ok-fundo: #E4F2EA; --erro: #9E1B14; /* erro mais fechado, distinto do vermelho-marca */ --erro-fundo: #FBEAE9; --aviso-fundo: #FDF2DC; --sombra: 0 6px 18px rgba(53, 78, 156, .10); /* só em hover e flutuantes */ --raio: 14px; /* aliases para regras antigas */ --laranja: var(--vermelho); --laranja-escuro: var(--vermelho-escuro); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif; background: var(--fundo); color: var(--tinta); font-size: 15px; line-height: 1.55; min-height: 100vh; } h1, h2, h3 { font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; color: var(--tinta); } h1 { font-size: 1.65rem; font-weight: 800; margin: 0 0 4px; letter-spacing: -.01em; } h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; } a { color: var(--azul); } a:hover { color: var(--azul-escuro); } /* ---------- Casca: lateral + principal ---------- */ .app { display: flex; min-height: 100vh; } .lateral { width: var(--lateral-largura); flex: none; background: var(--azul); color: #fff; display: flex; flex-direction: column; gap: 6px; padding: 20px 14px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; } .principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; padding: 4px 10px 14px; } /* LOGO 1 BRANCO (tagline embaixo) ocupando a largura da lateral (~200px, altura ~80px): a 52px ficava "apagada" (Guilherme, 09/10). */ .marca-logo { width: 100%; max-width: 200px; height: auto; display: block; } .marca-nome { display: none; } .login-logo { height: 150px; width: auto; display: block; } /* 96 ficava pequena no painel (Guilherme, 09/10) */ /* mantida para telas antigas que ainda usem a bola */ .marca-bola { width: 34px; height: 34px; border-radius: 50%; background: var(--vermelho); border: 2px solid #fff; display: grid; place-items: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 18px; } .nav-secao { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--azul-rotulo); padding: 12px 14px 4px; } .menu, .nav { display: flex; flex-direction: column; gap: 2px; } .menu a, .nav a { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 10px; min-height: 42px; color: var(--azul-texto-claro); text-decoration: none; font-weight: 600; font-size: 14px; transition: background .15s, color .15s; } .menu a:hover, .nav a:hover { background: rgba(255,255,255,.10); color: #fff; } .menu a.ativo, .nav a.ativo { background: #fff; color: var(--azul); } .nav svg { width: 20px; height: 20px; flex: none; } .nav .contador { margin-left: auto; background: var(--vermelho); color: #fff; font-size: 11.5px; font-weight: 800; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .menu a.botao-pedido, .nav a.botao-pedido { background: var(--vermelho); color: #fff; justify-content: center; margin: 10px 0 4px; min-height: 46px; font-size: 15px; } .menu a.botao-pedido:hover, .nav a.botao-pedido:hover { background: var(--vermelho-escuro); color: #fff; } /* Menu suspenso "Módulos" (compatibilidade com quem ainda o use) */ .menu-drop { position: relative; } .menu-drop summary { list-style: none; cursor: pointer; user-select: none; color: var(--azul-texto-claro); font-weight: 600; font-size: 14px; padding: 9px 14px; border-radius: 10px; white-space: nowrap; } .menu-drop summary::-webkit-details-marker { display: none; } .menu-drop summary:hover, .menu-drop[open] summary { background: rgba(255,255,255,.10); color: #fff; } .menu-drop summary.ativo { background: #fff; color: var(--azul); } .menu-drop-lista { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 2px 12px; } .menu-drop-lista a { display: flex; border-radius: 8px; } /* Cartão do plantão no rodapé da lateral (equipe) */ .lateral-plantao { margin-top: auto; background: rgba(255,255,255,.10); border-radius: 12px; padding: 14px; position: relative; overflow: hidden; } .lateral-plantao .rotulo { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--azul-rotulo); margin-bottom: 4px; text-transform: uppercase; } .lateral-plantao .nome { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; } .lateral-plantao .detalhe { font-size: 12.5px; color: var(--azul-texto-claro); margin-top: 2px; line-height: 1.45; } .lateral-plantao .chama { position: absolute; right: -26px; bottom: -30px; width: 100px; opacity: .14; pointer-events: none; } .lateral-plantao a { color: #fff; font-weight: 700; font-size: 13px; display: inline-block; margin-top: 8px; position: relative; } .lateral-contato { margin-top: auto; font-size: 12.5px; color: var(--azul-texto-claro); line-height: 1.5; padding: 10px 14px 0; } .lateral-contato b { color: #fff; font-size: 15px; } .lateral-contato a { color: #fff; text-decoration: none; } /* ---------- Topo (dentro do principal) ---------- */ .topo { background: var(--superficie); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 50; } .topo-inner { min-height: var(--topo-altura); padding: 8px 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .topo-titulo { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 17px; color: var(--tinta); text-decoration: none; } .topo-titulo:hover { color: var(--azul); } .sessao { display: flex; align-items: center; gap: 12px; font-size: .9rem; margin-left: auto; } .sessao-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; } .sessao-avatar.verde { background: var(--verde); } .sessao-texto { line-height: 1.2; } .sessao-nome { font-weight: 700; font-size: 13.5px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .sessao-papel { font-size: 12px; color: var(--tinta-2); } .sessao-acoes { display: flex; align-items: center; gap: 4px; padding-left: 12px; border-left: 1px solid var(--linha); } .form-sair { display: inline; margin: 0; } .sair { color: var(--tinta-2); text-decoration: none; font-weight: 700; font-size: 13px; background: none; border: 0; cursor: pointer; font: inherit; padding: 8px 10px; border-radius: 8px; min-height: 36px; display: inline-flex; align-items: center; } .sair:hover { background: var(--fundo); color: var(--azul); } /* ---------- Estrutura ---------- */ /* Largura útil: 1600px ("padronizar em 1600px todas as telas", Guilherme, 02/09). O teto só age em monitor grande; abaixo de 860px o layout é fluido pelas media queries. */ .conteudo { max-width: 1600px; width: 100%; margin: 0 auto; padding: 28px 28px 48px; flex: 1; } .conteudo.conteudo-painel { padding: 14px 20px 24px; } /* o painel incorporado herda o respiro/fonte das antigas regras body{} dele */ .painel-incorporado { width: 100%; } /* Invólucro interno do painel gerado (.wrap nos geradores) NUNCA limita a largura dentro do portal — o teto é da página (.conteudo), não do painel. */ .painel-incorporado .wrap, .painel-incorporado > div[class*="wrap"] { max-width: none !important; width: 100%; margin-left: 0; margin-right: 0; } /* Tela sem sessão (esqueci a senha, QR): cartão centralizado */ .conteudo-solo { display: grid; place-items: center; min-height: 100vh; } .rodape { text-align: center; font-size: .8rem; color: var(--tinta-3); padding: 18px; border-top: 1px solid var(--linha); background: var(--superficie); } .cabecalho-pagina { margin-bottom: 22px; } .cabecalho-pagina p { color: var(--tinta-2); margin: 0; font-size: .95rem; } /* Cabeçalho com ações à direita (opt-in): texto de um lado, botões do outro */ .cabecalho-pagina.com-acoes { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .cabecalho-acoes { display: flex; gap: 10px; flex-wrap: wrap; } /* ---------- Cartões de módulo (home da equipe) ---------- */ .modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; } .mod { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); text-decoration: none; color: var(--tinta); min-height: 44px; transition: border-color .15s, box-shadow .15s; } .mod:hover { border-color: var(--azul); box-shadow: var(--sombra); color: var(--tinta); } .mod .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--azul-claro); color: var(--azul); } .mod .ic svg { width: 22px; height: 22px; } .mod .ic.vermelho { background: var(--vermelho-claro); color: var(--vermelho); } .mod .ic.verde { background: var(--verde-claro); color: var(--verde); } .mod .ic.amarelo { background: var(--amarelo-claro); color: var(--amarelo-texto); } .mod b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 3px; } .mod span { font-size: 13px; color: var(--tinta-2); line-height: 1.45; } .secao-rotulo { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; margin: 0 0 12px; color: var(--tinta-2); letter-spacing: .5px; text-transform: uppercase; } /* ---------- Lista simples (linhas separadas por fio) ---------- */ .lista-simples { display: flex; flex-direction: column; } .lista-simples > * + * { border-top: 1px solid #EEF1F8; } .lista-linha { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 0; } .lista-linha b { font-size: 14px; } .lista-linha .mudo { display: block; font-size: 12.5px; } .lista-linha a { text-decoration: none; } /* ---------- Cartões e grades ---------- */ .cartao { background: var(--superficie); border-radius: var(--raio); border: 1px solid var(--linha); padding: 22px; } /* ESPAÇAMENTO VERTICAL PADRÃO (Guilherme, 02/09, print de cartões "encavalados"): cartão que segue cartão sem grade/pilha por volta ganha 18px de respiro — o mesmo gap de .pilha e .grade-2, para a tela inteira respirar igual. Dentro de grid o gap já cuida; a regra não soma. */ .cartao + .cartao { margin-top: 18px; } /* Buracos da regra de irmãos, achados pelos módulos na auditoria de 02/09: (a) cartão ↔ grade de KPIs / grade-2 encostavam (Cilindros mediu gap 0); (b)
embrulhando cartões quebra a adjacência — o 1º cartão de dentro do form colava no bloco anterior (Ferramentas, Contratos). */ .cartao + .grade-kpi, .grade-kpi + .cartao, .cartao + .grade-2, .grade-2 + .cartao, .grade-kpi + .grade-2, .grade-2 + .grade-kpi { margin-top: 18px; } .cartao + form > .cartao:first-child, .grade-kpi + form > .cartao:first-child, .grade-2 + form > .cartao:first-child, form + .cartao { margin-top: 18px; } /* Dentro de grade (lado a lado) a regra de irmãos NÃO pode agir — o 2º cartão desceria 18px dentro da célula e desalinharia as colunas (aviso do Cobli). Qualquer contêiner de grade da casa começa com "grade" ou é .pilha. */ .pilha > .cartao + .cartao, [class*="grade"] > .cartao + .cartao { margin-top: 0; } .grade-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 22px; } .kpi { background: var(--superficie); border-radius: var(--raio); border: 1px solid var(--linha); padding: 18px 20px; min-width: 0; } .kpi-rotulo { font-size: .76rem; font-weight: 700; color: var(--tinta-2); letter-spacing: .3px; text-transform: uppercase; } /* nowrap: a 1ª reprovação do Guilherme na revisão gráfica foi o "R$" quebrado do número (02/09). minmax subiu de 200 p/ 240 pelo mesmo motivo. */ .kpi-valor { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1.15; margin-top: 4px; white-space: nowrap; } .kpi-detalhe { font-size: .82rem; color: var(--tinta-2); margin-top: 4px; } .kpi-alerta .kpi-valor { color: var(--erro); } .kpi-link { text-decoration: none; color: inherit; display: block; transition: transform .12s, box-shadow .12s; } .kpi-link:hover { border-color: var(--azul); box-shadow: var(--sombra); } /* KPI com fio colorido à esquerda (opt-in, como na home da equipe) */ .kpi-vermelho { border-left: 4px solid var(--vermelho); } .kpi-amarelo { border-left: 4px solid var(--amarelo); } .kpi-azul { border-left: 4px solid var(--azul); } .kpi-verde { border-left: 4px solid var(--verde); } /* Farol dos cartões da home (14/10/2026): bolinha antes do texto. */ .farol { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; } .farol-verde { background: var(--verde); } .farol-amarelo { background: var(--amarelo); } .farol-vermelho { background: var(--vermelho); } .kpi-sub { font-size: .9rem; font-weight: 600; color: var(--tinta-2); } .kpi-nf { border-left: 4px solid var(--amarelo); } .faixa-nf { background: var(--aviso-fundo); border-left: 4px solid var(--amarelo); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: .92rem; color: var(--amarelo-texto); } /* Conta de demonstração (22/09/2026): faixa discreta no topo de toda tela da conta fictícia — quem assiste à demonstração sabe que é simulação. */ .faixa-demo { background: #EEF2FA; border-left: 4px solid var(--marinho, var(--azul)); border-radius: 10px; padding: 8px 14px; margin-bottom: 14px; font-size: .85rem; color: var(--azul); } .grade-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; } /* Item de grid não encolhe abaixo do conteúdo por padrão (min-width:auto): uma tabela larga estourava a grade para fora da tela e o conteúdo deslizava por trás do topo fixo (tela Usuários, 31/08). Com min-width:0 o cartão encolhe e a rolagem fica onde deve: dentro de .tabela-rolagem. */ .grade-2 > *, .pilha > * { min-width: 0; } .pilha { display: grid; gap: 18px; } @media (max-width: 860px) { .grade-2 { grid-template-columns: 1fr; } /* CELULAR: a lateral vira uma faixa azul no alto (logo + fita de links rolável); nada fica fixo — regra 6d do núcleo. */ .app { flex-direction: column; } .lateral { position: static; width: 100%; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px 8px; } .marca { padding: 0; gap: 8px; min-height: 36px; } .marca-logo { width: auto; height: 38px; max-width: none; } .nav-secao, .lateral-plantao, .lateral-contato { display: none; } .menu, .nav { order: 3; flex: 1 1 100%; flex-direction: row; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; } .menu::-webkit-scrollbar, .nav::-webkit-scrollbar { display: none; } .menu a, .nav a { white-space: nowrap; padding: 7px 12px; font-size: 13.5px; min-height: 38px; flex: 0 0 auto; } .nav svg { width: 16px; height: 16px; } .nav a.botao-pedido { margin: 0; min-height: 38px; font-size: 13.5px; } .nav .contador { font-size: 12px; min-width: 20px; height: 20px; margin-left: 6px; } /* régua mobile: texto ≥ 12px (medição do Território, 09/10) */ .menu-drop-lista { padding: 0; flex-direction: row; } .topo-inner { padding: 8px 12px; gap: 10px; } .topo-titulo { font-size: 15px; } .sessao { gap: 8px; } .sessao-texto { display: none; } .sessao-acoes { padding-left: 8px; } } /* ---------- Tabelas ---------- */ .tabela { width: 100%; border-collapse: collapse; font-size: .9rem; } .tabela th { text-align: left; font-size: .74rem; letter-spacing: .5px; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--linha); } .tabela td { padding: 9px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; } .tabela tr:last-child td { border-bottom: 0; } /* nowrap em célula numérica (Guilherme, 10/09/2026, tela Giro do Compras: o "R$" ficava numa linha e o valor na outra). Número nunca quebra; se a tabela não cabe, o excesso rola dentro de .tabela-rolagem. */ .tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* overflow (mesmo só no x) cria contexto de rolagem e o sticky do cabeçalho passa a valer em relação ao WRAPPER — que sem altura não rola, e o cabeçalho ia embora com a página (medido pelo Compras, 02/09: th.top a -338px). Com max-height o quadro rola POR DENTRO e o sticky gruda no topo do próprio quadro — comportamento de planilha, que é o que o Guilherme pediu. */ .tabela-rolagem { overflow: auto; max-height: 70vh; } .tabela-rolagem .tabela thead tr:first-child th { top: 0; } /* Tabela dentro de QUALQUER contêiner rolável (achado do Dash, 22/09: árvores do dash em div overflow-x:auto sem altura — o th sticky a 62px era empurrado para baixo da 1ª linha). O sticky vale em relação ao contêiner, então ali o topo do portal não existe: top 0. Poupa cada módulo de descobrir sozinho. */ .rolagem .tabela thead th, [style*="overflow"] .tabela thead th, [class*="-rolagem"] .tabela thead th { top: 0; } /* Tabela DENSA (padrão do Guilherme, 02/09, via Financeiro: "reduzir e criar scroll horizontal... padrão para todos os pontos com número grande de dados"). OPT-IN: acrescente a classe à .tabela e embrulhe em .tabela-rolagem — o excesso rola na horizontal DENTRO do cartão. */ /* .tabela-compacta é para tabela DENSA DE NÚMEROS. O nowrap dela impede a célula de apertar: onde há formulário (.form-celula) ou texto que precisa quebrar, ela trabalha CONTRA — a tabela vai a 1.100px e o defeito só aparece no celular (Cilindros mediu 1.134 → 487px ao remover, 03/09). */ .tabela-compacta { font-size: .82rem; } .tabela-compacta th, .tabela-compacta td { white-space: nowrap; padding: 6px 10px; } /* CABEÇALHO CONGELADO (padrão do Guilherme, 02/09: "sempre manter o cabeçalho da planilha congelado"). Vale para TODA .tabela: o th gruda logo abaixo do topo fixo (62px) quando a página rola. O fundo é obrigatório — sem ele as linhas apareceriam por trás do texto. z-index abaixo do menu (50) e do dropdown Módulos (60). */ .tabela thead th { position: sticky; top: var(--topo-altura); background: var(--cartao, #fff); z-index: 5; box-shadow: 0 1px 0 var(--linha); /* título e setinha ▾ de filtro na MESMA linha (achado do Financeiro, 10/09: no celular a seta caía sozinha na 2ª linha). Tabela larga rola dentro de .tabela-rolagem, não quebra o cabeçalho. */ white-space: nowrap; } @media (max-width: 860px) { .tabela thead th { top: 0; } } /* PRIMEIRA COLUNA CONGELADA (Guilherme, 09/10/2026, tela Giro do Compras: "sempre congelar a coluna/cabeçalho"). Vale para TODA .tabela dentro de .tabela-rolagem: o rótulo da linha (1ª célula) gruda à esquerda quando a tabela rola na horizontal, como no Excel. Fundo obrigatório pelo mesmo motivo do cabeçalho. z-index: célula do corpo (2) abaixo do cabeçalho (5); o CANTO (th da 1ª coluna) fica acima dos dois (6), senão o cabeçalho das outras colunas passa por cima dele ao rolar. A sombra de 1px à direita marca a borda congelada. Linha com fundo próprio (Total em negrito, zebra) continua: só a célula ganha fundo, não a linha. */ .tabela-rolagem .tabela th:first-child, .tabela-rolagem .tabela td:first-child { position: sticky; left: 0; background: var(--cartao, #fff); z-index: 2; box-shadow: 1px 0 0 var(--linha); } .tabela-rolagem .tabela thead th:first-child { z-index: 6; } /* No celular a .tabela-cartoes vira pilha de cartões (abaixo): célula em bloco não tem coluna para congelar — volta ao fluxo normal. */ @media (max-width: 860px) { .tabela-rolagem .tabela-cartoes td:first-child { position: static; box-shadow: none; } } /* TEXTO CORTADO COM RETICÊNCIAS em célula (Guilherme, 10/09/2026, tela /receber: "pode cortar o final do nome do cliente para não ter scroll na horizontal"). Utilitário ÚNICO do núcleo, pedido pelo Financeiro, para razão social, produto e afins em qualquer tabela: a célula recebe a classe e o texto inteiro vai no title (hover). Larguras em ch (caracteres), três tamanhos; quem precisar de outro pede aqui, não cria classe local. */ /* Sem escopo .tabela de propósito (Financeiro, 10/09): a classe é opt-in por célula, então vale em qualquer tabela (cob-tabela da Cobrança inclusive). Degraus: minimo 14 · curto 18 · medio 24 · (padrão) 30 · longo 44 ch. */ td.corta, td.corta-minimo, td.corta-curto, td.corta-medio, td.corta-longo { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } td.corta-minimo { max-width: 14ch; } td.corta-curto { max-width: 18ch; } td.corta-medio { max-width: 24ch; } td.corta-longo { max-width: 44ch; } /* BOTÃO FLUTUANTE DO WHATSAPP (Guilherme, 22/09/2026) — telas do cliente. Fixo de propósito (exceção do núcleo à regra 6d "nada fixo ≤860": é um único botão de 56px no canto, não uma barra). Verde oficial do WhatsApp. O rodapé ganha respiro embaixo para o botão não cobrir os links. */ /* GRÁFICO RESPONSIVO (Chart.js) — classe do NÚCLEO (24/09/2026, achado do Compras): o canvas desenhado largo segura o cartão aberto quando a tela encolhe (girar de 1600 para 390 deixava a página com 1521px). min-width:0 deixa o contêiner encolher; max-width:100% impede o canvas de ditar a largura mínima. Uso:
com responsive:true e maintainAspectRatio:false no Chart; altura por módulo via classe filha ou style inline. */ .grafico-cx { position: relative; width: 100%; min-width: 0; height: 320px; } .grafico-cx canvas { max-width: 100%; } @media (max-width: 860px) { .grafico-cx { height: 280px; } } .wpp-flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.28); text-decoration: none; transition: transform .12s; } .wpp-flutuante:hover { transform: scale(1.06); background: #1ebe5b; } body:has(.wpp-flutuante) .rodape { padding-bottom: 84px; } /* FILTRO DE COLUNA ESTILO EXCEL (tabela.js) — setinha no th + painel fixo com ordenar/busca/valores distintos. Especificação do Guilherme de 02/09 ("setinha ao lado... lista suspensa com busca e seleção... e opção de classificação"); implementação nasceu no Compras e foi absorvida aqui. */ .fx-seta { border: none; background: none; color: #8a93a8; cursor: pointer; font: inherit; font-size: .85em; margin-left: 4px; padding: 0 4px; border-radius: 4px; vertical-align: middle; line-height: 1; } .fx-seta:hover { color: var(--azul); background: #eef1f7; } .fx-seta.ativa { color: #fff; background: var(--azul); } .fx-painel { position: fixed; z-index: 70; width: 300px; max-width: 88vw; background: #fff; border: 1px solid #cfd6e4; border-radius: 10px; padding: 10px; box-shadow: 0 12px 28px rgba(16,26,60,.18); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--tinta); } .fx-ordenar { display: flex; gap: 6px; margin-bottom: 8px; } .fx-ordenar button { flex: 1; padding: 6px 8px; border: 1px solid #cfd6e4; border-radius: 7px; background: #f4f6fd; color: var(--azul); font: inherit; font-size: .86em; cursor: pointer; } .fx-ordenar button:hover { background: #e4e9fb; } .fx-ord { color: var(--azul); font-size: .75em; margin-left: 4px; vertical-align: middle; } .fx-busca { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #cfd6e4; border-radius: 7px; font: inherit; font-size: .92em; } .fx-acoes { display: flex; gap: 12px; padding: 8px 2px 6px; font-size: .85em; } .fx-acoes button { background: none; border: none; padding: 0; color: var(--azul); cursor: pointer; font: inherit; font-size: 1em; text-decoration: underline; } .fx-lista { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; } .fx-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: .92em; line-height: 1.25; } .fx-item:hover { background: #f2f5fc; } .fx-item input { width: 16px; min-width: 16px; height: 16px; flex: none; margin: 0; } .fx-item:has(input:checked) { background: #eaeefb; } .fx-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fx-n { color: #8a93a8; font-size: .86em; white-space: nowrap; } .fx-vazio { color: #8a93a8; padding: 8px; font-size: .9em; } .filtrada-coluna { display: none !important; } /* ---------- Selos de status ---------- */ .selo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; /* 12px: piso da régua mobile (achado da Cobli, 19/10) */ } .selo-aberto { background: var(--aviso-fundo); color: var(--amarelo-texto); } .selo-vencida { background: var(--erro-fundo); color: var(--erro); } .selo-baixado { background: var(--ok-fundo); color: var(--ok); } .selo-novo { background: var(--vermelho-claro); color: var(--vermelho-escuro); } .selo-aguardando_atendimento { background: var(--aviso-fundo); color: var(--amarelo-texto); } .selo-agendado { background: var(--azul-claro); color: var(--azul); } .selo-finalizado { background: var(--ok-fundo); color: var(--ok); } .selo-cancelado { background: #EEEFF4; color: var(--tinta-2); } .selo-emitente { background: var(--azul-claro); color: var(--azul); } /* ---------- Filtros de segmentação (produto/capacidade + período) ---------- */ .filtros-seg { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 18px; } .filtros-seg label { margin: 0 0 4px; } .filtros-seg select, .filtros-seg input { min-width: 130px; } /* Checkbox/radio dentro de filtro NÃO é campo de texto: o min-width de 130px acima virava uma barra gigante e espremia o rótulo (achado do Compras, 02/09, no filtro em cascata). */ .filtros-seg input[type=checkbox], .filtros-seg input[type=radio] { min-width: 0; } .filtros-seg select { max-width: 340px; } .filtros-seg .botao { padding: 9px 18px; } .oculto { display: none; } /* ---------- Barra de família (Vendas: Dashboard | Aproveitamento | Território) ---------- Nasceu no Território (02/09) e foi PROMOVIDA ao núcleo no mesmo dia por ordem do Guilherme ("formatar o dashboard e o aproveitamento igual ao território, mesmo padrão"): a moldura dos painéis e as telas do Território desenham a MESMA barra a partir de _vendas_barra.jinja. Mesmos seletores que o Território usava, para a troca ser sem susto. */ .ter-abas { display: flex; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; } .ter-abas .aba { padding: 7px 18px; border-radius: 999px; font-weight: 700; font-size: 13.5px; text-decoration: none; } /* abas → 1º BLOCO (filtros, cartão, grade) é vão entre blocos: 18px. Só a sub-aba fica colada às abas (unidade de cabeçalho). Margens de blocos irmãos colapsam, então 10 de baixo + 18 de cima = 18. (Compras, 02/09) */ .ter-abas + *:not(.ter-sub) { margin-top: 18px; } .ter-abas .aba.ativa { background: var(--azul); color: #fff; } .ter-abas a.aba { background: #fff; border: 1px solid #d8dae2; color: #555; } .ter-abas a.aba:hover { border-color: var(--azul); color: var(--azul); } .ter-sub { display: flex; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; } /* 18: sub-abas → 1º bloco é vão entre blocos (Território, 02/09) */ .ter-sub a, .ter-sub span { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; border: 1px solid #d8dae2; background: #fff; color: #555; } .ter-sub span { background: var(--azul); color: #fff; border-color: var(--azul); } /* ---------- Barra de proporção e sparkline (doados pelo Cilindros, 02/09) ---------- Componentes genéricos para célula de tabela. Três pegadinhas já pagas por quem construiu: 1. A LARGURA da barra sai do template (style="width:Npx") COM TETO — ex.: [valor/2, 88]|min. Sem teto, um outlier estoura a célula e desalinha a coluna inteira. 2. Barra de valor ZERO no sparkline precisa de min-height:1px + classe .zero: sem isso ela some, e "mês sem compra" (fato medido) fica igual a "mês inexistente" (ausência de dado). A tela não pode empatar os dois. 3. Convivem com .tabela-compacta (nowrap) sem quebrar linha — testado. */ .barra-proporcao-trilho { display: inline-block; width: 88px; height: 9px; border-radius: 5px; background: var(--azul-claro); vertical-align: middle; margin-right: 7px; } .barra-proporcao { display: inline-block; height: 9px; border-radius: 5px; background: var(--azul); vertical-align: middle; min-width: 2px; } .sparkline { display: flex; align-items: flex-end; gap: 2px; height: 30px; } .sparkline i { display: block; width: 7px; background: var(--azul); border-radius: 2px 2px 0 0; min-height: 1px; } .sparkline i.zero { background: var(--linha); } /* ---------- Botão-link e formulário em célula (doados pelo Cilindros, 02/09) ---------- .botao-link: ação inline no meio de texto ou dentro de célula, sem o peso visual de botão. Continua sendo