/* ========================================================================== apen.css — Gestão Apen (app irmão do Conecta) Derivado de GESTAO_APEN_DESIGN_SPEC.md. Carregar DEPOIS do Bootstrap 5. Fonte self-hosted (CSP, sem CDN): colocar .woff2 em /static/vendor/jost/. ========================================================================== */ @font-face{font-family:'Jost';font-weight:300;font-style:normal;font-display:swap; src:url('/static/vendor/jost/Jost-Light.woff2') format('woff2')} @font-face{font-family:'Jost';font-weight:400;font-style:normal;font-display:swap; src:url('/static/vendor/jost/Jost-Regular.woff2') format('woff2')} @font-face{font-family:'Jost';font-weight:500;font-style:normal;font-display:swap; src:url('/static/vendor/jost/Jost-Medium.woff2') format('woff2')} /* ---- Tokens ---- */ :root{ --bg-white:#FFFFFF; --bg-off:#F8F7F4; --bg-warm:#F0EDE8; --navy:#081226; --text-2:#4A4844; --text-body:#888480; --border:#E8E4DE; --border-w:#C8C4BE; --blue-m:#365FAF; --pos:#365FAF; --blue-d:#0D2E6E; --blue-l:#8FA8C8; --neg:#C62828; --warn:#B17D00; /* variantes clareadas p/ estado sobre superfície navy (hover-invert). #FF9B9B é verbatim do apen.css real (danger on-dark); --warn-inv é o par âmbar do D3-bis. */ --neg-inv:#FF9B9B; --warn-inv:#E8C56A; --mkt-pos-inv:#4ADE80; /* --bg-hover = wash CLARO (menus, gauge, ghost); --bg-hover-inv = navy do hover-invert (regra dura do Conecta 2026-07-13: superfície clicável inverte p/ navy + texto branco). Verbatim do apen.css real: invert = navy #081226. */ --bg-hover:#EDF0F7; --bg-hover-inv:#081226; --pill-ok:#E8F0FE; --pill-pend:#FFF4E0; --pill-err:#FDECEA; --font-body:'Jost',system-ui,sans-serif; --fs-micro:10px; --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; /* Degraus de DISPLAY (Bloco G, 2026-08-04). Existem porque a escala parava em 28px e o produto precisa de numeral grande — então cada tela inventava o seu: 8 usos em 7 telas com 5 valores diferentes (1.9 / 2 / 2.1 / 2.6 / 3.2rem). Não é gente desleixada, é a escala não conseguindo expressar o caso. 3xl cobre a marca (.brand-a-lg, 32px exato) e o número macro do Cortes e da Dispersão — que são o MESMO componente e estavam em 30,4 e 33,6px. 4xl é o herói dos Indicadores; 5xl é o código HTTP da tela de erro. */ --fs-3xl:32px; --fs-4xl:40px; --fs-5xl:48px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:40px; --radius-sm:0; --radius:0; --radius-md:0; --shadow-card-hover:0 6px 18px rgba(8,18,38,.16); --shadow-modal:0 10px 40px rgba(0,0,0,.25); --shadow-toast:0 4px 20px rgba(8,18,38,.15); --t-fast:.15s ease; --t-base:.2s ease; --header-h:56px; --header-px:40px; --modal-sm:420px; --modal-md:480px; --modal-lg:560px; /* DESVIO D3 — semáforo SÓ p/ sinal de dinheiro (retorno/P&L). Nada mais usa verde. */ --mkt-pos:#16A34A; --mkt-neg:#C62828; /* Rampa das CLASSES de ativo (proporção do portfólio no Dashboard; gestor, 2026-10-01). Sequencial de um azul só, do mais conservador (1, caixa, claro) ao mais arriscado (6, renda variável, escuro); o offshore (11-14) usa os passos 1/3/5/6. Validada com o validate_palette.js --ordinal (um matiz, luminância monotônica, degraus visíveis, o passo claro destaca do fundo) no branco e no creme do suave; o escuro tem a rampa dele em temas.css. --cls-N-ink = o texto escrito em cima do passo N (contraste >= 4,5:1). */ --cls-1:#9AB0D4; --cls-2:#7493C5; --cls-3:#5276B6; --cls-4:#365FAF; --cls-5:#22468E; --cls-6:#0D2E6E; --cls-1-ink:var(--navy); --cls-2-ink:var(--navy); --cls-3-ink:#FFFFFF; --cls-4-ink:#FFFFFF; --cls-5-ink:#FFFFFF; --cls-6-ink:#FFFFFF; } /* ---- Base ---- */ *{box-sizing:border-box} body{margin:0;background:var(--bg-off);color:var(--navy); font-family:var(--font-body);font-weight:400;font-size:var(--fs-base); -webkit-font-smoothing:antialiased} .num{font-variant-numeric:tabular-nums} a{color:var(--blue-m)} /* ---- Bootstrap overrides (este app é Bootstrap; o Conecta não) ---- */ .btn,.card,.form-control,.form-select,.modal-content,.dropdown-menu,.badge, .alert,.list-group-item,.nav-pills .nav-link,.input-group-text,.table,.toast{ border-radius:0 !important} body,.btn,.form-control,.form-select{font-family:var(--font-body);font-weight:400} .card{box-shadow:none;border-color:var(--border)} /* ---- Header ---- */ .apen-header{height:var(--header-h);background:var(--bg-white); border-bottom:1px solid var(--border);display:flex;align-items:center; justify-content:space-between;padding:0 var(--header-px);position:sticky;top:0;z-index:20} .apen-crumbs{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs); letter-spacing:.04em;color:var(--text-body);text-transform:uppercase} .apen-crumbs .cur{color:var(--navy)} .apen-crumbs .sep::before{content:'/';color:var(--border-w)} .apen-logo{font-size:var(--fs-lg);font-weight:500;color:var(--navy);line-height:1} /* å oficial: trocar por mask-image de /static/apen-a.svg — não usar fonte */ /* ---- Sidebar (reconciliação com o apen.css real do Túlio, 2026-07-29) ---- 1ª volta (rascunho aprovado): corpo claro + navy só no topo. A Natália viu rodando e voltou atrás — prefere manter a sidebar INTEIRA azul escura (mais perto do visual original), só com fonte menor e mais respiro entre os grupos ("quebras", no sentido de separação visual — não confundir com a metodologia de enquadramento). Corrigido na 2ª volta, mesmo dia. Cor sólida (sem gradiente — o resto do sistema real não usa gradiente em superfície grande, só no acento fino do topo). Sharp corners e RGB real do navy (8,18,38) entram de qualquer forma, independente da cor de fundo. Sobrescreve main.css, que segue dono da estrutura (largura, collapse, overlay mobile) — aqui só a pele muda. Pendente (ver GESTAO_APEN_DESIGN_SPEC.md §10): apen-a.svg oficial (o "å" do topo segue textual por ora). O print que a Natália mandou em seguida mostra que os itens do menu real do Túlio TÊM sub-itens que expandem/ recolhem (+/−) — não replicado aqui: o Gestão Apen hoje não tem sub-página sob nenhum item do menu, então isso ficaria fabricando estrutura que não existe. Se for pra ter de verdade, é conversa própria sobre o que cada tela ganha de sub-item, não só visual. */ .apen-sidebar{background:var(--navy);box-shadow:2px 0 12px rgba(8,18,38,.15)} .sidebar-header{height:var(--header-h)} /* PERFORMÅ (2026-07-29, caixa alta é grafia — corrigido depois da 1ª tentativa em minúsculas): nome da plataforma escolhido pela Natália, substitui "åpen"+"capital" como a marca principal no topo — "Åpen Capital" (a empresa) vira legenda pequena logo abaixo, mesmo padrão do "WORKSPACE · ÅPEN" no sistema real do Túlio. text-transform:none porque o texto já vem em caixa alta no template (não é o lowercase antigo do "åpen"). Fica FORA do