/* Design System Rio Claro — bundle gerado por tools/sync-ds.mjs Origem: RIO-CLARO/rio-claro-design-system @ fe162ca19424e16b37653eb48ef8786a98cfe5ed Pele: clara ARQUIVO GERADO. Não edite: rode "node tools/sync-ds.mjs" para atualizar. O @import do Google Fonts foi removido de propósito — as fontes são carregadas por no (ver functions/_theme.js). */ /* ======================== tokens/fontes.css ======================== */ /* Fontes Rio Claro. Uma família só, a mesma do site: Open Sans. A decisão de agosto de 2026 descartou Inter e Archivo, e não há caso de uso restante para elas: duas famílias na mesma tela custam mais do que rendem, e a voz da casa é o par 300/700 dentro de uma família, não a troca de família. Título em 300 com a palavra-chave em 700; número de destaque em 800; corpo, interface, tabela e rótulo na mesma Open Sans. Não temos os binários no repositório, então carregamos do Google Fonts. Se o time tiver os woff2, troque este @import por @font-face locais. */ :root { --rc-fonte-titulo: "Open Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, sans-serif; /* @kind font */ --rc-fonte-numero: "Open Sans", -apple-system, sans-serif; /* @kind font */ --rc-fonte-corpo: "Open Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* @kind font */ --rc-fonte-herdada: "Open Sans", -apple-system, "Segoe UI", sans-serif; /* @kind font */ --rc-fonte-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; /* @kind font */ } /* ======================== tokens/cores.css ======================== */ /* ============================================================ CORES RIO CLARO Quatro famílias cromáticas mais três semânticas. Dentro de cada família existe um TOM VIVO (marca, gráficos, ícones, áreas de destaque) e um TOM REBAIXADO (texto e traços finos sobre fundo claro). Contrastes WCAG medidos contra --rc-fundo (#f6f9fb) e --rc-marinho-800 (#09344c). Os degraus que NÃO passam em AA para texto corrido estão marcados FALHA AA. ============================================================ */ :root { /* --- FAMÍLIA MARINHO: estrutura, cabeçalhos, texto de peso --- */ --rc-marinho-50: #eaeff3; /* claro 1.09 FALHA AA · escuro 11.29 AA · fundo de faixa marinho */ --rc-marinho-100: #d3dee5; /* claro 1.29 FALHA AA · escuro 9.55 AA · traço sobre marinho */ --rc-marinho-200: #a9bfcd; /* claro 1.80 FALHA AA · escuro 6.86 AA · texto secundário no escuro */ --rc-marinho-300: #7c9db1; /* claro 2.72 FALHA AA · escuro 4.55 AA · legenda no escuro */ --rc-marinho-400: #4f7a92; /* claro 4.38 AA large · escuro 2.82 FALHA AA · ícone, borda de foco */ --rc-marinho-500: #2d6180; /* claro 6.34 AA · gráficos, hover de link em fundo claro */ --rc-marinho-600: #0f4a68; /* MARINHO SUAVE · claro 9.03 AA · início de gradiente, hover em superfície escura */ --rc-marinho-700: #0b3d57; /* claro 10.92 AA · degrau de apoio do gradiente */ --rc-marinho-800: #09344c; /* MARINHO · claro 12.36 AA · cor do logo, cabeçalhos, títulos, fundos escuros */ --rc-marinho-850: #16303f; /* TINTA · claro 12.99 AA · o marinho dessaturado, texto corrido */ --rc-marinho-900: #06263a; /* MARINHO PROFUNDO · claro 14.76 AA · fim escuro de gradiente, rodapé */ /* --- FAMÍLIA PETRÓLEO: autoridade, ponte entre marinho e turquesa --- */ --rc-petroleo-50: #e7f2f6; /* claro 1.08 FALHA AA · fundo de destaque frio */ --rc-petroleo-100: #cbe3ea; /* claro 1.26 FALHA AA · traço de grade sobre névoa */ --rc-petroleo-200: #9ac9d6; /* claro 1.70 FALHA AA · série clara de gráfico */ --rc-petroleo-300: #6aaec1; /* claro 2.35 FALHA AA · escuro 5.25 AA · dado em foco no escuro */ --rc-petroleo-400: #2b8fa8; /* RIO · claro 3.55 AA large · escuro 3.48 AA large · acento de interface: links, dados em foco, ícones */ --rc-petroleo-500: #17798f; /* claro 4.77 AA · par rebaixado do RIO para texto corrido, hover de link */ --rc-petroleo-600: #025a72; /* PETRÓLEO CLARO · claro 7.33 AA · variante de documentos, gradientes */ --rc-petroleo-700: #005066; /* PETRÓLEO · claro 8.49 AA · cor do logo, uso institucional */ --rc-petroleo-800: #004153; /* claro 10.56 AA · fundo escuro alternativo */ --rc-petroleo-900: #003140; /* claro 13.12 AA · fim de gradiente petróleo */ /* --- FAMÍLIA TURQUESA: vivacidade, assinatura da marca --- */ --rc-turquesa-50: #eaf3f5; /* TURQUESA BRUMA · fundo de seção alternada */ --rc-turquesa-100: #e3f0f4; /* TURQUESA NÉVOA · fundo de tag, chip, destaque sutil */ --rc-turquesa-200: #c2e5e7; /* claro 1.27 FALHA AA · borda de tag, trilha de barra */ --rc-turquesa-300: #93d6d8; /* claro 1.55 FALHA AA · série clara de gráfico */ --rc-turquesa-400: #48c2c5; /* TURQUESA · claro 2.03 FALHA AA · escuro 6.10 AA · logo, borda inferior de cabeçalho, gráficos */ --rc-turquesa-450: #45c1c6; /* TURQUESA CLARO · variante de documentos, quase idêntica ao 400 */ --rc-turquesa-500: #2fa7ab; /* claro 2.74 FALHA AA · hover do turquesa em superfície colorida */ --rc-turquesa-600: #248c90; /* claro 3.80 AA large · ícone e número grande sobre fundo claro */ --rc-turquesa-700: #1e7276; /* claro 5.33 AA · par rebaixado do TURQUESA para texto */ --rc-turquesa-800: #175a5d; /* claro 7.48 AA · texto de ênfase sobre névoa */ --rc-turquesa-900: #104144; /* claro 10.67 AA · título sobre fundo turquesa claro */ /* --- FAMÍLIA NEUTRA: texto, traço, superfície --- */ --rc-neutra-0: #ffffff; /* CARTÃO · superfícies elevadas */ --rc-neutra-50: #f6f9fb; /* FUNDO · fundo padrão de página */ --rc-neutra-100: #f5f9fa; /* FUNDO NÉVOA · fundo alternativo de página */ --rc-neutra-200: #dde5ea; /* LINHA · bordas, divisórias, traços de grade */ --rc-neutra-300: #c3ced6; /* claro 1.51 FALHA AA · borda de campo desabilitado, skeleton */ --rc-neutra-400: #9aa9b4; /* claro 2.28 FALHA AA · texto placeholder, ícone inativo */ --rc-neutra-500: #7d909e; /* claro 3.13 AA large · série neutra de gráfico, borda de controle (3.30 em branco) */ --rc-neutra-550: #66757f; /* claro 4.50 AA · texto placeholder, o menor neutro que ainda passa */ --rc-neutra-600: #5f7889; /* CINZA RIO · claro 4.38 AA large (NÃO passa AA para corpo) · gráfico, ícone, traço */ --rc-neutra-650: #546a78; /* claro 5.35 AA · par rebaixado do cinza rio, usado em toda legenda escrita */ --rc-neutra-700: #485054; /* CINZA · claro 7.79 AA · cor do logo, texto secundário forte */ --rc-neutra-800: #363c40; /* claro 10.58 AA · texto de ênfase neutro */ --rc-neutra-900: #22272a; /* claro 14.27 AA · máximo contraste neutro */ /* --- SEMÂNTICO POSITIVO: ganho, aprovado, isento, meta batida --- */ --rc-positivo-50: #e6f5ef; --rc-positivo-100: #c8ebdd; --rc-positivo-200: #8fd8bd; --rc-positivo-300: #4dc39a; --rc-positivo-400: #009966; /* VIVO · claro 3.46 AA large · gráfico, badge, ícone */ --rc-positivo-500: #00875a; --rc-positivo-600: #1f7a5a; /* TEXTO · claro 4.98 AA · par rebaixado do vivo */ --rc-positivo-700: #186049; --rc-positivo-800: #124b39; --rc-positivo-900: #0d3529; /* --- SEMÂNTICO ATENÇÃO: pendência, prazo, alerta, dourado da marca --- */ --rc-atencao-50: #fff4e6; --rc-atencao-100: #ffe6c7; --rc-atencao-200: #ffcd93; --rc-atencao-300: #ffb15e; --rc-atencao-400: #ff9933; /* VIVO · claro 2.02 FALHA AA · gráfico, badge, ícone */ --rc-atencao-500: #e07d1c; --rc-atencao-600: #a06a12; /* TEXTO · claro 4.35 AA large · use 700 para corpo abaixo de 19px */ --rc-atencao-700: #82550e; /* claro 6.10 AA · par seguro para texto corrido */ --rc-atencao-800: #63400a; --rc-atencao-900: #452c07; /* --- SEMÂNTICO CRÍTICO: erro, perda, bloqueio --- Derivação: partimos do dourado da marca (#ff9933, OKLCH L .77 C .15 H 55) e giramos a matiz para 28 (vermelho quente, não rosado), reduzindo a luminosidade para .58 e mantendo a mesma croma. Isso dá um vermelho da mesma "temperatura" da atenção, que convive com o turquesa sem virar vermelho de framework. O par de texto é o mesmo tom com L .46, o que garante 6.72:1 em fundo claro. */ --rc-critico-50: #fdeceb; --rc-critico-100: #fad5d1; --rc-critico-200: #f3aca4; --rc-critico-300: #e97a6d; --rc-critico-400: #d94436; /* VIVO · claro 4.11 AA large · gráfico, badge, ícone */ --rc-critico-500: #c03728; --rc-critico-600: #a32d22; /* TEXTO · claro 6.72 AA · par rebaixado do vivo */ --rc-critico-700: #84241b; --rc-critico-800: #661c15; --rc-critico-900: #48130f; /* ---------- APELIDOS DA IDENTIDADE (nomes que o time já usa) ---------- */ --rc-marinho-profundo: var(--rc-marinho-900); --rc-marinho: var(--rc-marinho-800); --rc-tinta: var(--rc-marinho-850); --rc-marinho-suave: var(--rc-marinho-600); --rc-petroleo: var(--rc-petroleo-700); --rc-petroleo-claro: var(--rc-petroleo-600); --rc-rio: var(--rc-petroleo-400); --rc-turquesa: var(--rc-turquesa-400); --rc-turquesa-claro: var(--rc-turquesa-450); --rc-turquesa-nevoa: var(--rc-turquesa-100); --rc-turquesa-bruma: var(--rc-turquesa-50); --rc-cinza: var(--rc-neutra-700); --rc-cinza-rio: var(--rc-neutra-600); --rc-linha: var(--rc-neutra-200); --rc-fundo-nevoa: var(--rc-neutra-100); --rc-fundo: var(--rc-neutra-50); --rc-cartao: var(--rc-neutra-0); /* ---------- ALIASES SEMÂNTICOS DE USO ---------- */ --rc-texto-titulo: var(--rc-marinho-800); --rc-texto-corpo: var(--rc-marinho-850); --rc-texto-secundario: var(--rc-neutra-700); --rc-texto-legenda: var(--rc-neutra-650); /* 5.35:1 · o cinza rio vivo não passa AA para texto */ --rc-texto-placeholder: var(--rc-neutra-550); /* 4.50:1 */ --rc-texto-acento: var(--rc-turquesa-600); /* 3.80:1 · a palavra-chave do título, em peso 800. Nunca abaixo de 24px */ --rc-texto-sobretitulo: var(--rc-petroleo-500); /* 4.77:1 · o rótulo micro é pequeno, precisa do par rebaixado */ --rc-texto-link: var(--rc-petroleo-500); /* 4.77:1 · link é texto pequeno, nunca o rio vivo */ --rc-texto-link-hover: var(--rc-petroleo-600); --rc-texto-no-escuro: #ffffff; --rc-texto-no-escuro-fraco: var(--rc-marinho-200); --rc-superficie-pagina: var(--rc-neutra-50); --rc-superficie-alternada: var(--rc-turquesa-50); --rc-superficie-cartao: var(--rc-neutra-0); --rc-superficie-destaque: var(--rc-turquesa-100); --rc-superficie-escura: var(--rc-marinho-800); /* ---------- PAPEL DE ACENTO ---------- A documentação viva tem um eixo de Ajustes que troca qual família manda no acento (borda de cabeçalho, aba ativa, tag, conclusão), e usa estes nomes. Eles precisam existir aqui também: os componentes publicados os referenciam, e sem esta declaração toda referência morre em qualquer projeto que carregue só o styles.css. Foi o que aconteceu com --rc-acento-texto, que existia na documentação e não no contrato. */ --rc-acento: var(--rc-turquesa-400); --rc-acento-nevoa: var(--rc-turquesa-100); --rc-acento-bruma: var(--rc-turquesa-50); --rc-acento-borda: var(--rc-turquesa-300); --rc-acento-forte: var(--rc-turquesa-800); --rc-acento-texto: var(--rc-turquesa-600); /* 3,80:1 — mesmo valor de --rc-texto-acento */ --rc-borda: var(--rc-neutra-200); /* divisória e traço de grade, decorativo */ --rc-borda-forte: var(--rc-neutra-500); /* borda de campo e de botão: 3.30:1 em branco, atende 1.4.11 */ --rc-borda-suave: var(--rc-neutra-300); /* borda de elemento desabilitado, onde o contraste é dispensado */ --rc-borda-acento: var(--rc-turquesa-400); --rc-borda-foco: var(--rc-petroleo-400); --rc-anel-foco: 0 0 0 3px rgba(43, 143, 168, 0.28); --rc-veu-modal: rgba(9, 52, 76, 0.40); /* a única transparência do sistema */ --rc-positivo-vivo: var(--rc-positivo-400); --rc-positivo-texto: var(--rc-positivo-600); --rc-atencao-vivo: var(--rc-atencao-400); --rc-atencao-marca: var(--rc-atencao-600); /* ponto e ícone pequeno sobre fundo atenção 50: o vivo dá só 1.96:1 */ --rc-atencao-texto: var(--rc-atencao-700); --rc-critico-vivo: var(--rc-critico-400); --rc-critico-texto: var(--rc-critico-600); --rc-info-vivo: var(--rc-petroleo-400); --rc-info-texto: var(--rc-petroleo-600); /* ---------- SEQUÊNCIA CATEGÓRICA DE GRÁFICOS ---------- Oito cores, nesta ordem, e a ordem faz parte da validação. Adotadas da mesa (mesa-rioclaro/base-dados-mesa, web/src/lib/graficoTema.ts) em agosto de 2026, porque passaram por checagem computável nos dois temas: faixa de luminosidade, piso de croma, separação sob protanopia e deuteranopia, piso de visão normal e contraste mínimo de 3:1. As seis anteriores eram escolhidas pela marca e no olho. Verde e vermelho não são vizinhos: colapsam sob daltonismo. Mexer numa cor ou na ordem obriga a rodar o validador de novo, senão a garantia se perde. Acima de oito séries não existe matiz nova que se sustente. A nona repete a primeira cor com TRAÇO diferente: 8 cores x 3 traços = 24 séries distinguíveis. Os traços vivem no tema ECharts (RioClaroECharts.tracos), não em token CSS, porque são array de dash e não valor de cor. A paleta da marca (turquesa, marinho, dourado) continua mandando em tudo que não é série de dado: área de destaque, ícone, borda, faixa, peça de marketing. */ --rc-grafico-1: #008cbd; /* azul */ --rc-grafico-2: #9d7c00; /* ocre */ --rc-grafico-3: #587cd0; /* azul violeta */ --rc-grafico-4: #c45d4e; /* terracota */ --rc-grafico-5: #029393; /* teal */ --rc-grafico-6: #b96912; /* âmbar */ --rc-grafico-7: #ac60a6; /* violeta */ --rc-grafico-8: #44954a; /* verde */ /* Escala divergente: perda -> neutro -> ganho */ --rc-divergente-neg-forte: var(--rc-critico-500); --rc-divergente-neg: var(--rc-critico-300); --rc-divergente-neutro: var(--rc-neutra-200); --rc-divergente-pos: var(--rc-positivo-300); --rc-divergente-pos-forte: var(--rc-positivo-500); } /* ======================== tokens/tipografia.css ======================== */ /* ============================================================ TIPOGRAFIA RIO CLARO Open Sans em tudo, uma família só, a mesma do site. Título em Light (300) com a palavra-chave em Bold (700) na cor de acento: é isso que os tokens --rc-*-peso declaram, e é o que tokens/base.css aplica em h1 a h3. A única exceção é o número de destaque, em 800. Número de destaque em 800, com a unidade menor e cinza ao lado. Hierarquia por tamanho e cor, nunca por peso extra ou borda. O acento nunca é itálico e nunca é serifa: é peso mais cor. ============================================================ */ :root { /* APELIDOS que a documentação viva usa no CSS dela. Precisam existir aqui: sem isto, componente que referencia --rc-mono cai no monospace genérico do navegador em projeto que carrega só o styles.css, e ninguém percebe porque o fallback é silencioso. Mesmo caso do --rc-acento-texto. */ --rc-sans: var(--rc-fonte-corpo); --rc-mono: var(--rc-fonte-mono); /* display: número de destaque e capa */ --rc-display-tamanho: 64px; /* @kind other */ --rc-display-altura: 1; /* @kind other */ --rc-display-tracking: -0.03em; /* @kind other */ --rc-display-peso: 300; /* @kind other */ --rc-h1-tamanho: 40px; /* @kind other */ --rc-h1-altura: 1.06; /* @kind other */ --rc-h1-tracking: -0.025em; /* @kind other */ --rc-h1-peso: 300; /* @kind other */ --rc-h2-tamanho: 30px; /* @kind other */ --rc-h2-altura: 1.12; /* @kind other */ --rc-h2-tracking: -0.02em; /* @kind other */ --rc-h2-peso: 300; /* @kind other */ --rc-h3-tamanho: 23px; /* @kind other */ --rc-h3-altura: 1.18; /* @kind other */ --rc-h3-tracking: -0.015em; /* @kind other */ --rc-h3-peso: 300; /* @kind other */ /* h4 a h6 são rótulos de estrutura, não voz editorial: não recebem o par 300/700 do título, e por isso vivem em 600 na mesma Open Sans. */ --rc-h4-tamanho: 20px; /* @kind other */ --rc-h4-altura: 1.3; /* @kind other */ --rc-h4-tracking: 0; /* @kind other */ --rc-h4-peso: 600; /* @kind other */ --rc-h5-tamanho: 16px; /* @kind other */ --rc-h5-altura: 1.35; /* @kind other */ --rc-h5-tracking: 0.005em; /* @kind other */ --rc-h5-peso: 600; /* @kind other */ --rc-h6-tamanho: 13px; /* @kind other */ --rc-h6-altura: 1.4; /* @kind other */ --rc-h6-tracking: 0.12em; /* @kind other */ --rc-h6-peso: 600; /* @kind other */ --rc-corpo-grande-tamanho: 18px; /* @kind other */ --rc-corpo-grande-altura: 1.6; /* @kind other */ --rc-corpo-tamanho: 15px; /* @kind other */ --rc-corpo-altura: 1.62; /* @kind other */ --rc-corpo-tracking: 0; /* @kind other */ --rc-corpo-peso: 400; /* @kind other */ --rc-legenda-tamanho: 13px; /* @kind other */ --rc-legenda-altura: 1.5; /* @kind other */ --rc-legenda-peso: 400; /* @kind other */ --rc-micro-tamanho: 11px; /* @kind other */ --rc-micro-altura: 1.45; /* @kind other */ --rc-micro-tracking: 0.08em; /* @kind other */ --rc-micro-peso: 600; /* @kind other */ /* número de destaque: Open Sans 800 — é a única exceção ao par 300/700, porque número grande em Light perde o traço. A unidade fica menor e cinza ao lado. Em cartão de KPI o número é menor: --rc-numero-kpi-* cuida disso. */ --rc-numero-tamanho: 56px; /* @kind other */ --rc-numero-altura: 1; /* @kind other */ --rc-numero-tracking: -0.03em; /* @kind other */ --rc-numero-unidade-tamanho: 15px; /* @kind other */ --rc-numero-peso: 800; /* @kind other */ --rc-numero-kpi-tamanho: 34px; /* @kind other */ --rc-numero-kpi-peso: 700; /* @kind other */ /* título: no máximo 3 palavras, com uma linha de apoio embaixo */ --rc-titulo-max-palavras: 3; /* @kind other */ --rc-apoio-tamanho: 16px; /* @kind other */ --rc-apoio-altura: 1.55; /* @kind other */ } /* ======================== tokens/espacamento.css ======================== */ /* Escala de 4px. Espaço e raio de borda. */ :root { /* ALTURA DE CONTROLE: campo e botão dividem a mesma escala, porque botão ao lado de campo é o par mais comum da interface. Alturas independentes divergem no primeiro ajuste de padding, e aí a fileira fica com um degrau de 6px que ninguém sabe de onde vem. */ --rc-altura-controle: 40px; --rc-altura-controle-sm: 34px; --rc-altura-controle-lg: 46px; --rc-espaco-0: 0; /* @kind spacing */ --rc-espaco-1: 4px; --rc-espaco-2: 8px; --rc-espaco-3: 12px; --rc-espaco-4: 16px; --rc-espaco-5: 20px; --rc-espaco-6: 24px; --rc-espaco-8: 32px; --rc-espaco-10: 40px; --rc-espaco-12: 48px; --rc-espaco-16: 64px; --rc-espaco-20: 80px; --rc-espaco-24: 96px; --rc-raio-xs: 4px; --rc-raio-sm: 6px; --rc-raio-md: 10px; --rc-raio-lg: 14px; --rc-raio-xl: 20px; --rc-raio-pilula: 9999px; /* Largura por tipo de conteúdo, não por página. 1280 é teto de LEITURA — em tela de dado ele desperdiça 400px de um monitor de 1920. Ver LayoutApp. */ --rc-largura-max-conteudo: 1280px; --rc-largura-max-ampla: 1600px; --rc-largura-max-texto: 68ch; /* @kind other */ /* Piso de coluna do grid que se auto-preenche: tela larga ganha mais colunas, não colunas mais largas. */ --rc-coluna-min: 320px; --rc-borda-fina: 1px; /* breakpoints (para referência em media queries) */ --rc-bp-movel: 430px; --rc-bp-tablet: 768px; --rc-bp-desktop: 1024px; --rc-bp-largo: 1280px; } /* ======================== tokens/elevacao.css ======================== */ /* Três níveis, todos com sombra baixa e difusa. Nada de sombra dura. Nível 1: cartão em repouso. Nível 2: cartão em hover, dropdown. Nível 3: modal. */ :root { --rc-elevacao-1: 0 1px 2px rgba(9, 52, 76, 0.04), 0 4px 12px -6px rgba(9, 52, 76, 0.08); --rc-elevacao-2: 0 2px 4px rgba(9, 52, 76, 0.05), 0 10px 24px -10px rgba(9, 52, 76, 0.12); --rc-elevacao-3: 0 4px 8px rgba(9, 52, 76, 0.06), 0 24px 56px -18px rgba(9, 52, 76, 0.18); --rc-elevacao-foco: 0 0 0 3px rgba(43, 143, 168, 0.28); --rc-transicao: 160ms cubic-bezier(0.32, 0.72, 0.35, 1); /* @kind other */ /* Duração longa, para mudança de GEOMETRIA e não de cor: a sidebar recolhendo percorre 176px de largura, e 160ms nesse trajeto lê como salto. Cor, borda e sombra continuam nos 160ms; só o que muda de tamanho usa esta. */ --rc-transicao-lenta: 260ms cubic-bezier(0.32, 0.72, 0.35, 1); /* @kind other */ } /* ======================== tokens/gradientes.css ======================== */ /* Gradientes oficiais da marca. Só estes dois em peça nova. */ :root { /* marinho para petróleo: cabeçalho institucional, capa de relatório */ --rc-gradiente-institucional: linear-gradient(135deg, #09344c 0%, #005066 100%); /* @kind other */ /* marinho profundo para marinho suave: rodapé, faixa de seção escura */ --rc-gradiente-profundidade: linear-gradient(160deg, #06263a 0%, #0f4a68 100%); /* @kind other */ /* lavagem clara de apoio (não é gradiente de marca, é fundo de seção) */ --rc-lavagem-turquesa: linear-gradient(180deg, #ffffff 0%, #eaf3f5 100%); /* @kind other */ } /* ======================== tokens/camadas.css ======================== */ /* Camadas: uma escala só, para nada disputar empilhamento por acidente. Quem precisa de z-index usa um destes tokens e nunca um número solto. base 0 conteúdo normal cabecalho-tabela 5 thead fixo dentro do corpo que rola cabecalho 20 barra superior e cabeçalho de página sidebar 25 menu lateral menu 40 dropdown, calendário e seleção múltipla ANCORADOS na página painel 60 painel lateral modal 80 modal e seu fundo flutuante 90 transitório levado para o body: dica, popover, menu de linha aviso 100 aviso momentâneo, acima de tudo Por que "flutuante" fica ACIMA de modal: um transitório levado para o fim do body pode ser disparado de qualquer superfície, inclusive de dentro do modal. Uma dica de sigla dentro do modal, na camada de menu, sai do overflow e vai parar ATRÁS do modal — portal resolve recorte, não resolve ordem. Então quem é portalado toma uma camada acima da superfície mais alta que pode contê-lo. Menu que fica ancorado no fluxo da página continua em `menu`: ele não pode passar por cima de um modal que não o contém. */ :root { --rc-camada-base: 0; /* @kind other */ --rc-camada-cabecalho-tabela: 5; /* @kind other */ --rc-camada-cabecalho: 20; /* @kind other */ --rc-camada-sidebar: 25; /* @kind other */ --rc-camada-menu: 40; /* @kind other */ --rc-camada-painel: 60; /* @kind other */ --rc-camada-modal: 80; /* @kind other */ --rc-camada-flutuante: 90; /* @kind other */ --rc-camada-aviso: 100; /* @kind other */ } /* ======================== tokens/base.css ======================== */ /* ============================================================ BASE E UTILIDADES RIO CLARO Hierarquia por tamanho e cor. Fundo claro, muito respiro. ============================================================ */ *, *::before, *::after { box-sizing: border-box } html { -webkit-text-size-adjust: 100% } body { margin: 0; background: var(--rc-superficie-pagina); color: var(--rc-texto-corpo); font-family: var(--rc-fonte-corpo); font-size: var(--rc-corpo-tamanho); line-height: var(--rc-corpo-altura); -webkit-font-smoothing: antialiased; text-wrap: pretty } img, svg { max-width: 100%; display: block } /* ---------- barra de rolagem: fina, na paleta, sem trilho ---------- 6px, polegar em neutra-300 e trilho transparente. A barra do sistema operacional é larga e cinza-azulada de outra família: numa tela de painéis que rolam por dentro, ela aparece em cinco lugares ao mesmo tempo e cada um rouba 15px de largura de conteúdo. */ * { scrollbar-width: thin; scrollbar-color: var(--rc-neutra-300) transparent } ::-webkit-scrollbar { width: 6px; height: 6px } ::-webkit-scrollbar-track { background: transparent } ::-webkit-scrollbar-thumb { background: var(--rc-neutra-300); border-radius: var(--rc-raio-pilula) } ::-webkit-scrollbar-thumb:hover { background: var(--rc-neutra-400) } ::-webkit-scrollbar-corner { background: transparent } h1, h2, h3 { font-family: var(--rc-fonte-titulo); font-weight: 300; color: var(--rc-texto-titulo); margin: 0 } h1 { font-size: var(--rc-h1-tamanho); line-height: var(--rc-h1-altura); letter-spacing: var(--rc-h1-tracking) } h2 { font-size: var(--rc-h2-tamanho); line-height: var(--rc-h2-altura); letter-spacing: var(--rc-h2-tracking) } h3 { font-size: var(--rc-h3-tamanho); line-height: var(--rc-h3-altura); letter-spacing: var(--rc-h3-tracking) } h4, h5, h6 { font-family: var(--rc-fonte-corpo); color: var(--rc-texto-titulo); margin: 0 } h4 { font-size: var(--rc-h4-tamanho); line-height: var(--rc-h4-altura); font-weight: var(--rc-h4-peso) } h5 { font-size: var(--rc-h5-tamanho); line-height: var(--rc-h5-altura); font-weight: var(--rc-h5-peso) } h6 { font-size: var(--rc-h6-tamanho); line-height: var(--rc-h6-altura); letter-spacing: var(--rc-h6-tracking); font-weight: var(--rc-h6-peso); text-transform: uppercase; color: var(--rc-texto-legenda) } p { margin: 0 } a { color: var(--rc-texto-link); text-decoration: none; border-bottom: 1px solid rgba(43, 143, 168, 0.35); transition: color var(--rc-transicao), border-color var(--rc-transicao) } a:hover { color: var(--rc-texto-link-hover); border-bottom-color: var(--rc-texto-link-hover) } a:focus-visible { outline: none; box-shadow: var(--rc-anel-foco); border-radius: var(--rc-raio-xs) } /* ---------- utilidades tipográficas ---------- */ .rc-display { font-family: var(--rc-fonte-titulo); font-weight: 300; font-size: var(--rc-display-tamanho); line-height: var(--rc-display-altura); letter-spacing: var(--rc-display-tracking); color: var(--rc-texto-titulo) } /* a assinatura tipográfica da casa: título em Light com a palavra-chave em Bold, na cor de acento. Nunca em itálico, nunca em serifa: é o padrão que o site usa. */ .rc-acento { font-weight: 700; color: var(--rc-texto-acento) } .rc-legenda { font-size: var(--rc-legenda-tamanho); line-height: var(--rc-legenda-altura); color: var(--rc-texto-legenda) } .rc-micro { font-size: var(--rc-micro-tamanho); line-height: var(--rc-micro-altura); letter-spacing: var(--rc-micro-tracking); text-transform: uppercase; font-weight: var(--rc-micro-peso); color: var(--rc-texto-legenda) } .rc-corpo-grande { font-size: var(--rc-corpo-grande-tamanho); line-height: var(--rc-corpo-grande-altura) } .rc-num { font-variant-numeric: tabular-nums } /* número de destaque: 800, a única exceção ao par 300/700, com a unidade menor e cinza ao lado */ .rc-numero { display: inline-flex; align-items: baseline; gap: var(--rc-espaco-2) } .rc-numero > .valor { font-family: var(--rc-fonte-titulo); font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--rc-numero-tamanho); line-height: var(--rc-numero-altura); letter-spacing: var(--rc-numero-tracking); color: var(--rc-texto-titulo); font-variant-numeric: tabular-nums } .rc-numero > .unidade { font-family: var(--rc-fonte-corpo); font-size: var(--rc-numero-unidade-tamanho); font-weight: 500; color: var(--rc-texto-legenda) } /* ---------- grid e breakpoints ---------- */ /* .rc-pagina é largura de LEITURA (1280px). Tela de dado não usa: usa a casca LayoutApp com largura="fluida", que ocupa a tela inteira. */ .rc-pagina { max-width: var(--rc-largura-max-conteudo); margin: 0 auto; padding: 0 var(--rc-espaco-8) } .rc-pagina-ampla { max-width: var(--rc-largura-max-ampla); margin: 0 auto; padding: 0 var(--rc-espaco-8) } .rc-pagina-fluida { max-width: none; margin: 0; padding: 0 var(--rc-espaco-8) } /* A regra da tela larga: mais colunas, não colunas mais largas. Em 1920 com sidebar, um grid de piso 320px vira 5 colunas sozinho; em 1280, 3. Grade de número fixo (rc-grid-3, rc-grid-4) continua existindo para quando o número de colunas é a informação — comparar quatro cenários, por exemplo. */ .rc-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--rc-coluna-min), 1fr)); gap: var(--rc-espaco-6) } .rc-grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--rc-espaco-4) } /* A ABERTURA DE SEÇÃO ACOMPANHA A LARGURA DO CONTEÚDO, NÃO A MEDIDA DE LEITURA. O parágrafo que fica entre o título e o conteúdo termina onde o conteúdo termina. Capado em 68ch acima de uma tabela ou cartão de largura total, ele quebra no meio e deixa uma última linha curta: a borda direita irregular chama mais atenção que a frase, e a página parece desalinhada. Abertura é chamada CURTA, de duas ou três linhas — o teto de 68ch continua valendo para prosa longa, dentro dos blocos, onde a medida de leitura é o que importa. text-wrap:pretty evita a última linha com uma palavra só. */ .rc-abertura { max-width: none; text-wrap: pretty } /* A contraparte: prosa longa DENTRO do bloco respeita a medida de leitura. Os dois casos existem, e confundi-los é o erro — abertura acompanha o conteúdo, prosa acompanha o olho. */ .rc-prosa { max-width: var(--rc-largura-max-texto) } .rc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rc-espaco-6) } .rc-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rc-espaco-6) } .rc-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rc-espaco-6) } @media (max-width: 1024px) { .rc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .rc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (max-width: 700px) { .rc-grid-2, .rc-grid-3, .rc-grid-4 { grid-template-columns: minmax(0, 1fr) } .rc-pagina { padding: 0 var(--rc-espaco-4) } } /* ---------- TABELA DE DADOS: regras obrigatórias ---------- Coluna numérica: célula E cabeçalho à direita. Nunca centralizar números. NENHUMA CÉLULA QUEBRA EM DUAS LINHAS. Valor de tabela é unidade de leitura: o olho varre a coluna de cima a baixo, e uma linha de altura dupla no meio quebra a varredura e desalinha a linha inteira contra as vizinhas. Nome comprido corta com reticências e leva o texto inteiro no title; se cortar demais, a resposta é coluna mais larga ou menos colunas, nunca altura dupla. Sem cabimento na largura, o .rc-tabela-wrap rola na horizontal — rolar é melhor que embrulhar. Escape consciente: .quebra, para célula que É prosa (observação, justificativa). */ .rc-tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch } .rc-tabela { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--rc-corpo-tamanho) } .rc-tabela th { font-family: var(--rc-fonte-corpo); font-size: var(--rc-legenda-tamanho); font-weight: 600; color: var(--rc-texto-legenda); text-align: left; padding: var(--rc-espaco-3) var(--rc-espaco-4); border-bottom: 1px solid var(--rc-borda); white-space: nowrap } .rc-tabela td { padding: var(--rc-espaco-3) var(--rc-espaco-4); border-bottom: 1px solid var(--rc-borda); color: var(--rc-texto-corpo); vertical-align: middle } .rc-tabela th, .rc-tabela td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .rc-tabela td.quebra { white-space: normal; overflow: visible; text-overflow: clip; vertical-align: top; text-wrap: pretty } .rc-tabela th.num, .rc-tabela td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap } .rc-tabela td.texto, .rc-tabela th.texto { text-align: left } .rc-tabela th:first-child, .rc-tabela td:first-child { padding-left: 0 } .rc-tabela th:last-child, .rc-tabela td:last-child { padding-right: 0 } .rc-tabela tbody tr:hover td { background: var(--rc-turquesa-50) } .rc-tabela tfoot td, .rc-tabela tr.total td { border-top: 2px solid var(--rc-marinho-800); border-bottom: none; font-weight: 600; color: var(--rc-texto-titulo); background: transparent } .rc-tabela .pos { color: var(--rc-positivo-texto) } .rc-tabela .neg { color: var(--rc-critico-texto) } /* Par cifrão + valor: o cifrão ocupa a borda esquerda da célula e os dígitos a direita, então em toda a coluna o R$ cai no mesmo x e a unidade também. Com o valor inteiro alinhado só à direita, é o cifrão que fica torto, porque ele anda conforme a largura do número. Vinha existindo apenas no documento vivo; sem estar aqui, nenhum projeto consumidor herdava a regra. --rc-largura-valor fixa a coluna de dígitos quando a célula também tem campo. */ .par-moeda { display: grid; grid-template-columns: auto minmax(var(--rc-largura-valor, 0px), 1fr); align-items: baseline; gap: 6px; width: 100% } .par-moeda .pf { justify-self: start; color: var(--rc-texto-legenda); font-variant-numeric: normal } .par-moeda .vl { text-align: right; font-variant-numeric: tabular-nums } .par-moeda input { width: 100%; text-align: right; font-variant-numeric: tabular-nums } .rc-tabela .pos .pf, .rc-tabela .neg .pf { color: inherit } /* ---------- vocabulário de coluna: identificador, estado, ação, composta ---------- */ /* Identificador é número que NÃO mede (conta, CPF, ticker, código): esquerda de propósito, com tabular-nums para a coluna continuar sendo dígito. */ .rc-tabela th.ident, .rc-tabela td.ident { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap } /* Estado e ação encolhem para o conteúdo: largura de coluna de dado é para dado. */ .rc-tabela th.estado, .rc-tabela td.estado { text-align: left; width: 1% } .rc-tabela td.estado { padding-top: 0; padding-bottom: 0 } .rc-tabela th.acao, .rc-tabela td.acao { text-align: right; width: 1%; white-space: nowrap } /* Micro-ação nasce invisível e reserva o espaço desde o repouso: visibility, não display, senão a linha se desloca quando o mouse chega. :focus-within revela pelo teclado, e sem hover (toque) fica sempre visível. */ .rc-tabela .rc-acoes-linha { display: inline-flex; gap: 2px; justify-content: flex-end; visibility: hidden } .rc-tabela tbody tr:hover .rc-acoes-linha, .rc-tabela .rc-acoes-linha:focus-within { visibility: visible } @media (hover: none) { .rc-tabela .rc-acoes-linha { visibility: visible } } /* Composta é a única célula de duas linhas do sistema, e a altura dupla é do desenho da coluna: vale para todas as linhas, não para a que estourou. */ .rc-tabela td.composta { white-space: nowrap; vertical-align: middle } .cel-composta { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.25; max-width: 100% } .cel-composta .principal { overflow: hidden; text-overflow: ellipsis } .cel-composta .apoio { font-size: var(--rc-legenda-tamanho); color: var(--rc-texto-legenda); font-weight: 400; overflow: hidden; text-overflow: ellipsis } /* Apoio segue o lado do principal: apoio no lado oposto desfaz a coluna. */ .rc-tabela td.composta.num .cel-composta { align-items: flex-end } .rc-tabela td.composta.texto .cel-composta, .rc-tabela td.composta.ident .cel-composta { align-items: flex-start } /* Cabeçalho da coluna de ação é o contêiner do rótulo de leitor de tela: sem position aqui, o span absoluto se ancora no bloco inicial e vira rolagem horizontal na PÁGINA — o oposto da regra "o wrap rola, a página não". */ .rc-tabela th.acao { position: relative } .rc-so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 } .rc-tabela caption { caption-side: top; text-align: left; padding-bottom: var(--rc-espaco-3); color: var(--rc-texto-legenda); font-size: var(--rc-legenda-tamanho) } /* ---------- ondas: motivo de assinatura do cabeçalho ---------- */ .rc-ondas { position: absolute; inset: auto 0 0 0; height: 96px; pointer-events: none; opacity: 0.9 } /* ======================== tokens/impressao.css ======================== */ /* ============================================================ IMPRESSÃO O time imprime em PDF direto do navegador. Aqui a peça perde a decoração e ganha economia de tinta, sem perder a hierarquia. ============================================================ */ @media print { @page { margin: 14mm } html, body { background: #ffffff } body { font-size: 10.5pt; line-height: 1.5 } /* 1. sem sombra e sem motivo decorativo */ *, *::before, *::after { box-shadow: none !important; text-shadow: none !important } .rc-ondas, .rc-deco, [data-rc-decorativo] { display: none !important } /* 2. gradiente vira cor plana, para não gastar tinta nem falhar sem background-graphics */ [data-rc-gradiente] { background: var(--rc-marinho-800) !important; color: #ffffff !important; print-color-adjust: exact } /* 3. cartões e blocos não quebram no meio */ .rc-cartao, .rc-kpi, .rc-alerta, .rc-conclusao, figure, table { break-inside: avoid } h1, h2, h3, h4 { break-after: avoid } tr, td, th { break-inside: avoid } /* 4. a tabela precisa caber na largura A4: sem scroll, sem min-width */ .rc-tabela-wrap { overflow: visible !important } .rc-tabela { min-width: 0 !important; width: 100% !important; font-size: 9pt } .rc-tabela th, .rc-tabela td { padding: 5pt 6pt } .rc-tabela thead { display: table-header-group } .rc-tabela tfoot { display: table-footer-group } /* 5. links mostram o destino, navegação desaparece */ a { color: var(--rc-texto-corpo); border-bottom: none } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: var(--rc-texto-legenda) } .rc-sidebar, .rc-tabs, .rc-paginacao, .rc-nao-imprimir { display: none !important } }