/* ==========================================================================
   Termômetro de voto · fatia F25
   --------------------------------------------------------------------------
   Camada própria (10_*), acrescentada ao manifesto com UMA linha, para não
   disputar o meio de 03_componentes.css com as outras fatias.

   O cartão tem um trabalho: fazer o assessor entender, em dois segundos, o QUE
   o sistema acha, POR QUE acha e que a decisão continua sendo dele. Daí:

   • a faixa colorida à esquerda repete a cor da qualificação sugerida — cor
     nunca carrega o sentido sozinha, o rótulo ao lado diz a mesma coisa em
     palavras (a etiqueta traz ícone + texto);
   • a nota é grande e a barra é literal: 72 desenhados como 72% de uma régua.
     Um número solto não dá noção de distância do limiar;
   • a frase do "porque" tem o mesmo destaque do número. Uma nota sem
     justificativa é um oráculo, e oráculo ninguém audita.
   ========================================================================== */

.termometro { border-left: 4px solid var(--cor-borda-forte); }

.termometro--sucesso { border-left-color: var(--sgp-sucesso); }
.termometro--info    { border-left-color: var(--sgp-info); }
.termometro--perigo  { border-left-color: var(--sgp-perigo); }
.termometro--vazio,
.termometro--calculando { border-left-color: var(--cor-borda-forte); }

.termometro__rotulo {
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}

/* -- A nota ---------------------------------------------------------------- */
.termometro__nota {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-forte);
  line-height: var(--altura-apertada);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
}

.termometro__nota-max {
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  color: var(--cor-texto-fraco);
}

/* -- A régua de 0 a 100 ---------------------------------------------------- */
.termometro__barra {
  position: relative;
  height: 8px;
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-afundado);
  overflow: hidden;
}

.termometro__barra-preenchida {
  display: block;
  height: 100%;
  border-radius: var(--raio-pilula);
  background: currentColor;
  /* A largura vem no `style` da view: é DADO (a nota da ficha), não estilo —
     não há classe possível para 101 valores. */
}

.termometro--sucesso .termometro__barra-preenchida { color: var(--sgp-sucesso); }
.termometro--info    .termometro__barra-preenchida { color: var(--sgp-info); }
.termometro--perigo  .termometro__barra-preenchida { color: var(--sgp-perigo); }

/* -- A justificativa ------------------------------------------------------- */
.termometro__porque {
  font-size: var(--texto-md);
  color: var(--cor-texto);
  line-height: var(--altura-normal);
}

.termometro__assinatura {
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}

/* -- O filtro na coluna da esquerda ---------------------------------------- */
.termometro-filtro__nota {
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}