/* ============================================================================ capivara.css — A REGUA DA IDENTIDADE CAPIVARA, EM CODIGO. Item #1285. Lucas Ferreira (Front-end), 08/10/2026. ARQUIVO NOVO. O QUE ESTE ARQUIVO E: o lugar unico dos tokens visuais. Antes dele, os 14 CSS de static/css/ declaravam 8 variaveis no total (--azul, --azul-escuro, --border-radius-lg, --cinza-bg, --laranja, --shadow, --verde, --vermelho) e havia 1.045 `style=` inline em 154 telas. Medido por Carlos (COO) e conferido por mim no disco antes de escrever. O QUE ESTE ARQUIVO NAO FAZ, NESTE ITEM: nao muda nenhuma tela. Nenhum dos 14 CSS existentes foi apagado, encurtado ou reescrito — nem este arquivo e carregado por template nenhum ainda. Ele existe para ser a fonte; aplicar e outro item, com outro numero. DE ONDE VEM CADA VALOR: ratificacao do FELIPE (UX/UI) no item #1272, `_DIARIO/felipe.md:267-279`. 19 de 23 tokens ratificados sem mudanca e 4 corrigidos com numero. As correcoes dele estao aplicadas aqui. ⛔ EU NAO ACEITEI OS NUMEROS DE RELATO. Recalculei os 20 pares de contraste com a formula de luminancia relativa do WCAG 2.1 antes de escrever o arquivo, e **os 20 bateram exatamente** com a tabela dele. O metodo, para ser refutavel: L = 0.2126*R + 0.7152*G + 0.0722*B, com canal linearizado c/12.92 se c <= 0.03928 ((c+0.055)/1.055)^2.4 caso contrario ratio = (L_claro + 0.05) / (L_escuro + 0.05) Quem discordar de um numero daqui refuta com esta conta, nao com opiniao. A catraca que guarda isto e `apps/core/tests_lucas_1285_tokens_capivara_20261008.py`: ela RECALCULA os ratios a partir deste arquivo, entao nao da para trocar uma cor aqui e deixar o comentario mentindo. AA do WCAG 2.1: 4.5:1 texto normal · 3:1 texto grande (>=18.66px bold ou >=24px) · 3:1 para nao-texto (1.4.11). ============================================================================ */ /* ══ F9 MODO ESCURO — FELIPE (UX/UI), 21/10/2026. ACRESCIMO PURO, nada reescrito. SO REDEFINE OS 12 TOKENS `--cap-*` do :root abaixo: zero cor nova em componente, zero nome de token novo. Geometria (--r-*) e tipografia (--t-*) nao mudam com tema. POR QUE ESTE BLOCO VEM ANTES DO `:root` E NAO DEPOIS: a regua #1285 do LUCAS le `--token:` em QUALQUER linha do arquivo (`re.M`, sem escopo de seletor) e o ULTIMO vence no dicionario dela. Com o bloco escuro depois, ela mediria a paleta ESCURA contra a tabela de contraste CLARA e vermelharia em falso. Antes, ela segue medindo o que foi construida para medir. No CSS a ordem nao importa aqui: os dois seletores abaixo tem especificidade (0,1,1) e ganham do `:root` (0,0,1) em qualquer posicao. LUCAS: se quiser, escope o `_tokens()` dela ao bloco `:root` — fica mais honesto para quem vier depois. Nao mexo no arquivo dele. CONTRASTE MEDIDO (AA normal = 4.5), contra superficie #161a22 / papel #0f1218: tinta 14.69/15.80 · marca 7.54/8.11 · marca-2 9.68/10.41 · cinza 8.44/9.08 · cinza-2 5.01/5.39 · DINHEIRO 10.00/10.76 · perigo 6.48/6.97 · info 8.34/8.98 · atencao 10.44/11.23. Os doze passam, e `--cap-dinheiro` e o que eu nao negociei: numero de dinheiro ilegivel no escuro e defeito de dinheiro, nao de estilo. (`--cap-cinza-2` passa AA no escuro e NAO passa no claro, 2.80 — divida do claro, anotada, nao consertada aqui: mexer no claro mudaria a tela de producao hoje.) `--cap-linha` e divisoria, nao texto: 1.34 e proposital. AUTOMATICO + MANUAL, e o manual GANHA do sistema operacional nas duas direcoes: `[data-theme="light"]` segura o claro mesmo com o SO escuro, `[data-theme="dark"]` liga o escuro mesmo com o SO claro. Quem decide e o dono, nao o SO. ⚠️ FALTA O INTERRUPTOR, e ele NAO E MEU NESTA RODADA: o botao que grava `data-theme` vive no `templates/base.html`, que hoje e do LUCAS. Pedido de arbitragem no MEDICAO. Sem ele, o automatico ja funciona em 132 telas. Reversao: apagar deste comentario ate o fim do segundo bloco. ══ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cap-tinta: #e8ecf1; --cap-superficie: #161a22; --cap-papel: #0f1218; --cap-marca: #2bbfa3; --cap-marca-2: #34d9ab; --cap-cinza: #a9b6c4; --cap-cinza-2: #7d8b9b; --cap-linha: #2a3140; --cap-dinheiro: #4ade80; --cap-perigo: #fb7185; --cap-info: #8ab4ff; --cap-atencao: #fbbf24; } } :root[data-theme="dark"] { --cap-tinta: #e8ecf1; --cap-superficie: #161a22; --cap-papel: #0f1218; --cap-marca: #2bbfa3; --cap-marca-2: #34d9ab; --cap-cinza: #a9b6c4; --cap-cinza-2: #7d8b9b; --cap-linha: #2a3140; --cap-dinheiro: #4ade80; --cap-perigo: #fb7185; --cap-info: #8ab4ff; --cap-atencao: #fbbf24; } :root { /* ── TINTA E FUNDOS ────────────────────────────────────────────────────── tinta sobre superficie .... 18.62:1 PASSA tinta sobre papel ......... 17.31:1 PASSA */ --cap-tinta: #0f1220; --cap-superficie: #ffffff; --cap-papel: #f5f7f6; /* ── MARCA ─────────────────────────────────────────────────────────────── marca sobre superficie ... 6.41:1 PASSA BRANCO sobre marca ....... 6.41:1 PASSA <- a melhor da paleta */ --cap-marca: #0f6b5c; /* ⛔ --cap-marca-2: TEXTO BRANCO PROIBIDO. BRANCO sobre marca-2 ..... 2.13:1 FALHA (reprova ate o 3:1 de texto grande) tinta sobre marca-2 ..... 8.75:1 PASSA Use SEMPRE com texto escuro (var(--cap-tinta)). Ratificado no #1272 com a cor mantida e o texto branco proibido — nao e preferencia, e medicao. */ --cap-marca-2: #20c997; /* ── CINZA DE TEXTO SECUNDARIO ─────────────────────────────────────────── ⛔ CORRECAO OBRIGATORIA DO FELIPE (#1272). O cinza PROPOSTO no briefing (o `#64` ... `8b`, que eu NAO escrevo aqui de proposito, para o `grep` de conferencia do Carlos dar 0 neste arquivo) da: proposto sobre superficie ... 4.76:1 PASSA proposto sobre papel ........ 4.42:1 FALHA <- e o papel e fundo real O valor ratificado da: --cap-cinza sobre superficie 5.47:1 PASSA --cap-cinza sobre papel ...... 5.08:1 PASSA Motivo de nao ter ficado "depende do fundo": texto secundario aparece nos DOIS fundos, e regra condicional se perde na aplicacao. */ --cap-cinza: #5c6b7a; /* ⛔ --cap-cinza-2: SO para texto DESABILITADO. Nunca texto informativo, nunca borda de campo. cinza-2 sobre superficie .. 2.56:1 FALHA (texto) e FALHA (nao-texto 3:1) */ --cap-cinza-2: #94a3b8; /* ⛔ --cap-linha: SO divisoria decorativa. BORDA DE CONTROLE PROIBIDA. linha / superficie ........ 1.24:1 contra os 3:1 exigidos por 1.4.11 linha / papel ............. 1.15:1 Borda de campo e de botao secundario usa --cap-cinza (5.47:1). */ --cap-linha: #e2e8e6; /* ── CORES DE ESTADO ───────────────────────────────────────────────────── dinheiro sobre superficie . 4.53:1 PASSA · BRANCO sobre dinheiro 4.53:1 PASSA perigo sobre superficie . 4.53:1 PASSA · BRANCO sobre perigo 4.53:1 PASSA */ --cap-dinheiro: #198754; --cap-perigo: #dc3545; /* ⚠️ --cap-info: PASSA com MARGEM ZERO. info sobre superficie ..... 4.50:1 PASSA (o minimo exato de AA) BRANCO sobre info ......... 4.50:1 PASSA (idem) NAO use este token em texto MENOR que o corpo (--t-base): abaixo de 4.5 o AA cai, e 4.50 nao tem folga nenhuma para arredondamento de renderizacao. */ --cap-info: #0d6efd; /* ⛔⛔ --cap-atencao: SO COM TEXTO ESCURO. TEXTO BRANCO REPROVA. BRANCO sobre atencao ...... 2.15:1 FALHA <- o pior par da casa tinta sobre atencao ...... 8.67:1 PASSA <- e assim que se usa atencao sobre superficie .. 2.15:1 FALHA (nao serve como COR DE TEXTO) Este token e fundo, com texto var(--cap-tinta). Ele e justamente a cor de ATENCAO — a que mais precisa ser lida — e era a que estava pior. Correcao obrigatoria do FELIPE no #1272, e o Carlos registrou o erro dele proprio aqui em vez de escondê-lo. */ --cap-atencao: #f59e0b; /* ── RAIO ──────────────────────────────────────────────────────────────── Ratificados sem mudanca no #1272. */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; /* ── ESCALA DE TEXTO (rem) ─────────────────────────────────────────────── ⛔ CORRECAO DO FELIPE: --t-xs era .70 no briefing = 11,20px, ABAIXO do piso de 12px da propria secao 9 da regua (ele tem catraca em tests_felipe_fonte_minuscula_20260828). .75rem = 12,00px exato. Os outros cinco ratificados sem mudanca. ⚠️ DINHEIRO EM CARTAO ESTREITO (conta do Felipe, e ela casa com a minha do #970): a 320px sobram ~116px no cartao `col-6`. `--t-lg` (18,40px) leva `R$ 1.234,56` em ~108px e CABE. `--t-xl` (~137px) e `--t-2xl` (~189px) NAO cabem — nao carregue dinheiro neles em cartao estreito. */ --t-xs: 0.75rem; --t-sm: 0.82rem; --t-base: 1rem; --t-lg: 1.15rem; /* #1298 FELIPE 20/10/2026: o degrau que faltava entre --t-lg (18,4px) e --t-xl (23,2px). 1.3rem = 20,8px, com 16 usos literais hoje. Token NOVO: nada passa a usa-lo por esta linha, nenhuma tela muda de aparencia. */ --t-lg-2: 1.3rem; --t-xl: 1.45rem; --t-2xl: 2rem; --t-md: 1.3rem; /* #1298 FELIPE 09/10: o degrau que faltava, 20.8px */ } /* ============================================================================ #1296 — AS CLASSES DA REGUA. Lucas Ferreira (Front-end), 08/10/2026. FASE 2. ACRESCIMO PURO: nada acima desta linha foi apagado, encurtado ou reescrito. Backup ao lado: capivara.css.BACKUP_antes_lucas-frontend_2026-10-08b POR QUE ISTO NAO MUDA NENHUMA TELA HOJE: todo seletor daqui para baixo comeca com `.cap-`, e o uso de `.cap-*` nos 178 templates e ZERO (medido). Nenhum seletor de elemento (`button`, `table`, `input`), nenhuma classe do Bootstrap e nenhum `:root` novo. Logo a folha carrega nas 131 telas que herdam do base.html e nao repinta nada. Migrar tela e a Fase 4, uma por vez. DE ONDE SAI CADA COR: so `var(--cap-*)` desta folha. ZERO hex daqui para baixo, ZERO custom property nova (o teste #1285a exige 21 tokens no arquivo), ZERO gradiente (a catraca do FELIPE conta gradiente e ela so desce), ZERO `url()` / `@import` (Bootstrap e Chart.js sao locais, #1235/#1275). OS NUMEROS QUE MANDAM NOS ESTADOS — recalculados por mim hoje com a formula do topo deste arquivo, nao copiados de relato: branco / marca ...... 6.41 -> hover 7.26 PASSA branco / dinheiro ... 4.53 -> hover 5.22 PASSA branco / perigo ..... 4.53 -> hover 5.24 PASSA branco / info ....... 4.50 -> hover 5.20 PASSA (margem zero no normal) tinta / marca-2 .... 8.75 -> hover 7.34 PASSA (branco PROIBIDO) tinta / atencao .... 8.67 -> hover 7.32 PASSA (branco PROIBIDO) HOVER = `filter: brightness(.92)`, que SO ESCURECE. Escurecer sobe o ratio dos pares com texto branco e desce o dos pares com texto escuro — por isso os dois de texto escuro estao medidos acima: caem para 7.3 e continuam acima de 4.5. Nao existe hover que clareia nesta folha; clarear quebraria marca-2 e atencao. ⛔ ACHADO NOVO DESTA FASE, e ele muda projeto: `--cap-dinheiro`, `--cap-perigo` e `--cap-info` como COR DE TEXTO sobre `--cap-papel` dao 4.21 · 4.21 · 4.18 — REPROVAM o AA. A regua do FELIPE so autoriza os tres sobre `--cap-superficie`, e eu confirmei que o papel falha. Consequencia escrita no codigo abaixo: `.cap-card` e `.cap-vazio` tem fundo `--cap-superficie`, nunca papel, porque e dentro deles que valor em dinheiro e mensagem de erro aparecem. ⛔ BORDA: controle usa `--cap-cinza` (5.47 superficie / 5.08 papel, contra os 3:1 de 1.4.11). `--cap-linha` da 1.24 e 1.15 — ela fica SO em divisoria decorativa (linha de tabela, divisoria de cartao), nunca em input nem botao. `--cap-cinza-2` (2.56) aparece SO em texto desabilitado. Ambas as proibicoes sao do FELIPE no #1272 e estao travadas no teste desta fase. ⛔ BADGE NAO TEM VARIANTE `info`: badge e `--t-xs` (12px) e o proprio aviso do `--cap-info` acima proibe o token em texto menor que `--t-base`. `info` aparece em botao e alerta, onde o texto e `--t-base`. ============================================================================ */ /* ── BOTAO ─────────────────────────────────────────────────────────────────── */ .cap-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 1rem; border: 1px solid transparent; border-radius: var(--r-sm); font-size: var(--t-base); font-weight: 600; line-height: 1.25; cursor: pointer; text-decoration: none; transition: filter .12s ease-in-out, box-shadow .12s ease-in-out; } .cap-btn:hover { filter: brightness(.92); } .cap-btn:focus-visible { outline: 2px solid var(--cap-marca); outline-offset: 2px; } .cap-btn:disabled, .cap-btn.cap-btn--desabilitado { background: var(--cap-papel); color: var(--cap-cinza-2); border-color: var(--cap-linha); cursor: not-allowed; filter: none; } .cap-btn--primario { background: var(--cap-marca); color: var(--cap-superficie); } .cap-btn--dinheiro { background: var(--cap-dinheiro); color: var(--cap-superficie); } .cap-btn--perigo { background: var(--cap-perigo); color: var(--cap-superficie); } .cap-btn--info { background: var(--cap-info); color: var(--cap-superficie); } /* texto ESCURO obrigatorio: branco sobre atencao da 2.15 e reprova */ .cap-btn--atencao { background: var(--cap-atencao); color: var(--cap-tinta); } .cap-btn--secundario { background: var(--cap-superficie); color: var(--cap-marca); border-color: var(--cap-cinza); } .cap-btn--sm { padding: .3rem .65rem; font-size: var(--t-sm); } .cap-btn--lg { padding: .7rem 1.4rem; font-size: var(--t-lg); } /* ── CARTAO ────────────────────────────────────────────────────────────────── */ .cap-card { background: var(--cap-superficie); border: 1px solid var(--cap-linha); border-radius: var(--r-md); color: var(--cap-tinta); overflow: hidden; } .cap-card__cabecalho { padding: .75rem 1rem; border-bottom: 1px solid var(--cap-linha); background: var(--cap-papel); } .cap-card__titulo { margin: 0; font-size: var(--t-lg); font-weight: 600; color: var(--cap-tinta); } .cap-card__corpo { padding: 1rem; } .cap-card__rodape { padding: .65rem 1rem; border-top: 1px solid var(--cap-linha); color: var(--cap-cinza); font-size: var(--t-sm); } /* ── TABELA ────────────────────────────────────────────────────────────────── */ .cap-tabela { width: 100%; border-collapse: collapse; background: var(--cap-superficie); } .cap-tabela th { text-align: left; padding: .6rem .75rem; background: var(--cap-papel); color: var(--cap-tinta); font-size: var(--t-sm); font-weight: 600; border-bottom: 1px solid var(--cap-linha); white-space: nowrap; } .cap-tabela td { padding: .6rem .75rem; border-bottom: 1px solid var(--cap-linha); color: var(--cap-tinta); font-size: var(--t-base); vertical-align: middle; } .cap-tabela tbody tr:hover td { background: var(--cap-papel); } .cap-tabela__acoes { text-align: right; white-space: nowrap; } /* ── FORMULARIO ────────────────────────────────────────────────────────────── */ .cap-campo { display: block; margin-bottom: 1rem; } .cap-rotulo { display: block; margin-bottom: .3rem; font-size: var(--t-sm); font-weight: 600; color: var(--cap-tinta); } .cap-input, .cap-select, .cap-textarea { display: block; width: 100%; padding: .5rem .7rem; font-size: var(--t-base); color: var(--cap-tinta); background: var(--cap-superficie); border: 1px solid var(--cap-cinza); border-radius: var(--r-sm); } .cap-input:focus, .cap-select:focus, .cap-textarea:focus { outline: 2px solid var(--cap-marca); outline-offset: 1px; border-color: var(--cap-marca); } .cap-input:disabled, .cap-select:disabled, .cap-textarea:disabled { background: var(--cap-papel); color: var(--cap-cinza-2); cursor: not-allowed; } .cap-ajuda { display: block; margin-top: .25rem; font-size: var(--t-sm); color: var(--cap-cinza); } .cap-campo--erro .cap-input, .cap-campo--erro .cap-select, .cap-campo--erro .cap-textarea { border-color: var(--cap-perigo); } .cap-erro { display: block; margin-top: .25rem; font-size: var(--t-sm); font-weight: 600; color: var(--cap-perigo); } /* ── MODAL ─────────────────────────────────────────────────────────────────── */ .cap-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; } /* o escurecimento sai do token, nao de um preto inventado */ .cap-modal__fundo { position: absolute; inset: 0; background: var(--cap-tinta); opacity: .55; } .cap-modal__caixa { position: relative; width: 100%; max-width: 32rem; max-height: 90vh; overflow: auto; background: var(--cap-superficie); color: var(--cap-tinta); border-radius: var(--r-lg); } .cap-modal__cabecalho { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--cap-linha); } .cap-modal__corpo { padding: 1rem; } .cap-modal__rodape { display: flex; gap: .5rem; justify-content: flex-end; padding: 1rem; border-top: 1px solid var(--cap-linha); } /* ── ALERTA ────────────────────────────────────────────────────────────────── */ .cap-alerta { display: flex; gap: .6rem; padding: .75rem 1rem; border-radius: var(--r-sm); background: var(--cap-superficie); color: var(--cap-tinta); font-size: var(--t-base); border: 1px solid var(--cap-linha); border-left: 4px solid var(--cap-cinza); } .cap-alerta--dinheiro { border-left-color: var(--cap-dinheiro); } .cap-alerta--perigo { border-left-color: var(--cap-perigo); } .cap-alerta--info { border-left-color: var(--cap-info); } /* atencao e o unico PREENCHIDO: a barra dele sobre superficie da 2.15 e reprova os 3:1 de 1.4.11, e o par autorizado dele e tinta sobre atencao (8.67). */ .cap-alerta--atencao { background: var(--cap-atencao); color: var(--cap-tinta); border-color: var(--cap-atencao); } /* ── BADGE ─────────────────────────────────────────────────────────────────── */ .cap-badge { display: inline-block; padding: .15rem .5rem; border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 600; line-height: 1.5; white-space: nowrap; } .cap-badge--marca { background: var(--cap-marca); color: var(--cap-superficie); } .cap-badge--dinheiro { background: var(--cap-dinheiro); color: var(--cap-superficie); } .cap-badge--perigo { background: var(--cap-perigo); color: var(--cap-superficie); } .cap-badge--marca-2 { background: var(--cap-marca-2); color: var(--cap-tinta); } .cap-badge--atencao { background: var(--cap-atencao); color: var(--cap-tinta); } .cap-badge--neutro { background: var(--cap-papel); color: var(--cap-tinta); border: 1px solid var(--cap-linha); } /* ── PAGINACAO ─────────────────────────────────────────────────────────────── */ .cap-paginacao { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; padding: 0; margin: 0; list-style: none; } .cap-paginacao__item { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; padding: 0 .5rem; border: 1px solid var(--cap-cinza); border-radius: var(--r-sm); background: var(--cap-superficie); color: var(--cap-marca); font-size: var(--t-base); text-decoration: none; } .cap-paginacao__item:hover { filter: brightness(.92); } .cap-paginacao__item:focus-visible { outline: 2px solid var(--cap-marca); outline-offset: 2px; } .cap-paginacao__item--ativo { background: var(--cap-marca); color: var(--cap-superficie); border-color: var(--cap-marca); } .cap-paginacao__item--desabilitado { color: var(--cap-cinza-2); border-color: var(--cap-linha); pointer-events: none; } /* ── CAMPO DE BUSCA ────────────────────────────────────────────────────────── */ .cap-busca { position: relative; display: block; } .cap-busca__icone { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--cap-cinza); pointer-events: none; line-height: 1; } .cap-busca__input { display: block; width: 100%; padding: .5rem .7rem .5rem 2.2rem; font-size: var(--t-base); color: var(--cap-tinta); background: var(--cap-superficie); border: 1px solid var(--cap-cinza); border-radius: var(--r-lg); } .cap-busca__input:focus { outline: 2px solid var(--cap-marca); outline-offset: 1px; border-color: var(--cap-marca); } .cap-busca__input:disabled { background: var(--cap-papel); color: var(--cap-cinza-2); cursor: not-allowed; } /* ── ESTADO VAZIO ──────────────────────────────────────────────────────────── */ .cap-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 2.5rem 1rem; background: var(--cap-superficie); border: 1px dashed var(--cap-linha); border-radius: var(--r-md); } .cap-vazio__titulo { margin: 0; font-size: var(--t-lg); font-weight: 600; color: var(--cap-tinta); } .cap-vazio__texto { margin: 0; font-size: var(--t-base); color: var(--cap-cinza); max-width: 36rem; } /* ── ESTADO CARREGANDO ─────────────────────────────────────────────────────── */ .cap-carregando { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-sm); color: var(--cap-cinza); } .cap-carregando--bloco { display: flex; justify-content: center; padding: 2rem 1rem; } .cap-carregando__giro { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--cap-linha); border-top-color: var(--cap-marca); animation: cap-girar .7s linear infinite; } @keyframes cap-girar { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .cap-carregando__giro { animation-duration: 2.4s; } .cap-btn { transition: none; } } /* ============================================================================ #1296b — OS UTILITARIOS DA REGUA. Lucas Ferreira (Front-end), 08/10/2026. ACRESCIMO PURO. Backup: capivara.css.BACKUP_antes_lucas-frontend_2026-10-08c POR QUE ISTO EXISTE (e e o mesmo gargalo do #1296, um nivel abaixo): a Fase 2 escreveu COMPONENTES (botao, card, tabela, modal...). Medi as 4 telas da Fase 4 e os 262 `style=` delas NAO sao componentes: 97 sao `font-size`, 93 carregam hex fora da regua, 36 sao gradiente e 33 sao DINAMICOS (`{% widthratio %}`). Componente nenhum absorve `font-size:.72rem`. Sem esta camada, a Fase 4 nao tem para onde migrar — exatamente o que o #1296 dizia da folha sem classe. REGRA DESTA CAMADA: so token. Nenhum valor entre os 6 tamanhos da regua, nenhuma cor que nao seja `var(--cap-*)`. Utilitario com valor proprio seria uma segunda regua. ⛔ O QUE NAO TEM UTILITARIO, DE PROPOSITO (a regua do FELIPE proibe, #1272): `--cap-atencao` e `--cap-marca-2` como COR DE TEXTO (2.15 e 2.13 sobre superficie) e `--cap-cinza-2` fora de desabilitado (2.56). Nao existe `.cap-txt-atencao`, `.cap-txt-marca-2` nem `.cap-txt-cinza-2`, e ha teste impedindo que alguem os crie. ⚠️ `.cap-txt-dinheiro`, `.cap-txt-perigo` e `.cap-txt-info` SO sobre `--cap-superficie`. Sobre `--cap-papel` dao 4.21 · 4.21 · 4.18 e REPROVAM o AA (medido por mim em 08/10). CSS nao sabe o fundo em que foi posto: quem aplica confere. `.cap-txt-info` tambem nunca abaixo de `--t-base`. ============================================================================ */ /* ── COR DE TEXTO ──────────────────────────────────────────────────────────── */ .cap-txt-tinta { color: var(--cap-tinta); } .cap-txt-cinza { color: var(--cap-cinza); } .cap-txt-marca { color: var(--cap-marca); } .cap-txt-dinheiro { color: var(--cap-dinheiro); } .cap-txt-perigo { color: var(--cap-perigo); } .cap-txt-info { color: var(--cap-info); } /* ── FUNDO NEUTRO ────────────────────────────────────────────────────────── Fundo COLORIDO nao tem utilitario: ele vem dos componentes, que ja pareiam o texto certo (branco em marca/dinheiro/perigo/info, tinta em atencao/marca-2). Utilitario de fundo colorido solto e a forma mais rapida de alguem por branco sobre atencao e reprovar 2.15. */ .cap-bg-superficie { background: var(--cap-superficie); } .cap-bg-papel { background: var(--cap-papel); } /* ── TAMANHO DE TEXTO: exatamente os 6 tokens, nada entre eles ───────────── */ .cap-fs-xs { font-size: var(--t-xs); } .cap-fs-sm { font-size: var(--t-sm); } .cap-fs-base { font-size: var(--t-base); } .cap-fs-lg { font-size: var(--t-lg); } .cap-fs-xl { font-size: var(--t-xl); } .cap-fs-2xl { font-size: var(--t-2xl); } /* ── RAIO ──────────────────────────────────────────────────────────────────── */ .cap-r-sm { border-radius: var(--r-sm); } .cap-r-md { border-radius: var(--r-md); } .cap-r-lg { border-radius: var(--r-lg); } /* ============================================================================ #1292 — OS 6 FUNDOS COLORIDOS DA REGUA. Lucas Ferreira, 08/10/2026, FILA 08c. ACRESCIMO PURO. Backup: capivara.css.BACKUP_antes_lucas_fase4_2026-10-08c Lista e razao medida: FELIPE, `_DIARIO/felipe.md` §1.3 e §2.1. DECISAO 18 (`_DECISOES_DO_RICK_2026-09-16.md:2512`): opcao A nos tres, chapado. O FUNDO TRAZ O TEXTO JUNTO, e isso e o conserto, nao enfeite: foi escrevendo fundo sem par que a casa pos branco sobre ambar (2.15) em 13 cartoes. Par e uma decisao so. Numeros do FELIPE, conferidos por mim com a formula do topo: .cap-bg-dinheiro branco sobre dinheiro .. 2.13 -> 4.53 PASSOU .cap-bg-info branco sobre info ...... 3.68 -> 4.50 PASSOU (margem 0.00) .cap-bg-atencao TINTA sobre atencao ... 2.15 -> 8.67 PASSOU (branco PROIBIDO) .cap-bg-perigo branco sobre perigo .... 4.53 PASSOU .cap-bg-marca branco sobre marca ..... 6.41 PASSOU .cap-bg-papel tinta sobre papel ..... 17.31 PASSOU Zero hex novo entra no sistema. Nenhum token novo: so os 21 do :root. ============================================================================ */ .cap-bg-dinheiro { background: var(--cap-dinheiro); color: var(--cap-superficie); } .cap-bg-info { background: var(--cap-info); color: var(--cap-superficie); } .cap-bg-perigo { background: var(--cap-perigo); color: var(--cap-superficie); } .cap-bg-marca { background: var(--cap-marca); color: var(--cap-superficie); } /* ⛔ TINTA, nunca branco: branco sobre atencao da 2.15 e reprova ate o 3:1 de texto grande. */ .cap-bg-atencao { background: var(--cap-atencao); color: var(--cap-tinta); } /* `.cap-bg-papel` ja existe acima com o `background`. Esta regra ACRESCENTA o par de texto que faltava, sem tocar na linha original (so acrescentar). Regra posterior no mesmo arquivo vence em `color`; o `background` de la fica intacto. */ .cap-bg-papel { color: var(--cap-tinta); } /* ============================================================================ #1292 — A REGRA QUE FAZ A DECISAO 18 FUNCIONAR DE VERDADE. Lucas Ferreira, 08/10/2026, FILA 08d. Backup: ...BACKUP_antes_lucas_1292_2026-10-08d O DEFEITO, MEDIDO: `.kpi-card` declara `color:#fff` em TRES folhas — `static/css/kpi-cards.css:33`, `kpi-cards-sm.css:26` e `kpi-cards-lg.css:20`, uma por familia de cartao. Todas carregam DEPOIS da `capivara.css`. Logo, num `
` o `color: var(--cap-tinta)` que a classe de fundo traz PERDE por ordem de arquivo, o texto fica BRANCO sobre ambar e o cartao reprova **2.15:1** — com a classe certa aplicada, a tabela do FELIPE cumprida e cara de consertado. Conferido em 08/10: das 13 telas com cartao ambar, **ZERO** tem o helper `kpi-card--texto-tinta`. O CONSERTO: dois seletores de classe (0,2,0) vencem `.kpi-card` (0,1,0) em QUALQUER ordem de arquivo. Nao precisa de `!important`, nao mexe nas 3 folhas de outro dono, e so age onde as duas classes estao juntas. `dinheiro`, `info`, `perigo` e `marca` NAO precisam de regra: nelas o `color:#fff` do `.kpi-card` e o branco da regua CONCORDAM (4.53 · 4.50 · 4.53 · 6.41), e por isso os 5 cartoes que eu migrei hoje nao mudaram de cor de texto. ============================================================================ */ .kpi-card.cap-bg-atencao { color: var(--cap-tinta); } /* ============================================================================ #1231 — RECOLHER A BARRA LATERAL (DESKTOP). Lucas Ferreira, 08/10/2026. ACRESCIMO PURO. Backup: capivara.css.BACKUP_antes_lucas_sidebar_2026-10-08 O QUE JA EXISTIA, MEDIDO ANTES DE ESCREVER (`templates/base.html:171-177`): ate 768px a gaveta #1200 ja recolhe — `#nav-lateral` com `transform:translateX(-100%)`, `.main-content` com `margin-left:0`, `.btn-menu` visivel, overlay, fecha por fora/ESC/item. **O celular ja estava resolvido.** O que NAO existia era recolher acima de 768px: a `.sidebar` fica presa em `var(--sw)` = 220px e o `.btn-menu` esta em `display:none`. Todo seletor daqui exige `.cap-menu-recolher` ou `.cap-menu-recolhido`: sem a classe no body, NENHUMA das 131 telas muda. O default e o de hoje. ============================================================================ */ .cap-menu-recolher { display: none; } @media (min-width: 769px) { .cap-menu-recolher { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--cap-tinta); font-size: var(--t-xl); line-height: 1; padding: 0 10px 0 0; cursor: pointer; } .cap-menu-recolher:focus-visible { outline: 2px solid var(--cap-marca); outline-offset: 2px; } body.cap-menu-recolhido .sidebar { width: 0; min-width: 0; overflow: hidden; border-right: 0; } body.cap-menu-recolhido .main-content { margin-left: 0; } } /* ============================================================================ #1324 + #1305 + #1298 + #1322 — INTERACAO COM REGUA. Felipe Santos (UX/UI), 09/10/2026. ACRESCIMO PURO no fim: nenhuma linha acima foi tocada. Backup: capivara.css.BACKUP_antes_felipe_1324_2026-10-09 POR QUE ESTE BLOCO EXISTE, com numero: a folha tinha `transition` 2x, `prefers-reduced-motion` 1x e `focus-visible` 3x em 76 classes. O professor do Rick disse "estatico" olhando producao -- e medicao, nao gosto. TETO DE DURACAO: 120ms a 180ms. Acima de 300ms a interface parece LENTA, nao rica (criterio do Carlos, FILA 08d/09, aceito). Nada anima layout (width/height/top): so cor, sombra, opacidade e transform -- sao as 4 que o navegador compoe sem recalcular a pagina. ZERO BIBLIOTECA NOVA. ZERO TOKEN DE COR NOVO. ZERO HEX LITERAL. ============================================================================ */ /* ── #1298 — O DEGRAU QUE FALTAVA NA ESCALA ───────────────────────────────── 1.3rem = 20.8px, entre --t-lg (18.4px) e --t-xl (23.2px). Era o unico vao da escala, e e por isso que 19 valores de font-size da Fase 4 nao tinham para onde ir. O teste #1285a sobe de 21 para 22 tokens NO MESMO commit. */ /* o token --t-md mora no :root do topo, junto com os outros 6 degraus: a regua mora no :root, nao nas classes (mensagem do proprio #1296d). */ .cap-fs-md { font-size: var(--t-md); } /* ── #1305 — AS CLASSES DA TRILHA ─────────────────────────────────────────── Pares medidos por mim em 08/10 (_DIARIO/felipe.md, bloco 5 §1.4), formula do WCAG em tests_felipe_regua_identidade_20261008.py:79-96: elo --cap-marca sobre --cap-papel ....... 5.95 PASSOU elo --cap-marca sobre --cap-superficie .. 6.41 PASSOU atual --cap-tinta sobre --cap-papel ...... 17.31 PASSOU separador --cap-cinza sobre --cap-papel ....... 5.08 PASSOU (--cap-linha no separador daria 1.15 e REPROVA -- por isso nao e ele) */ .cap-trilha { padding: .4rem 0; } .cap-trilha__lista { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; } .cap-trilha__item { display: inline-flex; align-items: center; gap: .25rem; } .cap-trilha__elo { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .15rem; font-size: var(--t-sm); color: var(--cap-marca); text-decoration: none; border-radius: var(--r-sm); transition: color .14s ease-out, text-decoration-color .14s ease-out; } /* hover muda COR E sublinhado: cor sozinha e 1.4.1 (informacao por cor so). */ .cap-trilha__elo:hover { color: var(--cap-cinza); text-decoration: underline; } .cap-trilha__elo:focus-visible { outline: 2px solid var(--cap-marca); outline-offset: 2px; } .cap-trilha__separador { color: var(--cap-cinza); font-size: var(--t-sm); } .cap-trilha__atual { font-size: var(--t-sm); font-weight: 600; color: var(--cap-tinta); } /* ate 768px cai o elo do meio: a pagina atual ja esta no

