/**
 * Promoção Cota (helpers/ur_campanha_promo_cota.php).
 *
 * O widget vivia de atributos style="" em cada elemento, com as chaves
 * --tema-promo-* do picker antigo. Passa aos tokens do TOKENS.md, como as
 * demais telas novas da campanha.
 *
 * As classes .promocao-cota-wrap, .pc-countdown-item e os ids
 * #pc-countdown-* continuam: são contrato do JS do contador e do tema SP
 * (assets/css/sp-campaign.css).
 */

.ur-pc {
  display: grid;
  gap: 8px;
  justify-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 8px 0;
  padding: 14px 12px;
  border-radius: 8px;
  text-align: center;
  background: var(--ur-card, #ffffff);
  color: var(--ur-tx, #111111);
  border: 1px solid var(--ur-line, #e1e1d9);
}

.ur-pc__title {
  margin: 0;
  font-size: 16px;
  line-height: 21px;
  font-weight: 800;
  text-wrap: balance;
}

.ur-pc__sub {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--ur-mu, #5e5e57);
  text-wrap: balance;
}

/* O cronômetro em quatro caixinhas saiu: o prazo agora é a barra
   compartilhada de assets/css/campanha/prazo.css, no padrão da TELA 03. */

/* ── Líderes ──────────────────────────────────────────────────────── */

.ur-pc__cols {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

/* Tipo 2 (maior + menor) divide a linha; tipo 1 ocupa tudo. */
.ur-pc__cols[data-ur-pc-cols="2"] {
  grid-template-columns: 1fr 1fr;
}

.ur-pc__col {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 8px;
  background: var(--ur-row, #f0f0eb);
}

.ur-pc__lb {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ur-mu, #5e5e57);
}

/* O número é o destaque do widget: acento do modelo. */
.ur-pc__num {
  padding: 4px 16px;
  border-radius: 8px;
  background: var(--ur-accent, #e3b243);
  color: var(--ur-accent-ink, #111111);
  font-size: 20px;
  line-height: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ur-pc__nome {
  max-width: 100%;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ur-pc__val {
  font-size: 11px;
  font-weight: 600;
  color: var(--ur-mu, #5e5e57);
  font-variant-numeric: tabular-nums;
}

.ur-pc__empty {
  margin: 0;
  padding: 6px;
  font-size: 13px;
  color: var(--ur-mu, #5e5e57);
}

/* O card é um grid centrado (justify-items: center), então os chips de data
   precisam esticar para casar com a largura das colunas acima. */
.ur-pc .ur-pz,
.ur-pc .ur-pz__dates {
  justify-self: stretch;
}