From adde62aff0eee6e98ac44da7907807896a32e93a Mon Sep 17 00:00:00 2001 From: Francisco Solla Date: Sat, 19 Sep 2026 12:39:57 -0300 Subject: [PATCH] =?UTF-8?q?fix(C191):=20cena=2002A=20na=20paleta=20oficial?= =?UTF-8?q?=20do=20C203=20=E2=80=94=20duas=20colunas=20no=20mesmo=20`#e410?= =?UTF-8?q?2f`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Re-decisão do designer sob a paleta do kit 1313: as duas categorias positivas compartilham o vermelho oficial (sem segundo vermelho, sem hierarquia); ordem de entrada, nunca o maior valor. Rebase em cima do C203 e peça re-renderizada na marca oficial. --- .../2026-09-19-c191-duas-colunas-positivas.md | 2 +- .../graficos-dados-instagram-ui-design.html | 38 ++++++++++--------- 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/docs/changelog/2026-09-19-c191-duas-colunas-positivas.md b/docs/changelog/2026-09-19-c191-duas-colunas-positivas.md index 273424c6..e455aa55 100644 --- a/docs/changelog/2026-09-19-c191-duas-colunas-positivas.md +++ b/docs/changelog/2026-09-19-c191-duas-colunas-positivas.md @@ -1 +1 @@ -**C191 — Coluna de comparação entre categorias e variante duas colunas positivas (2026-09-19):** a peça de internações de Vitória da Conquista (dois hospitais, ambos com maioria de moradores da cidade) precisava de colunas verticais, valores em % e sem hierarquia vermelho/cinza; pedido da comunicação em sessão direta (worktree `work/21`, sem claim). (1) **Design**: nova cena no `docs/plans/graficos-dados-instagram-ui-design.html` (CENA 02A, container `.dual-positive`), certificada pelo `designer` e aprovada por sign-off humano em 2026-09-19 — dois tons de vermelho (`#c51414` em `positive-a`, `#a21c1c` em `positive-b`) atribuídos pela **ordem de entrada** (nunca pelo maior valor), 280 px por coluna, rótulos de categoria em uma linha ("Municipal"/"Estadual"), plot de 500 px no feed. (2) **Contrato**: `unit` (sufixo nos rótulos de valor, ex.: `%`), `noHighlight` (peça sem valência, sem vermelho no plot) e `dualPositive` (exige `column`, exatamente 2 categorias e `feed`; recusa `--highlight`/`--no-highlight`); o `kicker` passa a seguir a **relação** dos dados — coluna de categorias lê "Comparação", não "Poucos períodos" —, não o layout forçado. (3) **Renderer**: teto de largura e centralização das colunas (2 categorias deixam de virar blocos de largura total), tons `positive-a`/`positive-b` pela ordem, `white-space: nowrap` no rótulo de categoria e ritmo próprio do feed (headline 60 px). (4) **Docs**: exemplos e guardrails das variantes no `SKILL.md`, incluindo a recusa fail-closed de pizza e a comparação positiva dupla. (5) **Testes**: unit do validate (unidade, kicker, neutral e dupla positiva fail-closed), da montagem do spec (`--type=column --unit=% --dual-positive`) e do render (classes, teto de 280 px, `%` nos valores, sem `highlight`). Entrega final: `docs/research/graficos-instagram/a-maioria-dos-internados-nos-dois-hospitais-de-v-2026-09-19-feed.png` ("A maioria dos internados nos dois hospitais de Vitória da Conquista mora na cidade"; 60,6% no municipal — Esaú Matos — e 54,7% no estadual — CHVC — das internações de 2025, SIH/SUS). +**C191 — Coluna de comparação entre categorias e variante duas colunas positivas (2026-09-19):** a peça de internações de Vitória da Conquista (dois hospitais, ambos com maioria de moradores da cidade) precisava de colunas verticais, valores em % e sem hierarquia vermelho/cinza; pedido da comunicação em sessão direta (worktree `work/21`, sem claim). (1) **Design**: nova cena no `docs/plans/graficos-dados-instagram-ui-design.html` (CENA 02A, container `.dual-positive`), certificada pelo `designer` e aprovada por sign-off humano em 2026-09-19, com re-decisão sob a paleta oficial do C203 — as duas colunas no vermelho oficial `#e4102f` (valência boa compartilhada, sem segundo vermelho; classes `positive-a`/`positive-b` pela **ordem de entrada**, nunca pelo maior valor), 280 px por coluna, rótulos de categoria em uma linha ("Municipal"/"Estadual"), plot de 500 px no feed. (2) **Contrato**: `unit` (sufixo nos rótulos de valor, ex.: `%`), `noHighlight` (peça sem valência, sem vermelho no plot) e `dualPositive` (exige `column`, exatamente 2 categorias e `feed`; recusa `--highlight`/`--no-highlight`); o `kicker` passa a seguir a **relação** dos dados — coluna de categorias lê "Comparação", não "Poucos períodos" —, não o layout forçado. (3) **Renderer**: teto de largura e centralização das colunas (2 categorias deixam de virar blocos de largura total), tons `positive-a`/`positive-b` pela ordem, `white-space: nowrap` no rótulo de categoria e ritmo próprio do feed (headline 60 px). (4) **Docs**: exemplos e guardrails das variantes no `SKILL.md`, incluindo a recusa fail-closed de pizza e a comparação positiva dupla. (5) **Testes**: unit do validate (unidade, kicker, neutral e dupla positiva fail-closed), da montagem do spec (`--type=column --unit=% --dual-positive`) e do render (classes, teto de 280 px, `%` nos valores, sem `highlight`). Entrega final: `docs/research/graficos-instagram/a-maioria-dos-internados-nos-dois-hospitais-de-v-2026-09-19-feed.png` ("A maioria dos internados nos dois hospitais de Vitória da Conquista mora na cidade"; 60,6% no municipal — Esaú Matos — e 54,7% no estadual — CHVC — das internações de 2025, SIH/SUS). diff --git a/docs/plans/graficos-dados-instagram-ui-design.html b/docs/plans/graficos-dados-instagram-ui-design.html index ee7cd1f8..446eb2f9 100644 --- a/docs/plans/graficos-dados-instagram-ui-design.html +++ b/docs/plans/graficos-dados-instagram-ui-design.html @@ -462,7 +462,7 @@ /* ------------------------------------------------------------------ */ /* CENA 02A · comparação vertical de 2 categorias, ambas positivas. */ - /* Os tons distinguem as categorias; não codificam vencedor/perdedor. */ + /* A posição e os rótulos distinguem as categorias; a cor codifica a valência boa comum. */ /* ------------------------------------------------------------------ */ .feed-canvas.dual-positive .chart-headline { max-width: 900px; @@ -507,10 +507,10 @@ min-height: 6px; } .feed-canvas.dual-positive .column.positive-a { - background: #c51414; + background: #e4102f; } .feed-canvas.dual-positive .column.positive-b { - background: #a21c1c; + background: #e4102f; } .feed-canvas.dual-positive .column-label { position: absolute; @@ -1014,8 +1014,9 @@

Variante certificada pelo designer de referência em 2026-09-19 e pronta para avaliação na tela renderizada. Ela não altera as cenas já aprovadas: só - acrescenta a comparação vertical em dois tons de vermelho, sem semântica de vencedor e - perdedor. O dono do produto aprovou a peça final renderizada em 2026-09-19. + acrescenta a comparação vertical positiva, sem semântica de vencedor e perdedor. Sob a + revisão C203, a paleta foi re-decidida: as duas colunas usam o vermelho oficial + #e4102f. O dono do produto aprovou a peça final renderizada em 2026-09-19.

1080 × 1350 2 colunas · teto 280 px + PALETA RE-DECIDIDA · C203 APROVADA · 2026-09-19 @@ -1582,19 +1584,19 @@