/* ============================================================================= Ajustes ao tema Metronic 7 — correções que valem em TODA tela ============================================================================= Este arquivo conserta comportamento do TEMA. Não é lugar de estilo de módulo: identidade visual de uma tela vive em `syspesca/.css` (DESIGN.md §25). Regra para crescer daqui: só entra o que (a) vem do tema, (b) aparece em mais de uma tela, e (c) já foi contornado à mão em algum lugar — o contorno repetido é a evidência de que o conserto pertence aqui. Carregado por `templates/layout/default.php`, junto do `style.bundle.css` e ANTES de qualquer CSS de módulo — então um módulo ainda pode sobrepor o que precisar, de propósito. ========================================================================== */ /* ── `secondary` do tema é cor de FUNDO, não de TEXTO ──────────────────────── O Metronic entrega as variantes `light-secondary` com `color: #E4E6EF` sobre `background: #EBEDF3`. São dois cinzas quase idênticos: contraste **1,06:1** e nenhuma diferença de matiz. O mínimo do WCAG para texto normal é 4,5:1. Na prática o rótulo some — e, num botão só-ícone, o botão inteiro some. Atingidos, medidos no navegador: · `.label.label-light-secondary` — o "Não configurado" das integrações da entidade, o "Expirado"/"Inativo" do mural de avisos, as situações que caem em `secondary` nas consultas gov; · `.btn.btn-light-secondary` — "Cancelar"/"Descartar" ilegíveis (`Associados/index.php`, `Entidades/whatsapp_pendencias.php`) e, pior, o botão SÓ-ÍCONE de excluir em `Reap/socio.php` e `Eventos/add.php`, que fica invisível: um botão destrutivo que ninguém enxerga. ── Por que a correção estava no lugar errado ── Ela JÁ EXISTIA, completa, em `syspesca/reap.css` — mas um CSS de módulo só carrega nas 13 telas do REAP. Era literalmente por isso que o MESMO selo era legível no REAP e invisível em `/entidades/view`. A regra foi movida para cá e removida de lá; `#5E6278` é o valor que já rodava em produção, mantido de propósito para não mexer no que já estava certo. Contraste: 6,4:1. Os `text-dark` acrescentados à mão em `Recadastramentos/add.php`, `Reap/obrigatoriedade.php` e `Reap/view.php` continuam válidos — viraram redundantes, não conflitantes. Não acrescente `text-dark` em rótulo novo. */ .label.label-light-secondary, .label.label-light-secondary i, .btn.btn-light-secondary, .btn.btn-light-secondary i { color: #5E6278; } /* ── E o mesmo botão DESABILITADO, que a regra acima não alcançava ─────────── O tema declara `.btn.btn-light-secondary.disabled` / `:disabled` (0,3,0), que ganha da regra de cima (0,2,0) e devolve o `#E4E6EF` — com `opacity: .6` por cima. Ou seja: exatamente o caso em que a legibilidade importa MAIS, porque o botão desabilitado é o que precisa dizer, sozinho, "a ação existe e está bloqueada". Medido em `/reap-ciclos`: `color` #E4E6EF sobre `background` #EBEDF3, o mesmo 1,06:1 que este arquivo existe para consertar. Atinge todo botão só-ícone que fica desabilitado com explicação no `title` — a lixeira travada da exclusão de ciclo (`element/reap/excluir_ciclo.php`) e a do REAP do sócio (`Reap/socio.php`), que tinha o mesmo defeito. */ .btn.btn-light-secondary.disabled, .btn.btn-light-secondary.disabled i, .btn.btn-light-secondary:disabled, .btn.btn-light-secondary:disabled i { color: #5E6278; } /* ── Ícone dentro de contêiner colorido: por que NÃO tem conserto global ───── O tema tem uma regra NUA `i { font-size: 1.25rem; color: #B5B5C3 }` (`style.bundle.css`). Declaração direta no elemento vence HERANÇA sempre, não importa a especificidade do pai — então `color` no contêiner (e também `style="color:…"` no markup) NUNCA chega ao ``, e o ícone sai cinza em cima do fundo tonal que o contêiner pintou. Um `i { color: inherit }` amplo aqui seria pior que o defeito: passaria por cima dos utilitários do próprio tema (`text-warning`, `text-success`, `text-white`), que são declarados NO ícone de propósito e têm especificidade menor. Por isso o conserto é POR COMPONENTE, no CSS de cada módulo: .minha-caixa { background: #f0ecff; color: #7c5cfc; } .minha-caixa > i { color: inherit; } Exemplos vivos: `.nv-topbar i` etc. em `syspesca/navegacao.css`, `.ent-ic`/`.ent-brand` em `syspesca/entidades-config.css`, `.ac-mi`/`.ac-badge` em `syspesca/academy.css`, `.robo-page .ic i` em `syspesca/robo.css`. A receita completa está em `.claude/METRONIC_COMPONENTS.md` §2 e no `DESIGN.md` §16. Fica registrado aqui para quem procurar o sintoma ("os ícones estão todos cinzas") neste arquivo primeiro. */ /* ── O tema não tem `object-fit`: toda foto de pessoa sai achatada ─────────── `grep -c object-fit style.bundle.css` = **0**, e `.symbol.symbol-NN > img` fixa largura E altura (`.symbol-35 > img` → 35×35). Foto de associado é retrato 3:4 (medido: 220×240), então dentro de um `symbol` quadrado ela esmaga o rosto. Já foi contornado à mão em TRÊS lugares antes de virar regra aqui — que é exatamente o critério de crescimento deste arquivo: · `templates/Recadastramentos/view_submissao.php` — `style="…object-fit:cover"` inline; · `.nv-res .nv-ri .nv-retrato` em `syspesca/navegacao.css:860`; · `.cb-tabela .cb-foto` em `syspesca/cobrancas.css` (o primeiro corte desta mesma entrega, movido para cá quando a segunda tela precisou do mesmo). É OPT-IN: só vale onde a classe é escrita, nunca em todo `.symbol > img` — há avatar no tema que depende do comportamento original. ── Por que ABSOLUTA, e não no lugar do `.symbol-label` ───────────────────── O `.symbol-label` com as iniciais fica SEMPRE no markup e a foto entra por cima (`.symbol` já é `position: relative` no tema). É isso que permite a quem usa a classe escrever `onerror="this.remove()"` e cair nas iniciais quando o link da foto morre. O jeito antigo — `background-image` no próprio `.symbol-label` — não dispara `onerror`, não aceita `alt` e recebe a URL crua dentro de `style=`, que é quebra de contexto CSS que `h()` não fecha. */ .sys-symbol-foto { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }