/* ============================================================ DOMA VIABILIDADE — folha única do produto ------------------------------------------------------------ Entrega C / R1 — a casca: home com grade de cartões, rota por hash, tarja C@59px nas duas telas, família de botões `Sereno` em bloco único e a paleta da marca. REGRA DE COR DESTA FOLHA: nada de hex solto fora do `:root`. Se você precisou de uma cor nova, ou ela é derivada de um token (e vira token, com a medição que a justifica ao lado) ou o que você quer não é cor — é estrutura. Foi assim que a decisão P4 nasceu: aviso e superfície selecionada se separam por BARRA e ÍCONE, não por calibração de matiz. HIERARQUIA DE COR, em três alturas e por ESTRUTURA: MARCA ≠ AÇÃO ≠ ALERTA #FF6700 #FF8A33 âmbar/vermelho A marca vive na logo, no fio do topo e nos acentos de identidade. A ação vive no botão primário. O alerta vive em âmbar e vermelho, sempre com barra e ícone. Nenhum dos três empresta o hex do outro. ============================================================ */ /* ============================================================ 0 · TIPOGRAFIA — INTER, SERVIDA DO PROJETO ------------------------------------------------------------ Os arquivos vivem em `static/assets/fonts/` e são servidos pelo próprio StaticFiles. Nada aqui vai à rede: dependência externa é proibida nesta casa, e a licença + procedência estão no `OFL.txt` ao lado dos arquivos. O NOME DA FAMÍLIA É "Inter Local", E ISSO É PROVA, NÃO CAPRICHO. A Inter está TAMBÉM instalada nesta máquina — foi ela que pintou os mockups durante a decisão tipográfica. Se o `@font-face` se chamasse "Inter", a tela ficaria idêntica nos dois casos: com a webfont funcionando E com o `@font-face` quebrado, porque a pilha acharia a fonte do SISTEMA pelo nome. Seriam indistinguíveis a olho, e "está na Inter" deixaria de ser evidência de coisa nenhuma. Com um nome que o sistema NÃO tem, a implicação vira de mão única: se a tela pinta em Inter, ela só pode ter vindo DESTES arquivos. É o mesmo princípio dos espelhos declarados — a prova mora na estrutura, não na inspeção. SÃO `.otf` e é deliberado: `.woff2` seria ~6× menor, mas a conversão exige `fontTools`, que não está instalado — e instalar seria dependência nova. `@font-face` aceita OpenType, e a aplicação é servida localmente. CINCO PESOS, E SÓ CINCO — 400/500/600/700/800. É exatamente o que esta folha usa. Peso fora da lista cai em NEGRITO SINTÉTICO do navegador, que é pior que o peso certo e não acusa nada. SEM ITÁLICO: não há arquivo itálico e nenhum é esperado. Os três lugares com `font-style: italic` (rótulos de ausência, tipo "endereço não informado") saem em oblíquo SINTÉTICO de propósito — é texto de placeholder, e a inclinação é o sinal, não o desenho. A PILHA DE FALLBACK CONTINUA OBRIGATÓRIA: se um arquivo faltar, a tela tem de ficar CORRETA, só não na Inter. O QUE NÃO PODE DEPENDER DE A FONTE CARREGAR: os algarismos tabulares. O fallback do `--display` no iPad é o SF Pro, cujos algarismos são PROPORCIONAIS — a coluna de números desalinha sozinha, sem erro nenhum aparecer na tela. Por isso o `font-variant-numeric: tabular-nums` está declarado em toda superfície numérica (ver o bloco "NÚMEROS TABULARES") e não pendurado na webfont. ============================================================ */ @font-face { font-family: "Inter Local"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/Inter-Regular.otf") format("opentype"); } @font-face { font-family: "Inter Local"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/Inter-Medium.otf") format("opentype"); } @font-face { font-family: "Inter Local"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/Inter-SemiBold.otf") format("opentype"); } @font-face { font-family: "Inter Local"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Inter-Bold.otf") format("opentype"); } @font-face { font-family: "Inter Local"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/Inter-ExtraBold.otf") format("opentype"); } /* ------------------------------------------------------------ A MONO DOS NÚMEROS É A IBM PLEX MONO — DESIGN-0 (11/09/2026). A DM Mono foi a escolha de 05/08 a 11/09; o sistema de design aprovado pelo dono nesta data trouxe a Plex de volta (D-189 é a errata: ela registra a reversão, não decide sozinha). Os dois arquivos vieram do histórico (`git checkout 246e7ee^ -- static/assets/fonts/IBMPlexMono-{Regular,Medium}.ttf`), o mesmo commit que os apagou em 21/08 — não são arquivo novo. FAMÍLIA "Plex Local", DOIS PESOS — 400 e 500, os únicos que a folha usa. Licença OFL em `assets/fonts/OFL-IBMPlexMono.txt`. Os `DMMono-*.ttf` FICAM NO DISCO nesta fatia (classe A pura não apaga arquivo — é decisão da Mesa), órfãos de `@font-face`. ------------------------------------------------------------ */ @font-face { font-family: "Plex Local"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/IBMPlexMono-Regular.ttf") format("truetype"); } @font-face { font-family: "Plex Local"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/IBMPlexMono-Medium.ttf") format("truetype"); } :root { /* ============================================================ DESIGN-0 (11/09/2026) — OS TOKENS CANÔNICOS. Casa única dos nomes novos; os nomes antigos, logo abaixo, viram ALIAS deles — "alias até a última tela migrar (DESIGN-0)". Contraste WCAG medido pelo Orchestrator no despacho desta fatia (luminância relativa, piso AA 4,5:1 para texto): text/bg 14,0 · muted/surface 6,0 · primary/primary-soft 8,3 · branco/primary 9,6 · compare/branco 7,2 · danger/branco 5,2 — passam. FALHAM: branco sobre accent 2,45 e warning como TEXTO sobre branco 3,64. REGRA DE USO: o botão accent leva texto `--color-text` (6,08), nunca branco; `--color-warning` é cor de borda/ícone/fundo-soft — o TEXTO de aviso continua no tom escuro que a folha já tem (`--ambar` #7E6408, 4,5+), e por isso `--ambar` (o tom-texto) NÃO vira alias de `--color-warning` — só a borda e o fundo-soft dele viram. */ --color-primary: #0A4F36; --color-primary-soft: #E4F1EB; --color-compare: #1857A4; /* única cor de "segundo lado" */ /* DESIGN-5: fundo-soft do lado B na tabela do Comparar -- mesmo hex que `--info-claro` já usava (ver o bloco do azul "B" mais abaixo), só declarado aqui perto do par para quem procura ao lado de `--color- -primary-soft`. Não é um terceiro token na prática: `--info-claro` segue sendo a definição, e este é alias dela. */ --color-compare-soft: #EAF1FA; --color-danger: #C53B32; --color-warning: #B7791F; /* borda/ícone/fundo-soft — nunca texto */ --color-accent: #F28C28; /* SÓ a marca e o "+ Novo estudo" (DESIGN-0b: "Ver resultado" saiu do laranja) */ --color-bg: #F7F8F6; --color-surface: #FFFFFF; --color-border: #D7DED8; --color-text: #1D2A22; --color-text-muted: #5A665E; /* ---- DESIGN-0b (11/09/2026, errata à DESIGN-0) ---- Hex medidos pela Mesa em 11/09 nos PNGs de referência (Pillow, contagem de pixels). `--color-primary-strong` é o verde dos botões de EXECUÇÃO ("Rodar sensibilidade", "Congelar versão…"); `--color-bar` é o fundo da faixa viva de totais; `--color-footer` é o rodapé de efeito sob ela; `--color-on-white-cta` é a letra do CTA branco (#btn-calcular) sobre fundo branco — contraste medido: branco sobre --color-primary-strong e sobre --color-bar passam (ambos mais escuros que --color-primary), e --color-on-white-cta sobre branco passa (mesma família tonal de --color-primary, mais escura). */ --color-primary-strong: #004830; --color-bar: #00402D; --color-footer: #F5F7F6; --color-on-white-cta: #01422E; /* -soft são tons de fundo DERIVADOS — reaproveitam o mesmo hex que `--vermelho-claro`/`--ambar-claro` já usavam, então a troca de nome não move um pixel do que já estava medido. */ --color-danger-soft: #FAEFEC; --color-warning-soft: #FAF2D2; /* espaçamento e raio — vocabulário novo, sem alias de token velho (esta folha não tinha escala de espaçamento antes da DESIGN-0) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --r-1: 6px; --r-2: 8px; --r-3: 12px; --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .06); /* tipografia — ver §0 acima para a Inter/Plex; `--font-sans` e `--font-mono` são os canônicos, `--display`/`--mono` (abaixo, no bloco de aliases) apontam para eles */ --font-sans: "Inter Local", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Plex Local", ui-monospace, "Cascadia Mono", Consolas, monospace; /* ---------- superfícies e tinta (ALIAS até a última tela migrar — DESIGN-0) ---------- */ --fundo: var(--color-bg); --superficie: var(--color-surface); --superficie-2: #f6f8f7; --tinta: var(--color-text); --tinta-2: var(--color-text-muted); --tinta-3: #93a09a; --linha: var(--color-border); /* ---------- verde do sistema (foco, sucesso, séries) ---------- */ --verde: #0e6b49; --verde-escuro: var(--color-primary); /* alias até a última tela migrar (DESIGN-0) */ --verde-claro: var(--color-primary-soft); /* alias até a última tela migrar (DESIGN-0) */ --verde-borda: #c7ddd2; --verde-vivo: #6fd3a7; /* sobre superfície escura */ /* ---------- A PALETA DA MARCA ---------- Desde a DESIGN-0, a marca e a ação principal ("Ver resultado") partilham UMA cor — `--color-accent` #F28C28 —, e é por isso que `--doma-laranja` deixou de ser o hex próprio e virou alias. O botão primário continua com as 6 variáveis próprias do `.btn-primario` (§1); este token é o que a logo/fio/acentos de identidade consomem. */ --doma-laranja: var(--color-accent); /* alias até a última tela migrar (DESIGN-0) */ --doma-laranja-medio: #FFAC66; --doma-pessego: #FFE3CC; --doma-preto: #000000; --doma-branco: #FFFFFF; /* derivados da marca, cada um com a medição que o obriga: #FF6700 mede 2,92:1 contra branco e o mínimo WCAG para elemento NÃO-textual (anel de foco, borda de estado) é 3,0. `--laranja-escuro` mede 4,14:1 e é usado SÓ onde a norma cobra contraste. Em superfície, o laranja é o da marca, puro. */ --laranja-escuro: #D94F00; --pessego-borda: #FFCFA8; --pessego-fundo: #FFF4EA; /* A COR DA AÇÃO não é token do `:root`: ela mora nas 6 variáveis do bloco `.btn-primario`, que é o único jeito legítimo de criar variante nesta família. Ver lá a mistura que a gera e a medição que a governa. */ /* ---------- ALERTA — o âmbar novo, que é TEXTO e não só borda ---------- O âmbar antigo (#b67a0f) FALHAVA como texto: 3,63:1 sobre branco e 3,38:1 sobre o próprio fundo, contra o piso AA de 4,50. O novo mede 5,66:1 sobre branco e 5,03:1 sobre o próprio fundo — passa nos dois, que é o teste que importa, porque o âmbar é a cor do rótulo "Atenção". Separação da marca: ΔE2000 = 32,39 contra o #FF6700 (o âmbar antigo media 19,35). MARCA ≠ ALERTA por distância medida, e não por vigilância. */ --ambar: #7E6408; /* NÃO é alias — texto de aviso; ver nota da DESIGN-0 acima */ --ambar-claro: var(--color-warning-soft); /* alias até a última tela migrar (DESIGN-0) */ --ambar-borda: var(--color-warning); /* alias até a última tela migrar (DESIGN-0) */ --ambar-vivo: #e9b254; /* sobre superfície escura */ --vermelho: var(--color-danger); /* alias até a última tela migrar (DESIGN-0) */ --vermelho-claro: var(--color-danger-soft); /* alias até a última tela migrar (DESIGN-0) */ --vermelho-borda: #e0b4ab; --vermelho-vivo: #f0917f; /* sobre superfície escura */ /* ---------- AZUL "B" (COMP-2, D-370) -- a ÚNICA cor de "segundo lado" ---------- A comparação de estudos (aba Comparar) precisa de uma segunda cor viva que NÃO seja o verde do lado A (sucesso/foco) nem o âmbar/vermelho, que já são severidade. É a primeira cor nova do sistema desde o âmbar de 23/08 -- e como aquela, ela carrega a MEDIÇÃO que a autoriza como texto: #1857A4 sobre branco mede 7,15:1 pela fórmula de luminância relativa do WCAG 2.1 (contraste = (L1+0,05)/(L2+0,05)), bem acima do piso AA de 4,5:1. Nenhuma outra superfície do sistema usa este azul: ele é EXCLUSIVO do lado B da comparação -- reusar aqui é criar uma segunda leitura para a mesma cor, a família de defeito que esta casa já paga no laranja-marca × âmbar-alerta. */ --info: var(--color-compare); /* alias até a última tela migrar (DESIGN-0) */ --info-escuro: #123F78; --info-claro: #EAF1FA; --info-borda: #B9D0EA; --info-vivo: #8FB8E6; /* sobre superfície escura */ /* ---------- superfícies escuras (tarja, faixa viva) ---------- `--escuro-1`/`--escuro-2`/`--escuro-tinta-2` MORRERAM aqui em 12/09/2026 (DESIGN-4/PDF): eram só do gradiente do card preto do veredicto, que virou card claro — ver a lápide em `.veredicto-wrap`, `static/styles.css`. Conferido por grep antes de apagar: nenhuma outra regra os usava. `--escuro-3`/`--escuro-4`/`--escuro-linha`/`--escuro-tinta` CONTINUAM — `.btn-escuro` e `.dica::after` ainda os consomem. */ --escuro-3: #1d2c26; --escuro-4: #2a3d35; --escuro-linha: #2c3b35; --escuro-tinta: #dfe7e3; --escuro-tinta-3: #7d8e87; --sombra: var(--shadow-card); /* alias até a última tela migrar (DESIGN-0) */ /* RÉGUA DO SUBTÓPICO — o fio de 3px que liga um bloco de premissa ao cartão que o contém (`.bloco-aquisicao`). É a única peça cromática da hierarquia dos cartões aprovada em 03/08: o CARTÃO não tem barra nenhuma, e o subtópico tem esta. MEDIDA que a justifica: 1,76:1 contra o branco, contra 1,31:1 do `--linha` que desenha o resto da mesma borda. A régua tem de ser mais presente que a borda para ler como LIGAÇÃO e não como moldura, e é essa distância que faz o trabalho — não o matiz. Não precisa dos 3,0:1 da WCAG 1.4.11: ela não identifica componente nem estado, é o mesmo posto decorativo do `--linha`. */ --regra-sub: #a7cbbb; /* rampa da composição do preço (medidor de vendas) — derivada do verde */ --comp-sinal: #0a4f36; --comp-mensais: #0e6b49; --comp-baloes: #2f8a63; --comp-chaves: #5aa383; --comp-repasse-fin: #8bbda6; --comp-pro-soluto: #7E6408; /* Juros do pró-soluto: MESMO matiz do pró-soluto, mais claro. A relação de família é a mensagem — é o rendimento daquele saldo, não uma parcela nova do preço —, e a rampa verde não tem ouro nenhum para confundir com ela. */ --comp-receita-fin: #C2A02B; --comp-residuo: #c6d3cd; /* `--mono` e `--display` são ALIAS de `--font-mono`/`--font-sans` (DESIGN-0, declarados no topo do :root) — nome próprio de propósito, para que "a tela está na Inter" só possa significar "os arquivos carregaram". O `check_fonte` resolve UM nível de `var()` antes de julgar a pilha. */ --mono: var(--font-mono); /* alias até a última tela migrar (DESIGN-0) */ --display: var(--font-sans); /* alias até a última tela migrar (DESIGN-0) */ --raio: var(--r-3); /* alias até a última tela migrar (DESIGN-0) — 12px, igual de sempre */ /* altura da tarja: 56 do miolo + 1 da borda inferior = 57 (DESIGN-7 item 2: o fio de 3px do laranja morreu; quem separa agora é a borda `--linha`). */ --h-tarja: 57px; /* ---------- TELA DE LOGIN (LOGIN-1, 25/09/2026) — direção 2 aprovada pela Mesa e pelo dono. Nomes vindos do `tokens.json` do design-codex; `--laranja-acao` é o ÚNICO dos quatro que já existia nesta folha — reaproveita `--color-accent` (#F28C28) em vez de duplicar o hex, e o PARECER de LOGIN-1 registra a divergência de nome (o design-codex chama de `--laranja-acao`, esta casa já tinha `--color-accent`). Os outros três (`--verde-profundo`/`--verde-base`/`--verde-luz`) são o fundo escuro do cartão de acesso e não existiam antes. */ --verde-profundo: #0D251B; --verde-base: #115A3F; --verde-luz: #217553; --laranja-acao: var(--color-accent); } * { box-sizing: border-box; } /* scroll-padding-bottom (P-7, DIURNA-1 item 4d, 13/09/2026): sem ele o foco nativo (`block: nearest`) num input abaixo da dobra cai sob a faixa viva fixa, em qualquer largura -- a variável é a mesma que `medirFaixaViva` (app.js) grava no ``, e no Resultado (faixa ausente) ela vale 0. */ html { scroll-behavior: smooth; scroll-padding-top: 120px; scroll-padding-bottom: calc(var(--faixa-altura, 0px) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { margin: 0; } body { font: 14px/1.55 var(--display); background: var(--fundo); color: var(--tinta); -webkit-text-size-adjust: 100%; } a { color: inherit; } /* ------------------------------------------------------------ GUARDA DO `hidden` — e ela não é zelo, é conserto. `[hidden]{display:none}` mora na folha do NAVEGADOR, que perde para QUALQUER regra de autor. Vários elementos desta folha declaram `display:flex` ou `display:grid`; sem esta linha, eles apareceriam MESMO com o atributo `hidden` posto. Já mordeu o `mockups/estudo.html` uma vez. ------------------------------------------------------------ */ [hidden] { display: none !important; } /* ------------------------------------------------------------ TROCA DE TELA — por atributo no , nunca por `hidden`. Deliberado: `entradasInvalidas()` usa `el.closest("[hidden]")` para pular campo que não está na tela. Se a tela do estudo inteira fosse escondida com `hidden`, TODOS os campos dela passariam a ser "campo fora da tela" e a varredura de entradas ilegíveis ficaria muda — sem erro nenhum aparecer. ------------------------------------------------------------ */ [data-quando] { display: none; } body[data-tela="home"] [data-quando~="home"], body[data-tela="estudo"] [data-quando~="estudo"], body[data-tela="macro"] [data-quando~="macro"], body[data-tela="glossario"] [data-quando~="glossario"] { display: block; } /* MACRO-1 (14/09/2026): a tarja de `estudo` é COMPARTILHADA com `macro`, e o atributo `data-quando` dela CONTINUA sendo só `"estudo"` (o `check_troca.mjs` lê a tarja por casamento EXATO do valor, `[data-quando="estudo"]`, e um valor de dois tokens deixaria de casar). A visibilidade extra na tela `macro` é regra PRÓPRIA, presa à classe `.topo-fixo` — nunca ao atributo genérico —, então ela não arrasta o `
` (o conteúdo do estudo) junto. Dentro da tarja, `.tj-estudo`/`.tj-acoes` só fazem sentido dentro de um estudo aberto, e `.tj-macro-titulo` só faz sentido na tela do cenário macro — `display: flex` e não `block`: `.tj-estudo`/`.tj-acoes` já são flex no normal, e o `block` do mecanismo genérico desmancharia o alinhamento. */ body[data-tela="macro"] .topo-fixo[data-quando="estudo"] { display: block; } .tj-macro-titulo { display: none; flex: 1 1 auto; min-width: 0; align-items: center; } .tj-macro-titulo b { font: 700 15.5px/1.25 var(--display); letter-spacing: -0.01em; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-tela="macro"] .tj-estudo, body[data-tela="macro"] .tj-acoes { display: none; } body[data-tela="macro"] .tj-macro-titulo { display: flex; } /* AJUDA-1 (14/09/2026): a mesma tarja compartilhada, agora com uma terceira tela (glossário). Réplica exata da regra do cenário macro acima, mesma razão: `data-quando="estudo"` da tarja não muda de valor. */ body[data-tela="glossario"] .topo-fixo[data-quando="estudo"] { display: block; } .tj-glossario-titulo { display: none; flex: 1 1 auto; min-width: 0; align-items: center; } .tj-glossario-titulo b { font: 700 15.5px/1.25 var(--display); letter-spacing: -0.01em; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-tela="glossario"] .tj-estudo, body[data-tela="glossario"] .tj-acoes { display: none; } body[data-tela="glossario"] .tj-glossario-titulo { display: flex; } /* GLOSSÁRIO — a lista de verbetes, uma definição por `
/
`. */ .glossario-lista { margin: 0; } .glossario-lista dt { font: 700 15px var(--display); color: var(--tinta); margin: 22px 0 4px; padding-top: 14px; border-top: 1px dashed var(--linha); scroll-margin-top: 76px; } .glossario-lista dt:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .glossario-lista dd { margin: 0 0 4px; font-size: 13.5px; line-height: 1.55; color: var(--tinta-2); } .glossario-lista dd.glossario-no-doma { font-size: 12.5px; color: var(--tinta-3); } .glossario-lista dd.glossario-no-doma b { color: var(--tinta-2); font-weight: 600; } /* ============================================================ 1 · BOTÕES — COMPONENTE EM BLOCO ÚNICO ------------------------------------------------------------ Este é o único lugar do sistema onde regra de botão mora. Se um `transform` ou um `box-shadow` de botão aparecer fora deste bloco, o componente virou cópia — que é a família de defeito que esta casa mais registrou (TETOS_FINANCIAMENTO, CATEGORIAS_PRECO). COMO ESTENDER — DOIS EIXOS, E SÓ DOIS 1) EIXO PAPEL (`--btn-*`, declarado NO PRÓPRIO `.btn`): as 6 variáveis que separam primário de secundário, de destrutivo, de escuro. Variante nova troca essas 6 e nada mais. 2) EIXO ACABAMENTO (`--acab-*`, HERDADO de um contêiner): raio, respiro, peso, borda, brilho, opacidade das sombras. Muda o quanto o botão pesa na página sem mexer em quem ele é. O ACABAMENTO VIGENTE É O `Sereno`, e ele está escrito como DEFAULT nos pontos de uso — não como classe. Acabamento aprovado que continua vivendo como classe é convite a duas verdades. Sereno = elegância por subtração: sombra larga e baixa em vez de curta e densa, brilho interno quase apagado, canto de 12px falando a mesma língua do cartão (`--raio`). FÍSICA — É CONTRATO E NÃO MUDA: - repouso → o botão "existe": borda inferior sólida (`--btn-altura`) mais uma sombra difusa por baixo; - hover → sobe um degrau (-1px, altura maior); - :active → AFUNDA 2px, altura 0 e sombra INTERNA. TEMPO: 60 ms para descer, 100 ms para voltar. Assimetria deliberada — a descida é o feedback do toque e precisa parecer instantânea (abaixo de ~80 ms o olho lê como imediato). TOQUE: `:active` no iOS só dispara com `touch-action: manipulation` — sem isso o botão não afunda no iPad, que é onde o dono usa. O hover fica trancado em ponteiro fino para não grudar depois do toque. DESABILITADO NÃO AFUNDA E NÃO TEM ELEVAÇÃO. Se afundasse, mentiria dizendo que o clique pegou; se tivesse elevação, mentiria dizendo que é clicável. ============================================================ */ .btn { /* --- EIXO PAPEL: as 6 variáveis que uma variante pode trocar --- */ --btn-a: #ffffff; /* topo do gradiente */ --btn-b: #eef2f0; /* base do gradiente */ --btn-borda: #d3dbd7; --btn-tinta: var(--tinta); --btn-sombra: 19, 29, 25; /* RGB cru da sombra, para compor alfas */ --btn-altura: 2px; /* espessura do botão em repouso */ position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* tipo em longhand, não no atalho `font`: o atalho reseta o que não for citado, e aqui cada eixo precisa poder ser trocado sozinho */ font-family: var(--display); font-size: var(--btn-tam, var(--acab-tam, 13px)); font-weight: var(--acab-peso, 600); line-height: 1; letter-spacing: var(--acab-track, 0.015em); padding: var(--btn-pad-v, var(--acab-pad-v, 12px)) var(--btn-pad-h, var(--acab-pad-h, 20px)); border-radius: var(--btn-raio, var(--acab-raio, 12px)); border: var(--acab-borda-w, 1px) solid var(--btn-borda); background-color: var(--btn-b); /* o gradiente é knob: um acabamento chapado manda `--acab-fundo: none` e o que sobra é a cor sólida da base, sem tocar em quem é o botão */ background-image: var(--acab-fundo, linear-gradient(180deg, var(--btn-a), var(--btn-b))); color: var(--btn-tinta); cursor: pointer; text-decoration: none; white-space: nowrap; -webkit-user-select: none; user-select: none; touch-action: manipulation; /* :active responde ao toque */ -webkit-tap-highlight-color: transparent; /* sem flash cinza no iOS */ transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, var(--acab-brilho, 0.26)), 0 var(--btn-altura) 0 rgba(var(--btn-sombra), var(--acab-solida, 0.09)), 0 var(--acab-difusa-y, 6px) var(--acab-difusa-r, 18px) rgba(var(--btn-sombra), var(--acab-difusa-a, 0.07)); transition: transform 100ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 100ms cubic-bezier(0.2, 0.7, 0.3, 1), background-color 100ms ease, border-color 100ms ease, color 100ms ease; } /* HOVER — sobe um degrau. Trancado em ponteiro fino para não grudar no toque. Os deltas são ADITIVOS de propósito: num acabamento mais sutil o degrau de hover encolhe junto em vez de pular de volta para a escala antiga. */ @media (hover: hover) and (pointer: fine) { .btn:hover:not(:disabled):not([aria-disabled="true"]) { --btn-altura: 4px; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(var(--acab-brilho, 0.26) + 0.05)), 0 var(--btn-altura) 0 rgba(var(--btn-sombra), calc(var(--acab-solida, 0.09) + 0.01)), 0 calc(var(--acab-difusa-y, 6px) + 5px) calc(var(--acab-difusa-r, 18px) + 9px) rgba(var(--btn-sombra), calc(var(--acab-difusa-a, 0.07) * 1.6)); } /* secundário: a marca EMOLDURA, não disputa — só a borda acende */ .btn:not(.btn-primario):not(.btn-perigo):not(.btn-escuro):not(.btn-execucao):not(.btn-cta-branco):hover:not(:disabled) { --btn-borda: var(--doma-laranja-medio); } } /* CLIQUE — afunda. */ .btn:active:not(:disabled):not([aria-disabled="true"]) { --btn-altura: 0px; transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(var(--btn-sombra), var(--acab-afundo, 0.17)), 0 0 0 rgba(var(--btn-sombra), 0); transition-duration: 60ms; /* desce rápido, sobe calmo */ filter: brightness(0.97); } /* foco: anel do sistema (`--color-primary`) para todo botão comum -- o laranja fica reservado à marca e ao "+ Novo estudo" (DESIGN-7 item 6, D-384: "o laranja fica só na marca e nos dois '+ Novo estudo'"). */ .btn:focus-visible:not(.btn-primario), .kebab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(10, 79, 54, 0.20); } /* marca e "+ Novo estudo": o único par que segue com o anel no laranja escuro (4,14:1, o que a norma cobra para elemento não-textual) + halo do laranja da marca, que é decoração. */ .btn-primario:focus-visible, .tj-logo:focus-visible { outline: 2px solid var(--laranja-escuro); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 103, 0, 0.30); } /* ---------- PRIMÁRIO — A AÇÃO. E este bloco é o DONO dela ---------- Não há token de "cor da ação" no `:root`: o dono é este bloco, com as 6 variáveis de papel. `#FF8A33` aparece UMA vez em toda a folha, e é aqui. DE ONDE VEM O TOM. Mistura 50/50 do laranja da MARCA (#FF6700) com o laranja médio da logo (#FFAC66), média aritmética por canal: R (255+255)/2 = 255 -> FF G (103+172)/2 = 137,5 -> 8A B (0+102)/2 = 51 -> 33 A marca continua sendo #FF6700 onde ela É a marca — logo, fio do topo, favicon, acento de identidade. O botão usa um tom DERIVADO. Com isso a casa passa a ter MARCA ≠ AÇÃO ≠ ALERTA em três tons distintos, por estrutura. DE ONDE VEM A BASE DO GRADIENTE, e ela NÃO foi escolhida a olho: é o MESMO escurecimento proporcional que levava #FF6700 a #E85800, aplicado ao tom novo — R × (232/255) e G × (88/103), com o azul seguindo a razão do verde (o azul do original era 0 e não dá razão nenhuma): R 255 × 0,90980 = 232,0 -> E8 G 138 × 0,85437 = 117,9 -> 76 B 51 × 0,85437 = 43,6 -> 2C => #E8762C O gradiente fica: é ele que dá o VOLUME da família, e volume é contrato aprovado — a física e o acabamento Sereno foram martelados COM ele. MEDIÇÃO, texto PRETO (o P3 não foi revogado; mudou só qual laranja): preto sobre #FF8A33 (topo) .............. 8,94:1 preto sobre #E8762C (base) .............. 7,06:1 <== É ESTE QUE GOVERNA [hoje] preto sobre #E85800 (base) ....... 5,83:1 <- o que governava branco sobre #E8762C .................... 2,97:1 REPROVA D-125: com texto ESCURO sobre gradiente claro, quem governa é a ponta mais ESCURA. O 8,94 é a ponta BOA — publicar a ponta boa foi exatamente o defeito que gerou o D-125. O número desta variante é 7,06, e ele MELHORA o que governava hoje (5,83 -> 7,06): mais claro e mais legível ao mesmo tempo. BORDA E SOMBRA reharmonizadas pela MESMA regra, não a olho: a borda é a base pelo passo base->borda de hoje (194/232 e 72/88), o que dá #C26124 — 3,53:1 contra o fundo da página, acima do piso de 3,0 que a norma cobra para elemento não-textual. A sombra é a borda pelo passo borda->sombra de hoje (148/194 e 56/72), o que dá 148, 75, 28. HOVER: os mesmos deltas do hover de hoje, aplicados aos dois stops. Ele CLAREIA, nunca escurece, e por isso o repouso segue sendo o pior caso — no hover a ponta que governa mede 7,75:1. Reversível numa linha se o dono preferir chapado: bastam `--btn-a` e `--btn-b` com o mesmo valor, e aí o número que governa passa a ser 8,94. */ .btn-primario { --btn-a: #FF8A33; --btn-b: #E8762C; --btn-borda: #C26124; --btn-tinta: var(--doma-preto); --btn-sombra: 148, 75, 28; --btn-altura: 3px; /* pesa mais na página: é a ação principal */ font-weight: 700; /* peso forte por legibilidade */ } @media (hover: hover) and (pointer: fine) { .btn-primario:hover:not(:disabled) { --btn-a: #FF9D52; --btn-b: #F27D2C; } } /* ---------- DESTRUTIVO — distinto por COR, física idêntica ---------- */ .btn-perigo { --btn-a: #c04a37; --btn-b: #a63b2a; --btn-borda: #8b3122; --btn-tinta: #ffffff; --btn-sombra: 92, 32, 22; --btn-altura: 3px; } @media (hover: hover) and (pointer: fine) { .btn-perigo:hover:not(:disabled) { --btn-a: #cf5340; --btn-b: #b44230; } } /* ---------- SOBRE FUNDO ESCURO (tarja, faixa viva) ---------- */ .btn-escuro { --btn-a: var(--escuro-4); --btn-b: var(--escuro-3); --btn-borda: #3c4f46; --btn-tinta: var(--escuro-tinta); --btn-sombra: 0, 0, 0; } /* ---------- EXECUÇÃO (DESIGN-0b) — chapado em `--color-primary-strong`, texto branco 700, raio 8, sombra leve. `--btn-a` e `--btn-b` iguais fazem o gradiente da base virar cor sólida sem tocar no mixin. Usada nos botões que RODAM algo: "Rodar sensibilidade" (#btn-sens) e "Congelar versão…" (#btn-versao-congelar). ---------- */ .btn-execucao { --btn-a: var(--color-primary-strong); --btn-b: var(--color-primary-strong); --btn-borda: #00301F; --btn-tinta: var(--doma-branco); --btn-sombra: 0, 32, 21; --btn-raio: 8px; font-weight: 700; } /* ---------- CTA BRANCO SOBRE FUNDO ESCURO (DESIGN-0b) — só o `#btn-calcular` ("Ver resultado →"), que saiu do laranja: fundo branco, letra `--color-on-white-cta`, raio 8. ---------- */ .btn-cta-branco { --btn-a: var(--doma-branco); --btn-b: var(--doma-branco); --btn-borda: var(--doma-branco); --btn-tinta: var(--color-on-white-cta); --btn-sombra: 0, 0, 0; --btn-raio: 8px; font-weight: 700; } /* ---------- DESABILITADO — sem elevação e sem afundar ---------- */ .btn:disabled, .btn[aria-disabled="true"] { --btn-a: #f1f4f2; --btn-b: #e9eeeb; --btn-borda: #dde4e0; --btn-tinta: #a3aeaa; --btn-altura: 0px; cursor: not-allowed; filter: none; transform: none; box-shadow: none; /* opacidade global fica de fora de propósito: apagaria o texto junto, e o rótulo do botão precisa continuar legível para o usuário entender o que está bloqueado. */ } .btn:disabled:active, .btn[aria-disabled="true"]:active { transform: none; /* a mentira que este bloco existe para evitar */ box-shadow: none; filter: none; } /* ---------- TAMANHOS ---------- Cada tamanho é um DESVIO do acabamento vigente, não um valor fixo: por isso `calc` em cima do knob e nunca um número solto. O nome lido pelo `.btn` (`--btn-pad-v`) é diferente do escrito pelo acabamento (`--acab-pad-v`) porque uma variável não pode se referenciar — seria ciclo e o CSS descarta. */ .btn-mini { --btn-pad-v: calc(var(--acab-pad-v, 12px) - 4px); --btn-pad-h: calc(var(--acab-pad-h, 20px) - 6px); --btn-tam: calc(var(--acab-tam, 13px) - 1px); --btn-raio: calc(var(--acab-raio, 12px) - 2px); } .btn-grande { --btn-pad-v: calc(var(--acab-pad-v, 12px) + 3px); --btn-pad-h: calc(var(--acab-pad-h, 20px) + 6px); --btn-tam: calc(var(--acab-tam, 13px) + 1px); --btn-raio: calc(var(--acab-raio, 12px) + 1px); } /* ---------- MOVIMENTO REDUZIDO ---------- O afundar É feedback funcional, não enfeite: 2px não dispara desconforto vestibular. O que sai é a transição — o estado troca sem interpolação. */ @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active:not(:disabled) { transition: none; } } /* ============================================================ 2 · A TARJA — 57px, nas DUAS telas ------------------------------------------------------------ 56px de miolo + 1px de borda inferior = 57 (DESIGN-7 item 2: fundo BRANCO, sem o fio de 3px do laranja -- quem separa agora é a borda `--linha`, do próprio `.tj`). home · wordmark inteiro + título do sistema + busca permanente + ação primária; interna · a marca REDUZIDA ao símbolo "+" (que é o VOLTAR), a troca rápida "Empreendimentos ▾", o nome do empreendimento no lugar de honra, e SEM título do sistema. POR QUE A INTERNA NÃO TEM TÍTULO, e isto evita um erro futuro: não é falta de espaço — é HIERARQUIA. Na interna o nome do empreendimento é o lugar de honra, e ponto. No dia em que alguém alargar a tarja e pensar "agora cabe o título", NÃO CABE VOLTAR, porque nunca foi aperto de largura. A física de clique não mora aqui: todo botão da tarja é `.btn` e herda os 60/100 ms do bloco 1. ============================================================ */ .topo-fixo { position: sticky; top: 0; z-index: 40; } /* DESIGN-7 item 2: fundo BRANCO com borda inferior de 1px -- a tarja deixa de ser a superfície escura da marca. O laranja do `.fio-marca` (3px de gradiente) morreu junto; a marca sai do wordmark preto/verde e dos dois "+ Novo estudo". */ .tj { position: relative; display: block; width: 100%; background: var(--superficie); border-bottom: 1px solid var(--linha); } .tj-in { max-width: 1180px; margin: 0 auto; padding: 0 28px; height: 56px; display: flex; align-items: center; gap: 12px; min-width: 0; } /* a logo, em . `height` fixo e `width:auto`: os arquivos têm proporções DIFERENTES entre si — travar largura distorceria um deles em silêncio. */ .tj-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .tj-logo img { display: block; width: auto; } .tj-logo .word { height: 24px; } .tj-logo .simb { height: 26px; } .tj-logo:focus-visible { border-radius: 4px; } /* O TÍTULO DO SISTEMA — SÓ NA HOME. A logo é a MARCA; o título diz QUAL SISTEMA é, porque haverá outros sistemas sob a mesma marca. É identificação de sistema, não legenda — e por isso `flex-shrink: 0`: este elemento nunca encolhe em silêncio. Aparece inteiro ou o conflito vai para a mesa. O conjunto lê "DOMA+ VIABILIDADE" porque quem escreve o "DOMA+" é a própria wordmark, desenhada ao lado. Repetir "DOMA+" em texto colado numa imagem que já diz "DOMA+" poria a marca duas vezes no mesmo bloco de 200px. */ .tj-titulo { font: 700 10px var(--display); letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; padding-left: 11px; color: var(--tinta-2); border-left: 1px solid var(--linha); } .tj-espaco { margin-left: auto; } .tj-acoes { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .tj-div { width: 1px; height: 26px; flex-shrink: 0; background: var(--linha); } /* identidade do estudo dentro da tarja — o lugar de honra da tela interna. O `align-self: stretch` + `overflow: hidden` NÃO é acabamento: é a trava que faltava em R1. Este é o único bloco da tarja com conteúdo VINDO DO BANCO (nome e endereço do estudo), e a tarja é `height: 56px` com `overflow` visível dentro de um `.topo-fixo` de `z-index: 40`. Qualquer coisa que engorde este bloco não estoura layout nenhum: ela transborda para BAIXO da tarja e passa por cima da barra de abas (z-index 30) como uma placa transparente, comendo o clique sem pintar um pixel. Foi exatamente o que aconteceu (ver o comentário de `.painel > .vazio`, §7). Com `stretch`, este bloco é o tamanho da tarja e NUNCA mais do que isso; o `justify-content: center` continua centrando as duas linhas, então nada muda à vista. Não dá para pôr a trava no `.tj-in`, que precisa deixar o menu do kebab e a dica do Exportar ESCAPAREM da tarja. */ /* DESIGN-0: mais largura (cresce até 520px em vez de shrink-to-fit) e o slot da miniatura, à esquerda. `padding-left` abre o vão sem tocar no ``/ `` internos, que continuam empilhados em coluna. DESIGN-1: o slot deixou de ser `::before` (não aceitava `background-image` nem texto) e virou o elemento real `#tj-mini`, preenchido por `atualizarMiniaturaDoTopo` -- foto quando há, monograma quando não há. */ .tj-estudo { position: relative; min-width: 0; flex: 1 1 auto; max-width: 520px; padding-left: 46px; display: flex; flex-direction: column; justify-content: center; align-self: stretch; overflow: hidden; } /* DESIGN-7 item 2: monograma corrigido para o par que o resto da folha usa com este mesmo fundo (`.passo.ativo`, `.sens-pilula-ganho`, `.carimbo-ok`, `.cmp-tabela` -- todos `--color-primary-soft` + `--color-primary`). Branco sobre este verde claríssimo já era ilegível na tarja escura; sobre a tarja branca da DESIGN-7 ficaria pior. */ .tj-mini { position: absolute; left: 0; top: 50%; margin-top: -18px; width: 36px; height: 36px; border-radius: var(--r-2); background: var(--color-primary-soft) center/cover no-repeat; display: flex; align-items: center; justify-content: center; font: 800 13px var(--display); color: var(--color-primary); letter-spacing: 0.01em; } .tj-estudo b { font: 700 15.5px/1.25 var(--display); letter-spacing: -0.01em; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .tj-estudo span { font: 400 11.5px/1.3 var(--display); color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .tj-estudo span.vazio { color: var(--tinta-3); font-style: italic; } /* ------------------------------------------------------------ TROCA RÁPIDA — o rótulo "Empreendimentos ▾" da tarja interna. Era um link de VOLTAR, e voltar já é o que o símbolo da marca ao lado faz: dois controles para um destino só. Agora ele abre a lista e troca de estudo direto (R2.1). O `margin-left:-8px` que este componente teria para alinhamento óptico é ZERO aqui de propósito: ele vem logo depois do símbolo "+", e o recuo puxaria a caixa de hover para 4px do glifo da marca. Área de respiro de marca não é folga — é a marca. NADA DE LARANJA DE AÇÃO: isto é navegação, e navegação não compete com o primário. LÁPIDE (DESIGN-7 item 6, D-384): o anel de foco daqui já foi laranja "por ser o mesmo de toda a casa" -- deixou de ser; o laranja fica só na marca e no "+ Novo estudo", e este bloco passou a usar o anel do sistema (`--color-primary`). ------------------------------------------------------------ */ .tj-troca { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; font: 600 12.5px var(--display); color: var(--tinta-2); background: transparent; border: 1px solid transparent; cursor: pointer; padding: 7px 10px 7px 9px; border-radius: 8px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.12s, color 0.12s, border-color 0.12s; } .tj-troca i { font-style: normal; font-size: 10px; line-height: 1; color: var(--tinta-3); transition: color 0.12s; } .tj-troca:hover, .tj-troca[aria-expanded="true"] { background: var(--superficie-2); color: var(--tinta); } .tj-troca:hover i, .tj-troca[aria-expanded="true"] i { color: var(--tinta); } .tj-troca[aria-expanded="true"] { border-color: var(--linha); } .tj-troca:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } /* O invólucro é a âncora do painel. `align-self: stretch` sem conteúdo em fluxo além do botão: o painel é ABSOLUTO e não empurra nada, então este bloco nunca engorda a tarja — a armadilha da placa transparente (§7) mora em bloco que CRESCE em fluxo, e aqui não há um. */ .troca-wrap { position: relative; flex-shrink: 0; align-self: stretch; display: flex; align-items: center; } /* O painel herda `.menu` (superfície clara, sombra, raio) e só muda a âncora: nasce colado à esquerda e abaixo do fio da marca, nunca por cima dele. O seletor é `.menu.troca` e isso NÃO é enfeite: `.menu` mora depois nesta folha e, com a mesma especificidade, o `top:34px; right:0` dele venceria por ordem — o painel abriria colado na borda ERRADA da tarja. */ .menu.troca { left: 0; right: auto; top: calc(100% + 3px); min-width: 320px; max-width: 420px; padding: 5px; } .troca-rol { max-height: min(58vh, 420px); overflow-y: auto; overscroll-behavior: contain; } /* A LINHA: nome à esquerda, VGV líquido à direita, em mono e tabular — é a mesma medida e o mesmo formato do cartão da home, de propósito. Nome longo corta com reticências; o número NUNCA encolhe nem quebra. */ .troca-item { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 8px 10px; border-radius: 7px; color: var(--tinta); touch-action: manipulation; } .troca-item b { font: 600 13px var(--display); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } /* B4 (DOBRA, D-263, D-401): piso de 12px -- não há por que este numérico fosse o único abaixo da régua; `.troca-item b` já cede largura (ellipsis) antes de precisar cortar o VGV. */ .troca-item .troca-vgv { font: 500 12px var(--mono); font-variant-numeric: tabular-nums; color: var(--tinta-2); flex-shrink: 0; white-space: nowrap; } .troca-item:hover { background: var(--superficie-2); } .troca-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* o estudo aberto agora: fica na lista para o usuário se situar, marcado por fundo e por `aria-current` — nunca só por cor */ .troca-item.atual { background: var(--verde-claro); } .troca-item.atual b { color: var(--verde-escuro); } .troca-item .marca-atual { font: 700 8.5px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--verde); flex-shrink: 0; } /* Estado de texto do painel — carregando, lista vazia, falha ao listar. NÃO usa `.vazio`: aquele nome tem dois papéis nesta folha (§7) e é exatamente o par que já cresceu uma placa transparente por cima das abas. */ .troca-nota { margin: 0; padding: 10px; font: 400 12.5px var(--display); color: var(--tinta-2); } .troca-todos { display: block; margin-top: 5px; padding: 9px 10px; border-top: 1px solid var(--linha); text-decoration: none; font: 600 12.5px var(--display); color: var(--verde); } .troca-todos:hover { background: var(--verde-claro); } .troca-todos:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* MACRO-1 (14/09/2026): a segunda entrada da tela do cenário macro, dentro do mesmo menu "Empreendimentos ▾" -- tom neutro (`--tinta`), porque não é a ação de voltar (essa continua verde, em `.troca-todos`): é navegação para uma configuração da empresa. */ .troca-macro { display: block; margin-top: 5px; padding: 9px 10px; border-top: 1px solid var(--linha); text-decoration: none; font: 600 12.5px var(--display); color: var(--tinta); } .troca-macro:hover { background: var(--superficie-2); } .troca-macro:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* AJUDA-1 (14/09/2026): a terceira entrada do mesmo menu, mesma roupa da `.troca-macro` (tom neutro, é navegação e não gravação). */ .troca-glossario { display: block; margin-top: 5px; padding: 9px 10px; border-top: 1px solid var(--linha); text-decoration: none; font: 600 12.5px var(--display); color: var(--tinta); } .troca-glossario:hover { background: var(--superficie-2); } .troca-glossario:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* busca permanente da home. DESIGN-7 item 2: fundo claro `--superficie-2` (a folha não tem um token `--fundo-2` -- este é quem já faz esse papel em toda a casa, ver `.troca-item:hover`, `.menu button:hover`) e borda `--linha`, texto em `--tinta`. */ .tj-busca { display: flex; align-items: center; gap: 8px; border-radius: 9px; padding: 0 12px; height: 38px; min-width: 0; background: var(--superficie-2); border: 1px solid var(--linha); width: min(340px, 38%); } .tj-busca input { border: 0; background: transparent; outline: none; color: var(--tinta); font: 400 13px var(--display); width: 100%; min-width: 0; padding: 0; } .tj-busca input::placeholder { color: var(--tinta-3); } .tj-busca i { font-style: normal; font-size: 13px; opacity: 0.7; color: var(--tinta-2); } .tj-busca:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(10,79,54,0.14); } /* LÁPIDE DO FIO DA MARCA (DESIGN-7 item 2, 12/09/2026). Era 3px de gradiente laranja embaixo da tarja -- morreu com a tarja escura: a borda `--linha` de 1px do `.tj` faz esse trabalho agora. As duas `
` saíram do index.html; a classe não é mais usada. */ /* ------------------------------------------------------------ DESABILITADO NA TARJA — DESIGN-7 item 2: a tarja deixou de ser escura, então o desabilitado do bloco 1 (#f1f4f2 / #a3aeaa, fundo CLARO) já serve sem override de cor -- este seletor mais específico fica só com o `pointer-events`, que é FÍSICA e não cor. ------------------------------------------------------------ */ .tj .btn:disabled, .tj .btn[aria-disabled="true"] { /* deixa o clique atravessar para o invólucro da dica: navegador nenhum dispara evento de ponteiro em controle desabilitado, e sem isto a dica seria inalcançável no toque — que é justamente onde ela mais falta. */ pointer-events: none; } /* ---- a dica do botão bloqueado ---- No iPad NÃO EXISTE hover, então `title=""` nativo nunca aparece lá: a dica precisa de um caminho por TOQUE ou é decoração de desktop. O invólucro abre por hover (ponteiro fino) e por toque (classe `.dica-vista`, ligada no clique). O `title` fica no botão assim mesmo, para leitor de tela e para o desktop de quem não toca. */ .dica { position: relative; display: inline-flex; cursor: not-allowed; } .dica::after { content: attr(data-dica); position: absolute; top: calc(100% + 9px); right: 0; z-index: 60; background: #0b1210; color: var(--escuro-tinta); border: 1px solid var(--escuro-linha); border-radius: 7px; padding: 6px 10px; font: 600 11.5px var(--display); white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,0.45); opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; } .dica.dica-vista::after { opacity: 1; transform: translateY(0); } @media (hover: hover) and (pointer: fine) { .dica:hover::after { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .dica::after { transition: none; } } /* ============================================================ 3 · O INDICADOR DE GRAVAÇÃO (D-126) ------------------------------------------------------------ A REGRA, que é contrato do auto-save e não estilo: O sistema atualiza e grava tudo a cada nova inserção de dados. Gravar é FUNCIONAMENTO NORMAL, e funcionamento normal é SILENCIOSO. O indicador só existe quando algo IMPEDE o normal, e são DOIS estados, só: (a) "Pendências · não salvo.": estado inválido NUNCA sobrescreve o último válido; (b) "Falha ao gravar.": com causa e reagendamento (D-074 — reporta e reagenda, nunca perde digitação em silêncio). FORA ISSO, NADA NA TELA. Nem transitório. Nem "gravado". Não existe `.salvo` e não existe `.gravando` nesta folha, e a ausência é a especificação: um transitório que pisca a cada 650 ms de debounce é ruído intermitente, e movimento no canto da tela captura o olho sem ter o que dizer. A confiança vem do COMPORTAMENTO (nunca perder dado), não de anúncio. ESTADOS-1, item 2 (12/09/2026, prancha 15) TROCOU O CORTE PELA QUEBRA. A causa passou a carregar a PRIMEIRA pendência por inteiro — não mais só a contagem —, e frase inteira com `overflow: hidden` + `ellipsis` de linha única é a mesma classe de defeito que a E1 já baniu da tela (aparar é perder a causa). O corpo (`#ind-grav-txt` + `#ind-grav-causa`, dentro de um ``) agora QUEBRA como prosa; só o `max-width` do selo segue limitando a largura na tarja. */ .ind-grav { display: inline-flex; align-items: flex-start; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 14px; border: 1px solid transparent; font: 600 11.5px var(--display); max-width: 380px; } .ind-grav i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; font-style: normal; margin-top: 4px; } .ind-grav-corpo { min-width: 0; line-height: 1.45; } /* R1 (item 9, D-263): 11px -> 12px nos dois — a causa agora pode carregar dígitos ("2 itens a corrigir."), e a fonte pequena demais é a MESMA classe de defeito que a B1 conserta um degrau acima (frase difícil de ler). */ .ind-grav em { font: 400 12px var(--mono); font-style: normal; color: inherit; opacity: 0.78; } /* O LINK/BOTÃO "Ir ao campo →"/"Ir à seção →" (ESTADOS-1, item 2): mesma tinta do estado (herda `color: inherit`), sublinhado para não depender só da cor, e sem moldura de botão -- ele lê como parte da frase, com uma ação no fim dela. */ .ind-grav-link { font: 700 12px var(--display); text-decoration: underline; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; } .ind-grav-link:hover, .ind-grav-link:focus-visible { opacity: 0.82; } /* (a) retido — âmbar. Nunca pêssego: pêssego é interação (P4). */ .ind-grav.retido { background: var(--ambar-claro); border-color: var(--ambar-borda); color: var(--ambar); } .ind-grav.retido i { background: var(--ambar); } /* (b) falhou — vermelho, com a causa e o reagendamento no */ .ind-grav.falhou { background: var(--vermelho-claro); border-color: var(--vermelho-borda); color: var(--vermelho); } .ind-grav.falhou i { background: var(--vermelho); } /* ============================================================ 4 · HOME — grade de cartões (sem sidebar) ============================================================ */ .pagina { max-width: 1180px; margin: 0 auto; padding: 30px 28px 90px; } /* D2 (DESIGN-7/ADENDO) -- o respiro deixa de ser um número cravado (120px fixos, independente da aba e da largura da janela) e passa a seguir a altura REAL da faixa viva, medida por `medirFaixaViva` (app.js) e gravada em `--faixa-altura` no (P-7, DIURNA-1 item 4d: desde então a variável mora no documentElement e não mais no , porque o `scroll-padding-bottom` só vale no elemento de rolagem -- o continua enxergando o mesmo valor, por herança). Sem faixa visível (aba Resultado) a variável vale 0 e o respiro cai para os 32px de folga -- nunca sobra espaço morto, e o último card nunca fica por baixo da faixa. */ body[data-tela="estudo"] .pagina { padding-bottom: calc(var(--faixa-altura, 0px) + 32px); } .cabecalho-pagina { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; } .cabecalho-pagina h1 { font: 800 30px/1.15 var(--display); letter-spacing: -0.015em; margin: 0; } .cabecalho-pagina p { margin: 6px 0 0; color: var(--tinta-2); font-size: 13.5px; } /* "Carregado em DD/MM HH:MM" (HOME-2 item 4) — canto oposto ao título, mesma trava de `margin-left: auto` que `.emp-editado` já usa no rodapé do cartão. Fica em branco (some visualmente) antes da primeira listagem. */ .home-atualizado { /* 12px, não 11,5 (dobra do item 10, A4): mono com dígito é número, e número desta casa não desce de 12px. */ margin-left: auto; font: 500 12px var(--mono); color: var(--tinta-2); white-space: nowrap; } /* CHIPS DE FILTRO DA HOME (HOME-2 item 3) — contagem de cartões por ESTADO JÁ PUBLICADO, nunca ranking; a nota ao lado repete por escrito o que a interação já cumpre: filtrar não reordena (`_listaCache` continua por lançamento, ver `cartaoDeveAparecer`/`renderHome` no app.js). */ .home-filtros { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; } .home-filtros-chips { display: flex; gap: 8px; flex-wrap: wrap; } .home-filtro { font: 700 12px var(--display); padding: 7px 14px; border-radius: 999px; border: 1px solid #dfe5e2; background: var(--superficie); color: var(--tinta-2); cursor: pointer; } .home-filtro:hover { border-color: var(--pessego-borda); } .home-filtro.ativo { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); } .home-filtros-nota { font: 500 11.5px var(--display); color: var(--tinta-3); } /* DESIGN-1: "2 por linha" é decisão do dono, e não um `auto-fill` que decide sozinho quantas colunas cabem. Abaixo de 1100px vira 1 coluna -- é o ponto em que 320px × 2 + o vão de 16px deixa de caber com conforto. */ .grade-emp { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 1100px) { .grade-emp { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .emp { position: relative; background: var(--superficie); border: 1px solid #dfe5e2; border-radius: var(--raio); padding: 18px 20px 16px; box-shadow: 0 2px 0 rgba(19, 29, 25, 0.07), 0 4px 14px rgba(19, 29, 25, 0.06); transform: translateY(0); transition: transform 100ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 100ms cubic-bezier(0.2, 0.7, 0.3, 1), background-color 100ms ease, border-color 100ms ease; } /* o cartão fala a mesma língua do botão, na mesma escala de tempo. O `:has()` é o que permite o cartão INTEIRO afundar quando o link interno é pressionado — sem ele só o link afundaria e o cartão pareceria quebrado. */ @media (hover: hover) and (pointer: fine) { .emp:hover { background: var(--doma-pessego); border-color: var(--pessego-borda); transform: translateY(-1px); box-shadow: 0 4px 0 rgba(148, 56, 0, 0.10), 0 10px 22px rgba(19, 29, 25, 0.12); } /* o pêssego EMOLDURA, não tinge o dado: as células de número recuperam superfície branca no hover (DESIGN-1: cada KPI é célula própria agora) */ .emp:hover .emp-nums > div { background: rgba(255, 255, 255, 0.72); } } .emp:has(.emp-link:active) { transform: translateY(2px); border-color: var(--pessego-borda); background: var(--doma-pessego); box-shadow: inset 0 2px 5px rgba(148, 56, 0, 0.18); transition-duration: 60ms; } .emp:focus-within { border-color: var(--color-primary); } /* CARD TRACEJADO — "Novo estudo / ou duplicar um existente" (DESIGN-1), no fim da grade. CLASSE PRÓPRIA, DE PROPÓSITO: `.emp` é o que vários harnesses contam como "quantos estudos existem" (check_ciclo, check_autosave...), e este card não é um estudo. Como filho de `.grade-emp` (display:grid) ele já ganha a largura da coluna sozinho. */ .emp-novo { position: relative; border-radius: var(--raio); background: transparent; border: 2px dashed #c8d3ce; box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 220px; padding: 32px 20px; cursor: pointer; font: inherit; width: 100%; color: inherit; transition: background-color 100ms ease, border-color 100ms ease; } .emp-novo:hover { border-color: var(--pessego-borda); background: var(--doma-pessego); } @media (prefers-reduced-motion: reduce) { .emp-novo { transition: none; } } .emp-novo-titulo { font: 800 16px var(--display); color: var(--doma-preto); } .emp-novo-sub { font: 400 12.5px var(--display); color: var(--tinta-2); } @media (prefers-reduced-motion: reduce) { .emp { transition: none; } } /* o cartão inteiro é o alvo do clique; o ::after do link cobre o cartão e o menu sobe por cima com z-index — assim o link fica sozinho, sem botão aninhado dentro de âncora (que é HTML inválido e quebra no teclado). */ .emp-link { text-decoration: none; color: inherit; display: block; } .emp-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio); } .emp-link:focus-visible::after { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ------------------------------------------------------------ TOPO DO CARTÃO (DESIGN-1) — foto ou monograma, com nome e endereço sobre um gradiente para contraste. O QUE MUDOU DE LUGAR (mockup aprovado em 11/09): até aqui o nome e o endereço abriam o cartão em texto corrido; agora os dois sobem para dentro da foto, e o LANÇAMENTO — que manda na ordem da grade — fica logo abaixo dela. A ORDEM NO DOM NÃO É A ORDEM VISUAL, DE PROPÓSITO: dentro de `.emp-legenda` o endereço vem ANTES do nome no documento (e `column-reverse` os inverte na tela, nome em cima). A razão é o `check_cronograma` (cena 7): ele lê `.emp-nome, .emp-lanc, .emp-end` em ORDEM DE DOCUMENTO e exige que `.emp-lanc` — que mora FORA da foto, abaixo dela — venha LOGO DEPOIS de `.emp-nome` nessa lista. Com endereço-antes-do-nome, a sequência fica [end, nome, lanc] e a exigência (`indexOf(lanc) === indexOf(nome) + 1`) se cumpre sem tocar a leitura de tela, que continua nome → lançamento → endereço. */ .emp-topo { position: relative; height: 150px; margin: 0 0 14px; border-radius: var(--r-2); overflow: hidden; background: var(--color-bg); } /* NOTURNO-10-CONSERTO (25/09/2026): slot dedicado da foto/monograma, filho de `.emp-topo` -- a legenda (nome) e a pílula de fundo são IRMÃOS deste slot, não filhos dele, para que a troca de conteúdo do slot (monograma -> foto, quando a busca assíncrona volta) nunca apague os dois. Sem `position`: ele é o único filho em fluxo normal de `.emp-topo`, então 100%/100% herda a caixa de 150px normalmente. */ .emp-slot-foto { width: 100%; height: 100%; } .emp-foto { width: 100%; height: 100%; object-fit: cover; display: block; } .emp-mono { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary), #2f8a63); } /* MARCA-2 (14/09/2026) — o monograma da marca (PNG 308×308 com alfa real) sobre o gradiente de `.emp-mono`; `width: auto` preserva a proporção do arquivo. 44px cai entre o piso (40) e o teto (48) pedidos pela Mesa; 308/44 ≈ 7×, folga larga acima da nitidez mínima (2×) em qualquer tela. */ .emp-mono-marca { height: 44px; width: auto; display: block; } /* "Imagem ainda não anexada" (HOME-2 item 5) — ancorada no TOPO da caixa, de propósito: a legenda (nome/endereço) fica no gradiente de BAIXO e o círculo de trocar imagem no canto inferior direito (`top: 134px`) — o topo é o único respiro livre dos dois. `position: absolute` porque ela sobra sobre o monograma (que já ocupa o espaço inteiro centralizado), não abaixo dele. TARDE-1 item 2 (HOME-IMG) — o `top` subiu de 36px para 8px, colado no canto superior, para abrir uma faixa de ~45px ENTRE a frase e o monograma (que começa a 53px, centralizado nos 150px da caixa): é ali que o botão "Anexar imagem" (`.emp-anexar-wrap`, abaixo) mora, sem tocar o monograma nem a legenda — a única folga vertical que a caixa tem. */ .emp-sem-imagem { position: absolute; z-index: 1; top: 8px; left: 14px; right: 14px; margin: 0; text-align: center; /* 12px, não 11,5 (dobra do item 10, A3). */ font: 500 12px var(--display); color: rgba(255, 255, 255, 0.82); } .emp-pilula-fundo { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(19, 29, 25, 0.62); color: var(--doma-branco); font: 800 9.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } /* NOTURNO-6 item (d) — o padding DIREITO cresceu de 14px para 40px: nome e endereço são filhos `flex` (stretch) desta caixa, então a largura deles é sempre "largura da foto menos o padding dos dois lados", não a largura do texto — mesmo curto, o retângulo deles ia até quase a borda da foto. Sem este respiro reservado, NENHUMA posição do círculo de "trocar imagem" no canto inferior direito escaparia de interseccionar o retângulo do nome (medido: com o padding antigo, `.emp-trocar` e `.emp-nome` se sobrepunham). O padding assimétrico é o preço, medido e aceito, de manter OS CÍRCULOS SEMPRE fora do retângulo do texto, em qualquer largura de cartão — e são DOIS círculos, não um, desde que `.emp-remover` passou a morar ao lado do `.emp-trocar` (TARDE-1 item 2, DOBRA D-263): 40px media só o ✎ sozinho. Com os dois (60px de linha + o mesmo respiro de 28px até a borda), o círculo da ESQUERDA (`.emp-remover`) passou a invadir a caixa do texto — medido com endereço longo em 1366: texto até r=587,4, `×` começando em l=570,5. `.emp:has(.emp-remover)` é o mesmo seletor que já pinta o cartão pressionado (`.emp:has(.emp-link:active)`, acima) — condição por CONTEÚDO, sem precisar de classe nova no `art`. */ .emp-legenda { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column-reverse; gap: 2px; padding: 30px 40px 10px 14px; background: linear-gradient(to top, rgba(10, 16, 13, 0.82), rgba(10, 16, 13, 0)); } .emp:has(.emp-remover) .emp-legenda { padding-right: 74px; } /* O botão fica FORA de `` (mesma razão do kebab: botão dentro de âncora é HTML inválido) — por isso `.emp-trocar-wrap` segue filho de `.emp` (o cartão inteiro) e não de `.emp-topo` (a foto): mover para dentro da foto aninharia o `