IRMÃO do veredito, o que obrigava esta
célula a ser flex-row com flex-wrap e um rótulo a 100% de largura — uma
mecânica de layout só para ela, e era a razão pela qual a palavra
"DESCENDO" assentava 2,9px mais abaixo do que a seta ao lado dela.
A seta passou para DENTRO do veredito, no markup, como o ícone SVG das
outras duas células. Estas cinco regras deixaram de ter razão de existir.
A seta é agora dimensionada como um irmão inline do texto, mais abaixo. */
#boletim-card #b2-trend-arrow {
flex: 0 0 auto;
margin-right: 5px;
line-height: 1;
}
/* --- Menos padding interno para a nota da quinta célula caber numa linha ---
Faltavam 9px de largura de texto por célula (medido: a nota pede 144px e
tinha 135,2px). Os 9px vêm de três sítios, nenhum deles suficiente por si:
padding do card 26px -> 14px (+24px partilhados pelas cinco células)
corpo do painel 12px -> 9px (+6px partilhados)
padding da célula 6px -> 4px (+4px em cada célula)
Total: ~10px por célula. Vale para TODOS os painéis, não só este — o gráfico
e o mapa também ganham largura, e o card perde 16px de altura. */
#boletim-card .b2-panel-body { padding: 10px 9px; }
#boletim-card .b2-cell { padding: 2px 4px; }
/* A nota cabe agora com 0px de folga (mede 144px em 144px disponíveis). Zero de
folga não é caber: qualquer arredondamento de fonte noutra máquina põe-na de
volta em duas linhas. Ela come 3px do padding da própria célula em cada lado
— a nota não tem fundo nem borda, então nada se vê. */
/* align-self: stretch é indispensável — a célula é `align-items: center`, logo
os filhos são do tamanho do seu conteúdo e a margem negativa não lhes dava
largura nenhuma. */
#boletim-card .b2-cell-note { align-self: stretch; margin-inline: -3px; }
/* A etiqueta de edição do cabeçalho ("EDIÇÃO #031 · FONTE: PORTO DE MANAUS /
SGB / ANA") herdava a mono de um ancestral. É uma frase, não uma coluna. */
#boletim-card .boletim-hero-edition {
font-family: var(--font-body);
letter-spacing: 0.1px;
}
/* ==========================================================================
BOLETIM — MENOS RESPIRO, MAIS INFORMAÇÃO
O card é lido como imagem encolhida no WhatsApp. Aí o padding não se lê como
elegância: lê-se como altura gasta a não dizer nada. Cada valor abaixo é o
anterior a menos ~30%, e nenhum desce abaixo de 5px (a partir daí o texto
encosta na borda do painel).
ATENÇÃO: o padding do .chart-card e a margem NEGATIVA do cabeçalho dele têm
de ser iguais em módulo — o cabeçalho sangra até à moldura. Ver
"#boletim-card .chart-card > .card-header" mais acima.
========================================================================== */
#boletim-card { gap: 10px; }
#boletim-card .b2-row { gap: 8px; }
#boletim-card .b2-panel-head { padding: 6px 9px; }
#boletim-card .b2-verdict-strip { min-height: 0; padding: 5px 9px; }
#boletim-card .b2-panel-body { padding: 8px 9px; }
#boletim-card .b2-panel-foot { padding: 5px 9px 6px; }
#boletim-card .b2-evo-item { padding: 5px 0; }
#boletim-card .chart-card { padding: 10px 9px 6px 9px !important; }
/* A barra tinha ~54px de altura enquanto o rodapé eram duas linhas de texto e
caiu para ~33px ao passar a uma. Com o monograma de 24px e este padding
volta aos ~53px — a mesma presença de assinatura no fim do card, sem as duas
linhas empilhadas que a davam antes. */
#boletim-card .boletim-footer { padding: 10px 18px 11px; }
#boletim-card .boletim-hero-photo-content { padding: 12px 14px 13px; }
/* Colunas da Previsão: o painel tem ~225px de largura útil. Sem o " m" em cada
célula (subiu para o cabeçalho) os números cabem em 50px, e sobram ~113px
para o rótulo do horizonte ("19 d · 09/09" mede ~66px). */
#boletim-card .b2-panel--side .b2-evo-value,
#boletim-card .b2-panel--side .b2-evo-rate { flex: 0 0 50px; }
/* --- FAIXA DE INDICADORES encostada à cabeça (padrão v8) ---
A cabeça e o rodapé do boletim sangram até às bordas do card com margem
negativa; a faixa dos cinco indicadores passa a fazer o mesmo e a encostar na
tarja do título. Deixa de ser um painel solto (que precisava de um título
próprio) e passa a ser a segunda barra da cabeça.
O -10px de cima é exactamente o `gap` de #boletim-card: qualquer outro valor
deixa uma fenda ou sobrepõe. Se o gap mudar, este muda. */
#boletim-card .b2-panel--full {
margin: -10px calc(-1 * var(--boletim-pad-x)) 0;
border-top: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
/* Tinta de fundo para a faixa se ler como barra e não como texto a flutuar
sobre o card. Mesmo token das tarjas de título dos painéis, mais fraco
porque aqui cobre a largura toda. */
background-color: rgba(var(--overlay-rgb), 0.03);
}
/* --- A FAIXA NÃO ENCHIA A LARGURA ---
`.b2-panel--full` traz `width: 100%`. Com a margem negativa que a faz sangrar,
esses 100% continuam a ser 100% da caixa de conteúdo do card (792px): a caixa
começava 14px à esquerda da borda e acabava 14px ANTES da borda direita.
`width: auto` deixa o flex esticar a faixa até às duas margens. */
#boletim-card .b2-panel--full { width: auto; }
/* O título é agora o sumário executivo e carrega três factos em vez de um, logo
é mais comprido. Um passo abaixo na escala mantém-no em duas linhas em vez de
três, e continua a ser o maior corpo do card. */
#boletim-card .boletim-hero-headline { font-size: 1.42rem; }
/* ==========================================================================
BOLETIM — VEREDITO COMO SELO NA TARJA DO TÍTULO
Cada painel gastava uma linha inteira (.b2-verdict-strip) só para a palavra
do veredito. O gráfico já resolvia o mesmo problema com um selo no canto da
tarja ("ATENÇÃO EM ~32D"), e a tarja tem espaço vazio à direita em todos os
painéis. Três linhas poupadas, e um padrão só em vez de dois.
O tom vem das classes b2-tone-* que setTone() já escreve — as mesmas quatro
que colorem os números do card. As regras .prog-badge.status-* continuam a
existir para o dashboard, que não usa b2-tone-*.
========================================================================== */
#boletim-card .b2-panel-head,
#boletim-card .chart-card > .card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
#boletim-card .prog-badge {
font-family: var(--font-body);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.3px;
/* inline-flex + altura fixa em vez de padding vertical: com padding, a
caixa era a soma da caixa-de-linha da fonte (que tem mais folga acima
das maiúsculas do que abaixo) e o texto assentava alto dentro do selo.
Com altura própria e align-items:center, o texto fica a meio do selo,
e o line-height deixa de decidir a altura. */
display: inline-flex;
align-items: center;
justify-content: center;
height: 19px;
/* padding-top de 2px, não 0: a caixa de linha da Fira Sans tem mais folga
ACIMA das maiúsculas do que abaixo (medido na página viva: 2,5px em cima
contra 4,5px em baixo), logo centrar a caixa deixa a PALAVRA alta. Os
2px de padding empurram-na para o meio óptico do selo. Medido, não
adivinhado — ver o comentário da medição abaixo. */
padding: 2px 8px 0;
border-radius: 9px;
line-height: 1;
white-space: nowrap;
}
/* `color` vem de .b2-tone-*; aqui entram o fundo e a borda que fazem o selo.
currentColor: uma cor só por tom, não três valores a ter de concordar. */
/* O fundo era rgba(--overlay-rgb, 0.06): cinzento igual nos quatro tons, logo
só a borda e o texto diziam a severidade. Agora cada selo tem o fundo do seu
PRÓPRIO tom, muito diluído — o selo lê-se como um bloco de cor à distância
do telefone, antes de a palavra ser legível.
Os rgba são escritos à mão em vez de color-mix(currentColor...) porque o
html2canvas não resolve color-mix e o fundo sairia transparente no PNG. */
#boletim-card .prog-badge.b2-tone-critical {
background-color: rgba(239, 68, 68, 0.14); /* --status-critical */
border: 1px solid currentColor;
}
#boletim-card .prog-badge.b2-tone-warning {
background-color: rgba(245, 158, 11, 0.16); /* --status-restricted */
border: 1px solid currentColor;
}
#boletim-card .prog-badge.b2-tone-normal {
background-color: rgba(16, 185, 129, 0.14); /* --status-normal */
border: 1px solid currentColor;
}
#boletim-card .prog-badge.b2-tone-neutral {
background-color: rgba(var(--overlay-rgb), 0.07);
border: 1px solid currentColor;
}
/* ==========================================================================
BOLETIM — CABEÇA E RODAPÉ NUM FUNDO SÓ
Havia três fundos diferentes em três barras: a tarja de topo com um gradiente
diagonal, a faixa do título com um gradiente vertical mais escuro, e o rodapé
com um terceiro gradiente. O objectivo dos gradientes era criar uma "costura"
entre as barras; com o card já muito mais compacto, o que eles fazem é
parecerem três tons por acidente. Um fundo só, e a costura passa a ser a
régua laranja (que já existia) e a faixa de indicadores clara no meio.
========================================================================== */
#boletim-card .boletim-hero-topbar,
#boletim-card .boletim-footer {
background: rgb(42, 45, 51);
}
#boletim-card .boletim-hero-photo {
background:
linear-gradient(90deg, #0a0b0c 0%, rgba(10,11,12,0.94) 30%, rgba(10,11,12,0.55) 60%, rgba(10,11,12,0.05) 100%),
url('../img/river_banner_header_crop.jpg') center 8% / cover no-repeat;
}
/* A tarja de topo tem agora dois itens (logótipo e edição) em vez de três, e a
edição já se empurra para a direita com margin-left: auto. Altura mínima
restaurada (era 0) para o banner de fundo mostrar mais do rio/horizonte
em vez de ficar cortado pela altura do texto. */
#boletim-card .boletim-hero-photo { min-height: 190px; }
/* A regra do corpo do .boletim-hero-headline saiu daqui: ele deixou de ser o
título e passou a ser a segunda linha. Ver "O TIPO DE DOCUMENTO É O TÍTULO"
mais abaixo, que é agora o único sítio que o dimensiona. */
#boletim-card .boletim-hero-lede {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 400;
line-height: 1.45;
color: #CBD5E1;
margin-top: 5px;
/* Sem max-width: com 66ch as duas frases caíam em TRÊS linhas e a cabeça
crescia 30px. À largura toda cabem em duas, e duas linhas não precisam de
medida curta para o olho encontrar o início da seguinte. */
}
/* A faixa de indicadores respira como as células do v8. Referência medida no
ficheiro real (comunicado-seca-2026-v8.html, dentro de "Alerta Seca
Supporte.zip"): `.data-cell { padding: 18px 16px; text-align: center; }`.
Os 18px verticais entram tal e qual. Os 16px laterais NÃO: no v8 são três
células num card de 780px (260px cada), aqui são cinco em 792px (154px cada),
e 16px de cada lado tirariam à nota da quinta célula a largura que ela precisa
para caber numa linha (ver a medição de 144px numa entrada anterior). */
#boletim-card .b2-panel--full .b2-panel-body { padding: 18px 9px; }
/* ==========================================================================
BOLETIM — O TIPO DE DOCUMENTO É O TÍTULO
Auditoria do cabeçalho, medida na página viva: a linha que diz o que este
documento É ("RELATÓRIO DE ESTIAGEM") tinha 10,88px — o CORPO MAIS PEQUENO
de todo o cabeçalho. Menor do que a data (11,52px) e do que os rótulos das
células (12,16px). E o corpo maior do cabeçalho (24,8px) era o estado do rio,
que a célula vermelha "ACELERANDO" repete 40px abaixo.
Resultado: o olho aterra no estado do rio e a intenção do relatório, que é a
coisa que se procura primeiro num telefone, perdia por ser a menor de todas.
A hierarquia inverte-se: o tipo de documento passa a ser o corpo maior do
card inteiro, e o estado do rio desce a segunda linha, em laranja.
O título é uma CONSTANTE — o alerta vive nas células e no texto, nunca aqui.
A altura do cabeçalho não muda (250px medidos antes e depois).
========================================================================== */
#boletim-card .boletim-hero-kicker {
font-family: var(--font-heading);
font-size: 2.35rem;
font-weight: 800;
/* O espaçamento de 2,2px servia uma etiqueta de 11px; a 37,6px ele abriria
a palavra até ela não caber. A negativo, aperta o que a caixa alta a este
corpo tem de folga a mais. */
letter-spacing: -0.4px;
line-height: 1.02;
/* Branco, não laranja: a este corpo o laranja da marca sobre a foto escura
vibra, e o laranja passa a marcar a linha do estado abaixo — uma cor de
acento por cabeçalho, não duas. */
color: #FFFFFF;
margin-bottom: 1px;
}
/* O estado do rio: segunda linha, laranja, o acento que a etiqueta tinha. */
#boletim-card .boletim-hero-headline {
font-size: 1.12rem;
font-weight: 700;
letter-spacing: 0.1px;
line-height: 1.3;
color: var(--supporte-orange);
}
/* ==========================================================================
BOLETIM — FAIXA DE INDICADORES COM MAIS PESO E COM SÍMBOLOS
A faixa é o bloco que responde "onde está o rio agora" e era o que menos
pesava do card: rótulos de 11,5px e vereditos de 17,6px, mais pequenos que os
números das tabelas abaixo. Sobe um passo em tudo.
========================================================================== */
#boletim-card .b2-panel--full .b2-cell-label {
font-size: 0.76rem;
letter-spacing: 0.3px;
}
#boletim-card .b2-panel--full .b2-cell-verdict {
font-size: 1.28rem;
font-weight: 800;
}
/* A excepção de corpo desta célula (1,02rem contra 1,28rem das outras) saiu:
o valor voltou a ser UMA palavra ("ACELERANDO") e a palavra "Vazante" mudou
para o rótulo. Quatro células, um corpo. */
#boletim-card .b2-panel--full .b2-cell-big { font-size: 2.1rem; }
#boletim-card .b2-panel--full .b2-cell-big .b2-unit { font-size: 0.95rem; }
/* A seta desce de 1,6rem para 1,15em DO TEXTO ao lado dela: em `em` ela cresce
com a palavra e nunca volta a ser reajustada à mão, e a 1,6rem absolutos era
maior do que a própria palavra que qualifica. */
#boletim-card .b2-panel--full .b2-cell-arrow { font-size: 1.15em; }
/* --- UMA LINHA DE VALOR PARA AS QUATRO CÉLULAS ---
Auditoria da faixa na página viva: os quatro valores começavam a 21,8 / 19,8 /
19,8 (seta) e 22,7 (palavra) / 21,8 px do topo da célula, com margens de topo
de 4px em duas células e 2px nas outras. Quatro alturas de linha diferentes
(18,8 / 37 / 29,4 / 23,5 px) davam quatro linhas de base diferentes — era isto
que fazia a faixa ler-se como quatro caixas soltas.
A caixa do valor passa a ter a MESMA altura em todas (a da cota, que é a mais
alta e manda), e o conteúdo centra-se nela. Assim as palavras pequenas ficam
alinhadas com o número grande em vez de penduradas no topo, e a nota da quarta
célula começa sempre à mesma altura. */
#boletim-card .b2-panel--full .b2-cell-verdict,
#boletim-card .b2-panel--full .b2-cell-big {
display: flex;
align-items: center;
justify-content: center;
min-height: 37px;
margin-top: 4px;
}
/* Símbolo monocromático ao lado do veredito. Dimensionado em `em`, logo cresce
com o texto que acompanha e nunca precisa de ser reajustado à mão.
`currentColor` em vez de uma cor própria: é o que faz o símbolo tomar o tom do
estado (verde em NORMAL, vermelho em EM VIGOR) sem uma linha de JS. */
#boletim-card .b2-cell-icon {
width: 1.05em;
height: 1.05em;
flex: 0 0 auto;
vertical-align: -0.1em;
margin-right: 5px;
/* O traço do SVG é declarado em unidades do viewBox 24x24; a 0,95em de
~20px, 2.2 dá uma linha de ~1,8px — o mesmo peso visual do texto a 800. */
}
/* O veredito com ícone deixa de ser um bloco de texto e passa a ser uma linha
de dois itens, para o glifo e a palavra ficarem centrados JUNTOS na célula. */
#boletim-card .b2-cell-verdict:has(> .b2-cell-icon) {
display: flex;
align-items: center;
justify-content: center;
}
/* --- Legenda visual do gráfico do boletim. Flex, nunca grid: dentro do
#boletim-card o html2canvas não resolve CSS Grid (ver nota no topo do
bloco do boletim). As amostras são bordas e blocos sólidos, sem gradiente
nem color-mix, pelas mesmas razões de captura. As cores vêm inline do JS,
da paleta do gráfico, para legenda e curvas nunca divergirem. --- */
.b2-chart-legend {
/* UMA linha, centrada (pedido 2026-08-24). nowrap é deliberado: a legenda
tem de caber, e o que garante isso são os rótulos curtos — deixar quebrar
esconderia um rótulo comprido de mais em vez de o expor. Medido a 770px
de largura útil: os seis itens somam ~676px + 70px de vãos. */
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 0 14px;
margin: 5px 0 0;
padding-top: 6px;
border-top: 1px solid var(--border-color);
font-family: var(--font-body);
font-size: 0.64rem;
line-height: 1.35;
color: var(--text-secondary);
}
.b2-legend-item {
display: flex;
align-items: center;
white-space: nowrap;
}
.b2-legend-swatch {
display: flex;
align-items: center;
flex: 0 0 auto;
width: 18px;
margin-right: 5px;
}
/* Amostra de linha = só a borda de cima de um span sem altura. Um par de
segmentos lado a lado mostra que a categoria tem dois tons (o ano mais
recente é o mais forte), o que a nota de texto não conseguia dizer. */
.b2-legend-seg {
display: block;
flex: 1 1 0;
height: 0;
}
.b2-legend-block {
display: block;
width: 18px;
height: 9px;
border-radius: 2px;
}
.b2-legend-item--note {
color: var(--text-secondary);
opacity: 0.85;
}
#boletim-card .b2-chart-legend {
font-size: 0.64rem;
gap: 0 14px;
}
/* ============================================================
RODAPÉ DE PRAZOS DO GRÁFICO DA VAZANTE (página Secas)
============================================================
A primeira versão disto era um cartão grande, igual nas duas páginas, posto
entre os indicadores e os gráficos: repetia os mesmos números e lia-se como
algo enfiado à força na página. Agora é o rodapé do gráfico que já desenha as
três linhas — altura de uma linha de texto, tipografia de legenda, sem caixa
nem borda própria, porque não é um painel: é a legenda do que está acima. */
.chart-deadlines {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 18px;
padding: 8px 4px 0 4px;
margin-top: 2px;
border-top: 1px solid var(--border-color);
font-size: 0.72rem;
color: var(--text-secondary);
/* Não encolhe nem cresce: o gráfico acima é que absorve a altura sobrante
do cartão (ver .chart-card, flex column). */
flex: 0 0 auto;
}
.chart-deadlines:empty {
display: none;
}
.cd-item {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
/* Limiar já cruzado é facto, não prazo — perde ênfase para os que faltam. */
.cd-item--past { opacity: 0.5; }
.cd-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex: 0 0 auto;
}
.cd-dot--aten { background: var(--status-restricted); }
.cd-dot--crit { background: var(--status-critical); }
/* A taxa de seca não é faixa de profundidade, é a regra de cobrança: marca
neutra, igual à linha mais grossa do gráfico. */
.cd-dot--lws { background: var(--text-primary); }
.cd-name { color: var(--text-secondary); }
.cd-eta {
font-family: var(--font-mono, 'Fira Code', monospace);
font-weight: 600;
color: var(--text-primary);
}
/* Empurrada para a direita: é a fonte, não um dos prazos. */
.cd-note {
margin-left: auto;
font-size: 0.66rem;
opacity: 0.7;
font-style: italic;
}
/* A nota de fonte só cabe na MESMA linha dos três prazos em ecrãs largos; o
cartão do gráfico tem cerca de metade da largura da janela. Abaixo de 1400px
ela cairia sozinha numa segunda linha, o que a faz parecer um dado solto. É
atribuição, não dado: sai. A mesma atribuição continua no boletim e no
rodapé do card. */
@media (max-width: 1400px) {
.cd-note { display: none; }
}
/* ======================================================================
COMUNICADO SECA — documento institucional para clientes (view-comunicado)
======================================================================
PALETA FIXA, NÃO TOKENS DE TEMA. Todas as outras views usam
var(--card-bg)/var(--text-primary) e mudam com o botão de tema. Esta não:
o comunicado sai como PNG e como PDF para a base de clientes, e o
documento tem de ser idêntico venha de que máquina vier. Se herdasse os
tokens, o operador que estivesse em modo escuro exportaria uma carta
preta para os clientes. Os hexadecimais abaixo são os mesmos valores da
marca (#F37021 laranja, #58595B chumbo) e do comunicado v8 (#2A2D33
tarja escura), escritos à mão de propósito.
LAYOUT 100% FLEXBOX, sem CSS Grid: o html2canvas quebra grid, e este card
é alvo de captura (mesma restrição do .boletim).
====================================================================== */
.comunicado {
/* Mais largo que o .boletim (820px) porque é um documento de texto
corrido com tabelas de cinco colunas, não um painel de indicadores.
860px é a largura em que a tabela de lead time cabe sem apertar a
coluna de rota. */
width: 860px;
max-width: 100%;
margin: 0 auto 30px auto;
background: #FFFFFF;
color: #2A2D33;
border-radius: 6px;
/* overflow:hidden é o que faz a tarja escura e a capa respeitarem o
border-radius do card. Combinado com flex-shrink por omissão (1), porém,
era também o que CORTAVA o documento: .dashboard-view é um contentor
flex-column, o card é um item, e o item encolhia para a altura da
viewport levando o overflow:hidden a esconder tudo abaixo dela (medido:
3759px de conteúdo dentro de 899px de card). O .boletim não sofre disto
só porque não tem overflow:hidden — o conteúdo transborda visível.
flex:0 0 auto impede o encolhimento e mantém os cantos arredondados. */
overflow: hidden;
flex: 0 0 auto;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
font-family: var(--font-body);
display: flex;
flex-direction: column;
}
/* ---- 1. TARJA DE MARCA ---- */
.cm-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: #2A2D33;
padding: 16px 34px;
border-bottom: 3px solid #F37021;
}
.cm-topbar-brand {
display: flex;
align-items: center;
gap: 12px;
}
/* Altura fixa + width:auto é seguro num