saía sem classe-base nenhuma e o que a desenhava era este bloco: largura, margem,
border-collapse, bordas de célula, padding de célula e um `font-size: 0.925rem` que não
aparece em nenhum outro lugar do produto. O preço não era estético — o toggle de densidade
do topbar mira `.sgsi-tabela`/`.sgsi-grid__tabela`/`.sgsi-est-tabela`, e a tela mais densa
da área ficava de fora dele; e o thead sticky do DS também.
A página passou a `VarianteTabela.Detalhe`: largura, bordas, padding, tipografia, hover e
sticky vêm de `.sgsi-tabela` (sgsi-componentes.css), e a densidade alcança a tabela. Aqui
ficam SÓ os modificadores que o DS não tem: coluna numérica, coluna de ação, semáforo,
linha crítica — e as duas colunas de texto longo, que precisam alinhar pelo topo.
O `.sgsi-prontidao-tabela-wrap` (overflow-x: auto em toda largura) saiu: o SgsiTabela já
entrega o `.sgsi-tabela-wrap`, que rola no mobile e é inerte no desktop de propósito. */
/* O `| ` da 1ª coluna é o irmão que o DS deixa de fora: `.sgsi-tabela` estiliza
`> thead > tr > th` e `> tbody > tr > td`, e a célula-cabeçalho de LINHA não casa com
nenhum dos dois — sem esta regra ela cairia no padding do `.table` do Bootstrap e
desalinharia da linha inteira. Mesmos tokens do DS, e a densidade compacta a alcança
logo abaixo (o seletor de densidade do DS também para nos dois casos acima). */
.sgsi-prontidao-tabela > tbody > tr > th[b-h6dzcngz4d] {
padding: var(--sgsi-space-3) var(--sgsi-space-4);
text-align: left;
border-bottom: 1px solid var(--sgsi-color-border);
color: var(--sgsi-color-text);
}
.sgsi-prontidao-tabela > tbody > tr:last-child > th[b-h6dzcngz4d] {
border-bottom: 0;
}
[data-sgsi-densidade="compacto"] .sgsi-prontidao-tabela > tbody > tr > th[b-h6dzcngz4d] {
padding-top: 0.3rem;
padding-bottom: 0.3rem;
}
/* "Observação" e "Módulo" quebram em várias linhas; alinhar pelo meio (o padrão do DS)
descolava o semáforo e o número da primeira linha do texto. Vence
`.sgsi-tabela > tbody > tr > td` (0,1,3) sem depender da ORDEM das folhas: a | é markup
desta página, então o compilador carimba o atributo de escopo no último seletor e a regra
sai como (0,2,3). */
.sgsi-prontidao-tabela > tbody > tr > td[b-h6dzcngz4d],
.sgsi-prontidao-tabela > tbody > tr > th[b-h6dzcngz4d] {
vertical-align: top;
}
.sgsi-prontidao-tabela__num[b-h6dzcngz4d] {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.sgsi-prontidao-tabela__acao[b-h6dzcngz4d] {
text-align: right;
white-space: nowrap;
}
.sgsi-prontidao-linha--critico th[scope="row"][b-h6dzcngz4d] {
box-shadow: inset 3px 0 0 0 var(--sgsi-color-brand);
}
/* ---------------- Célula módulo + semáforo ---------------- */
.sgsi-prontidao-modulo[b-h6dzcngz4d] {
font-weight: 500;
}
.sgsi-prontidao-modulo > span[b-h6dzcngz4d] {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
}
.sgsi-prontidao-semaforo[b-h6dzcngz4d] {
display: inline-block;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
margin-right: 0.5rem;
flex: 0 0 auto;
vertical-align: middle;
}
.sgsi-prontidao-semaforo--verde[b-h6dzcngz4d] {
background: var(--sgsi-color-success);
}
.sgsi-prontidao-semaforo--amarelo[b-h6dzcngz4d] {
background: var(--sgsi-color-warning);
}
.sgsi-prontidao-semaforo--vermelho[b-h6dzcngz4d] {
background: var(--sgsi-color-danger);
}
.sgsi-prontidao-semaforo--neutro[b-h6dzcngz4d] {
background: var(--sgsi-color-border);
}
/* `::deep` porque a classe vai no , componente FILHO: o dele carrega o escopo
DELE, não o desta folha. O ancestral que o `::deep` precisa existe — é a célula da tabela,
markup desta página. (Era o mesmo motivo do antigo `::deep .sgsi-prontidao-tabela`, que saiu
quando a tabela voltou para a classe-base do design system.) */
[b-h6dzcngz4d] .sgsi-prontidao-tag-critico {
font-size: 0.7rem;
}
.sgsi-prontidao-clausula[b-h6dzcngz4d] {
color: var(--sgsi-color-text-muted);
white-space: nowrap;
}
.sgsi-prontidao-obs[b-h6dzcngz4d] {
color: var(--sgsi-color-text-muted);
max-width: 28rem;
}
/* /Components/Ui/SgsiAvisoReciprocoCadastro.razor.rz.scp.css */
/* ===========================================================================
SGI PRO — Ui/SgsiAvisoReciprocoCadastro (CSS ISOLADO)
A nota que fica DENTRO do modal de cadastro, entre os campos, dizendo a quais
normas do cliente aquele item vai servir.
REGRA DE DESENHO, UMA SÓ: NÃO COMPETIR COM O FORMULÁRIO. É informação de
contexto, não validação — por isso texto pequeno, cor secundária e fundo
`bg-subtle`, e nunca o âmbar/vermelho dos avisos de campo. Um bloco colorido
no meio de um formulário treina o olho a lê-lo como erro, e o consultor
procuraria o campo inválido que não existe.
O acento é a borda esquerda na cor da marca — a mesma que o
`SgsiSeloReusoTransversal` usa no cabeçalho das telas de risco/ativo/incidente,
de propósito: é o MESMO assunto (o reuso multi-norma) em dois lugares do
produto, e o olho deve reconhecê-lo. E sobrevive ao print em preto e branco
porque é POSIÇÃO, não cor.
O `flex-wrap` das listas de selo não é zelo: um tenant de cinco normas rende
cinco rótulos "ISO/IEC 27001:2022" — e, no bloco do ciclo, cinco rótulos AINDA
MAIORES, com a cláusula entre parênteses. Sem quebra eles empurram o modal
para a rolagem horizontal, que num diálogo é pior que numa página: o botão
Salvar sai do campo de visão.
=========================================================================== */
.sgsi-aviso-cadastro[b-ieno3dinwj] {
display: flex;
align-items: flex-start;
gap: var(--sgsi-space-2);
padding: var(--sgsi-space-3);
border-radius: var(--sgsi-radius-md);
border-left: 3px solid var(--sgsi-color-brand);
background: var(--sgsi-color-bg-subtle);
}
.sgsi-aviso-cadastro__icone[b-ieno3dinwj] {
display: inline-flex;
flex: 0 0 auto;
/* Alinha o glifo com a PRIMEIRA linha do texto, e não com o bloco inteiro:
a frase transversal tem três linhas no mobile e o ícone centralizado
flutuava no meio do parágrafo. */
margin-top: 2px;
color: var(--sgsi-color-brand);
}
.sgsi-aviso-cadastro__corpo[b-ieno3dinwj] {
/* `min-width: 0` deixa o texto quebrar dentro do flex — sem ele o item flex
assume a largura do conteúdo e a frase longa estoura o diálogo. */
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--sgsi-space-2);
}
.sgsi-aviso-cadastro__frase[b-ieno3dinwj],
.sgsi-aviso-cadastro__nota[b-ieno3dinwj] {
margin: 0;
font-size: var(--sgsi-font-size-sm);
line-height: var(--sgsi-line-height);
color: var(--sgsi-color-text-muted);
}
.sgsi-aviso-cadastro__normas[b-ieno3dinwj] {
display: flex;
flex-wrap: wrap;
gap: var(--sgsi-space-1);
}
/* /Components/Ui/SgsiNormasQueServem.razor.rz.scp.css */
/* ===========================================================================
SGI PRO — Ui/SgsiNormasQueServem (CSS isolado por componente)
POR QUE O WRAP EXISTE. Num tenant multi-norma a resposta é mais de um selo na
mesma célula: um KPI de privacidade serve à LGPD E à ISO/IEC 27701 quando as
duas estão ativas. Sem o wrap, dois rótulos longos alargam a coluna e empurram
a grade inteira para a rolagem horizontal — que numa tela-índice é o pior
desfecho possível.
POR QUE ELE MORA AQUI E NÃO EM TRÊS ARQUIVOS. Em 30/08 esta mesma regra de
quatro linhas existia três vezes — .sgsi-ind-normas, .sgsi-comp-normas e
.sgsi-com-normas —, com nomes diferentes de propósito: o CSS isolado do Blazor
carimba um atributo de escopo POR COMPONENTE, então reaproveitar o nome de
outro .razor.css não reaproveita a regra. Com o markup num componente só, o
escopo passa a ser um só e a duplicação some pela raiz, em vez de ser
contornada por convenção de nome.
=========================================================================== */
/* O BLOCO — ele FALTAVA, e a catraca de CSS pegou (31/08). O markup usa
.sgsi-normas-servem como invólucro desde que o componente nasceu, e este arquivo
só definia os três modificadores: o wrapper renderizava sem regra nenhuma.
Nada acusava — nem o compilador, nem o analyzer, nem o navegador —, e é
exatamente o buraco que `Nenhuma_classe_sgsi_usada_no_razor_fica_sem_regra_css`
existe para fechar.
`display: contents` é a regra CERTA, e não um `display: block` de fachada: o
invólucro precisa existir no DOM (é ele que carrega o atributo de escopo do CSS
isolado, sem o qual os modificadores abaixo não casam), mas NÃO pode criar uma
caixa própria. Numa célula de grade ou dentro de um , uma caixa a mais
quebraria o alinhamento que os três modificadores foram escritos para manter. */
.sgsi-normas-servem[b-u9tmqhutn2] {
display: contents;
}
.sgsi-normas-servem__selos[b-u9tmqhutn2] {
display: flex;
flex-wrap: wrap;
gap: var(--sgsi-space-1);
}
/* A frase da FICHA (ComExplicacao). Tom secundário e sem margem inferior: ela
fecha um e a margem do parágrafo abriria um buraco dentro da lista de
definição, desalinhando a linha seguinte. */
.sgsi-normas-servem__nota[b-u9tmqhutn2] {
margin-top: var(--sgsi-space-1);
margin-bottom: 0;
color: var(--sgsi-color-text-muted);
font-size: var(--sgsi-font-size-sm);
}
/* "Há assunto, mas nenhuma norma ativa o trata" — mesmo tom da nota, porque é
informação de contexto e não um estado de erro. É o mesmo par de tokens da
.sgsi-kv__sub global que as três grades usavam aqui antes de 31/08. */
.sgsi-normas-servem__vazio[b-u9tmqhutn2] {
color: var(--sgsi-color-text-muted);
font-size: var(--sgsi-font-size-sm);
}
/* /Components/Ui/SgsiPagina.razor.rz.scp.css */
/* ============================================================================
SGI PRO — Ui/SgsiPagina (CSS ISOLADO)
O GRUPO ROTULADO NÃO EXISTE MAIS QUANDO ESTÁ VAZIO (30/08).
O SgsiPagina decide pela EXISTÊNCIA do fragmento `Acoes`, não pelo que ele
renderiza — e não há como saber, do lado do servidor, se um RenderFragment
vai produzir algum nó. Nas 71 chamadas em que o corpo inteiro de é um
único `@if (podeEscrever)` / `@if (PodeEditar && ...)`, o papel somente-leitura
(auditor externo é o caso central, e ele é justamente quem mais depende de
navegação por regiões) recebia um `role="group"` com `aria-label="Ações da
página"` e NENHUM controle dentro: o leitor de tela anunciava um grupo de ações
e entregava um grupo vazio.
`display: none` é o que remove o elemento da árvore de acessibilidade — não
basta ele não ter tamanho. Como o container é `display: flex` com `gap`, isto
também tira o espaço morto que ele deixava no cabeçalho.
POR QUE `:empty` FUNCIONA AQUI: o compilador Razor descarta os nós de texto
feitos só de espaço em branco dentro de componentes (não há @preservewhitespace
em lugar nenhum deste projeto), então o `@if` falso não deixa nem um nó de
texto para trás — a fica literalmente sem filhos. E o pior caso é
inofensivo: se algum nó sobrasse, a regra simplesmente não casaria e o
comportamento voltaria a ser o de hoje, sem nada quebrar.
POR QUE CSS ISOLADO E NÃO O sgsi-componentes.css: a é emitida por ESTE
componente, então ela carrega o atributo de escopo e a regra não pode alcançar
as outras seis telas que reaproveitam a classe `sgsi-pagina__acoes` à mão em
contextos onde o vazio pode ter outro significado.
============================================================================ */
.sgsi-pagina__acoes:empty[b-aeh6mmt6m4] {
display: none;
}
/* /Components/Ui/SgsiSeloReusoTransversal.razor.rz.scp.css */
/* ===========================================================================
SGI PRO — Ui/SgsiSeloReusoTransversal (CSS ISOLADO)
A faixa fina que diz ao consultor que aquele registro já vale para várias
normas dele. Ela mora entre o cabeçalho da página e o conteúdo, e o desenho
tem uma regra só: NÃO COMPETIR COM O CONTEÚDO. É informação de contexto, não
alerta — por isso texto pequeno, cor de texto secundária e fundo `bg-subtle`
em vez do amarelo/vermelho dos avisos, que treinariam o olho a ignorá-la
junto com os alertas reais da tela (a /riscos já tem o cartão de revisão de
classificação de dado logo abaixo, e ele PRECISA ganhar essa disputa).
A borda esquerda na cor da marca é o único acento: é o mesmo recurso que o
olho já usa para separar "nota sobre a tela" de "linha de dados" nas telas do
produto, e sobrevive ao print em preto e branco porque é POSIÇÃO, não cor.
O `flex-wrap` da lista de selos não é zelo: o tenant de cinco normas rende
cinco rótulos "ISO/IEC 27001:2022" na mesma linha, e sem quebra eles empurram
a página para a rolagem horizontal — que num cabeçalho é o pior desfecho.
=========================================================================== */
.sgsi-selo-reuso[b-kr7jidwame] {
display: flex;
align-items: flex-start;
gap: var(--sgsi-space-2);
margin-bottom: var(--sgsi-space-4);
padding: var(--sgsi-space-3);
border-radius: var(--sgsi-radius-md);
border-left: 3px solid var(--sgsi-color-brand);
background: var(--sgsi-color-bg-subtle);
}
.sgsi-selo-reuso__icone[b-kr7jidwame] {
display: inline-flex;
flex: 0 0 auto;
/* Alinha o glifo com a PRIMEIRA linha do texto, e não com o bloco inteiro:
com a frase de norma única (três linhas no mobile) o ícone centralizado
flutuava no meio do parágrafo. */
margin-top: 1px;
color: var(--sgsi-color-brand);
}
.sgsi-selo-reuso__corpo[b-kr7jidwame] {
/* `min-width: 0` deixa o texto quebrar dentro do flex — sem ele o item flex
assume a largura do conteúdo e a frase longa estoura o container. */
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--sgsi-space-2);
}
.sgsi-selo-reuso__frase[b-kr7jidwame] {
margin: 0;
font-size: var(--sgsi-font-size-sm);
line-height: var(--sgsi-line-height);
color: var(--sgsi-color-text-muted);
}
.sgsi-selo-reuso__normas[b-kr7jidwame] {
display: flex;
flex-wrap: wrap;
gap: var(--sgsi-space-1);
}
|