/* ========================================================= Portal SynConsult — Design System Paleta e tipografia conforme Manual de Identidade Visual ========================================================= */ @font-face { font-family: 'Neo Sans Pro'; src: url('../fonts/NeoSansPro-Regular.woff2') format('woff2'), url('../fonts/NeoSansPro-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Neo Sans Pro'; src: url('../fonts/NeoSansPro-Medium.woff2') format('woff2'), url('../fonts/NeoSansPro-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Neo Sans Pro'; src: url('../fonts/NeoSansPro-Bold.woff2') format('woff2'), url('../fonts/NeoSansPro-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Neo Sans Pro'; src: url('../fonts/NeoSansPro-Black.woff2') format('woff2'), url('../fonts/NeoSansPro-Black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } /* Se os arquivos de fonte acima não existirem, o navegador usa a pilha de fallback abaixo automaticamente — nenhuma ação é necessária para o site funcionar. Para ativar a Neo Sans Pro de verdade, copie os arquivos .woff2/.woff licenciados para assets/fonts/ com esses nomes. */ :root { --verde: #0A2924; --verde-rgb: 10, 41, 36; --amarelo: #FFAD00; --amarelo-rgb: 255, 173, 0; /* ---------- O ouro quando NÃO é fundo (26/08/2026) ---------- #FFAD00 é a cor da marca e funciona como FUNDO (texto escuro por cima). Como TEXTO sobre branco ele rende contraste 1,9 — ilegível. Por isso o botão de ação contornado usa um ouro escurecido: 5,8 sobre branco, acima do mínimo AA. A borda pode ser a cor cheia, que não precisa de contraste de leitura. O modo escuro troca as duas logo abaixo. */ --amarelo-txt: #8A5D00; --amarelo-linha: rgba(255,173,0,.60); --amarelo-fraco: rgba(255,173,0,.12); --branco: #F7F7F7; --preto: #262626; --gradiente: linear-gradient(135deg, #FFAD00 0%, #0A2924 100%); --gradiente-suave: linear-gradient(135deg, rgba(255,173,0,0.15) 0%, rgba(10,41,36,0.05) 100%); --verde-hover: #0f3b33; --verde-claro: #143f38; --borda: #e3e1dc; --texto-muted: #6b6f6e; --sombra: 0 4px 20px rgba(10,41,36,0.08); --sombra-lg: 0 12px 40px rgba(10,41,36,0.14); --raio: 12px; /* ---------- Superfícies (05/08/2026) ---------- Separam "cor da marca" de "cor de superfície": são estas que o modo escuro troca, mantendo o restante do arquivo intacto. --texto e --seasalt já eram usadas em duas regras sem nunca terem sido declaradas; a correção entra aqui junto. */ --fundo: #F7F7F7; --superficie: #ffffff; --superficie-2: #fafafa; --texto: #262626; --seasalt: #f4f4f2; --linha-sutil: rgba(10,41,36,.03); --overlay: rgba(247,247,247,.7); --font-display: 'Neo Sans Pro', 'Poppins', 'Century Gothic', 'Segoe UI', sans-serif; --font-body: 'Neo Sans Pro', 'Inter', 'Segoe UI', Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--fundo); color: var(--texto); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--verde); margin: 0 0 .4em; } a { color: inherit; } button { font-family: inherit; } .eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; color: var(--texto-muted); } /* ---------- Textura de marca (diagonal "S") ---------- */ .brand-texture { position: relative; overflow: hidden; background: var(--verde); } .brand-texture::before, .brand-texture::after { content: ""; position: absolute; width: 220%; height: 90px; background: var(--gradiente); transform: rotate(-24deg); border-radius: 60px; opacity: 0.9; } .brand-texture::before { top: -30px; left: -60%; } .brand-texture::after { bottom: -50px; left: -20%; opacity: .55; } /* Correção de legibilidade: como ::before/::after usam position:absolute, o navegador os pinta por cima do conteúdo normal do card (h2/p), mesmo vindo antes no HTML — por isso a faixa diagonal dourada "lavava" o texto de destaque. Empurrando o conteúdo para sua própria camada de empilhamento (position:relative + z-index) ele volta a ficar acima da textura, com uma sombra sutil para manter contraste também nos trechos em que o texto cruza a faixa. */ .brand-texture > * { position: relative; z-index: 1; } .brand-texture h2, .brand-texture h3, .brand-texture p { text-shadow: 0 1px 4px rgba(0,0,0,.5); } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: none; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; white-space: nowrap; } /* AÇÃO PRINCIPAL — dourado sólido. É o botão que a tela existe para receber (Salvar, Concluir, Criar); há um por contexto, e é o único cheio. */ .btn-primary { background: var(--amarelo); color: var(--preto); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,173,0,.35); } /* AÇÃO / FUNÇÃO — dourado contornado. Editar, Assinar, Baixar, Exportar, + Nova ocorrência, Relatório: fazem alguma coisa, mas não são A ação da tela. Contornadas, elas se destacam do texto sem disputar com a principal. `.btn-dark` entra aqui pelo mesmo critério e não por economia de código: os seis lugares em que ela é usada são todos exportação (PDF, Exportar PDF, Gerar PDF) ou avanço de tour — função, nunca a ação principal da tela. */ .btn-outline, .btn-dark { background: transparent; color: var(--amarelo-txt); border: 1.5px solid var(--amarelo-linha); } .btn-outline:hover, .btn-dark:hover { background: var(--amarelo-fraco); border-color: var(--amarelo); color: var(--amarelo-txt); } /* NEUTRO — Cancelar, Voltar, Limpar filtros, Excluir e os ícones de linha. São saída ou controle de lista, não ação: dourá-los faria a pessoa clicar em "Cancelar" achando que é o botão que resolve. A COR continua neutra por isso, e a conta é literal: nas telas do portal, `.btn-ghost` é "Cancelar" 48 vezes, "Limpar filtros" 21 e "Excluir" 21. O que mudou em 05/09/2026 foi a MOLDURA. Ele era texto solto, sem borda nenhuma, e ao lado de um `.btn-outline` nem parecia botão — o mesmo defeito que o `neutro` do painel tinha, e que ali se resolveu dourando. Aqui não dá para dourar, então se resolve contornando: agora ele tem forma de botão, e de quebra fica da mesma ALTURA do `.btn-outline`, que já tinha 1,5px de borda e ficava três pixels mais alto na mesma fila. Os ícones de linha ficam de fora: seis molduras por linha de tabela viram grade dentro da grade. Eles ganham a borda só no hover, que é quando a pessoa precisa saber onde o clique acerta. */ .btn-ghost { background: transparent; color: var(--texto-muted); border: 1.5px solid var(--borda); } .btn-ghost:hover { color: var(--preto); border-color: var(--texto-muted); } .acoes-crono .btn-ghost { border-color: transparent; } .acoes-crono .btn-ghost:hover { border-color: var(--borda); } .btn-danger { background: #7a2020; color: #fff; } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; } .btn-sm { padding: 7px 14px; font-size: 12.5px; } .btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 8px; } /* Coluna "Ações" do Cronograma (Rodada 30): botões compactos só-ícone, sempre numa única linha (sem quebrar). O rótulo de cada ação aparece no tooltip (atributo title). O seletor .acoes-crono .btn tem especificidade maior que .btn-sm, então vence a folga de padding independentemente da ordem no arquivo. Botões com contador (📎/💬) expandem além dos 30px via min-width + width auto. */ .acoes-crono { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; } .acoes-crono .btn { min-width: 30px; height: 30px; padding: 0 7px; font-size: 15px; line-height: 1; border-radius: 8px; flex: 0 0 auto; } .acoes-crono .btn .crono-cont { font-size: 11px; font-weight: 700; margin-left: 3px; vertical-align: middle; } /* Rodada 74: menu "⋯ Mais" das ações do Cronograma. A lista usa position:fixed (posicionada via JS) para não ser cortada pelo overflow da tabela. */ .acoes-menu { position: relative; display: inline-flex; } .acoes-menu-lista { position: fixed; z-index: 1200; min-width: 200px; padding: 6px; background: #fff; border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra-lg); display: flex; flex-direction: column; gap: 2px; } .acoes-menu-lista[hidden] { display: none; } .acoes-menu-item { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 8px 10px; border-radius: 7px; font-size: 13.5px; color: var(--eerie, #262626); cursor: pointer; line-height: 1.3; } .acoes-menu-item:hover { background: rgba(10,41,36,.07); color: var(--verde); } .acoes-menu-item.perigo { color: #b23b3b; } .acoes-menu-item.perigo:hover { background: rgba(178,59,59,.09); color: #b23b3b; } /* Rodada 75: Busca Global no topo (assets/js/busca-global.js). O painel de resultados usa position:absolute ancorado no wrapper; z-index alto para ficar sobre o conteúdo. */ .bg-wrap { position: relative; display: inline-flex; align-items: center; } .bg-wrap .bg-ic { position: absolute; left: 10px; font-size: 13px; color: var(--texto-muted); pointer-events: none; line-height: 1; } #bg-input { width: 260px; max-width: 42vw; height: 36px; padding: 0 30px 0 30px; border: 1.5px solid var(--borda); border-radius: 10px; background: var(--superficie); font-size: 13.5px; color: var(--texto); outline: none; } #bg-input:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(10,41,36,.08); } #bg-input::placeholder { color: var(--texto-muted); } .bg-wrap .bg-atalho { position: absolute; right: 8px; font-size: 11px; font-weight: 700; color: var(--texto-muted); border: 1px solid var(--borda); border-radius: 5px; padding: 1px 6px; background: #fafafa; pointer-events: none; line-height: 1.4; } #bg-input:focus ~ .bg-atalho { display: none; } .bg-painel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1300; width: 380px; max-width: 88vw; max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-lg); padding: 6px; } .bg-painel[hidden] { display: none; } .bg-grupo-tit { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-muted); padding: 8px 10px 4px; } .bg-item { padding: 7px 10px; border-radius: 8px; cursor: pointer; } .bg-item.ativo { background: rgba(10,41,36,.08); } .bg-item-label { font-size: 13.5px; color: var(--eerie, #262626); line-height: 1.25; } .bg-item.ativo .bg-item-label { color: var(--verde); } .bg-item-sub { font-size: 11.5px; color: var(--texto-muted); margin-top: 1px; } .bg-vazio { padding: 14px 12px; font-size: 13px; color: var(--texto-muted); text-align: center; } @media (max-width: 640px) { #bg-input { width: 150px; } .bg-wrap .bg-atalho { display: none; } } /* Rodada 76: Tour de onboarding (assets/js/onboarding.js). Botão "?" no topo + overlay com "spotlight" (o anel usa um box-shadow gigante para escurecer o resto da tela). */ .btn-ajuda-tour { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--borda); background: #fff; color: var(--texto-muted); font-size: 15px; font-weight: 800; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .btn-ajuda-tour:hover { color: var(--verde); border-color: var(--verde); } #onb-overlay { position: fixed; inset: 0; z-index: 4000; } .onb-catch { position: fixed; inset: 0; z-index: 4000; background: transparent; } .onb-ring { position: fixed; z-index: 4001; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(10, 41, 36, .58); transition: all .18s ease; } .onb-card { position: fixed; z-index: 4002; width: 320px; max-width: 90vw; background: #fff; border-radius: 14px; box-shadow: var(--sombra-lg); padding: 18px 18px 14px; } .onb-card.onb-card-centro { top: 50%; left: 50%; transform: translate(-50%, -50%); } .onb-prog { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-muted); margin-bottom: 4px; } .onb-card h4 { margin: 0 0 6px; color: var(--verde); font-size: 16px; } .onb-card p { margin: 0 0 16px; color: var(--eerie, #262626); font-size: 13.5px; line-height: 1.45; } .onb-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .onb-acoes .onb-nav { display: flex; gap: 8px; } /* ===== Rodada 77 (acessibilidade — Onda 4, parte 1) ===== */ /* Skip link: fica escondido acima do topo e aparece ao receber foco pelo teclado (Tab). */ .skip-link { position: fixed; top: -60px; left: 12px; z-index: 5000; background: var(--verde); color: var(--branco); padding: 10px 16px; border-radius: 0 0 10px 10px; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: top .15s ease; } .skip-link:focus { top: 0; outline: 3px solid #FAAC30; outline-offset: 2px; } /* Foco visível por teclado em todos os elementos interativos (só no :focus-visible, para não aparecer no clique de mouse). Anel verde com respiro; nos itens do menu (fundo escuro) usa um anel claro para contraste. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .nav-link:focus-visible { outline: 2.5px solid var(--verde); outline-offset: 2px; border-radius: 6px; } .sidebar .nav-link:focus-visible, .sidebar .nav-grupo-btn:focus-visible, .btn-dark:focus-visible, .brand-texture button:focus-visible { outline-color: #FAAC30; } #view-root:focus { outline: none; } /* alvo do skip link não precisa de anel visível */ /* Respeita "reduzir movimento" do sistema operacional. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Alvos de toque mais confortáveis no celular (mín. ~40px de altura). */ @media (max-width: 640px) { .btn { min-height: 40px; } .acoes-crono .btn { min-width: 36px; height: 36px; } .nav-link { padding-top: 12px; padding-bottom: 12px; } .nav-grupo-btn { padding-top: 13px; padding-bottom: 13px; } .btn-ajuda-tour { width: 36px; height: 36px; } } /* Rodada 79: seletor de troca de projeto no cabeçalho da Área do Cliente. */ .cli-proj-switch { height: 34px; max-width: 260px; padding: 0 30px 0 12px; border: 1.5px solid var(--borda); border-radius: 9px; background: #fff; color: var(--verde); font-size: 13px; font-weight: 600; cursor: pointer; } .cli-proj-switch:focus { border-color: var(--verde); outline: none; } @media (max-width: 640px) { .cli-proj-switch { max-width: 150px; font-size: 12px; } } /* ---------- Inputs ---------- */ label { font-size: 13px; font-weight: 700; color: var(--verde); display: block; margin-bottom: 6px; } .field { margin-bottom: 16px; } input, select, textarea { width: 100%; padding: 11px 14px; border-radius: 8px; border: 1.5px solid var(--borda); background: var(--superficie); font-family: var(--font-body); font-size: 14px; /* era var(--preto): no modo escuro dava texto preto sobre a superfície verde */ color: var(--texto); transition: border-color .12s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amarelo); box-shadow: 0 0 0 3px rgba(255,173,0,.18); } textarea { resize: vertical; min-height: 90px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .hint { font-size: 12px; color: var(--texto-muted); margin-top: 4px; font-weight: 400; } /* Barra de filtros compacta (ex.: aba Atividades) — mesma estrutura de .card, mas com fonte e campos menores para ocupar menos espaço vertical. */ .filtros-barra { padding: 12px 16px; } .filtros-barra .field { margin-bottom: 0; } .filtros-barra label { font-size: 11px; margin-bottom: 3px; } .filtros-barra input, .filtros-barra select { padding: 6px 10px; font-size: 12.5px; border-radius: 6px; } .filtros-barra .btn-sm { padding: 6px 12px; font-size: 12px; } /* Variante em linha única (ex.: aba Atividades) — usa flexbox de verdade (o .field-row padrão é um CSS grid de 2 colunas, que quebraria em várias linhas com muitos campos) e permite que cada campo encolha abaixo da largura do seu conteúdo (min-width:0), evitando que um