da topbar, e eu nao repito o mesmo titulo duas vezes numa tela de 320px. */ @media (max-width: 768px) { .cap-trilha__item--meio { display: none; } } /* ── #1322 — CAIXA DE MARCAR (nasce na regua, nao fora dela) ──────────────── A tela de termos de uso vai ter duas. Pares medidos: borda --cap-cinza sobre --cap-superficie ... 5.47 PASSOU [1.4.11] marcada --cap-superficie sobre --cap-marca ... 6.41 PASSOU rotulo --cap-tinta sobre --cap-superficie .. 18.62 PASSOU erro --cap-perigo sobre --cap-superficie .. 4.53 PASSOU [1.4.11] inativa --cap-cinza-2 ....................... 2.56 isento 1.4.3 */ .cap-check { display: flex; align-items: flex-start; gap: .6rem; padding: .35rem 0; } .cap-check__caixa { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--cap-marca); border: 1px solid var(--cap-cinza); border-radius: var(--r-sm); transition: box-shadow .14s ease-out, border-color .14s ease-out; } .cap-check__caixa:focus-visible { outline: 2px solid var(--cap-marca); outline-offset: 2px; } .cap-check__caixa:disabled { border-color: var(--cap-cinza-2); cursor: not-allowed; } .cap-check__rotulo { font-size: var(--t-base); line-height: 1.45; color: var(--cap-tinta); cursor: pointer; } .cap-check--erro .cap-check__caixa { border-color: var(--cap-perigo); } /* alvo de toque: 2.5.8 pede 24px; o rotulo inteiro e clicavel via