/**
 * 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 dentro do preenchimento, à direita.
 *
 * 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 número mora dentro do preenchimento, encostado à direita. Em 0% a
   largura percentual daria zero e o texto sumiria, então o min-width segura
   o espaço de "0%" — daí a largura ser `max(N%, 3.25rem)`, não `N%`. */
.ur-cp-progress__fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 3.25rem;
  height: 100%;
  padding: 0 8px;
  background: var(--ur-accent, #5fe000);
  border-radius: 6px;
  box-sizing: border-box;
  transition: width .3s ease-in-out;
}

/* Sobre o acento, a tinta é a do acento — no Claro-Rosa o texto sai branco,
   e não preto como ficaria com --ur-tx. */
.ur-cp-progress__label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--ur-accent-ink, #0a1600);
}

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