/* Complemento ao estilo do sistema de provas: só o que é específico daqui.
   Nada de cor nova — as variáveis são as mesmas (--azul, --verde, --vermelho,
   --ambar), para as duas telas parecerem o mesmo sistema. */

.grade-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* número grande com rótulo em cima, o bloco de indicador do painel */
.indicador .rotulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-fraca); font-weight: 600;
}
.indicador .valor { font-size: 1.5rem; font-weight: 650; line-height: 1.2; }
.indicador .valor.positivo { color: var(--verde); }
.indicador .valor.negativo { color: var(--vermelho); }
.indicador .detalhe { font-size: .78rem; color: var(--tinta-fraca); margin-top: 2px; }

/* o critério de ordenação de cada seção da vitrine, sempre visível */
.criterio {
  font-size: .8rem; color: var(--tinta-fraca); border-left: 3px solid var(--linha);
  padding: 2px 0 2px 10px; margin: 6px 0 12px;
}
.criterio strong { color: var(--tinta); }

.quadrante { font-size: .75rem; font-weight: 600; white-space: nowrap; }
.q-boa-barata  { color: var(--verde); }
.q-boa-cara    { color: var(--ambar); }
.q-ruim-barata { color: var(--ambar); }
.q-ruim-cara   { color: var(--vermelho); }

.lacuna { color: var(--tinta-fraca); font-style: italic; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.positivo { color: var(--verde); }
.negativo { color: var(--vermelho); }

.caixa-grafico { position: relative; height: 340px; }
.caixa-grafico.alta { height: 460px; }
.caixa-grafico.baixa { height: 170px; }

/* tabela compacta para as listas longas */
table.compacta th, table.compacta td { padding: 5px 8px; font-size: .86rem; }

.fonte-dado {
  font-size: .75rem; color: var(--tinta-fraca);
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px;
}
.fonte-dado span { white-space: nowrap; }

/* ------------------------------------------------------------------------- */
/* `.rotulo` fica, mas não como compatibilidade: é o rótulo pequeno em versal que o
   desenho usa solto, fora de `.indicador` (na ficha do ativo e no painel). As outras
   classes daquela ponte — .nota, .tag, .bom, .ruim, .alerta, .suave, .dado, .linha e
   .grade.g2/g3/g4 — saíram em 31/10/2026, quando previsoes, diario e vazio foram
   reescritas no visual do sistema de provas e nenhum template mais as usava.        */
.rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
          color: var(--tinta-fraca); font-weight: 600; }

/* O .aviso do painel antigo não tinha variante; fica com a de atenção. */
main .aviso:not([class*="aviso-"]) {
  background: var(--ambar-fundo); border-color: var(--ambar);
}

/* Tela de preferências: caixa de marcar com rótulo e explicação ao lado. O `label`
   global do sistema empilha campo e rótulo; aqui a caixa fica À ESQUERDA do texto. */
label.escolha {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 11px; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel); margin: 0 0 8px 0; font-weight: 400;
}
label.escolha input[type=checkbox] { margin-top: 3px; flex: 0 0 auto; }
label.escolha > span { display: block; }
label.escolha strong { display: block; }
label.escolha .pequeno { display: block; margin-top: 2px; line-height: 1.45; }