/* AJNexo — Administração Judicial conectada Identidade visual (F36, sobre a base da F24). Carrega DEPOIS do Bootstrap e não o modifica: atualizar o Bootstrap continua sendo trocar um arquivo. */ /* A paleta é ERGONÔMICA antes de ser decorativa. Quem usa este sistema audita tabelas de milhares de credores por horas seguidas, e o manual da marca é explícito: branco puro (#FFFFFF) em fundo de tela extenso combinado com preto absoluto (#000000) no texto satura os fotorreceptores da retina e força acomodação ciliar constante — é fadiga ocular, dor de cabeça e perda temporária de acuidade. Daí o fundo levemente dessaturado, os cartões brancos POR CIMA dele (que é o que cria profundidade) e o texto em grafite, nunca preto. F36 — A REGRA QUE GOVERNA ESTA PALETA, e ela nasceu de uma medição. O manual da marca exige contraste **WCAG AA** (4,5:1 para texto normal) e, ao mesmo tempo, especifica cores que NÃO alcançam isso quando usadas em texto. Medido contra o off-white que ele próprio define: Teal Nexo #02AB9A 2,75 branco sobre teal 2,88 Alerta #B7791F 3,47 Sucesso #2E8B57 4,05 Erro #C94A4A 4,39 Não é defeito do manual: é a tensão normal entre uma paleta pensada para MARCA e uma paleta que precisa ser LIDA oito horas por dia. E o próprio manual aponta a saída — "o teal é uma cor de destaque; o azul profundo sustenta a identidade institucional". Então: **a cor da marca fica onde ela APARECE** (preenchimento, ícone, borda, seleção, foco). **Onde ela carrega PALAVRA, entra a variante `-forte`** — mesmo matiz, mesma saturação, luminosidade baixada até passar. Nos estados a diferença é de 2 % a 14 % e o olho não percebe; no teal ela é real, e é por isso que o teal de marca NUNCA é cor de texto. Cada `-forte` foi calculada para satisfazer as TRÊS condições ao mesmo tempo: texto sobre o canvas, texto sobre o cartão branco, e branco por cima dela. Há teste que recalcula tudo isto e reprova a folha se alguém trocar um valor sem refazer a conta (`tests/test_f36_a.py`). Isto não é prática nova: a F24 já tinha chegado à mesma conclusão para o verde do selo preenchido, só que com a cor escrita à mão no meio das regras. A F36 promove aquilo a token — e, de passagem, conserta duas reprovações que existiam: o âmbar como texto dava 3,04 e o verde 3,60. */ :root { /* ---- Superfícies */ --ajnexo-canvas: #F7FAFC; /* off-white do manual — fundo de tela */ --ajnexo-superficie: #FFFFFF; /* cartões e tabelas, POR CIMA do fundo */ --ajnexo-borda: #D8E1E8; /* divisórias e tabelas — estrutura leve */ /* ---- Texto */ --ajnexo-texto: #1F2937; /* 14,00:1 — leitura, nunca preto */ --ajnexo-texto-secundario: #6B7280; /* 4,61:1 — metadados e apoio */ /* ---- Marca */ --ajnexo-azul: #012852; /* Azul AJ — institucional, ação primária */ --ajnexo-azul-escuro: #013770; /* o hover CLAREIA: o azul já é profundo */ --ajnexo-slate: #49617B; /* assinatura e texto de terceiro nível */ /* O mesmo azul em componentes, para que `rgba()` também venha da paleta: cor escrita como `rgba(30, 64, 175, …)` sobreviveu a uma troca de marca inteira porque a varredura só procurava `#hex`. */ --ajnexo-azul-rgb: 1, 40, 82; /* O teal é a cor de CONEXÃO: seleção, foco e estado ativo. O manual pede que ele não vire preenchimento massivo nem cor universal de botão, e a medição acrescenta a razão dura: como texto ele dá 2,75:1. */ --ajnexo-teal: #02AB9A; /* Teal Nexo — NUNCA texto */ --ajnexo-teal-forte: #028174; /* 4,56:1 — quando o teal precisa ser lido */ /* ---- Estados. Sóbrios de propósito: cor saturada em tela de alta densidade vira poluição visual e para de comunicar. */ --ajnexo-verde: #2E8B57; /* habilitado / deferido */ --ajnexo-verde-forte: #2B8251; /* 4,54:1 */ --ajnexo-ambar: #B7791F; /* divergência / pendente */ --ajnexo-ambar-forte: #9D681B; /* 4,52:1 */ --ajnexo-vermelho: #C94A4A; /* impugnado / rejeitado / prazo */ --ajnexo-vermelho-forte: #C84747; /* 4,50:1 */ --ajnexo-info: #2F6FA3; /* 5,11:1 — mensagem neutra */ /* Compatibilidade com o nome antigo destas duas (usadas na F24 inicial) */ --ajnexo-grafite: var(--ajnexo-texto-secundario); --ajnexo-grafite-escuro: var(--ajnexo-texto); /* Bootstrap 5 lê estas variáveis para links, foco e botões */ --bs-primary: var(--ajnexo-azul); --bs-primary-rgb: 1, 40, 82; --bs-success: var(--ajnexo-verde); --bs-success-rgb: 46, 139, 87; --bs-warning: var(--ajnexo-ambar); --bs-warning-rgb: 183, 121, 31; --bs-danger: var(--ajnexo-vermelho); --bs-danger-rgb: 201, 74, 74; --bs-link-color: var(--ajnexo-azul); --bs-link-hover-color: var(--ajnexo-azul-escuro); --bs-body-color: var(--ajnexo-texto); --bs-body-bg: var(--ajnexo-canvas); --bs-border-color: var(--ajnexo-borda); --bs-secondary-color: var(--ajnexo-texto-secundario); --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1.5 a 1.6 para leitura contínua de peça jurídica longa sem salto de linha */ --bs-body-line-height: 1.55; } /* O `bg-light` do Bootstrap é #f8f9fa (cinza neutro); a marca pede #F7FAFC (cinza AZULADO). A diferença é de dois pontos em cada canal e mesmo assim importa: o azulado combina com o cobalto da marca em vez de brigar com ele. */ body, body.bg-light { background-color: var(--ajnexo-canvas) !important; } .card, .table, .list-group-item { background-color: var(--ajnexo-superficie); } /* A fonte Inter é declarada em /static/fontes/inter.css, incluído pelo base.html SOMENTE quando o arquivo .woff2 está presente. Sem essa condição, o navegador pediria a fonte e levaria 404 a cada tela, em cada uma das dez máquinas do escritório. Sem a Inter, a pilha abaixo assume — no Windows é a Segoe UI, que tem métricas próximas e não desalinha nada. */ body { font-family: var(--bs-font-sans-serif); } /* ------------------------------------------------- componentes do Bootstrap O Bootstrap 5.3 NÃO deriva os botões de `--bs-primary`: cada variante fixa a própria `--bs-btn-bg` (#0d6efd). Sobrescrever só a paleta global deixaria o botão "Entrar" azul-Bootstrap ao lado de um logotipo azul-cobalto — dois azuis brigando na mesma tela. Por isso as variantes são redeclaradas aqui, uma a uma, sem tocar no arquivo do Bootstrap. */ .btn-primary { --bs-btn-bg: var(--ajnexo-azul); --bs-btn-border-color: var(--ajnexo-azul); --bs-btn-hover-bg: var(--ajnexo-azul-escuro); --bs-btn-hover-border-color: var(--ajnexo-azul-escuro); --bs-btn-active-bg: var(--ajnexo-azul-escuro); --bs-btn-active-border-color: var(--ajnexo-azul-escuro); --bs-btn-disabled-bg: var(--ajnexo-azul); --bs-btn-disabled-border-color: var(--ajnexo-azul); } .btn-outline-primary { --bs-btn-color: var(--ajnexo-azul); --bs-btn-border-color: var(--ajnexo-azul); --bs-btn-hover-bg: var(--ajnexo-azul); --bs-btn-hover-border-color: var(--ajnexo-azul); --bs-btn-active-bg: var(--ajnexo-azul); --bs-btn-active-border-color: var(--ajnexo-azul); --bs-btn-disabled-color: var(--ajnexo-azul); --bs-btn-disabled-border-color: var(--ajnexo-azul); } .btn-success { --bs-btn-bg: var(--ajnexo-verde); --bs-btn-border-color: var(--ajnexo-verde); --bs-btn-hover-bg: var(--ajnexo-verde-forte); --bs-btn-hover-border-color: var(--ajnexo-verde-forte); --bs-btn-active-bg: var(--ajnexo-verde-forte); --bs-btn-active-border-color: var(--ajnexo-verde-forte); --bs-btn-disabled-bg: var(--ajnexo-verde); --bs-btn-disabled-border-color: var(--ajnexo-verde); } .btn-outline-success { --bs-btn-color: var(--ajnexo-verde); --bs-btn-border-color: var(--ajnexo-verde); --bs-btn-hover-bg: var(--ajnexo-verde); --bs-btn-hover-border-color: var(--ajnexo-verde); --bs-btn-active-bg: var(--ajnexo-verde); --bs-btn-active-border-color: var(--ajnexo-verde); } .text-primary { color: var(--ajnexo-azul) !important; } .text-success { color: var(--ajnexo-verde) !important; } .bg-primary, .text-bg-primary { background-color: var(--ajnexo-azul) !important; } .bg-success, .text-bg-success { background-color: var(--ajnexo-verde) !important; } .border-primary { border-color: var(--ajnexo-azul) !important; } a { color: var(--ajnexo-azul); } a:hover, a:focus { color: var(--ajnexo-azul-escuro); } .link-primary { color: var(--ajnexo-azul) !important; } /* O anel de foco acompanha a marca — é o que o usuário vê ao percorrer o formulário pelo teclado, lançando dezenas de créditos seguidos. */ /* F36 — o anel de foco é TEAL e é SÓLIDO, e as duas coisas foram medidas. Teal porque é o que o manual reserva para "seleção, foco e estado ativo". Sólido porque nenhum anel translúcido alcança os 3:1 que a WCAG pede de um indicador não-textual: medido sobre branco, o teal a 25 % de opacidade dá 1,30:1 e a 55 % dá 1,80 — e mesmo o azul profundo só chega a 3,61 com 55 %, quando já deixou de ser translúcido para efeito prático. O teal forte sólido dá 4,78:1. Indicador de foco existe para ser óbvio. */ .form-control:focus, .form-select:focus, .btn:focus-visible { border-color: var(--ajnexo-teal-forte); box-shadow: 0 0 0 .2rem var(--ajnexo-teal-forte); } .form-check-input:checked { background-color: var(--ajnexo-azul); border-color: var(--ajnexo-azul); } .progress-bar { background-color: var(--ajnexo-azul); } .nav-tabs .nav-link.active { color: var(--ajnexo-azul); } .nav-pills .nav-link.active { background-color: var(--ajnexo-azul); } .page-item.active .page-link { background-color: var(--ajnexo-azul); border-color: var(--ajnexo-azul); } .page-link { color: var(--ajnexo-azul); } /* ---------------------------------------------------------------- marca */ .ajnexo-marca { display: inline-flex; align-items: center; gap: .5rem; } /* 32 px é o que o manual chama de ideal para o símbolo isolado (o mínimo é 24). Abaixo disso os nós da rede começam a fundir-se num borrão. */ .ajnexo-marca img { height: 32px; width: auto; } /* Fallback em texto: enquanto o PNG não estiver em /static/marca/, o cabeçalho mostra o nome com a tipografia e as cores da marca. */ .ajnexo-nome { font-weight: 700; letter-spacing: -.01em; } /* O nome ao lado do símbolo é texto de INTERFACE, numa cor só. A versão anterior o pintava em dois tons, imitando a construção do wordmark — o manual da AJNexo proíbe reescrever o wordmark com outra fonte, e duas cores em Inter é exatamente isso. */ .ajnexo-nome { color: var(--ajnexo-azul); } .ajnexo-tagline { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ajnexo-grafite); } /* A barra superior é branca com a marca original; o azul institucional fica nos elementos de ação, onde carrega significado. */ .navbar.ajnexo-barra { background: #FFFFFF; border-bottom: 3px solid var(--ajnexo-azul); } .navbar.ajnexo-barra .nav-link { color: var(--ajnexo-grafite-escuro); } .navbar.ajnexo-barra .nav-link:hover, .navbar.ajnexo-barra .nav-link:focus { color: var(--ajnexo-azul); } /* `.ajnexo-usuario` é o botão que abre o menu do usuário (F23.8). Substituiu o `navbar-text` de antes; as regras abaixo o seguiram, senão a proteção de largura descrita adiante teria ficado apontando para um elemento que não existe mais em template algum. */ .navbar.ajnexo-barra .ajnexo-usuario { color: var(--ajnexo-texto-secundario); } .navbar.ajnexo-barra .ajnexo-usuario:hover, .navbar.ajnexo-barra .ajnexo-usuario:focus { color: var(--ajnexo-azul); } /* `navbar-expand` mantém tudo em linha, mas em janela estreita (a metade de tela de quem trabalha ao lado do PJe, com um nome de usuário longo) a linha estourava e empurrava o botão "Sair" para FORA da área visível. Deixar quebrar é melhor do que perder o botão: a barra cresce uma linha e nada some. O nome do usuário encolhe primeiro, com reticências, porque é a informação mais dispensável ali — quem está logado, sabe quem é. */ .navbar.ajnexo-barra > .container-fluid { flex-wrap: wrap; row-gap: .35rem; } .navbar.ajnexo-barra .ajnexo-usuario { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navbar.ajnexo-barra form[action="/logout"] { flex: none; } /* A busca global (F23.7) entrou na MESMA linha. Ela encolhe conforme a janela aperta, mas nunca abaixo do que cabe um número de processo abreviado; e nunca empurra o "Sair" para fora — a barra quebra antes. */ .navbar.ajnexo-barra .ajnexo-busca { flex: 0 1 22rem; min-width: 11rem; } /* A marca do login é o único elemento do cartão que não é campo de formulário: fica CENTRADA. `.ajnexo-marca` é inline-flex (para alinhar imagem e texto lado a lado no cabeçalho); aqui ela vira flex de bloco, e o `justify-content` passa a centrar de verdade dentro do cartão. */ .ajnexo-login-marca { display: flex; justify-content: center; } /* Medida pela LARGURA, e não pela altura: o manual fixa 300 px como mínimo da marca COM assinatura, e altura fixa numa proporção de 3,04:1 deixaria a assinatura abaixo do legível. 320 px respeita o mínimo com folga. O `100%` não é descuido: a primeira versão usava `80%`, e o cartão de entrar tem 322 px — a marca saía com 258 px na tela, abaixo do mínimo que este mesmo comentário invoca. Quem apanhou foi olhar a tela, não o teste. Num telefone estreito o cartão encolhe junto e a marca chega perto do piso; abaixo dele o manual manda tirar a assinatura antes de reduzir mais, e o caminho é o símbolo, como no cabeçalho. */ .ajnexo-login-marca img { width: min(320px, 100%); height: auto; } /* ------------------------------------------- tabelas de alta densidade É a tela onde o escritório passa o dia: a relação de credores, o painel por classe, o extrato. Tudo aqui é ergonomia medida, não gosto. */ /* PRETO PURO NAS CÉLULAS — o defeito que o manual da marca nomeia. O Bootstrap 5.3 não deriva a cor da tabela de `--bs-body-color`: `.table` fixa `--bs-table-color: var(--bs-emphasis-color)`, que em tema claro é #000. Ou seja, justamente na tela de milhares de linhas — onde a fadiga se acumula — o texto saía em preto absoluto sobre branco puro. */ .table { --bs-table-color: var(--ajnexo-texto); --bs-table-bg: var(--ajnexo-superficie); --bs-table-hover-color: var(--ajnexo-texto); /* Hover sutil: guia o olho no rastreamento horizontal de uma linha larga, sem piscar a tela a cada movimento do mouse. */ --bs-table-hover-bg: rgba(var(--ajnexo-azul-rgb), .05); --bs-table-striped-color: var(--ajnexo-texto); /* Respiro de 12px ENTRE colunas (6px de cada lado das células vizinhas) — o mínimo que o manual pede para leitura de matriz de credores. Convive com `table-sm`, que sozinho deixava 4px. */ --bs-table-cell-padding-x: .375rem; --bs-table-cell-padding-y: .4rem; font-size: .8125rem; /* 13px, Regular 400 */ } .table > :not(caption) > * > * { padding-right: var(--bs-table-cell-padding-x); padding-left: var(--bs-table-cell-padding-x); padding-top: var(--bs-table-cell-padding-y); padding-bottom: var(--bs-table-cell-padding-y); } /* Cabeçalho de coluna: menor, em caixa alta e com letra espaçada. O objetivo é ser IDENTIFICADO num relance e depois sumir — quem lê a tabela lê os dados, não os títulos. */ .table > thead > tr > th { font-size: .6875rem; /* 11px */ font-weight: 500; /* Medium */ text-transform: uppercase; letter-spacing: .5px; color: var(--ajnexo-texto-secundario); vertical-align: bottom; } /* O cabeçalho das seções coloridas (table-light etc.) mantém o próprio fundo, mas nunca volta ao preto. */ .table > thead > tr > th.text-end { text-align: right; } /* -------------------------------------------------- colunas de dinheiro */ /* Dígitos de largura fixa: sem isto o "1" ocupa menos espaço que o "8", as vírgulas não alinham na vertical e comparar milhar com milhão numa relação de 300 credores vira trabalho de contar casa com o dedo. */ .text-end, td.text-end, th.text-end, .font-monospace, .ajnexo-numerico { font-variant-numeric: tabular-nums; } table { font-variant-numeric: tabular-nums; } /* Os valores EMPILHADOS fora de tabela — as listas de definição das fichas, do parecer, do conflito e do painel — são justamente onde se compara um número com o de cima; sem largura fixa de dígito, a vírgula dança de linha para linha. Em texto sem dígito a regra não tem efeito algum. (F23.4) */ dd { font-variant-numeric: tabular-nums; } /* --------------------------------------------------- status do crédito */ /* A cor do TEXTO de cada selo foi medida, não escolhida. Selo é texto pequeno, e o piso da WCAG para texto pequeno é 4,5:1 — abaixo disso o analista tem de forçar a vista justamente no elemento que existe para ser lido de relance. Refeita na F36 com a paleta AJNexo, e o resultado mudou: · âmbar #B7791F + branco = 3,64 ✗ + grafite = 4,03 ✗ (NENHUM passa) · vermelho #C94A4A + branco = 4,60 ✓ + grafite = 3,19 ✗ · verde #2E8B57 + branco = 4,25 ✗ · teal #02AB9A + grafite = 5,10 ✓ · azul AJ #012852 + branco = 14,72 ✓ O âmbar do manual é o caso novo: **não comporta texto legível por cima de si, nem claro nem escuro**. Antes só o verde tinha esse problema. Os dois resolvem pelo mesmo caminho — o selo PREENCHIDO usa a variante `-forte`, meio passo de tom na mesma família, que passa com branco por cima (âmbar 4,74; verde 4,76). A cor da marca continua sendo a do estado na tela: em ícone, borda e texto sobre o branco do cartão. Inventar outra cor seria sair da marca; escurecer meio tom, não. */ .text-bg-warning { background-color: var(--ajnexo-ambar-forte) !important; color: #fff !important; } /* F36 — o `.text-bg-light` do Bootstrap fixa `color: #000` e fundo #f8f9fa, e a folha nunca o sobrescreveu: o crachá do perfil e os selos neutros saíam em PRETO ABSOLUTO, que é exatamente o que a primeira nota desta folha diz para não fazer. Não é defeito da marca nova — vinha de antes, e só apareceu quando se foi olhar a tela renderizada em vez do arquivo. O teste que existia conferia se a folha DECLARAVA as variáveis certas, e uma classe que nunca foi tocada não aparece numa conferência assim. */ .text-bg-light { background-color: var(--ajnexo-canvas) !important; color: var(--ajnexo-texto) !important; } .text-bg-danger { background-color: var(--ajnexo-vermelho) !important; color: #fff !important; } .text-bg-success { background-color: var(--ajnexo-verde-forte) !important; color: #fff !important; } .badge.text-bg-warning { font-weight: 600; } .text-warning { color: var(--ajnexo-ambar-forte) !important; } .text-danger { color: var(--ajnexo-vermelho-forte) !important; } .btn-warning { --bs-btn-bg: var(--ajnexo-ambar); --bs-btn-border-color: var(--ajnexo-ambar); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--ajnexo-ambar-forte); --bs-btn-hover-border-color: var(--ajnexo-ambar-forte); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ajnexo-ambar-forte); --bs-btn-active-border-color: var(--ajnexo-ambar-forte); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--ajnexo-ambar); --bs-btn-disabled-border-color: var(--ajnexo-ambar); --bs-btn-disabled-color: #fff; } .btn-danger { --bs-btn-bg: var(--ajnexo-vermelho); --bs-btn-border-color: var(--ajnexo-vermelho); --bs-btn-hover-bg: var(--ajnexo-vermelho-forte); --bs-btn-hover-border-color: var(--ajnexo-vermelho-forte); --bs-btn-active-bg: var(--ajnexo-vermelho-forte); --bs-btn-active-border-color: var(--ajnexo-vermelho-forte); --bs-btn-disabled-bg: var(--ajnexo-vermelho); --bs-btn-disabled-border-color: var(--ajnexo-vermelho); } .btn-outline-danger { --bs-btn-color: var(--ajnexo-vermelho); --bs-btn-border-color: var(--ajnexo-vermelho); --bs-btn-hover-bg: var(--ajnexo-vermelho); --bs-btn-hover-border-color: var(--ajnexo-vermelho); --bs-btn-active-bg: var(--ajnexo-vermelho); --bs-btn-active-border-color: var(--ajnexo-vermelho); } /* Rótulos e textos de apoio no cinza médio: reduzem a própria relevância visual para que o olho vá primeiro ao dado. */ .text-muted, .form-text, small.text-muted { color: var(--ajnexo-texto-secundario) !important; } /* ------------------------------- cabeçalho e primeira coluna congelados */ /* O manual da AJNexo pede, para o "coração operacional" do produto: "congelar cabeçalho e primeira coluna em relações de credores extensas". A razão é a mesma que justifica todo o resto desta folha — jornada longa: numa relação de trezentos créditos, rolar trinta linhas já apaga da tela qual coluna é qual e de quem é a linha, e o analista volta ao topo para conferir. Feito só com CSS, sem uma linha de JavaScript: a regra da casa é que a tela funcione sem ele, e cabeçalho que só gruda com script é cabeçalho que solta justamente na máquina em que o script não carregou. `position: sticky` precisa de um fundo OPACO: sem ele o conteúdo que passa por baixo aparece através da célula. Daí o `background` explícito, e daí também ele vir da paleta em vez de branco literal. */ .tabela-fixa thead th { position: sticky; top: 0; z-index: 2; background-color: var(--ajnexo-canvas); } /* A primeira coluna é a que identifica a linha — o credor, na relação. Ela gruda à esquerda quando a tabela rola na horizontal, que é o que acontece assim que a relação tem mais colunas do que a tela comporta. */ .tabela-fixa tbody td:first-child, .tabela-fixa tfoot td:first-child { position: sticky; left: 0; z-index: 1; background-color: var(--ajnexo-superficie); } /* O canto onde as duas travas se cruzam precisa ficar por cima das duas. */ .tabela-fixa thead th:first-child { z-index: 3; } /* Sem isto o `sticky` do cabeçalho não tem contra o que grudar: o `.table-responsive` do Bootstrap cria o contexto de rolagem horizontal, e a altura máxima é o que dá ao vertical um lugar onde parar. O `80vh` deixa o filtro e o resumo visíveis acima da tabela em tela de notebook. */ .tabela-fixa-caixa { max-height: 80vh; overflow: auto; } /* A linha que separa o cabeçalho do corpo precisa acompanhar o `sticky`: a borda de célula rola junto com a célula e some. */ .tabela-fixa thead th { box-shadow: inset 0 -1px 0 var(--ajnexo-borda); } /* A coluna congelada tem fundo OPACO por necessidade (senão o conteúdo passa por baixo dela), e isso a deixava de fora do realce de linha — justamente na coluna que identifica a linha, que é o que o olho segue. Repor o realce nela é o que faz o congelamento não custar nada. O realce vai como CAMADA por cima, e não como cor: trocar o `background-color` o tornaria translúcido, e o conteúdo voltaria a passar por baixo da coluna ao rolar na horizontal — que é justamente o problema que o fundo opaco existe para resolver. */ .tabela-fixa.table-hover tbody tr:hover td:first-child { background-image: linear-gradient(rgba(var(--ajnexo-azul-rgb), .05), rgba(var(--ajnexo-azul-rgb), .05)); } /* ============================================================ F37 — a CSP * * Duas famílias de regra que chegaram junto com a política de conteúdo * (`Content-Security-Policy`). Nenhuma delas muda o desenho de coisa nenhuma: * as duas apenas trazem para cá aparência que estava escrita em outro lugar. */ /* O ponteiro de "isto se clica" nos `` que abrem e fecham um bloco. * * Estava escrito trinta vezes como `style="cursor:pointer"` — trinta cópias da * MESMA string, mais da metade de todos os `style=` do repositório. Uma classe * mata a repetição e, de quebra, encurta o caminho para o dia em que * `style-src` deixar de aceitar `'unsafe-inline'`: o que sobra passa a ser * dezesseis valores de largura de coluna, e não quarenta e seis ocorrências. */ .ajnexo-clicavel { cursor: pointer; } /* As três regras do indicador do HTMX, palavra por palavra como ele as injeta. * * O HTMX 2.0.4 acrescenta um `