/* ENLACE — tokens da identidade. Cores lidas do logo da ENBASE (base/static/enbase.png), amostradas no pixel. Importe este arquivo ANTES do css das telas: ele só define variáveis e alguns padrões; não impõe layout. */ :root { /* --- marca ------------------------------------------------------------ */ --enlace-verde: #00B399; /* símbolo, estado ativo, total conferido */ --enlace-verde-escuro: #007A66; /* link e texto: o verde puro NÃO tem */ /* contraste suficiente sobre branco */ --enlace-grafite: #212620; /* texto, moldura da marca, barra do topo */ /* --- superfícies ------------------------------------------------------ */ --enlace-fundo: #F3F4F2; /* fundo de tela, neutro puxado ao grafite */ --enlace-branco: #FFFFFF; /* cartão, tabela */ --enlace-verde-fundo: #F0F7F5; /* faixa de total conferido */ /* --- texto e traço ---------------------------------------------------- */ --enlace-cinza: #5A625E; /* rótulo, unidade, apoio (AA sobre fundo) */ --enlace-cinza-claro: #8A938E; /* apoio sobre grafite */ --enlace-linha: #DDE0DC; /* borda de cartão */ --enlace-linha-tabela: #E6E9E5; /* linha interna de tabela */ /* --- sinal ------------------------------------------------------------ */ --enlace-terra: #A8471C; /* alerta e divergência. Complementar do */ /* verde — não é vermelho de fora da paleta*/ /* --- letra ------------------------------------------------------------ */ /* UMA FAMILIA SO, em duas larguras. A Montserrat estava aqui sem motivo escrito - e a mono, ao lado, tinha o dela em duas linhas. Ela e geometrica e larga, desenhada para nome de marca; numa tabela de treze colunas a 14px come largura e fica com cor irregular. A Plex Sans e a IRMA DE DESENHO da Plex Mono que ja estava no sistema: mesmas proporcoes, mesmo esqueleto, feita para interface tecnica e leitura de dado. Casar as duas faz o numero e o rotulo parecerem a mesma voz - que e o que sao. E o sistema deixa de importar duas familias para importar uma. 10/09/2026. */ --enlace-fonte: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --enlace-mono: "IBM Plex Mono", "Consolas", monospace; /* --- forma ------------------------------------------------------------- TRES RAIOS, e nao onze. O CSS das telas tinha 0, 2, 3, 4, 5, 6, 8, 9, 11, 20 e 50% - o botao era pilula e o cartao tinha 4px, sem sistema nenhum. Raio nao e enfeite: e o que diz o TAMANHO da peca. Campo e botao pequenos, cartao maior, tabela reta porque ela e uma grade. */ --enlace-r-campo: 4px; /* campo, botao, etiqueta - o que se toca */ --enlace-r-caixa: 8px; /* cartao, painel - o que contem */ --enlace-r-reto: 0; /* tabela: grade nao tem canto redondo */ /* --- estrutura --------------------------------------------------------- O CHROME E GRAFITE, e sempre foi - esta escrito aqui embaixo, no .topo, desde que este arquivo nasceu. O estilo.css das telas inventou depois um teal (#113E38) para o menu e para o cabecalho de tabela, e esse teal NAO esta entre os tokens da marca. Dois arquivos discordando sobre a identidade, e o mais novo venceu calado. Reconciliado em 10/09/2026: a estrutura e o grafite do kit. Com a lateral em grafite o verde volta a ser o unico verde da tela - e por isso volta a ser visto. */ --enlace-estrutura: var(--enlace-grafite); /* --- nomes que as telas do sistema já usam ---------------------------- */ --acento: var(--enlace-verde); --meio: var(--enlace-terra); } /* A marca tem uma única cor de fundo prevista. Se um dia houver tema escuro, troque só os tokens aqui — nunca a cor solta dentro do componente. */ body { margin: 0; background: var(--enlace-fundo); color: var(--enlace-grafite); font-family: var(--enlace-fonte); } a { color: var(--enlace-verde-escuro); } a:hover { color: var(--enlace-verde); } /* Todo número em coluna usa a monoespaçada: dígito de largura fixa é o que faz o valor alinhar e a divergência saltar aos olhos. */ .num, .mono { font-family: var(--enlace-mono); text-align: right; } .total { font-weight: 700; } .fonte { color: var(--enlace-cinza); font-size: 12px; } .cartao { background: var(--enlace-branco); border: 1px solid var(--enlace-linha); border-radius: var(--enlace-r-caixa); padding: 18px 20px; } table { border-collapse: collapse; } th, td { border-bottom: 1px solid var(--enlace-linha-tabela); padding: 8px 10px; } thead th { color: var(--enlace-cinza); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; background: #F7F8F6; } tr.soma td { background: var(--enlace-verde-fundo); border-top: 2px solid var(--enlace-verde); font-weight: 700; } .erro { border-left: 3px solid var(--enlace-terra); background: #FBEFE9; padding: 12px 14px; } .aviso { border-left: 3px solid var(--enlace-terra); background: #FDF6F1; padding: 12px 14px; } /* Barra do topo. O ENLACE assina a tela inteira; logo de cliente não entra aqui — o logo da empresa vive só nos documentos emitidos. */ .topo { background: var(--enlace-grafite); color: var(--enlace-branco); padding: 13px 22px; display: flex; align-items: center; gap: 28px; } .topo .marca { display: flex; align-items: center; gap: 11px; } .topo .marca img { height: 26px; width: auto; } .topo .marca span { font-weight: 800; font-size: 16px; letter-spacing: .02em; } .topo nav { display: flex; gap: 22px; flex-grow: 1; font-size: 12.5px; font-weight: 600; color: #A9B2AD; } .topo nav a { color: #A9B2AD; text-decoration: none; } .topo nav a:hover { color: var(--enlace-branco); } .topo nav a.ativo { color: var(--enlace-branco); border-bottom: 2px solid var(--enlace-verde); padding-bottom: 3px; }