:root { /* Superfícies, bordas e cinzas de texto vêm do canvas "Portal Governança Tech" de 04/09/2026, que é a referência visual vigente do produto. Só o CROMO: os tokens `--mk-*` de DADO, abaixo, continuam sendo os medidos na spec de 30/08 e não são tocados por esta adoção. Misturar cor de dado com cor de interface foi parte do que aquela spec resolveu. O que muda de fato: a página deixa de ser cinza-azulada e passa a quase-branca, o cartão continua branco, as bordas clareiam, e os cinzas de texto ganham dois degraus intermediários que faltavam (era 14/5c/98, e o salto de 5c para 98 era o que empurrava rótulo para um cinza que não passa em contraste). */ --page:#FCFCFB; --bg:#ffffff; --soft:#F1F2F4; --sunk:#FBFBFA; --sel:#F3F6FB; --nav:#EFF1F3; --row:#F4F5F6; --ink:#0D1117; --ink2:#4A515C; --ink3:#6B7280; --ink4:#8B919B; --ink5:#9AA0A8; --ink6:#B9BDC4; --bd:#EDEEEF; --bd2:#E4E5E7; --bd3:#D3D5D9; /* Azul-marinho do canvas. É o mesmo papel do #1d3a5f que estava aqui (aba ativa, barra do recorte), com o valor da referência. */ --accent:#12264F; --accent-deep:#0C1B3A; --accent-2:#4A6291; --accent-3:#8798B8; --accent-bd:#C9D4E6; /* Cor de CROMO positivo: azul institucional, o mesmo de --mk-acc. Laranja (--mk-alarme) fica só para alarme de dado, não para estado disponível, preset ativo ou selo do portal. */ --mk-acc:#1539aa; --accent-alt:var(--mk-acc); /* Cor de DADO. Quatro papéis, quatro tokens, sem sobreposição — nenhum deles veste cromo de interface, e --accent não pinta dado. Misturar as duas coisas foi parte do que gerou a linguagem que estes tokens substituem. Ver docs/decisoes/2026-08-30-linguagem-de-cor-do-painel-design.md --mk-base fica abaixo de 3:1 de propósito: é fundo de contexto, não marca de leitura, e nenhum número depende de enxergá-la. --mk-acc e --mk-alarme passam de 4,5:1 sobre as três superfícies do painel, porque também são cor de TEXTO (os deltas). Medido, não estimado: 9,56 e 5,18 sobre branco. --mk-alarme é o #FF4E05 do Guia de Marca V7 escurecido até passar em texto (o valor do guia dá 3,31:1). Mesma matiz, outra luminosidade, que o guia não trava. */ --mk-base:#c9cfd6; --mk-alt:#8b959f; --mk-alarme:#c2410c; /* `--mono` era usada em cinco lugares e NUNCA foi definida: `.conta-selo`, `.tabela-cab`, `.mono-status`, `.atividade-quando` e o rótulo do rail. Propriedade personalizada inválida faz o `font-family` herdar do pai, então tudo isso caía em Archivo, e o painel e a conta carregavam IBM Plex Mono sem usar. O monoespaçado é a assinatura dos rótulos técnicos na referência visual, e passa a existir de verdade. */ --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* Cores que estavam CRUAS no arquivo e que o tema escuro obriga a nomear. Enquanto havia um tema só, hex solto funcionava; com dois, cada valor cru é um lugar onde metade da tela troca e a outra metade não. Os valores claros abaixo são exatamente os que já estavam no lugar de origem, então esta parte não muda pixel nenhum no claro. */ --sombra:rgba(20,24,28,.12); /* popovers do cabeçalho */ --sombra-forte:rgba(0,0,0,.22); /* menus flutuantes e tooltip */ --grad-topo:#ffffff; --grad-base:#fbfcfd; /* cartão de destaque */ --err-bg:#fdf2f2; --err-bd:#f5c6c6; --err-ink:#a03030; --avz-bg:#fdf8ee; --avz-bd:#f0d9a8; --avz-ink:#7a5a1e; --selo-bg:#e8d4c4; --selo-ink:#5c4033; --hairline:rgba(0,0,0,.06); /* contorno de amostra de cor */ /* Texto sobre superfície de acento. Fica token porque no escuro o acento clareia e o branco cru deixaria de ser a escolha certa em toda parte. */ --sobre-acento:#ffffff; /* Superfície invertida: tooltip e bolha de ajuda. No claro é o texto quase-preto virando fundo; no escuro isso não pode ser `--ink`, que passa a ser quase-branco e deixaria texto branco sobre branco. */ --flut-bg:var(--ink); --flut-ink:#ffffff; --flut-ink2:rgba(255,255,255,.75); /* Texto ESCRITO EM CIMA de cor de dado (os números dentro da barra de composição). No claro a rampa é escura e o branco resolve; no escuro a rampa é clara e o branco desaparece nela. Este token é o que faz o número continuar legível nos dois. */ --sobre-dado:#ffffff; } /* ---------------------------------------------------------------- * TEMA ESCURO ---------------------------------------------------------------- Três gatilhos, e a ordem entre eles é o que faz o botão funcionar nos DOIS sentidos: 1. `@media (prefers-color-scheme: dark)` guardado por `:root:not([data-theme="light"])` — segue o sistema, mas cede quando a pessoa escolheu claro explicitamente; 2. `:root[data-theme="dark"]` — a escolha explícita por escuro vence, inclusive num sistema configurado em claro. Nenhuma cor tem sua ÚNICA definição aqui dentro: tudo que este bloco redefine já existe no `:root` acima. Cor que só existisse no bloco escuro sumiria no claro, e o inverso. As superfícies espelham os papéis do claro, não os valores: `--page` é o fundo mais afastado, `--bg` é o cartão, `--soft` é o realce. No claro a página é mais escura que o cartão; no escuro é o contrário, porque profundidade no escuro se lê com MAIS luz, não com menos. */ :root { /* Os VALORES do escuro vivem aqui, uma vez só, com prefixo `--d-`. Os dois gatilhos abaixo apenas APONTAM os tokens para eles. Escrever a paleta duas vezes (uma na media query, outra no atributo) é o caminho óbvio e é também como as duas versões divergem no primeiro ajuste de cor. */ --d-page:#0E1114; --d-bg:#15191E; --d-soft:#1E242B; --d-sunk:#111519; --d-sel:#16202E; --d-nav:#1A1F25; --d-row:#191E24; --d-ink:#F2F4F6; --d-ink2:#C2C8D0; --d-ink3:#9AA2AC; --d-ink4:#828A94; --d-ink5:#737B85; --d-ink6:#5A616B; --d-bd:#232A31; --d-bd2:#2C333B; --d-bd3:#39414A; /* O acento é FUNDO com texto por cima (aba ativa, barra do recorte). O navy do claro (#12264F) sobre página escura vira quase invisível, então ele sobe de luminosidade até destacar do fundo e continuar carregando texto: branco sobre #2F4E8A dá 8,15:1, medido. */ --d-accent:#2F4E8A; --d-accent-deep:#223A6B; --d-accent-2:#7D93BC; --d-accent-3:#A9B8D4; --d-accent-bd:#33415C; /* RAMPA DE DADO no escuro. Mesma identidade e mesmo sentido da rampa validada em 30/08 — azul institucional é bom, laranja do logo é ruim —, com a luminosidade invertida de papel: no claro os dois são escuros sobre fundo claro, aqui são claros sobre fundo escuro. O sentido não muda, e é isso que não podia mudar. Medido sobre as três superfícies escuras (page, bg, soft), porque `--mk-acc` e `--mk-alarme` também são cor de TEXTO nos deltas: --d-mk-acc #7FA0FF -> 7,55 · 7,04 · 6,24 --d-mk-alarme #FF4E05 -> 5,72 · 5,33 · 4,73 O alarme é o #FF4E05 do Guia de Marca V7 SEM alteração. No claro ele precisou ser escurecido para passar em texto (o valor do guia dá 3,31:1 sobre branco); sobre fundo escuro o valor da marca passa sozinho. É o mesmo laranja do logo, enfim usado como o guia o escreve. `--d-mk-base` fica abaixo de 3:1 de propósito, como no claro: é fundo de contexto, não marca de leitura (1,73 aqui contra 1,57 lá). */ --d-mk-base:#39424C; --d-mk-alt:#9AA4AE; --d-mk-acc:#7FA0FF; --d-mk-alarme:#FF4E05; /* `--accent-alt` NÃO acompanha `--mk-acc` no escuro, e é a única quebra deliberada do vínculo que existe no claro. Lá os dois são o mesmo azul porque o azul institucional serve às duas funções: cor de dado e cromo de estado ativo. Aqui a rampa de dado inverte e fica CLARA, e cromo claro não carrega o texto branco que vive em cima dele — o preset ativo "2026" saiu com 2,51:1, medido no navegador. Este é um azul de meio caminho: branco em cima dá 5,88:1 e ele ainda destaca do cartão (3,00). O sentido da rampa não muda; o que muda é que o cromo deixa de tomá-la emprestada onde ela não serve. */ --d-accent-alt:#3A5FBF; /* Sombra no escuro não é o mesmo recurso: fundo escuro não recebe sombra suave, ela some. O que separa camada aqui é sombra mais densa somada à borda, que no claro seria pesada demais. */ --d-sombra:rgba(0,0,0,.45); --d-sombra-forte:rgba(0,0,0,.6); --d-grad-topo:#1A1F26; --d-grad-base:#15191E; --d-err-bg:#2A1618; --d-err-bd:#5C2B2E; --d-err-ink:#FF9A9A; --d-avz-bg:#241D10; --d-avz-bd:#5A4620; --d-avz-ink:#E8C27A; --d-selo-bg:#3A2B22; --d-selo-ink:#E4C4AC; --d-hairline:rgba(255,255,255,.10); --d-sobre-acento:#ffffff; /* No escuro a superfície flutuante SOBE (mais clara que o cartão), em vez de inverter: inverter aqui daria um retângulo branco piscando por cima de uma tela escura. */ --d-flut-bg:#2B333D; --d-flut-ink:#F2F4F6; --d-flut-ink2:rgba(255,255,255,.72); /* A rampa escura é CLARA, então o número dentro da barra passa a ser escuro. Medido sobre as duas cores de dado que recebem texto: #0E1114 sobre #7FA0FF dá 7,55:1, e sobre #FF4E05 dá 5,72:1. */ --d-sobre-dado:#0E1114; } /* O mapeamento, e só ele, aparece duas vezes: uma para quem não escolheu e deixou o sistema decidir, outra para quem clicou no botão. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; --page:var(--d-page); --bg:var(--d-bg); --soft:var(--d-soft); --sunk:var(--d-sunk); --sel:var(--d-sel); --nav:var(--d-nav); --row:var(--d-row); --ink:var(--d-ink); --ink2:var(--d-ink2); --ink3:var(--d-ink3); --ink4:var(--d-ink4); --ink5:var(--d-ink5); --ink6:var(--d-ink6); --bd:var(--d-bd); --bd2:var(--d-bd2); --bd3:var(--d-bd3); --accent:var(--d-accent); --accent-deep:var(--d-accent-deep); --accent-2:var(--d-accent-2); --accent-3:var(--d-accent-3); --accent-bd:var(--d-accent-bd); --mk-base:var(--d-mk-base); --mk-alt:var(--d-mk-alt); --mk-acc:var(--d-mk-acc); --mk-alarme:var(--d-mk-alarme); --accent-alt:var(--d-accent-alt); --sombra:var(--d-sombra); --sombra-forte:var(--d-sombra-forte); --grad-topo:var(--d-grad-topo); --grad-base:var(--d-grad-base); --err-bg:var(--d-err-bg); --err-bd:var(--d-err-bd); --err-ink:var(--d-err-ink); --avz-bg:var(--d-avz-bg); --avz-bd:var(--d-avz-bd); --avz-ink:var(--d-avz-ink); --selo-bg:var(--d-selo-bg); --selo-ink:var(--d-selo-ink); --hairline:var(--d-hairline); --sobre-acento:var(--d-sobre-acento); --flut-bg:var(--d-flut-bg); --flut-ink:var(--d-flut-ink); --flut-ink2:var(--d-flut-ink2); --sobre-dado:var(--d-sobre-dado); } } :root[data-theme="dark"] { color-scheme:dark; --page:var(--d-page); --bg:var(--d-bg); --soft:var(--d-soft); --sunk:var(--d-sunk); --sel:var(--d-sel); --nav:var(--d-nav); --row:var(--d-row); --ink:var(--d-ink); --ink2:var(--d-ink2); --ink3:var(--d-ink3); --ink4:var(--d-ink4); --ink5:var(--d-ink5); --ink6:var(--d-ink6); --bd:var(--d-bd); --bd2:var(--d-bd2); --bd3:var(--d-bd3); --accent:var(--d-accent); --accent-deep:var(--d-accent-deep); --accent-2:var(--d-accent-2); --accent-3:var(--d-accent-3); --accent-bd:var(--d-accent-bd); --mk-base:var(--d-mk-base); --mk-alt:var(--d-mk-alt); --mk-acc:var(--d-mk-acc); --mk-alarme:var(--d-mk-alarme); --accent-alt:var(--d-accent-alt); --sombra:var(--d-sombra); --sombra-forte:var(--d-sombra-forte); --grad-topo:var(--d-grad-topo); --grad-base:var(--d-grad-base); --err-bg:var(--d-err-bg); --err-bd:var(--d-err-bd); --err-ink:var(--d-err-ink); --avz-bg:var(--d-avz-bg); --avz-bd:var(--d-avz-bd); --avz-ink:var(--d-avz-ink); --selo-bg:var(--d-selo-bg); --selo-ink:var(--d-selo-ink); --hairline:var(--d-hairline); --sobre-acento:var(--d-sobre-acento); --flut-bg:var(--d-flut-bg); --flut-ink:var(--d-flut-ink); --flut-ink2:var(--d-flut-ink2); --sobre-dado:var(--d-sobre-dado); } *{box-sizing:border-box} html,body{margin:0;background:var(--page);color:var(--ink); font-family:"Instrument Sans",ui-sans-serif,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased} .num{font-variant-numeric:tabular-nums} header.top{background:var(--bg);border-bottom:1px solid var(--bd);padding:14px 28px; display:flex;align-items:center;gap:20px;position:sticky;top:0;z-index:20} header.top h1{font-size:17px;margin:0;font-weight:800;letter-spacing:-.01em} header.top .sub{font-size:12px;color:var(--ink3);font-weight:500} /* Volta à home da gestão. Sem isto, quem entra pelo módulo não tem caminho de volta para o portal que pediram na frente do cockpit. */ .portal-voltar{display:block;font-size:11px;font-weight:600;color:var(--ink3); text-decoration:none;letter-spacing:.03em;margin-bottom:2px} .portal-voltar:hover{color:var(--accent-alt)} .portal-voltar:focus-visible{outline:2px solid var(--accent-alt);outline-offset:2px} /* O avatar da conta saiu do topo para o rodapé do rail em 04/09/2026. `.perfil` continua sendo o invólucro posicionado do botão; o que morreu foi só o `margin-left:auto` que o empurrava para a direita do header. */ .periodo{display:flex;align-items:center;gap:4px;margin-left:24px} .periodo button{font:inherit;font-size:12px;font-weight:600;color:var(--ink2); background:var(--bg);border:1px solid var(--bd2);border-radius:6px;padding:6px 11px;cursor:pointer} .periodo button:hover{background:var(--soft);color:var(--ink)} .periodo button.on{background:var(--accent-alt);color:#fff;border-color:var(--accent-alt)} /* Botão desabilitado precisa PARECER desabilitado. Sem isto, 2025 (ano sem dado publicável) e os trimestres e meses que ainda não começaram ficavam idênticos aos clicáveis: o clique não fazia nada e a explicação só existia no `title`, que exige descobrir que se deve passar o mouse. Clique que não responde e não se explica é indistinguível de painel travado. O `title` continua, agora como detalhe de quem já viu que está apagado. */ .periodo button:disabled{opacity:.45;cursor:not-allowed;background:var(--bg)} .periodo button:disabled:hover{background:var(--bg);color:var(--ink2)} .periodo .sep{width:1px;height:20px;background:var(--bd2);margin:0 4px} .periodo .ate{font-size:11.5px;color:var(--ink3)} .periodo input[type=date]{font:inherit;font-size:12px;color:var(--ink2); background:var(--bg);border:1px solid var(--bd2);border-radius:6px;padding:5px 8px} /* botão e popover herdam a mesma pílula de `.periodo button` (cor, borda, estado .on): 12 meses como botão cada um poluiria a barra, então ficam atrás de um único clique, numa grade compacta 4x3 que abre por baixo. */ .filtro-mes{position:relative} .filtro-mes .fm-abre i{font-style:normal;font-size:9px;opacity:.8} /* `display:grid` teria mais especificidade que o `[hidden]` do navegador (duas classes vencem um seletor de atributo) e o popover ficaria sempre aberto, hidden ou não — por isso `:not([hidden])` carrega o grid, e `[hidden]` abaixo garante display:none mesmo assim. */ .filtro-mes .fm-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30; background:var(--bg);border:1px solid var(--bd2);border-radius:8px;padding:6px; box-shadow:0 8px 24px var(--sombra)} .filtro-mes .fm-menu:not([hidden]){display:grid;grid-template-columns:repeat(4,1fr);gap:4px} .filtro-mes .fm-menu[hidden]{display:none} .filtro-mes .fm-menu button{padding:6px 8px;font-size:11.5px;white-space:nowrap} /* o intervalo real (encaixado em mês cheio) é o que responde "de onde saiu esse número", não o apelido do preset: precisa ficar visível ao lado dos campos de data, não escondido num tooltip */ .periodo-real{font-size:11.5px;color:var(--ink3);margin-left:6px;white-space:nowrap} /* Oculto por pedido de 31/08/2026: a lógica de mês fechado (CLAUDE.md) continua rodando, só o aviso na tela foi tirado por enquanto. */ [data-fechamento-status],[data-fechamento-atrasados]{display:none} /* Oculto por pedido de 31/08/2026: os presets (ano, tri, mês) continuam escrevendo em #inDesde/#inAte por baixo, só a digitação manual de data some da tela por enquanto. */ #inDesde,.periodo .ate,#inAte{display:none} /* Perfil no canto: cromo Azure DevOps (círculo à direita), sem identidade inventada. O módulo ainda não existe; o clique abre o recado, não um login de mentira. */ .so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .perfil{position:relative;flex:0 0 auto} .perfil-btn{ width:44px;height:44px;padding:0;border:0;background:transparent; cursor:pointer;display:grid;place-items:center;border-radius:50%; text-decoration:none;color:inherit} .perfil-btn:focus-visible{outline:2px solid var(--accent-alt);outline-offset:2px} .perfil-avatar{ width:32px;height:32px;border-radius:50%; background:var(--selo-bg);color:var(--selo-ink); display:grid;place-items:center} .perfil-avatar svg{fill:currentColor} /* Mesma identidade resolvida do avatar do topo (`portal.js`): boneco genérico até resolver, iniciais navy depois — nunca as duas entradas de "Minha conta" tratando a mesma sessão de jeitos diferentes. */ .perfil-avatar.iniciais{ background:var(--accent);color:var(--sobre-acento); font-size:11.5px;font-weight:600; } .perfil-menu{ position:absolute;top:calc(100% + 8px);right:0;z-index:40; width:240px;padding:12px 14px; background:var(--bg);border:1px solid var(--bd2);border-radius:10px; box-shadow:0 8px 24px var(--sombra);text-align:left} .perfil-menu p{margin:0;font-size:13px;line-height:1.45;color:var(--ink2)} .perfil-menu p:first-child{font-weight:700;color:var(--ink);margin-bottom:4px} /* Notebook comum (1366-1440px, a largura logica mais frequente do parque da empresa; 1728px, a "Space" do MacBook Pro 14", cai na mesma zona). Sem `flex-wrap` no container, o navegador nao move nada para uma linha nova quando aperta: ele ENCOLHE os tres grupos ao mesmo tempo, e o texto que nao cabe mais no botao/rotulo quebra dentro dele. Resultado medido: "Todas as areas" virando tres linhas dentro de um botao de uma linha so, "publicado 29/08, 19:32" cortado ao meio. Duas versoes anteriores erraram a MESMA coisa por caminhos diferentes: escolheram no CSS quem desce, por breakpoint fixo. A de 30/08 mandava o periodo para baixo, e a usuaria apontou: "esses filtros devem ficar aonde estavam antes, delicadamente ao lado do titulo, nao abaixo. assim pesou muito". A correcao seguinte mandou o status para baixo -- e ela apontou de novo, agora com os dois blocos separados sem motivo. Estava certa nas duas vezes, e o numero mostra por que: medido na tela dela, titulo 312px + periodo 824px + status 455px + gaps = 1631px numa viewport de 1710px. CABIA. Quem quebrava era o `max-width:1780px` decidindo por antecipacao uma falta de espaco que nao existia. Entao aqui nao se escolhe mais quem desce: `flex-wrap` deixa o proprio navegador quebrar quando faltar espaco de verdade. A barra de periodo tambem pode encolher e quebrar por dentro, sempre limitada a largura do conteudo. Ate 1200px ela ocupa uma linha propria, porque o rail lateral reduz a largura util sem reduzir a viewport na mesma proporcao. Nenhum `order`: a ordem visual passa a ser a do HTML. So ate 601px: abaixo disso a regra do celular (mais adiante) empilha tudo em tres blocos, e essas regras de alinhamento a direita atrapalham. */ @media(min-width:601px) and (max-width:1780px){ /* `justify-content:flex-end` com `margin-right:auto` no titulo faz o trabalho nas DUAS linhas com uma regra so: na primeira, o auto do titulo come todo o espaco sobrando e empurra periodo+status juntos para a direita; na segunda, quando o status desce sozinho, e o flex-end que o mantem alinhado a direita, embaixo de onde ele estava, em vez de largado no canto esquerdo longe do proprio contexto. */ header.top{flex-wrap:wrap;row-gap:8px;justify-content:flex-end} header.top > :first-child{margin-right:auto} .periodo{margin-left:0;max-width:100%;min-width:0;flex:0 1 auto; flex-wrap:wrap;justify-content:flex-end} } @media(min-width:601px) and (max-width:1200px){ /* Com o rail lateral, a largura útil é menor que a viewport. A barra ocupa uma linha própria dentro do header e quebra ali, sem atravessar a sidebar quando filtros e chips crescem. */ .periodo{width:100%;flex-basis:100%} /* Cinco cards executivos formam uma linha regular na faixa em que seis cards deixavam o último isolado e esticado. */ .pn-item{flex:1 1 20%;min-width:0} } /* telas estreitas: o header em linha única (título + período + status) vaza a viewport e deixa a data final / botão Atualizar inacessíveis. Empilha o header e deixa a barra de período quebrar linha e rolar horizontalmente como rede de segurança, sem alterar nada no layout largo (desktop). */ @media(max-width:600px){ body{min-width:0} main{width:100%;box-sizing:border-box;overflow-wrap:anywhere} .card,.ct-hero,.panorama,.kpis{max-width:100%;box-sizing:border-box} header.top{flex-wrap:wrap;padding:12px 14px;gap:10px} /* `overflow-x:auto` era a rede de segurança de quando a barra não quebrava linha. Com `flex-wrap` ela quebra, e o overflow deixou de proteger para passar a atrapalhar: contêiner com overflow diferente de `visible` RECORTA descendente posicionado em absoluto, e os três menus de filtro abriam cortados numa faixa de poucos pixels. Só apareceu no navegador — jsdom não faz layout, então nenhum teste de DOM pega isto. */ .periodo{margin-left:0;width:100%;flex-wrap:wrap;overflow:visible} /* O divisor separa grupos que estão LADO A LADO. Quando a barra quebra em linhas, a própria quebra já separa, e o traço sobra na ponta da linha anterior sem nada ao lado — um risco vertical solto que não divide coisa nenhuma. Some junto com a premissa que o justificava. */ .periodo .sep{display:none} } nav.tabs{background:var(--bg);border-bottom:1px solid var(--bd);padding:0 28px;display:flex;gap:2px; position:sticky;top:57px;z-index:19} nav.tabs button{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink3);background:none; border:none;border-bottom:2px solid transparent;padding:11px 16px;cursor:pointer} nav.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)} nav.tabs button:hover{color:var(--ink)} main{padding:24px 28px 60px;max-width:1800px;margin:0 auto} section.tab{display:none} section.tab.on{display:block} .eyebrow-periodo{font-size:12px;color:var(--ink3);margin:0 0 14px;line-height:1.5} .eyebrow-periodo b{color:var(--ink2)} .pergunta{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin:0 0 4px} /* panorama: o "tamanho" do time e do trabalho, em números grandes, no topo */ .panorama{display:flex;flex-wrap:wrap;gap:0;background:var(--bg);border:1px solid var(--bd); border-radius:12px;padding:6px 4px;margin:14px 0 20px} .pn-item{flex:1 1 130px;padding:12px 18px;position:relative;text-align:center} .pn-item+.pn-item::before{content:'';position:absolute;left:0;top:16%;bottom:16%;width:1px;background:var(--bd)} .pn-v{font-size:28px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink)} .pn-l{font-size:11px;color:var(--ink3);font-weight:600;margin-top:6px} .pn-tag{display:block;font-size:9.5px;font-weight:600;color:var(--ink3);opacity:.6; text-transform:uppercase;letter-spacing:.03em;margin-top:2px} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px} .kpi{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:16px 18px} .kpi .lb{font-size:11.5px;color:var(--ink3);font-weight:600;margin-bottom:7px} .kpi .lb .linha{display:flex;align-items:center;gap:5px} .kpi .lb .pl{display:block;font-weight:500;color:var(--ink2);font-size:10.5px;margin-top:2px} .kpi .vl{font-size:32px;font-weight:800;line-height:1;letter-spacing:-.02em} .kpi .vl .u{font-size:13px;font-weight:600;color:var(--ink2);margin-left:3px} /* Amostra abaixo do piso: o lugar da manchete passa a dizer por que não há manchete. Tamanho menor e cor de texto secundário, porque isto não é um valor a comparar com os outros cards — é a ausência de um. O número em si continua no rodapé do card. */ .kpi .vl .vl-fraco{font-size:15px;font-weight:600;color:var(--ink3);letter-spacing:normal} .kpi .ft{font-size:11.5px;color:var(--ink3);margin-top:7px} .kpi.hl{background:linear-gradient(180deg,var(--grad-topo),var(--grad-base));border-color:var(--bd2)} .ct-hero{display:flex;align-items:flex-end;flex-wrap:wrap;gap:28px;margin-bottom:22px; padding:20px 24px;background:linear-gradient(180deg,var(--grad-topo),var(--grad-base));border:1px solid var(--bd2);border-radius:10px} .ct-hero-lb{font-size:12px;color:var(--ink3);font-weight:600;margin-bottom:4px} .ct-hero-vl{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)} .ct-hero-vl .u{font-size:18px;font-weight:600;color:var(--ink2);margin-left:6px} .ct-hero-sub{font-size:13.5px;font-weight:600;color:var(--ink2);margin-top:8px} .ct-hero-stats{display:flex;gap:26px;flex-wrap:wrap;margin-left:auto} .ct-hero-stats .v{font-size:20px;font-weight:700;color:var(--ink)} .ct-hero-stats .l{font-size:11px;color:var(--ink3);font-weight:600;margin-top:2px} .card{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:18px 20px;margin-bottom:16px} .card h2{font-size:14.5px;margin:0 0 3px;font-weight:700} /* Sobrancelha do card. Existe porque o painel é lido AOS PEDAÇOS: a usuária recorta um card e manda num print, e aí o período — que só vive no cabeçalho da página — some junto com o resto da tela. Um número de dias sem o intervalo que o gerou é um número que viaja errado. */ .eyebrow-card{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--ink3);margin:0 0 5px} .card h2 b{color:var(--mk-acc);font-weight:700} /* Cabeçalho do gráfico: sentido do eixo e a régua de comparação, acima das barras. As setas fazem o trabalho que dois períodos de texto no `hint` faziam antes — e fazem no lugar onde a dúvida aparece, que é olhando a barra, não lendo o parágrafo. */ .ct-row.ct-cab{padding:0 0 6px} .ct-cab .cab{position:relative;height:34px} .ct-cab .dir{position:absolute;bottom:0;font-size:10px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--ink3);white-space:nowrap} .ct-cab .dir.esq{right:calc(100% - var(--zero, 50%));padding-right:10px} .ct-cab .dir.dirD{left:var(--zero, 50%);padding-left:10px} .ct-cab .zlb{position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;font-weight:700; color:var(--ink2);white-space:nowrap;background:var(--bg);padding:0 6px} .ct-cab .ztick{position:absolute;bottom:-6px;width:1px;height:8px;background:var(--ink2)} .ressalvas{font-size:11px;color:var(--ink3);line-height:1.5;margin:10px 0 0} .ressalvas b{color:var(--ink2);font-weight:700} /* Chave de cor. Gerada pelo mesmo código que pinta — ver chaveDeCor() em painel.js — porque três cards já descreveram a regra de cor em prosa e os três estavam errados quando alguém foi conferir. */ .lg.chave{margin-top:10px;font-size:11px;font-weight:600;color:var(--ink3);gap:14px} .lg.chave .mk{width:9px;height:9px;border-radius:2px;flex:none;display:inline-block} /* A mediana é um TRAÇO dentro da faixa, não uma barra que vem de zero. A barra de zero cobria metade do q1–q3 e fazia o hint mentir: ele dizia "marca a mediana" e o desenho somava "tudo até a mediana". */ .ct-row .track .med{position:absolute;top:2px;bottom:2px;width:3px;border-radius:2px; background:var(--mk-alt);transform:translateX(-1.5px);z-index:2} .ct-row.fora .track .med{background:var(--mk-alarme)} /* régua acima da lista, fora da caixa de rolagem */ .ct-row.ct-eixo-topo{padding:0 0 2px} .ct-row.ct-eixo-topo .eixo{border-top:0;border-bottom:1.5px solid var(--bd2);height:20px} .ct-row.ct-eixo-topo .tk{top:0} .card .hint{font-size:12px;color:var(--ink3);margin:0 0 14px;line-height:1.5} table{width:100%;border-collapse:collapse;font-size:13px} th{text-align:left;font-size:10.5px;color:var(--ink3);font-weight:700;letter-spacing:.04em; text-transform:uppercase;padding:8px 10px 8px 0;border-bottom:1px solid var(--bd2);white-space:nowrap;cursor:pointer;user-select:none} th.n,td.n{text-align:right} th:hover{color:var(--ink)} /* nem toda tabela é ordenável: sem isso o cabeçalho de uma tabela de leitura convida a um clique que não faz nada */ table.fixa th{cursor:default} table.fixa th:hover{color:var(--ink3)} th .ar{opacity:.4;font-size:9px;margin-left:3px} td{padding:9px 10px 9px 0;border-bottom:1px solid var(--bd);vertical-align:middle} tr:last-child td{border-bottom:none} tbody tr:hover td{background:var(--soft)} td.nm{font-weight:600} td.g{color:var(--ink2);font-size:12px} /* Tabela larga em tela estreita: rolar horizontalmente levava a primeira coluna embora junto, e aí as colunas de número ficavam sem dizer de quem são. A coluna que identifica a linha gruda. Só onde a rolagem existe, e só na largura em que ela acontece — em tela larga a tabela cabe inteira e nada precisa grudar. */ .rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch} @media (max-width:760px){ .rolagem table{min-width:560px} .rolagem th:first-child,.rolagem td:first-child{ position:sticky;left:0;z-index:2;background:var(--bg); /* sem teto, o nome da área com "(27 squads cadastradas)" junto ocupava dois terços da tela e os números passavam por baixo dele quase inteiros: sobrava "3d" de "53,7d", que é pior que não mostrar. O nome quebra em mais linhas e o número ganha espaço. */ max-width:150px; /* a borda sai na direita porque a da grade é a de baixo, e sem ela o número parece continuar dentro do nome quando passa por trás */ box-shadow:1px 0 0 var(--bd2)} /* o fundo grudado é opaco de propósito: transparente deixaria o conteúdo rolar POR BAIXO do nome. Por isso cada estado de linha repete o seu. */ .rolagem tbody tr:hover td:first-child{background:var(--soft)} .rolagem tbody tr.linha-sub td:first-child{background:var(--soft)} .rolagem tbody tr.linha-sub:hover td:first-child{background:var(--bd)} } td.n{font-weight:700;font-size:13.5px} td.dim{color:var(--ink3);font-weight:400} /* segunda linha do cabeçalho: diz a convenção da coluna onde ela vale, em vez de num parágrafo acima da tabela */ th .th-sub{display:block;font-size:9px;font-weight:600;letter-spacing:.02em; color:var(--ink3);text-transform:none;margin-top:2px} /* Drill-down de Áreas: a squad é uma linha da MESMA tabela, então herda a grade e fica alinhada com a linha-mãe sem nenhum ajuste manual. O que marca a hierarquia é o recuo e o fundo, não uma tabela aninhada. */ tbody tr.linha-sub td{background:var(--soft);font-size:12px;padding-top:7px;padding-bottom:7px; border-bottom:1px solid var(--bd)} tbody tr.linha-sub:hover td{background:var(--bd)} tbody tr.linha-sub td.nm{font-weight:600} tbody tr.linha-sub td.n{font-weight:600;font-size:12.5px} td.sub-nm{padding-left:26px} /* gerente e itens/mês descem para baixo do que rotulam: viram contexto da célula, não colunas próprias competindo com as métricas */ .sub-meta{display:block;font-size:10.5px;font-weight:400;color:var(--ink3);margin-top:1px} .sub-md{color:var(--ink3);font-weight:400} /* ausência de base de cálculo dentro de tabela. Não é número: não usa tabular-nums nem peso de valor, para não competir com os números reais */ .sem{font-size:11px;color:var(--ink3);font-weight:600;font-variant-numeric:normal} td.sub-vazio{background:var(--soft);color:var(--ink3);font-size:12px;padding-left:26px} .tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink2)} .dot{width:7px;height:7px;border-radius:50%;flex:none} /* Legenda que também é controle: clicar isola a série no gráfico. Ela PRECISA parecer clicável, senão vira decoração que ninguém tenta usar, e precisa de foco visível porque é botão de verdade e navegável por teclado. */ .chart-legend button.serie{font:inherit;display:flex;align-items:center;gap:6px; background:none;border:1px solid transparent;border-radius:5px;padding:3px 7px; color:inherit;cursor:pointer;transition:background .12s,opacity .12s} .chart-legend button.serie:hover{background:var(--soft)} .chart-legend button.serie:focus-visible{outline:2px solid var(--accent);outline-offset:1px} /* Área escondida fica apagada, nunca some: a legenda é o mapa do que existe, não do que está desenhado. O ponto de cor perde saturação junto, senão a bolinha viva ao lado do texto apagado diz duas coisas contrárias. */ .chart-legend button.serie.off{opacity:.4} .chart-legend button.serie.off .dot{filter:saturate(.15)} /* a global não é clicável: fica no mesmo alinhamento dos botões, sem os sinais de que responde a clique */ .chart-legend .serie-fixa{display:flex;align-items:center;gap:6px;padding:3px 7px; border:1px solid transparent} .chart-legend .dot-global{background:var(--ink2);opacity:.75} .bar{position:relative;height:9px;background:var(--soft);border-radius:3px;min-width:60px} .bar i{position:absolute;inset:0 auto 0 0;border-radius:3px} .split{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:1100px){.split{grid-template-columns:1fr}} /* Aba Horas: as quatro visões cabem na mesma tela. Listas longas rolam dentro do card, não empurram o resto para baixo da dobra. */ #tab-horas .split{margin-bottom:16px;align-items:stretch} #tab-horas .split .card{margin-bottom:0;display:flex;flex-direction:column;min-height:0} #tab-horas .corpo-rolavel{overflow:auto;max-height:min(420px,48vh);-webkit-overflow-scrolling:touch} #tab-horas .ct-hero{margin-bottom:16px;padding:16px 20px} #tab-horas .ct-hero-vl{font-size:44px} .fl{display:flex;height:26px;border-radius:6px;overflow:hidden;border:1px solid var(--bd)} .fl div{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--sobre-dado)} /* Distribuição por origem: barra mais alta e detalhe em linhas, para fatias pequenas e tons claros não dependerem de porcentagem dentro do segmento. */ .dist-origem .dist-bar{height:38px;border-radius:8px;margin-top:2px} .dist-origem .dist-bar div{min-width:2px;font-size:12px} .dist-origem .dist-bar div.claro{color:var(--ink2)} .dist-linhas{margin-top:16px;display:grid;gap:10px} .dist-linha{display:grid;grid-template-columns:12px 1fr auto auto;gap:10px 14px; align-items:center;font-size:12.5px} .dist-cor{width:12px;height:12px;border-radius:3px;flex:none;border:1px solid var(--hairline)} .dist-nome{font-weight:600;color:var(--ink)} .dist-val{font-weight:700;color:var(--ink2);white-space:nowrap} .dist-pct{font-weight:700;color:var(--ink3);min-width:2.5em;text-align:right;white-space:nowrap} .lg{display:flex;gap:16px;margin-top:9px;font-size:11.5px;color:var(--ink2);font-weight:600;flex-wrap:wrap} .lg span{display:flex;align-items:center;gap:5px} /* horas por cargo: nome, por que entra ou não, barra e valor. Quem está fora do recorte perde peso, e não a linha: a regra da casa é que o que não conta some do indicador, nunca da tela. */ table.cargos{width:100%;border-collapse:collapse;font-size:12px} table.cargos td{padding:3px 8px 3px 0;vertical-align:middle;border:0} table.cargos td.nm{white-space:nowrap;font-weight:600;color:var(--ink)} table.cargos td.cl{white-space:nowrap;font-size:11px;color:var(--ink3)} table.cargos td.br{width:52%} table.cargos td.br span{display:block;height:11px;border-radius:3px;min-width:2px} table.cargos td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums; font-weight:700;color:var(--ink2)} table.cargos tr.fora td.nm{font-weight:500;color:var(--ink2)} table.cargos tr.fora td.n{font-weight:500;color:var(--ink3)} /* ícone de info com tooltip: explica o termo sem sair da tela */ .info{ display:inline-flex;align-items:center;justify-content:center; width:14px;height:14px;border-radius:50%;background:var(--bd2);color:var(--bg); font-size:9.5px;font-weight:800;font-style:normal;flex:none;cursor:help; position:relative;margin-left:5px;vertical-align:middle; } .info:hover{background:var(--accent)} .info .bolha{ display:none;position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%); width:240px;background:var(--flut-bg);color:var(--flut-ink);font-size:11.5px;font-weight:400;line-height:1.5; text-align:left;padding:9px 11px;border-radius:8px;box-shadow:0 8px 20px var(--sombra-forte);z-index:30; white-space:normal;text-transform:none;letter-spacing:normal; } .info .bolha b{font-weight:700} .info .bolha::after{ content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%); border:5px solid transparent;border-top-color:var(--ink); } .info:hover .bolha{display:block} /* A bolha é centrada no ícone e tem largura fixa: no último item de uma fileira, metade dela cai fora da janela e o texto é cortado (achado de QA em 01/09/2026, reproduzido em 1376px e 993px no KPI "Features entregues", que é o último do painel de topo). Perto da borda direita ela ancora pela direita em vez do centro, e a setinha acompanha. O seletor mira o último item de cada bloco, que é onde o problema é estrutural e não depende de largura. Um flip de verdade, para qualquer item que por acaso caia na borda depois de a grade refluir, precisaria medir posição em tempo de execução; isto cobre o caso reportado sem JavaScript e sem depender de contagem de colunas. */ .panorama .pn-item:last-child .info .bolha, .kpis > :last-child .info .bolha{left:auto;right:-6px;transform:none} .panorama .pn-item:last-child .info .bolha::after, .kpis > :last-child .info .bolha::after{left:auto;right:12px;transform:none} .kpi .lb .info{margin-left:4px} /* nos cabeçalhos de tabela o wrapper tem overflow e recortaria a bolha acima; joga ela para baixo do cabeçalho, que está sempre no topo */ th .info{margin-left:4px} th .info .bolha{bottom:auto;top:calc(100% + 7px)} th .info .bolha::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--ink)} /* o painel de topo é a primeira coisa da página: bolha para cima sairia da viewport e o texto ficaria cortado. Aqui ela abre para baixo. */ .pn-l .info .bolha{bottom:auto;top:calc(100% + 7px)} .pn-l .info .bolha::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--ink)} /* linha de tendência (feature cycle time mensal) */ #ctChart svg{width:100%;height:auto;display:block} /* O gráfico é um SVG de 1000 unidades de largura, e os rótulos têm tamanho em unidade de SVG: encolher o desenho para 350px encolhe "10,5" para menos de 4 pixels reais. Não é questão de estilo, é ilegível, e os percentuais em cima das barras chegam a se sobrepor. A saída é a mesma das tabelas largas: manter o desenho no tamanho em que ele foi projetado e deixar a tela rolar até ele. */ @media (max-width:760px){ /* no SVG, e não no bloco que o contém: o bloco pode ter legenda e texto junto, e prosa que só se lê rolando de lado é pior que gráfico pequeno */ .rolagem svg{min-width:620px} } .tooltip{ position:absolute;pointer-events:none;opacity:0;transition:opacity .1s; background:var(--flut-bg);color:var(--flut-ink);border-radius:8px;padding:9px 11px; font-size:12px;line-height:1.5;box-shadow:0 6px 18px var(--sombra-forte); min-width:150px;z-index:25; } .tooltip .t-tit{font-weight:700;font-size:12.5px;margin-bottom:5px} .tooltip .t-row{display:flex;align-items:center;gap:14px;justify-content:space-between} .tooltip .t-row .k{display:flex;align-items:center;gap:6px;color:var(--flut-ink2)} .tooltip .t-row .sw{width:7px;height:7px;border-radius:50%;flex:none} .tooltip .t-row .v{font-weight:700;font-variant-numeric:tabular-nums} /* leaderboard reutilizado do slide original de cycle time */ .ct-row{display:grid;grid-template-columns:168px 1fr 78px;gap:18px;align-items:center;padding:7px 0} .ct-row.com-volume{grid-template-columns:168px 1fr 78px 92px} .ct-row .vol{text-align:right;border-left:1px solid var(--bd);padding-left:14px} .ct-row .vol .v{font-size:15px;font-weight:700;color:var(--ink2)} .ct-row .vol .l{font-size:9px;color:var(--ink3);font-weight:600;letter-spacing:.03em;text-transform:uppercase} .ct-row .nome{font-size:14px;font-weight:700} .ct-row .n{font-size:11px;color:var(--ink3);font-weight:500;margin-top:1px} .ct-row .track{position:relative;height:20px;background:var(--soft);border-radius:5px;overflow:hidden} .ct-row .fill{position:absolute;top:0;left:0;height:100%;border-radius:5px} /* fica dentro do track porque ele tem overflow:hidden (que impede a barra de vazar do card quando um valor passa da escala) */ .ct-row .tick{position:absolute;top:0;width:2px;height:100%;background:var(--ink);opacity:.55} /* A mediana global, de onde toda barra do bloco "Por área" sai. Fica na tinta neutra, nunca na cor de destaque: ela é a régua, não a mensagem — azul aqui daria duas marcas de destaque disputando o mesmo gráfico. */ .ct-row .track .zero{position:absolute;top:0;width:1px;height:100%; background:var(--ink2);opacity:.55;z-index:2} /* Squad que passa da régua das áreas. O `overflow:hidden` do track já impediria o estouro, mas cortar em silêncio faz a barra afirmar que parou ali. A máscara desmancha a ponta: a barra passa a dizer "continua fora da tela", e o número exato ao lado é que fecha a informação. */ .ct-row.fora .fill{border-radius:5px 0 0 5px; -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 100%); mask-image:linear-gradient(90deg,#000 78%,transparent 100%)} /* A régua de dias é uma linha do MESMO grid das áreas, então cai alinhada com a coluna da trilha sem nenhum ajuste manual — e continua alinhada se alguém mexer nas larguras das colunas. É a mesma ideia do drill-down de Áreas, que é linha da mesma tabela em vez de tabela aninhada. */ .ct-row.ct-eixo{padding:0;align-items:stretch} /* a régua das squads é do mesmo tipo, mas dentro do grupo aberto: herda o recuo e a guia vertical de .ct-sub, e por isso se lê como parte do detalhe, não como uma segunda régua do bloco todo */ .ct-row.ct-eixo-sub{padding:0 0 4px 26px} .ct-row.ct-eixo-sub .eixo{height:17px} .ct-row.ct-eixo-sub .tk{font-size:9.5px} .ct-eixo .eixo{position:relative;height:19px;border-top:1.5px solid var(--bd2)} .ct-eixo .tk{position:absolute;top:4px;transform:translateX(-50%);font-size:10px; color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap} /* a mediana global é a única marca nomeada da régua: é de onde toda barra sai, e sem o nome ela vira um traço sem explicação */ .ct-eixo .eixo-zero{position:absolute;top:-2px;width:1px;height:7px;background:var(--ink2)} .ct-eixo .zero-lb{top:4px;color:var(--ink2);font-weight:600;background:var(--bg); padding:0 5px;z-index:2} .ct-row .val{text-align:right} .ct-row .val .v{font-size:20px;font-weight:800;letter-spacing:-.01em} .ct-row .val .l{font-size:9px;color:var(--ink3);font-weight:600;letter-spacing:.03em;text-transform:uppercase} /* célula de duração/taxa sem base de cálculo. Deliberadamente NÃO parece número: peso e tamanho de texto, não de valor, para ninguém ler como resultado ruim quando é ausência de resultado. */ .ct-row .val .vazio,.ct-row .vol .vazio{font-size:11px;font-weight:600;color:var(--ink3); line-height:1.25;letter-spacing:0;text-transform:none} /* drill-down área -> squads: precisa ficar óbvio que uma coisa é filha da outra, então a squad não usa a mesma cor de fundo nem o mesmo peso de fonte da área, só uma barra de status igual ao resto */ .ct-area-grupo{border-bottom:1px solid var(--bd);padding-bottom:2px;margin-bottom:2px} .ct-area-grupo:last-child{border-bottom:none} .ct-row.ct-area{background:var(--soft);border-radius:8px;padding:9px 12px;margin:3px 0} .ct-row.ct-sub{grid-template-columns:168px 1fr 78px;padding:5px 0 5px 26px;position:relative;background:none} .ct-row.ct-sub::before{content:'';position:absolute;left:9px;top:0;bottom:0;width:1px;background:var(--bd2)} .ct-row.ct-sub .nome{font-size:12.5px;font-weight:600;color:var(--ink2)} .ct-row.ct-sub .track{height:14px} .ct-row.ct-sub .val .v{font-size:15px} .ct-row.ct-sub.com-volume{grid-template-columns:168px 1fr 78px 92px} .ct-row.ct-sub .vol .v{font-size:13px} /* squad sem apontamento: fica na lista, mas não compete com quem tem número. Sem a pista vazia, a linha pareceria uma barra que não carregou. */ .ct-row.ct-sub.zerada .nome{color:var(--ink3);font-weight:600} .ct-row.ct-sub.zerada .track{background:none;border-bottom:1px dashed var(--bd2);height:1px;align-self:center} /* terceiro nível (squad -> cargos, cargo -> squads). Recua de novo e apaga mais um degrau: sem isso, com três níveis abertos a pessoa perde de quem a linha é filha, que é a única coisa que o drill-down promete. */ .ct-row.ct-sub2{grid-template-columns:168px 1fr 78px 92px;padding:3px 0 3px 48px; position:relative;background:none} .ct-row.ct-sub2::before{content:'';position:absolute;left:31px;top:0;bottom:0; width:1px;background:var(--bd)} .ct-row.ct-sub2 .nome{font-size:11.5px;font-weight:600;color:var(--ink3)} .ct-row.ct-sub2 .n{font-size:10px} .ct-row.ct-sub2 .track{height:10px} .ct-row.ct-sub2 .val .v{font-size:12.5px} .ct-row.ct-sub2 .vol .v{font-size:11px} .ct-row.ct-sub2 .val .l,.ct-row.ct-sub2 .vol .l{display:none} /* quarto nível (cargo -> pessoas). Mais um recuo e mais um degrau de peso: é a folha do drill-down, e folha não compete com o galho. A pista fica mais fina de propósito — aqui o número já vem depois de três divisões, e o comprimento serve para ordenar entre pares, não para comparar com o nível de cima. */ .ct-row.ct-sub3{grid-template-columns:168px 1fr 78px 92px;padding:2px 0 2px 68px; position:relative;background:none} .ct-row.ct-sub3::before{content:'';position:absolute;left:51px;top:0;bottom:0; width:1px;background:var(--bd)} .ct-row.ct-sub3 .nome{font-size:11px;font-weight:500;color:var(--ink3)} .ct-row.ct-sub3 .n{font-size:9.5px} .ct-row.ct-sub3 .track{height:7px} .ct-row.ct-sub3 .val .v{font-size:11.5px} .ct-row.ct-sub3 .vol .v{font-size:10.5px} .ct-row.ct-sub3 .val .l,.ct-row.ct-sub3 .vol .l{display:none} .empty{padding:40px;text-align:center;color:var(--ink3);font-size:13px} .err{background:var(--err-bg);border:1px solid var(--err-bd);color:var(--err-ink);padding:12px 14px;border-radius:8px;font-size:13px;margin-bottom:16px} /* recorte do painel, no topo da Visão geral */ .card.escopo{padding:16px 18px 14px} .escopo-topo{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .escopo-topo h2{margin:0} .escopo-total{margin-left:auto;font-size:13px;color:var(--ink2)} .escopo-total b{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.01em; font-variant-numeric:tabular-nums;margin-right:4px} .escopo-barra{display:flex;gap:3px;margin-top:12px} .escopo-barra .seg{border-radius:6px;padding:9px 12px;min-width:110px; display:flex;align-items:baseline;gap:7px;background:var(--soft); box-shadow:inset 0 0 0 1px var(--bd); font:inherit;text-align:left;border:0;cursor:pointer} .escopo-barra .seg:hover{box-shadow:inset 0 0 0 1px var(--bd2)} .escopo-barra .seg .chev{font-style:normal;font-size:10px;margin-left:auto;opacity:.7} .escopo-barra .seg b{font-size:19px;font-weight:800;letter-spacing:-.01em; color:var(--ink3);font-variant-numeric:tabular-nums} .escopo-barra .seg span{font-size:12px;font-weight:600;color:var(--ink3)} /* o segmento medido é o único com peso visual: a tela inteira fala dele */ .escopo-barra .seg.on{background:var(--accent);box-shadow:none} .escopo-barra .seg.on b,.escopo-barra .seg.on span{color:#fff} .escopo-legenda{display:flex;gap:3px;margin-top:6px} .escopo-legenda>div{min-width:96px;padding:0 12px;font-size:11.5px;color:var(--ink3); display:flex;align-items:center;gap:6px} .escopo-legenda .mk{width:7px;height:7px;border-radius:2px;flex:none; background:var(--bd2)} .escopo-legenda .mk.on{background:var(--accent)} .escopo-lista{margin-top:12px;border-top:1px solid var(--bd);padding-top:12px} .escopo-resumo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:10px} .escopo-resumo .chip{background:var(--soft);border:0;border-radius:5px;padding:4px 9px; font:inherit;font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums; cursor:pointer;box-shadow:inset 0 0 0 1px transparent} .escopo-resumo .chip:hover{box-shadow:inset 0 0 0 1px var(--bd2)} .escopo-resumo .chip b{color:var(--ink2);font-weight:700} .escopo-resumo .chip.on{background:var(--accent);color:#fff} .escopo-resumo .chip.on b{color:#fff} .escopo-resumo .chip.limpar{background:transparent;color:var(--ink3); text-decoration:underline;text-underline-offset:2px;padding-left:4px} /* trecho técnico dentro de aviso: nome de campo e dois números */ .err .mono{display:block;margin-top:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;opacity:.85} .escopo-contagem{font-size:11.5px;color:var(--ink3);align-self:center; font-variant-numeric:tabular-nums} /* colunas em fluxo: o nome carrega a área, então a lista é uma só e se distribui sozinha em vez de deixar um grupo grande virar torre */ .escopo-nomes{list-style:none;margin:0;padding:0;columns:4;column-gap:22px} .escopo-nomes li{font-size:12px;color:var(--ink2);padding:2px 0;line-height:1.35; break-inside:avoid} @media (max-width:1100px){ .escopo-nomes{columns:3} } @media (max-width:760px){ .escopo-nomes{columns:2} } @media (max-width:480px){ .escopo-nomes{columns:1} } @media (max-width:640px){ .escopo-barra,.escopo-legenda{flex-direction:column} .escopo-legenda>div{padding:0} } /* seletor de área no cabeçalho, ao lado do período. O filtro por responsável reusa tudo: dois controles de seleção lado a lado com aparência diferente leem como coisas de natureza diferente. */ .filtro-area,.filtro-responsavel,.filtro-squad{position:relative} .filtro-area .fa-abre,.filtro-responsavel .fa-abre,.filtro-squad .fa-abre{font:inherit;font-size:12px;font-weight:600;color:var(--ink2); background:var(--bg);border:1px solid var(--bd2);border-radius:6px;padding:6px 11px; cursor:pointer;display:flex;align-items:center;gap:6px} .filtro-area .fa-abre:hover,.filtro-responsavel .fa-abre:hover,.filtro-squad .fa-abre:hover{background:var(--soft);color:var(--ink)} /* filtro ligado usa a mesma cor de "preset ativo": é o mesmo tipo de estado */ .filtro-area .fa-abre.on,.filtro-responsavel .fa-abre.on,.filtro-squad .fa-abre.on{background:var(--accent);color:#fff;border-color:var(--accent)} .filtro-area .fa-abre i,.filtro-responsavel .fa-abre i,.filtro-squad .fa-abre i{font-style:normal;font-size:9px;opacity:.8} /* O menu TEM de caber na janela. Com 31 gerentes ele media 1.234px numa janela de 970 e o fim da lista ficava inalcançável — não escondido, sem nenhum jeito de chegar nele. Altura limitada e rolagem só na lista, com busca e rodapé fixos: rolar até o fim para achar "mostrar todos" é o mesmo problema em outra forma. */ /* Mesma armadilha do `.fm-menu` na linha 65, e aqui ela chegou a produção: `display:flex` com duas classes vence o `[hidden]` do navegador (seletor de atributo), então os dois menus ficavam SEMPRE abertos. O `hidden=true` do `fecharMenus` rodava e não mudava nada na tela, e o painel aparecia com os dois popovers travados por cima do conteúdo. O `flex` é necessário (busca e rodapé fixos, lista rolando no meio), então ele vem no `:not([hidden])`, e o `[hidden]` garante o display:none mesmo assim. jsdom não reproduz cascata: nenhum teste de DOM pega isto. */ .filtro-area .fa-menu,.filtro-responsavel .fa-menu,.filtro-squad .fa-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30; background:var(--bg);border:1px solid var(--bd2);border-radius:8px;padding:6px; box-shadow:0 8px 24px var(--sombra);min-width:190px; max-height:calc(100vh - 86px)} .filtro-area .fa-menu:not([hidden]),.filtro-responsavel .fa-menu:not([hidden]),.filtro-squad .fa-menu:not([hidden]){ display:flex;flex-direction:column} .filtro-area .fa-menu[hidden],.filtro-responsavel .fa-menu[hidden],.filtro-squad .fa-menu[hidden]{display:none} /* O menu de squad é mais largo que os outros dois porque o item é mais longo: "Assistencial - Produtos Assistenciais" não cabe nos 190px que bastam para "Digital". A largura é CLAMPADA na viewport, e não fixa: com `min-width:300px` cru ele vazava a tela de 360px e o fim das linhas ficava inalcançável, que é a mesma armadilha que a lista de 31 gerentes já tinha produzido. Vem antes das media queries de propósito: a de 600px precisa continuar vencendo esta por ordem de fonte. */ .filtro-squad .fa-menu{min-width:min(340px,calc(100vw - 32px)); max-width:calc(100vw - 24px)} /* Nome longo QUEBRA em vez de ser cortado. Truncar com reticências esconderia justamente o que distingue duas squads da mesma diretoria, e a pergunta do menu é "qual delas". */ .fa-nome{min-width:0;overflow-wrap:anywhere} .fa-lista{overflow-y:auto;min-height:0;flex:1 1 auto;margin:0 -2px;padding:0 2px} .fa-rodape{flex:none} .fa-busca{flex:none;font:inherit;font-size:12.5px;color:var(--ink); border:1px solid var(--bd2);border-radius:6px;padding:6px 8px;margin-bottom:6px; width:100%;background:var(--bg)} .fa-busca::placeholder{color:var(--ink3)} .fa-busca:focus-visible{outline:2px solid var(--mk-acc);outline-offset:1px;border-color:var(--mk-acc)} /* quantas squads a pessoa responde NESTE recorte. Sem isso marca-se às cegas, e a tela vazia que volta parece "não houve entrega" */ .fa-n{margin-left:auto;padding-left:10px;font-size:11px;color:var(--ink3); font-variant-numeric:tabular-nums;flex:none} .fa-vazio{padding:10px 8px;font-size:12px;color:var(--ink3)} /* o que sobrou depois de aplicar. Fica FORA do menu porque a pergunta ("filtrei o que eu queria?") é feita com o menu já fechado */ .filtro-resumo{font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums; background:var(--soft);border:1px solid var(--bd);border-radius:6px;padding:5px 9px; white-space:nowrap} /* aviso de sugestão de escopo (Task 4): descreve o atalho e desliga com um clique, ao lado do resumo do filtro de verdade */ .filtro-sugerido:not([hidden]){display:flex} .filtro-sugerido{align-items:center;gap:8px;font-size:11.5px;color:var(--ink2); background:var(--soft);border:1px solid var(--bd);border-radius:6px;padding:5px 9px; white-space:nowrap} .filtro-sugerido[hidden]{display:none} .filtro-sugerido button{font:inherit;font-size:11px;color:var(--accent);background:transparent; border:0;padding:0;cursor:pointer;text-decoration:underline} .filtro-area .fa-menu label,.filtro-responsavel .fa-menu label,.filtro-squad .fa-menu label{display:flex;align-items:center;gap:8px;padding:6px 8px; border-radius:5px;font-size:12.5px;color:var(--ink2);cursor:pointer;white-space:nowrap} /* A busca altera o atributo hidden. Como a regra acima declara display, o atributo sozinho perde na cascata e a linha continua visível. */ .filtro-squad .fa-menu label[hidden]{display:none} .filtro-area .fa-menu label:hover,.filtro-responsavel .fa-menu label:hover,.filtro-squad .fa-menu label:hover{background:var(--soft)} .filtro-area .fa-menu .dot,.filtro-responsavel .fa-menu .dot{width:8px;height:8px;border-radius:50%;flex:none} .filtro-area .fa-limpar,.filtro-responsavel .fa-limpar{width:100%;margin-top:4px;border:0;border-top:1px solid var(--bd); background:transparent;font:inherit;font-size:11.5px;color:var(--ink3); padding:7px 8px 3px;cursor:pointer;text-align:left} .filtro-area .fa-limpar:disabled,.filtro-responsavel .fa-limpar:disabled{opacity:.45;cursor:default} .filtro-responsavel .fr-secao{font-size:10.5px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--ink3);padding:7px 8px 3px} .filtro-responsavel .fr-secao+.fr-secao, .filtro-responsavel label+.fr-secao{border-top:1px solid var(--bd);margin-top:4px} .filtro-responsavel .fr-aviso{font-size:11.5px;color:var(--ink3); padding:6px 8px;max-width:230px;white-space:normal} /* Responsividade ponta a ponta: portal, painel e conta. Os blocos acima já cobrem header (600px), tabelas (760px), split (1100px) e escopo (640px). Aqui entram abas, main, hero, rankings e overflow horizontal da página. */ @media (max-width:600px){ nav.tabs{ top:0;position:sticky;padding:0 14px; overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;gap:0} nav.tabs::-webkit-scrollbar{display:none} nav.tabs button{ padding:10px 12px;font-size:12.5px;white-space:nowrap;flex-shrink:0} main{padding:16px 14px 48px} .pergunta{font-size:15px} .kpis{grid-template-columns:1fr} .kpi .vl{font-size:28px} .ct-hero{padding:16px 18px;gap:16px} .ct-hero-vl{font-size:40px} .ct-hero-vl .u{font-size:15px} .ct-hero-stats{margin-left:0;gap:18px;width:100%} .card{padding:14px 16px} #tab-horas .ct-hero{padding:14px 16px} #tab-horas .ct-hero-vl{font-size:36px} #tab-horas .corpo-rolavel{max-height:min(320px,55vh)} /* `position:fixed` com `left`/`right`, e não largura em `100vw`: a unidade de viewport IGNORA a barra de rolagem vertical, então `100vw - 28px` media 472px numa janela de 485 úteis e o menu vazava 7px para fora, levando a página inteira a rolar na horizontal. Ancorar nos dois lados resolve sem precisar saber a largura da barra. `top:auto` é o que mantém o menu logo abaixo do botão: para elemento fixo, deslocamento automático usa a posição estática, que é onde ele cairia no fluxo. Sem isso o `top:calc(100% + 6px)` da regra base passaria a medir 100% da ALTURA DA JANELA e jogaria o menu para fora. */ .filtro-area .fa-menu,.filtro-responsavel .fa-menu,.filtro-squad .fa-menu{ position:fixed;left:14px;right:14px;top:auto; min-width:0;max-width:none;max-height:min(60vh,calc(100vh - 150px))} /* Três controles de filtro na mesma barra. Eles dividem a linha em vez de empurrar um ao outro para fora: com `flex` natural o terceiro saía da viewport e só era alcançável pela rolagem horizontal de emergência. */ .filtro-area,.filtro-squad,.filtro-responsavel{flex:1 1 auto;min-width:0} .filtro-area .fa-abre,.filtro-squad .fa-abre,.filtro-responsavel .fa-abre{ width:100%;justify-content:space-between;min-width:0} /* O resumo é frase, não número: em 360px "nenhuma squad neste recorte — afrouxe o filtro" não cabe numa linha, e `nowrap` o faria vazar por baixo do que estiver ao lado em vez de quebrar. */ .filtro-resumo,.filtro-sugerido{white-space:normal;flex:1 1 100%} } @media (max-width:480px){ .panorama{padding:4px 0} .pn-item{flex:1 1 46%;min-width:0;padding:10px 12px} .pn-item+.pn-item::before{display:none} .pn-v{font-size:24px} .ct-row{ grid-template-columns:minmax(0,1fr) auto; gap:6px 10px;padding:8px 0} .ct-row.com-volume, .ct-row.ct-sub.com-volume{ grid-template-columns:minmax(0,1fr) auto auto} .ct-row .track{grid-column:1 / -1} .ct-row .vol{ border-left:0;padding-left:0;text-align:right} .ct-row.ct-sub{ grid-template-columns:minmax(0,1fr) auto; padding-left:18px} .ct-row.ct-sub.com-volume{ grid-template-columns:minmax(0,1fr) auto auto} .ct-row.ct-sub::before{left:6px} .ct-row.ct-eixo-sub{padding-left:14px} .ct-row .val .v{font-size:17px} .ct-row.ct-sub .val .v{font-size:14px} .ct-row .nome{font-size:13px} .escopo-total{margin-left:0;width:100%} } /* Exceção de qualidade da Alocação do Capacity. Cor de aviso, e nunca a rampa da marca: a rampa diz "quão ruim está o indicador", e isto não é um valor do indicador, é um defeito de captura ao lado dele. */ .alerta-qualidade{border:1px solid var(--avz-bd);background:var(--avz-bg);color:var(--avz-ink); border-radius:8px;padding:11px 13px;font-size:12px;line-height:1.5; margin:0 0 16px} /* Método atrás de um clique. O parágrafo de regra é consulta, não leitura: quem abre a aba quer o número, e quem duvida do número quer a regra inteira. Um `details` serve os dois sem obrigar o primeiro a rolar por cima do segundo. Nada aqui esconde achado: achado fica em `.achados`. */ details.metodo{margin:0 0 14px;font-size:12px;color:var(--ink3)} details.metodo>summary{cursor:pointer;font-weight:600;color:var(--ink2); list-style:none;display:inline-flex;align-items:center;gap:6px; padding:4px 0;user-select:none} details.metodo>summary::-webkit-details-marker{display:none} details.metodo>summary::before{content:'▸';font-size:10px;color:var(--ink3)} details.metodo[open]>summary::before{content:'▾'} details.metodo>summary:hover{color:var(--ink)} details.metodo>p{margin:8px 0 0;line-height:1.55;max-width:78ch} /* Achado é o contrário de método: fica à vista, sem clique. */ ul.achados{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:8px} ul.achados li{font-size:12px;line-height:1.55;color:var(--ink2); border-left:2px solid var(--bd2);padding:2px 0 2px 12px;max-width:88ch} /* Cabeçalho de card com controle à direita: o alternador do ranking. */ .card-topo{display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap} .card-topo h2{margin:0} /* A nota do h2 é a explicação do gráfico como CABEÇALHO, e não como frase de rodapé: ela pertence ao título do que se vai ler, não ao rastro do que já se leu. */ .h2-nota{font-size:11.5px;font-weight:500;color:var(--ink3);margin-left:8px} /* Mesma pílula de `.periodo button`: um segundo vocabulário de botão para o mesmo gesto (escolher entre poucas opções) faria a tela ter dois jeitos de dizer a mesma coisa. */ .seg{display:flex;gap:4px} .seg button{font:inherit;font-size:12px;font-weight:600;color:var(--ink2); background:var(--bg);border:1px solid var(--bd2);border-radius:6px; padding:5px 11px;cursor:pointer} .seg button:hover{background:var(--soft);color:var(--ink)} .seg button.on{background:var(--accent-alt);color:#fff;border-color:var(--accent-alt)}