/* ============================================================ ORÇALIS — Identidade visual oficial das casas legislativas brasileiras Base: identidade visual oficial das casas legislativas (Senado / Câmara) ============================================================ */ :root { /* CORES INSTITUCIONAIS */ --oc-azul-senado: #00305C; /* lado da indicação / Congresso / base */ --oc-verde-camara: #00824A; /* lado da execução / pago */ --oc-amarelo: #FAE042; /* acento / pendência leve */ --oc-cinza-escuro: #636B70; /* rótulos e texto suave */ --oc-cinza-claro: #D9D6D1; /* bordas e trilhas */ /* RAMPA DO AZUL */ --oc-azul-50: #E6ECF2; --oc-azul-100: #C4D3E3; --oc-azul-200: #8FB0D0; --oc-azul-400: #3A6A9A; --oc-azul-600: #00305C; --oc-azul-claro: #6E8CAA; /* RAMPA DO VERDE */ --oc-verde-50: #E2F1EA; --oc-verde-100: #B3DCC8; --oc-verde-200: #7CC4A2; --oc-verde-400: #2C9E6E; --oc-verde-600: #00824A; --oc-verde-claro: #5CAE8A; /* RAMPAS DE FUNIL ORÇAMENTÁRIO */ --oc-funil-disponibilizado: var(--oc-azul-200); --oc-funil-indicado: var(--oc-azul-400); --oc-funil-empenhado: var(--oc-azul-600); --oc-funil-pago: var(--oc-verde-600); /* NEUTROS */ --oc-texto: #2C2C2A; --oc-texto-suave: var(--oc-cinza-escuro); --oc-texto-leve: #888780; --oc-trilha: #E8E6E0; --oc-borda: var(--oc-cinza-claro); --oc-superficie: #FFFFFF; --oc-fundo: #F5F4F0; /* ESTADOS */ --oc-sucesso: var(--oc-verde-camara); --oc-atencao: var(--oc-amarelo); --oc-atencao-texto:#7A6000; --oc-perigo: #C0392B; --oc-info: var(--oc-azul-400); --oc-impedimento: #B91C1C; /* vermelho canônico de impedimento técnico — unifica pílulas + CSS base .crit */ --oc-impedimento-bg: #FEE2E2; /* fundo rosado da pílula de impedimento */ /* RESULTADO PRIMÁRIO (RP) */ --oc-rp-individual: var(--oc-azul-senado); --oc-rp-bancada: var(--oc-azul-400); --oc-rp-comissao: var(--oc-verde-camara); --oc-rp-relator: var(--oc-cinza-escuro); /* Compatibilidade com tokens existentes */ --orcalis-azul-marinho: var(--oc-azul-senado); --orcalis-azul-marinho-escuro: #002645; --orcalis-azul-vibrante: var(--oc-azul-400); --orcalis-azul-50: var(--oc-azul-50); --orcalis-azul-100: var(--oc-azul-100); --orcalis-azul-200: var(--oc-azul-200); --orcalis-azul-400: var(--oc-azul-400); --orcalis-azul-500: var(--oc-azul-600); --orcalis-azul-600: var(--oc-azul-600); --orcalis-azul-800: #002645; --orcalis-azul-900: #001E3C; --orcalis-sucesso: var(--oc-sucesso); --orcalis-sucesso-bg: var(--oc-verde-50); --orcalis-aviso: var(--oc-atencao); --orcalis-aviso-bg: #FEF6D9; --orcalis-erro: #E24B4A; --orcalis-erro-bg: #FCEBEB; --orcalis-info: var(--oc-info); --orcalis-info-bg: var(--oc-azul-50); --orcalis-font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif; --orcalis-font-mono: 'JetBrains Mono', monospace; --orcalis-radius-sm: 4px; --orcalis-radius-md: 6px; --orcalis-radius-lg: 10px; --orcalis-texto-claro: #FFFFFF; --orcalis-texto-claro-70: rgba(255,255,255,0.70); --orcalis-texto-claro-50: rgba(255,255,255,0.50); --orcalis-texto-claro-35: rgba(255,255,255,0.35); /* CARTÃO / SOMBRAS / BARRAS (componente de card RP) */ --oc-card-radius: 14px; --oc-sombra-card: 0 1px 3px rgba(0,48,92,.09), 0 5px 14px -4px rgba(0,48,92,.13), 0 16px 34px -14px rgba(0,48,92,.11); --oc-sombra-card-hover: 0 4px 14px -4px rgba(0,48,92,.16), 0 14px 32px -12px rgba(0,48,92,.20); --oc-barra-altura: 8px; --oc-barra-duracao: .9s; --oc-barra-ease: cubic-bezier(.22, 1, .36, 1); --oc-barra-atraso: 120ms; --oc-halo-amarelo: rgba(250, 224, 66, .40); /* GRADIENTES DE ESTÁGIO DO FUNIL (direção: esquerda → direita) */ --oc-grad-disponibilizado: linear-gradient(90deg, var(--oc-azul-100), var(--oc-azul-200)); /* azul claro */ --oc-grad-indicado: linear-gradient(90deg, var(--oc-azul-400), var(--oc-azul-600)); /* azul escuro */ --oc-grad-empenhado: linear-gradient(90deg, var(--oc-verde-100), var(--oc-verde-200)); /* verde claro */ --oc-grad-pago: linear-gradient(90deg, var(--oc-verde-400), var(--oc-verde-600)); /* verde escuro*/ /* ════ PALETA CONSOLIDADA (de-para 2026-06 — FONTE ÚNICA; valores = cor de fato usada) ════ Migrar os #hex hardcoded do app.js/style.css para estes tokens. Mantém o visual atual; funde quase-duplicatas (2 navies, 3 verdes, vários azuis) → harmonia. */ /* Neutros (slate) — recalibrados p/ a família predominante */ --oc-texto: #1e293b; /* override: era #2C2C2A (warm) → slate (cool) */ --oc-texto-medio: #475569; --oc-texto-suave: #64748b; /* override: era #636B70 */ --oc-texto-leve: #94a3b8; /* override: era #888780 */ --oc-borda: #d3dce8; /* override: era #D9D6D1; reforçado p/ definir a borda dos cards */ --oc-borda-forte: #cbd5e1; --oc-fundo-claro: #f8fafc; --oc-zebra: #e8ecf2; /* 2026-07-08: linha alternada das planilhas-modal (Indicações/Instrumentos/Exec.Direta/Beneficiários) — mais contraste que --oc-fundo-claro (pedido do usuário) */ --oc-navy: #0a1b33; /* funde com #00305c */ /* Semânticas (vêm do SIGNIFICADO, não do lugar) */ --oc-verde: #15803d; /* pago/sucesso/N2 — funde #16a34a, #00824a, #00723f */ --oc-verde-bg: #dcfce7; --oc-teal: #0f766e; --oc-azul: #0284c7; /* info/link */ --oc-azul-escuro: #00407a; /* empenhado — funde #0c4a8a, #185fa5 */ --oc-azul-bg: #e6f1fb; /* funde #eef2ff */ /* Semânticas de funil orçamentário (FONTE ÚNICA; unificam os outliers do Painel da Jornada) */ --oc-empenhado: #185FA5; /* tom canônico empenhado — funde #005b9e */ --oc-pago: #0F6E56; /* tom canônico pago — funde #1a7a44 */ /* Neutros de painel (Jornada e Carteira v2) */ --oc-fundo-painel: #f1f5f9; --oc-borda-suave: #e2e8f0; --oc-indigo: #3730a3; /* indicado — funde #3c3489, #4f46e5 */ --oc-roxo: #7c3aed; /* a validar/panela — funde #6366f1 */ --oc-roxo-bg: #ede9fe; /* fundo da pílula "a validar" — distinto de formalizacao-bg */ --oc-formalizacao: #6366F1; /* indigo FNS/formalização (Jornada) — distinto do roxo */ --oc-formalizacao-bg: #ede9fe; /* fundo da pílula FNS */ --oc-ambar: #b45309; /* a cobrar/atenção — funde #92400e */ --oc-ambar-bg: #fffbeb; /* funde #fef3c7 */ --oc-perigo: #dc2626; /* override: vermelho de fato (era #C0392B) */ /* Escala tipográfica (34 tamanhos → 7 degraus) */ --fs-xs: .65rem; --fs-sm: .72rem; --fs-md: .78rem; --fs-base: .85rem; --fs-lg: .92rem; --fs-xl: 1.1rem; --fs-2xl: 1.4rem; } /* Modo escuro — segue APENAS o toggle manual do app ([data-theme="dark"]). Sem @media (prefers-color-scheme) de propósito: senão o SO em dark forçaria tokens escuros mesmo com o app no tema claro. */ [data-theme="dark"] { --oc-funil-disponibilizado: #A9C2DC; --oc-funil-indicado: #6E8CAA; --oc-funil-empenhado: #4A78A8; --oc-funil-pago: var(--oc-verde-claro); --oc-texto: #e6edf3; --oc-texto-suave: #9aa7b8; --oc-texto-leve: #6e7d90; --oc-trilha: #0f1828; --oc-borda: #2c3a52; --oc-superficie: #1b2740; --oc-fundo: #06080d; --oc-sombra-card: 0 1px 3px rgba(0,0,0,.45), 0 6px 16px -10px rgba(0,0,0,.60); --oc-sombra-card-hover: 0 6px 20px -6px rgba(0,0,0,.60), 0 14px 32px -12px rgba(0,0,0,.70); --oc-halo-amarelo: rgba(250, 224, 66, .22); --oc-grad-disponibilizado: linear-gradient(90deg, #6E8CAA, #A9C2DC); /* azul claro */ --oc-grad-indicado: linear-gradient(90deg, #3A6A9A, #5A86B0); /* azul escuro */ --oc-grad-empenhado: linear-gradient(90deg, #5CAE8A, #8BD0B2); /* verde claro */ --oc-grad-pago: linear-gradient(90deg, #2C9E6E, #5CAE8A); /* verde escuro*/ /* Badge de RP — clareado para legibilidade contra o card escuro */ --oc-rp-individual: #7CA0C8; --oc-rp-bancada: #4A78A8; --oc-rp-comissao: #5CAE8A; --oc-rp-relator: #A8A49C; /* novos neutros da paleta consolidada — variantes escuras */ --oc-texto-medio: #aeb9c9; --oc-borda-forte: #3a4a66; --oc-fundo-claro: #0f1828; --oc-zebra: #0f1828; /* dark: mesma trilha já usada (sem mudança de comportamento no escuro) */ --oc-navy: #0b1220; /* Semânticas de funil — variantes escuras (clarificadas para legibilidade) */ --oc-empenhado: #4a90d9; --oc-pago: #2ea87a; /* Impedimento — clarificado p/ legibilidade sobre fundo escuro */ --oc-impedimento: #FCA5A5; --oc-impedimento-bg: #4A1D1D; /* Pílulas de cobrança/estado — fundos escurecidos p/ dark (texto mantém o token da família) */ --oc-ambar-bg: #1A1206; --oc-azul-bg: #10233D; --oc-formalizacao: #A5B4FC; --oc-formalizacao-bg: #262445; --oc-roxo-bg: #2a1f4e; /* fundo da pílula "a validar" — dark */ /* Neutros de painel — variantes escuras */ --oc-fundo-painel: #0f1828; --oc-borda-suave: #2c3a52; } /* Marca: ORÇALIS Subtítulo: Gestão do Orçamento Público Slogan: Do planejamento à execução dos recursos públicos Slogan B: Estratégia, acompanhamento e resultado na gestão orçamentária */