:root { /* Escala tipográfica (23/09/2026). Eram ~30 tamanhos soltos só neste arquivo, sem regra: o nome da Feature no drill saía maior que o título da seção que o contém. Sete degraus, tirados da aba Feature Cycle Time (a tela de referência), e todo `font-size` do painel usa um deles; o teste `tipografia` recusa número solto. Papel decide o degrau, e só o que não tem papel claro vai para o mais próximo. Os papéis do card (25/09/2026, auditoria visual TR-01) são quatro, e só quatro: título de card --fs-lg 600 --ink; título de bloco dentro do card --fs-md 700; subtítulo --fs-md 400 --ink3; texto de ajuda ("Clique numa linha...") --fs-sm --ink3. O sobretítulo é Mono --fs-micro 500, caixa alta, 1.4px, --ink3. As regras estão juntas, logo depois de `.card`, e cada papel é declarado uma vez. */ --fs-micro:11px; --fs-sm:12px; --fs-base:13px; --fs-md:15px; --fs-lg:20px; --fs-xl:28px; --fs-hero:42px; /* Superfícies, bordas e cinzas de texto vêm do canvas "Portal Governança Tech" de 04/09/2026, que é a referência visual vigente do produto. Só o CROMO: os tokens `--mk-*` de DADO, abaixo, continuam sendo os medidos na spec de 30/08 e não são tocados por esta adoção. Misturar cor de dado com cor de interface foi parte do que aquela spec resolveu. O que muda de fato: a página deixa de ser cinza-azulada e passa a quase-branca, o cartão continua branco, as bordas clareiam, e os cinzas de texto ganham dois degraus intermediários que faltavam (era 14/5c/98, e o salto de 5c para 98 era o que empurrava rótulo para um cinza que não passa em contraste). */ --page:#FCFCFB; --bg:#ffffff; --soft:#F1F2F4; --sunk:#FBFBFA; --sel:#F3F6FB; --nav:#EFF1F3; --row:#F4F5F6; --ink:#0D1117; --ink2:#4A515C; --ink3:#6B7280; --ink4:#8B919B; --ink5:#9AA0A8; --ink6:#B9BDC4; --bd:#EDEEEF; --bd2:#E4E5E7; --bd3:#D3D5D9; /* Azul-marinho do canvas. É o mesmo papel do #1d3a5f que estava aqui (aba ativa, barra do recorte), com o valor da referência. */ --accent:#12264F; --accent-deep:#0C1B3A; --accent-2:#4A6291; --accent-3:#8798B8; --accent-bd:#C9D4E6; /* Cor de CROMO positivo: azul institucional, o mesmo de --mk-acc. Laranja (--mk-alarme) fica só para alarme de dado, não para estado disponível, preset ativo ou selo do portal. */ /* `--mk-acc` é apelido de `--v-msg` desde 24/09/2026. O cromo de interface (`--accent-alt`) guarda o azul que já tinha: o documento separa interface de dado (seção 3.4). */ --mk-acc:var(--v-msg); --accent-alt:#1539aa; /* Cor de TEXTO de link e de ação (01/10/2026). No claro é o mesmo valor do `--accent` e do `--accent-alt`; no escuro esses dois servem de fundo e de borda, e como texto sobre o cartão davam 2,2:1 e 3,0:1, abaixo do mínimo de 4,5:1 ("Ver a lista completa", "ver as 9 squads", "Mostrar tabela"). Texto usa `--link`; fundo e borda continuam no `--accent`. */ --link:var(--accent); --link-alt:var(--accent-alt); /* Quarta cor categórica, só pra grupo de cargo (Engenharia/Produto/ Agilidade e Projetos/Outros): `--mk-alarme` é reservada pra alarme de dado, como o comentário acima já diz, e usá-la pra "Produto" fazia o card de Incidente (que É alarme de verdade) parecer a mesma cor de uma categoria neutra. */ --mk-verde:#0E7C66; /* Âmbar, só para o card de Incidente (KPIs, tendência mensal, ranking de cargo). Pedido de 14/09/2026: "um gráfico de barras vermelho está fora de cogitação" — Incidente já usava `--mk-alarme`, que É vermelho de propósito (alarme de dado geral), e o card virou indistinguível de um alerta de erro do sistema. Âmbar sinaliza atenção sem ser a mesma cor do alarme; matiz deliberadamente distante do laranja-avermelhado de `--mk-alarme`, não um degradê dele. Medido: #9A6A0C sobre branco dá 4,73:1, passa em texto normal (AA).*/ --mk-amber:#9A6A0C; /* Feature Cycle Time, "O geral e os tipos" (24/09/2026): cor do Projeto e a tinta legível sobre cada segmento da barra, nos dois temas. Validado com validate_palette.js: CVD e visão normal passam; os cinzas abaixo de 3:1 levam rótulo direto, que é o alívio exigido. */ --ct-projeto:var(--v-msg); --ct-projeto-txt:#fff; --ct-melhoria-txt:var(--ink); --ct-manut-txt:var(--ink); /* Quinta cor categórica, só para "Incidentes de Operação Assistida", que virou categoria própria em 22/09/2026. Ela precisa ficar ao lado de Incidente numa pilha e ser distinguível dele, então não podia ser degradê do âmbar; e não podia ser o alarme, que é reservado. Medido, não estimado: #6D28D9 sobre branco dá 7,10:1, acima do 4,73:1 do âmbar que já está aprovado aqui. No tema escuro, #B99BFF sobre o fundo dá 7,81:1, na mesma faixa do 8,60:1 do âmbar escuro. */ --mk-roxo:#6D28D9; /* Foco (23/09/2026, decisão dela no redesenho do mês a mês do Capacity): o pitanga do guia (#FF4E05) suavizado, para "olhe aqui" num gráfico em que todo o resto é contexto cinza. NÃO é alarme: alarme de limite continua sendo --mk-alarme. Cor só onde o título aponta o olhar. */ --mk-foco:#E0875F; /* 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. */ /* Tokens de dados `--v-*` (24/09/2026, "Ajuste do Design System V5: cor de estado e seção de dados", seção 2). Os hex são os do documento, validados lá e revalidados aqui contra as superfícies reais do cockpit (claro #FFFFFF/#FCFCFB, escuro #15191E/#0E1114): mensagem × alarme passam em daltonismo e visão normal nos dois temas. Os cinzas ficam abaixo de 3:1 de propósito (contexto, não categoria): toda marca neles leva rótulo direto ou tabela ao lado. A rampa sequencial reprova só no degrau mais claro contra o fundo, e por isso toda célula de calor escreve o número. `--mk-*` viram apelidos destes por uma versão. */ --v-ctx:#D9DCE0; --v-mid:#A8ADB5; --v-msg:#1F5FA8; --v-alarm:#C8601A; --v-text:var(--ink); --v-text-soft:#6B7280; --v-alarm-text:#B4531A; --v-alarm-bg:#FBF1EA; --v-msg-bg:#EEF3FA; --v-seq-1:#DCE7F5; --v-seq-2:#A9C4E8; --v-seq-3:#6F9BD6; --v-seq-4:#3A72BD; --v-seq-5:#1F5FA8; --v-seq-6:#16447A; /* texto sobre a rampa: tinta nos degraus claros, fundo nos escuros (no escuro a rampa inverte, e o par inverte junto) */ --v-seq-txt-claro:var(--ink); --v-seq-txt-escuro:var(--bg); --mk-base:var(--v-ctx); --mk-alt:var(--v-mid); --mk-bar:var(--v-mid); --mk-alarme:var(--v-alarm); /* `--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; /* `--sans` é o caso gêmeo do de cima, e sobreviveu à correção dele. Continua referenciada em um lugar e nunca definida: o `` da célula da matriz, que escreve "45 Features" embaixo da mediana. Pela mesma mecânica descrita acima, a propriedade inválida faz o `font-family` HERDAR do pai, e o pai é `.ct-matriz-celula`, que é `--mono`. Então o rótulo saía monoespaçado, que é exatamente o oposto do que a declaração pedia: ela existe para separar o RÓTULO do NÚMERO. A pilha é a mesma do `html,body`, e passa a ser declarada uma vez só em vez de duas, porque duas cópias são duas listas para manter iguais. */ --sans:"Instrument Sans",ui-sans-serif,-apple-system,"Segoe UI",sans-serif; /* Os outros cinco tokens que a guarda de `tests/portal.test.mjs` achou junto com o `--sans` NÃO viraram definição aqui, e a diferença importa. `--mono` e `--sans` são pilha de fonte: não existia token equivalente na paleta, então a correção era criar. `--acc-ink`, `--danger`, `--line`, `--surface` e `--panel` são COR, e cada um dos cinco papéis já tinha token: --accent, --err-ink, --bd/--bd2/--soft, --bg e --sunk. Eles vêm do vocabulário dos protótipos soltos em `web/*.html`, que nomeiam a própria paleta no `:root` deles (aderencia.html define --line e --panel, alocacao-investimentos-3tri.html define --line). O nome vazou para a folha do produto sem a definição vir junto. Defini-los aqui resolveria o sintoma e deixaria a paleta com dois nomes para a mesma cor, que é o começo de os dois divergirem. Os usos foram apontados para o token que já existe. Ver o commit desta mudança para o antes e depois medido no navegador. */ /* Cores que estavam CRUAS no arquivo e que o tema escuro obriga a nomear. Enquanto havia um tema só, hex solto funcionava; com dois, cada valor cru é um lugar onde metade da tela troca e a outra metade não. Os valores claros abaixo são exatamente os que já estavam no lugar de origem, então esta parte não muda pixel nenhum no claro. */ --sombra:rgba(20,24,28,.12); /* popovers do cabeçalho */ --sombra-forte:rgba(0,0,0,.22); /* menus flutuantes e tooltip */ --grad-topo:#ffffff; --grad-base:#fbfcfd; /* cartão de destaque */ --err-bg:#fdf2f2; --err-bd:#f5c6c6; --err-ink:#a03030; --avz-bg:#fdf8ee; --avz-bd:#f0d9a8; --avz-ink:#7a5a1e; --selo-bg:#e8d4c4; --selo-ink:#5c4033; --hairline:rgba(0,0,0,.06); /* contorno de amostra de cor */ /* Texto sobre superfície de acento. Fica token porque no escuro o acento clareia e o branco cru deixaria de ser a escolha certa em toda parte. */ --sobre-acento:#ffffff; /* Superfície invertida: tooltip e bolha de ajuda. No claro é o texto quase-preto virando fundo; no escuro isso não pode ser `--ink`, que passa a ser quase-branco e deixaria texto branco sobre branco. */ --flut-bg:var(--ink); --flut-ink:#ffffff; --flut-ink2:rgba(255,255,255,.75); /* Texto ESCRITO EM CIMA de cor de dado (os números dentro da barra de composição). No claro a rampa é escura e o branco resolve; no escuro a rampa é clara e o branco desaparece nela. Este token é o que faz o número continuar legível nos dois. */ --sobre-dado:#ffffff; } /* ---------------------------------------------------------------- * TEMA ESCURO ---------------------------------------------------------------- Três gatilhos, e a ordem entre eles é o que faz o botão funcionar nos DOIS sentidos: 1. `@media (prefers-color-scheme: dark)` guardado por `:root:not([data-theme="light"])` — segue o sistema, mas cede quando a pessoa escolheu claro explicitamente; 2. `:root[data-theme="dark"]` — a escolha explícita por escuro vence, inclusive num sistema configurado em claro. Nenhuma cor tem sua ÚNICA definição aqui dentro: tudo que este bloco redefine já existe no `:root` acima. Cor que só existisse no bloco escuro sumiria no claro, e o inverso. As superfícies espelham os papéis do claro, não os valores: `--page` é o fundo mais afastado, `--bg` é o cartão, `--soft` é o realce. No claro a página é mais escura que o cartão; no escuro é o contrário, porque profundidade no escuro se lê com MAIS luz, não com menos. */ :root { /* Os VALORES do escuro vivem aqui, uma vez só, com prefixo `--d-`. Os dois gatilhos abaixo apenas APONTAM os tokens para eles. Escrever a paleta duas vezes (uma na media query, outra no atributo) é o caminho óbvio e é também como as duas versões divergem no primeiro ajuste de cor. */ --d-page:#0E1114; --d-bg:#15191E; --d-soft:#1E242B; --d-sunk:#111519; --d-sel:#16202E; --d-nav:#1A1F25; --d-row:#191E24; --d-ink:#F2F4F6; --d-ink2:#C2C8D0; --d-ink3:#9AA2AC; --d-ink4:#828A94; --d-ink5:#737B85; --d-ink6:#5A616B; --d-bd:#232A31; --d-bd2:#2C333B; --d-bd3:#39414A; /* O acento é FUNDO com texto por cima (aba ativa, barra do recorte). O navy do claro (#12264F) sobre página escura vira quase invisível, então ele sobe de luminosidade até destacar do fundo e continuar carregando texto: branco sobre #2F4E8A dá 8,15:1, medido. */ --d-accent:#2F4E8A; --d-accent-deep:#223A6B; --d-accent-2:#7D93BC; --d-accent-3:#A9B8D4; --d-accent-bd:#33415C; /* RAMPA DE DADO no escuro. Mesma identidade e mesmo sentido da rampa validada em 30/08 — azul institucional é bom, laranja do logo é ruim —, com a luminosidade invertida de papel: no claro os dois são escuros sobre fundo claro, aqui são claros sobre fundo escuro. O sentido não muda, e é isso que não podia mudar. Medido sobre as três superfícies escuras (page, bg, soft), porque `--mk-acc` e `--mk-alarme` também são cor de TEXTO nos deltas: --d-mk-acc #7FA0FF -> 7,55 · 7,04 · 6,24 --d-mk-alarme #FF4E05 -> 5,72 · 5,33 · 4,73 O alarme é o #FF4E05 do Guia de Marca V7 SEM alteração. No claro ele precisou ser escurecido para passar em texto (o valor do guia dá 3,31:1 sobre branco); sobre fundo escuro o valor da marca passa sozinho. É o mesmo laranja do logo, enfim usado como o guia o escreve. `--d-mk-base` fica abaixo de 3:1 de propósito, como no claro: é fundo de contexto, não marca de leitura (1,73 aqui contra 1,57 lá). */ /* pares escuros dos `--v-*`, do documento; os fundos claros de alarme e mensagem, que ele deixa "a definir", saem da tinta a 12% que ele mesmo indica, sem hex novo */ --d-v-ctx:#3A414B; --d-v-mid:#5C636E; --d-v-msg:#5B93D6; --d-v-alarm:#D0702C; --d-v-text-soft:#9BA1AB; --d-v-alarm-text:#D0702C; --d-v-alarm-bg:color-mix(in srgb, #D0702C 12%, var(--d-bg)); --d-v-msg-bg:color-mix(in srgb, #5B93D6 12%, var(--d-bg)); --d-v-seq-1:#1E2F47; --d-v-seq-2:#284A73; --d-v-seq-3:#3A6BA3; --d-v-seq-4:#5B93D6; --d-v-seq-5:#8DB6E8; --d-v-seq-6:#C2D8F3; /* `--mk-base/alt/bar/acc/alarme` apontam para `--v-*` no :root, e os `--v-*` trocam no escuro: os `--mk-*` acompanham sem mapeamento próprio */ --d-mk-verde:#3FBE9C; /* Âmbar do card de Incidente no escuro. #E0AC3C sobre #15191E dá 8,52:1, sobre o cartão (#1E242B) dá 7,55:1 — folgado o bastante pra também servir de cor de texto nos KPIs. */ --d-mk-amber:#E0AC3C; --d-mk-roxo:#B99BFF; --d-mk-foco:#F09B75; /* `--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; /* 5,5:1 e 7,4:1 sobre o cartão escuro (#15191E); 5,1:1 e 6,9:1 sobre --d-sel */ --d-link:#7D93BC; --d-link-alt:#8FA8E8; /* 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-verde:var(--d-mk-verde); --mk-amber:var(--d-mk-amber); --mk-roxo:var(--d-mk-roxo); --mk-foco:var(--d-mk-foco); --v-ctx:var(--d-v-ctx); --v-mid:var(--d-v-mid); --v-msg:var(--d-v-msg); --v-alarm:var(--d-v-alarm); --v-text-soft:var(--d-v-text-soft); --v-alarm-text:var(--d-v-alarm-text); --v-alarm-bg:var(--d-v-alarm-bg); --v-msg-bg:var(--d-v-msg-bg); --v-seq-1:var(--d-v-seq-1); --v-seq-2:var(--d-v-seq-2); --v-seq-3:var(--d-v-seq-3); --v-seq-4:var(--d-v-seq-4); --v-seq-5:var(--d-v-seq-5); --v-seq-6:var(--d-v-seq-6); --accent-alt:var(--d-accent-alt); --link:var(--d-link); --link-alt:var(--d-link-alt); --ct-projeto:var(--d-v-msg); --ct-projeto-txt:var(--d-page); --ct-melhoria-txt:var(--d-page); --ct-manut-txt:var(--d-ink); --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-verde:var(--d-mk-verde); --mk-amber:var(--d-mk-amber); --mk-roxo:var(--d-mk-roxo); --mk-foco:var(--d-mk-foco); --v-ctx:var(--d-v-ctx); --v-mid:var(--d-v-mid); --v-msg:var(--d-v-msg); --v-alarm:var(--d-v-alarm); --v-text-soft:var(--d-v-text-soft); --v-alarm-text:var(--d-v-alarm-text); --v-alarm-bg:var(--d-v-alarm-bg); --v-msg-bg:var(--d-v-msg-bg); --v-seq-1:var(--d-v-seq-1); --v-seq-2:var(--d-v-seq-2); --v-seq-3:var(--d-v-seq-3); --v-seq-4:var(--d-v-seq-4); --v-seq-5:var(--d-v-seq-5); --v-seq-6:var(--d-v-seq-6); --accent-alt:var(--d-accent-alt); --link:var(--d-link); --link-alt:var(--d-link-alt); --ct-projeto:var(--d-v-msg); --ct-projeto-txt:var(--d-page); --ct-melhoria-txt:var(--d-page); --ct-manut-txt:var(--d-ink); --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:var(--sans);font-size:var(--fs-base); -webkit-font-smoothing:antialiased} .num{font-variant-numeric:tabular-nums} header.top{background:var(--bg);border-bottom:1px solid var(--bd);padding:16px 28px; display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20} /* Cabeçalho único das abas (24/09/2026): nome da aba em caixa alta mono à esquerda, recorte e filtros no meio, tema, sino e conta à direita. */ .top-titulo{margin-block:0;margin-right:auto;font-family:var(--mono);font-size:var(--fs-sm);font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);white-space:nowrap} header.top .top-conta{margin-left:4px} .top-acoes{display:flex;align-items:center;gap:6px;margin-left:8px} .top-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border:0;border-radius:50%;background:transparent;color:var(--ink2);cursor:pointer} .top-ico:hover{background:var(--soft);color:var(--ink)} .top-ico:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .top-ico .rail-tema-ico{display:inline-flex} .top-sino{position:relative} .sino-marca{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%; background:var(--mk-alarme);box-shadow:0 0 0 2px var(--bg)} .sino-marca[hidden]{display:none} .sino-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:300px; background:var(--bg);border:1px solid var(--bd2);border-radius:10px;padding:12px 14px; box-shadow:0 8px 24px var(--sombra)} .sino-menu:not([hidden]){display:flex;flex-direction:column;gap:8px} .sino-menu[hidden]{display:none} .sino-tit{margin:0;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)} .sino-aviso{font-size:var(--fs-sm);color:var(--ink2);line-height:1.4} .sino-aviso:empty,.sino-aviso[hidden]{display:none} .sino-vazio{margin:0;font-size:var(--fs-sm);color:var(--ink4)} .sino-vazio[hidden]{display:none} /* 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:10px;margin-left:0} /* seletor de período e filtros: a mesma pílula, maior, como na referência */ .periodo .fp-abre,.periodo .filtro-area .fa-abre,.periodo .filtro-responsavel .fa-abre,.periodo .filtro-squad .fa-abre{ display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-md);font-weight:500;color:var(--ink); padding:8px 14px;border-radius:8px;border:1px solid var(--bd2);background:var(--bg)} .periodo .fp-abre:hover{background:var(--soft)} .filtro-periodo{position:relative} .fp-seta{font-style:normal;font-size:var(--fs-micro);color:var(--ink3)} /* estado de publicação é neutro (DS de dados, 3.2): sem verde */ .fp-selo{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink3);flex:none} .fp-selo.parcial{background:linear-gradient(90deg,var(--ink3) 50%,transparent 50%)} .fp-selo.fechado{background:var(--ink3)} .fp-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:330px; background:var(--bg);border:1px solid var(--bd2);border-radius:10px;padding:12px; box-shadow:0 8px 24px var(--sombra)} .fp-menu:not([hidden]){display:flex;flex-direction:column;gap:10px} .fp-menu[hidden]{display:none} .fp-linha{display:grid;grid-template-columns:76px 1fr;align-items:start;gap:8px} .fp-rot{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding-top:7px} .fp-opcoes{display:flex;flex-wrap:wrap;gap:4px} .fp-meses{display:grid;grid-template-columns:repeat(4,1fr)} .fp-legenda{margin:2px 0 0;font-size:var(--fs-micro);color:var(--ink4)} .periodo button{font:inherit;font-size:var(--fs-sm);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:var(--fs-sm);color:var(--ink3)} .periodo input[type=date]{font:inherit;font-size:var(--fs-sm);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:var(--fs-micro);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:var(--fs-sm);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:var(--fs-sm);color:var(--ink3);margin-left:6px;white-space:nowrap} /* O aviso de mês fechado, oculto desde 31/08/2026, passou a morar no sino do cabeçalho em 24/09/2026 (decisão dela): fora da barra, ao alcance. */ /* 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-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} /* 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:var(--fs-base);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 24px;max-width:1800px;margin:0 auto} section.tab{display:none} section.tab.on{display:block} .eyebrow-periodo{font-size:var(--fs-sm);color:var(--ink3);margin:0 0 14px;line-height:1.5} .eyebrow-periodo b{color:var(--ink2)} .pergunta{font-size:var(--fs-lg);font-weight:700;color:var(--ink);letter-spacing:-.01em;margin:0 0 4px} /* panorama: o "tamanho" do time e do trabalho, em números grandes, no topo */ .panorama{display:flex;flex-wrap:wrap;gap:0;background:var(--bg);border:1px solid var(--bd2); border-radius:10px;padding:6px 4px;margin:16px 0} .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:var(--fs-xl);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink)} .pn-l{font-size:var(--fs-micro);color:var(--ink3);font-weight:600;margin-top:6px} .pn-tag{display:block;font-size:var(--fs-micro);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:16px;margin-bottom:16px} .kpi{background:var(--bg)} .kpi .lb{font-size:var(--fs-sm);color:var(--ink3);font-weight:600;margin-bottom:7px} .kpi .lb .linha{display:flex;align-items:center;gap:5px} .mk-dot{width:8px;height:8px;border-radius:50%;flex:none} .kpi .lb .pl{display:block;font-weight:500;color:var(--ink2);font-size:var(--fs-micro);margin-top:2px} .kpi .vl{font-size:var(--fs-xl);font-weight:800;line-height:1;letter-spacing:-.02em} .kpi .vl .u{font-size:var(--fs-base);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:var(--fs-md);font-weight:600;color:var(--ink3);letter-spacing:normal} .kpi .ft{font-size:var(--fs-sm);color:var(--ink3);margin-top:7px} .kpi.hl{background:linear-gradient(180deg,var(--grad-topo),var(--grad-base));border-color:var(--bd2)} /* Consolidado por tipo dentro do card de grupo, decisão de 14/09/2026: o card já é o lugar mais visto da aba, então é ele que responde "quanto dessa hora é Feature, Incidente, Requisição" sem precisar abrir o drill-down de baixo. */ .kpi .composicao{margin-top:10px;padding-top:10px;border-top:1px solid var(--bd)} .kpi .composicao-bar{display:flex;height:6px;border-radius:3px;overflow:hidden; background:var(--soft)} .kpi .composicao-bar span{height:100%} .kpi .composicao-legenda{list-style:none;margin:8px 0 0;padding:0; display:grid;grid-template-columns:1fr 1fr;gap:5px 10px} .kpi .composicao-legenda li{display:flex;align-items:center;gap:5px; font-size:var(--fs-micro);color:var(--ink3);min-width:0} .kpi .composicao-legenda i{width:6px;height:6px;border-radius:50%;flex:none} .kpi .composicao-legenda span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kpi .composicao-legenda b{color:var(--ink2);font-weight:600;margin-left:auto; flex:none;font-variant-numeric:tabular-nums} .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:var(--fs-sm);color:var(--ink3);font-weight:600;margin-bottom:4px} .ct-hero-vl{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)} .ct-hero-vl .u{font-size:var(--fs-lg);font-weight:600;color:var(--ink2);margin-left:6px} .ct-hero-sub{font-size:var(--fs-base);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:var(--fs-lg);font-weight:700;color:var(--ink)} .ct-hero-stats .l{font-size:var(--fs-micro);color:var(--ink3);font-weight:600;margin-top:2px} /* Um card só (25/09/2026, auditoria visual TR-03). Padding, raio e borda mudavam de aba para aba (padding de 16/18 a 26/28, raio 10, 12, 14 ou 16, borda --bd numas e --bd2 noutras). A geometria mora aqui, uma vez, e vale para todo contêiner de card das abas: `.card`, `.cap-bloco`, o cartão da Taxa de Defeito, o KPI e o painel de detalhe. O espaço entre cards é 16px, na margem e nas grades. */ .card,.cap-bloco,.kpi,.ct-demanda-drill,.cap-base{border:1px solid var(--bd2);border-radius:10px;padding:22px} .card{background:var(--bg);margin-bottom:16px} /* Papéis de texto do card (TR-01). Antes o degrau dependia da aba: 15/700 em uns, 20/600 noutros, 20/700 nos cartões da Taxa de Defeito, inclusive entre dois cards lado a lado. Agora depende do papel. */ .card h2,.card-titulo,.cap-bloco-cab h3,.mz-card .cap-bloco-cab h2,.def-card h2{ font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 3px} .card-bloco-titulo, .ct-geral-layout .ct-type-card-full .ct-type-card-title, .ct-divisao-cols .ct-type-card-title{font-size:var(--fs-md);font-weight:700;color:var(--ink)} .card-sub,.cap-bloco-sub,.cap-bloco-cab p,.def-card-sub{font-size:var(--fs-md);font-weight:400;color:var(--ink3)} /* Texto de ajuda: a instrução de uso ("Clique numa linha...", "Clique para filtrar"). Em 15px ela competia com o subtítulo, que tem o mesmo tamanho e a mesma cor (CAP-07). Classe para qualquer aba usar. */ .texto-ajuda,.cap-bloco-aux{font-size:var(--fs-sm);font-weight:400;color:var(--ink3)} /* 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. Um estilo só (FCT-04): a mesma `.eyebrow-card` saía em Mono dentro de "O geral e os tipos" e em Instrument Sans no "Por área", porque a família só era declarada no seletor de dentro. Agora a família vem na classe. */ .eyebrow,.eyebrow-card,.ct-geral-eyebrow,.cap-mes-eyebrow{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500; letter-spacing:1.4px;text-transform:uppercase;color:var(--ink3)} .eyebrow-card{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:var(--fs-micro);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:var(--fs-micro);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:var(--fs-micro);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:var(--fs-micro);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} /* Drill-down por grupo do Capacity (23/09/2026): o total do grupo abre o bloco e os itens vêm recuados abaixo dele. */ .cap-detalhe-grupo+.cap-detalhe-grupo{margin-top:10px} .ct-row.cap-detalhe-grupo-total .nome{font-weight:600} .cap-detalhe-grupo .ct-row:not(.cap-detalhe-grupo-total) .nome{padding-left:12px} .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:var(--fs-sm);color:var(--ink3);margin:0 0 14px;line-height:1.5} table{width:100%;border-collapse:collapse;font-size:var(--fs-base)} th{text-align:left;font-size:var(--fs-micro);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:var(--fs-micro);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:var(--fs-sm)} /* 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:var(--fs-base)} td.dim{color:var(--ink3);font-weight:400} /* 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:var(--fs-sm);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:var(--fs-base)} /* 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:var(--fs-micro);color:var(--ink3);font-weight:600;font-variant-numeric:normal} .tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-sm);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 .ct-hero{margin-bottom:16px;padding:16px 20px} #tab-horas .ct-hero-vl{font-size:var(--fs-hero)} .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:var(--fs-micro);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:var(--fs-sm)} .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:var(--fs-base)} .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:var(--fs-sm);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:var(--fs-sm)} 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:var(--fs-micro);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. Até 25/09/2026 era "i" em --bg sobre --bd2: no claro, branco sobre #E4E5E7, cerca de 1,2:1, e o ícone onde as definições do README moram na tela quase não se via (auditoria visual TR-04). Agora é "i" --ink3 sobre --bg, com anel de 1px --ink4: 4,8:1 no texto e 3,2:1 no anel, no claro; no escuro os mesmos tokens passam com folga. O anel é sombra interna, e não borda, para o círculo seguir com 14px. Caixa alta e espaçamento do pai não entram: dentro de um rótulo em caixa alta o "i" virava "I" (FCT-02). */ .info{ display:inline-flex;align-items:center;justify-content:center; width:14px;height:14px;border-radius:50%;background:var(--bg);color:var(--ink3); box-shadow:inset 0 0 0 1px var(--ink4); font-size:var(--fs-micro);font-weight:800;font-style:normal;flex:none;cursor:help; position:relative;margin-left:5px;vertical-align:middle; text-transform:none;letter-spacing:normal; } .info:hover,.info:focus-visible{background:var(--accent);color:var(--bg);box-shadow:none;outline:none} /* Só a troca de fundo não bastava como foco: num "i" de 14px ela passava despercebida, e o Tab parava num lugar sem sinal nenhum (QA-008, 25/09/2026). O anel é o mesmo dos outros controles do painel. */ .info:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Suave (24/09/2026, pedido dela): o balão entra com fade e um leve deslocamento, e abre também pelo teclado. `visibility` em vez de `display` é o que deixa a transição acontecer. */ .info .bolha{ display:block;visibility:hidden;opacity:0;transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s; position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%); width:240px;background:var(--flut-bg);color:var(--flut-ink);font-size:var(--fs-sm);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,.info:focus-visible .bolha{visibility:visible;opacity:1;transition-delay:0s} .info .bolha{margin-bottom:-3px} .info:hover .bolha,.info:focus-visible .bolha{margin-bottom:0} .info.info-dir .bolha{left:auto;right:-6px;transform:none} .info.info-dir .bolha::after{left:auto;right:12px;transform:none} @media (prefers-reduced-motion:reduce){.info .bolha{transition:none}} /* 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-grupo:last-child .pn-item:last-child .info .bolha, .kpis > :last-child .info .bolha{left:auto;right:-6px;transform:none} .panorama .pn-grupo:last-child .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)} /* fechada, a bolha do cabeçalho não ocupa lugar: escondida só com `visibility`, ela abria para baixo e esticava a rolagem da tabela, e um ranking de uma linha ganhava barra de rolagem (QA de 15/10/2026) */ th .info:not(:hover):not(:focus-visible) .bolha{display:none} /* 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:var(--fs-sm);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:var(--fs-base);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:var(--fs-md);font-weight:700;color:var(--ink2)} .ct-row .vol .l{font-size:var(--fs-micro);color:var(--ink3);font-weight:600;letter-spacing:.03em;text-transform:uppercase} .ct-row .nome{font-size:var(--fs-md);font-weight:700} .ct-row .n{font-size:var(--fs-micro);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:var(--fs-micro)} .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:var(--fs-micro); 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:var(--fs-lg);font-weight:800;letter-spacing:-.01em} .ct-row .val .l{font-size:var(--fs-micro);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:var(--fs-micro);font-weight:600;color:var(--ink3); line-height:1.25;letter-spacing:0;text-transform:none} /* composição full x tipos: cartões compactos e uma única faixa de participação */ .ct-type-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px} .ct-topo{margin-bottom:10px} .ct-ref .card.ct-geral-tipos{background:var(--soft)} /* O geral e os tipos (24/09/2026): total à esquerda, divisão à direita. Escala só com os tokens --fs-*; mono em caixa alta para rótulo e diferença, sans para nome e número. Texto sempre em tinta; a cor do tipo fica na marca (régua, barra), nunca no texto, exceto o âmbar de atenção. */ .ct-geral-tipos .eyebrow-card{margin-bottom:16px} /* só posição: a tipografia é a do .eyebrow-card, o sobretítulo único (FCT-04) */ .ct-geral-eyebrow{margin:0} .ct-geral-base{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink4);margin-top:4px} .ct-type-cards.ct-geral-layout{display:grid;grid-template-columns:minmax(260px,1fr) 2.2fr;gap:22px;align-items:stretch} .ct-geral-layout .ct-type-card-full{border:1px solid var(--bd);box-shadow:0 1px 3px var(--sombra);background:var(--bg);border-radius:14px; padding:28px 32px;display:flex;flex-direction:column;justify-content:center;gap:6px;cursor:default;min-height:0} .ct-geral-layout .ct-type-card-full:hover{border-color:var(--bd);box-shadow:0 1px 3px var(--sombra)} .ct-geral-layout .ct-type-card-full .ct-type-card-title{margin-top:10px} .ct-geral-layout .ct-type-card-full .ct-type-card-title i{display:none} .ct-geral-layout .ct-type-card-full .ct-type-card-value{margin-top:6px;font-size:var(--fs-hero);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)} .ct-geral-layout .ct-type-card-value small{font-size:var(--fs-base);font-weight:500;letter-spacing:0;color:var(--ink3);margin-left:4px} .ct-geral-layout .ct-type-card-full .ct-type-card-meta{margin-top:10px;font-size:var(--fs-base);line-height:1.45;color:var(--ink2)} .ct-divisao{border:1px dashed var(--bd2);border-radius:14px;padding:22px 26px;min-width:0} .ct-divisao-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px} .ct-divisao-soma{font-size:var(--fs-base);color:var(--ink3);font-variant-numeric:tabular-nums} .ct-divisao .ct-type-share{height:40px;margin-top:0;gap:3px;background:transparent;border-radius:6px} .ct-divisao .ct-type-share-segment{justify-content:flex-start;padding:0 14px;font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#fff;border-radius:4px;overflow:hidden;text-overflow:ellipsis} .ct-divisao .ct-type-share-segment.seg-Project{color:var(--ct-projeto-txt)} .ct-divisao .ct-type-share-segment.seg-Improvement{color:var(--ct-melhoria-txt)} .ct-divisao .ct-type-share-segment.seg-Maintenance,.ct-divisao .ct-type-share-segment.seg-sem{color:var(--ct-manut-txt)} .ct-divisao .ct-type-share-segment.atencao{color:var(--v-alarm-text);justify-content:center;padding:0 8px} .ct-divisao-cols.lg.chave{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:24px;margin-top:22px; font-size:inherit;font-weight:inherit;color:inherit} .ct-divisao-cols .ct-type-card{min-height:0;border:0;border-radius:0;background:transparent;padding:0;display:block} .ct-divisao-cols .ct-type-card:hover{box-shadow:none;border-color:transparent} .ct-divisao-cols .ct-type-card:hover .ct-type-card-title>span:first-of-type{text-decoration:underline;text-underline-offset:3px} .ct-divisao-cols .mk.ct-regua{display:block;width:100%;height:3px;border-radius:2px;margin-bottom:14px} .ct-divisao-cols .ct-type-card-title{display:flex;align-items:center;gap:6px} .ct-divisao-cols .ct-type-card-title i{display:none} .ct-divisao-cols .ct-type-card-value{margin-top:8px;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink)} .ct-divisao-cols .ct-type-card-meta{margin-top:10px;font-size:var(--fs-base);color:var(--ink3);font-variant-numeric:tabular-nums} .ct-divisao-cols .ct-type-card-delta{margin-top:10px;font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink3)} .ct-divisao-cols .ct-delta-ni{color:var(--v-alarm-text);font-weight:600} @media (max-width:1100px){.ct-type-cards.ct-geral-layout{grid-template-columns:1fr}.ct-divisao-cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}} /* em tela estreita os tipos empilham: a 375 px o ícone de informação encostava no nome (medido em 24/09/2026) */ @media (max-width:600px){.ct-divisao-cols.lg.chave{grid-template-columns:1fr}} .ct-regra .card p{max-width:90ch;line-height:1.55;color:var(--ink2)} .ct-regra-tabela{margin:12px 0;max-width:640px} .ct-feature-motivo{color:var(--v-alarm-text);font-weight:600} .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:var(--fs-base);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:var(--fs-xl);font-weight:800;letter-spacing:-.04em;line-height:1} .ct-type-card-value small{font-size:var(--fs-sm);font-weight:500;letter-spacing:0;color:var(--ink3)} .ct-type-card-meta{margin-top:10px;color:var(--ink3);font-size:var(--fs-micro)} .ct-type-card-delta{margin-top:10px;color:var(--ink3);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0;text-transform:none} .ct-type-card-delta span{font-size:var(--fs-sm);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:var(--fs-micro);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:var(--fs-sm)} .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:var(--fs-micro);font-weight:600;letter-spacing:.04em;white-space:nowrap} .ct-type-share-hint{margin:8px 0 0} /* A matriz é a tabela mais larga do painel e a única que não cabe num laptop: com 12 meses o grid pede 180 + 12×74 + 92 = 1.160px de mínimo. Rolar sempre foi possível, mas ninguém descobria como. Medido em 19/09/2026, no publicado, com o ano de 2025 inteiro: janela 1920 → 1.470 visíveis para 1.470 de conteúdo, cabe janela 1440 → 990 visíveis para 1.212, a última coluna fica 126px fora janela 1280 → 830 visíveis para 1.212, fica 382px fora No macOS a barra de rolagem é sobreposta e some sozinha, roda de mouse vertical não rola na horizontal, e arrastar não move um container de overflow. Então a tela mostrava metade dos meses sem dizer que era metade, e quem lia concluía que de julho em diante não houve Feature nenhuma. Dado parcial passando por dado completo é o defeito que este projeto trata como o mais caro. São duas regras e as duas são necessárias. A barra fica PERMANENTE, porque affordance que some é o mesmo que não existir. E a coluna da área GRUDA, senão rolar tira o nome da linha e sobram números sem dono, que é exatamente o que a regra do `.rolagem` já resolveu para as tabelas. */ /* Desde 24/09/2026 a matriz é a tabela da Capacity (`mzRanking`, classe `ct-matriz-mz`); a rolagem é do `.cap-mz-rolo` que a embrulha. */ #ctMatriz .cap-mz-rolo{scrollbar-width:thin;scrollbar-color:var(--bd2) transparent} /* `-webkit-appearance:none` é o que tira a barra do modo sobreposto do macOS e a torna permanente. Sem ele, `height` não adianta: a barra continua aparecendo só durante a rolagem, que é quando já não é pista. */ #ctMatriz .cap-mz-rolo::-webkit-scrollbar{-webkit-appearance:none;height:9px} #ctMatriz .cap-mz-rolo::-webkit-scrollbar-track{background:transparent} #ctMatriz .cap-mz-rolo::-webkit-scrollbar-thumb{border-radius:5px;background:var(--bd2)} /* O canto do cabeçalho gruda junto com as áreas, senão os nomes dos meses passam por cima da coluna que ficou parada. O fundo é opaco de propósito: transparente deixaria as células rolarem POR BAIXO do nome. */ .ct-matriz-mz thead th:first-child, .ct-matriz-mz tbody th{ position:sticky;left:0;z-index:2; background:var(--bg);box-shadow:1px 0 0 var(--bd2); } /* 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} /* Affordance de clique: só as linhas que de fato abrem algo (com o `data-*` que o JS usa pra saber o quê) ganham hover, nunca a linha de pessoa, que é folha e não abre nada. */ .ct-row.ct-area:hover, .ct-row.ct-sub[data-squad]:hover, .ct-row.ct-sub2[data-pessoas-cargo]:hover, .ct-row.ct-sub3[data-pessoas-cargo]:hover{background:var(--sel)} .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:var(--fs-base);font-weight:600;color:var(--ink2)} .ct-row.ct-sub .track{height:14px} .ct-row.ct-sub .val .v{font-size:var(--fs-md)} .ct-row.ct-sub.com-volume{grid-template-columns:168px 1fr 78px 92px} .ct-row.ct-sub .vol .v{font-size:var(--fs-base)} /* 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:var(--fs-sm);font-weight:600;color:var(--ink3)} .ct-row.ct-sub2 .n{font-size:var(--fs-micro)} .ct-row.ct-sub2 .track{height:10px} .ct-row.ct-sub2 .val .v{font-size:var(--fs-base)} .ct-row.ct-sub2 .vol .v{font-size:var(--fs-micro)} .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:var(--fs-micro);font-weight:500;color:var(--ink3)} .ct-row.ct-sub3 .n{font-size:var(--fs-micro)} .ct-row.ct-sub3 .track{height:7px} .ct-row.ct-sub3 .val .v{font-size:var(--fs-sm)} .ct-row.ct-sub3 .vol .v{font-size:var(--fs-micro)} .ct-row.ct-sub3 .val .l,.ct-row.ct-sub3 .vol .l{display:none} /* Quinto nível, só na árvore de Grupo (Grupo→Família→Cargo→Squad→Pessoa): é a mesma pessoa-folha que "Por área" já mostra em ct-sub3, só que um degrau mais fundo porque a árvore de grupo tem um nível a mais (Família) antes de chegar em Cargo. Mesmo padrão de recuo, mais um degrau. */ .ct-row.ct-sub4{grid-template-columns:168px 1fr 78px 92px;padding:2px 0 2px 88px; position:relative;background:none} .ct-row.ct-sub4::before{content:'';position:absolute;left:71px;top:0;bottom:0; width:1px;background:var(--bd)} .ct-row.ct-sub4 .nome{font-size:var(--fs-micro);font-weight:500;color:var(--ink3)} .ct-row.ct-sub4 .n{font-size:var(--fs-micro)} .ct-row.ct-sub4 .track{height:7px} .ct-row.ct-sub4 .val .v{font-size:var(--fs-sm)} .ct-row.ct-sub4 .vol .v{font-size:var(--fs-micro)} .ct-row.ct-sub4 .val .l,.ct-row.ct-sub4 .vol .l{display:none} /* Folha real do drill-down: os work items por trás da hora de uma pessoa. "não consigo ver em qual task ele apontou" (14/09/2026) — sem título (a coleta nunca buscou), então cada item é o número, linkado pro Azure DevOps, onde o título mora. Recuo alinhado ao nível de pessoa que a precede (ct-sub3 na árvore de área, ct-sub4 na de grupo), por isso a margem é dada pelo pai (`.ct-row + .ct-itens`), não fixa aqui. */ .ct-itens{display:flex;flex-direction:column;gap:2px;padding:4px 0 6px 68px} .ct-row.ct-sub4+.ct-itens{padding-left:88px} .ct-itens .ct-item{display:grid;grid-template-columns:64px 44px 84px 1fr; gap:8px;align-items:center;font-size:var(--fs-micro);color:var(--ink3); text-decoration:none;padding:2px 6px;border-radius:4px} .ct-itens .ct-item:hover{background:var(--soft);color:var(--ink)} .ct-itens .ct-item .id{font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums} .ct-itens .ct-item .horas{text-align:right;font-variant-numeric:tabular-nums} /* Abaixo de ~560px as colunas fixas (168px nome + 78px valor + 92px percentual, e mais o recuo de cada nível) somam mais que a tela: a linha vazava de lado, sempre, em qualquer aba que usa `.ct-row`, e ficou mais visível com a árvore de 4 níveis (Grupo→Família→Cargo→Squad) e o ranking de Incidente que entraram em 14/09/2026, mas o defeito já existia antes deles. Vira duas linhas: nome em cima (largura cheia), pista e valor embaixo. `.vol` (o percentual secundário) some — é a informação menos essencial das quatro, e brigar por espaço com ela é o que forçava as colunas fixas a não caber. */ @media (max-width:560px){ .ct-row,.ct-row.com-volume, .ct-row.ct-sub,.ct-row.ct-sub.com-volume, .ct-row.ct-sub2,.ct-row.ct-sub3,.ct-row.ct-sub4{ display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px; grid-template-columns:none; } .ct-row>div:first-child{flex:1 1 100%;min-width:0} .ct-row .track{flex:1 1 auto;min-width:60px;order:1} .ct-row .val{flex:none;order:2;text-align:right} .ct-row .vol{display:none} /* O recuo por nível ainda diz "isto é filho", só que mais barato: a régua vertical (`::before`) continua no mesmo lugar, e o texto some menos espaço tirando os 168px que o grid fixo reservava mesmo sem usar. */ .ct-row.ct-sub{padding-left:18px} .ct-row.ct-sub2{padding-left:32px} .ct-row.ct-sub3{padding-left:46px} .ct-row.ct-sub4{padding-left:60px} .ct-itens{padding-left:32px;grid-template-columns:none} .ct-itens .ct-item{grid-template-columns:56px 40px 1fr auto} .ct-itens .ct-item .data{display:none} } .empty{padding:40px;text-align:center;color:var(--ink3);font-size:var(--fs-base)} .err{background:var(--err-bg);border:1px solid var(--err-bd);color:var(--err-ink);padding:12px 14px;border-radius:8px;font-size:var(--fs-base);margin-bottom:16px} /* recorte do painel, no topo da Visão geral */ .escopo-topo{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .escopo-topo h2{margin:0} .escopo-total{margin-left:auto;font-size:var(--fs-base);color:var(--ink2)} .escopo-total b{font-size:var(--fs-lg);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:var(--fs-micro);margin-left:auto;opacity:.7} .escopo-barra .seg b{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em; color:var(--ink3);font-variant-numeric:tabular-nums} .escopo-barra .seg span{font-size:var(--fs-sm);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:var(--fs-sm);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:var(--fs-sm);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} /* Chips genéricos de filtro, fora do escopo de `.escopo-resumo` (usados na aba Capacity Full para o filtro por tipo de demanda). Mesma linguagem visual, sem herdar o container específico. */ .chips:not([hidden]){display:flex;flex-wrap:wrap;gap:6px 8px;margin:8px 0} .chips .chip{background:var(--soft);border:0;border-radius:5px;padding:4px 9px; font:inherit;font-size:var(--fs-sm);color:var(--ink3);font-variant-numeric:tabular-nums; cursor:pointer;box-shadow:inset 0 0 0 1px transparent} .chips .chip:hover{box-shadow:inset 0 0 0 1px var(--bd2)} .chips .chip[aria-pressed="true"]{background:var(--accent);color:#fff} /* 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:var(--fs-micro);opacity:.85} .escopo-contagem{font-size:var(--fs-sm);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} /* squad que pesou na área no período e hoje está em outra (opção A, 15/10/2026) */ .escopo-hoje{font-size:var(--fs-micro);color:var(--ink3);white-space:nowrap} .escopo-nomes li{font-size:var(--fs-sm);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} .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:var(--fs-micro);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:var(--fs-sm);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(--link);font:inherit;font-size:var(--fs-micro);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:var(--fs-micro);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 área, e a pergunta do menu é "qual delas". */ .fa-nome{min-width:0;overflow-wrap:anywhere} .fa-lista{overflow-y:auto;min-height:0;flex:1 1 auto;margin:0 -2px;padding:0 2px} .fa-rodape{flex:none} .fa-busca{flex:none;font:inherit;font-size:var(--fs-base);color:var(--ink); border:1px solid var(--bd2);border-radius:6px;padding:6px 8px;margin-bottom:6px; width:100%;background:var(--bg)} .fa-busca::placeholder{color:var(--ink3)} .fa-busca:focus-visible{outline:2px solid var(--mk-acc);outline-offset:1px;border-color:var(--mk-acc)} /* quantas squads a pessoa responde NESTE recorte. Sem isso marca-se às cegas, e a tela vazia que volta parece "não houve entrega" */ .fa-n{margin-left:auto;padding-left:10px;font-size:var(--fs-micro);color:var(--ink3); font-variant-numeric:tabular-nums;flex:none} .fa-vazio{padding:10px 8px;font-size:var(--fs-sm);color:var(--ink3)} /* o que sobrou depois de aplicar. Fica FORA do menu porque a pergunta ("filtrei o que eu queria?") é feita com o menu já fechado */ .filtro-resumo{font-size:var(--fs-sm);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} /* o filtro que o link pedia e o recorte não tem: aviso, não resumo */ .filtro-ignorado{color:var(--ink2);border-style:dashed;white-space:normal} /* 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:var(--fs-sm);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:var(--fs-micro);color:var(--link);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:var(--fs-base);color:var(--ink2);cursor:pointer;white-space:nowrap} /* A busca altera o atributo hidden. Como a regra acima declara display, o atributo sozinho perde na cascata e a linha continua visível. */ /* a busca esconde com `hidden`, e o `display:flex` acima passava por cima dele em todo filtro menos o de squad (QA de 15/10/2026: a busca de responsável não filtrava nada) */ .fa-menu label[hidden]{display:none} .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-menu .dot,.filtro-responsavel .fa-menu .dot{width:8px;height:8px;border-radius:50%;flex:none} .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:var(--fs-sm);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} .filtro-responsavel .fr-secao{font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--ink3);padding:7px 8px 3px} .filtro-responsavel .fr-secao+.fr-secao, .filtro-responsavel label+.fr-secao{border-top:1px solid var(--bd);margin-top:4px} .filtro-responsavel .fr-aviso{font-size:var(--fs-sm);color:var(--ink3); padding:6px 8px;max-width:230px;white-space:normal} .filtro-responsavel .fr-cadastro{font-size:var(--fs-sm);font-weight:600;color:var(--ink2); padding:4px 8px 8px;max-width:260px;white-space:normal} .filtro-responsavel .fr-cadastro small{display:block;font-weight:400;color:var(--ink3); font-size:var(--fs-micro);margin-top:2px} .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:var(--fs-sm);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:var(--fs-sm);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(--link)} .ct-feature-item b,.ct-feature-item small{display:block}.ct-feature-item b{font-size:var(--fs-base);font-weight:600;color:var(--ink)}.ct-feature-item small{font-size:var(--fs-sm);color:var(--ink3);margin-top:2px}.ct-feature-item strong{white-space:nowrap;font-size:var(--fs-sm)} .ct-drill-loading,.ct-drill-empty{font-size:var(--fs-sm);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:var(--fs-sm);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(--link);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:var(--fs-base);white-space:nowrap;flex-shrink:0} main{padding:16px 14px 48px} .pergunta{font-size:var(--fs-md)} .kpis{grid-template-columns:1fr} .kpi .vl{font-size:var(--fs-lg)} .ct-hero{padding:16px 18px;gap:16px} .ct-hero-vl{font-size:var(--fs-xl)} .ct-hero-vl .u{font-size:var(--fs-md)} .ct-hero-stats{margin-left:0;gap:18px;width:100%} .card,.cap-bloco,.kpi,.ct-demanda-drill,.cap-base{padding:14px 16px} #tab-horas .ct-hero{padding:14px 16px} #tab-horas .ct-hero-vl{font-size:var(--fs-xl)} #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:var(--fs-xl)} .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:var(--fs-md)} .ct-row.ct-sub .val .v{font-size:var(--fs-base)} .ct-row .nome{font-size:var(--fs-base)} .ct-type-cards{grid-template-columns:1fr 1fr} .ct-type-card{min-height:118px;padding:13px} .ct-type-card-value{font-size:var(--fs-lg)} .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:var(--fs-micro);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:var(--fs-micro);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:var(--fs-sm);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 22px;font-size:var(--fs-sm);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:var(--fs-micro);color:var(--ink3)} details.metodo[open]>summary::before{content:'▾'} details.metodo>summary:hover{color:var(--ink)} /* Cada regra tem um sujeito (o que soma, de onde vem o cargo, o que fica de fora): virou glossário rotulado, não texto corrido. O rótulo é o que se escaneia; a explicação só se lê quando o rótulo interessa. `--soft` é a superfície de realce já usada em chip/linha-de-área — reaproveitada aqui para conter o painel em vez de deixar o texto solto na página. */ details.metodo>.corpo{margin:10px 0 0;background:var(--soft); border-radius:8px;padding:14px 16px;display:grid;gap:12px} details.metodo .regra{display:grid;grid-template-columns:150px 1fr; gap:6px 16px;align-items:baseline} details.metodo .regra dt{font-weight:600;color:var(--ink2);font-size:var(--fs-sm)} details.metodo .regra dd{margin:0;line-height:1.55} @media(max-width:700px){ details.metodo .regra{grid-template-columns:1fr} } /* 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} /* Borda de alarme, não neutra: achado aqui é sempre qualidade de dado (squad zerada, cargo fora do catálogo), nunca informação de passagem. Ficava com a mesma borda cinza de qualquer outro texto e passava batido no rodapé da aba. */ ul.achados li{font-size:var(--fs-sm);line-height:1.55;color:var(--ink2); border-left:2px solid var(--mk-alarme);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:var(--fs-sm);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:var(--fs-sm);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;background:var(--sunk);} .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:var(--fs-sm);cursor:pointer} /* "ver Features" mora dentro da linha da área da Taxa de Defeito: discreto, e com o próprio foco visível porque o clique da linha é outro. */ .def-ver-features{margin-left:8px;border:1px solid var(--bd2);background:var(--soft);color:var(--ink2);border-radius:6px;padding:1px 7px;font:inherit;font-size:var(--fs-micro);font-weight:500;cursor:pointer;vertical-align:1px} .def-ver-features:hover{color:var(--link)} #rankAreasDef [data-def-squad]:hover .nome{color:var(--link)} #defeitoDrilldown .def-drill-divergente{margin-bottom:12px} .ct-drill-close:hover{background:var(--sel);color:var(--ink)} .ct-drill-titulo{font-size:var(--fs-md);font-weight:750;color:var(--ink);} .ct-drill-sub{font-size:var(--fs-sm);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(--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:var(--fs-md);} .ct-drill-area-head span{font-weight:750;font-variant-numeric:tabular-nums;} .ct-drill-area-meta{margin:4px 0 10px;font-size:var(--fs-micro);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:var(--fs-sm);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:var(--fs-micro);} @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:16px 0 8px; gap:16px; } .ct-ref[data-design="standalone"] .card{ background:var(--bg); } .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-dado); } .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:4px} .ct-ref>.pergunta{margin:0;font-size:var(--fs-xl);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:var(--fs-base);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:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)} .ct-ref #ctHero .ct-hero-vl{font-size:var(--fs-hero);line-height:1;margin-top:8px} .ct-ref #ctHero .ct-hero-sub{font-size:var(--fs-sm);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:var(--fs-lg);font-weight:800;line-height:1.1;color:var(--ink)} .ct-ref .ct-ref-kpis .l{margin-top:4px;font-size:var(--fs-micro);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:var(--fs-micro);color:var(--ink3)} .ct-ref .card{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:var(--fs-micro);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-share-hint{font-family:var(--mono);font-size:var(--fs-micro);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:var(--fs-sm)} @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 0 42px; } .ct-ref{padding-top:16px} .ct-ref,.ct-ref .card{max-width:100%;overflow-x:hidden} .ct-ref>.pergunta{font-size:var(--fs-lg)} .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 .ct-ref-bins{float:none;display:block;margin:6px 0 0} } /* Botão que abre a cauda do ranking por cargo. Ver `CAP_CAUDA` em painel.js: as 39 linhas abaixo de 0,5% somam 4% do total e empurravam para fora da tela o que decide a leitura. Nada é removido do total; só fica recolhido. */ .cap-cauda{margin-top:10px;font:inherit;font-size:var(--fs-sm);cursor:pointer; border:1px solid var(--bd2);background:var(--bg);color:var(--ink2); border-radius:7px;padding:7px 12px} .cap-cauda:hover{border-color:var(--ink4);color:var(--ink)} /* A faixa da Taxa de Defeito tem dois números antes da base, e não quatro como a do Cycle Time: a grade acompanha, senão sobram duas colunas vazias. */ /* Mês a mês do Capacity (23/09/2026): título é o achado, calculado do dado. */ .cap-mes-eyebrow{display:block;margin-bottom:6px} .cap-mes-titulo{margin:0;font-size:var(--fs-xl);line-height:1.2;font-weight:600;letter-spacing:-.015em;color:var(--ink)} .cap-mes-sub{margin:6px 0 14px;font-size:var(--fs-md);color:var(--ink2)} @media (max-width:700px){.cap-mes-titulo{font-size:var(--fs-lg)}} /* Card agrupado de Incident no Capacity e o detalhe dele (23/09/2026). */ .cap-card-grupo{cursor:pointer} .cap-card-grupo:hover,.cap-card-grupo[aria-expanded="true"]{border-color:var(--accent-bd)} .cap-card-grupo:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px} .cap-card-seta{color:var(--ink4);font-size:var(--fs-micro);margin-left:2px} .cap-card-grupo[aria-expanded="true"] .cap-card-seta{display:inline-block;transform:rotate(180deg)} #capGrupoDrill{margin:12px 0 18px} .cap-grupo-lista{display:grid;gap:10px;max-width:560px} .cap-grupo-linha{display:grid;grid-template-columns:10px minmax(0,1fr) auto 56px;gap:10px;align-items:center;font-size:var(--fs-base);color:var(--ink2)} .cap-grupo-h,.cap-grupo-pct{font-family:var(--mono);font-size:var(--fs-sm);text-align:right;color:var(--ink2)} .cap-grupo-pct{color:var(--ink3)} .cap-pct{display:block} .cap-pct b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink2)} .cap-pct-regua{display:block;height:6px;margin-top:10px;border-radius:2px;background:var(--bd);overflow:hidden} .cap-pct-regua i{display:block;height:100%;border-radius:2px;background:var(--mk-alt)} .cap-pct-vl{display:inline-flex;align-items:baseline;gap:1px} .cap-pct-u{font-size:var(--fs-lg);font-weight:700;color:var(--ink2);letter-spacing:0} .cap-dist{grid-column:1/-1;background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:18px 20px 16px} .cap-dist-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px} .cap-dist-titulo{font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)} .cap-dist-total{font-size:var(--fs-sm);color:var(--ink3);font-variant-numeric:tabular-nums} .cap-dist-total b{font-weight:600;color:var(--ink)} .cap-dist-regua{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;margin-bottom:16px} .cap-dist-regua i{display:block;min-width:3px} .cap-dist-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .cap-dist .kpi.cap-col{background:none;border:0;border-radius:0;padding:2px 16px;border-left:1px solid var(--bd)} .cap-dist .kpi.cap-col:first-child{padding-left:0;border-left:0} .cap-col .vl{margin-top:8px} .cap-col-h{margin-top:6px;font-size:var(--fs-sm);color:var(--ink3);font-variant-numeric:tabular-nums} .cap-dist .cap-card-grupo{border-radius:6px} .cap-dist .cap-card-grupo:hover,.cap-dist .cap-card-grupo[aria-expanded="true"]{background:var(--bg2,rgba(0,0,0,.03))} @media (max-width:700px){.cap-dist-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}.cap-dist .kpi.cap-col:nth-child(3){padding-left:0;border-left:0}} /* "Onde a hora foi apontada", refinado (23/09/2026): linhas em fio, sem pílula cinza; barra fina com fio da cor do cartão entre as fatias; horas e % com o rótulo uma vez só, no cabeçalho, e a legenda de cor em cima. */ .cap-rank .ct-row.com-volume{grid-template-columns:232px minmax(0,1fr) 96px 72px;gap:16px} .cap-rank .ct-row.ct-sub{grid-template-columns:232px minmax(0,1fr) 96px 72px} .cap-rank .ct-area-grupo{border-bottom:1px solid var(--bd);padding:0;margin:0} .cap-rank .ct-row.ct-area{background:none;border-radius:6px;padding:12px 8px;margin:0} .cap-rank .ct-row .track{background:none;height:12px;border-radius:0} .cap-rank .ct-row.ct-sub .track,.cap-rank .ct-row.ct-sub2 .track,.cap-rank .ct-row.ct-sub3 .track{height:8px} .cap-rank .ct-row .fill{border-radius:3px;box-shadow:inset -2px 0 0 var(--bg)} .cap-rank .ct-row .val .v{font-size:var(--fs-md);font-weight:700;font-variant-numeric:tabular-nums} .cap-rank .ct-row.ct-sub .val .v,.cap-rank .ct-row.ct-sub2 .val .v,.cap-rank .ct-row.ct-sub3 .val .v{font-size:var(--fs-base);font-weight:600} .cap-rank .ct-row .val .l,.cap-rank .ct-row .vol .l{display:none} .cap-rank .ct-row .vol{border-left:0;padding-left:0} .cap-rank .ct-row .vol .v{font-size:var(--fs-base);font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums} .cap-rank .ct-row .n b{font-weight:600;white-space:nowrap} .cap-rank .cap-rank-cab{padding:4px 8px 8px;border-bottom:1px solid var(--bd2);align-items:end} .cap-rank .cap-rank-cab .val,.cap-rank .cap-rank-cab .vol{font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)} .cap-rank .cap-rank-cab .lg.chave{margin:0} @media (max-width:700px){.cap-rank .ct-row.com-volume,.cap-rank .ct-row.ct-sub{grid-template-columns:minmax(0,1fr) 80px 56px}.cap-rank .ct-row .track{grid-column:1/-1;order:9}.cap-rank .cap-rank-cab>div:nth-child(2){grid-column:1/-1}} .cap-rank .ct-row.ct-sub,.cap-rank .ct-row.ct-sub2,.cap-rank .ct-row.ct-sub3{padding-right:8px} .cap-rank .ct-row.ct-sub{grid-template-columns:214px minmax(0,1fr) 96px 72px} .cap-rank .ct-row .track{height:10px} .cap-rank .ct-row.ct-sub .track,.cap-rank .ct-row.ct-sub2 .track,.cap-rank .ct-row.ct-sub3 .track{height:6px} .cap-rank-regua{display:flex;gap:2px;height:100%;border-radius:5px;overflow:hidden} .cap-rank-regua i{display:block;min-width:2px} .cap-rank-chave .mk-dot{margin-right:6px} #capFiltroTipo.chips:not([hidden]){display:block} .cap-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .cap-chips-sub{margin-top:8px;padding-left:4px} .cap-chips-sub-lb{font-size:var(--fs-sm);color:var(--ink3);margin-right:2px} .cap-chip{display:inline-flex;align-items:center;gap:6px} .cap-chip .mk-dot{margin:0} .cap-chip-n{font-size:var(--fs-micro);color:var(--ink3);font-variant-numeric:tabular-nums} .chips .cap-chip[aria-pressed="mixed"]{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--link)} .chips .cap-chip[aria-pressed="true"] .mk-dot{box-shadow:0 0 0 1.5px #fff} .chips .cap-chip[aria-pressed="true"] .cap-chip-n{color:inherit;opacity:.8} .cap-rank-chave-nota{color:var(--ink3)} /* Tela do Capacity em blocos (23/09/2026, imagem dela). */ #capPainel{margin-bottom:20px} .cap-base{background:var(--bg);margin:0 0 16px;font-size:var(--fs-md);line-height:1.55;color:var(--ink2)} .cap-base b{color:var(--ink);font-weight:700} /* CAP-01 (25/09/2026): a aba abre com o total de horas, e a frase de escopo fica ao lado dele, pequena, no lugar do quadro de texto. */ .cap-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .cap-bloco{background:var(--bg);display:flex;flex-direction:column;min-width:0} .cap-bloco-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap} .cap-bloco-sub{margin:4px 0 18px} .cap-bloco-cab h3{margin:0} .cap-bloco-cab p{margin:4px 0 0} .cap-bloco-aux{white-space:nowrap;text-align:right} .cap-bloco-rodape{margin:auto 0 0;padding-top:16px;font-size:var(--fs-base);color:var(--ink3)} .cap-tipos{display:grid;gap:16px} .cap-tipo-total{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:10px;border-top:1px solid var(--bd);font-size:var(--fs-md);font-weight:600;color:var(--ink)} .cap-tipo-total-h{font-variant-numeric:tabular-nums;white-space:nowrap} .cap-tipo-lin{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-md);color:var(--ink);margin-bottom:6px} .cap-tipo-v{color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap} .cap-tipo-v b{color:var(--ink);font-weight:700} .cap-tipo-trilho{height:12px;border-radius:3px;background:var(--soft);overflow:hidden} .cap-tipo-trilho i{display:block;height:100%;border-radius:3px} .cap-areas{display:grid;gap:4px} .cap-area{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) 72px;align-items:center;gap:14px;background:none;border:0;border-radius:8px;padding:8px 8px;cursor:pointer;font:inherit;text-align:left;color:var(--ink)} .cap-area:hover{background:var(--soft)} .cap-area.on{background:var(--sel)} .cap-area:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px} .cap-area-nome{display:flex;align-items:center;gap:10px;font-size:var(--fs-md);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cap-area-nome .dot{width:8px;height:8px;border-radius:50%;flex:none} .cap-area-trilho{height:12px} .cap-area-trilho i{display:block;height:100%;border-radius:2px;background:var(--mk-acc)} .cap-area-v{text-align:right;font-size:var(--fs-md);font-weight:500;font-variant-numeric:tabular-nums} @media (max-width:1100px){.cap-grade{grid-template-columns:1fr}} .cap-area.fora{opacity:.45} .cap-area.fora .cap-area-trilho i{background:var(--mk-base)} .cap-tipo{display:block;width:100%;background:none;border:0;border-radius:8px;padding:6px 8px;margin:-6px -8px;box-sizing:content-box;font:inherit;text-align:left;cursor:pointer;color:inherit} .cap-tipo:hover{background:var(--soft)} .cap-tipo.on{background:var(--sel)} .cap-tipo.fora{opacity:.45} .cap-tipo:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px} .cap-matriz{margin-top:20px} .cap-mz-rolo{overflow-x:auto} .cap-mz{width:100%;border-collapse:separate;border-spacing:6px 0;font-variant-numeric:tabular-nums;min-width:720px} .cap-mz th,.cap-mz td{padding:0} .cap-mz thead th{font-size:var(--fs-base);font-weight:500;color:var(--ink3);text-align:center;padding:0 0 12px;border-bottom:1px solid var(--bd)} .cap-mz thead th:first-child{text-align:left;padding-left:12px} .cap-mz tbody tr>*{border-bottom:1px solid var(--bd)} .cap-mz tbody th{font-size:var(--fs-md);font-weight:400;text-align:left;padding:14px 12px;white-space:nowrap;width:22%} .cap-mz tbody th .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:10px;vertical-align:1px} .cap-mz-seta{display:inline-block;width:14px;color:var(--ink3);font-size:var(--fs-sm)} .cap-mz-c{text-align:center;font-size:var(--fs-md);padding:3px 0!important} .cap-mz-c span{display:block;border-radius:6px;padding:12px 8px} .cap-mz-c.forte{font-weight:700} .cap-mz-t{text-align:right!important;font-weight:700;font-size:var(--fs-md);padding-right:12px!important;white-space:nowrap} .cap-mz-area{cursor:pointer} .cap-mz-area:hover th{background:var(--soft)} .cap-mz-area:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px} .cap-mz-squad th{font-size:var(--fs-base);color:var(--ink2);padding:8px 12px 8px 38px} .cap-mz-c.sub span{padding:7px 8px;font-size:var(--fs-base)} .cap-mz-squad .cap-mz-t{font-weight:600;font-size:var(--fs-base)} .cap-mz{table-layout:fixed} .cap-mz col.c-area{width:22%}.cap-mz col.c-t{width:10%} .cap-mz th,.cap-mz td{text-transform:none;letter-spacing:normal;background:none} .cap-mz tbody th{color:var(--ink);overflow:hidden;text-overflow:ellipsis} .cap-mz thead th{text-transform:none;letter-spacing:normal} /* cabeçalho quebra linha em vez de invadir a coluna vizinha (medido a 900 px em 24/09/2026: "Incidente (Removed)" encostava em "Total h") */ .cap-mz thead th{white-space:normal;line-height:1.3;vertical-align:bottom;overflow-wrap:break-word} .cap-mz tbody tr.cap-mz-squad th{padding:8px 12px 8px 46px;font-size:var(--fs-base);color:var(--ink2)} .cap-grade-2{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:900px){.cap-grade-2{grid-template-columns:1fr}} /* CAP-04/05: "34,4% · 156.595 h", na ordem e no peso de "Horas por tipo de trabalho": percentual em 700, horas com a unidade. */ .cap-area{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto} .cap-area-v{color:var(--ink3);font-weight:400} .cap-area-p{color:var(--ink);font-weight:700} .cap-area-h{min-width:6.5em;display:inline-block;text-align:right} /* O "·" entre % e horas saiu da linha acima (29/09/2026): com as horas numa coluna de largura fixa, ele ficava solto no meio do vão; o vão é que separa. Abaixo, o detalhe do tipo: a coluna de horas cresce com o número em vez de quebrar o "h" para a linha de baixo (234.816 h não cabia em 78px). */ .cap-detalhe-painel .ct-row.com-volume{grid-template-columns:168px 1fr minmax(78px,max-content) 92px} .cap-detalhe-painel .ct-row .val .v{white-space:nowrap} /* CAP-08: linha Total no topo da matriz, referência do negrito. */ .cap-mz tbody tr.cap-mz-total>*{font-weight:600;border-bottom:1px solid var(--bd2)} .cap-mz tbody tr.cap-mz-total th{color:var(--ink)} /* CAP-09: squads sem hora, logo abaixo de "Horas por área". Barra neutra: zero hora é achado, não limite acordado. */ .cap-zeradas{margin-top:16px;padding:8px 0 8px 12px;border-left:3px solid var(--ink4);font-size:var(--fs-base);color:var(--ink2)} .cap-zeradas p{margin:0} .cap-zeradas b{color:var(--ink);font-weight:600} .cap-zeradas-ver{background:none;border:0;padding:0;font:inherit;color:var(--link);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .cap-zeradas-ver:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px} .cap-zeradas-lista{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px} .cap-zeradas-lista li{display:flex;justify-content:space-between;gap:12px} .cap-zeradas-meta{color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums} .cap-mz tbody tr.cap-mz-squad[data-cap-mz-k]{cursor:pointer} .cap-mz tbody tr.cap-mz-squad[data-cap-mz-k]:hover th{background:var(--soft)} .cap-mz tbody tr.cap-mz-n2 th{padding-left:30px} .cap-mz tbody tr.cap-mz-n3 th{padding-left:48px;color:var(--ink2)} .cap-mz tbody tr.cap-mz-n4 th{padding-left:66px;color:var(--ink2)} .cap-mz tbody tr.cap-mz-n5 th{padding-left:84px;color:var(--ink3);font-size:var(--fs-sm)} .cap-mz-task .cap-mz-c span,.cap-mz-task .cap-mz-t{font-size:var(--fs-sm);font-weight:400} .cap-mz-task a{color:var(--link);text-decoration:none;font-family:var(--mono)} .cap-mz-task a:hover{text-decoration:underline} .cap-mz-meta{color:var(--ink3)} .cap-mz-corte th{font-style:italic} .cap-detalhe-painel{margin-top:20px} .cap-detalhe-parte+.cap-detalhe-parte{margin-top:18px;padding-top:14px;border-top:1px solid var(--bd)} /* Aba Incidentes (23/09/2026). Local até o contrato ganhar fila e idade. Padronização de 24/09/2026: bloco, cabeçalho, matriz, chips, tabela de lista e bolinha de legenda são os do painel (`cap-bloco`, `cap-mz`, `.chips`, `table.fixa`, `.dot`). Aqui fica só o que não tem equivalente: a faixa de cartões do topo, os cartões de faixa, a barra e o gráfico. */ .inc-topo{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 20px} .inc-vistas{display:inline-flex;background:var(--soft);border-radius:10px;padding:4px;gap:2px} .inc-vistas button{border:0;background:transparent;border-radius:7px;padding:8px 16px;font:inherit;font-size:var(--fs-md);color:var(--ink2);cursor:pointer} .inc-vistas button.on{background:var(--accent);color:#fff} .inc-selo{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)} .inc-bloco{margin:0 0 20px} /* variação logo abaixo do número (desenho V5): mono, na tinta do texto */ .inc-aviso{color:var(--mk-amber)!important} .inc-alarme{color:var(--mk-alarme)!important} .inc-kpi-rot,.inc-eyebrow{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)} /* squad que mudou de área no recorte: o período dela na área da linha */ .inc-vig{display:block;font-size:var(--fs-micro);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inc-vazio{font-size:var(--fs-sm);font-weight:500;font-style:normal;color:var(--ink4)} /* a barra é o trilho da Capacity (`cap-tipo-trilho`): 12px, raio 3, fundo --soft */ .inc-faixas{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .inc-faixa{all:unset;box-sizing:border-box;border:1px solid var(--bd);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;cursor:pointer;min-width:0} .inc-faixa:hover{background:var(--soft)} .inc-faixa:focus-visible{outline:2px solid var(--accent-2)} .inc-faixa-rot{font-size:var(--fs-base);color:var(--ink3);display:flex;align-items:center;gap:8px} .inc-faixa-pct{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums} .inc-faixa-n{font-size:var(--fs-base);color:var(--ink2)} /* bolinha de legenda: a mesma `.dot` da Capacity, 8px e redonda */ .inc-faixa-rot i{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none} .inc-faixa-rot i{border-radius:2px} /* registrados e fechados por mês: duas colunas por mês, número em cima */ .inc-mes-nota{margin:12px 0 0;font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink3)} .inc-cab{justify-content:flex-start;align-items:baseline;gap:14px;flex-wrap:wrap} .inc-cab .inc-pergunta{font-size:var(--fs-md);color:var(--ink3)} .inc-rodape{display:flex;justify-content:flex-end} .inc-link{border:0;background:transparent;padding:0;font:inherit;font-size:var(--fs-md);color:var(--link);cursor:pointer} .inc-link:hover{text-decoration:underline} .inc-rk thead th{position:relative} .inc-rk-ab{white-space:nowrap} .inc-mz col.c-ab{width:30%} .inc-rk-ab b{display:inline-block;min-width:3ch;text-align:right;font-size:var(--fs-md);font-variant-numeric:tabular-nums} .inc-rk{margin-top:10px} .inc-rk td,.inc-rk th{border-left:0;border-right:0} .inc-delta{display:inline-block;width:4ch;margin-left:6px;font-size:var(--fs-sm);font-weight:600} .inc-delta-igual{color:var(--ink4);font-weight:400} .inc-rk-barra{display:inline-block;vertical-align:middle;width:84px;height:8px;margin-left:8px;border-radius:4px;background:var(--soft);overflow:hidden} .inc-rk-barra i{display:block;height:100%;border-radius:4px;background:var(--mk-acc)} /* A tabela do Ranking por área usa a largura do bloco e rola internamente quando o viewport não comporta as colunas. */ .inc-bloco .cap-mz{min-width:0} /* O nome da squad usa espaço maior que os 22% da Capacity. */ .inc-mz col.c-area{width:34%} .inc-mz .cap-mz-c>span{display:block;border-radius:6px;padding:12px 8px} .inc-mz .cap-mz-c.sub>span{padding:7px 8px} .inc-mz tr.inc-sq[data-inc-lista]{cursor:pointer} .inc-mz tr.inc-sq[data-inc-lista]:hover th{background:var(--soft)} .inc-mz tfoot th,.inc-mz tfoot td{border-top:1px solid var(--bd3);padding-top:10px;color:var(--ink3);font-weight:600} .inc-mz tfoot th{text-align:left;padding-left:12px;font-size:var(--fs-base)} .inc-det-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;border-bottom:1px solid var(--bd2);padding-bottom:16px;margin:0 0 20px} .inc-det-cab h2{margin:6px 0 4px;font-size:var(--fs-xl);font-weight:700;color:var(--ink)} .inc-q{font-size:var(--fs-md);font-weight:400;color:var(--ink3)} .inc-det-cab .inc-q{margin:0} .inc-texto{margin:12px 0 0;font-size:var(--fs-base);color:var(--ink3);line-height:1.5} .inc-filtros{display:flex;flex-direction:column;gap:4px;margin:0 0 14px} .inc-filtro{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;gap:12px} .inc-filtro>span{font-size:var(--fs-base);color:var(--ink3)} .inc-filtro .chips{margin:4px 0} .inc-mono{font-size:var(--fs-base);color:var(--ink3);margin:4px 0 0} .inc-lista-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap} .inc-itens{margin-top:12px} .inc-itens .mono{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink2)} .inc-itens .mudo{color:var(--ink5)} .inc-itens td.n,.inc-itens th.n{white-space:nowrap} .inc-itens a{color:var(--link);font-family:var(--mono);font-size:var(--fs-sm);text-decoration:none} .inc-itens a:hover{text-decoration:underline} .inc-atencao{font-size:var(--fs-micro);color:var(--ink3);border:1px solid var(--bd3);border-radius:4px;padding:1px 5px;cursor:help} .inc-mais{margin-top:12px} .inc-regra-abre{font-size:var(--fs-md);color:var(--ink2);margin:0 0 20px} .inc-regra-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin:0 0 24px} .inc-regra-caixa{background:var(--bg);border:1px solid var(--bd);border-radius:14px;padding:22px 24px} .inc-regra-caixa p{margin:8px 0 0;font-size:var(--fs-md);line-height:1.55;color:var(--ink)} .inc-regra-4{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px} .inc-regra-4 p{font-size:var(--fs-base);color:var(--ink2)} .inc-regra-lista{list-style:none;margin:10px 0 0;padding:16px 20px;background:var(--bg);border:1px solid var(--bd);border-radius:14px;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-md);color:var(--ink2)} .inc-regra-lista li::before{display:inline-block;width:22px;color:var(--ink4)} .inc-regra-lista.sim li::before{content:"✓";color:var(--ink3)} .inc-regra-lista.nao li::before{content:"×"} .inc-regra-estados{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:16px;background:var(--bg);border:1px solid var(--bd);border-radius:14px} .inc-regra-estados span{font-family:var(--mono);font-size:var(--fs-base);background:var(--soft);border-radius:6px;padding:6px 12px;color:var(--ink)} .inc-regra-estados span.saida{color:var(--ink3);background:transparent;box-shadow:inset 0 0 0 1px var(--bd2)} /* Regra do processo de Incidentes (desenho dela, 23/10/2026): definição, regra resumida e a jornada no Workflow Tático */ .inc-regra-caixa.def{background:var(--soft)} .inc-regra-caixa .inc-regra-obj{margin-top:14px;padding-top:14px;border-top:1px solid var(--bd2);font-size:var(--fs-base);color:var(--ink2)} .inc-jor .cap-bloco-cab{align-items:baseline} .inc-jor-rolo{overflow-x:auto;margin-top:8px} .inc-jor-fases,.inc-jor-etapas,.inc-jor-chave{display:grid;grid-template-columns:repeat(9,minmax(104px,1fr));min-width:936px} .inc-jor-fases span{display:flex;align-items:center;gap:10px;margin:0 8px 14px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)} .inc-jor-fases span::after{content:"";flex:1;border-top:1px solid var(--bd2)} .inc-jor-etapas{list-style:none;margin:0;padding:0;position:relative} .inc-jor-etapas::before{content:"";position:absolute;top:17px;left:5.5%;right:5.5%;border-top:2px dashed var(--bd2)} .inc-jor-etapa{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 6px;text-align:center} .inc-jor-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--ink);font-weight:700;font-size:var(--fs-base);color:var(--ink);margin-bottom:8px} .inc-jor-etapa.marca .inc-jor-n{box-shadow:inset 0 0 0 2px var(--mk-foco)} .inc-jor-etapa.fim .inc-jor-n{background:var(--mk-verde);box-shadow:none;color:var(--bg)} .inc-jor-etapa b{font-size:var(--fs-base);color:var(--ink)} .inc-jor-etapa code{font-family:var(--mono);font-size:var(--fs-micro);background:var(--soft);border:1px solid var(--bd2);border-radius:4px;padding:2px 6px;color:var(--ink2)} .inc-jor-faz{font-size:var(--fs-sm);line-height:1.4;color:var(--ink2)} .inc-jor-chip{margin-top:2px;padding:3px 9px;border-radius:9px;font-size:var(--fs-micro);font-weight:600;color:var(--mk-foco);background:color-mix(in srgb,var(--mk-foco) 14%,var(--bg))} .inc-jor-chave{margin-top:18px} .inc-jor-chave>div{margin:0 8px;text-align:center;font-size:var(--fs-sm);color:var(--ink2)} .inc-jor-chave .fila{grid-column:1 / span 8} .inc-jor-chave .resolvido{grid-column:9;color:var(--mk-verde);font-weight:700} .inc-jor-chave i{display:block;height:8px;margin-bottom:8px;border:1px solid var(--ink3);border-top:0;border-radius:0 0 6px 6px} .inc-jor-chave .resolvido i{border-color:var(--mk-verde)} .inc-jor-saidas{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch;margin-top:44px;padding-top:18px;border-top:1px solid var(--bd)} .inc-jor-saidas .inc-eyebrow small{display:block;margin-top:4px;font-family:inherit;font-size:var(--fs-sm);letter-spacing:0;text-transform:none;color:var(--ink3)} .inc-jor-saidas>div{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;font-size:var(--fs-base);color:var(--ink2);background:color-mix(in srgb,var(--mk-amber) 9%,var(--bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mk-amber) 30%,var(--bg))} .inc-jor-saidas code{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--ink);background:var(--bg);border:1px solid var(--bd2);border-radius:5px;padding:3px 8px} @media (max-width:900px){.inc-jor-saidas{grid-template-columns:1fr}} /* Fila de incidentes no ano (desenho de 23/10/2026): barra = fila no fim do mês, linha = a mesma fila como tendência, tabela alinhada às colunas. */ .inc-ano-cab{align-items:center} .inc-ano-leg{display:flex;gap:8px} .inc-ano-leg button{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--bd2);border-radius:7px;background:var(--bg);font:inherit;font-size:var(--fs-sm);color:var(--ink);cursor:pointer} .inc-ano-leg button[aria-pressed="false"]{opacity:.45} .inc-ano-leg i.q{width:10px;height:10px;border-radius:2px;background:var(--mk-acc)} .inc-ano-leg i.t{width:14px;height:2px;background:var(--ink)} .inc-ano.sem-fila .inc-ano-col i{visibility:hidden} .inc-ano.sem-variacao .inc-ano-var path.mes,.inc-ano.sem-variacao .inc-ano-var-col{visibility:hidden} .inc-ano.sem-tendencia .inc-ano-graf path.tend{visibility:hidden} .inc-ano-leg i.tf{width:14px;height:2px;background:color-mix(in srgb,var(--mk-foco) 55%,var(--bg))} /* tendência das barras: fina e clara, para não competir com o número */ .inc-ano-graf svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} .inc-ano-graf path.tend{fill:none;stroke:color-mix(in srgb,var(--mk-foco) 55%,var(--bg));stroke-width:1.5;vector-effect:non-scaling-stroke} .inc-ano-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:16px 0 8px;background:var(--bg);border:1px solid var(--bd);border-radius:12px} /* sem overflow:hidden, que cortava o balão (i) dos cartões; o canto arredondado fica no primeiro e no último */ .inc-ano-kpi:first-child{border-radius:11px 0 0 11px} .inc-ano-kpi:last-child{border-radius:0 11px 11px 0} .inc-ano-kpi{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-left:1px solid var(--bd);min-width:0} .inc-ano-kpi:first-child{border-left:0} button.inc-ano-kpi{cursor:pointer} button.inc-ano-kpi:hover{background:var(--soft)} button.inc-ano-kpi:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px} .inc-ano-kpi .inc-kpi-rot{overflow-wrap:anywhere} .inc-ano-kpi-topo{display:flex;align-items:center;gap:2px} .inc-ano-kpi-l{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .inc-ano-kpi-l b{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums} .inc-ano-kpi-l>span{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink2)} .inc-ano-kpi-barra{display:block;height:5px;border-radius:3px;background:var(--soft);overflow:hidden} .inc-ano-kpi-barra i{display:block;height:100%;border-radius:3px;background:var(--mk-acc)} .inc-ano-kpi.esc{background:color-mix(in srgb,var(--mk-amber) 9%,var(--bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mk-amber) 35%,var(--bg))} .inc-ano-kpi.esc .inc-kpi-rot,.inc-ano-kpi.esc .inc-ano-kpi-l b{color:var(--mk-amber)} .inc-ano-kpi.esc .inc-ano-kpi-barra i{background:var(--mk-amber)} .inc-sobe{color:var(--mk-amber)!important} .inc-desce{color:var(--mk-verde)!important} .inc-ano-rolo{display:grid;grid-template-columns:minmax(calc(var(--n) * 92px),1fr);margin-top:26px;overflow-x:auto} .inc-ano-graf{position:relative;height:200px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));align-items:end;border-bottom:1px solid var(--bd2)} .inc-ano-col.saldo i{position:absolute;bottom:0;left:25%;transform:translateX(-50%);background:var(--mk-base)} /* faixa da variação da fila: escala e zero próprios */ .inc-ano-var{position:relative;height:104px;margin-top:6px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border-bottom:1px solid var(--bd)} .inc-ano-var svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} .inc-ano-var path{fill:none;vector-effect:non-scaling-stroke} .inc-ano-var path.zero{stroke:var(--bd2);stroke-dasharray:3 4;stroke-width:1} .inc-ano-var path.mes{stroke:var(--ink);stroke-width:2} .inc-ano-var-rot{align-self:center;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);line-height:1.3} .inc-ano-var-col{position:relative} .inc-ano-var-col .ponto-var{position:absolute;left:50%;width:7px;height:7px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--ink);transform:translate(-50%,-50%)} .inc-ano-var-col b{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;white-space:nowrap} .inc-ano-col{position:relative;height:100%;display:flex;justify-content:center;align-items:flex-end} .inc-ano-col i{display:block;width:34%;min-width:14px;max-width:36px;min-height:1px;border-radius:2px 2px 0 0;background:var(--accent)} /* saldo inicial no primeiro quarto da coluna, como o ponto da linha (x=25) */ .inc-ano-col.saldo b{left:25%} .inc-ano-rots span:first-child{justify-self:start;position:relative;left:25%;transform:translateX(-50%)} .inc-ano-col.parcial i{background:repeating-linear-gradient(135deg,var(--accent) 0 3px,color-mix(in srgb,var(--accent) 35%,var(--bg)) 3px 6px)} .inc-ano-col b{position:absolute;left:50%;transform:translate(-50%,50%);z-index:1;padding:1px 6px;border-radius:9px;background:var(--bg);box-shadow:0 0 0 1px var(--bd);font-size:var(--fs-sm);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} /* rótulo dos meses como cabeçalho da tabela de baixo (pedido dela, 23/10/2026) */ .inc-ano-rots{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin-top:6px;padding:8px 0;font-size:var(--fs-base);font-weight:600;color:var(--ink);text-align:center;background:var(--soft);border-radius:6px} .inc-ano-tab{width:100%;table-layout:fixed;border-collapse:collapse;font-variant-numeric:tabular-nums} .inc-ano-tab th,.inc-ano-tab td{padding:9px 4px;border-top:1px solid var(--bd);border-bottom:0;font-size:var(--fs-base);color:var(--ink2);text-align:center;font-weight:400} .inc-ano-tab th{text-align:left;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);white-space:normal;line-height:1.35} .inc-ano-tab td small{display:block;font-size:var(--fs-micro);color:var(--ink3)} .inc-ano-esc th,.inc-ano-esc td{background:color-mix(in srgb,var(--mk-amber) 9%,var(--bg))} .inc-ano-esc th{color:var(--mk-amber)} .inc-ano-esc td b{font-weight:700;color:var(--mk-amber)} .inc-ano-fora td{color:var(--ink3)} .inc-ano-kpi.fora .inc-ano-kpi-l b{color:var(--ink2)} /* fila por idade: faixas com rótulo em caixa alta e os cinco mais antigos */ .inc-faixa-rot{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase} .inc-faixa-l{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px} .inc-antigos-tit{margin:20px 0 6px;font-size:var(--fs-md);font-weight:700;color:var(--ink)} .inc-antigos td{font-size:var(--fs-base)} .inc-antigos td.mudo{color:var(--ink2);max-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inc-antigos td.mono{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink2)} .inc-antigos a{color:var(--ink2);font-family:var(--mono);font-size:var(--fs-sm);text-decoration:none} .inc-antigos a:hover{text-decoration:underline} /* fila por idade e Visão por área lado a lado na tela larga */ .inc-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:0 20px;align-items:start} @media (min-width:1100px){.inc-duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} @media (max-width:900px){ /* coluna estreita: o rótulo do saldo começa na borda em vez de ser cortado */ .inc-ano-rots span:first-child{left:0;transform:none} .inc-ano-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .inc-ano-kpi:nth-child(odd){border-left:0} .inc-ano-kpi:nth-child(n+3){border-top:1px solid var(--bd)} /* na tela estreita a barra dos abertos invadia Fechados (o motivo de 24/09/2026): some, e a coluna volta à largura do número */ .inc-rk-barra{display:none} .inc-mz col.c-ab{width:auto} .inc-regra-grade{grid-template-columns:1fr} .inc-filtro{grid-template-columns:1fr;gap:0} } .inc-mz thead th{white-space:normal;line-height:1.3;vertical-align:bottom} /* Taxa de Defeito (24/09/2026, referência dela): dois cartões lado a lado, taxa e entregas. Escala só com --fs-*; texto em tinta, a cor fica na marca do gráfico. Rodapé em mono, em caixa normal desde 25/09/2026. */ /* Auditoria visual de 25/09/2026 (TD-01, TD-03): o card é o mesmo do resto do painel (fundo --bg, padding 22px, raio 10px, título 600), e as quatro faixas de cada card (topo, linha de base, gráfico, rodapé) dividem as linhas da grade com o card vizinho por subgrid: o eixo X e o rodapé dos dois gráficos ficam na mesma altura mesmo quando um texto quebra. */ .def-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);gap:0 16px;margin:0 0 16px} .ct-ref .def-duo .card.def-card:not([hidden]){background:var(--bg);border-radius:10px;padding:22px;margin:0;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;min-width:0} .def-card-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:18px} .def-card-txt{min-width:0} .def-card h2{margin:0} .def-card-sub{margin:8px 0 0;line-height:1.45;max-width:40ch} .def-card-num{text-align:right;flex:none} .def-card-vl{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink);white-space:nowrap} .def-card-vl .u{font-size:var(--fs-md);font-weight:500;letter-spacing:0;color:var(--ink3);margin-left:6px} .def-card-cmp{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:12px;white-space:nowrap} .def-delta{padding:4px 10px;border-radius:8px;background:var(--bg);font-size:var(--fs-base);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .def-delta-igual{color:var(--ink3);font-weight:500} .def-cmp-rot{font-size:var(--fs-base);color:var(--ink3)} .def-card-meta{margin:14px 0 6px;font-size:var(--fs-base);line-height:1.5;color:var(--ink3);font-variant-numeric:tabular-nums} /* TD-05: o termo e o "i" dele quebram juntos, nunca o ícone sozinho na linha */ .def-par{white-space:nowrap} .def-card #defeitoMensal,.def-card #defEntregasMensal{align-self:end} /* TD-03: frase em caixa normal; caixa alta com espaçamento largo em frase longa quebrava em duas linhas e desnivelava os dois cards */ .def-card-pe{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--bd2);font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink3)} /* Aba Throughput no desenho do Portal V5 (18/10/2026): painéis de borda fina sem sombra, um azul só para dado, âmbar só para atenção (o selo de prévia e a maior mediana). Tokens do painel, para o tema escuro seguir. */ .tp-selo{display:inline-block;margin:0 0 14px;font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);background:var(--soft);border:1px solid var(--bd2);border-radius:6px;padding:6px 9px} .tp-selo.aviso{color:var(--mk-amber);background:color-mix(in srgb,var(--mk-amber) 8%,var(--bg));border-color:color-mix(in srgb,var(--mk-amber) 22%,var(--bg))} .tp-painel{background:var(--bg);border:1px solid var(--bd);border-radius:14px;padding:22px 24px;margin:0 0 20px;min-width:0} .tp-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:20px;border-bottom:1px solid var(--bd)} .tp-kpi{display:flex;flex-direction:column;gap:6px;min-width:0} .tp-kpi-num{display:flex;align-items:baseline;gap:8px} .tp-kpi-vl{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--ink)} .tp-kpi-u,.tp-kpi-sub{font-size:var(--fs-sm);color:var(--ink3)} #tpMensal{margin-top:18px} .tp-legenda{display:flex;align-items:center;gap:8px;margin:6px 0 0;font-size:var(--fs-sm);color:var(--ink3)} .tp-legenda i{width:9px;height:9px;border-radius:2px;background:var(--accent)} .tp-secao{margin:0 0 8px} .tp-secao-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:6px 0 12px} .tp-secao-cab h2,.tp-calor-cab h3{margin:0;font-size:var(--fs-md);font-weight:600;letter-spacing:-.005em;color:var(--ink)} .tp-sub{margin:4px 0 0;font-size:var(--fs-base);color:var(--ink3);max-width:72ch} .tp-seg button{font-size:var(--fs-sm)} .tp-nota{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--bd);font-size:var(--fs-sm);line-height:1.5;color:var(--ink3)} .tp-trilho{display:block;height:9px;border-radius:3px;background:var(--soft);overflow:hidden;min-width:60px} .tp-trilho i{display:block;height:9px;border-radius:3px;background:var(--accent)} .tp-mz .tp-c-barra>span{padding:12px 8px} .tp-mz-calor .cap-mz-c>span{display:block;border-radius:6px;padding:9px 4px;text-align:center;font-family:var(--mono);font-size:var(--fs-sm)} .tp-percursos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px} .tp-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--bd2);border-radius:999px;background:var(--bg);padding:7px 12px;font:inherit;font-size:var(--fs-sm);color:var(--ink2);cursor:pointer} .tp-chip:hover{background:var(--soft)} .tp-chip:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px} .tp-chip b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} .tp-chip i{width:8px;height:8px;border-radius:50%;background:var(--ink4)} .tp-chip i.tp-p-completo{background:var(--accent)} .tp-chip i.tp-p-saltos{background:var(--accent-3)} .tp-chip i.tp-p-retorno{background:var(--mk-amber)} .tp-cob{margin:0 0 14px;font-size:var(--fs-sm);color:var(--ink3)} .tp-cob .ctl-link{padding:0;font:inherit} .tp-tab-estados{width:100%;border-collapse:collapse} .tp-tab-estados th,.tp-tab-estados td{padding:11px 10px;border-bottom:1px solid var(--bd);text-align:left;font-variant-numeric:tabular-nums} .tp-tab-estados thead th{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)} .tp-tab-estados .num{text-align:right;white-space:nowrap} .tp-rola{overflow-x:auto} .tp-rola .tp-tab-estados{min-width:520px} .tp-tab-estados td:nth-child(2){width:32%} .tp-tab-estados tbody th.tp-estado{font-family:var(--mono);font-size:var(--fs-base);font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)} .tp-tab-estados .mono{font-family:var(--mono);color:var(--ink2)} .tp-med{font-weight:600;color:var(--ink)} .tp-med.tp-maior{color:var(--mk-amber)} .tp-calor-cab{display:flex;align-items:baseline;gap:12px;margin:0 0 6px} .tp-ver{margin-top:12px;font-size:var(--fs-base)} .tp-trilha{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:var(--fs-sm);color:var(--ink3)} .tp-trilha .inc-link{margin-left:auto;font-size:var(--fs-sm)} .tp-faixa-erro{display:flex;flex-direction:column;gap:4px;margin:0 0 14px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--mk-amber) 22%,var(--bg));border-radius:10px;background:color-mix(in srgb,var(--mk-amber) 6%,var(--bg));font-size:var(--fs-base);color:var(--ink2)} .tp-faixa-erro b{color:var(--mk-amber)} .tp-seg-sit{margin:0 0 10px} .tp-lista .tp-trajeto{min-width:260px} .tp-lista a{color:var(--link);font-size:var(--fs-sm);text-decoration:none;white-space:nowrap} .tp-lista a:hover{text-decoration:underline} .tp-formula{font-family:var(--mono);font-size:var(--fs-lg)!important;font-weight:700;line-height:1.35!important;padding-bottom:14px;border-bottom:1px solid var(--bd)} .tp-ciclo summary{cursor:pointer;font-size:var(--fs-sm);line-height:1.5} .tp-ciclo-lista{list-style:none;margin:6px 0 0;padding:0;font-size:var(--fs-micro);max-width:18em} .tp-ciclo-lista li{display:flex;justify-content:space-between;gap:12px;padding:1px 0} .tp-ciclo-lista .num{font-variant-numeric:tabular-nums} @media (max-width:760px){.tp-kpis{grid-template-columns:1fr}.tp-tab-estados td:nth-child(2){display:none}.tp-tab-estados th:nth-child(2){display:none}.tp-painel{padding:16px}} .def-ponto:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* TR-05: a direção da métrica numa linha própria, fora do subtítulo */ #tab-defeito .def-direcao{margin:-12px 0 16px;font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink3)} /* TD-10: negrito só na Taxa; Entregas é a base, não o indicador */ #rankAreasDef .cap-mz .cap-mz-t{font-weight:400} @media (max-width:900px){.def-duo{grid-template-columns:1fr;grid-template-rows:none;gap:22px} .ct-ref .def-duo .card.def-card:not([hidden]){display:flex;flex-direction:column;grid-row:auto} .def-card #defeitoMensal,.def-card #defEntregasMensal{margin-top:auto}} /* 390 px, medido em produção em 01/10/2026: a comparação "3º tri vs. 2º tri, os dois últimos trimestres fechados" ficava numa linha só e o cartão a cortava. No celular ela quebra. */ @media (max-width:520px){.def-card-topo{flex-direction:column}.def-card-num{text-align:left;max-width:100%}.def-card-cmp{justify-content:flex-start;flex-wrap:wrap;white-space:normal}} /* Ranking por área → squad (24/09/2026): o mesmo `cap-mz` da Capacity em todas as abas (mzRanking no painel.js; Incidentes monta igual). */ .mz-rk{margin-top:10px;min-width:460px} .mz-rk thead th{position:relative;white-space:normal;line-height:1.3;vertical-align:bottom} .mz-rk col.c-area{width:34%} .mz-rk .cap-mz-c>span{display:block;border-radius:6px;padding:12px 8px} .mz-rk .cap-mz-c.sub>span{padding:7px 8px} .mz-rk thead th.mz-th-t{text-align:right;padding-right:12px} .mz-rk tr.ct-sub[role=button]{cursor:pointer} .mz-rk tr.ct-sub[role=button]:hover th{background:var(--soft)} .mz-rk tr.ct-sub[role=button]:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px} .mz-vazio{font-style:normal;font-size:var(--fs-sm);color:var(--ink3)} .mz-meta{font-weight:400;color:var(--ink3)} .mz-acao{margin-left:10px;padding:2px 8px;border:1px solid var(--bd2);border-radius:6px;background:var(--bg);font:inherit;font-size:var(--fs-sm);color:var(--ink2);cursor:pointer;vertical-align:1px} .mz-acao:hover{border-color:var(--bd3);color:var(--ink)} /* Cards de área → squad fora da Capacity com o cabeçalho dela (24/09/2026) */ .mz-card .cap-bloco-cab h2{margin:0} .mz-card .cap-bloco-sub{margin:4px 0 8px} .mz-card .eyebrow-card{margin:0 0 6px} /* área × mês: muitas colunas, a da área encolhe e o valor usa o degrau base */ .mz-rk.ct-matriz-mz{min-width:760px} .mz-rk.ct-matriz-mz col.c-area{width:18%} .mz-rk.ct-matriz-mz col.c-t{width:8%} .mz-rk.ct-matriz-mz thead th{font-size:var(--fs-sm)} .mz-rk.ct-matriz-mz .cap-mz-c{font-size:var(--fs-base)} .mz-rk.ct-matriz-mz .cap-mz-c>span{padding:12px 2px} .mz-rk.ct-matriz-mz .cap-mz-c.sub>span{padding:7px 2px;font-size:var(--fs-sm)} /* Por squad, em números: a tabela plana no mesmo desenho do cap-mz */ .mz-card #tbCycleTime{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .mz-card #tbCycleTime thead th{font-family:inherit;font-size:var(--fs-base);font-weight:500;letter-spacing:normal;text-transform:none;color:var(--ink3);padding:0 12px 12px;border-bottom:1px solid var(--bd);background:none;text-align:left} .mz-card #tbCycleTime thead th.n{text-align:right} .mz-card #tbCycleTime tbody td{padding:12px;border-bottom:1px solid var(--bd);font-size:var(--fs-md);color:var(--ink);background:none} .mz-card #tbCycleTime tbody td.n{text-align:right} .mz-card #tbCycleTime tbody td.dim{color:var(--ink2)} .mz-card #tbCycleTime tbody tr:hover td{background:var(--soft)} .mz-card #tbCycleTime .tag{background:none;padding:0;font-size:var(--fs-md);color:var(--ink2)} .mz-card #tbCycleTime .tag .dot{width:8px;height:8px;margin-right:10px} .mz-card #tbCycleTime td.nm{font-weight:400} @media (max-width:600px){.cap-bloco-aux{white-space:normal;text-align:left}} /* tabelas que abrem até a Feature: o título precisa de espaço */ #rankAreasCT .mz-rk col.c-area,#ctDemandaDrilldown .mz-rk col.c-area{width:44%} /* Cabeçalho numa linha só até ~1250 px: a 1280 as pílulas de 15 px empurravam tema e sino para uma segunda linha (medido em 24/09/2026). */ @media (max-width:1440px){ header.top{gap:12px;padding:14px 20px} .periodo{gap:8px} .periodo .fp-abre,.periodo .filtro-area .fa-abre,.periodo .filtro-responsavel .fa-abre,.periodo .filtro-squad .fa-abre{font-size:var(--fs-base);padding:7px 11px;gap:6px} } .mz-rk tr.mz-nota th{white-space:normal;font-style:normal;font-size:var(--fs-sm);color:var(--ink3);line-height:1.4} /* Cards de meia largura a 1280 px têm ~440 px úteis: a mínima de 460 (e a de 720 que o ranking da Incidentes herdava da matriz da Capacity) fazia a tabela rolar para o lado (medido em 24/09/2026). Abaixo disso a tabela ainda rola dentro do card, com a coluna da área visível. */ .mz-rk{min-width:400px} .cap-mz.inc-mz{min-width:0} /* Feature Cycle Time em uma tela e uma rolagem (24/09/2026). A partir de 1200px a distribuição e o Por área dividem a linha, e os dois cards esticam para a mesma altura; a tabela perde a largura mínima ali, porque em 1280px a metade da linha dá 384px. Abaixo disso eles empilham como antes. */ .ct-duo{display:grid;grid-template-columns:1fr;gap:0 16px} @media (min-width:1200px){ .ct-duo{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch} .ct-duo #rankAreasCT .mz-rk col.c-area{width:36%} .ct-duo>.card{min-width:0} .ct-duo .mz-rk{min-width:0} } .ct-tabela-abre{font:inherit;font-size:var(--fs-md);font-weight:600;color:var(--link-alt); background:none;border:1px solid var(--bd3);border-radius:8px;padding:5px 12px;cursor:pointer} .ct-tabela-abre:hover{background:var(--soft)} .ct-tabela-abre:focus-visible{outline:2px solid var(--accent-alt);outline-offset:2px} /* Cabeçalho quebra entre palavras, nunca dentro delas ("Featur es"). */ .mz-rk thead th{overflow-wrap:normal;word-break:normal} /* Filtro de tipo e a frase do universo numa linha só: eram duas linhas seguidas de texto miúdo antes do primeiro número. */ .ct-cabecalho{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;margin:0 0 12px} .ct-cabecalho>.ct-filtro-tipo,.ct-ref .ct-cabecalho>.eyebrow-periodo{margin:0} /* Na metade da linha o aviso "Clique numa linha" quebrava sozinho numa linha extra; o "Como ler" logo abaixo da tabela diz o mesmo. */ @media (min-width:1200px){.ct-duo .cap-bloco-aux{display:none}} .inc-topo.ct-topo{margin-bottom:12px} /* A última coluna ("Features", "Entregas" + o ícone de ajuda) precisa caber inteira sem quebrar a palavra; 10% dava 38px na metade da linha. */ .mz-rk col.c-t{width:88px} /* O geral e os tipos, mais justo: o mesmo conteúdo com menos respiro interno, para a aba caber em uma tela e uma rolagem também em 1440x900. */ .ct-geral-tipos .eyebrow-card{margin-bottom:10px} .ct-geral-layout .ct-type-card-full{padding:16px 22px} .ct-divisao{padding:14px 20px} /* Cabeçalho ordenável dos rankings: cursor de mão, foco visível e a seta do sentido depois do rótulo. */ .mz-rk thead th.mz-ordenavel{cursor:pointer;user-select:none} .mz-rk thead th.mz-ordenavel:hover{color:var(--ink)} .mz-rk thead th.mz-ordenavel:focus-visible{outline:2px solid var(--accent-alt);outline-offset:-2px} .inc-itens thead th.inc-ordenavel{cursor:pointer;user-select:none} .inc-itens thead th.inc-ordenavel:hover{color:var(--ink)} .inc-itens thead th.inc-ordenavel:focus-visible{outline:2px solid var(--accent-alt);outline-offset:-2px} .mz-ord-seta{margin-left:3px;font-size:var(--fs-micro);color:var(--ink2)} .mz-ord-seta:empty{display:none} /* Sub-abas, filtro de tipo e frase do universo numa linha; a frase quebra antes de empurrar o filtro para baixo. */ .ct-topo .ct-cabecalho{margin:0;flex:1 1 420px;min-width:0} .ct-topo .ct-cabecalho[hidden]{display:none} /* Por squad recolhida: título, descrição e botão numa linha só. */ .ct-tabela-cab{align-items:center} .ct-tabela-cab .cap-bloco-sub{margin:0;flex:1 1 280px;min-width:0} /* Cartão de erro em "O geral e os tipos" (24/09/2026): Não identificado e Pai não lido são erro, não tipo. Selo de alarme com ● (segundo sinal além da cor), contagem no lugar da mediana e os motivos em lista. */ .ct-erro-selo{margin-top:6px;font-size:var(--fs-sm);font-weight:600;color:var(--v-alarm-text)} .ct-type-erro .ct-type-card-value small{font-size:var(--fs-sm)} .ct-erro-motivos{list-style:none;margin:6px 0 4px;padding:0;font-size:var(--fs-sm);color:var(--ink2);line-height:1.5} .ct-erro-motivos b{color:var(--v-alarm-text);font-weight:600;margin-right:3px} .ct-erro-carregando{color:var(--ink3)} /* A faixa do erro fica embaixo dos tipos, separada por linha tracejada, em largura cheia: título, selo e contagem numa linha, os motivos em seguida. Com o erro nas colunas dos tipos, 1440px dava cinco colunas de 105px. */ .ct-erros{margin-top:14px;padding-top:10px;border-top:1px dashed var(--bd2)} /* `min(380px,100%)`: abaixo de 380 px a coluna mínima passava da borda e cortava os cartões de erro no celular (medido em produção, 01/10/2026). */ .ct-erros-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:8px 40px;margin-top:6px} .ct-erros .ct-type-card.ct-type-erro{min-height:0;border:0;border-radius:0;background:transparent;padding:0; display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;gap:2px 12px} .ct-erros .ct-type-erro .mk.ct-regua{display:none} .ct-erros .ct-type-erro .ct-type-card-title{display:flex;align-items:center;gap:6px;font-size:var(--fs-md);font-weight:600;color:var(--ink)} .ct-erros .ct-type-erro .ct-type-card-title i{display:inline-block;width:8px;height:8px;border-radius:50%} .ct-erros .ct-type-erro .ct-erro-selo{margin:0} .ct-erros .ct-type-erro .ct-type-card-value{margin:0;font-size:var(--fs-md);font-weight:700;color:var(--ink);text-align:right} .ct-erros .ct-type-erro .ct-erro-motivos,.ct-erros .ct-type-erro .ct-type-card-meta{grid-column:1 / -1;margin:2px 0 0} .ct-erros .ct-erro-motivos{display:flex;flex-wrap:wrap;gap:0 16px} /* pendências de data do FCT (D1, 13/10/2026) */ .ct-pendencias{margin-top:14px;padding-top:10px;border-top:1px dashed var(--bd2)} .ct-pendencias-resumo{margin:6px 0;color:var(--ink)} .ct-pendencias-tab{border-collapse:collapse;width:100%;max-width:720px} .ct-pendencias-tab th,.ct-pendencias-tab td{padding:4px 8px;border-bottom:1px solid var(--bd2);text-align:left} .ct-pendencias-tab .num{text-align:right;font-variant-numeric:tabular-nums} .ct-pendencias-listar{margin-top:8px} .ct-pendencias-lista ul{margin:8px 0 0;padding-left:18px} /* período revisado (D9): o mesmo desenho das pendências */ .ct-revisao{margin-top:14px;padding-top:10px;border-top:1px dashed var(--bd2)} .ct-revisao-resumo{margin:6px 0;color:var(--ink)} .ct-revisao-tab{border-collapse:collapse;width:100%;max-width:520px} .ct-revisao-tab th,.ct-revisao-tab td{padding:4px 8px;border-bottom:1px solid var(--bd2);text-align:left} .ct-revisao-tab .num{text-align:right;font-variant-numeric:tabular-nums} .ct-revisao-listar{margin-top:8px} .ct-revisao-lista ul{margin:8px 0 0;padding-left:18px} .ct-erros .ct-type-card-meta{font-size:var(--fs-sm);color:var(--ink3)} .ct-erros .ct-type-erro:hover .ct-type-card-title>span:first-of-type{text-decoration:underline;text-underline-offset:3px} /* Uma linha por erro, rótulo à esquerda: título, selo, contagem e motivos lado a lado, para a aba seguir em uma tela e uma rolagem em 1440px. Abaixo de 1100px volta a empilhar. */ @media (min-width:1100px){ .ct-erros{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 24px;align-items:start} .ct-erros>.ct-geral-eyebrow{margin:4px 0 0;white-space:nowrap} .ct-erros .ct-erros-cols{grid-template-columns:1fr;gap:4px;margin:0} .ct-erros .ct-type-card.ct-type-erro{grid-template-columns:auto auto auto minmax(0,1fr)} .ct-erros .ct-type-erro .ct-type-card-value{text-align:left} .ct-erros .ct-type-erro .ct-erro-motivos{grid-column:auto;margin:0} } .ct-divisao-cols.lg.chave{margin-top:14px} .ct-divisao-cols .mk.ct-regua{margin-bottom:10px} .ct-divisao-cols .ct-type-card-meta,.ct-divisao-cols .ct-type-card-delta{margin-top:6px} @media (min-width:1100px){ .ct-erros .ct-type-card.ct-type-erro{align-items:start} .ct-erros .ct-erro-motivos{gap:0 12px} } /* Os motivos quebram ENTRE itens, nunca dentro de um. Com `nowrap` na lista, a 1171 px a linha "239 Melhoria com Épico · 110 Projeto sem Épico · 32 Manutenção c..." empurrava a página inteira para o lado (QA-009, 25/09/2026); o `1fr` sem `minmax(0,...)` acima deixava a trilha crescer até o comprimento da linha. */ @media (min-width:1100px){ .ct-erros .ct-type-erro .ct-erro-motivos{grid-column:2/-1;flex-wrap:wrap;min-width:0} .ct-erros .ct-erro-motivos li{white-space:nowrap} .ct-erros .ct-erro-motivos li.ct-erro-aviso{white-space:normal} } .ct-erro-aviso{color:var(--ink3);font-style:italic} /* Feature Cycle Time a 1171 px (QA-009, 25/09/2026). O balão do "i" fica `visibility:hidden` quando fechado, para a transição acontecer, e caixa invisível ainda conta como conteúdo transbordando: o balão de um ícone perto da borda criava rolagem lateral na página. `clip` corta só o eixo x e não cria contêiner de rolagem, então nada gruda nem rola diferente. */ .ct-ref{overflow-x:clip} /* Os rótulos da barra de participação ("PROJETO · 40,5%") perdiam o fim na largura menor: menos respiro e menos espaçamento entre letras, o mesmo texto. O `title` de cada fatia continua com o valor inteiro. */ @media (max-width:1280px){ .ct-divisao .ct-type-share-segment{padding:0 8px;letter-spacing:.04em} } /* Cabeçalho em uma linha a partir de 1101 px (QA-010, 25/09/2026). A 1171 o recorte ocupava uma linha própria e, com filtro ativo a 1281, o avatar descia sozinho: eram 110 a 137 px de cabeçalho. Agora quem cede é o grupo de filtros, que encolhe com reticências; tema, sino e conta não encolhem e ficam na mesma linha. O nome completo do filtro continua no texto do botão, que é o que o leitor de tela anuncia. */ @media (min-width:1101px){ header.top{flex-wrap:nowrap} header.top>.top-titulo{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .periodo{flex:0 1 auto;width:auto;min-width:0;flex-wrap:nowrap} .periodo>.filtro-area,.periodo>.filtro-responsavel,.periodo>.filtro-squad,.periodo>.filtro-resumo{flex:0 1 auto;min-width:0} .periodo .filtro-area .fa-abre,.periodo .filtro-responsavel .fa-abre,.periodo .filtro-squad .fa-abre{ display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .periodo>.filtro-resumo{overflow:hidden;text-overflow:ellipsis} .periodo>.filtro-periodo,.top-acoes,header.top .top-conta{flex:none} } /* Tabelas a 1171 px (QA-021, 25/09/2026). */ /* "Áreas por Feature Cycle Time", na metade da linha: a largura mínima de 400 px passava da metade útil e a coluna Entregas ficava atrás da rolagem interna. Com a grade fixa, a coluna da área cede e o nome ganha reticências. */ .split .mz-rk{min-width:0} .split .mz-rk col.c-area{width:30%} /* "Onde e quando as Features fecharam": 760 px de mínima escondiam a coluna Features. A total passa a ter largura própria, e não 8% da tabela. */ .mz-rk.ct-matriz-mz{min-width:680px} .mz-rk.ct-matriz-mz col.c-t{width:80px} /* Capacity, "Por área": o nome era `display:flex`, e reticências não valem para texto solto dentro de flex, então "Operadora" virava "Operadc" sem aviso. Em bloco, o corte ganha as reticências, e o `title` do botão já diz o nome ("Filtrar a tela por ..."). */ .cap-area-nome{display:block} .cap-area-nome .dot{display:inline-block;margin-right:10px;vertical-align:1px} /* Número com unidade não quebra entre o valor e o "h" ("33.345 h"). */ .cap-col-h,.cap-dist-total,.cap-grupo-h,.cap-area-v,.cap-tipo-v{white-space:nowrap} /* Visão geral, auditoria visual de 25/09/2026 (VG-01 a VG-11, sem VG-05). Tudo aqui é da aba: tokens direto, nenhum componente compartilhado redefinido. */ /* VG-03: a data sai das colunas e é escrita uma vez, no cabeçalho do grupo dos quatro números de estado; Entregas tem grupo e relógio próprios. */ .panorama{align-items:stretch} .pn-grupo{flex:4 1 0;min-width:0;display:flex;flex-direction:column} .pn-grupo.pn-grupo-periodo{flex:1 1 0} .pn-cab{margin:0;padding:6px 18px 0;text-align:center;font-size:var(--fs-micro);font-weight:500;color:var(--ink3)} .pn-linha{display:flex;flex-wrap:wrap;flex:1} .pn-grupo+.pn-grupo{position:relative} .pn-grupo+.pn-grupo::before{content:'';position:absolute;left:0;top:16%;bottom:16%;width:1px;background:var(--bd)} .pn-grupo-periodo .pn-item{flex:1 1 0} @media (max-width:480px){ .pn-grupo,.pn-grupo.pn-grupo-periodo{flex:1 1 100%} .pn-grupo+.pn-grupo::before{display:none} } /* VG-06: os dois indicadores no tamanho de manchete das abas próprias, com a unidade colada ao número pelo formatador. */ #kpisGeral .kpi .vl{font-size:var(--fs-hero);letter-spacing:-.03em} @media (max-width:600px){#kpisGeral .kpi .vl{font-size:var(--fs-xl)}} /* VG-01: "Composição do trabalho" com o mesmo par de título e subtítulo do card vizinho. VG-02: o card não estica até a altura da tabela. */ #tab-visao .vg-comp{align-self:start} #tab-visao .vg-comp h2{margin:0;font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;color:var(--ink)} #tab-visao .vg-comp #hintComposicao{margin:4px 0 14px;font-size:var(--fs-md);font-weight:400;color:var(--ink3)} /* TR-05: a direção da métrica separada do subtítulo. */ #tab-visao .vg-direcao{margin:0 0 8px;font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink3)} #tab-visao .mz-card .cap-bloco-sub{margin-bottom:2px} /* VG-10: a coluna Área com a mesma largura da aba Feature Cycle Time (`.ct-duo #rankAreasCT`), onde o mesmo nome cabe. */ #tab-visao .split .mz-rk col.c-area{width:36%} /* Feature Cycle Time, auditoria visual de 25/09/2026. Tudo aqui é da aba (#tab-cycletime ou classe que só ela usa), com os tokens da escala. */ /* FCT-02: o "i" herdava a caixa alta do rótulo e virava "I", e a bolha saía toda em maiúsculas */ .ct-geral-base .info{text-transform:none;letter-spacing:0} /* FCT-04: dentro do card, o sobretítulo não carrega a margem do título dele */ .ct-geral-tipos .ct-geral-eyebrow{margin:0} /* FCT-03: segmento sem rótulo tem a largura do número, com 4px de mínimo; Pai não lido é só contorno, e o número vai escrito fora da barra */ .ct-divisao .ct-type-share-segment.seg-min{padding:0;min-width:4px} .ct-divisao .ct-type-share-segment.seg-contorno{background:transparent;border:1.5px solid;box-sizing:border-box} .ct-share-fora{margin:6px 0 0;display:flex;align-items:center;justify-content:flex-end;gap:6px; font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink3);font-variant-numeric:tabular-nums} .ct-share-fora .mk.seg-contorno{display:inline-block;width:9px;height:9px;border:1.5px solid;border-radius:2px;box-sizing:border-box} /* FCT-05: título do card no mesmo degrau dos irmãos da aba */ #tab-cycletime .ct-ref-chart-card .card-topo h2{font-size:var(--fs-lg);font-weight:600} /* FCT-07: leitura do histograma no degrau de texto, não no de rótulo */ .ct-hist-leitura{margin:6px 0 0;font-size:var(--fs-sm);color:var(--ink3);line-height:1.45} /* FCT-08: lado a lado, cada card tem a altura do próprio conteúdo */ @media (min-width:1200px){#tab-cycletime .ct-duo>.card{align-self:start}} /* TR-05: o sentido da métrica fora do subtítulo */ #tab-cycletime .mz-direcao{margin:0 0 8px;font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink3)} #tab-cycletime .mz-card .cap-bloco-sub{margin-bottom:4px} /* TR-05: cabeçalho do mapa de calor no mesmo degrau do cabeçalho da tabela */ #tab-cycletime .mz-rk.ct-matriz-mz thead th{font-size:var(--fs-base);font-weight:500} /* FCT-10: subtítulo e régua da cor na mesma linha; a régua quebra para baixo quando não cabe */ .ct-matriz-sub{display:flex;align-items:baseline;justify-content:space-between;gap:6px 18px;flex-wrap:wrap} .ct-rampa:not([hidden]){display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink3);font-variant-numeric:tabular-nums} .ct-degrau{display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .ct-degrau i{display:inline-block;width:14px;height:10px;border-radius:2px} /* F5 (29/09/2026): mediana de menos de 5 Features. Contorno tracejado, o mesmo código de "parcial" das colunas mensais, para não depender só da cor. */ .ct-n-pequeno > span{outline:1.5px dashed var(--ink3);outline-offset:-3px} .ct-n-legenda{display:inline-flex;align-items:center;gap:4px;margin-left:8px} .ct-n-pequeno-mk{display:inline-block;width:14px;height:10px;border-radius:2px;outline:1.5px dashed var(--ink3);outline-offset:-2px} /* Feature Cycle Time no desenho do Portal V5 (15/10/2026). Bloco 2 usa os cartões mensais da Taxa de Defeito (`def-duo`, `def-card`); o bloco 3 abre com o seletor Distribuição | Por área, como o desenho; o que fica fora do cálculo mora na Base de Dados e o Total diz quanto é e onde ver. */ .def-card #ctMensalMediana,.def-card #ctMensalEntregas{align-self:end} .ct-mensal{margin-top:16px} .ct-bloco3{margin-top:4px} .ct-b3-vistas{margin:0 0 12px} .ct-b3-vistas button.on{background:var(--bg);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)} .ct-fora-link{display:inline-block;margin-top:14px;padding:0;border:0;background:none;font:inherit; font-size:var(--fs-base);color:var(--link-alt);cursor:pointer;text-align:left} .ct-fora-link:hover{text-decoration:underline} .ct-fora-link:focus-visible{outline:2px solid var(--accent-alt);outline-offset:2px} .ct-divisao-cab .ct-divisao-soma{color:var(--ink3)} .ct-base-dados h2{margin:0 0 4px} .ct-base-resumo{margin:12px 0 18px;font-size:var(--fs-md);color:var(--ink2);font-variant-numeric:tabular-nums} .ct-base-resumo b{color:var(--ink)} #ctVistaBase .ct-erros,#ctVistaBase .ct-pendencias,#ctVistaBase .ct-revisao{margin-top:18px;padding-top:16px;border-top:1px solid var(--bd2)} #ctVistaBase .ct-erros:first-of-type{margin-top:0} .ct-ref .def-duo .card.ct-m-card:not([hidden]){grid-template-rows:auto auto auto 1fr auto;grid-row:span 1;display:flex;flex-direction:column} .ct-mensal{grid-template-rows:none} .ct-m-rot{margin:0 0 10px} .ct-m-vl{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)} .ct-m-vl .u{font-size:var(--fs-md);font-weight:500;letter-spacing:0;color:var(--ink3);margin-left:6px} .ct-m-cmp{margin:12px 0 4px;min-height:28px} .ct-m-cmp .def-card-cmp{justify-content:flex-start;margin:0} .def-card.ct-m-card #ctMensalMediana,.def-card.ct-m-card #ctMensalEntregas{margin-top:auto;padding-top:10px;align-self:stretch;width:100%} .ct-m-meta{margin:2px 0 0;font-size:var(--fs-sm);color:var(--ink3);line-height:1.45} /* Base de Dados do FCT: a lista filtrável, no componente da lista de Incidentes; no celular a tabela rola dentro do cartão, sem cortar coluna */ .ct-base-lista{margin-top:18px} .ct-lista-rola{overflow-x:auto;-webkit-overflow-scrolling:touch} .ct-lista{min-width:860px} .ct-lista td{vertical-align:top} .ct-lista-titulo{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ct-lista-motivo{display:block;font-size:var(--fs-sm);color:var(--ink4);margin-top:2px} .ct-base-resumo .ct-erro-aviso{display:block;margin-top:6px} /* a lista do FCT tem o desenho da lista de Incidentes com classes próprias: os testes e o código de Incidentes procuram as `inc-` na página inteira */ .ctl-vazio{font-size:var(--fs-sm);font-weight:500;font-style:normal;color:var(--ink4)} .ctl-link{border:0;background:transparent;padding:0;font:inherit;font-size:var(--fs-md);color:var(--link);cursor:pointer} .ctl-link:hover{text-decoration:underline} .ctl-texto{margin:12px 0 0;font-size:var(--fs-base);color:var(--ink3);line-height:1.5} .ctl-filtros{display:flex;flex-direction:column;gap:4px;margin:0 0 14px} .ctl-filtro{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;gap:12px} .ctl-filtro>span{font-size:var(--fs-base);color:var(--ink3)} .ctl-filtro .chips{margin:4px 0} .ctl-mono{font-size:var(--fs-base);color:var(--ink3);margin:4px 0 0} .ctl-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap} .ctl-itens{margin-top:12px} .ctl-itens .mono{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink2)} .ctl-itens .mudo{color:var(--ink5)} .ctl-itens td.n,.ctl-itens th.n{white-space:nowrap} .ctl-itens a{color:var(--link);font-family:var(--mono);font-size:var(--fs-sm);text-decoration:none} .ctl-itens a:hover{text-decoration:underline} .ctl-mais{margin-top:12px} .ctl-itens thead th.ctl-ordenavel{cursor:pointer;user-select:none} .ctl-itens thead th.ctl-ordenavel:hover{color:var(--ink)} .ctl-itens thead th.ctl-ordenavel:focus-visible{outline:2px solid var(--accent-alt);outline-offset:-2px} /* Base de Dados da Taxa de Defeito: os rótulos dos grupos são mais longos ("Defect depois do fechamento"), e em 90px quebravam em três linhas. */ @media (min-width:901px){#defBaseLista .ctl-filtro{grid-template-columns:200px minmax(0,1fr)}} @media (max-width:900px){.ctl-filtro{grid-template-columns:1fr;gap:0}}