/* ============================================================================ PDI Sequoia — tokens proprios do app Contrato: .planning/phases/02-.../02-UI-SPEC.md O caminho acima vai com reticencias DE PROPOSITO. Comentario CSS nao aninha, entao o "02-" seguido de asterisco e barra fechava ESTE comentario aqui em cima, na terceira linha do arquivo. MEDIDO em 2026-09-08 (Chrome, assets reais): com o comentario fechado ali, a recuperacao de erro do parser engolia a PRIMEIRA regra do arquivo junto com o texto solto — .text-muted-aa nunca chegou a existir na folha (12 regras aceitas, sem ela) e o texto secundario herdava #334155 do tema em vez do #475569 contratado. Nao reintroduza o glob no caminho; TemaAssetsTests .AppCss_CabecalhoDeclaraExatamenteOsTokensQueOArquivoTem reprova se alguem fizer isso, porque delimita o cabecalho no MESMO ponto em que o parser delimita. ============================================================================ ESCOPO DESTE ARQUIVO: somente o que NAO existe no tema. Espacamento, tipografia base, grid e as cores do tema vivem no SCSS recompilado (wwwroot/oneui/css/oneui.min.css, gerado por scripts/Build-OneUiTheme.ps1). Redefinir aqui qualquer um deles cria duas fontes de verdade — a reconciliacao de marca de D-26/D-27 muda UMA variavel no script de build, nao regra espalhada por CSS (prohibition P-16). Sao 17 tokens, todos exigidos pelo contrato. OS ITENS 14, 15 E 16 JA EXISTIAM COMO REGRA E NAO ESTAVAM NO INDICE. Eles entraram nesta lista em 2026-10-23, pelo plano 06-11, quando o falseamento daquele plano mediu que a guarda do cabecalho cobria o sentido indice -> corpo e NAO o sentido corpo -> indice: regra nova e anonima entrava no arquivo e nada acusava, embora o 06-UI-SPEC.md afirmasse o contrario. A metade que faltava virou TemaAssetsTests .AppCss_NenhumaRegraDoCorpoFicaForaDoIndice, e foi ela que nomeou estas tres: 1. .text-muted-aa substituto acessivel do .text-muted (PROIBIDO) 2. .tabular numeros que nao "dancam" entre re-renders 3. .btn-icon-action alvo de toque de 44x44px em coluna de acao 4. .badge-estado[-dot] padrao unico de badge de estado 5. :focus-visible ring de foco de accent, sempre visivel 6. .previa-tabela-desktop / .previa-aviso-tela-pequena previa de importacao e desktop-only abaixo de 768px 7. .btn-importar-linhas largura minima reservada da acao final da previa 8. .previa-celula-status largura minima reservada da primeira celula da previa 9. .col-fixa-esquerda / .col-fixa-direita colunas Nome e Acoes fixas na listagem de colaboradores 10. .ocorrencias-fixas bloco de ocorrencias da previa para de rolar com as colunas 11. .coluna-parcial marca NAO-CROMATICA da coluna do ciclo em andamento (D-14) 12. .grafico-evolucao caixa de altura fixa do canvas do grafico de evolucao 13. .cor-estado-sucesso / .cor-estado-aviso / .cor-estado-erro / .cor-estado-neutro cor do icone de estado da habilidade na matriz (D-49) 14. .skip-link primeiro focavel da pagina; salta para o conteudo 15. .usuario-nome-gatilho / .usuario-nome-menu nome longo no dropdown do header, sem esticar o shell 16. cabecalho sticky a celula de thead com .position-sticky na previa de importacao fica OPACA (CONF-01) 17. .hero-titulo o bloco de titulo do hero pode encolher abaixo do conteudo, em vez de ser comprimido pela trilha e pelas acoes (janela [149]) ============================================================================ */ /* --- 1. Texto secundario acessivel --------------------------------------- O .text-muted do Bootstrap/OneUI (#6c757d) da 4,03:1 sobre o fundo da pagina (#EBEEF2) e REPROVA WCAG AA — por isso e proibido no projeto (D-26, verificado pelo gsd-ui-checker). #475569 da 6,5:1. Vale para subtitulo de hero, footer, helper de campo e celula sem valor. */ .text-muted-aa { color: #475569; } /* --- 2. Numeros tabulares ------------------------------------------------ Colunas de grade, contadores de importacao, CPF/CNPJ e datas. Sem isso as colunas numericas da previa de importacao mudam de largura a cada troca parcial por HTMX. */ .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* --- 3. Alvo de toque de 44x44px ---------------------------------------- Excecao deliberada a escala de 4 do contrato (## Spacing Scale): o .btn-sm do OneUI fica abaixo do minimo de alvo de toque. Usar junto de .btn-sm nos botoes so-icone das colunas de acao (editar / inativar / ver detalhe). Botao so-icone SEMPRE leva aria-label e title. */ .btn-icon-action { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* --- 4. Padrao unico de badge de estado --------------------------------- Fundo na variante clara + texto #1F2937 + ponto solido de 8px na cor semantica. NUNCA fundo solido com texto branco por cima: #EA580C + branco da 3,56:1 e #65A30D + branco da 3,09:1, ambos reprovam AA. Este padrao entrega 11,5:1 / 11,7:1 / ~11:1 com uma unica regra e tres cores. O estado nunca depende so da cor: o texto do badge carrega a informacao. */ .badge-estado { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 600; line-height: 1.25; color: #1F2937; white-space: nowrap; } .badge-estado-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; } /* --- 5. Foco visivel ---------------------------------------------------- Foco visivel em 100% dos interativos. Nunca `outline: none` sem substituto. O ring usa a primaria (unico ponto da lista fechada de accent em que ela aparece fora de botao primario, item ativo de menu, aba ativa, check marcado e link inline). */ :focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 0.25rem rgba(58, 98, 204, 0.25); border-radius: 0.25rem; } /* --- Skip link ---------------------------------------------------------- Primeiro elemento focavel da pagina; salta para #main-container. Fica fora da tela ate receber foco. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1100; padding: 0.5rem 1rem; background-color: #FFFFFF; color: #3A62CC; font-weight: 600; text-decoration: underline; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* --- Nome do usuario no gatilho do dropdown do header ------------------- UI/long-text (nav): o nome vem do cadastro e nao tem limite de tamanho. Truncado com 200px no gatilho (+ title completo na marcacao); dentro do menu aberto quebra em ate 2 linhas. Nome longo nao pode aumentar a altura do header (64px) nem empurrar o dropdown fora da viewport. */ .usuario-nome-gatilho { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .usuario-nome-menu { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* --- Prévia de importação é desktop-only abaixo de 768px ----------------- Decisão do usuário (2026-08-27, 02-UI-SPEC.md → UI Considerations, linha "overflow / prévia abaixo de 768px"): a etapa 2 do wizard NÃO renderiza a tabela de conferência linha a linha abaixo de 768px — mostra o aviso pedindo tela maior. display:none remove do fluxo de acessibilidade também (não é só um efeito visual), então o conteúdo oculto não "vaza" para leitor de tela como se fosse utilizável. A planilha já enviada continua válida e a prévia não expira por causa disso — só a MARCAÇÃO troca com a largura da viewport. */ @media (max-width: 767.98px) { .previa-tabela-desktop { display: none; } } @media (min-width: 768px) { .previa-aviso-tela-pequena { display: none; } } /* --- Largura mínima reservada da ação final da prévia --------------------- UI/long-text (interactive-control: botão "Importar N linhas"): o rótulo interpola um número que varia de 1 a milhares entre um lote e outro — sem largura mínima reservada, a faixa de ações reflui entre "Importar 1 linha" e "Importar 180 linhas" de um carregamento para o seguinte. A reserva continua contratada depois da emenda de D-08 (2026-09-09): o que mudou foi a frequência (só entre carregamentos de página), não o efeito. */ .btn-importar-linhas { min-width: 200px; } /* --- 8. Largura minima reservada da primeira celula da previa ------------- L2/G-02-8: a primeira celula da etapa 2 carrega TRES coisas de largura variavel — o numero da linha do arquivo, o badge de severidade (Erro, Aviso ou Pronto) e o controle de expansao (ausente na linha sem ocorrencia). Sem largura minima reservada, a coluna se dimensiona pelo conteudo e a mesma tabela fica com larguras diferentes de um lote para outro, ou entre a pagina 1 e a pagina 2 do mesmo lote. MEDIDO em 2026-09-08 (Chrome headless, oneui.min.css + app.css reais): sem o token a coluna pula 17,2px so na diferenca entre "Erro" e "Pronto"; com ele, 0,0px. A medicao foi feita com troca parcial, que a emenda de D-08 (2026-09-09) removeu; a diferenca de largura entre os estados e a mesma, o que mudou e que ela agora aparece entre carregamentos, nao no lugar. A maior largura NATURAL entre os estados reais (Erro/Aviso/Pronto x 1 a 4 ocorrencias, numero de linha de 1 a 3 digitos) foi 130,2px — 9rem (144px) deixa folga para o numero de 4 digitos de um arquivo maior. Mesma familia de .tabular (2) e .btn-importar-linhas (7): reservar largura para que troca parcial nao mexa layout. */ .previa-celula-status { min-width: 9rem; } /* --- 9. Colunas fixas da listagem de colaboradores ------------------------ L1/G-02-7 (2026-09-04, Marcelo Pires / Lira / Fernando Mattos): a coluna Nome fica fixa a esquerda e a coluna Acoes fixa a direita dentro do .table-responsive. Dano ja MEDIDO, nao hipotetico: rolar para a direita tirava o NOME de vista e o usuario editou o colaborador ERRADO durante o setup do Teste 1 do UAT. Nao existe coluna fixa no OneUI/Bootstrap 5, entao cabe neste arquivo pelo escopo declarado la em cima. POR QUE O SELETOR E LONGO, e nao so `.col-fixa-esquerda`: o tema declara `.table>:not(caption)>*>*{...background-color:var(--bs-table-bg)...}` com `--bs-table-bg: transparent` (oneui.min.css, regra do .table). Essa regra tem especificidade (0,1,1) e venceria uma classe solta (0,1,0) — a celula fixa voltaria a ser TRANSPARENTE e o conteudo que rola apareceria por baixo dela, que e exatamente o modo de falha que a decisao L1 proibe. Com `.table > :not(caption) > * > .col-fixa-*` ficamos em (0,2,1) e o fundo opaco vence. NAO simplifique este seletor: TemaAssetsTests .AppCss_ColunasFixasDeclaramStickyComFundoOpacoQueSobreviveAoHover compara as duas especificidades contra o oneui.min.css real e reprova se alguem o encurtar. HOVER, sem reescrever cor do tema: `.table-hover>tbody>tr:hover>*` NAO declara background-color — ela so troca `--bs-table-accent-bg` para `rgba(235, 238, 242, 0.75)`, que o tema pinta como `box-shadow: inset 0 0 0 9999px`. Inset shadow pinta ACIMA do background-color da propria celula, entao a celula fixa mantem o branco opaco por baixo e recebe a mesma tinta translucida que as demais: a linha inteira muda de cor de forma uniforme e nada vaza por tras. Por isso NAO ha (e nao pode haver) uma regra de hover propria pintando outro fundo aqui — pintar a cor de hover como background-color na celula fixa somaria a tinta DUAS vezes e deixaria as duas pontas da linha mais escuras que o meio. O `[Fact]` acima tambem verifica que a regra de hover do tema continua sem background-color proprio; se uma recompilacao do tema mudar isso, ele reprova em vez de deixar a conclusao envelhecer sozinha. Fundo: `--bs-white`, token do proprio tema (:root do oneui.min.css). E a superficie real atras da tabela — `.block{background-color:#fff}` —, entao a composicao do hover da o mesmo resultado das celulas que rolam. z-index 2: acima das celulas que rolam e MUITO abaixo do header fixo de 64px, que e `#page-container.page-header-fixed #page-header` com z-index 1030 (oneui.min.css). O desta tabela nao e sticky, entao nao ha disputa vertical com o cabecalho. */ .table > :not(caption) > * > .col-fixa-esquerda, .table > :not(caption) > * > .col-fixa-direita { position: sticky; z-index: 2; background-color: var(--bs-white, #FFFFFF); } .table > :not(caption) > * > .col-fixa-esquerda { left: 0; } .table > :not(caption) > * > .col-fixa-direita { right: 0; } /* CONF-01 — cabecalho sticky da PREVIA DE IMPORTACAO fica transparente e deixa as linhas aparecerem atraves dele. Previa.cshtml:124 marca o com .position-sticky e top:116px. O tema define `--bs-table-bg: transparent` e pinta TODA celula da tabela com `.table>:not(caption)>*>*{background-color:var(--bs-table-bg)}` — entao as celulas do cabecalho ficam transparentes, e o que rola por baixo aparece ATRAVES delas. Para quem olha, e indistinguivel de "a linha subiu por cima do cabecalho", que foi como o conferente descreveu em 2026-09-08. z-index NAO resolve isso: nenhum valor de empilhamento torna opaco o que e transparente. Esta e a razao de o defeito ter sobrevivido a uma tentativa anterior de correcao. Esta regra e independente da regra de coluna fixa acima: `.col-fixa-*` so existe em Pages/Rh/Colaboradores/_TabelaColaboradores.cshtml, cujo nao e sticky. Tabelas diferentes, problemas diferentes. Medido em 2026-09-09, Chromium, sobre este mesmo par de folhas de estilo: getComputedStyle(th).backgroundColor = rgba(0, 0, 0, 0) antes desta regra. Escopo deliberadamente estreito: so atinge um que alguem TENHA marcado como sticky. Cabecalho de tabela comum nao e afetado. Cor: mesmo token da regra de coluna fixa. Se a aplicacao um dia ligar o dark mode do tema (`.dark-mode`, que hoje o _Layout nao usa), as DUAS regras precisam de variante escura — nao so esta. */ .table > thead.position-sticky > tr > th { background-color: var(--bs-white, #FFFFFF); } /* CONF-06 — o cabecalho da previa rolava embora, e o primeiro registro visivel ocupava o lugar dele. CAUSA MEDIDA, e nao e a que parecia. O era declarado `position: sticky; top: 116px`, mas esse 116 nunca teve efeito nenhum: .table-responsive overflow-x = auto (Bootstrap) .table-responsive overflow-y = auto <- consequencia: e um container de rolagem scrollHeight 2023 == clientHeight 2023 <- que nunca rolava na vertical `overflow-x: auto` obriga o outro eixo a sair de `visible`. Com isso o .table-responsive vira o ANCESTRAL ROLAVEL MAIS PROXIMO, e `position: sticky` gruda no ancestral rolavel — nunca na janela, quando existe um. Como aquele container nao rolava verticalmente, o cabecalho nao grudava em lugar nenhum: rolava embora junto com a pagina, e a primeira linha visivel aparecia colada sob a faixa de resumo, no lugar onde o cabecalho deveria estar. Isto e um defeito DIFERENTE do CONF-01 (fundo transparente), na mesma linha de codigo. Corrigir a transparencia nao podia resolver este, e nao resolveu. A CORRECAO nao e ajustar o 116. Qualquer valor continuaria inerte enquanto o container de rolagem existisse. O painel passa a rolar de verdade na vertical e o cabecalho gruda no topo DELE (`top: 0`, em Previa.cshtml). PROPRIEDADE QUE ISSO COMPRA, e que vale mais que o conserto: a altura abaixo e so estetica. Se --previa-espaco-acima estiver mal calibrado o painel fica mais curto ou mais alto do que o ideal, mas o cabecalho CONTINUA correto — ele nao depende mais de adivinhar a altura da faixa de resumo. O acoplamento que gerou esta familia de bugs deixou de existir. Medido em Chromium via Playwright, com estas mesmas folhas de estilo e a estrutura real da pagina (header fixo de 64px + faixa sticky + tabela), em tres estados de rolagem do painel: parado diferenca cabecalho/topo-do-painel = 0px 1o registro: Pessoa Limpa 1 rolado 500 diferenca = 0px 1o registro: Pessoa Limpa 11 rolado ao fim diferenca = 0px 1o registro: Pessoa Limpa 41 O registro abaixo do cabecalho MUDA entre os estados: e a prova de que o corpo rola por baixo, e nao de que o cabecalho rolou junto. O valor de --previa-espaco-acima e o espaco que a pagina ocupa acima e abaixo do painel (header fixo, titulo, faixa de resumo, botoes de confirmar/descartar). Calibravel numa linha, e sem risco: errar o numero nao reintroduz o defeito. */ .previa-tabela-desktop .table-responsive { max-height: calc(100vh - var(--previa-espaco-acima, 320px)); overflow-y: auto; } /* OBS-02-M — o cabecalho sticky da previa INTERCEPTA o clique no alvo que o navegador acabou de rolar para dentro do painel. MEDIDO em 2026-09-08 (Chromium, plano 02-20): "th Avaliador confidencial from thead.position-sticky subtree intercepts pointer events", 60 s de tentativas recusadas ate o timeout. A rolagem automatica para quando o alvo entra no retangulo visivel do container — e o topo desse retangulo esta DEBAIXO do cabecalho, que ocupa aquele espaco sem sair do hit-testing. A GEOMETRIA MUDOU DESDE A MEDICAO e o defeito nao se dissolveu com ela. O CONF-06 (2026-09-09) trocou `top: 116px` contra a janela por `top: 0` dentro do painel que rola, logo acima. Interceptacao contra a janela virou interceptacao contra o topo do painel: o cabecalho continua grudado no topo da area visivel e continua recebendo o ponteiro. Mudou o referencial, nao o efeito. NAO e z-index. A ordem de empilhamento esta correta — o cabecalho DEVE ficar por cima. O que esta errado e o alvo parar embaixo dele. OS DOIS ALVOS, e cada um falha sozinho: tr a linha, quando a rolagem e pedida para a linha inteira; .btn o botao de expandir ocorrencias (_LinhaPrevia.cshtml), unico interativo do painel e alvo REAL de um clique. Ele vive dentro de um td, e `scroll-margin` NAO herda: reserva so em `tr` nao o alcanca. O VALOR sai do oneui.min.css real, e nao de estimativa: a regra de celula do tema declara `padding:.75rem .75rem` (12+12px), a linha base e 1.5 x 1rem (24px) e a celula tem `border-bottom-width:1px` — 49px de cabecalho. 3.5rem (56px) cobre com folga. ASSIMETRIA DO ERRO, que e o que torna o numero seguro de calibrar: reservar DEMAIS custa um espaco em branco acima da linha clicada (estetico, como o --previa-espaco-acima do CONF-06); reservar DE MENOS devolve o defeito. Guardado por TemaAssetsTests .AppCss_AlvosDeCliqueDaPreviaReservamRolagemSobOCabecalhoSticky, que exige a reserva nos DOIS alvos e um piso de 49px. A interceptacao em si so se observa em navegador, e a previa nao tem classe de navegador (escopo minimo, D4). */ .previa-tabela-desktop .table-responsive tr, .previa-tabela-desktop .table-responsive .btn { scroll-margin-top: 3.5rem; } /* --- 10. Bloco de ocorrencias FIXO na horizontal ------------------------ [104] — o bloco de ocorrencias da previa de importacao rola junto com as colunas da tabela, entao quem rolou para a direita para ler uma coluna perde de vista a lista do que deu errado naquela linha. Mesma familia da decisao L1 (coluna fixa), e mesma motivacao: o que explica a linha nao pode sair de vista enquanto se examina a linha. CONSUMIDO EM 2026-10-26 pelo plano 06-21: o bloco vive dentro do da linha de detalhe de _LinhaPrevia.cshtml, filho DIRETO dela. O token tinha entrado aqui antes do consumidor porque o cabecalho enumerado deste arquivo e um contrato UNICO — declarar metade dos tokens num plano e metade noutro faria a guarda do indice medir dois estados diferentes em duas waves. A LARGURA MUDOU DE `max-content` PARA `min(72ch, 100%)` no 06-21, e nao e ajuste de gosto: as duas declaracoes anteriores NAO entregavam a medida de leitura de 72ch que 06-UI-SPEC.md contrata (secao Dividas herdadas, [104]), e a que estava escrita nao podia entregar. `max-width: 100%` resolve contra a largura do , que e a largura da TABELA e nao a da area visivel — numa tabela mais larga que a tela, `max-content` + `max-width: 100%` deixa a caixa crescer MUITO alem da janela, e a frase volta a sair pela direita. Com a caixa grudada na esquerda, o comeco fica legivel e o fim continua fora: o defeito de [104] atenuado, nao resolvido. `min(72ch, 100%)` poe um teto DURO na medida de leitura e so cede quando a propria celula e mais estreita que isso. `left: 0` sem `position: sticky` nao faz nada. E sticky falha em SILENCIO sob varias condicoes de ancestral (janela [18]): por isso o bloco e filho direto da celula, e por isso o contrato exige backstop HUMANO — nem esta regra nem o teste de marcacao medem area visivel. */ .ocorrencias-fixas { position: sticky; left: 0; width: min(72ch, 100%); } /* --- 11. Coluna do ciclo EM ANDAMENTO (D-14) ---------------------------- A matriz de evolucao tem DUAS origens de dado: ciclo encerrado vem da linha materializada e e estavel; ciclo em andamento vem calculado do resultado vigente e MUDA ENTRE DOIS ACESSOS. A assimetria tem de aparecer. TRACEJADO E FORMA, NAO COR: ele sobrevive a impressao em preto e branco e a daltonismo, que e a razao de a marca nao ser um fundo colorido. E A MARCA NUNCA E SO ESTA BORDA. O portador da informacao e o badge com a palavra no cabecalho da coluna, exatamente como o ponto do badge nunca anda sem o texto. Esta regra e o reforco nao-cromatico, e ha caso de teste afirmando o portador TEXTUAL — sem ele, apagar o badge e deixar so o tracejado passaria sem reprovar nada. O VALOR #475569 e o mesmo de RegraEstadoHabilidade.CorNeutra, e a igualdade e PROVADA por TemaAssetsTests .AppCss_CoresDeEstadoDaHabilidade_ConcordamComARegraDeDominio — nao e coincidencia tolerada. POR QUE O SELETOR E LONGO, e nao so `.coluna-parcial`: mesma razao da regra 9 acima. O tema declara `.table>:not(caption)>*>*` com especificidade (0,1,1), e pinta a propria celula; uma classe solta (0,1,0) ficaria sujeita a ordem de carga. Com `.table > :not(caption) > * > .x` ficamos em (0,2,1). */ .table > :not(caption) > * > .coluna-parcial { border-left: 2px dashed #475569; border-right: 2px dashed #475569; } /* --- 12. Caixa do grafico de evolucao ----------------------------------- Chart.js exige um container DIMENSIONADO: um responsivo dentro de caixa sem altura resolvida cresce a cada redesenho, e o sintoma classico e a pagina esticando sozinha ate travar. 180px e a altura contratada pelo 06-UI-SPEC.md, em qualquer largura. `position: relative` e exigencia da propria biblioteca para o redimensionamento responsivo acontecer sobre o container em vez de sobre o documento. O CONSUMIDOR E O PLANO 06-12, que vendoriza a biblioteca e desenha o grafico. Este plano NAO desenha grafico nenhum e NAO vendoriza nada — o token entra aqui pelo mesmo motivo do 10: o indice deste arquivo e um contrato unico. */ .grafico-evolucao { position: relative; height: 180px; } /* --- 13. Cor do icone de estado da habilidade na matriz (D-49) ---------- A METADE DE FOLHA DO PONTO UNICO DE COR. A outra metade sao as constantes RegraEstadoHabilidade.CorSucesso / CorAviso / CorErro / CorNeutra, e as duas NAO PODEM divergir: a tela le daqui, e o construtor do documento impresso do plano 06-15 le de la, porque ele nao tem folha de estilo nenhuma para ler. A folha nao le C# e o dominio nao le folha: a igualdade e PROVADA por TemaAssetsTests.AppCss_CoresDeEstadoDaHabilidade_ConcordamComARegraDeDominio, que compara os pares um a um e reprova NOMEANDO o par divergente. Trocar um digito aqui sem trocar la reprova — foi medido por mutacao antes de a guarda ser confiada. NOME PROPRIO, E NAO `.estado-habilidade-*`: aquela classe JA EXISTE na marcacao (_LinhaHabilidadeDerivada.cshtml e ResultadoParticipante.cshtml) como marca ESTRUTURAL de contagem, sem regra de estilo nenhuma, e ResultadoRenderTests conta por ela. Pintar `color` naquele nome coloriria o que envolve o _StatusBadge nas DUAS telas que ja a usam — o texto do badge herdaria a cor semantica e perderia o ~11:1 que o padrao unico de badge entrega. A colisao foi vista ANTES de acontecer, e e por isso que o nome e outro. SO `color`, e nunca `background-color`: pintar o fundo da celula com a cor semantica destroi a legibilidade do numero e briga com o realce de linha — defeito ja registrado na previa de importacao, e proibicao escrita do contrato. */ .cor-estado-sucesso { color: #65A30D; } .cor-estado-aviso { color: #EA580C; } .cor-estado-erro { color: #DC2626; } .cor-estado-neutro { color: #475569; } /* --- 17. O bloco de titulo do hero pode encolher (janela [149]) ---------- UI/long-text (hero): o titulo vem do cadastro (nome de ciclo, nome de participante) e nao tem limite de tamanho. O bloco de titulo e o irmao flex-grow-1 de um container flex cujos outros dois filhos sao a trilha e o slot de acoes. Item de flex nasce com min-width: auto, e nessa condicao ele NAO encolhe abaixo da largura do proprio conteudo: o piso e a maior palavra indivisivel do

. Medido na UAT de 2026-10-29 em quatro telas — o titulo colapsava para uma coluna de uma palavra por linha enquanto o texto auxiliar das acoes vazava pela borda direita. min-width: 0 libera o piso e e a UNICA das tres condicoes que se trata por folha: as outras duas (a trilha e as acoes recusando encolher por flex-shrink-0) se tratam na marcacao de _PageHero.cshtml, e desfazer so uma das tres nao resolve. Nao existe utility equivalente no bundle: grep por .min-w-0 em wwwroot/oneui/css/oneui.min.css devolve ZERO, e o bundle e Bootstrap 5.2.0, que nunca publicou essa classe. SO min-width: espacamento, tipografia e cor do hero sao do tema recompilado, e redefini-los aqui criaria duas fontes de verdade (P-16, escopo do arquivo). */ .hero-titulo { min-width: 0; }