:root {
/* =================================================================
PALETA OFICIAL NEXUS — transcrita do brand_manifest.json do pacote
da marca, nao escolhida aqui.
Declarada com os nomes do pacote para que qualquer cor nova do
produto SAIA daqui, em vez de alguem amostrar um pixel da logo ou
aproximar a olho. As cores semanticas (sucesso, perigo, aviso) NAO
pertencem a marca e seguem intocadas: sao sinal, nao identidade.
================================================================= */
--nexus-midnight-blue: #0B1F3B;
--nexus-royal-blue: #2563B8;
--nexus-icy-blue: #3FB0D6;
--nexus-graphite: #0F172A;
--nexus-silver: #E5E7EB;
--gps-color-primary: var(--nexus-midnight-blue);
--gps-color-primary-light: var(--nexus-royal-blue);
--gps-color-accent: var(--nexus-icy-blue);
--gps-color-bg: #F4F6F8;
--gps-color-surface: #FFFFFF;
--gps-color-text: #1B2733;
--gps-color-text-muted: #5B6B7A;
--gps-color-border: #E1E6EA;
--gps-color-success: #2E7D4F;
--gps-color-danger: #B3261E;
--gps-color-warning: #C77700;
--gps-space-1: 4px;
--gps-space-2: 8px;
--gps-space-3: 16px;
--gps-space-4: 24px;
--gps-space-5: 32px;
--gps-radius: 8px;
--gps-font: "Segoe UI", system-ui, -apple-system, sans-serif;
/* =================================================================
REGRA GLOBAL DE LAYOUT (Sprint 1 - correcao sistemica)
A causa da inconsistencia visual entre as telas nao era cada
pagina: era a ausencia de uma medida comum. `.gps-input` tinha
`margin-top` embutido e fonte 1rem, `.gps-btn` tinha fonte .95rem
e outro padding — nenhum dos dois com ALTURA definida. Numa barra
de filtros os dois nunca se alinhavam, e cada tela corrigia por
conta propria.
Daqui em diante ha UMA altura de controle, UM ritmo vertical e UM
recuo de pagina. Corrigir aqui corrige as cinco telas de uma vez.
================================================================= */
--nexus-page-padding: 24px; /* recuo horizontal do conteudo */
--nexus-section-gap: 16px; /* respiro entre blocos da pagina */
--nexus-card-padding: 16px; /* interior de card e painel */
--nexus-control-height: 38px; /* input, select e botao: a MESMA */
--nexus-control-padding-x: 12px;
--nexus-cell-padding-y: 10px; /* altura de celula de tabela */
--nexus-cell-padding-x: 16px;
--nexus-label-gap: 6px; /* rotulo -> campo */
--nexus-form-row-gap: 16px; /* entre campos de formulario */
--nexus-font-control: .9rem;
--nexus-font-label: .78rem;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--gps-font);
background: var(--gps-color-bg);
color: var(--gps-color-text);
}
/* ---- Login ---- */
.gps-login-shell {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, var(--gps-color-primary) 0%, var(--gps-color-primary-light) 100%);
}
.gps-login-card {
background: var(--gps-color-surface);
border-radius: var(--gps-radius);
padding: var(--gps-space-5);
width: 360px;
box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.gps-login-card h1 { font-size: 1.4rem; margin: var(--gps-space-3) 0; }
.gps-login-logo { max-width: 180px; display: block; margin: 0 auto; }
.gps-login-card label { display: block; margin-top: var(--gps-space-3); font-weight: 600; font-size: .9rem; }
/* Phase 2B — textos de apoio da tela de ativacao. */
.gps-login-intro { margin: 0 0 var(--gps-space-3); color: var(--gps-color-text); font-size: .95rem; }
.gps-login-hint { margin: var(--gps-space-3) 0 0; color: var(--gps-color-text-muted); font-size: .82rem; line-height: 1.4; }
/* Campo e botao compartilham altura, fonte e raio. `margin-top` saiu de
proposito: espacamento e responsabilidade do CONTAINER (NexusField,
NexusFormField), nunca do controle — embutido nele, ele reaparecia em
todo lugar onde o campo fosse usado sem rotulo. */
.gps-input {
width: 100%;
height: var(--nexus-control-height);
padding: 0 var(--nexus-control-padding-x);
border: 1px solid var(--gps-color-border);
border-radius: var(--gps-radius);
font-family: var(--gps-font);
font-size: var(--nexus-font-control);
color: var(--gps-color-text);
background: var(--gps-color-surface);
transition: border-color .15s ease, box-shadow .15s ease;
}
.gps-input:hover { border-color: #C9D2D9; }
.gps-input:focus {
outline: none;
border-color: var(--gps-color-primary-light);
box-shadow: 0 0 0 3px rgba(37, 99, 184, .16);
}
.gps-input[aria-invalid="true"] { border-color: var(--gps-color-danger); }
.gps-input:disabled { background: var(--gps-color-bg); color: var(--gps-color-text-muted); cursor: not-allowed; }
/* Area de texto e a unica excecao de altura — ela cresce por natureza. */
textarea.gps-input { height: auto; min-height: 72px; padding: 8px var(--nexus-control-padding-x); line-height: 1.45; resize: vertical; }
select.gps-input { cursor: pointer; }
/* ---- Buttons ---- */
.gps-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: var(--nexus-control-height);
padding: 0 var(--gps-space-3);
border-radius: var(--gps-radius);
border: 1px solid transparent;
font-family: var(--gps-font);
font-weight: 600;
font-size: var(--nexus-font-control);
line-height: 1;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
transition: background-color .15s ease, border-color .15s ease;
}
.gps-btn:disabled { opacity: .6; cursor: not-allowed; }
.gps-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 184, .3); }
/* Botao de linha de tabela: mesma familia, densidade menor — a alturaade
controle cheia empurraria a linha e quebraria o ritmo da grade. */
.gps-btn-row { height: 30px; padding: 0 10px; font-size: .82rem; }
.gps-btn-primary { background: var(--gps-color-primary); color: #fff; }
.gps-btn-primary:hover { background: var(--gps-color-primary-light); }
.gps-btn-ghost { background: transparent; color: var(--gps-color-primary); border-color: var(--gps-color-border); }
.gps-btn-ghost:hover { background: var(--gps-color-bg); border-color: #C9D2D9; }
.gps-btn-danger { background: var(--gps-color-danger); color: #fff; }
.gps-btn-block { width: 100%; margin-top: var(--gps-space-4); }
/* ---- Shell ---- */
.gps-shell { display: flex; min-height: 100vh; }
/* =====================================================================
`min-width: 0` — a linha que impede a PÁGINA de rolar na horizontal.
MEDIDO, não suposto. Com o padrão `min-width: auto`, um item flex se
recusa a encolher abaixo da largura mínima do próprio conteúdo. Numa
viewport de 1425px, com o panorama de 15 colunas dentro:
documento ........ 2185px (760px de estouro da página)
.gps-shell-main .. 1925px (mais largo que a viewport)
.nexus-table-wrap ... visível 1860 = conteúdo 1860
rolagem interna .. 0px
Ou seja: a coluna principal crescia até caber a tabela inteira, a
janela passava a rolar, e o `overflow-x: auto` do contorno da tabela
NUNCA entrava em ação — porque o contorno nunca chegou a ser menor
que o conteúdo. A página rolava e a tabela não, que é o inverso
exato da intenção.
Com `min-width: 0` a coluna encolhe até a viewport, o contorno fica
menor que a tabela, e a rolagem acontece DENTRO do quadro. Rolar um
quadro é incômodo; rolar a página inteira desalinha o shell e faz a
barra lateral sair de vista.
===================================================================== */
.gps-shell-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
/* Pelo mesmo motivo, um nível abaixo: card, seção ou aba com conteúdo
largo dentro de um container flex em coluna. */
.gps-shell-content > *,
.gps-card { min-width: 0; }
/* Um unico recuo horizontal governa TODA a pagina. Cabecalho, filtros,
indicadores, tabelas e cards herdam dele — por isso ficam alinhados na
mesma margem sem nenhum ajuste por tela. */
.gps-shell-content {
padding: var(--nexus-page-padding);
display: flex;
flex-direction: column;
gap: var(--nexus-section-gap);
}
/* O ritmo vertical vem do `gap` do container, nao de margens que cada
bloco declara por conta propria e que se somam de formas diferentes
dependendo da ordem em que aparecem. */
.gps-shell-content > * { margin-top: 0; margin-bottom: 0; }
.gps-sidebar {
width: 260px;
background: var(--gps-color-primary);
color: #fff;
flex-shrink: 0;
padding: var(--gps-space-3) 0;
}
.gps-sidebar-brand {
display: flex;
flex-direction: column; /* lockup, e o nome em texto abaixo dele */
align-items: flex-start;
gap: 6px;
padding: var(--gps-space-1) var(--gps-space-3) var(--gps-space-3);
font-weight: 700;
border-bottom: 1px solid rgba(255,255,255,.15);
}
.gps-sidebar-menu { list-style: none; margin: 0; padding: var(--gps-space-2) var(--gps-space-2); }
.gps-sidebar-menu li a {
display: block;
position: relative;
padding: 9px var(--gps-space-3);
border-radius: 6px;
color: rgba(255,255,255,.82);
text-decoration: none;
font-size: .9rem;
line-height: 1.3;
transition: background-color .12s ease, color .12s ease;
}
.gps-sidebar-menu li a:hover { background: rgba(255,255,255,.08); color: #fff; }
.gps-sidebar-menu li a:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(255,255,255,.55);
}
/* Estado ativo: o item corrente precisa ser legivel de relance, sem
virar um bloco saturado. Fundo sutil + marca de acento na borda
esquerda + peso tipografico. A classe `active` e posta pelo NavLink
do proprio framework a partir da URL — nao ha estado duplicado. */
.gps-sidebar-menu li a.active {
background: rgba(255,255,255,.14);
color: #fff;
font-weight: 600;
}
.gps-sidebar-menu li a.active::before {
content: "";
position: absolute;
left: 0; top: 7px; bottom: 7px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--gps-color-accent);
}
.gps-sidebar-divider { border-top: 1px solid rgba(255,255,255,.15); margin: var(--gps-space-2) var(--gps-space-2); }
.gps-header {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--gps-color-surface);
border-bottom: 1px solid var(--gps-color-border);
padding: var(--gps-space-3) var(--gps-space-4);
}
.gps-header-competence { color: var(--gps-color-text-muted); text-transform: capitalize; }
.gps-header-user { display: flex; align-items: center; gap: var(--gps-space-3); }
.gps-header-user-info { text-align: right; }
.gps-header-user-name { display: block; font-weight: 600; }
.gps-header-user-role { display: block; font-size: .8rem; color: var(--gps-color-text-muted); }
/* ---- Page header ---- */
.gps-page-header { margin: 0; }
.gps-page-header h1 {
margin: 0; font-size: 1.7rem; line-height: 1.2;
letter-spacing: -.015em; color: var(--gps-color-primary);
}
.gps-page-subtitle { color: var(--gps-color-text-muted); margin: 6px 0 0; font-size: 1rem; line-height: 1.45; }
.gps-page-back { margin: 0 0 var(--gps-space-2); }
/* =====================================================================
TIPOGRAFIA — texto para pessoa vai em sentence case.
"LINHAS NA COMPETENCIA" nao e enfase, e ruido: caixa alta elimina as
ascendentes e descendentes que o olho usa para reconhecer a palavra,
e obriga a ler letra a letra. O sistema nao aplica text-transform em
NENHUM texto humano — rotulo, cabecalho de tabela, KPI, titulo de
secao ou status. Hierarquia vem de peso, tamanho e cor.
Siglas (PEC, CR, OR, RE, SRA, FCST, MC, EBITDA), placas e codigos
continuam maiusculos porque SAO maiusculos — vem assim do dado, nao
de uma regra de estilo. Ver NexusText.Sentence para a apresentacao de
valores persistidos em caixa alta.
===================================================================== */
/* ---- Cards ---- */
.gps-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gps-space-3); }
.gps-card { background: var(--gps-color-surface); border: 1px solid var(--gps-color-border); border-radius: var(--gps-radius); padding: var(--nexus-card-padding); }
.gps-card-title {
margin: 0; font-size: 1.02rem; font-weight: 650;
letter-spacing: -.01em; color: var(--gps-color-text);
}
/* Cabecalho da secao: titulo e subtitulo a esquerda, acoes a direita, na
mesma linha de base. A margem que antes vivia no titulo saiu dele e
virou responsabilidade do cabecalho — titulo com margem propria
desalinhava do botao ao lado. */
.gps-card-head {
display: flex; align-items: flex-start; gap: var(--gps-space-3);
margin-bottom: var(--gps-space-3);
}
.gps-card-subtitle {
margin: 4px 0 0; font-size: .86rem; color: var(--gps-color-text-muted);
line-height: 1.45;
}
.gps-card-actions { margin-left: auto; display: flex; gap: var(--gps-space-2); flex: 0 0 auto; }
.gps-card-body { display: flex; flex-direction: column; gap: var(--nexus-section-gap); }
/* ---- Lista de metadados (rotulo em cima, valor embaixo) ----
Usada onde a tela DESCREVE algo em vez de listar: identidade da
instalacao, cabecalho de um lote, ficha de um registro. Grade para
que nao vire uma coluna de vinte linhas em tela larga. */
.nexus-defs {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--nexus-form-row-gap); margin: 0;
}
.nexus-defs > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nexus-defs dt {
font-size: var(--nexus-font-label); color: var(--gps-color-text-muted);
letter-spacing: normal;
}
.nexus-defs dd { margin: 0; font-size: .88rem; overflow-wrap: anywhere; }
/* Identificador tecnico (GUID, hash): monoespacado porque e feito para
ser CONFERIDO caractere a caractere, nao lido. */
.nexus-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
/* Card com tabela dentro: a tabela ja tem o proprio contorno, entao o
card cede o recuo horizontal para nao criar moldura dupla. */
.gps-card > .nexus-table-wrap { margin: 0 calc(var(--nexus-card-padding) * -1) calc(var(--nexus-card-padding) * -1); border: 0; border-radius: 0 0 var(--gps-radius) var(--gps-radius); }
/* ---- Badges ---- */
.gps-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: .78rem; font-weight: 600; background: var(--gps-color-border); color: var(--gps-color-text); }
.gps-badge-success { background: #E4F3E9; color: var(--gps-color-success); }
.gps-badge-danger { background: #FBE7E5; color: var(--gps-color-danger); }
.gps-badge-muted { background: #EDEFF1; color: var(--gps-color-text-muted); }
/* Atencao: nivel intermediario entre neutro e critico. Sem ele, um
achado de auditoria "ALTO" precisaria ser pintado de vermelho e
perderia a distincao para o realmente CRITICO. */
.gps-badge-warning { background: #FDF2E2; color: #8A5200; }
/* ---- Table ---- */
.gps-table { width: 100%; border-collapse: collapse; background: var(--gps-color-surface); border-radius: var(--gps-radius); overflow: hidden; }
.gps-table th, .gps-table td { text-align: left; padding: var(--gps-space-2) var(--gps-space-3); border-bottom: 1px solid var(--gps-color-border); }
.gps-table th { background: var(--gps-color-bg); font-size: .82rem; font-weight: 650; color: var(--gps-color-text-muted); }
/* ---- States ---- */
.gps-empty-state, .gps-empty-state-inline { text-align: center; color: var(--gps-color-text-muted); padding: var(--gps-space-5); }
.gps-loading-state { display: flex; align-items: center; gap: var(--gps-space-2); padding: var(--gps-space-4); color: var(--gps-color-text-muted); }
.gps-spinner { width: 18px; height: 18px; border: 3px solid var(--gps-color-border); border-top-color: var(--gps-color-primary); border-radius: 50%; animation: gps-spin 0.8s linear infinite; }
@keyframes gps-spin { to { transform: rotate(360deg); } }
/* =====================================================================
ESQUELETO DE CARGA (homologacao final, item 1.1)
A forma da tela antes dos numeros dela. `prefers-reduced-motion`
desliga a pulsacao: o esqueleto continua, parado — quem pediu menos
movimento nao precisa de menos informacao.
===================================================================== */
.nexus-skeleton { margin-bottom: var(--nexus-section-gap); }
.nexus-skeleton-label {
display: flex; align-items: center; gap: var(--gps-space-2);
margin: 0 0 var(--gps-space-3);
font-size: .875rem; color: var(--gps-color-text-muted);
}
.nexus-skeleton-cards {
display: grid; gap: var(--gps-space-3);
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
margin-bottom: var(--gps-space-3);
}
.nexus-skeleton-card {
display: flex; flex-direction: column; gap: var(--gps-space-2);
padding: var(--nexus-card-padding);
background: var(--gps-color-surface);
border: 1px solid var(--gps-color-border);
border-radius: var(--gps-radius);
}
.nexus-skeleton-grid {
display: flex; flex-direction: column; gap: 6px;
padding: var(--nexus-card-padding);
background: var(--gps-color-surface);
border: 1px solid var(--gps-color-border);
border-radius: var(--gps-radius);
}
.nexus-skeleton-bar {
display: block; border-radius: 4px;
background: linear-gradient(90deg, var(--gps-color-bg) 25%, var(--gps-color-border) 37%, var(--gps-color-bg) 63%);
background-size: 400% 100%;
animation: nexus-skeleton-pulse 1.4s ease-in-out infinite;
}
.nexus-skeleton-bar.is-label { width: 60%; height: 10px; }
.nexus-skeleton-bar.is-value { width: 85%; height: 20px; }
.nexus-skeleton-bar.is-row { width: 100%; height: 14px; }
@keyframes nexus-skeleton-pulse { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
.nexus-skeleton-bar { animation: none; background: var(--gps-color-bg); }
}
.gps-alert { padding: var(--gps-space-3); border-radius: var(--gps-radius); margin-bottom: var(--gps-space-3); }
.gps-alert-error { background: #FBE7E5; color: var(--gps-color-danger); }
/* Aviso: a tela precisa dizer "isto nao esta disponivel" sem gritar
erro. Sem este tom, uma limitacao conhecida era pintada de falha. */
.gps-alert-warning { background: #FDF2E2; color: #8A5200; }
/* Phase 2B — estados da ativacao de conta. Mesma linguagem visual
do alerta de erro ja existente, so mudando a familia de cor. */
.gps-alert-success { background: #E6F4EA; color: var(--gps-color-success); }
/* ---- Formulario administrativo (Phase 2B) ---- */
.gps-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gps-space-3); margin-bottom: var(--gps-space-4); }
.gps-form-field label { display: block; margin-bottom: var(--gps-space-1); font-size: .84rem; font-weight: 600; }
.gps-field-hint { margin: var(--gps-space-1) 0 0; font-size: .78rem; color: var(--gps-color-text-muted); }
.gps-alert-success { background: #E6F4EA; color: var(--gps-color-success); }
/* ---- Identidade NEXUS (marca e autoria) ---- */
/* GEOMETRIA DA MARCA — medida, nao arbitrada.
O lockup NEXUS e 3:1 no arquivo (2172x724 no master; 256x85, 384x128
e 512x171 nos derivados) e o simbolo e 1:1. Toda caixa que recebe o
lockup declara altura = largura / 3, e nenhuma delas usa
`object-fit`.
Isso e correcao de CAUSA, nao troca de estilo. A marca anterior era
um quadrado de 1254x1254 com o desenho ocupando apenas 43,6% da
altura; a tela usava `object-fit: cover` numa caixa em faixa para
esconder o vao vazio. O arquivo novo nao tem vao — recorta-lo
cortaria marca.
ALTURA `auto`, e nao um numero: os derivados do pacote nao sao
exatamente 3,000 (medido: 256x85 = 3,012; 384x128 = 3,000;
512x171 = 2,994). Fixar as duas dimensoes faria o navegador esticar
a marca em ate 0,4% — imperceptivel, mas ainda assim distorcao, e
ela mudaria conforme o derivado que o srcset escolhesse. Com a
altura livre, a proporcao do ARQUIVO manda, sempre. O comentario
`3:1` ao lado de cada largura registra a altura resultante. */
/* Marca textual reduzida — fallback de ultimo recurso, usado apenas se
nenhum asset oficial estiver publicado. Nunca substitui a logo. */
.nexus-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; flex: 0 0 auto;
border-radius: 7px;
background: rgba(255,255,255,.14);
color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .04em;
}
/* =====================================================================
GRUPO GPS NA BARRA LATERAL — repaginação, marca principal da área
autenticada (autorização explícita do responsável, 2026-10-02).
A logo fornecida é PRETA, para fundo claro (ORIENTACOES-CLAUDE.txt:
"sem efeitos, distorções ou símbolos adicionais"). A barra é
azul-meia-noite — por isso a faixa clara por trás da logo, e não um
filtro sobre ela: a marca continua exatamente como entregue, só o
fundo imediato dela muda.
===================================================================== */
.nexus-sidebar-gps-logo {
display: block;
width: 172px;
height: auto; /* arquivo recortado 880x209 (~4,2:1), proporção do original */
}
/* RODAPÉ da barra (2026-10-07): só o USUÁRIO (.nexus-sidebar-profile, definido mais
abaixo, junto do avatar). A logo NEXUS, o rótulo "Sistema" e a divisória do bloco
"Sistema" saíram — a barra autenticada tem uma única marca, a do Grupo GPS, no topo. */
/* Telas publicas (que nao sao o login): logo oficial do Grupo GPS (preta) sobre o card
branco. O asset e o ORIGINAL 880x209 (~4,2:1), com alfa real: largura declarada, altura
automatica, nunca comprimido. A NEXUS so aparece no login e em Sobre o Sistema. */
.gps-auth-logo {
width: 210px; height: auto; /* ~4,2:1 -> ~50px */
display: block; margin: 0 auto;
}
/* A tipografia da marca nas telas publicas vive em auth.css, junto do
restante do auth shell — um lugar so para hierarquia e espacamento. */
/* ---- Area institucional: Configuracoes > Sobre o Sistema ----
Unico lugar do sistema onde a autoria aparece. O rodape do shell
autenticado fica limpo, sem assinatura e sem texto de autoria. */
.nexus-about { margin-bottom: var(--gps-space-4); }
.nexus-about-heading {
margin: 0 0 var(--gps-space-3);
font-size: .78rem; font-weight: 650;
text-transform: uppercase; letter-spacing: .09em;
color: var(--gps-color-text-muted);
}
.nexus-about-card {
max-width: 600px;
padding: var(--gps-space-5) var(--gps-space-5) var(--gps-space-4);
background: var(--gps-color-surface);
border: 1px solid var(--gps-color-border);
border-radius: 14px;
box-shadow:
0 1px 2px rgba(11, 31, 59, .05),
0 8px 24px rgba(11, 31, 59, .05);
text-align: center;
}
/* Area institucional: mesma variante das telas publicas, e maior —
aqui a logo E a identificacao do produto. O nome NAO e repetido em
texto abaixo dela: o proprio lockup ja traz "GESTAO EXECUTIVA". */
.nexus-about-logo {
width: 240px; height: auto; /* 3:1 -> ~80px */
display: block; margin: 0 auto var(--gps-space-2);
}
.nexus-about-version {
margin: 0;
font-size: .82rem; letter-spacing: .02em;
color: var(--gps-color-text-muted);
}
.nexus-about-description {
margin: var(--gps-space-3) auto 0;
max-width: 46ch;
font-size: .95rem; line-height: 1.6;
color: var(--gps-color-text);
text-wrap: balance;
}
/* ---- Atribuicao de autoria ----
Legenda oficial + assinatura manuscrita. Sem nome por extenso: a
assinatura ja carrega a identidade do criador. Detalhe de autoria,
jamais elemento dominante da pagina. */
.nexus-attribution {
margin-top: var(--gps-space-4);
padding-top: var(--gps-space-4);
border-top: 1px solid var(--gps-color-border);
}
/* Legenda em caixa normal — e uma linha institucional, nao um rotulo
de formulario. */
.nexus-attribution-label {
display: block;
font-size: .82rem; font-weight: 600;
letter-spacing: .01em;
color: var(--gps-color-text-muted);
}
/* Altura fixa + width auto preserva a PROPORCAO original do asset;
nenhum filtro, nenhum fundo — a transparencia do PNG e usada como e. */
.nexus-attribution-mark {
display: block; margin: var(--gps-space-2) auto 0;
height: 72px; width: auto; max-width: 100%;
}
/* App de campo em Configuracoes: endereco, copiar e passo a passo de instalacao. */
.nexus-app-card { text-align: left; }
.nexus-app-lead { margin: 0 0 var(--gps-space-3); line-height: 1.5; }
.nexus-app-label { display: block; margin-bottom: var(--gps-space-1); font-size: .82rem; font-weight: 600; color: var(--gps-color-text-muted); }
.nexus-app-link-row { display: flex; flex-wrap: wrap; gap: var(--gps-space-2); align-items: center; }
.nexus-app-link-row .gps-input { flex: 1 1 220px; min-width: 0; }
.nexus-app-steps h3 { margin: var(--gps-space-4) 0 var(--gps-space-1); font-size: .95rem; }
.nexus-app-steps ol { margin: 0; padding-left: 1.25rem; font-size: .875rem; line-height: 1.6; }
.nexus-app-note { margin: var(--gps-space-3) 0 0; font-size: .82rem; color: var(--gps-color-text-muted); line-height: 1.5; }
/* Nota de desenvolvimento: existe para quem esta construindo o modulo,
nao para quem usa o sistema. Presenca reduzida ao minimo e, em
Production, nem chega a ser renderizada (ver Configuracoes.razor). */
.nexus-about-note {
max-width: 600px;
margin-top: var(--gps-space-3);
font-size: .78rem; line-height: 1.5;
color: var(--gps-color-text-muted);
opacity: .75;
}
@media (max-width: 620px) {
.nexus-about-card { padding: var(--gps-space-4) var(--gps-space-3); }
.nexus-about-logo { width: 190px; height: auto; } /* 3:1 -> ~63px */
.nexus-about-description { max-width: none; font-size: .9rem; }
.nexus-attribution-mark { height: 60px; }
}
/* =====================================================================
VOCABULARIO DE DADOS (Sprint 1)
Um unico conjunto para os onze modulos. Existe para que cada tela nao
invente sua propria tabela, sua propria barra de filtro e seu proprio
espacamento — foi assim que a versao Desktop acumulou 12.400 linhas
de XAML com meia duzia de dialetos visuais.
===================================================================== */
/* ---- Barra de filtros ---- */
.nexus-filter-bar {
display: flex; flex-wrap: wrap; align-items: flex-end;
gap: var(--gps-space-3);
padding: var(--nexus-card-padding);
background: var(--gps-color-surface);
border: 1px solid var(--gps-color-border);
border-radius: var(--gps-radius);
}
.nexus-filter-actions { margin-left: auto; display: flex; gap: var(--gps-space-2); align-items: center; }
.nexus-field { display: flex; flex-direction: column; gap: var(--nexus-label-gap); min-width: 160px; }
.nexus-field.is-grow { flex: 1 1 220px; }
.nexus-field-value {
font-size: var(--nexus-font-control); line-height: 1.4;
color: var(--gps-color-text);
overflow-wrap: anywhere;
}
.nexus-field > label {
font-size: var(--nexus-font-label); font-weight: 600;
color: var(--gps-color-text-muted);
line-height: 1;
}
.nexus-competence { display: flex; gap: var(--gps-space-2); }
.nexus-competence select:first-child { width: 92px; flex: 0 0 auto; }
.nexus-competence select:last-child { flex: 1 1 auto; min-width: 128px; }
/* ---- Busca ---- */
.nexus-search { position: relative; display: flex; align-items: center; }
.nexus-search svg {
position: absolute; left: 10px; width: 15px; height: 15px;
color: var(--gps-color-text-muted); pointer-events: none;
}
.nexus-search input { padding-left: 32px; }
/* ---- Tabela ----
`overflow-x: auto` no contorno: tabela financeira e larga por
natureza, e a pagina nunca deve rolar horizontalmente por causa
dela.
`position: relative` e parte do contrato: um descendente absoluto da
tabela (o rotulo `.nexus-visually-hidden` do motivo de ausencia, por
celula) so e recortado pelo `overflow` do contorno se o contorno for o
bloco de contencao dele. Sem isso, cada rotulo escapa do recorte, fica
na posicao estatica da celula — a direita da area visivel, numa tabela
mais larga que a tela — e estica a pagina inteira (medido no Dashboard
Regional: 1.639 px de documento numa janela de 1.440 px). */
.nexus-table-wrap {
position: relative;
background: var(--gps-color-surface);
border: 1px solid var(--gps-color-border);
border-radius: var(--gps-radius);
overflow-x: auto;
}
.nexus-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.nexus-table thead th {
position: sticky; top: 0; z-index: 1;
padding: var(--nexus-cell-padding-y) var(--nexus-cell-padding-x);
text-align: left; white-space: nowrap;
font-size: .78rem; font-weight: 650;
color: var(--gps-color-text-muted);
background: var(--gps-color-bg);
border-bottom: 1px solid var(--gps-color-border);
}
.nexus-table tbody td {
padding: var(--nexus-cell-padding-y) var(--nexus-cell-padding-x);
border-bottom: 1px solid var(--gps-color-border);
vertical-align: top;
color: var(--gps-color-text);
/* UMA regua vertical. Sem esta linha a celula herda `normal`, que
depende da fonte que o navegador conseguiu resolver — e conviviam
tres ritmos na MESMA linha: td em `normal` (20,3px medidos),
td.nexus-wrap em 1.35 e .nexus-note em 1.4.
TROCA CONSCIENTE: medido isoladamente, isto deixa a linha de
Recorrentes 6%% mais alta (127px -> 134,8px). Paga-se altura por
determinismo: o ritmo da grade deixa de depender de qual fonte
carregou. */
line-height: 1.45;
}
.nexus-table.is-dense tbody td { padding: 6px var(--nexus-cell-padding-x); }
.nexus-table td.nexus-actions .gps-btn + .gps-btn { margin-left: 6px; }
.nexus-table tbody tr:last-child td { border-bottom: 0; }
.nexus-table tbody tr:hover td { background: #FAFCFD; }
.nexus-table tfoot td {
padding: var(--nexus-cell-padding-y) var(--nexus-cell-padding-x);
font-weight: 650;
border-top: 1px solid var(--gps-color-border);
background: var(--gps-color-bg);
}
/* =====================================================================
CONTRATO DE ALINHAMENTO POR COLUNA.
Cabecalho e celula da MESMA coluna recebem o mesmo alinhamento, a
partir de uma unica classe emitida por NexusDataTable a partir da
declaracao de colunas. A pagina nao anota mais alinhamento em
ou
: nao ha o que discordar.
A especificidade e deliberadamente alta (.nexus-table.nexus-aN-x thead th)
porque a regra base .nexus-table thead th ja vale 0-1-2 — foi
exatamente isso que fez todo
ali
traria cabecalho, alinhamento por coluna e contagem que nao servem a
nada. */
.nexus-list { list-style: none; margin: 0; padding: 0; }
.nexus-list li {
padding: var(--gps-space-2) 0;
border-bottom: 1px solid var(--gps-color-border);
font-size: var(--nexus-font-control); line-height: 1.45;
}
.nexus-list li:last-child { border-bottom: 0; }
.nexus-list li .nexus-strong { margin-right: 8px; }
/* ---- Encerramento de contrato ---- */
/* Acao destrutiva vive separada do resto do cartao, com respiro e uma
linha acima: ela nao pode parecer mais um botao da fileira. */
/* Aplicativo no celular (Perfil): passos de instalação */
.nexus-pwa-passos { margin-top: var(--gps-space-3); max-width: 70ch; }
.nexus-pwa-passos p { margin: 0 0 var(--gps-space-2); line-height: 1.5; }
.nexus-pwa-titulo { margin: 0 0 var(--gps-space-2); font-size: 1rem; font-weight: 650; }
.nexus-closeout {
margin-top: var(--gps-space-4);
padding-top: var(--gps-space-3);
border-top: 1px solid var(--gps-color-border);
display: flex; align-items: center; gap: var(--gps-space-3);
flex-wrap: wrap;
}
/* ---- Eventos gerenciais (extraordinarios) ---- */
/* Caixa de marcacao com rotulo ao lado. Existe aqui, e nao na pagina,
porque tres telas ja precisam da mesma forma. */
.nexus-check {
display: inline-flex; align-items: center; gap: 8px;
margin: var(--gps-space-2) 0;
font-size: var(--nexus-font-control);
cursor: pointer;
}
.nexus-check input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
/* Modalidade de importacao do Orcamento (D-037): duas opcoes com texto proprio, e o escopo
declarado da substituicao completa (exercicio, competencias, CRs). */
.nexus-modalidade { display: flex; flex-direction: column; gap: var(--gps-space-2); }
.nexus-modalidade .nexus-check { align-items: flex-start; margin: 0; }
.nexus-modalidade .nexus-check input { margin-top: 3px; flex: none; }
.nexus-modalidade-escopo { display: grid; gap: var(--gps-space-3); margin-top: var(--gps-space-3); max-width: 46rem; }
.nexus-modalidade-escopo fieldset.nexus-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.nexus-modalidade-escopo legend { padding: 0; font-weight: 600; margin-bottom: var(--gps-space-1); }
.nexus-modalidade-meses { display: flex; flex-wrap: wrap; gap: var(--gps-space-1) var(--gps-space-3); }
.nexus-modalidade-meses .nexus-check { margin: 0; }
/* Tabela de diferencas/alteracoes do Orcamento dentro de um dialogo: rola por dentro, com teto de altura. */
.nexus-diferencas { max-height: 22rem; overflow: auto; margin-top: var(--gps-space-2); }
.nexus-inline-field { display: inline-flex; align-items: center; gap: var(--gps-space-2); }
.nexus-inline-field label { font-size: var(--nexus-font-control); font-weight: 600; }
/* Campo de texto com a acao ao lado (buscar, cadastrar). O campo ocupa o que sobra; o botao nao quebra de linha. */
.nexus-input-action { display: flex; gap: var(--gps-space-2); align-items: center; min-width: 0; }
.nexus-input-action .gps-input { flex: 1 1 auto; min-width: 0; }
.nexus-input-action .gps-btn { flex: 0 0 auto; white-space: nowrap; }
/* Registro cancelado: continua visivel — apagar destruiria a
rastreabilidade de uma decisao que aconteceu — mas recua para o
segundo plano. */
.nexus-table tbody tr.is-muted td { opacity: .55; }
/* ---- Resumo gerencial da competencia (o "+" do panorama) ---- */
/* Botao de expandir/recolher. Quadrado e pequeno porque ele vive na
primeira coluna de uma tabela densa: um botao de altura de controle
cheia empurraria a linha e quebraria o ritmo da grade. */
.nexus-btn-toggle {
width: 26px; height: 26px; padding: 0;
font-size: 1rem; line-height: 1; font-weight: 700;
}
/* A linha de detalhe atravessa todas as colunas e recua o conteudo, para
que o resumo se leia como filho da competencia e nao como outra
tabela solta. */
.nexus-table tbody tr.nexus-row-detail > td { background: #FAFBFC; padding: 0; }
.nexus-month-summary { padding: var(--gps-space-3) var(--gps-space-4); }
.nexus-month-summary .nexus-table-wrap { max-width: 900px; }
.nexus-month-summary-actions { margin-top: var(--gps-space-2); }
/* Secao (ROL, RESULTADO DOS CONTRATOS, INDIRETO, EBITDA): sao os totais
que estruturam a leitura do resultado. */
.nexus-table tbody tr.is-section td { font-weight: 650; background: #F4F6F8; }
/* Categorias do indireto: recuadas, porque sao a composicao da linha
INDIRETO logo acima — nao itens de mesmo nivel. */
.nexus-table tbody tr.is-indirect td:first-child { padding-left: var(--gps-space-5); }
.nexus-note { font-size: .78rem; color: var(--gps-color-text-muted); line-height: 1.4; }
.nexus-note.is-inline { margin-left: 6px; }
/* Trava por compra comprometida no Forecast. Nao e alerta de erro — o
comprometido e fato, e a linha esta correta. E informacao de piso, por
isso usa o texto normal e nao a cor de perigo; o que muda e o peso,
para o gerente achar a explicacao sem procurar. */
.nexus-lock-purchase { display: block; color: var(--gps-color-text); font-weight: 600; }
.nexus-lock-variance { display: block; margin-top: 2px; color: var(--gps-color-warning); }
.nexus-strong { font-weight: 650; }
/* Valor negativo em coluna financeira. Cor, e nao so o sinal: numa
tabela densa o menos some, e um desvio negativo lido como positivo e
pior do que nao mostrar o desvio. */
.nexus-negative { color: var(--gps-color-danger); }
.nexus-table tbody tr.is-attention td { background: #FFFBF2; }
/* A competencia que a tela esta mostrando, dentro da evolucao anual.
Nao e alerta: e orientacao — "voce esta aqui". */
.nexus-table tbody tr.is-current td { background: #F0F5FA; font-weight: 600; }
.nexus-table tbody tr.is-critical td { background: #FDF3F2; }
.nexus-table-count {
margin: 0; padding: 8px var(--nexus-cell-padding-x);
font-size: .78rem; color: var(--gps-color-text-muted);
border-top: 1px solid var(--gps-color-border);
}
/* ---- Indicadores ---- */
.nexus-kpi-row {
/* Colunas pela LARGURA UTIL (a barra lateral aberta ou recolhida muda o
espaco): o cartao nunca fica mais estreito que 11,5rem e nunca passa de
24rem. Um numero curto num cartao de 500px nao ganha proporcao nenhuma,
so espaco vazio. */
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 17rem));
justify-content: start;
gap: var(--gps-space-3);
}
/* Cartao com a altura do PROPRIO conteudo: rotulo, valor e dica empilhados,
sem reservar espaco vazio. Na mesma linha da grade os cartoes se igualam
ao mais alto, para a linha ficar alinhada. */
.nexus-kpi {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 14px;
background: var(--gps-color-surface);
border: 1px solid var(--gps-color-border);
border-left: 3px solid var(--gps-color-primary-light);
border-radius: var(--gps-radius);
}
.nexus-kpi-label {
font-size: .84rem; font-weight: 600;
color: var(--gps-color-text-muted);
}
/* O cartao e container de largura: o valor acompanha o espaco que o cartao
tem (cqw) em vez de quebrar um numero monetario de oito digitos no meio.
Teto 1.4rem (cartao largo) e piso 1rem (cartao estreito). Todo
NexusKpiCard vive dentro de um NexusKpiRow (grade), entao a contencao de
largura nao altera o dimensionamento do cartao. */
.nexus-kpi { container-type: inline-size; }
.nexus-kpi-value {
font-size: clamp(1rem, 11.2cqw, 1.4rem);
line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.nexus-kpi-hint { font-size: .78rem; line-height: 1.3; color: var(--gps-color-text-muted); }
/* Selo de prioridade do indicador: icone + TEXTO, nunca so cor. */
.nexus-kpi-selo {
display: inline-flex; align-items: center; gap: 5px;
width: fit-content; margin-bottom: 2px; padding: 2px 9px 2px 7px;
border-radius: 999px;
font-size: .74rem; font-weight: 700; line-height: 1.3;
color: var(--gps-color-danger); background: #FBE7E5;
}
.nexus-kpi-selo svg { width: 13px; height: 13px; flex: none; }
.nexus-kpi-positive { border-left-color: var(--gps-color-success); }
.nexus-kpi-negative { border-left-color: var(--gps-color-danger); }
.nexus-kpi-warning { border-left-color: var(--gps-color-warning); }
/* ---- Lista de avisos/alertas dentro de um card ---- */
.nexus-alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gps-space-2); }
.nexus-alert-list li {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gps-space-2);
padding-bottom: var(--gps-space-2);
border-bottom: 1px solid var(--gps-color-border);
font-size: .875rem;
}
.nexus-alert-list li:last-child { border-bottom: 0; padding-bottom: 0; }
/* =====================================================================
MODAL DE FORMULARIO
Defeito corrigido: a largura anterior comprimia o formulario numa
coluna estreita e, com muitos campos, o rodape saia da viewport — os
botoes Salvar/Cancelar ficavam inalcancaveis.
Estrutura obrigatoria: CABECALHO FIXO, CORPO ROLAVEL, RODAPE FIXO. A
rolagem acontece dentro do corpo, entao as acoes estao sempre
visiveis, independente do tamanho do formulario ou da tela.
===================================================================== */
/* =====================================================================
TAMANHOS OFICIAIS DE DIALOGO — Small / Medium / Large / Full.
Quatro tamanhos nomeados, escolhidos pelo FLUXO, nunca por pixel solto
na pagina. A margem de seguranca (48px) e a mesma nos quatro: um
dialogo nunca encosta na borda da janela.
===================================================================== */
:root {
--nexus-modal-small: 540px;
--nexus-modal-medium: 780px;
--nexus-modal-large: 1080px;
--nexus-modal-margin: 48px;
}
.nexus-modal {
/* Sem tamanho aqui: a variante e obrigatoria e NexusModal sempre emite
uma. Base sem largura impede que "esqueci a variante" produza um
dialogo silenciosamente errado — ele fica visivelmente sem forma. */
max-height: calc(100vh - 64px);
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
}
.nexus-modal.is-small { width: min(var(--nexus-modal-small), calc(100vw - var(--nexus-modal-margin))); }
.nexus-modal.is-medium { width: min(var(--nexus-modal-medium), calc(100vw - var(--nexus-modal-margin))); }
.nexus-modal.is-large { width: min(var(--nexus-modal-large), calc(100vw - var(--nexus-modal-margin))); }
.nexus-modal.is-full { width: calc(100vw - var(--nexus-modal-margin)); height: calc(100vh - 64px); }
.nexus-modal-header {
flex: 0 0 auto;
padding: var(--gps-space-3) var(--gps-space-4);
border-bottom: 1px solid var(--gps-color-border);
}
.nexus-modal-header h2 {
margin: 0; font-size: 1.05rem; font-weight: 650; color: var(--gps-color-text);
}
.nexus-modal-body { flex: 1 1 auto; overflow-y: auto; padding: var(--gps-space-4); }
.nexus-modal-footer {
flex: 0 0 auto;
display: flex; justify-content: flex-end; gap: var(--gps-space-2);
padding: var(--gps-space-3) var(--gps-space-4);
border-top: 1px solid var(--gps-color-border);
background: var(--gps-color-bg);
}
@media (max-width: 640px) {
/* Em tela pequena o dialogo ocupa a tela: caixa flutuante estreita
seria pior que a pagina inteira. */
.nexus-modal, .nexus-modal.is-small, .nexus-modal.is-medium,
.nexus-modal.is-large, .nexus-modal.is-full {
width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0;
}
}
/* =====================================================================
FORMULARIO — uma so gramatica: rotulo SEMPRE acima do campo, mesma
distancia entre rotulo e campo, mesma distancia entre linhas, e erro
imediatamente abaixo do campo que o gerou.
===================================================================== */
.nexus-form-section + .nexus-form-section { margin-top: var(--gps-space-4); }
.nexus-form-section-title {
margin: 0 0 var(--gps-space-3);
font-size: .85rem; font-weight: 650;
color: var(--gps-color-text);
padding-bottom: 6px;
border-bottom: 1px solid var(--gps-color-border);
}
.nexus-form-section-description {
margin: calc(var(--gps-space-3) * -1 + 2px) 0 var(--gps-space-3);
font-size: var(--nexus-font-label); line-height: 1.4;
color: var(--gps-color-text-muted);
}
/* Duas colunas em tela larga; uma quando nao couber. Formulario longo em
coluna unica vira uma fita vertical interminavel. */
.nexus-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--nexus-form-row-gap);
}
.nexus-form-grid.is-single { grid-template-columns: 1fr; }
.nexus-form-field { display: flex; flex-direction: column; gap: var(--nexus-label-gap); min-width: 0; }
.nexus-form-field.is-full { grid-column: 1 / -1; }
.nexus-form-field > label {
font-size: var(--nexus-font-label); font-weight: 650;
color: var(--gps-color-text-muted); line-height: 1;
}
.nexus-form-hint { margin: 0; font-size: .76rem; color: var(--gps-color-text-muted); line-height: 1.4; }
.nexus-form-error {
display: flex; align-items: flex-start; gap: 5px;
margin: 0; font-size: .78rem; line-height: 1.4;
color: var(--gps-color-danger);
}
/* ---- Controles CRUS (sem NexusField) direto na barra de filtros ----
`.gps-input` tem width:100%: numa barra flex com wrap, cada controle cru ocupava uma LINHA INTEIRA (visto na Lista de relatórios de avaria
a 1366 px: cinco filtros empilhados). Acima de 900 px (abaixo dela a barra vira coluna e o stretch já resolve) cada um ganha uma base e
divide a linha; a busca, mais larga, cresce mais. */
@media (min-width: 901px) {
.nexus-filter-bar > .gps-input { flex: 1 1 170px; width: auto; min-width: 150px; max-width: 320px; }
.nexus-filter-bar > .nexus-search { flex: 2 1 280px; min-width: 220px; }
}
/* ---- Responsividade da barra de filtros ---- */
@media (max-width: 900px) {
.nexus-filter-bar { flex-direction: column; align-items: stretch; }
.nexus-filter-actions { margin-left: 0; }
/* Em coluna, `flex: 1 1 220px` do campo "grow" vira ALTURA de 220px (um vazio entre o campo e os botões, medido em 390 px na
Agenda). Em coluna o campo ocupa só a própria altura. */
.nexus-filter-bar > .nexus-field.is-grow { flex: 0 0 auto; }
}
/* ---- Modal ---- */
.gps-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
/* SUPERFICIE APENAS — nunca tamanho.
Causa raiz medida no DOM: esta regra definia width:360px e padding, e
vinha DEPOIS de .nexus-modal no arquivo. Mesma especificidade (0-1-0),
entao a ordem de origem decidia: todo NexusModal computava 360px/24px.
So .nexus-modal.is-wide escapava, por ter 0-2-0 — exatamente o unico
dialogo que aparecia correto na evidencia visual.
Tamanho agora vem SEMPRE das variantes oficiais abaixo. */
.gps-modal { background: var(--gps-color-surface); border-radius: var(--gps-radius); }
.gps-modal-actions { display: flex; justify-content: flex-end; gap: var(--gps-space-2); margin-top: var(--gps-space-4); }
/* ---- Responsividade do shell (mandate item 52) ----
A antiga faixa no topo abaixo de 900px (barra lateral com 100% de
largura e itens em linha) foi substituida pelos tres modos do bloco
APPLICATION SHELL, no fim deste arquivo: barra aberta >= 1440px,
trilho recolhivel 1024-1439px e gaveta abaixo de 1024px. */
/* =====================================================================
MÓDULO GERENTE DE CONTRATO — seção acrescentada ao FIM do arquivo.
Uma regra só, e ela existe por necessidade concreta: o sistema tinha
aviso de erro, de atenção e de sucesso, mas nenhum aviso NEUTRO. O
Centro de Alertas precisa dizer de onde vem o dado e até que
competência ele existe — uma informação que não é erro nem sucesso.
Sem um tom neutro, essa linha teria de emprestar a cor de um dos
outros e passaria a parecer um problema ou uma confirmação.
===================================================================== */
.gps-alert-info { background: #EDF1F5; color: var(--gps-color-text-muted); }
/* =====================================================================
EXPERIENCIA EXECUTIVA (Diretor Executivo) — conteudo das paginas.
O shell proprio do diretor (barra superior horizontal com tres
destinos, `nexus-exec-shell`/`-topbar`/`-nav`/`-content`) SAIU na
unificacao do shell (2026-09-21): por decisao do responsavel, todos os
papeis usam o MESMO shell — barra lateral fixa e marca sempre visivel
(bloco APPLICATION SHELL, no fim deste arquivo). As paginas executivas
continuam nas mesmas rotas e com a mesma policy; so o layout mudou.
Ficam aqui apenas as duas classes de CONTEUDO que as paginas usam.
===================================================================== */
/* Declaracao de indisponibilidade. Precisa parecer INFORMACAO, nao
erro: o dado nao esta faltando por defeito, ele nao existe no modelo —
e um bloco vermelho faria o leitor procurar um problema inexistente. */
.nexus-exec-unavailable {
border: 1px dashed var(--gps-color-border);
border-radius: var(--gps-radius);
padding: var(--nexus-card-padding);
color: var(--gps-color-text-muted);
font-size: .875rem;
background: var(--gps-color-surface);
}
.nexus-exec-unavailable strong { color: var(--gps-color-text); display: block; margin-bottom: 4px; }
/* Nota de leitura ao pe de uma secao: de onde veio o numero e o que ele
nao inclui. Em tela executiva isso e parte do dado, nao rodape. */
.nexus-exec-note { font-size: .8rem; color: var(--gps-color-text-muted); margin: 0; }
/* =====================================================================
PERFIL DO USUÁRIO — avatar, bloco da barra lateral e tela.
O avatar é um círculo de tamanho FIXO com `flex-shrink: 0`: num item
flexível, o nome longo espremeria a foto até ela virar uma elipse, e
o defeito só apareceria para quem tem nome comprido.
As iniciais e a foto ocupam exatamente a mesma caixa, então a barra
não muda de altura quando alguém envia ou remove a própria foto.
===================================================================== */
.nexus-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .22);
}
.nexus-avatar.is-lg { width: 96px; height: 96px; }
.nexus-avatar-img {
width: 100%;
height: 100%;
/* `cover` aqui NÃO é remendo de proporção como era na marca: o
recorte é a intenção — foto de perfil é enquadrada em círculo, e
`contain` deixaria barras dentro do círculo. */
object-fit: cover;
display: block;
}
.nexus-avatar-initials {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-weight: 600;
font-size: .8125rem;
letter-spacing: .02em;
color: #fff;
}
.nexus-avatar.is-lg .nexus-avatar-initials { font-size: 1.75rem; }
/* Na tela de perfil o avatar fica sobre fundo claro. */
.nexus-profile .nexus-avatar {
background: var(--gps-color-primary);
border-color: rgba(0, 0, 0, .12);
}
.nexus-sidebar-profile {
display: flex;
align-items: center;
gap: var(--gps-space-3);
margin-top: var(--gps-space-3);
padding: var(--gps-space-3) var(--gps-space-3);
border-top: 1px solid rgba(255, 255, 255, .12);
text-decoration: none;
color: #fff;
}
.nexus-sidebar-profile:hover { background: rgba(255, 255, 255, .07); }
.nexus-sidebar-profile-text {
/* `min-width: 0` é o que permite o truncamento funcionar dentro de
um flex item — sem ele o texto força a largura e empurra a barra. */
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.25;
}
/* Nome e função QUEBRAM em vez de cortar: nomes e cargos longos continuam
inteiros, ao lado do avatar, sem sobrepor nada. */
.nexus-sidebar-profile-name,
.nexus-sidebar-profile-role {
white-space: normal;
overflow-wrap: anywhere;
}
.nexus-sidebar-profile-name { font-size: .875rem; font-weight: 600; }
.nexus-sidebar-profile-role { font-size: .78rem; opacity: .72; }
/* A barra é uma coluna; o perfil desce para o rodapé dela. */
.gps-sidebar { display: flex; flex-direction: column; }
.gps-sidebar-menu { flex: 1 1 auto; }
.nexus-profile {
display: flex;
align-items: flex-start;
gap: var(--gps-space-4);
flex-wrap: wrap;
}
.nexus-profile-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--gps-space-3);
margin: 0;
flex: 1 1 320px;
}
.nexus-profile-fields dt {
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--gps-color-text-muted, #64748b);
}
.nexus-profile-fields dd { margin: 2px 0 0; font-size: .9375rem; }
/* =====================================================================
TABELAS — LARGURA MÍNIMA E QUEBRA CONTROLADA
O DEFEITO MEDIDO. `width: 100%` numa tabela de 15 colunas faz o
navegador espremer o que pode espremer: as colunas de TEXTO. O
resultado é a coluna "Alerta" com uma palavra por linha e a coluna
"Achado" virando texto vertical — enquanto as colunas numéricas, que
têm `white-space: nowrap`, ficam intactas. O texto paga a conta
sozinho.
A CORREÇÃO é dar piso às colunas. Com piso, a soma das larguras
mínimas passa da largura disponível, e aí o `overflow-x: auto` do
contorno entra em ação — que é o comportamento certo: a tabela rola
dentro do próprio quadro, e a PÁGINA não rola.
Rolar um quadro é incômodo; ler texto vertical é impossível.
===================================================================== */
/* Piso por TIPO de conteúdo. Os números vêm dos conteúdos reais:
"R$ 1.234.567,89" não cabe abaixo de 108px na fonte da tabela, e um
rótulo de contrato ("334371 · CONDOMÍNIO …") fica ilegível abaixo de
140px. */
.nexus-table thead th,
.nexus-table tbody td { min-width: 96px; }
/* A primeira coluna costuma ser a identificacao (contrato, conta, mes) e
e a que mais sofre com o esmagamento. Piso maior — MAS so quando ela e
de texto: quando a primeira coluna e o "+" do panorama ou uma marca
curta, 140px seria uma faixa vazia atravessando a tabela inteira. */
/* O `:not()` de cada classe de prosa nao e enfeite: sem ele esta regra
VENCE por especificidade (0,4,2 contra 0,2,2) e a classe anotada na
celula e ignorada em silencio — o autor da tela escreve `nexus-wrap`, o
navegador desconsidera, e nao ha erro em lugar nenhum.
Medido reescrevendo o seletor no CSSOM sobre o CSS real:
primeira coluna com class="nexus-wrap" 140px -> 240px
primeira coluna sem classe de prosa 140px -> 140px
O piso posicional e um PALPITE sobre o que a primeira coluna contem;
a classe e uma AFIRMACAO de quem escreveu a tela. Afirmacao vence. */
.nexus-table:not(.nexus-a1-center):not(.nexus-a1-act) thead th:first-child:not(.nexus-wrap):not(.nexus-clamp):not(.nexus-wrap-wide),
.nexus-table:not(.nexus-a1-center):not(.nexus-a1-act) tbody td:first-child:not(.nexus-wrap):not(.nexus-clamp):not(.nexus-wrap-wide) {
min-width: 140px;
}
/* Coluna de alternancia (o "+"): exatamente o botao. */
.nexus-table.nexus-a1-center thead th:nth-child(1),
.nexus-table.nexus-a1-center tbody td:nth-child(1) { min-width: 48px; width: 1%; }
/* Numérica: piso maior e SEM quebra — um valor monetário partido em
duas linhas deixa de ser comparável na vertical, que é a única razão
de alinhá-lo à direita. */
/* O alinhamento e aplicado por classe NA TABELA (nexus-aN-num), nao por
classe na celula: as regras posicionais acima ja levam o piso junto.
Estas aqui cobrem as celulas que declaram a classe diretamente. */
.nexus-table td.nexus-num,
.nexus-table th.nexus-num { min-width: 112px; white-space: nowrap; }
/* Ações: o que a coluna precisa e nada além. `width: 1%` com `nowrap`
faz a tabela dar a ela exatamente a largura dos botões, devolvendo o
resto ao texto. */
.nexus-table td.nexus-actions,
.nexus-table th.nexus-actions {
width: 1%;
white-space: nowrap;
vertical-align: top;
}
/* Marca curta (situação, severidade): não precisa de piso de texto. */
.nexus-table td.nexus-center,
.nexus-table th.nexus-center { min-width: 88px; }
/* `nexus-nowrap` continua significando "não quebre", mas agora sem
espremer o vizinho. */
.nexus-table td.nexus-nowrap { white-space: nowrap; min-width: 0; }
/* ---------------------------------------------------------------------
COLUNA DE TEXTO LONGO — a mensagem do alerta, o achado da compra, o
problema do plano.
Ela QUEBRA (é prosa, não valor) mas com piso generoso, e limita a
três linhas: uma célula de oito linhas empurra a linha inteira para
baixo e desalinha a tabela toda. O texto completo fica no `title`,
que o navegador mostra ao passar o mouse — cortar sem dar acesso ao
resto seria esconder informação.
--------------------------------------------------------------------- */
.nexus-table td.nexus-wrap {
min-width: 240px;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.35;
}
/* O CLAMP MORA NUM FILHO, NAO NA CELULA. (homologacao final, item 7.1)
A versao anterior punha `display: -webkit-box` no proprio
. O corte
funcionava, mas com um efeito colateral que so aparecia em tabela com
LINHA COLORIDA: um
que deixa de ser `table-cell` e blockificado
para `flow-root`, e o navegador cria uma CELULA ANONIMA em volta dele
para manter a estrutura da tabela. A celula anonima nao recebe classe
nenhuma — logo, nao recebe o fundo da linha — e a caixa que recebe o
fundo passa a ter a altura do texto, nao a da linha.
Resultado visivel no Centro de Alertas: um retangulo BRANCO no meio de
uma linha colorida, exatamente na coluna da mensagem.
Agora o
continua sendo celula de tabela (fundo cobre a linha
inteira) e quem e cortado e o de dentro. As quatro propriedades
do bloco de baixo continuam funcionando como CONJUNTO. */
.nexus-table td.nexus-clamp {
min-width: 240px;
white-space: normal;
overflow-wrap: anywhere;
vertical-align: top;
}
.nexus-table td.nexus-clamp > .nexus-clamp-text {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Coluna de texto longo COM folga — o "Achado" da auditoria de compras,
que traz tipo, resumo e referência no mesmo lugar. */
/* `overflow-wrap` aqui pelo mesmo motivo das outras duas classes de
prosa: um codigo de produto sem espaco
(OLEO-LUBRIF-SAE-15W40-BALDE-20L) nao tem onde quebrar e passa a
ditar a largura minima da coluna inteira. Era a unica das tres que
nao declarava. */
.nexus-table td.nexus-wrap-wide,
.nexus-table th.nexus-wrap-wide {
min-width: 320px;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.35;
}
/* =====================================================================
PISO DE LARGURA DECLARADO POR COLUNA (homologacao final, itens 1.2/3/5/6)
Mesmo mecanismo do alinhamento: a classe sai de NexusColumn, e vale
para o
e para o
ao mesmo tempo. O piso posicional de 112px
de uma coluna numerica foi calibrado para moeda inteira e erra nos
dois sentidos — e era essa a causa de duas coisas diferentes:
· o panorama OR|FCST|RE (doze colunas numericas) nao cabia em
desktop e nascia com rolagem horizontal;
· a Quantidade com quatro decimais, no historico da auditoria de
compras, era espremida contra a coluna vizinha.
`compact` e `wide` corrigem cada um desses casos onde a tela DECLARA
qual e — nunca por palpite posicional.
===================================================================== */
.nexus-table.nexus-w1-compact thead th:nth-child(1),
.nexus-table.nexus-w1-compact tbody td:nth-child(1),
.nexus-table.nexus-w1-compact tfoot td:nth-child(1) { min-width: 76px; }
.nexus-table.nexus-w1-wide thead th:nth-child(1),
.nexus-table.nexus-w1-wide tbody td:nth-child(1),
.nexus-table.nexus-w1-wide tfoot td:nth-child(1) { min-width: 148px; }
.nexus-table.nexus-w2-compact thead th:nth-child(2),
.nexus-table.nexus-w2-compact tbody td:nth-child(2),
.nexus-table.nexus-w2-compact tfoot td:nth-child(2) { min-width: 76px; }
.nexus-table.nexus-w2-wide thead th:nth-child(2),
.nexus-table.nexus-w2-wide tbody td:nth-child(2),
.nexus-table.nexus-w2-wide tfoot td:nth-child(2) { min-width: 148px; }
.nexus-table.nexus-w3-compact thead th:nth-child(3),
.nexus-table.nexus-w3-compact tbody td:nth-child(3),
.nexus-table.nexus-w3-compact tfoot td:nth-child(3) { min-width: 76px; }
.nexus-table.nexus-w3-wide thead th:nth-child(3),
.nexus-table.nexus-w3-wide tbody td:nth-child(3),
.nexus-table.nexus-w3-wide tfoot td:nth-child(3) { min-width: 148px; }
.nexus-table.nexus-w4-compact thead th:nth-child(4),
.nexus-table.nexus-w4-compact tbody td:nth-child(4),
.nexus-table.nexus-w4-compact tfoot td:nth-child(4) { min-width: 76px; }
.nexus-table.nexus-w4-wide thead th:nth-child(4),
.nexus-table.nexus-w4-wide tbody td:nth-child(4),
.nexus-table.nexus-w4-wide tfoot td:nth-child(4) { min-width: 148px; }
.nexus-table.nexus-w5-compact thead th:nth-child(5),
.nexus-table.nexus-w5-compact tbody td:nth-child(5),
.nexus-table.nexus-w5-compact tfoot td:nth-child(5) { min-width: 76px; }
.nexus-table.nexus-w5-wide thead th:nth-child(5),
.nexus-table.nexus-w5-wide tbody td:nth-child(5),
.nexus-table.nexus-w5-wide tfoot td:nth-child(5) { min-width: 148px; }
.nexus-table.nexus-w6-compact thead th:nth-child(6),
.nexus-table.nexus-w6-compact tbody td:nth-child(6),
.nexus-table.nexus-w6-compact tfoot td:nth-child(6) { min-width: 76px; }
.nexus-table.nexus-w6-wide thead th:nth-child(6),
.nexus-table.nexus-w6-wide tbody td:nth-child(6),
.nexus-table.nexus-w6-wide tfoot td:nth-child(6) { min-width: 148px; }
.nexus-table.nexus-w7-compact thead th:nth-child(7),
.nexus-table.nexus-w7-compact tbody td:nth-child(7),
.nexus-table.nexus-w7-compact tfoot td:nth-child(7) { min-width: 76px; }
.nexus-table.nexus-w7-wide thead th:nth-child(7),
.nexus-table.nexus-w7-wide tbody td:nth-child(7),
.nexus-table.nexus-w7-wide tfoot td:nth-child(7) { min-width: 148px; }
.nexus-table.nexus-w8-compact thead th:nth-child(8),
.nexus-table.nexus-w8-compact tbody td:nth-child(8),
.nexus-table.nexus-w8-compact tfoot td:nth-child(8) { min-width: 76px; }
.nexus-table.nexus-w8-wide thead th:nth-child(8),
.nexus-table.nexus-w8-wide tbody td:nth-child(8),
.nexus-table.nexus-w8-wide tfoot td:nth-child(8) { min-width: 148px; }
.nexus-table.nexus-w9-compact thead th:nth-child(9),
.nexus-table.nexus-w9-compact tbody td:nth-child(9),
.nexus-table.nexus-w9-compact tfoot td:nth-child(9) { min-width: 76px; }
.nexus-table.nexus-w9-wide thead th:nth-child(9),
.nexus-table.nexus-w9-wide tbody td:nth-child(9),
.nexus-table.nexus-w9-wide tfoot td:nth-child(9) { min-width: 148px; }
.nexus-table.nexus-w10-compact thead th:nth-child(10),
.nexus-table.nexus-w10-compact tbody td:nth-child(10),
.nexus-table.nexus-w10-compact tfoot td:nth-child(10) { min-width: 76px; }
.nexus-table.nexus-w10-wide thead th:nth-child(10),
.nexus-table.nexus-w10-wide tbody td:nth-child(10),
.nexus-table.nexus-w10-wide tfoot td:nth-child(10) { min-width: 148px; }
.nexus-table.nexus-w11-compact thead th:nth-child(11),
.nexus-table.nexus-w11-compact tbody td:nth-child(11),
.nexus-table.nexus-w11-compact tfoot td:nth-child(11) { min-width: 76px; }
.nexus-table.nexus-w11-wide thead th:nth-child(11),
.nexus-table.nexus-w11-wide tbody td:nth-child(11),
.nexus-table.nexus-w11-wide tfoot td:nth-child(11) { min-width: 148px; }
.nexus-table.nexus-w12-compact thead th:nth-child(12),
.nexus-table.nexus-w12-compact tbody td:nth-child(12),
.nexus-table.nexus-w12-compact tfoot td:nth-child(12) { min-width: 76px; }
.nexus-table.nexus-w12-wide thead th:nth-child(12),
.nexus-table.nexus-w12-wide tbody td:nth-child(12),
.nexus-table.nexus-w12-wide tfoot td:nth-child(12) { min-width: 148px; }
.nexus-table.nexus-w13-compact thead th:nth-child(13),
.nexus-table.nexus-w13-compact tbody td:nth-child(13),
.nexus-table.nexus-w13-compact tfoot td:nth-child(13) { min-width: 76px; }
.nexus-table.nexus-w13-wide thead th:nth-child(13),
.nexus-table.nexus-w13-wide tbody td:nth-child(13),
.nexus-table.nexus-w13-wide tfoot td:nth-child(13) { min-width: 148px; }
.nexus-table.nexus-w14-compact thead th:nth-child(14),
.nexus-table.nexus-w14-compact tbody td:nth-child(14),
.nexus-table.nexus-w14-compact tfoot td:nth-child(14) { min-width: 76px; }
.nexus-table.nexus-w14-wide thead th:nth-child(14),
.nexus-table.nexus-w14-wide tbody td:nth-child(14),
.nexus-table.nexus-w14-wide tfoot td:nth-child(14) { min-width: 148px; }
.nexus-table.nexus-w15-compact thead th:nth-child(15),
.nexus-table.nexus-w15-compact tbody td:nth-child(15),
.nexus-table.nexus-w15-compact tfoot td:nth-child(15) { min-width: 76px; }
.nexus-table.nexus-w15-wide thead th:nth-child(15),
.nexus-table.nexus-w15-wide tbody td:nth-child(15),
.nexus-table.nexus-w15-wide tfoot td:nth-child(15) { min-width: 148px; }
.nexus-table.nexus-w16-compact thead th:nth-child(16),
.nexus-table.nexus-w16-compact tbody td:nth-child(16),
.nexus-table.nexus-w16-compact tfoot td:nth-child(16) { min-width: 76px; }
.nexus-table.nexus-w16-wide thead th:nth-child(16),
.nexus-table.nexus-w16-wide tbody td:nth-child(16),
.nexus-table.nexus-w16-wide tfoot td:nth-child(16) { min-width: 148px; }
/* A faixa de grupo so vale para o cabecalho de baixo: o `nth-child` das
regras de alinhamento e de piso conta celulas DENTRO da propria
,
entao a faixa nao interfere nelas. */
.nexus-table thead tr.nexus-colgroup th {
text-align: center;
padding-bottom: 2px;
font-size: .72rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--gps-color-text-muted);
border-bottom: 1px solid var(--gps-color-border);
white-space: nowrap;
}
.nexus-table thead tr.nexus-colgroup th.is-empty { border-bottom-color: transparent; }
/* CABECALHO DE GRUPO CENTRALIZADO sobre a largura TOTAL do proprio grupo
(colspan). Antes, as regras de alinhamento por coluna
(.nexus-aN-num thead th:nth-child(N)) tambem alcancavam as celulas da
faixa de grupo — que e uma
propria com poucas celulas — e jogavam
"FORECAST" e "REALIZADO" para a direita. A faixa nao pertence ao
contrato de colunas: a especificidade abaixo (tres classes repetidas) a
isola dele sem tocar nas regras das colunas. */
.nexus-table.nexus-table.nexus-table thead tr.nexus-colgroup th {
text-align: center;
min-width: 0;
font-variant-numeric: normal;
}
/* O cabecalho de baixo gruda abaixo da faixa; a faixa gruda no topo. */
.nexus-table thead tr.nexus-colgroup th { top: 0; z-index: 2; }
.nexus-table thead tr.nexus-colgroup + tr th { top: 22px; }
/* =====================================================================
GRADE FINANCEIRA DENSA — o panorama e a carteira por contrato.
Respiro menor entre colunas e um ponto de fonte a menos NO NUMERO.
Medida, nao gosto: com doze colunas financeiras, os 16px de respiro
padrao de cada lado somam 384px — mais do que uma coluna inteira. O
texto da primeira coluna e o cabecalho mantem o tamanho: encolher a
IDENTIFICACAO para caber mais numero seria trocar legibilidade por
densidade, que e o contrario do pedido.
===================================================================== */
/* MEDIDO no navegador, 1440x900, panorama de 14 colunas com o pior valor
realista ("-R$ 99.999.999") em cada celula financeira:
respiro 16px (padrao) ......... 1401px nao cabe em 1230px
respiro 8px + fonte .84 ...... 1298px nao cabe
respiro 6px + fonte .80 ...... 1249px nao cabe por 19px
respiro 5px + "+" de 36px .... 1211px CABE
O respiro entre dois numeros a direita e a soma dos dois lados: 10px.
Abaixo disso as colunas encostam. */
.nexus-grid-dense .nexus-table { --nexus-cell-padding-x: 5px; }
.nexus-grid-dense .nexus-table.nexus-a1-center thead th:nth-child(1),
.nexus-grid-dense .nexus-table.nexus-a1-center tbody td:nth-child(1) { min-width: 36px; }
/* LEGIBILIDADE DOS VALORES (2026-10-03): valores monetarios e percentuais passam de .8rem para .86rem
(12,8 -> 13,76 px, cerca de 1 px a mais). O nome do contrato/mes (primeira coluna) e os cabecalhos NAO mudam. Vale
para a carteira de Contratos, para o Panorama geral e para os detalhes expandidos pelo "+" (mesma grade).
O PIOR CASO continua cabendo (NRGFVB001: todas as celulas com "-R$ 99.999.999" em 1440 px). Medido: .8rem = 1213 px,
.86rem com os pisos posicionais = 1272 px (nao cabe), .86rem SEM os pisos = 1215 px. Os pisos de 112 px nas colunas
numericas (e 84 px na segunda) eram folga: com texto de 106 px mais o respiro de 10 px a coluna ja passa de 112 px
sozinha, e com valor comum (R$ 514.435) o piso so alarga o que nao precisa. Sem eles as colunas seguem o conteudo, o
respiro de 5 px de cada lado continua, e o nome do mes continua sem quebrar (nowrap). Se a soma ainda passar da
largura util, a rolagem e DENTRO do conteiner da tabela. */
.nexus-grid-dense .nexus-table tbody td { font-size: .86rem; }
.nexus-grid-dense .nexus-table.nexus-table thead th,
.nexus-grid-dense .nexus-table.nexus-table tbody td { min-width: 0; }
.nexus-grid-dense .nexus-table tbody td:first-child { font-size: .875rem; }
.nexus-grid-dense .nexus-table thead th { font-size: .72rem; }
/* PENDENCIAS SEM CODIGO DE PEC (Fontes, D-038): poucas linhas e colunas de largura pelo CONTEUDO. Sem os pisos posicionais
(140 px na primeira coluna, 112 px nas numericas), a tabela cabe em notebook sem rolagem; abaixo disso a rolagem e
DENTRO do conteiner. */
#valores-sem-pec .nexus-table.nexus-table thead th,
#valores-sem-pec .nexus-table.nexus-table tbody td { min-width: 0; }
/* A COLUNA DE IDENTIFICACAO da grade densa nao precisa do piso
posicional de 140px do sistema visual: ela guarda "Setembro" ou
"017397 - NATURA...", e o piso generico foi calibrado para a primeira
coluna do caso geral. Aqui cada pixel dela sai de uma coluna de
numero. O nome do mes continua sem quebrar. */
.nexus-grid-dense .nexus-table thead th:nth-child(2),
.nexus-grid-dense .nexus-table tbody td:nth-child(2) { min-width: 84px; }
.nexus-grid-dense .nexus-table:not(.nexus-a1-center) thead th:first-child,
.nexus-grid-dense .nexus-table:not(.nexus-a1-center) tbody td:first-child { min-width: 0; }
/* ---------------------------------------------------------------------
ROLAGEM INTERNA — o contorno já tem `overflow-x: auto`. Falta dizer ao
leitor que há mais à direita: sem pista, a coluna cortada parece
ausente em vez de fora de vista.
--------------------------------------------------------------------- */
.nexus-table-wrap { scrollbar-gutter: stable; }
@media (max-width: 1280px) {
/* Em tela estreita a rolagem interna é a regra, não a exceção. */
.nexus-table-wrap { overflow-x: auto; }
}
/* ---------------------------------------------------------------------
COLUNA DE AÇÕES FIXA À DIREITA.
Numa tabela larga (Ações, Alertas, Recorrentes, Compras, Fontes...) a coluna de comandos ficava além da borda direita e só se alcançava
rolando — o que escondia Abrir, Histórico e Excluir justamente nas telas de trabalho. `NexusDataTable` marca a tabela com `nexus-act-last`
quando a ÚLTIMA coluna é de ações; ela fica presa à direita, o cabeçalho acompanha, e as demais colunas rolam por baixo.
· O fundo padrão vem de `:where()` (especificidade zero): destaque de linha, `:hover` e `is-attention` — que pintam o `td` — continuam valendo
e a célula fixa não destoa da linha.
· Sombra só à esquerda, para separar a coluna presa do conteúdo que rola por baixo dela.
· `scroll-padding-right` no contorno: o foco de teclado numa célula escondida atrás da coluna fixa não a deixa coberta.
· Detalhe expansivel (`nexus-row-detail`) atravessa todas as colunas e não é fixado.
--------------------------------------------------------------------- */
.nexus-table.nexus-act-last thead tr:last-child th:last-child,
.nexus-table.nexus-act-last tbody tr:not(.nexus-row-detail) td:last-child,
.nexus-table.nexus-act-last tfoot td:last-child {
position: sticky;
right: 0;
box-shadow: -10px 0 10px -10px rgba(15, 23, 42, .30);
}
.nexus-table.nexus-act-last thead tr:last-child th:last-child { z-index: 3; }
.nexus-table.nexus-act-last tbody tr:not(.nexus-row-detail) td:last-child,
.nexus-table.nexus-act-last tfoot td:last-child { z-index: 2; }
.nexus-table.nexus-act-last :where(tbody tr:not(.nexus-row-detail) td:last-child) { background: var(--gps-color-surface); }
.nexus-table.nexus-act-last :where(tbody tr.is-section td:last-child) { background: #F4F6F8; }
.nexus-table-wrap:has(> .nexus-act-last) { scroll-padding-right: 15rem; }
/* Celular: a coluna presa não pode ocupar a tela. Os botões ficam empilhados (todos continuam disponíveis, com alvo de toque inteiro) e a célula passa a ter
a largura do maior botão; o resto da linha rola por baixo. */
@media (max-width: 640px) {
.nexus-table-wrap:has(> .nexus-act-last) { scroll-padding-right: 7rem; }
.nexus-table.nexus-act-last td.nexus-actions { white-space: normal; width: 1%; }
.nexus-table.nexus-act-last td.nexus-actions .gps-btn {
display: block;
width: 100%;
min-height: 40px;
margin: 3px 0;
text-align: center;
}
.nexus-table.nexus-act-last td.nexus-actions .gps-btn + .gps-btn { margin-left: 0; }
}
/* ---------------------------------------------------------------------
MODAL COM TABELA LONGA — título e cabeçalho fixos.
Rolando cem registros, o leitor perde as duas âncoras ao mesmo tempo:
QUAL item está analisando e O QUE cada coluna significa. As duas
ficam presas; só o corpo rola.
--------------------------------------------------------------------- */
.nexus-modal-body .nexus-table-wrap {
max-height: min(60vh, 520px);
overflow-y: auto;
}
.nexus-modal-body .nexus-table thead th {
position: sticky;
top: 0;
z-index: 2;
/* Fundo OPACO: com fundo transparente as linhas passariam por baixo
do cabeçalho e ele ficaria ilegível durante a rolagem. */
background: var(--gps-color-bg);
}
/* ---------------------------------------------------------------------
CABEÇALHO DA COMPETÊNCIA EXPANDIDA — o resumo e a ação que o audita.
--------------------------------------------------------------------- */
.nexus-month-summary-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gps-space-3);
flex-wrap: wrap;
margin-bottom: var(--gps-space-2);
}
/* =====================================================================
ABAS DO WORKSPACE — navegação entre vistas do MESMO objeto.
Não são um menu: o contrato continua o mesmo, muda o que se olha
nele. Por isso ficam dentro do card do contrato e não no topo da
página, onde competiriam com a navegação do sistema.
A aba ativa é marcada por uma barra inferior, não por caixa
preenchida: o preenchimento pesaria mais que o título do contrato
logo acima, invertendo a hierarquia.
===================================================================== */
.nexus-tabs {
display: flex;
flex-wrap: wrap;
gap: 2px;
border-bottom: 1px solid var(--gps-color-border);
margin-bottom: var(--gps-space-3);
}
.nexus-tab {
appearance: none;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
padding: var(--gps-space-2) var(--gps-space-3);
font: inherit;
font-size: .875rem;
font-weight: 550;
color: var(--gps-color-text-muted);
cursor: pointer;
/* O deslocamento de 1px cobre a borda do contêiner, para a barra da
aba ativa não ficar flutuando acima dela. */
margin-bottom: -1px;
}
.nexus-tab:hover { color: var(--gps-color-text); }
.nexus-tab.is-active {
color: var(--gps-color-primary);
border-bottom-color: var(--gps-color-primary);
}
.nexus-tab:focus-visible {
outline: 2px solid var(--gps-color-primary);
outline-offset: -2px;
}
/* =====================================================================
GRAFICO — a decisao de tamanho e do sistema visual, nao do SVG.
O panorama desenha EBITDA FCST x RE por competencia num SVG inline. O
elemento ja carregava `class="nexus-chart"`, mas a regra nao existia:
sem ela, `preserveAspectRatio="meet"` com altura travada deixava o
desenho centralizado com folga num container mais largo que o viewBox,
em vez de crescer.
===================================================================== */
.nexus-chart {
display: block;
width: 100%;
max-width: 720px;
height: auto;
}
/* =====================================================================
TEXTO LONGO FORA DA TABELA — aviso, dica de campo e lista curta.
Dentro da tabela, `nexus-wrap`/`nexus-clamp` decidem a quebra. Fora dela não
havia regra, e estes três blocos citam DADO, não só prosa: nome de
arquivo sem espaço ("RELATORIO_FOTOGRAFICO_UNIDADE_2026_09_17.jpg"),
caminho de pasta, hash SHA-256 de 64 caracteres, nome de cliente.
Os três defeitos que isso produzia, lidos na marcação real:
· dica de campo (`.nexus-form-hint`) dentro de `.nexus-form-grid`: o campo
tem `min-width: 0`, então a coluna NÃO alarga — o texto sem ponto
de quebra transborda e passa POR CIMA da coluna vizinha
("Selecionado: " na evidência da visita);
· subtítulo do diálogo (`NexusModal` usa `.nexus-form-hint`): `.nexus-modal`
tem `overflow: hidden`, então o nome do arquivo na conferência de
importação era CORTADO, sem rolagem nem reticências;
· aviso (`.gps-alert`) e lista de cartão (`.nexus-list`): o nome livre
do compromisso/cliente sem espaço estourava o cartão; o hash do
pacote de consolidação (≈500px em fonte mono, estimado) ficava sem
folga nenhuma em 768px.
`anywhere` só age quando uma palavra não cabe na linha: prosa comum
continua quebrando nos espaços. Botões mantêm `white-space: nowrap`
e não são afetados. */
.gps-alert,
.nexus-form-hint,
.nexus-list li { overflow-wrap: anywhere; }
/* =====================================================================
SHELL E COMPONENTES COMPARTILHADOS — revisao responsiva 1440/1024/768
(Agente E, 2026-09-18). Bloco ADITIVO; ver RESPONSIVE_REVIEW.md §6.
Medido num navegador sobre uma bancada estatica com ESTA folha e a
marcacao real dos componentes (nao a aplicacao):
E1 Rodape do dialogo (.nexus-modal-footer): `justify-content: flex-end`
sem quebra. Quando os botoes nao cabem, o excesso sai pela
ESQUERDA, e `.nexus-modal { overflow: hidden }` o esconde. Medido:
dialogo Small (540px) com os quatro botoes do editor do Forecast
-> "Fechar" comecava em -18px, cortado. O botao que fecha o
dialogo era justamente o que sumia.
E2 Cabecalho de secao (.gps-card-head): acoes `flex: 0 0 auto` sem
quebra. Num cartao estreito (grade de 2 colunas em 768px, 345px)
quatro botoes passavam 261px da borda do cartao e a PAGINA
inteira rolava na horizontal (documento 990px em viewport 753px).
Em 1024px, sem estouro, o titulo era espremido a 155px — uma
palavra por linha. Agora o titulo tem base de 160px e as acoes
descem para a linha de baixo, alinhadas a direita, quando nao
cabem ao lado dele.
E3 Barra superior executiva: `.nexus-exec-nav { flex: 1 }` tem base 0,
entao a barra nunca quebrava linha por causa da navegacao — ela
espremia a navegacao. Medido: 1024px -> navegacao com 192px e os
tres destinos EMPILHADOS (barra de 129px); 768px -> 240px, idem
(barra de 167px). A regra de <=900px (`width: 100%`) nunca agia,
porque a base 0 do `flex: 1` tem precedencia sobre `width`. Com
base `auto` a largura real dos tres destinos decide a quebra, e a
regra de <=900px volta a valer.
E4 Acoes da barra de filtros e cabecalho do shell sem quebra: nao
estouraram na medicao, mas nao tinham para onde ir se um botao a
mais entrasse. Quebram agora em vez de empurrar a pagina.
===================================================================== */
/* E1 — nenhum botao de dialogo fica fora do quadro. */
.nexus-modal-footer { flex-wrap: wrap; }
/* E2 — titulo com piso, acoes que quebram. O `:not()` protege cabecalhos
montados a mao cujo primeiro filho ja seja o grupo de acoes. */
.gps-card-head { flex-wrap: wrap; }
.gps-card-head > :first-child:not(.gps-card-actions) { flex: 1 1 160px; min-width: 0; }
.gps-card-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
/* E3 — removido na unificacao do shell (2026-09-21): a barra superior
executiva deixou de existir; ver bloco APPLICATION SHELL. */
/* E4 */
.nexus-filter-actions { flex-wrap: wrap; }
.gps-header { flex-wrap: wrap; gap: var(--gps-space-2) var(--gps-space-3); }
.gps-header-user { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
/* =====================================================================
TABELA COM PRIMEIRA COLUNA PRESA — auxiliar `nexus-sticky-first`
(Agente E, homologacao final, 2026-09-19). Bloco ADITIVO; ver
RESPONSIVE_REVIEW.md §7. Nenhuma regra acima foi editada.
Tabela larga rola DENTRO do contorno (`.nexus-table-wrap`), nunca a
pagina (DESIGN_SYSTEM §2). O preco dessa regra, CALCULADO pelos pisos
declarados na lista de Contratos (12 colunas: 240px do nome + 9 x 112px
numericos + situacao + acoes, alem do recuo de cada celula): a tabela
passa de 1.300px e rola por dentro ja em 1440px — e rolar ate "EBITDA
RE" tirava o nome do contrato de vista, deixando o numero sem dono.
Quem precisa marca o CONTAINER da tabela com `nexus-sticky-first`; a
primeira coluna (cabecalho e celulas) fica presa a esquerda enquanto
as demais rolam. O cabecalho ja era preso no topo (`thead th`), entao
a celula do canto fica presa nos dois eixos, por cima de tudo.
Tres cuidados, todos deliberados:
· FUNDO OPACO com especificidade baixa (`:where`). Sem fundo, os
valores passariam visiveis por baixo do nome; com especificidade
alta, o fundo de atencao/critico/hover da linha (0-2-3) perderia
para ele e a linha sinalizada ficaria com a primeira celula branca.
· A LINHA DE DETALHE (`nexus-row-detail`) fica fora: ela e uma celula
so, com colspan, e presa ela cobriria a tabela inteira.
· A PRIMEIRA CELULA TEM DE SER CELULA DE TABELA. `nexus-clamp` faz a
celula virar bloco (-webkit-box) e uma celula-bloco nao gruda na
rolagem; o recorte do texto vai num dentro dela.
Abaixo de 640px a coluna solta: numa tela de celular, uma coluna presa
de 240px ocuparia a maior parte da largura util.
===================================================================== */
.nexus-sticky-first .nexus-table thead th { z-index: 2; }
.nexus-sticky-first .nexus-table thead th:first-child { left: 0; z-index: 3; }
.nexus-sticky-first .nexus-table tbody tr:not(.nexus-row-detail) > td:first-child,
.nexus-sticky-first .nexus-table tfoot td:first-child {
position: sticky;
left: 0;
z-index: 1;
box-shadow: inset -1px 0 0 var(--gps-color-border);
}
:where(.nexus-sticky-first .nexus-table tbody tr:not(.nexus-row-detail)) > td:first-child {
background: var(--gps-color-surface);
}
@media (max-width: 640px) {
.nexus-sticky-first .nexus-table thead th:first-child { left: auto; }
.nexus-sticky-first .nexus-table tbody tr:not(.nexus-row-detail) > td:first-child,
.nexus-sticky-first .nexus-table tfoot td:first-child { position: static; box-shadow: none; }
}
/* =====================================================================
AUXILIARES RESPONSIVOS COMPARTILHADOS — bloco do Agente F
(fechamento de homologacao, 2026-09-19). Bloco ADITIVO e DELIMITADO:
nenhuma regra acima foi editada. Ver RESPONSIVE_REVIEW.md secao 8.
F1 `nexus-table-tall` — ROLAGEM VERTICAL DENTRO DA TABELA.
Achado, medido na folha: `.nexus-table thead th` ja declara
`position: sticky; top: 0`, e `.nexus-table-wrap` ja e um
contexto de rolagem (com `overflow-x: auto`, o eixo Y computa
`auto` pela propria especificacao). Mas o contorno NAO TEM ALTURA
MAXIMA: ele cresce ate caber a tabela inteira, nunca rola em Y, e
o cabecalho preso nunca tem contra o que se prender. Na pratica, o
`sticky` do cabecalho era decorativo — quem rolava era a pagina, e
o cabecalho saia de vista junto com o menu.
O auxiliar da um teto ao contorno. A partir dai o cabecalho gruda
de verdade, e a pagina para de crescer com o numero de linhas.
O teto e relativo a ALTURA DA JANELA (`70svh`), nao um numero
fixo de pixels: numa tela de 1080px um teto de 480px desperdicaria
meia tela, e num notebook de 768px o mesmo numero cobriria tudo o
que ha para ver. `svh` (small viewport height) e a unidade que nao
muda quando a barra do navegador movel se recolhe — com `vh`, a
tabela mudaria de altura durante a rolagem.
O teto e `max(220px, 70svh)`, e NAO um `min-height`. A diferenca
importa: `min-height` daria 220px de altura a TODA tabela, e uma
tabela de duas linhas passaria a exibir um vao branco de 150px.
Dentro do `max()` o piso age so onde precisa — numa janela baixa,
impedindo que 70% vire uma fresta de duas linhas. A altura continua
decidida pelo conteudo ate o teto.
CONFERIDO ANTES DE ESCREVER: `.gps-card > .nexus-table-wrap`
(sangria ate a borda) e seletor de FILHO DIRETO e nao alcanca a
tabela dentro de um SectionCard, porque o corpo do cartao
(`.gps-card-body`) ja e um nivel no meio. Acrescentar o `div` do
auxiliar nao tira nada de quem ja tinha, e por isso este bloco NAO
redeclara aquela regra — redeclarar traria a sangria para telas que
hoje nao a tem.
A regra nao muda tela que nao a pede: vale so onde a classe foi
escrita. E este bloco traz SO ela — um auxiliar a mais, sem chamador,
seria CSS que ninguem usa e que a proxima pessoa teria de investigar
antes de poder apagar.
===================================================================== */
.nexus-table-tall > .nexus-table-wrap {
max-height: max(220px, 70svh);
overflow-y: auto;
}
/* =====================================================================
APPLICATION SHELL — barra lateral fixa, marca sempre visivel, rolagem
so na area principal (2026-09-21). Bloco ADITIVO e DELIMITADO: e ele
que governa o shell de TODOS os papeis, inclusive o Diretor Executivo
(o shell executivo proprio foi unificado a este).
O QUE ELE GARANTE, uma vez, para todas as telas:
· a janela (html/body) NAO rola. Quem rola e `main.gps-shell-content`,
com rolagem vertical propria. Cabecalho, barra lateral e marca
ficam onde estao enquanto o conteudo passa;
· a barra lateral tem a altura da viewport. O bloco da marca fica
preso no topo dela; se o menu for mais longo que a tela, so a
LISTA de itens rola, por baixo da marca;
· rolagem horizontal nunca e da pagina: a cadeia `min-width: 0`
(.gps-shell-main, .gps-shell-content > *) deixa a coluna encolher
ate a viewport, e a tabela larga rola DENTRO de `.nexus-table-wrap`
(overflow-x: auto, DESIGN_SYSTEM §2). Se um bloco mal dimensionado
ainda passar da largura, a rolagem fica restrita a area principal
— nunca desloca barra lateral e cabecalho, e nada fica inalcancavel.
TRES MODOS, por largura da viewport:
>= 1440px barra aberta, 260px, com o lockup prata.
1024-1439px TRILHO recolhido (72px) com "NEXUS" em texto e o botao
de menu; o botao abre a barra inteira POR CIMA do
conteudo, que nao se desloca. As tabelas largas ganham
188px de largura util sem perder o acesso ao menu.
< 1024px GAVETA: a barra sai da tela e e aberta pelo botao
hamburguer do cabecalho, que tambem traz a marca.
SEM DEPENDER DE INTERATIVIDADE. O MainLayout e renderizado de forma
ESTATICA (as paginas declaram @rendermode; o layout nao). Um @onclick
no shell simplesmente nao existiria. O estado aberto/fechado e um
(`.nexus-nav-toggle`), e os botoes sao