: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). */ /* ALIAS PARA O DESIGN, NÃO VALOR PRÓPRIO. Antes daqui cada token abaixo tinha hex escrito à mão, e `tokens.css` (que é a transcrição do `Portal Tech.html`, a referência visual aprovada) tinha o seu. Os dois conjuntos divergiram sem ninguém perceber: no claro, 7 dos 21 pares equivalentes; no escuro, os 11 medidos, inclusive o acento. Texto e azul batiam; superfície e borda não. O efeito era a tela inteira em cinza-azulado enquanto a referência é bege quente, e isso lê como "outro produto" mesmo com a mesma fonte. Apontar em vez de copiar é o que impede a divergência de voltar: o valor existe em UM lugar só, e o tema escuro vem junto de graça, porque `tokens.css` já troca estes mesmos tokens no escuro. `tokens.css` é carregado ANTES deste arquivo em toda página que usa `estilo.css` — as quatro telas de auth que não o carregavam passaram a carregar na mesma mudança. O fallback depois da vírgula é o valor antigo: se alguém servir `estilo.css` sem `tokens.css`, a tela degrada para o que era, em vez de perder a cor. */ --page:var(--s-app,#FCFCFB); --bg:var(--s-card,#ffffff); --soft:var(--b-soft,#F1F2F4); --sunk:var(--s-sunk,#FBFBFA); --sel:var(--s-sel,#F3F6FB); --nav:var(--s-nav,#EFF1F3); --row:var(--b-row,#F4F5F6); --ink:var(--t-1,#0D1117); --ink2:var(--t-2,#4A515C); --ink3:var(--t-3,#6B7280); --ink4:var(--t-4,#8B919B); --ink5:var(--t-5,#9AA0A8); --ink6:var(--t-6,#B9BDC4); --bd:var(--b-card,#EDEEEF); --bd2:var(--b-line,#E4E5E7); --bd3:var(--b-strong,#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:var(--a-1,#12264F); --accent-deep:var(--a-deep,#0C1B3A); --accent-2:var(--a-2,#4A6291); --accent-3:var(--a-3,#8798B8); --accent-bd:var(--a-border,#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-bar:#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. */ /* Mesmo alias do claro, pelo mesmo motivo, e aqui a divergência era total: dos 11 pares medidos contra `tokens.css`, ZERO batiam. O acento chegava a inverter de sentido, `#2F4E8A` (azul escuro) aqui contra `#7FA0DC` (azul claro) na referência, que é a escolha certa sobre fundo escuro. */ --d-page:var(--d-s-app,#0E1114); --d-bg:var(--d-s-card,#15191E); --d-soft:var(--d-b-soft,#1E242B); --d-sunk:var(--d-s-sunk,#111519); --d-sel:var(--d-s-sel,#16202E); --d-nav:var(--d-s-nav,#1A1F25); --d-row:var(--d-b-row,#191E24); --d-ink:var(--d-t-1,#F2F4F6); --d-ink2:var(--d-t-2,#C2C8D0); --d-ink3:var(--d-t-3,#9AA2AC); --d-ink4:var(--d-t-4,#828A94); --d-ink5:var(--d-t-5,#737B85); --d-ink6:var(--d-t-6,#5A616B); --d-bd:var(--d-b-card,#232A31); --d-bd2:var(--d-b-line,#2C333B); --d-bd3:var(--d-b-strong,#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:var(--d-a-1,#2F4E8A); --d-accent-deep:var(--d-a-deep,#223A6B); --d-accent-2:var(--d-a-2,#7D93BC); --d-accent-3:var(--d-a-3,#A9B8D4); --d-accent-bd:var(--d-a-border,#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-bar:#718096; --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-bar:var(--d-mk-bar); --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-bar:var(--d-mk-bar); --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} .status-apuracao{font-size:11.5px;color:var(--ink3);margin-top:4px} /* 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} .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){ 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} .periodo>.filtro-area,.periodo>.filtro-squad,.periodo>.filtro-responsavel{flex:1 1 calc(33.333% - 7px);min-width:0;max-width:100%} .periodo .filtro-area .fa-abre,.periodo .filtro-squad .fa-abre,.periodo .filtro-responsavel .fa-abre{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .periodo-real,.filtro-resumo,.filtro-sugerido{max-width:100%;white-space:normal;overflow-wrap:anywhere} .eyebrow-periodo{max-width:100%;white-space:normal;overflow-wrap:anywhere} /* 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} } /* Celular estreito (≤480px): os três filtros em 33% cada truncavam o rótulo ("Todas as diretor…", sem dar para ler o que falta sem abrir o menu). Abaixo desta largura eles empilham a 100%, uma linha por filtro, e o rótulo cabe inteiro. */ @media(max-width:480px){ .periodo>.filtro-area,.periodo>.filtro-squad,.periodo>.filtro-responsavel{flex:1 1 100%} } 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} .top-sep{margin:0 8px;color:var(--ink4);font-weight:400} .pan-breadcrumb{margin:0 0 18px;color:var(--ink4);font:9px/1.2 var(--mono);letter-spacing:.16em} .pan-breadcrumb span{margin:0 10px;color:var(--ink5)} body[data-pagina="painel"] header.top h1, body[data-pagina="painel"] header.top .sub{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .mapa-contexto{margin:0 0 16px;padding:0 0 0 0;color:var(--ink2)} .mapa-contexto p{margin:0 0 9px;font-size:13px;line-height:1.45} .mapa-contexto p+p{border-left:1px solid var(--bd3);padding-left:12px;color:var(--ink3);font-size:11.5px;max-width:86ch} .pan-intro{margin:20px 0 18px;padding:18px 20px;border:1px solid #b9c9e8;border-radius:12px;background:var(--bg)} .pan-kicker,.pan-section-label,.pan-group-label{font:10px/1.2 var(--mono);letter-spacing:.13em;color:var(--ink4);text-transform:uppercase} .pan-kicker{margin:0 0 12px}.pan-status{color:var(--mk-alarme);margin-left:14px} .pan-intro h2{margin:0;font-size:16px;line-height:1.3}.pan-intro>p:not(.pan-kicker):not(.pan-help){margin:10px 0 0;color:var(--ink3);font-size:12px} .pan-rule{border-top:1px solid var(--bd2);margin:15px 0 11px}.pan-help{margin:0;color:var(--ink3);font-size:11.5px}.pan-help b{font:10px var(--mono);letter-spacing:.12em;color:var(--ink4);margin-right:12px} .pan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:20px 5px 14px}.pan-head h2{margin:4px 0 5px;font-size:28px;letter-spacing:-.04em}.pan-head p:last-child{margin:0;color:var(--ink2);font-size:13px}.pan-live{border:1px solid var(--avz-bd);padding:7px 10px;border-radius:5px;color:var(--avz-ink);font:10px var(--mono);letter-spacing:.09em;white-space:nowrap} .pan-premissas{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:18px 20px 14px;background:var(--sunk);border:1px solid var(--bd2);border-radius:12px}.pan-stat{padding:0 16px;border-left:2px solid var(--bd3)}.pan-stat:first-child{border-color:var(--accent-alt)}.pan-stat b{font-size:27px;letter-spacing:-.04em}.pan-stat span{margin-left:6px;font-size:12px}.pan-stat small{display:block;margin-top:4px;color:var(--ink3);font-size:10.5px}.pan-notes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;border-top:1px solid var(--bd2);margin-top:16px;padding-top:13px}.pan-notes b{font:9px var(--mono);letter-spacing:.13em;color:var(--ink4)}.pan-notes p{margin:5px 0 0;color:var(--ink2);font-size:11px;line-height:1.4} .pan-section-label{margin:20px 5px 10px}.pan-section-label span{font:11px var(--font);letter-spacing:0;text-transform:none;color:var(--ink3);margin-left:10px}.pan-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pan-group{display:flex;flex-direction:column;min-height:190px;padding:17px 18px;border:1px solid var(--bd2);border-radius:12px;background:var(--bg);color:inherit;text-decoration:none}.pan-group:hover{border-color:var(--accent-alt)}.pan-group-label{color:var(--ink4)}.pan-group strong{display:block;margin:14px 0 9px;font-size:28px;letter-spacing:-.04em}.pan-group strong small{font-size:11px;font-weight:400;color:var(--ink3);letter-spacing:0;margin-left:4px}.pan-group i{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--bd2);font-style:normal;font-size:11px;color:var(--ink3)}.pan-group i b{color:var(--ink2)}.pan-group em{margin-top:auto;padding-top:13px;font-size:11px;font-style:normal;color:var(--accent-alt)}.pan-quality .pan-group-label{color:var(--accent-alt)}.pan-capacity .pan-group-label{color:var(--accent-alt)}.pan-off{background:var(--soft);color:var(--ink3)}.pan-off .pan-group-label small{font:9px var(--mono);background:var(--bd2);padding:3px 5px;margin-left:5px}.pan-off strong{color:var(--ink3)} @media(max-width:900px){.pan-groups{grid-template-columns:repeat(2,1fr)}.pan-premissas,.pan-notes{grid-template-columns:1fr}.pan-notes{grid-column:auto}.pan-stat{padding:8px 0;border-left:0;border-bottom:1px solid var(--bd2)}} .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} .eyebrow-fluxo{margin:0 0 5px;font-size:10px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--ink3)} .titulo-fluxo{margin:0;color:var(--ink);font-size:28px;line-height:1.08; letter-spacing:-.035em;font-weight:800} .subtitulo-fluxo{margin:8px 0 18px;color:var(--ink2);font-size:14px;line-height:1.45} .fluxo-executivo{padding:18px 20px 14px;background:var(--sunk);border-color:var(--bd2);border-radius:12px} #tab-visao .fluxo-executivo-topo{display:none} .fluxo-executivo-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:20px} .fluxo-executivo-topo h3{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--ink)} .fluxo-executivo-topo p{margin:0;color:var(--ink3);font-size:12px;line-height:1.45} .proveniencia-fluxo{flex:none;color:var(--ink3);font:600 10px/1.2 'JetBrains Mono',monospace; letter-spacing:.05em;text-transform:uppercase;text-align:right} .fluxo-executivo .panorama{margin:18px 0 10px;background:var(--soft);border-color:var(--bd2)} .fluxo-executivo .pn-item{text-align:left;padding:14px 18px} .fluxo-executivo .pn-v{font-size:30px} .fluxo-executivo .pn-l{font-size:11px;color:var(--ink2)} .fluxo-executivo .pn-tag{color:var(--ink3)} .fluxo-nota{margin:0;color:var(--ink3);font-size:11px;line-height:1.45} /* Mapa do Fluxo: matriz Projeto x Melhoria sobre as seis etapas da régua. Barra empilhada esconderia a comparação entre as duas naturezas, que é justamente o que a tela existe para mostrar. */ .macro-fluxo{margin-top:18px;padding-top:16px;border-top:1px solid var(--bd)} .wf-cabecalho{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px} .wf-cabecalho span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t-3)} .wf-cabecalho small{font-size:10.5px;color:var(--t-3);text-align:right} .wf-rolagem{overflow-x:auto} .wf-grade{min-width:760px} .wf-faixas,.wf-linha{display:grid;grid-template-columns:118px repeat(6,minmax(0,1fr)) 78px;align-items:stretch} .wf-faixas{margin-bottom:6px} .wf-faixa{grid-column:span 3;padding:0 0 6px 12px;font-size:9.5px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--t-4)} .wf-faixa-down{border-left:1px solid var(--b-card)} .wf-linha{border-bottom:1px solid var(--b-soft)} .wf-cabecalho-col{border-bottom:1px solid var(--b-card)} .wf-rotulo-linha{display:flex;flex-direction:column;justify-content:center;gap:3px; padding:12px 8px 12px 0;font-size:10.5px;color:var(--t-3)} .wf-rotulo-linha strong{font-size:12.5px;color:var(--t-1);font-weight:700} .wf-rotulo-linha small{font-size:9.5px;line-height:1.35;color:var(--t-4)} .wf-cel{display:flex;flex-direction:column;justify-content:center;gap:5px; padding:12px 12px;min-width:0;border-left:1px solid transparent} /* O corte upstream x downstream é a única divisória com peso: é onde o compromisso é assumido. */ .wf-cel.wf-corte{border-left-color:var(--b-card)} .wf-cel.wf-fim{background:var(--s-sunk)} .wf-ordem{font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--t-4)} .wf-cabecalho-col strong{font-size:12px;color:var(--t-1);font-weight:700;line-height:1.2} .wf-cabecalho-col small{font-size:9.5px;line-height:1.35;color:var(--t-4)} .wf-n{font-size:21px;line-height:1;font-weight:800;color:var(--t-1);letter-spacing:-.03em} .wf-pct{font-size:10px;color:var(--t-3)} .wf-barra{display:block;height:3px;border-radius:2px;background:var(--b-soft)} .wf-barra i{display:block;width:var(--wf-w);height:100%;border-radius:2px} /* Projeto e Melhoria são categorias, não bom e ruim: duas cores de dado da rampa, nenhuma delas semântica. Volume alto numa etapa não é defeito, e por isso nenhuma célula recebe cor de alarme. */ .wf-barra-projeto{background:var(--mk-base)} .wf-barra-melhoria{background:var(--mk-alt)} .wf-totais{border-bottom:0} .wf-totais .wf-n{font-size:15px} .wf-totais .wf-rotulo-linha{font-size:10px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--t-4)} .wf-total-col{display:flex;flex-direction:column;justify-content:center;gap:3px; padding:12px 0 12px 12px;text-align:right;font-size:9.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--t-4)} .wf-total-col b{font-size:15px;font-weight:800;color:var(--t-2);letter-spacing:-.03em;text-transform:none} .wf-total-col small{font-size:10px;color:var(--t-3);letter-spacing:0;text-transform:none} .wf-notas{margin-top:14px;display:flex;flex-direction:column;gap:5px} .wf-notas p{margin:0;color:var(--t-3);font-size:10.5px;line-height:1.5;max-width:74ch} .wf-fora{color:var(--t-2)} .wf-ausente{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--b-soft); color:var(--t-3);font-size:11px;line-height:1.5} /* O mapa canônico ocupa o primeiro plano da visão. O cabeçalho de estoque e o panorama legado ficam vazios quando o payload antigo não está disponível e não podem deixar um bloco/skeleton sem significado acima dos dados reais. */ .fluxo-executivo-topo,.fluxo-executivo>.panorama:empty{display:none} .fluxo-executivo>.fluxo-nota{display:none} .fluxo-executivo .macro-fluxo{margin-top:0;padding-top:0;border-top:0} .wf-resumo{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 12px;margin:0 0 14px;color:var(--t-3);font-size:11px} .wf-resumo>strong{font-size:28px;line-height:1;color:var(--t-1);letter-spacing:-.04em} .wf-resumo-item{padding-left:12px;border-left:1px solid var(--b-card);white-space:nowrap} .wf-contexto{margin:0 0 12px;padding:0;border:0} .wf-cabecalho-col .wf-cel{margin:0 4px;padding:12px 12px 10px;background:var(--b-row);border:1px solid var(--b-card);border-bottom:0;border-radius:8px 8px 0 0} .wf-linha:not(.wf-cabecalho-col):not(.wf-totais) .wf-cel{margin:0 4px;background:var(--b-row);border-left:1px solid var(--b-card);border-right:1px solid var(--b-card)} .wf-linha:not(.wf-cabecalho-col):not(.wf-totais) .wf-cel.wf-fim{background:var(--s-sunk)} .wf-totais .wf-cel{margin:0 4px} /* Composição V2 do handoff: uma coluna por etapa, com projeto e melhoria dentro do próprio cartão para preservar a comparação visual da régua. */ .wf-fiel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px} .wf-fiel-head>div{display:flex;align-items:baseline;gap:9px} .wf-fiel-head strong{font-size:32px;line-height:1;font-weight:600;letter-spacing:-.04em} .wf-fiel-head span{font-size:12.5px;color:var(--t-3)} .wf-fiel-head>small{font:500 9px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-4)} .wf-fiel-info{display:none;flex-direction:column;gap:9px;border-left:2px solid var(--b-card);padding:2px 0 2px 14px;max-width:880px;margin-bottom:0} .wf-fiel-info p{margin:0;font-size:12px;line-height:1.55;color:var(--t-3)} .wf-fiel-resumo{display:flex;flex-wrap:wrap;gap:7px 18px;margin:0 0 14px;font-size:10.5px;color:var(--t-3)} .wf-fiel-resumo span+span{padding-left:18px;border-left:1px solid var(--b-card)} .wf-fiel-scroll{overflow-x:auto} .wf-fiel-matriz{min-width:960px} .wf-fiel-colchetes{display:grid;grid-template-columns:3fr 2fr 1fr;gap:10px;height:27px;align-items:start} /* A faixa e o rotulo sao coisas diferentes: a faixa e a linha de 9px que abraca as etapas, o rotulo e uma pilula preenchida POR CIMA dela. Antes o texto era a propria faixa e transbordava de uma caixa de 9px. */ .wf-fiel-colchetes span{height:9px;margin-top:13px;border:1px solid var(--wf-colchete);border-bottom:0;border-radius:4px 4px 0 0;display:flex;align-items:flex-start;justify-content:center;box-sizing:border-box;min-width:0} .wf-fiel-colchetes b{transform:translateY(-10px);padding:6px 12px;border-radius:5px;background:var(--wf-chip);color:var(--on-a);font:600 11.5px/1 var(--font-ui);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap} /* Montante e jusante sao familias de cor DIFERENTES de proposito: as duas em azul faziam a regua parecer continua, e o ponto da leitura e justamente onde o compromisso e assumido. */ .wf-fiel-colchetes span:first-child{--wf-colchete:var(--fluxo-upstream);--wf-chip:var(--fluxo-upstream)} .wf-fiel-colchetes span:nth-child(2){--wf-colchete:var(--fluxo-downstream-bd);--wf-chip:var(--fluxo-downstream)} .wf-fiel-cards{display:flex;gap:10px} .wf-bloco{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px;padding:14px 14px 13px;border:1px solid color-mix(in oklab,var(--wf-cor) 14%,var(--s-card));border-radius:11px;background:color-mix(in oklab,var(--wf-cor) 6%,var(--s-card));color:var(--t-1);text-align:left;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease} .wf-bloco.wf-foco{background:color-mix(in oklab,var(--wf-cor) 11%,var(--s-card));border-color:color-mix(in oklab,var(--wf-cor) 26%,var(--s-card))} .wf-bloco:hover{transform:translateY(-2px);border-color:var(--wf-cor);box-shadow:0 1px 2px rgba(13,17,23,.05),0 16px 30px -24px rgba(13,17,23,.5)} /* `min-height` de 52px reserva espaco para nome de DUAS linhas. Sem ele, as seis caixas desalinham verticalmente assim que um nome quebra, e a regua deixa de se ler como uma regua. */ .wf-bloco-head{display:flex;flex-direction:column;gap:5px;min-height:52px} .wf-bloco-nome{display:flex;align-items:flex-start;gap:7px;font-size:13px;line-height:1.25;font-weight:600;letter-spacing:-.015em;color:var(--t-2);min-width:0;text-wrap:pretty} .wf-foco .wf-bloco-nome{color:var(--wf-cor)} .wf-bloco-nome>i{width:9px;height:9px;flex:none;margin-top:3px;border-radius:2px;background:var(--wf-cor)} .wf-bloco-head small{font:400 9px/1 var(--font-mono);letter-spacing:.1em;color:var(--t-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wf-bloco-valor{display:flex;align-items:baseline;gap:7px} .wf-bloco-valor strong{font-size:27px;line-height:1;font-weight:600;letter-spacing:-.045em} .wf-bloco-valor small{font:400 10.5px/1 var(--font-mono);color:var(--t-4)} .wf-tipos{display:flex;flex-direction:column;gap:7px;border-top:1px solid color-mix(in oklab,var(--wf-cor) 14%,var(--s-card));padding-top:11px} .wf-tipo{display:flex;align-items:center;justify-content:space-between;gap:8px;transition:transform .18s ease} .wf-tipo:hover{transform:translateX(2px)} .wf-tipo>span{display:flex;align-items:center;gap:7px;min-width:0;font:500 9px/1 var(--font-mono);letter-spacing:.09em;color:var(--t-4)} .wf-tipo i{display:flex;width:15px;height:15px;color:var(--wf-cor)} .wf-tipo i svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .wf-melhoria i{opacity:.72} .wf-tipo b{font-size:12.5px;line-height:1;font-weight:600;color:var(--t-2)} .wf-bloco-bar{display:flex;height:4px;border-radius:2px;overflow:hidden;background:var(--track,var(--b-soft))} .wf-bloco-bar i:first-child{background:var(--wf-cor)} .wf-bloco-bar i:last-child{background:var(--wf-cor);opacity:.26} .wf-fiel-foot{margin-top:14px;border-top:1px solid var(--b-card);padding-top:14px;font-size:11px;line-height:1.5;color:var(--t-3)} .fct-worker-view{display:flex;flex-direction:column;gap:16px;margin:0 0 18px} .fct-worker-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);gap:18px;align-items:stretch;padding:20px 22px;border:1px solid var(--bd2);border-radius:12px;background:var(--sunk)} .fct-worker-kicker{font:10px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)} .fct-worker-hero>div:first-child>strong{display:block;margin:10px 0 7px;font-size:42px;line-height:1;letter-spacing:-.05em} .fct-worker-hero p{margin:0;max-width:70ch;color:var(--ink3);font-size:12px;line-height:1.5} .fct-worker-kpis{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--bd2);border-radius:9px;overflow:hidden;background:var(--bg)} .fct-worker-kpis div{padding:14px;border-left:1px solid var(--bd2)}.fct-worker-kpis div:first-child{border-left:0} .fct-worker-kpis b{display:block;font-size:22px;line-height:1.1}.fct-worker-kpis span{display:block;margin-top:5px;color:var(--ink3);font:10px/1.2 var(--mono);text-transform:uppercase} .fct-worker-card{padding:18px 20px;border:1px solid var(--bd2);border-radius:12px;background:var(--bg)} .fct-worker-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.fct-worker-card h2{margin:0;font-size:16px}.fct-worker-card-head span{color:var(--ink4);font:10px var(--mono);text-transform:uppercase} .fct-worker-card>.hint{margin:6px 0 14px}.fct-worker-series-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:9px} .fct-worker-series{padding:12px 13px;border:1px solid var(--bd2);border-radius:8px;background:var(--soft)}.fct-worker-series>div{display:flex;justify-content:space-between;gap:7px}.fct-worker-series b{font:10px var(--mono);text-transform:uppercase}.fct-worker-series div span{color:var(--ink4);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fct-worker-series strong{display:block;margin:10px 0 4px;font-size:23px}.fct-worker-series small{color:var(--ink3);font-size:10.5px} .fct-worker-table{margin-top:0} .fct-worker-empty{padding:24px;border:1px dashed var(--bd2);border-radius:10px;color:var(--ink3);font-size:12px} .fct-legacy-view[hidden],.fct-worker-view[hidden]{display:none} /* SubViewSelector (handoff COMPONENTS.md #17): pílulas de vista. Reaproveitado pelo Feature Cycle Time (Ranking/Distribuição) e disponível para qualquer outra página do worker que ganhe mais de uma vista sobre o mesmo payload. */ .vista-seletor{display:flex;flex-wrap:wrap;gap:8px} .vista-pill{padding:9px 16px;border:1px solid var(--bd2);border-radius:9px;background:var(--bg);color:var(--ink3);font-size:12.5px;font-weight:500;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease} .vista-pill:hover{background:var(--soft)} .vista-pill.on{background:var(--sel);border-color:var(--accent-bd);color:var(--accent)} /* Distribuição por squad: faixa Q1–Q3 com traço de mediana, mesma leitura de box-plot do handoff ("a faixa mostra os 50% centrais; o traço é a mediana"). Escala compartilhada entre squads, nunca comparação de ritmo. */ .fct-dist-list{display:flex;flex-direction:column;gap:10px} .fct-dist-row{display:grid;grid-template-columns:minmax(140px,200px) minmax(0,1fr) 108px 92px;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid var(--row)} .fct-dist-row:last-child{border-bottom:0} .fct-dist-nome{display:flex;flex-direction:column;gap:2px;min-width:0} .fct-dist-nome strong{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fct-dist-nome span{font-size:10.5px;color:var(--ink4)} .fct-dist-bar-track{position:relative;height:8px;border-radius:999px;background:var(--soft)} .fct-dist-bar-range{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--accent-3)} .fct-dist-bar-mediana{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--accent);transform:translateX(-1px)} .fct-dist-numeros{display:flex;flex-direction:column;gap:1px;text-align:right} .fct-dist-numeros b{font-size:13px} .fct-dist-numeros span{font-size:10px;color:var(--ink4);white-space:nowrap} .fct-dist-base{font-size:11px;color:var(--ink3);text-align:right;white-space:nowrap} @media(max-width:760px){.fct-dist-row{grid-template-columns:1fr;gap:6px;text-align:left}.fct-dist-numeros,.fct-dist-base{text-align:left}} @media(max-width:760px){.fct-worker-hero{grid-template-columns:1fr;padding:16px}.fct-worker-kpis{min-width:0}.fct-worker-series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fct-worker-card{padding:15px}.fct-worker-card-head{align-items:flex-start;flex-direction:column}} @media(max-width:800px){.wf-fiel-head{align-items:flex-start;flex-direction:column;gap:6px}.wf-fiel-head>small{text-align:left}.wf-fiel-matriz{min-width:960px}} .v03-summary-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0 22px} .v03-summary-card{min-height:214px;padding:17px 18px 14px;border:1px solid var(--bd2);border-radius:12px;background:var(--sunk)} .v03-card-kicker{margin:0;color:var(--ink4);font:9px/1.2 var(--mono);letter-spacing:.14em} .v03-card-kicker small{font:8px var(--mono);background:var(--sel);padding:3px 5px;margin-left:4px;letter-spacing:.08em} .v03-summary-card h3{margin:14px 0 9px;font-size:13px} .v03-summary-card>strong{display:block;font-size:28px;line-height:1;font-weight:800;letter-spacing:-.04em} .v03-summary-card>strong small{font-size:11px;font-weight:400;color:var(--ink3);letter-spacing:0} .v03-lines{margin-top:16px} .v03-lines span{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid var(--bd2);color:var(--ink3);font-size:10.5px} .v03-lines b{color:var(--ink2);font-weight:700} .v03-spark,.v03-segments{min-height:34px;margin:14px 0 0;padding-top:10px;color:var(--ink4);font:9px var(--mono);letter-spacing:.05em} @media(max-width:1050px){.v03-summary-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.v03-summary-cards{grid-template-columns:1fr}.mapa-contexto p{font-size:12px}} /* Estrutura das Features: dívida de preenchimento, acionável por squad. */ .desvio-estrutura:empty{display:none} .desvio-topo h3{margin:0;font-size:13px;color:var(--ink)} .desvio-topo p{margin:5px 0 0;color:var(--ink2);font-size:11.5px;line-height:1.5} .desvio-tipos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px; padding-top:14px;border-top:1px solid var(--bd)} .desvio-tipo{display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:baseline;min-width:0} .desvio-tipo b{grid-row:span 2;font-size:19px;line-height:1;font-weight:800;color:var(--ink);letter-spacing:-.03em} .desvio-tipo strong{font-size:11.5px;line-height:1.2;color:var(--ink2);font-weight:700} .desvio-tipo small{grid-column:2;color:var(--ink3);font-size:10px;line-height:1.35;margin-top:3px} @media (max-width:800px){ .desvio-tipos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px} .wf-cabecalho{flex-direction:column;gap:4px} .wf-cabecalho small{text-align:left} } /* 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} .card:has(#tbCycleTime) .rolagem{max-height:420px;overflow:auto} #tbCycleTime thead th{position:sticky;top:0;z-index:3;background:var(--bg)} .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} /* Sem isto, o item de grid usa min-width:auto por padrão: não encolhe além do conteúdo que não quebra (a barra e a legenda de "Composição do trabalho"), e o card vaza a largura da tela em vez de deixar o texto quebrar por dentro. */ .split>.card{min-width:0} @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:not([hidden]){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} /* Lead Time e Throughput reutilizam a linguagem de dados do painel, mas têm uma hierarquia própria: primeiro base e unidade, depois série e tabela. */ .metric-view{padding-top:28px} .metric-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0;overflow:hidden;border:1px solid var(--bd2);border-radius:12px;background:var(--bg)} .metric-hero>div{padding:18px 20px;border-left:1px solid var(--bd)} .metric-hero>div:first-child{border-left:0} .metric-hero .metric-value{font-size:34px;font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink)} .metric-hero .metric-label{margin-top:7px;color:var(--ink3);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em} .metric-hero .metric-note{margin:5px 0 0;color:var(--ink2);font-size:12px;line-height:1.4} .metric-series{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px} .metric-series-item{min-height:92px;padding:13px 14px;border:1px solid var(--bd2);border-radius:8px;background:var(--soft)} .metric-series-item b{display:block;color:var(--ink3);font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase} .metric-series-item strong{display:block;margin-top:12px;font-size:23px;letter-spacing:-.035em;color:var(--ink)} .metric-series-item small{display:block;margin-top:4px;color:var(--ink3);font-size:11px} .metric-table{width:100%;border-collapse:collapse;font-size:12px} .metric-table th{padding:0 10px 9px;text-align:left;color:var(--ink3);font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--bd2)} .metric-table th.num,.metric-table td.num{text-align:right} .metric-table td{padding:10px;border-bottom:1px solid var(--bd);color:var(--ink2);vertical-align:middle} .metric-table tr:last-child td{border-bottom:0} .metric-table td strong{color:var(--ink);font-weight:700} .metric-table .metric-area{color:var(--ink3);white-space:nowrap} .metric-table .metric-empty{color:var(--ink3);font-size:11px;font-weight:600} .metric-unavailable{display:inline-block;color:var(--err-ink,var(--mk-alarme));font-size:11px;font-weight:700;line-height:1.35} .metric-unavailable small{font-size:10px;font-weight:500;color:var(--ink3)} .metric-hero-indisponivel{grid-column:1/-1;padding:20px;color:var(--err-ink,var(--mk-alarme));background:var(--soft)} @media(max-width:600px){.metric-view{padding-top:18px}.metric-hero{grid-template-columns:1fr}.metric-hero>div{border-left:0;border-top:1px solid var(--bd)}.metric-hero>div:first-child{border-top:0}.metric-table{min-width:620px}} /* composição full x tipos: cartões compactos e uma única faixa de participação */ .ct-type-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .ct-type-card{min-height:132px;padding:16px 16px 14px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);cursor:pointer} .ct-type-card:hover{border-color:var(--accent);box-shadow:0 2px 8px var(--sombra)} .ct-type-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .ct-type-card-full{background:var(--soft)} .ct-type-card-full{border:2px solid var(--accent);box-shadow:0 1px 0 var(--accent-bd)} .ct-type-card-title{display:flex;align-items:center;gap:8px;color:var(--ink2);font-size:13px;font-weight:700} .ct-type-card-title i{width:9px;height:9px;display:block;flex:none;border-radius:2px;background:var(--ink)} .ct-type-card-value{margin-top:13px;color:var(--ink);font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1} .ct-type-card-value small{font-size:12px;font-weight:500;letter-spacing:0;color:var(--ink3)} .ct-type-card-meta{margin-top:10px;color:var(--ink3);font-size:11px} .ct-type-card-delta{margin-top:10px;color:var(--ink3);font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase} .ct-type-card-delta span{font-size:12px;font-weight:800}.ct-delta-fast{color:var(--mk-acc)}.ct-delta-slow{color:var(--mk-alarme)}.ct-delta-neutral{color:var(--ink3)} .ct-type-card-full .ct-type-card-delta{font-weight:600} .ct-tabela-filtros{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px} .ct-tabela-filtros label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--ink3)} .ct-tabela-filtros input,.ct-tabela-filtros select{height:30px;border:1px solid var(--bd2);border-radius:6px;background:var(--bg);color:var(--ink2);padding:0 8px;font:inherit;font-size:12px} .ct-type-share{display:flex;overflow:hidden;height:34px;margin-top:16px;border-radius:8px;background:var(--soft)} .ct-type-share-segment{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;color:#fff;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;white-space:nowrap} .ct-type-share-hint{margin:8px 0 0} .ct-matriz{overflow-x:auto} .ct-matriz-unidade{margin:0 0 10px;color:var(--ink3);font-size:11px} .ct-matriz-cab,.ct-matriz-linha{display:grid;grid-template-columns:180px repeat(var(--ct-cols),minmax(74px,1fr)) 92px;gap:4px;min-width:820px;align-items:center} .ct-matriz-cab{padding:0 0 8px;color:var(--ink3);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-align:center} .ct-matriz-cab span:first-child{text-align:left} .ct-matriz-linha{margin:2px 0} .ct-matriz-area{display:flex;align-items:center;gap:9px;padding:8px 10px;color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap} .ct-matriz-area .dot{width:8px;height:8px;border-radius:2px;flex:none} .ct-matriz-celula{padding:10px 5px;border-radius:5px;background:color-mix(in srgb,var(--mk-acc) var(--ct-int),var(--soft));color:var(--ink2);font-family:var(--mono);font-size:11px;text-align:center;font-variant-numeric:tabular-nums} .ct-matriz-celula small{display:block;margin-top:3px;color:var(--ink3);font-family:var(--sans);font-size:9px;line-height:1.1;white-space:nowrap} .ct-matriz-celula.vazio{background:var(--soft);color:var(--ink3)} .ct-matriz-total{padding-left:12px;color:var(--ink);font-size:13px;font-weight:700;white-space:nowrap} .ct-matriz-total small{font-size:10px;color:var(--ink3);font-weight:500} .ct-matriz-legenda{display:flex;align-items:center;gap:4px;margin:14px 0 0 180px;padding-top:12px;border-top:1px solid var(--bd);color:var(--ink3);font-family:var(--mono);font-size:10px;letter-spacing:.08em} .ct-matriz-legenda i{width:24px;height:10px;border-radius:2px;background:var(--mk-base)} .ct-matriz-legenda i:nth-of-type(2){background:var(--mk-alt)} .ct-matriz-legenda i:nth-of-type(3){background:color-mix(in srgb,var(--mk-acc) 55%,var(--soft))} .ct-matriz-legenda i:nth-of-type(4),.ct-matriz-legenda i:nth-of-type(5){background:var(--mk-acc)} .ct-matriz-legenda small{margin-left:auto;font-family:inherit;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,.ct-filtro-tipo{position:relative} .wf-filtro-squad-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t-4);margin-right:6px} .wf-filtro-squad{min-width:180px;max-width:260px;height:34px;padding:0 28px 0 10px;border:1px solid var(--b-soft);border-radius:7px;background:var(--s-card);color:var(--t-1);font:inherit;font-size:12px} .wf-filtro-squad:focus{outline:2px solid color-mix(in srgb,var(--a-1) 35%,transparent);outline-offset:1px} .ct-filtro-tipo{display:inline-flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin:0 0 12px} .ct-filtro-label{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em} .filtro-area .fa-abre,.filtro-responsavel .fa-abre,.filtro-squad .fa-abre,.ct-filtro-tipo .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,.ct-filtro-tipo .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,.ct-filtro-tipo .fa-abre.on{background:var(--accent);color:#fff;border-color:var(--accent)} .ct-filtro-remover{border:0;background:transparent;color:var(--accent);font:inherit;font-size:11px;font-weight:600;cursor:pointer;padding:4px 2px;text-decoration:underline;text-underline-offset:2px;margin-left:-2px} .filtro-area .fa-abre i,.filtro-responsavel .fa-abre i,.filtro-squad .fa-abre i,.ct-filtro-tipo .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,.ct-filtro-tipo .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]),.ct-filtro-tipo .fa-menu:not([hidden]){ display:flex;flex-direction:column} .filtro-area .fa-menu[hidden],.filtro-responsavel .fa-menu[hidden],.filtro-squad .fa-menu[hidden],.ct-filtro-tipo .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} /* 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,.ct-filtro-tipo .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} .filtro-area .fa-menu label:hover,.filtro-responsavel .fa-menu label:hover,.filtro-squad .fa-menu label:hover,.ct-filtro-tipo .fa-menu label:hover{background:var(--soft)} .filtro-area .fa-limpar,.filtro-responsavel .fa-limpar,.ct-filtro-tipo .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,.ct-filtro-tipo .fa-limpar:disabled{opacity:.45;cursor:default} .ct-feature-detail{margin-top:14px;border-top:1px solid var(--bd);padding-top:12px} .ct-feature-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ink2);margin-bottom:8px} .ct-feature-head span,.ct-feature-area summary span,.ct-feature-squad summary span{color:var(--ink3);font-weight:500} .ct-feature-area,.ct-feature-squad{border:1px solid var(--bd);border-radius:6px;margin:6px 0;background:var(--bg)} .ct-feature-area summary,.ct-feature-squad summary{cursor:pointer;padding:7px 9px;font-size:12px;font-weight:700;color:var(--ink2);display:flex;justify-content:space-between} .ct-feature-squad{margin:5px 8px} .ct-feature-list{padding:0 8px 7px} .ct-feature-item{display:flex;justify-content:space-between;gap:12px;padding:7px 2px;border-top:1px solid var(--bd);color:var(--ink2);text-decoration:none} .ct-feature-item:hover{color:var(--accent)} .ct-feature-item b,.ct-feature-item small{display:block}.ct-feature-item small{font-size:10.5px;color:var(--ink3);margin-top:2px}.ct-feature-item strong{white-space:nowrap;font-size:12px} .ct-drill-loading,.ct-drill-empty{font-size:12px;color:var(--ink3);padding:8px 0} .ct-drill-error{display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid var(--bd2);border-left:3px solid var(--mk-alarme);border-radius:7px;background:var(--soft);font-size:12px;color:var(--ink2)} .ct-drill-error strong{color:var(--ink)}.ct-drill-error .ct-retry{align-self:flex-start;margin-top:3px} .ct-feature-item.ct-amostra-pequena{background:var(--sunk)}.ct-feature-item.ct-feature-outlier{border-left:3px solid var(--mk-alarme);padding-left:7px}.ct-feature-item.ct-feature-outlier strong{color:var(--mk-alarme)} .ct-retry{font:inherit;border:1px solid var(--bd2);border-radius:5px;background:var(--bg);color:var(--accent);padding:5px 8px;cursor:pointer} /* 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} .ct-type-cards{grid-template-columns:1fr 1fr} .ct-type-card{min-height:118px;padding:13px} .ct-type-card-value{font-size:25px} .ct-type-share{height:30px} .escopo-total{margin-left:0;width:100%} /* Mantém os extremos da régua dentro da viewport. */ .ct-row.ct-cab .dir{font-size:9px;white-space:normal;line-height:1.2} .ct-row.ct-cab .cab{height:52px} .ct-row.ct-cab .zlb{top:0;left:50%!important;right:auto!important} .ct-row.ct-cab .dir.esq{left:0;right:auto;bottom:0;padding:0} .ct-row.ct-cab .dir.dirD{left:auto;right:0;bottom:0;padding:0} /* Nome identifica a linha: no mobile ele quebra, nunca é substituído por reticências. */ .ct-drill-squad span,.ct-feature-item b{white-space:normal;overflow-wrap:anywhere} .ct-drill-squad{align-items:flex-start} .ct-drill-squad small{white-space:nowrap} .ct-type-card-delta{font-size:9px;letter-spacing:0} } /* 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:not([hidden]){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)} .ct-demanda-drill{margin:16px 0 24px;padding:20px;border:1px solid var(--bd);border-radius:16px;background:var(--panel);} .ct-drill-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--bd);} .ct-drill-close{margin-left:auto;border:1px solid var(--bd2);background:var(--soft);color:var(--ink2);border-radius:6px;padding:5px 9px;font:inherit;font-size:12px;cursor:pointer} .ct-drill-close:hover{background:var(--sel);color:var(--ink)} .ct-drill-titulo{font-size:18px;font-weight:750;color:var(--ink);} .ct-drill-sub{font-size:12px;color:var(--ink3);} .ct-drill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;} .ct-drill-area{padding:14px;border:1px solid var(--bd);border-radius:12px;background:var(--panel2,var(--bg));} .ct-drill-area-head{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink);} .ct-drill-area-head strong{font-size:14px;} .ct-drill-area-head span{font-weight:750;font-variant-numeric:tabular-nums;} .ct-drill-area-meta{margin:4px 0 10px;font-size:11px;color:var(--ink3);} .ct-drill-squads{display:grid;gap:4px;} .ct-drill-faixa .ct-drill-grid{grid-template-columns:1fr} .ct-drill-squad{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;background:color-mix(in srgb,var(--ink) 5%,transparent);font-size:12px;overflow:hidden} .ct-drill-bar{position:absolute;inset:0 auto 0 0;width:var(--ct-squad-pct,0%);background:color-mix(in srgb,var(--mk-alarme) 24%,transparent);pointer-events:none} .ct-drill-squad>*:not(.ct-drill-bar){position:relative;z-index:1} .ct-drill-squad span{min-width:0;overflow-wrap:anywhere;color:var(--ink2);} .ct-drill-squad b{font-variant-numeric:tabular-nums;color:var(--ink);} .ct-drill-squad small{min-width:58px;text-align:right;color:var(--ink3);font-size:10px;} @media (max-width:700px){.ct-demanda-drill{padding:14px}.ct-drill-head{display:block}.ct-drill-sub{display:block;margin-top:3px}.ct-drill-grid{grid-template-columns:1fr}} /* Referência visual do Cycle Time: uma leitura editorial, clara e progressiva. O escopo fica preso à aba para não alterar os demais indicadores nem o tema escolhido pelo usuário. */ .ct-ref[data-design="standalone"]{ /* A referência usa uma tela de papel quente e cartões brancos; os tokens globais preservam a troca de tema do aplicativo. */ background:var(--page); color:var(--ink); padding:22px 24px 56px; gap:18px; } /* Administração de Squads: mesa de decisão, não dashboard. A comparação é a estrutura principal e usa somente tokens que já respondem aos dois temas. */ .admin-main{min-width:0} .admin-governanca{max-width:980px;margin:0 auto;padding:42px 28px 64px} .admin-cabecalho{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding-bottom:24px;border-bottom:1px solid var(--bd2)} .admin-cabecalho h1{margin:0;font-size:34px;line-height:1.12;letter-spacing:-.035em} .admin-cabecalho p{max-width:62ch;margin:10px 0 0;color:var(--ink2);line-height:1.5} .admin-contador{display:grid;justify-items:end;flex:0 0 auto} .admin-contador strong{font:600 36px/1 var(--mono);letter-spacing:-.06em;color:var(--accent-alt)} .admin-contador span{margin-top:6px;color:var(--ink3);font-size:12px} .admin-status{min-height:20px;margin:18px 0;color:var(--ink2);font-size:13px} .admin-status[data-kind="error"]{color:var(--err-ink)} .admin-status[data-kind="success"]{color:var(--accent-alt)} .admin-pendencias{display:grid;gap:18px} .mudanca-card{background:var(--bg);border:1px solid var(--bd2);border-left:4px solid var(--accent-alt);border-radius:10px;padding:22px 24px;box-shadow:0 1px 2px var(--sombra)} .mudanca-card header{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-bottom:17px} .mudanca-card h2{margin:0;font-size:19px;line-height:1.3;letter-spacing:-.015em} .mudanca-card code{color:var(--ink3);font:11px/1.3 var(--mono);overflow-wrap:anywhere} .mudanca-comparacao{border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)} .mudanca-linha{display:grid;grid-template-columns:140px minmax(0,1fr) 22px minmax(0,1fr);align-items:center;gap:12px;padding:13px 0} .mudanca-linha+.mudanca-linha{border-top:1px solid var(--bd)} .mudanca-campo{color:var(--ink2);font-size:12px;font-weight:600} .mudanca-valor{min-width:0;overflow-wrap:anywhere;font-size:14px} .mudanca-anterior{color:var(--ink3);text-decoration:line-through;text-decoration-color:var(--bd3)} .mudanca-novo{color:var(--ink);font-weight:600} .mudanca-seta{color:var(--accent-alt);text-align:center} .mudanca-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .mudanca-acoes button{min-height:38px;border-radius:7px;padding:8px 14px;font:700 11px/1.2 var(--mono);letter-spacing:.02em;cursor:pointer} .mudanca-acoes button:focus-visible{outline:3px solid var(--accent-bd);outline-offset:2px} .mudanca-acoes button:disabled{cursor:wait;opacity:.62} .mudanca-aprovar{border:1px solid var(--accent);background:var(--accent);color:var(--sobre-acento)} .mudanca-manter{border:1px solid var(--bd3);background:var(--bg);color:var(--ink2)} .admin-vazio{margin:0;padding:34px;border:1px dashed var(--bd3);border-radius:10px;color:var(--ink2);text-align:center} @media(max-width:700px){ .admin-governanca{padding:28px 16px 44px} .admin-cabecalho{align-items:flex-start} .admin-cabecalho h1{font-size:29px} .mudanca-card{padding:18px} .mudanca-card header{display:grid;gap:7px} .mudanca-linha{grid-template-columns:1fr 24px 1fr;gap:8px} .mudanca-campo{grid-column:1/-1} .mudanca-acoes button{flex:1 1 190px} } .ct-ref[data-design="standalone"] .card{ background:var(--bg); border:1px solid var(--bd2); border-radius:10px; } .ct-ref[data-design="standalone"] .ct-ref-chart-card{ padding:20px 22px; } .ct-ref[data-design="standalone"] .ct-ref-bins{ color:var(--ink3); } .ct-ref[data-design="standalone"] .ct-ref-bins b{ background:var(--ink); color:var(--sobre-acento); } .ct-ref[data-design="standalone"] .ct-ref-kpis{ background:var(--bg); border-color:var(--bd2); } .ct-ref[data-design="standalone"] .ct-ref-kpis .ct-ref-kpi-tail{ background:var(--avz-bg); } .ct-ref[data-design="standalone"] .ct-ref-kpis .ct-ref-kpi-tail .v, .ct-ref[data-design="standalone"] .ct-ref-kpis .ct-ref-kpi-tail .l{ color:var(--mk-alarme); } .ct-ref[data-design="standalone"] .ct-ref-base{ color:var(--ink3); } .ct-ref{padding-top:24px} .ct-ref>.pergunta{margin:0;font-size:28px;line-height:1.08;letter-spacing:-.035em;font-weight:800;color:var(--ink)} .ct-ref>.eyebrow-periodo{max-width:650px;margin:6px 0 18px;font-size:13px;color:var(--ink2);line-height:1.35} .ct-ref #ctHero{display:flex;align-items:stretch;gap:22px;margin:0 0 18px;padding:0;background:transparent} .ct-ref-hero-copy{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center} .ct-ref #ctHero .ct-hero-lb{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)} .ct-ref #ctHero .ct-hero-vl{font-size:42px;line-height:1;margin-top:8px} .ct-ref #ctHero .ct-hero-sub{font-size:12px;line-height:1.45;color:var(--ink2);font-weight:500;max-width:620px} .ct-ref .ct-ref-kpis{display:grid;grid-template-columns:repeat(4,minmax(72px,1fr));min-width:min(480px,100%);border:1px solid var(--bd2);border-radius:10px;overflow:hidden;background:var(--bg)} .ct-ref .ct-ref-kpis>div{padding:12px 14px;border-left:1px solid var(--bd)} .ct-ref .ct-ref-kpis>div:first-child{border-left:0} .ct-ref .ct-ref-kpis .v{font-size:20px;font-weight:800;line-height:1.1;color:var(--ink)} .ct-ref .ct-ref-kpis .l{margin-top:4px;font-size:10px;line-height:1.2;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap} .ct-ref .ct-ref-kpis .ct-ref-kpi-tail{background:color-mix(in srgb,var(--mk-alarme) 7%,var(--bg))} .ct-ref .ct-ref-kpis .ct-ref-kpi-tail .v,.ct-ref .ct-ref-kpis .ct-ref-kpi-tail .l{color:var(--mk-alarme)} .ct-ref .ct-ref-base{grid-column:1/-1;padding:6px 12px!important;border-left:0!important;border-top:1px solid var(--bd);font-size:10px;color:var(--ink3)} .ct-ref .card{border-radius:12px;padding:22px;margin-bottom:18px;box-shadow:none} .ct-ref .ct-ref-chart-card h2{display:inline-block;margin-bottom:2px} .ct-ref .ct-ref-bins{float:right;margin-top:3px;color:var(--ink3);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase} .ct-ref .ct-ref-bins b{display:inline-block;margin-left:6px;padding:5px 9px;border-radius:5px;background:var(--ink);color:var(--bg);font-weight:700;letter-spacing:0;text-transform:none} .ct-ref .ct-ref-chart-card>.hint{margin-top:0} .ct-ref #histCycleTime{margin-top:8px} .ct-ref #ctPorDemanda .ct-type-card-full{display:none} .ct-ref #ctPorDemanda .ct-type-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .ct-ref #ctPorDemanda .ct-type-card{min-height:136px;border-radius:9px;padding:15px 14px} .ct-ref #ctPorDemanda .ct-type-card-value{font-size:27px} .ct-ref #ctPorDemanda .ct-type-share-hint{font-family:var(--mono);font-size:10px;color:var(--ink3)} .ct-ref #ctDemandaDrilldown{margin-top:16px;border-radius:10px} .ct-ref #rankAreasCT{margin-top:14px} .ct-ref .ct-area-grupo{border-bottom-color:var(--bd2)} .ct-ref .ct-row.ct-area{border-radius:7px} .ct-ref .ct-row.ct-sub{border-radius:5px} .ct-ref #ctMatriz,.ct-ref #distribCycleTime,.ct-ref #tbCycleTime{font-size:12px} @media (max-width:900px){ .ct-ref #ctHero{display:block} .ct-ref .ct-ref-kpis{margin-top:14px;min-width:0} } @media (max-width:560px){ .ct-ref[data-design="standalone"]{ padding:16px 14px 42px; } .ct-ref[data-design="standalone"] .card{ border-radius:10px; } .ct-ref{padding-top:16px} .ct-ref,.ct-ref .card{max-width:100%;overflow-x:hidden} .ct-ref>.pergunta{font-size:25px} .ct-ref .card{padding:15px} .ct-ref .ct-ref-chart-card .card-topo:not([hidden]){flex-direction:column;align-items:flex-start;gap:6px} .ct-ref .ct-ref-chart-card .card-topo h2{margin:0} .ct-ref .ct-ref-chart-card .ct-ref-bins{float:none;display:block;width:max-content;max-width:100%;margin:7px 0 0;white-space:normal} .ct-ref>.eyebrow-periodo,.ct-ref .ct-hero-sub,.ct-ref .hint{max-width:100%;overflow-wrap:anywhere;white-space:normal} .ct-ref .ct-ref-kpis{grid-template-columns:repeat(2,1fr)} .ct-ref .ct-ref-kpis>div:nth-child(3){border-left:0;border-top:1px solid var(--bd)} .ct-ref .ct-ref-kpis>div:nth-child(4){border-top:1px solid var(--bd)} .ct-ref .ct-ref-kpis .ct-ref-base{grid-column:1/-1} .ct-ref #ctPorDemanda .ct-type-cards{grid-template-columns:1fr} .ct-ref .ct-ref-bins{float:none;display:block;margin:6px 0 0} }