/**
 * Barra de progresso da campanha (helpers/ur_campanha_progresso.php).
 *
 * Medidas da versão do automatic, a mais completa das quatro: 24px de
 * altura e raio 6px. O percentual fica centrado sobre a barra inteira.
 *
 * Cores por token (TOKENS.md): o trilho acompanha o card e o preenchimento
 * usa o acento do modelo escolhido em Temas V2. O legado pintava o trilho de
 * #ffffff fixo e o texto de #000 com halo branco — ilegível no tema escuro.
 */

.ur-cp-progress {
  position: relative;
  display: flex;
  height: 24px;
  overflow: hidden;
  background: var(--ur-card, #ffffff);
  border: 1px solid var(--ur-line, #e1e1d9);
  border-radius: 6px;
}

/* O preenchimento é só cor: o número não mora mais aqui dentro. Sem
   min-width, porque em 0% o número continua visível sobre o trilho. */
.ur-cp-progress__fill {
  min-width: 0;
  height: 100%;
  background: var(--ur-accent, #5fe000);
  border-radius: 6px;
  box-sizing: border-box;
  transition: width .3s ease-in-out;
}

/* Centrado na barra inteira. Com pouco vendido o número ficava espremido
   no canto esquerdo, dentro do preenchimento; agora fica no meio, sobre o
   trilho, com a tinta do texto comum. */
.ur-cp-progress__label {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  color: var(--ur-tx, #111111);
}

/* Passou do meio: o preenchimento cobre o número, então a tinta é a que
   vai sobre o acento — no Claro-Rosa o texto sai branco, e não preto como
   ficaria com --ur-tx. */
.ur-cp-progress--meio-cheio .ur-cp-progress__label {
  color: var(--ur-accent-ink, #0a1600);
}

@media (prefers-reduced-motion: reduce) {
  .ur-cp-progress__fill {
    transition: none;
  }
}