/* SAGAPES Gestão — base visual EXTRAÍDA do ADE (IDENTIDADE_v01 §12). Origem: academia-do-estruturador@f1a53dd6, apps/web/assets/ade-app.css, só os blocos usados, cada um com as linhas de origem. Nada aqui é desenho novo: o que é da Gestão está em gestao.css. Atualizar = comparar com o ADE no commit novo e trazer a mudança de forma consciente. */ /* ── origem: ade-app.css:1119-1123 @ f1a53dd6 — ponto de estado ── */ .est-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 10px;vertical-align:0} .est-dot.is-ok{background:var(--pui-success)} .est-dot.is-med{background:var(--pui-warning)} .est-dot.is-ruim{background:var(--pui-danger)} .est-dot.is-neutro{background:var(--pui-text-muted)} /* ── origem: ade-app.css:271-284 @ f1a53dd6 — telas e login ── */ .mcf input[type=range]::-moz-range-thumb{pointer-events:auto;width:12px;height:12px;border-radius:50%;background:var(--pui-primary);border:2.5px solid #fff;box-shadow:0 0 0 1px rgba(26,24,20,.25);cursor:pointer} .pui-view{display:none} .pui-view.is-active{display:block} /* login (mock) */ .vcv-login{position:fixed;inset:0;display:grid;place-items:center;background:var(--pui-bg);z-index:50;padding:20px} .vcv-login .box{width:100%;max-width:404px;background:var(--pui-surface);border:1px solid var(--pui-border);border-radius:20px;box-shadow:0 1px 2px rgba(20,20,28,.04),0 16px 44px -20px rgba(20,20,28,.20);padding:38px 34px 32px} .vcv-login .logo{width:60px;height:60px;border-radius:16px;margin-bottom:4px;background:var(--pui-primary);color:var(--ae-on-primary);display:grid;place-items:center;font-weight:800;font-size:var(--tn-2);margin-bottom:14px} .vcv-login h1{font-size:var(--tn-3);margin:0 0 3px} .vcv-login .lead{color:var(--pui-text-soft);font-size:var(--ts-7);margin:0 0 22px} /* o h1 do login virou a MARCA: sem tamanho de fonte (não há texto dentro), largura fixa em px porque o lockup é arte, não tipografia — e altura automática, para a proporção 5,9:1 do arquivo mandar. `--ae-ink` faz a inversão do tema sozinha. */ .vcv-login h1.ae-lockup{width:216px;margin:0 0 14px;color:var(--ae-ink);font-size:0;line-height:0} .vcv-login h1.ae-lockup svg{display:block;width:100%;height:auto} .vcv-login .pui-field{margin-bottom:13px} .vcv-login .full{width:100%;justify-content:center;margin-top:6px} .vcv-login .alt{text-align:center;font-size:var(--ts-6);color:var(--pui-text-soft);margin-top:14px} /* ── origem: ade-app.css:298-306 @ f1a53dd6 — menu da conta e #app[hidden] ── */ /* Menu da conta (avatar → dropdown): tira os botões utilitários da barra pra ela não quebrar linha */ .pui-usermenu{position:relative} .pui-usermenu>.pui-avatar{border:0;padding:0} .pui-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:242px;background:var(--pui-surface-strong);border:1px solid var(--pui-border);border-radius:14px;box-shadow:0 16px 40px rgba(20,18,14,.18);padding:6px;z-index:60;display:flex;flex-direction:column;gap:2px} .pui-menu[hidden]{display:none} .pui-menu-id[hidden],.pui-menu-item[hidden],.pui-menu-sep[hidden]{display:none} /* #app é display:grid (.pui-app) e isso vencia o atributo [hidden] → o app de viabilidade renderizava ABAIXO do portfólio e aparecia ao rolar. Força esconder. */ #app[hidden]{display:none !important} /* ── origem: ade-app.css:987 e 1011-1018 @ f1a53dd6 — itens do menu da conta ── */ .pui-menu-id{padding:9px 11px 11px;border-bottom:1px solid var(--pui-border);margin:2px 4px 4px;display:flex;flex-direction:column;gap:3px} .pui-menu-id b{font-size:var(--ts-6);color:var(--pui-text);word-break:break-all;line-height:1.3} .pui-menu-id span{font-size:var(--ts-3);color:var(--pui-text-soft)} .pui-menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:10px 11px;font-size:var(--ts-7);font-weight:500;color:var(--pui-text);cursor:pointer;font-family:inherit;transition:background .12s} .pui-menu-item:hover{background:var(--pui-surface-muted)} .pui-menu-item [data-icon],.pui-menu-item svg{width:16px;height:16px;flex:0 0 auto;opacity:.7} .pui-menu-item-danger{color:var(--pui-danger);font-weight:600} .pui-menu-item-danger:hover{background:color-mix(in srgb,var(--pui-danger) 12%,transparent)} .pui-menu-sep{height:1px;background:var(--pui-border);margin:4px 6px} /* ── origem: ade-app.css:1188-1190 @ f1a53dd6 — sobreposição (modal; no celular vira folha de baixo, ver bloco do celular) ── */ .vcv-overlay{position:fixed;inset:0;background:rgba(18,24,32,.42);display:grid;place-items:center;z-index:60;padding:20px} .vcv-overlay[hidden]{display:none} .vcv-overlay-box{width:100%;max-width:430px;position:relative} /* ── origem: ade-app.css:1200-1666 @ f1a53dd6 — camada v3: tokens, casca, componentes, foco, tablet e celular ── */ /* ===== Camada "Academia do Estruturador" v3 (off-white + amarelo + Plus Jakarta Sans) ===== */ :root{ --pui-font:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --pui-bg:#eeedf1; --pui-surface:#ffffff; --pui-surface-strong:#f7f7f9; --pui-surface-muted:#eaeaee; /* TINTA — os três níveis foram RE-ESPAÇADOS em 2026-07-27, não só escurecidos. Medido nas 19 telas: o `muted` antigo (#9da0a8) dava 2,18 a 2,62 de contraste — o mínimo legível é 4,5 — e sozinho respondia por 299 dos 365 elementos ilegíveis do tema claro. Escurecer só ele o deixaria igual ao `soft` antigo (#65686f) e a hierarquia de três níveis viraria dois. Os dois desceram juntos. PIOR CASO de cada nível (sobre a faixa #eaeaee, a superfície mais escura): texto 13,69 · médio 8,38 · claro 5,94 — mínimo 4,5. Escolha do Bruno entre dois tons; este é o mais escuro dos dois. Ele adensa a moldura do app (menu e topo), o que era o preço conhecido. */ --pui-text:#1f1f23; --pui-text-soft:#3f424a; --pui-text-muted:#55585f; --pui-border:#e7e7eb; --pui-border-strong:#dadae0; --pui-primary:#1e1e22; --pui-primary-strong:#000000; --pui-primary-soft:#ededf1; /* SEMÁFORO — escurecido o suficiente para passar sobre o fundo MAIS CLARO em que cada um aparece (o verde vive sobre o próprio `success-soft`; o vermelho, sobre cinza). Continuam verde, vermelho e âmbar — mudou o tom, não a cor. */ --pui-success:#085c3a; --pui-success-soft:#e7f6ee; --pui-danger:#a52734; --pui-danger-soft:#fbe6e9; --pui-warning:#714b07; --pui-warning-soft:#fbf0d2; --pui-info:#3a5fd9; --pui-info-soft:#e7ecfb; --pui-radius:14px; --pui-radius-sm:10px; --ae-ink:#1e1e22; /* CTA preto */ --ae-accent:#fbd545; --ae-accent-soft:#fef4ce; --ae-accent-ink:#2a2100; /* amarelo de marca */ --ae-chart:#fbd545; --ae-chart-dark:#e7b400; /* gráficos: amarelo */ /* ANEL DE FOCO — token próprio, e a razão é a mesma que o PAPEL já ensinou duas vezes: o acento tem DOIS níveis, porque o amarelo de marca ILUMINA, não MARCA. Medido em 06/08 nas quatro superfícies claras, contra o piso de 3,0 de elemento gráfico (WCAG 1.4.11) — o anel que existia era invisível para quem navega por teclado: --ae-accent #fbd545 → 1,23 fundo · 1,43 cartão --ae-accent-soft #fef4ce → 1,10 (o halo não é sinal, é decoração) --ae-chart-dark #e7b400 → 1,65 fundo · 1,92 cartão ← o idioma que a casa usava O âmbar escuro é o MESMO valor que o papel chama de --da: 4,93 a 5,92 no claro. No escuro o amarelo volta a mandar (9,98 a 12,87) — é a marca lida do outro lado, exatamente como --ae-ink. Uma família, dois níveis, um anel só. */ --ae-foco:#8a5a0f; /* 🔴 A FRONTEIRA DO DADO (14/08). O ponto em que o apurado acaba e a projeção começa era marcado de TRÊS jeitos: linha vermelha na obra, troca de traço no fluxo, borda amarela na tabela. O vermelho era erro de significado — `--pui-danger` é a cor de FALHA neste app, e o corte não é falha: é o limite do que se sabe. Das três, a TABELA já estava certa, então o token aponta para a cor dela em vez de inventar uma quarta. 🔴 MEDIDO NO BROWSER, e por isso NÃO é `--ae-chart-dark` cru: aquele amarelo dá 1,92:1 sobre branco. Serve de preenchimento de barra; não serve de rótulo — e o rótulo "Payback" do fluxo está nesse 1,92 desde sempre, invisível para quem lê de longe. A guarda de contraste não pega: ela lê a FOLHA DE ESTILO, e estes rótulos são `fill` em SVG montado no JS. `#8a5a0f` é o âmbar que esta casa já provou legível — foi por ele que o anel de foco trocou, pela mesma medição. */ --ae-corte:#8a5a0f; --ae-display:'Plus Jakarta Sans',system-ui,sans-serif; /* ===== ESCALA TIPOGRÁFICA DA TELA (06/08) ===== Até aqui a tela não tinha régua: 262 declarações de `font-size` em 24 valores soltos, escolhidos um a um. O papel sempre teve (--t1..--t7), e é de lá que vem a forma desta. DUAS RÉGUAS, pela mesma razão do dossiê: num documento financeiro NÚMERO não é texto grande, é outra categoria de informação — e ganha escala própria. ⚠️ O PASSO DE 0,5 NA BANDA DENSA É DELIBERADO, e é o achado da medição: 10,5 · 11,5 · 12,5 · 13,5 somam 84 declarações, um terço do total. Não são ruído — são a régua real de uma interface densa, onde meio pixel separa a legenda do rótulo. Colapsá-los em passos inteiros é outra decisão, maior, e mexeria em 84 lugares de uma vez. O QUE FICA DE FORA, de propósito: `font-size` que dimensiona GLIFO (ícone de veredito, ícone do banner societário) não é tipografia, é tamanho de desenho; e a tabela do PAPEL (9,5px) obedece à régua da folha, não à da tela. */ --ts-1:10px; --ts-2:10.5px; --ts-3:11px; --ts-4:11.5px; --ts-5:12px; --ts-6:12.5px; --ts-7:13px; --ts-8:13.5px;--ts-9:14px; --ts-10:15px; --tn-1:17px; --tn-2:20px; --tn-3:23px; --tn-4:28px; --tn-5:34px; /* CAMPO DE DIGITAÇÃO tem token próprio, separado da superfície do cartão. No claro os dois são branco e ninguém nota; no escuro o campo precisa ser MAIS FUNDO que o cartão, senão a caixa some e sobra a borda. */ --ae-field:#ffffff; /* TINTA SOBRE O AMARELO SUAVE. Separada de --ae-accent-ink de propósito: aquela é a tinta sobre o amarelo FORTE (pílula MODELO, faixa do dossiê, logo, CTA no escuro) e tem de ser escura sempre. Esta acompanha o tema — no escuro o amarelo suave vira um marrom fundo, e tinta escura sobre ele dá contraste 1,25 (medido). */ --ae-on-soft:#2a2100; /* TINTA SOBRE O PRETO DE AÇÃO. No escuro o --pui-primary inverte (vira quase branco), e a tinta branca cravada ao lado dele virava branco sobre branco. */ --ae-on-primary:#ffffff; } body{background:var(--pui-bg) !important} .pui-backdrop-texture{display:none !important} #app.pui-app{background:transparent;border:0;box-shadow:none} .pui-sidebar{background:var(--pui-surface-strong)} .pui-main{padding:24px 30px 64px} .pui-topbar{justify-content:space-between;max-width:2400px;margin:0 auto 26px} .pui-view{max-width:2400px;margin-left:auto;margin-right:auto} .pui-card{box-shadow:0 1px 3px rgba(20,20,28,.05);border-color:var(--pui-border);border-radius:18px;background:var(--pui-surface)} .pui-card::before{display:none !important} .pui-page-head{margin-bottom:14px} .pui-page-head h1{font-family:var(--ae-display);font-weight:800;font-size:clamp(24px,2.7vw,34px);letter-spacing:-.025em} .pui-page-head p{font-size:var(--ts-8)} .pui-eyebrow{font-size:var(--ts-3);color:var(--pui-text-muted);letter-spacing:.08em} /* CTAs pretos + marca */ .pui-button-primary{background:var(--ae-ink);border-color:var(--ae-ink)} .pui-button-primary:hover{background:#38383f;border-color:#38383f} .pui-logo-mark,.vcv-login .logo,.pipe-top .brand .logo{background:var(--ae-accent) !important;color:var(--ae-accent-ink) !important} .pui-sidebar-brand a span:not(.pui-logo-mark){font-family:var(--ae-display);font-weight:600} .vcv-login h1{font-family:var(--ae-display);font-weight:800;letter-spacing:-.025em} /* 820 numa fonte que vai até 800 não satura: o navegador ENGORDA por conta própria (medido em 06/08 — 268,68 px contra 267,67 px na mesma frase). Negrito sintético borra o desenho em vez de usar a instância real da fonte variável. Este é o ÚNICO dos quatro seletores com 820 que existe no app (6 na tela); os outros três são componentes que a casa não usa. Corrigido AQUI, e não no propulsor: o design system herdado não se edita — se veste. */ .pui-nav-section-title{font-weight:800} .pui-nav-section-title span{letter-spacing:.09em} .pui-kpi-grid,.pui-kit-grid{gap:16px} .pui-kpi-grid{margin-bottom:22px} .pui-view>.pui-card,.pui-view>article.pui-card,.pui-view>.pui-kit-grid{margin-top:18px} .pui-kpi-card span{color:var(--pui-text-muted);font-size:var(--ts-6)} .pui-kpi-card strong{font-size:clamp(22px,2.4vw,30px)} .pui-kpi-card{gap:6px} .vcv-info{background:var(--pui-surface);border-left-width:3px} .pui-card-head h3{font-size:var(--ts-10)} /* topo: controles compactos numa linha (evita o select esticar com width:100%) */ .pui-topbar .pui-action-row{flex-wrap:nowrap} /* 🔴 O CTA DO TOPO SAÍA DA JANELA E A ROLAGEM ERA ENGOLIDA — medido em 27/08, no Painel do "Residencial Base — Itajaí", com a régua do próprio passo (`documentElement.scrollWidth === innerWidth` + nenhum nó com `right > innerWidth`): 924px → 7 nós fora da janela, o `.pui-action-row` chegando a 1039 1024px → 4 nós fora, o ícone-botão da Trilha em 1039 1100px → 0 1180px → 0 em TODAS elas `scrollWidth === innerWidth`: a página nunca rola de lado É esse empate que faz o defeito doer. `.pui-topbar` e `.pui-action-row` são `nowrap` (a regra logo acima), o menu lateral de 254px só sai a 919px, e o `overflow-x:hidden` do reset (`propulsor-ui.css:82`) engole a rolagem — então o botão não fica só cortado, fica INALCANÇÁVEL. Mesma classe do defeito que a landing teve entre 1121 e 1415px. ⚠ O CORTE EM 1180 É MAIS LARGO QUE O ESTOURO MEDIDO, de propósito, e isso tem preço. Entre ~1040 e 1180 não havia estouro; ali a regra troca uma linha por duas quando o nome do empreendimento é CURTO (topo de 44 → 71px). Com nome LONGO ela faz o contrário: sem ela o título quebra dentro da própria célula e o topo vai a 126px; com ela, 71px. O corte largo escolhe o caso ruim do nome longo — que é o caso real de quem nomeia empreendimento por extenso — em vez do ganho de 27px do nome curto. Estreitar para 1060 devolve os 27px e desiste do nome longo; é a alternativa, não um esquecimento. ⚠ A ORDEM AQUI É O CONSERTO: mesma especificidade da regra de cima e as duas fora de media — media query NÃO acrescenta especificidade, então quem vence é quem vem depois. Colado ANTES do `nowrap`, este bloco não faz nada e parece feito. */ @media(max-width:1180px){ .pui-topbar{flex-wrap:wrap;row-gap:10px} .pui-topbar .pui-action-row{flex-wrap:wrap} } .pui-topbar .pui-select{width:auto} .pui-topbar .vcv-ver-label{margin-left:4px} /* Pendências (checklist guiado, avançado) */ /* Painel da Trilha: ancorado no botão do topo (bico), elevação em camadas do DS, cabeçalho+barra fixos e rolagem só na lista — não é mais um balão solto. */ #pend-panel{position:fixed;right:20px;top:58px;z-index:80;width:min(380px,calc(100vw - 32px));background:var(--pui-surface);border:1px solid var(--pui-border-strong);border-radius:20px;box-shadow:0 1px 2px rgba(20,20,28,.04),0 28px 64px -26px rgba(20,20,28,.34);padding:16px 18px 14px} #pend-panel::before{content:'';position:absolute;top:-7px;right:106px;width:13px;height:13px;background:var(--pui-surface);border-left:1px solid var(--pui-border-strong);border-top:1px solid var(--pui-border-strong);border-radius:4px 0 0 0;transform:rotate(45deg)} #pend-list{max-height:min(58vh,520px);overflow:auto;overscroll-behavior:contain;padding-right:2px} .pend-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px} .pend-bar{height:7px;background:var(--pui-surface-muted);border-radius:999px;overflow:hidden} /* Verde = "tudo certo". Enquanto faltar marco, a barra fica âmbar (em andamento). */ .pend-fill{height:100%;width:0;background:var(--ae-chart-dark);border-radius:999px;transition:width .35s ease,background-color .3s ease} .pend-fill.is-done{background:var(--pui-success)} .pend-grp{font-size:var(--ts-1);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--pui-text-muted);margin:12px 0 4px} .pend-item{display:flex;align-items:center;gap:9px;padding:6px 2px;border-bottom:1px dashed var(--pui-surface-muted);font-size:var(--ts-6)} .pend-item:last-child{border-bottom:0} .pend-ok{width:17px;height:17px;border-radius:50%;flex:0 0 17px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--ts-2);font-weight:800;background:var(--pui-success-soft);color:var(--pui-success)} .pend-todo{background:var(--pui-surface-muted);color:var(--pui-text-muted);font-weight:700} .pend-lbl{flex:1;min-width:0} .pend-lbl small{display:block;color:var(--pui-text-muted);font-size:var(--ts-2)} .pend-item.done .pend-lbl{color:var(--pui-text-soft)} .pend-go{border:0;background:none;color:var(--pui-success);font:inherit;font-size:var(--ts-4);font-weight:700;cursor:pointer;white-space:nowrap;padding:3px 6px;border-radius:6px} .pend-go:hover{background:var(--pui-success-soft)} #pend-pct.pend-done{color:var(--pui-success)} /* ===== v3: camada de componentes (pills + ativo amarelo + soft) — override do propulsor, sem editar o DS compartilhado ===== */ :root{ --pui-rainbow:var(--ae-accent); --pui-rainbow-alpha:1; --ae-accent-strong:#ecc22c; } .pui-nav-item.is-active::before,.pui-tabs .is-active::after,.pui-modal-panel::before,.pui-card::before{background:var(--ae-accent)!important;animation:none!important} .pui-loader{background:var(--ae-accent)!important} .pui-button,.pui-icon-button{border-radius:999px} .pui-button-primary{background:var(--ae-ink)!important;border-color:var(--ae-ink)!important;color:#fff!important;box-shadow:0 6px 16px rgba(20,20,28,.16)} .pui-button-primary:hover{background:#38383f!important;border-color:#38383f!important} .pui-button-secondary{background:var(--pui-surface-muted);border-color:var(--pui-border-strong);color:var(--pui-text)} .pui-button-secondary:hover{background:var(--pui-surface);border-color:var(--ae-ink)} .pui-button-ghost{background:var(--pui-surface);border-color:var(--pui-border-strong);color:var(--pui-text)} /* o anel é OUTLINE, não box-shadow: box-shadow no foco apagava a elevação do CTA (a regra antiga tinha !important e substituía a sombra inteira). Outline não ocupa espaço e não disputa com a elevação. O halo suave fica como reforço, nunca como o sinal. */ .pui-button:focus-visible,.pui-icon-button:focus-visible{outline:2px solid var(--ae-foco);outline-offset:2px} /* ===== O PISO: uma língua de foco só ===== Medido em 06/08 com Tab de VERDADE (45 tabulações, foco por código não serve — ver abaixo): dos 12 tipos que o teclado alcança, só TRÊS tinham anel desenhado por nós. Os outros nove — os 19 itens do menu, o logo, os "?" dos KPIs, o select nativo, o voltar — caíam no anel PADRÃO DO NAVEGADOR (`auto 1px rgb(229,151,0)` no Chrome), que muda de forma e de cor em cada navegador e não é nosso. Não estavam mudos; estavam falando outra língua. `:where()` tem especificidade ZERO de propósito: isto é piso, não lei. Qualquer regra de foco desta casa continua vencendo sem precisar de !important. ⚠️ PARA MEDIR ISTO DE NOVO: `:focus-visible` NÃO casa com `el.focus()` por código — o navegador só considera teclado o que veio do teclado. Uma varredura que foca por código mede zero anéis e conclui que está tudo quebrado. Foi o que aconteceu na primeira tentativa. Tab de verdade, e com transição neutralizada antes de ler. */ :where(a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{ outline:2px solid var(--ae-foco); outline-offset:2px; } .pui-icon-button{border-color:var(--pui-border-strong)} .pui-icon-button:hover{color:var(--ae-ink);border-color:var(--ae-ink)} .pui-card{border-radius:20px;box-shadow:0 1px 2px rgba(20,20,28,.04),0 8px 24px -12px rgba(20,20,28,.10)} .pui-kpi-card strong{font-family:var(--ae-display);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05} .pui-select-button{border-radius:999px;padding:0 16px} .pui-select-menu{border-radius:16px} .pui-select-menu button.is-selected{color:var(--ae-on-soft)!important;background:var(--ae-accent-soft)!important} .pui-select-menu button:hover{color:var(--ae-ink);background:var(--pui-surface-muted)} .pui-field input,.pui-field select,.pui-field textarea,.pui-search input,.pui-select-search,.pui-select-button,.pui-input{border-radius:12px} .pui-field input:focus,.pui-field select:focus,.pui-field textarea:focus,.pui-search input:focus,.pui-select-search:focus,.pui-select-button:focus-visible,.pui-input:focus{border-color:var(--ae-foco)!important;box-shadow:0 0 0 3px var(--ae-accent-soft)!important} /* v3 · formulario: campo e campo — select nativo, pui-select e input com a MESMA caixa */ .pui-field .pui-select{width:100%} .pui-field .pui-select-button{border-radius:12px;padding:0 12px;font-weight:500;font-size:var(--ts-9)} .pui-field input:disabled,.pui-field select:disabled{background-color:var(--pui-surface-strong);color:var(--pui-text-muted);cursor:not-allowed} #modalNovo .pui-field select,#modalProjEdit .pui-field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:0 34px 0 12px;font-weight:500;font-size:var(--ts-9);background-color:var(--ae-field);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365686f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:15px 15px} /* grupos do formulario (Identificacao · Premissas) */ .ae-fgrp{display:grid;gap:12px} .ae-fgrp+.ae-fgrp{margin-top:4px;padding-top:16px;border-top:1px solid var(--pui-border)} .ae-fgrp-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:var(--ts-3);font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--pui-text-muted)} .ae-fgrp-h em{font-size:var(--ts-3);font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;color:var(--pui-text-muted)} .ae-frow{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:560px){.ae-frow{grid-template-columns:1fr!important}} /* interruptor "é um empreendimento modelo" (modal de editar) */ .pe-modelo{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:var(--ts-7);line-height:1.45} .pe-modelo input{width:auto;margin:2px 0 0;flex:0 0 auto} .pe-modelo b{display:block;font-weight:600} .pe-modelo small{display:block;margin-top:2px;font-size:var(--ts-4);color:var(--pui-text-soft)} /* travado = a marca veio do sistema e é pegajosa; o texto de ajuda explica por quê */ .pe-modelo:has(input:disabled){cursor:default} .pe-modelo:has(input:disabled) b{color:var(--pui-text-soft)} .pui-tabs{border-radius:999px;background:var(--pui-surface-muted)} .pui-tabs button{border-radius:999px} .pui-tabs .is-active::after{display:none!important} .pui-tabs button.is-active{background:var(--ae-ink);color:var(--ae-on-primary);box-shadow:none} .pui-nav-item{border-radius:999px} .pui-nav-item:hover:not(.is-active){background:var(--pui-primary-soft);color:var(--pui-text)} .pui-nav-item.is-active{background:var(--ae-ink);color:var(--ae-on-primary)} .pui-nav-item.is-active .pui-icon,.pui-nav-item.is-active svg{color:var(--ae-on-primary)} .pui-nav-item.is-active::before{display:none!important} .pui-badge{font-weight:700} .pui-badge.is-accent,.pui-badge-accent{background:var(--ae-accent);border-color:var(--ae-accent);color:var(--ae-accent-ink)} .pui-segmented{border-radius:999px;background:var(--pui-surface-muted);padding:4px} .pui-segmented button{border-radius:999px} .pui-segmented button.is-active,.pui-segmented button.on,.pui-segmented button[aria-selected="true"]{background:var(--ae-accent)!important;color:var(--ae-accent-ink)!important;border-color:var(--ae-accent)!important;box-shadow:none} .pui-segmented button:hover:not(.is-active):not(.on){background:var(--pui-surface);color:var(--ae-ink)} .pui-table tbody tr:hover,.pui-table tbody tr.is-highlighted{background:var(--ae-accent-soft)!important} .pui-table tbody tr:hover td:first-child,.pui-table tbody tr.is-highlighted td:first-child{box-shadow:inset 3px 0 0 var(--ae-accent)!important} .pui-table tbody tr.is-selected{background:var(--ae-accent-soft)} /* ---- A MATRIZ DE RESPONSABILIDADE: o número perto do rótulo (design, 2026-08-26) -------- 🔴 O DEFEITO, medido na tela a 1280px: entre o fim do rótulo ("Custo de obra") e o campo onde se digita o percentual havia **429px de nada**, em 9 linhas sem trilho nenhum. A causa não era espaçamento: `.pui-table` é `width:100%` com piso de `min-width:820px`, e esta tabela NÃO está dentro de um `.pui-table-wrap` (que a folha já trata com `width:auto`). Resultado: 917px de tabela para 484px de conteúdo, e a auto-colocação distribuía os 433px de folga inflando as colunas — a do rótulo reservava 311px para um texto de 166. 🌉 A CURA É DEIXAR A TABELA CABER NO CONTEÚDO, não apertar padding: medido, o vão cai de 429 para 192px e a tabela de 917 para 564. O que sobra dos 192 não é folga — é a largura dos cabeçalhos com o NOME de cada sócio, que é legítima. ⚠️ A COLUNA DO RÓTULO NÃO PODE TER LARGURA FIXA: ela é a linha derivada do `rateioLinhas`, então o texto varia com as despesas do estudo e pode ficar longo. `width:auto` a deixa crescer sozinha; o `max-width:100%` impede que ela estoure a caixa quando crescer. */ #sc-matriz{width:auto;min-width:0;max-width:100%} /* O trilho para o olho atravessar as 9 linhas. Três coisas medidas aqui: 🔴 pintar o `` NÃO funciona nesta tabela (`border-collapse:collapse`) — só o `` pinta. Testado com cor crua: no `tr` não muda nada, no `td` muda. 🔴 a cor sai de `color-mix` sobre o TOKEN do texto, e não de um cinza cravado: assim ela inverte sozinha no tema escuro (tinta clara sobre fundo escuro) em vez de sumir. ⚠️ 4% foi MEDIDO, não escolhido: degrau de 9,0 no claro e 8,5 no escuro — a mesma taxa serve nos dois. O token `--pui-surface-muted` daria 1,20 de razão, que numa tabela de DIGITAR lê como listra e compete com os campos. */ #sc-matriz tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--pui-text) 4%,transparent)} /* O Σ é o SINAL da trava dos 100%, não mais uma coluna: ganha régua à esquerda para separar o total do que se digita, e `tabular-nums` para os dígitos alinharem entre as linhas. */ #sc-matriz thead th:last-child,#sc-matriz tbody td:last-child{ border-left:1px solid var(--pui-border);font-variant-numeric:tabular-nums} /* ---- BOTÃO QUE DIVIDE LINHA COM CAMPO NÃO TOMA A LARGURA TODA (design, 2026-08-27) ------- 🔴 O DEFEITO, medido a 375px: o campo do **CNPJ da SPE** ficava com **16px** de largura — impossível digitar. A causa não é o campo: é `@media(max-width:680px){.pui-button{width:100%}}`, que é a regra CERTA para botão de ação empilhado e a ERRADA para botão dentro de uma linha ao lado de um campo. O botão "Consultar" declara `flex:none` (nunca encolhe) e, com `width:100%`, toma os 313px inteiros — então toda a compressão sobra para o campo. 🌉 A REGRA DESCREVE A CAUSA, não os ids: `div:has(> input) > .pui-button`. São DUAS ocorrências do mesmo padrão (o CNPJ da SPE e o CNPJ por sócio, montado no `ade-app.js`), e amarrar em id consertaria uma e deixaria a outra. Medido: botão 313 → 88px, campo 16 → 219px, e os demais botões da tela **sem alteração** (42, 138, 347 antes e depois). ⚠️ `:has()` é suportado aqui (conferido com `CSS.supports`) e a folha já usa `color-mix`, que é da mesma geração. */ @media (max-width:680px){ div:has(> input) > .pui-button{width:auto} } .vcv-matrix tbody tr:hover,.vcv-flux tbody tr:hover{background:var(--ae-accent-soft)!important} .pui-table-wrap,.vcv-scroll{border-radius:16px} .pui-modal-panel{border-radius:20px} .pui-modal-panel::before{display:none!important} .vcv-overlay-box{border-radius:20px} /* v3 · escolha do modelo de demonstracao: cartao clicavel de verdade */ .dp-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px} .dp-opt{display:grid;gap:10px;justify-items:start;text-align:left;padding:16px;font:inherit;color:var(--pui-text);background:var(--pui-surface);border:1px solid var(--pui-border);border-radius:16px;box-shadow:0 1px 2px rgba(20,20,28,.04),0 8px 24px -14px rgba(20,20,28,.14);cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease} .dp-opt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--ae-ink);box-shadow:0 1px 2px rgba(20,20,28,.05),0 16px 30px -16px rgba(20,20,28,.28)} .dp-opt:focus-visible{outline:0;border-color:var(--ae-foco);box-shadow:0 0 0 3px var(--ae-accent-soft)} .dp-opt-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--pui-surface-muted);color:var(--pui-text-soft);transition:background .16s ease,color .16s ease} .dp-opt-ico svg{width:19px;height:19px} .dp-opt:hover:not(:disabled) .dp-opt-ico{background:var(--ae-accent-soft);color:var(--ae-on-soft)} .dp-opt-tit{font-family:var(--ae-display);font-size:var(--ts-10);font-weight:800;letter-spacing:-.01em} .dp-opt-txt{font-size:var(--ts-5);font-weight:500;line-height:1.5;color:var(--pui-text-soft)} .dp-opt-cta{display:inline-flex;align-items:center;gap:6px;font-size:var(--ts-3);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--pui-text-muted)} .dp-opt-cta i{font-style:normal;transition:transform .16s ease} .dp-opt:hover:not(:disabled) .dp-opt-cta,.dp-opt:focus-visible .dp-opt-cta{color:var(--ae-ink)} .dp-opt:hover:not(:disabled) .dp-opt-cta i{transform:translateX(3px)} .dp-opt:disabled{cursor:default;opacity:.5} .dp-opt.is-loading{opacity:1;border-color:var(--ae-chart-dark);box-shadow:0 0 0 3px var(--ae-accent-soft)} .dp-opt.is-loading .dp-opt-ico{background:var(--ae-accent-soft);color:var(--ae-on-soft)} .dp-opt.is-loading .dp-opt-cta{color:var(--ae-on-soft)} .dp-msg{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:var(--ts-6);font-weight:600;color:var(--pui-text-soft)} .dp-msg-erro{color:var(--pui-danger)} .dp-spin{flex:0 0 14px;width:14px;height:14px;border-radius:50%;border:2px solid var(--ae-accent-soft);border-top-color:var(--ae-chart-dark);animation:dpspin .7s linear infinite} @keyframes dpspin{to{transform:rotate(360deg)}} @media(max-width:560px){.dp-opts{grid-template-columns:1fr}} .pui-modal-actions .pui-button,.pui-modal-close{border-radius:999px} .pui-switch input:checked+span{background:var(--ae-accent)!important;border-color:var(--ae-accent)!important} .pui-switch input:checked+span::before{background:var(--ae-ink)} .pui-progress span{background:var(--ae-accent)} .vcv-info{border-left-color:var(--ae-accent)!important} /* v3: chips/estados ativos por tela -> amarelo */ .mk-chip.on,.int-chip.on,.fn-chip.on{border-color:var(--ae-accent)!important;background:var(--ae-accent-soft)!important;color:var(--ae-on-soft)!important} .dr-pasta.is-ativa{background:var(--ae-accent-soft)!important;color:var(--ae-on-soft)!important} .cnv-badge.jur{background:var(--ae-accent-soft)!important;color:var(--pui-warning)!important} .ms-tipos .is-active,.ms-tipos button.on,.ms-tipo.on,.ms-tipo.is-active{background:var(--ae-accent)!important;color:var(--ae-accent-ink)!important;border-color:var(--ae-accent)!important} .sc-idx{background:var(--ae-accent-soft)!important;color:var(--ae-on-soft)!important} /* ===== BLOCO 2 do plano de design (auditoria 2026-07-24): o PRETO volta a ser só AÇÃO ===== O v3 fez --pui-primary virar preto (cor de clique), mas o preto continuou pintando rótulo, barra de gráfico, selo e contorno — o olho é puxado pra coisa que não clica. Aqui cada uso volta pra camada certa: rótulo = neutro legível · série de gráfico = amarelo de marca · selo = cor semântica. Detalhe em docs/specs/plano-design-v3.md. */ /* A FONTE DA MARCA no app inteiro. O carrega .pui-font-inter (seletor de fonte do DS compartilhado), que redeclara --pui-font e ANULAVA o valor v3 do :root — resultado: só o que pedia --ae-display explicitamente (h1, número do KPI) saía em Plus Jakarta Sans; corpo, botão e navegação continuavam em Inter. Redeclarar aqui, com especificidade maior, sem tocar no CSS compartilhado. */ body.pui-font-inter{--pui-font:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif} /* rótulo de indicador legível: --pui-text-muted (#9da0a8) dá 2,6:1 no branco (reprova AA) */ .pui-kpi-card span,.fx-kpi .k-lab,.kpi-ctx em,.res-tbl th{color:var(--pui-text-soft)} /* o DS compartilhado define success/warning/info mas NÃO danger — sem esta regra o pior estado (ex.: "1 de 9 essenciais" no Data Room) caía no cinza neutro do selo padrão */ .pui-badge-danger{color:var(--pui-danger);background:var(--pui-danger-soft);border-color:rgba(210,59,73,.20)} /* barras de gráfico pintadas com a cor de AÇÃO parecem botão desligado -> série amarela */ #caniveteScreen .fx-meter i,[data-view-panel="captacao"] .fx-meter i,#cnvInvestidor .iv-bar{background:var(--ae-chart)} /* "Aprovado" estava com o cinza de desabilitado (herdou --pui-primary-soft) */ .fase-Aprovado{background:var(--pui-success-soft);color:var(--pui-success)} /* navegação: hover quase inexistente e "Voltar ao portfólio" da cor do próprio fundo */ .pui-nav-item:hover:not(.is-active){background:var(--ae-accent-soft);color:var(--pui-text)} .vcv-side-back{background:var(--pui-surface);color:var(--pui-text);border:1px solid var(--pui-border-strong)} .vcv-side-back:hover{background:var(--ae-accent-soft);border-color:var(--ae-accent)} /* sobras da paleta quente (bege/creme/petróleo) que ficam encardidas ao lado do cinza frio */ /* o "ƒ" do memorial era a ÚNICA serifa da interface (Georgia) */ .kpi-info{font-family:var(--pui-font)!important;font-style:italic!important;font-weight:800!important;font-size:var(--ts-7)!important} .kpi-info:hover{color:var(--ae-on-soft);border-color:var(--ae-accent);background:var(--ae-accent-soft)} /* grades balanceadas (sem KPI órfão "3+1") */ .vcv-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .vcv-grid-4{grid-template-columns:repeat(4,minmax(0,1fr)) !important} /* responsivo: ganha/perde colunas conforme a largura, sem órfão */ @media(min-width:1700px){.vcv-grid-2{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:1280px){.vcv-grid-4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}} @media(max-width:1024px){.pui-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pui-kit-grid,.vcv-grid-2{grid-template-columns:1fr !important}} @media(max-width:680px){.pui-kpi-grid,.vcv-grid-4{grid-template-columns:1fr !important}} /* ===== BARRA DE FERRAMENTAS ≠ AÇÕES DE FORMULÁRIO (raiz do mobile quebrado) ===== O design system (propulsor-ui.css @≤680px) empilha TODA .pui-action-row em coluna com .pui-button{width:100%}. Pra ações de modal/formulário isso é certo — pra BARRA DE FERRAMENTAS é o que fazia a topbar do app ter 199px de altura no celular (e o "Status/Exportar" do Resumo virar duas faixas). Aqui as barras voltam a ser linha e os botões ao tamanho do conteúdo. Na régua do DS (680px), não na do app (599px) — senão 600–680px fica quebrado. */ @media(max-width:680px){ #app .pui-topbar .pui-action-row, #app .pui-page-head .pui-action-row{flex-direction:row;align-items:center;flex-wrap:wrap} #app .pui-topbar .pui-button, #app .pui-page-head .pui-button, #app .pui-page-head .pui-select{width:auto} /* O min-width:210px do seletor de versão (inline no HTML) sozinho já obrigava a topbar a quebrar em 3 faixas no tablet pequeno. Solto ele. */ #app .pui-topbar #sel-versao{min-width:0 !important;max-width:150px} } /* responsivo tablet (iPad): sidebar = trilho de ícones AO LADO do conteúdo (não empilha no topo) — consistente com o desktop */ @media(max-width:920px) and (min-width:600px){ #app.pui-app,#app.pui-app.is-sidebar-collapsed{grid-template-columns:72px minmax(0,1fr);overflow:hidden} #app .pui-sidebar{min-height:100%;padding:16px 8px;border-right:1px solid var(--pui-border);border-bottom:0} #app .pui-nav{grid-template-columns:1fr} #app .pui-nav-item{justify-content:center;padding-left:0;padding-right:0} #app .pui-nav-label,#app .pui-sidebar-brand a span:not(.pui-logo-mark),#app .pui-sidebar-foot,#app .pui-sidebar-toggle,#app .pui-nav-section-title{display:none} #app .pui-main{padding:18px 18px 56px} } /* ===== CELULAR (<600px): layout dedicado. A sidebar vira um TRILHO horizontal rolável no topo e o conteúdo ocupa a largura toda. Escopado só a telefone — não afeta desktop/tablet. Legibilidade: fontes e alvos de toque maiores. ===== */ @media(max-width:599px){ /* App: uma coluna, nav em cima, conteúdo embaixo em largura total */ #app.pui-app,#app.pui-app.is-sidebar-collapsed{grid-template-columns:1fr !important;grid-template-rows:auto minmax(0,1fr);overflow:visible} #app .pui-sidebar{flex-direction:row;align-items:center;gap:4px;min-height:auto;height:auto;padding:7px 8px;border-right:0;border-bottom:1px solid var(--pui-border);overflow-x:auto;-webkit-overflow-scrolling:touch;position:sticky;top:0;z-index:20;background:#fbf9f3} #app .pui-sidebar-brand,#app .vcv-side-proj,#app .pui-sidebar-foot,#app .pui-sidebar-toggle,#app .pui-nav-section-title{display:none} #app .pui-nav{display:flex;flex-direction:row;grid-template-columns:none;gap:3px;flex-wrap:nowrap} /* width:auto é OBRIGATÓRIO: o DS define .pui-nav-item{width:100%} (certo pra sidebar vertical). No trilho horizontal isso fazia cada item medir 100% da faixa (1386px!) — a navegação inteira virava ~28.000px e o celular não conseguia trocar de tela. flex:0 0 auto sozinho não resolve: flex-basis:auto cai justamente no width. */ #app .pui-nav-item{flex:0 0 auto;width:auto;flex-direction:column;gap:3px;padding:7px 9px;font-size:var(--ts-1);line-height:1.1;white-space:nowrap;text-align:center;border-radius:9px} #app .pui-nav-item .pui-nav-label{display:block;font-size:var(--ts-1)} #app .pui-nav-item [data-icon],#app .pui-nav-item svg{width:19px;height:19px} #app .vcv-side-back{flex:0 0 auto;width:auto;margin:0 4px 0 0;padding:7px 11px} #app .vcv-side-back .pui-nav-label{display:none} #app .pui-main{padding:16px 14px 80px} /* Legibilidade: sobe o piso das fontes miúdas do conteúdo */ #app .pui-page-head p{font-size:var(--ts-9)} #app .pui-card{padding:16px} /* Topbar do app: UMA LINHA só (era 199px de altura — metade do iPhone gasta antes do conteúdo). O nome do projeto trunca; o seletor de versão perde o min-width:210px fixo (que travava a linha num viewport de 375px); "Salvar versão" fica só com o ícone; o sino (que não tem função nenhuma) sai. */ #app .pui-topbar{flex-wrap:nowrap;gap:8px;align-items:center} #app .pui-topbar>.pui-action-row:first-child{flex:1 1 auto;min-width:0} #app .pui-topbar .proj-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #app .pui-topbar>.pui-action-row:last-child{flex:0 0 auto;gap:6px} #app .pui-topbar #btn-salvar-versao .btn-lbl{display:none} #app .pui-topbar #btn-salvar-versao{padding-left:11px;padding-right:11px} /* Some no celular: o sino não tem função nenhuma e o seletor de versão é controle avançado (o app abre no "Rascunho atual"). Os dois juntos comiam o espaço do NOME DO PROJETO, que ficava em "Re…" — e saber em que empreendimento se está vale mais no telefone que trocar de snapshot. As versões seguem inteiras no desktop e no Comparar versões. */ #app .pui-topbar #btn-sino, #app .pui-topbar #sel-versao{display:none} /* Botão em cabeçalho de card não quebra no meio da palavra ("Abrir / DNA") */ #app .pui-card-head{flex-wrap:wrap;gap:10px} #app .pui-card-head .pui-button{white-space:nowrap} /* Header do PORTFÓLIO: marca em cima, ações embaixo em largura total */ .pipe-top{flex-wrap:wrap;gap:10px;padding:12px 14px} .pipe-top .pui-action-row{width:100%;flex-wrap:wrap;gap:8px} .pipe-top .pui-search{min-width:0 !important;flex:1 1 100%} .pipe-top .pui-button{flex:1 1 auto;justify-content:center} .pipe-top .pui-usermenu{flex:0 0 auto} .pipe-wrap{padding-left:14px;padding-right:14px} /* Modais viram "folha" que sobe de baixo (bottom sheet) — cabe na tela do celular */ .vcv-overlay{align-items:flex-end;padding:0} .vcv-overlay-box{max-width:100% !important;width:100%;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:20px 16px} /* Tabelas largas rolam dentro da própria caixa, sem estourar a página. O min-width só vale pra quem TEM caixa rolante (.vcv-scroll/.pui-table-wrap): aplicado a toda tabela, ele esticava também as soltas — a .res-tbl do card "Retorno do investimento" ia a 520px, empurrava o card pra 554 e criava scroll horizontal na página inteira. Tabela solta = fluida. */ #app .pui-main table{min-width:0;width:100%} #app .pui-main .vcv-scroll table, #app .pui-main .pui-table-wrap table{min-width:520px;width:auto} .vcv-scroll,.pui-view [style*="overflow"]{max-width:100%} } /* ── origem: ade-app.css:3111-3139 @ f1a53dd6 — tema escuro (só troca token) ── */ html[data-tema="escuro"]{ --pui-bg:#141417; --pui-surface:#1c1c20; --pui-surface-strong:#232329; --pui-surface-muted:#2a2a31; --pui-text:#f1f1f4; --pui-text-soft:#a9acb4; --pui-text-muted:#7d8088; --pui-border:#2f2f36; --pui-border-strong:#3d3d46; /* o "preto de ação" inverte: no escuro quem se destaca do fundo é o claro */ --pui-primary:#f1f1f4; --pui-primary-strong:#ffffff; --pui-primary-soft:#2a2a31; --pui-success:#3ecf8e; --pui-success-soft:#12291f; --pui-danger:#f2717d; --pui-danger-soft:#33191d; --pui-warning:#e0a63a; --pui-warning-soft:#332a12; --pui-info:#8098ee; --pui-info-soft:#1c2340; /* campo MAIS FUNDO que o cartão — no escuro é o que faz a caixa existir */ --ae-field:#101013; /* CTA: no claro é o preto da marca; no escuro, preto sobre preto some, então quem manda é o amarelo. É a mesma marca, lida do outro lado. */ --ae-ink:#fbd545; --ae-accent-soft:#3b3211; --ae-on-soft:#f3dc93; --ae-on-primary:#141417; /* o anel de foco vira o amarelo de marca: no escuro ele é o que mais se destaca do fundo (12,87 medido), pela mesma razão que --ae-ink inverte aqui */ --ae-foco:var(--ae-accent); --ae-corte:var(--ae-accent); /* o corte acompanha o amarelo virado, como o foco */ color-scheme:dark; /* barra de rolagem, seletor de data e afins acompanham */ } /* o texto do CTA acompanha o fundo virado (a regra clara crava color:#fff !important) */ html[data-tema="escuro"] .pui-button-primary{color:var(--ae-accent-ink)!important;box-shadow:0 6px 16px rgba(0,0,0,.4)} html[data-tema="escuro"] .pui-button-primary:hover{background:var(--ae-accent-strong)!important;border-color:var(--ae-accent-strong)!important} /* sombra clara não existe no escuro: o que separa camadas é a borda */ html[data-tema="escuro"] .pui-card{box-shadow:none} /* ── origem: ade-app.css:3232-3261 @ f1a53dd6 — os brancos que o design system crava, repostos por token (sem isto a tabela fica branca no escuro) ── */ /* ---- design system: os brancos que ele crava ---- O propulsor-ui.css é COMPARTILHADO (white-label) e não se edita daqui. Ele tem 16 `background:#fff` cravados, e no escuro cada um vira uma ilha branca. O de .pui-table-wrap era o pior: pintava a tabela de branco com o texto claro por cima — TIR, VPL e payback ficavam invisíveis (razão de contraste 1,13, medida). Estas linhas repõem o mesmo branco no tema claro (--pui-surface = #fff) e acompanham no escuro. Se o design system ganhar um branco novo, ele reaparece aqui. */ .pui-table-wrap,.pui-modal-panel,.pui-drawer-panel,.pui-pipe article,.pui-pipe header span, .pui-upload-list div,.pui-vertical-timeline .pui-icon,.pui-icon-button, .pui-segmented button.is-active,.pui-tabs button.is-active,.pui-donut::before{background:var(--pui-surface)} .pui-control select,.pui-field select,.pui-field input,.pui-select-button, .pui-search input,.pui-field textarea{background:var(--ae-field)} .pui-switch span::before, .pui-temp-control input[type="range"]::-webkit-slider-thumb{background:var(--pui-surface-strong)} .pui-temp-control input[type="range"]::-moz-range-thumb{background:var(--pui-surface-strong)} /* o texto pequeno de apoio não passava em contraste no escuro (3,61 a 4,30 medidos, o mínimo é 4,5). Clareado só no escuro — no claro ele já passa e mudar mexeria na marca. */ html[data-tema="escuro"]{--pui-text-muted:#9ea1a9} /* componentes do design system que cravam tinta branca sobre o preto de ação */ .pui-ai-note__score,.pui-client-avatar, .pui-app.is-sidebar-collapsed .pui-sidebar-toggle{color:var(--ae-on-primary)} /* ---- design system: os brancos TRANSLÚCIDOS ---- Além dos 16 `#fff`, o propulsor-ui.css tem 11 `rgba(255,255,255,.9x)` — véus. No claro ninguém percebe (véu branco sobre fundo claro); no escuro cada um vira um retângulo leitoso. O menu de seleção era o pior: painel branco com o item escolhido em amarelo claro por cima (contraste 1,05, medido). Popup opaco lê melhor que véu, nos dois temas. */ .pui-select-menu,.pui-flyout,.pui-nav-submenu,.pui-app.is-sidebar-collapsed .pui-nav-submenu, .pui-bulk-bar,.pui-preview-toolbar,.pui-drawer-section,.pui-drawer-actions,.pui-kit{background:var(--pui-surface)} /* item escolhido do menu: no escuro o amarelo suave é fundo, não tinta */ html[data-tema="escuro"] .pui-select-menu button.is-selected{background:var(--ae-accent-soft)} /* ── origem: ade-app.css:3277-3295 @ f1a53dd6 — higiene mobile (375px) ── */ Correção da minha própria hipótese de 30/07 ("a página pana") — registrada aqui porque a spec da vitrine repetiu a hipótese errada; o conserto (.vit-scroll) vale igual. Três mecanismos, iterados AO VIVO no browser antes de virar arquivo: · grade que não encolhe: `1fr` não desce abaixo do min-content do conteúdo — vira minmax(0,1fr), e o card ganha rolagem própria para o que ainda assim não couber; · flex sem min-width:0 (cards de despesas): rolagem própria no .dpc; · tabela crua em painel: vira bloco rolável — a MESMA lição do fluxo-tabela e da .vit-scroll da vitrine, agora como rede de segurança para todas. Tablet (768) conferido limpo sem regra nenhuma — por isso o corte é 620. */ @media(max-width:620px){ .pui-kit-grid{grid-template-columns:minmax(0,1fr)!important} .pui-kit-grid>*{min-width:0} .pui-card{min-width:0;overflow-x:auto} .dpc{min-width:0;overflow-x:auto} [data-view-panel] table{display:block;overflow-x:auto;max-width:100%} /* o X do modal ficava 3px fora da tela: a caixa (max-width:440 inline) estourava os 375 */ .vcv-overlay-box{max-width:calc(100vw - 20px)!important} }