/* O que e so do painel de social, por cima do estilo.css do financeiro.
   Mesma regra de la: nenhuma cor literal fora do bloco de tokens, e o coral da
   marca nunca colore numero. */

:root {
  /* A serie do alcance diario. Validada com o validate_palette da skill de
     dataviz contra as duas superficies: o --azul do financeiro passa no claro,
     mas no escuro fica claro demais para marca de dado, entao a serie tem o
     proprio passo no escuro. */
  --serie: #2159c7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --serie: #5a94ea; }
}
:root[data-tema="escuro"] { --serie: #5a94ea; }

.filtros .botao-fraco { text-decoration: none; }

.grupo h2 { margin-top: 34px; }
.sub-grupo { font-size: 13px; font-weight: 600; margin: 22px 0 10px; color: var(--fraco); }

/* KPI sem numero: o estado no lugar do valor, menor e apagado, para nao
   parecer um numero. O motivo fica fechado no `explica`. */
.cartao.sem-dado { background: var(--painel-2); box-shadow: none; }
.cartao.sem-dado .valor.estado { font-size: 15px; font-weight: 500; color: var(--fraco); letter-spacing: 0; }
.cartao .explica { margin-top: 6px; }
.cartao .explica > div { font-size: 12.5px; }

.grafico { display: block; width: 100%; height: auto; }
.grafico .g-alcance { fill: var(--serie); }
.grafico .g-alcance:hover { opacity: 0.8; }
.grafico .g-sem-dado { fill: var(--borda-forte); }

.destaque h3 { font-size: 13px; margin: 0 0 8px; }
.destaque .lista-simples li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }

/* Sair e um POST (form), com cara de link do rodape da lateral. */
.form-sair { margin: 0; display: inline; }
.link-sair { background: none; border: 0; padding: 0; color: var(--fraco); font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.link-sair:hover { color: var(--texto); }