/* ═══════════════════════════════════════════════════════════════════════ O MIOLO DAS TELAS DO PEOPLE COM AS MEDIDAS DO PERFORMANCE ═══════════════════════════════════════════════════════════════════════ Pedido (23 e 25/09/2026): *"o visual do people não está NADA coerente com o do performance... resolva"*. O menu e a barra já são os do ERP (`visual-erp-trilho.css`, GERADO). Aqui é o resto: escala, cabeçalho, botões, cartões, filtros, campos, tabelas e selos. 🔴 POR QUE ESTA FOLHA É ESCRITA À MÃO, E NÃO GERADA COMO A DO TRILHO. O ERP desenha essas peças em cima do Bootstrap 5.3 inteiro + sete folhas dele; o People não carrega Bootstrap (é Tailwind + `components.css`). Regra copiada sem a base de baixo não dá a mesma peça. Então cada valor aqui foi LIDO na peça equivalente do ERP (`getComputedStyle`) e a guarda `/opt/atle/scripts/visual/confere_pagina.mjs` compara os dois sistemas. ⚠️ Só vale com a chave do trilho do ERP (`#app.nv-trilho-erp`), como o resto da migração, até o usuário aprovar. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. ESCALA: raiz 14px e linha 1,45, como o ERP ───────────────────────── Medido: ERP `html` 14px, `body` 14px / 20,3px. O People estava em 16 / 24 — tudo 14% maior e mais espaçado, e é a primeira coisa que o olho percebe. */ html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) { font-size: 14px; } html[data-swgma-theme^="novo-"] body:has(#app.nv-trilho-erp) { font-size: 14px; line-height: 1.45; } /* ── TONS QUE O ERP MUDA POR MODO e que não são token dele: lidos na tela (claro × escuro) em 25/09/2026. ─────────────────────────────────────── */ html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) { --nv-rotulo-campo: #3C3C43; /* `.form-label.text-muted` */ --nv-acao-linha: #65656A; /* ação de ícone na tabela */ --nv-texto-campo: var(--sfe-text, #000); --nv-brilho-botao: rgba(255,255,255,.8); } html[data-swgma-theme^="novo-"][data-swgma-mode="dark"]:has(#app.nv-trilho-erp) { --nv-rotulo-campo: #B7B7BB; --nv-acao-linha: #B7B7BB; --nv-texto-campo: #E2E8F0; --nv-brilho-botao: rgba(255,255,255,.15); } /* Todas as regras abaixo moram sob `html:has(#app.nv-trilho-erp)`: · na RAIZ, e não dentro do `#app`, porque a janela sobreposta, o menu suspenso e o aviso nascem direto no `` — dentro do `#app` eles ficavam no visual antigo (achado na janela "Novo cargo"); · o `:has(#…)` pesa como id, e é isso (com `!important`) que vence as folhas do People, que desenham estas peças com `!important` e até 4 classes. */ /* ── 2. PÁGINA: letra do miolo 13,3 / 1,45 (ERP `#nv-pagina`) ──────────── */ html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-body { font-size: 13.3px !important; line-height: 1.45 !important; } /* ── 3. CABEÇALHO: título COM ÍCONE, subtítulo preto ────────────────────── No ERP todo título de tela leva o ícone do módulo, do tamanho e da cor do próprio título (medido: 22,72px, preto, gap 7). O People não tinha ícone nenhum. O ícone vem do TRILHO (o item/grupo ativo) — o `layout.js` escreve o glifo em `--nv-tit-ic` — e entra por `::before`, porque várias telas reescrevem o `textContent` do título depois de carregar, e um `` dentro dele seria apagado. */ html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-title { display: flex !important; align-items: center; gap: 7px !important; } /* ⚠️ Só onde o título ainda não tem ícone: em Relatórios o `
` já traz o dele, e o `::before` punha um segundo ao lado. */ html[data-swgma-theme^="novo-"] #app.nv-trilho-erp[style*="--nv-tit-ic"] .page-title:not(:has(> i))::before { content: var(--nv-tit-ic); font-family: "bootstrap-icons" !important; font-weight: 400 !important; font-style: normal; line-height: 1; flex: none; color: inherit; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-subtitle { line-height: 1.4 !important; color: var(--sfe-text, #000) !important; } /* ── 4. BOTÕES ───────────────────────────────────────────────────────────── ⚠️ Pelo `.page-header` inteiro, não pelo `.page-header-actions`: em Empresas e em Cargos o botão fica fora desse bloco e continuava laranja cheio. Medido: letra 13,44 / 600 com espaçamento .01em. No CABEÇALHO da tela o ERP não tem botão cheio: o "Novo" é a peça cinza com a letra no acento. */ html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .btn { letter-spacing: .01em !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-header .btn-primary { background: var(--nv-preenche, #E5E5EA) !important; color: var(--md-primary, #A34C12) !important; border: 1px solid transparent !important; box-shadow: inset 0 1px 0 var(--nv-brilho-botao), 0 1px 2px rgba(0,0,0,.07) !important; } /* no escuro o ERP contorna o botão secundário do cabeçalho */ html[data-swgma-theme^="novo-"][data-swgma-mode="dark"]:has(#app.nv-trilho-erp) .page-header-actions .btn-outline { border-color: var(--sfe-border, #38383A) !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-header .btn-primary:hover { background: var(--md-surface-3, #D1D1D6) !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-header .btn-primary * { color: inherit !important; } /* o texto vem num que o People pinta de branco */ /* ── 5. RÓTULOS DE CAMPO: 11 / 600, sem caixa alta (ERP `.form-label`) ──── */ html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) label.filter-label, html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .form-label, html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .form-group > label { font-size: 11px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: .02em !important; line-height: 1.45 !important; color: var(--nv-rotulo-campo) !important; } /* ── 6. CAMPOS: contorno #808080 e SEM sombra interna (ERP `contraste.css`, `--nv-borda-campo`); o select com busca na mesma medida do campo ───────── */ html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) input.form-control, html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) select.form-control, html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) textarea.form-control, html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-body input[type="text"], html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-body input[type="email"], html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-body input[type="number"], html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-body input[type="date"], html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-body input[type="search"], html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-body input[type="tel"], html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-body textarea, html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .select2-selection { border: 1px solid var(--nv-borda-campo, #808080) !important; box-shadow: none !important; color: var(--nv-texto-campo) !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .select2-selection--single { font-size: 13.28px !important; line-height: 1.5 !important; } /* ⚠️ SEM o recuo de 32px do ERP à direita: lá a seta do tom-select mora nesse recuo; aqui o select2 já reserva o lugar da seta DENTRO do texto. Somados, cortavam 14px do nome ("Funcionários ativos" em Diárias, "Matéria jornalística (conta)" na Verificação) — achado pela varredura de corte. */ /* ── 7. SELOS: pílula 11,2 / 600, fundo da própria cor a 12%, SEM borda ─── Medido no ERP (`.badge.text-bg-success`): #1E7349 sobre o tom dele. */ /* ⚠️ O fundo sai da COR ATUAL do selo (`currentColor`): variante que só o People conhece continua com a cor dela, só muda a forma. As quatro conhecidas recebem a cor exata do ERP. */ html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .badge { border: 0 !important; border-radius: 999px !important; padding: 2px 9px !important; font-size: 11.2px !important; font-weight: 600 !important; line-height: 1 !important; background: color-mix(in srgb, currentColor 12%, var(--sfe-card, #fff)) !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .badge-success { color: var(--md-success, #1E7349) !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .badge-danger { color: var(--md-tertiary, #b3261e) !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .badge-warning { color: var(--md-warning, #885C0A) !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .badge-primary, html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .badge-info { color: var(--md-primary, #A34C12) !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .badge-secondary { color: var(--sfe-text-2, #3C3C43) !important; } /* ── 8. AÇÕES DA LINHA: 32×32, cinza, canto 9 (ERP `.btn-outline-secondary` dentro da tabela). No People cada tela deu um nome à peça; os usados são `*-action-btn` e `.btn-icon`. ────────────────────────────────────────────── */ html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) table td [class*="action-btn"], html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) table td .btn-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; display: inline-grid !important; place-items: center !important; border: 1px solid transparent !important; border-radius: 9px !important; background: transparent !important; color: var(--nv-acao-linha) !important; font-size: 13.44px !important; padding: 8px !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) table td [class*="action-btn"]:hover, html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) table td .btn-icon:hover { background: var(--nv-preenche, #E5E5EA) !important; color: var(--md-primary, #A34C12) !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) table td [class*="action-btn"].danger:hover { color: var(--md-tertiary, #b3261e) !important; } /* ── 9. CARTÃO DE NÚMERO: rótulo 700, e SEM o quadrado de ícone ──────────── O `.sfe-kpi-card` do ERP é rótulo · número · complemento; a caixa e as medidas do `.stat-card` do People já eram as mesmas (14/15, canto 12). */ html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .stat-card { gap: 0 !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .stat-card .stat-label { font-weight: 700 !important; line-height: 1.25 !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .stat-card .stat-icon { display: none !important; } /* no escuro o texto herdado dentro do cartão é o do corpo do ERP (#E2E8F0) */ html[data-swgma-theme^="novo-"][data-swgma-mode="dark"]:has(#app.nv-trilho-erp) .page-body .card { color: var(--nv-texto-campo) !important; } /* ── 10. TABELA ENCOSTADA NO CARTÃO ──────────────────────────────────────── No ERP a tabela é a borda do cartão: o cabeçalho encosta em cima e as linhas vão de lado a lado. No People ela vinha numa SEGUNDA moldura (borda e canto próprios) a 21px de cada lado — cartão dentro de cartão. A moldura sai, e a tabela recupera o respiro do cartão com margem negativa do mesmo tamanho. ⚠️ Só quando o cartão tem o respiro padrão (21px): cartão de respiro próprio fica como está, em vez de a tabela vazar para fora dele. */ html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-body .card > .table-wrapper { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-body .card[style=""] > .table-wrapper, html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-body .card:not([style]) > .table-wrapper { margin-left: -21px !important; margin-right: -21px !important; width: auto !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-body .card:not([style]) > .table-wrapper:first-child { margin-top: -21px !important; } html[data-swgma-theme^="novo-"]:has(#app.nv-trilho-erp) .page-body .card:not([style]) > .table-wrapper:last-child { margin-bottom: -21px !important; }