/* Listagem de campanhas (/campanhas, /concluidas, /em-breve).
 *
 * Cores só por token --ur-* (TOKENS.md). A tela antiga cravava hex e puxava
 * --incrivel-* de set-custom-style.php, que uma tela de documento próprio não
 * carrega: o cabeçalho saía verde e a faixa roxa mesmo com o modelo de cor
 * em dourado.
 */

.ur-cl {
  font-family: var(--ur-font, Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* ── Título ───────────────────────────────────────────────────────── */

.ur-cl__topo {
  padding: 16px 4px 4px;
}

.ur-cl__titulo {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
  color: var(--ur-tx, #111111);
}

.ur-cl__desc {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ur-mu, #5e5e57);
}

/* ── Filtros ──────────────────────────────────────────────────────── */

.ur-cl__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.ur-cl__pill {
  flex: 1 1 auto;
  padding: 9px 14px;
  border: 1px solid var(--ur-line, #e1e1d9);
  border-radius: 99px;
  background: var(--ur-card, #ffffff);
  color: var(--ur-tx, #111111);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  /* O drawer do menu já ensinou: width/padding sem border-box estoura. */
  box-sizing: border-box;
}

.ur-cl__pill:hover,
.ur-cl__pill:focus-visible {
  border-color: var(--ur-accent, #16a34a);
}

.ur-cl__pill.is-on {
  border-color: transparent;
  background: var(--ur-accent, #16a34a);
  color: var(--ur-accent-ink, #ffffff);
}

/* ── Card ─────────────────────────────────────────────────────────── */

.ur-cl__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  background: var(--ur-card, #ffffff);
  color: var(--ur-tx, #111111);
  text-decoration: none;
  box-sizing: border-box;
}

.ur-cl__item:hover,
.ur-cl__item:focus-visible {
  background: var(--ur-row, #f0f0eb);
}

/* A foto tem tamanho fixo: o texto é que se adapta, senão um nome longo
   espreme a imagem até sumir. */
.ur-cl__foto {
  flex: 0 0 90px;
  width: 90px;
  height: 90px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--ur-row, #f0f0eb);
}

.ur-cl__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* min-width:0 num filho de flex é o que deixa o ellipsis funcionar: sem
   isso o item cresce até o conteúdo e empurra o card para fora da tela. */
.ur-cl__info {
  flex: 1 1 auto;
  min-width: 0;
}

.ur-cl__nome {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ur-tx, #111111);
}

.ur-cl__sub {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--ur-mu, #5e5e57);
  /* Subtítulo longo vira duas linhas e para; o card não cresce sem limite. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ur-cl__selo {
  margin-top: 6px;
}

/* O selo vem com as classes do Bootstrap (badge bg-success…), que esta tela
   não carrega — sem isto ele sai como texto solto. Mesma solução do herói da
   campanha (campanha/topo.css:92): a cor é a do modelo, não a do Bootstrap. */
.ur-cl .ur-cl__selo .badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--ur-accent, #16a34a) !important;
  color: var(--ur-accent-ink, #ffffff) !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

/* Campanha encerrada ou ainda sem data não disputa atenção com as que estão
   no ar: selo neutro, não na cor de destaque. */
.ur-cl .ur-cl__selo .badge.bg-dark {
  background: var(--ur-off-soft, rgba(138, 138, 132, 0.16)) !important;
  color: var(--ur-mu, #5e5e57) !important;
}

/* O 🔥 entra pelo CSS: a string de cada selo é o que
   tests/helpers/TemaAdquiraTest.php trava, e o emoji é decoração. */
.ur-cl .ur-cl__selo .badge-adquira::after,
.ur-cl .ur-cl__selo .badge-status-1::after {
  content: " 🔥";
}

/* ── Vazio ────────────────────────────────────────────────────────── */

.ur-cl__vazio {
  margin: 0;
  padding: 24px 12px;
  border-radius: 8px;
  background: var(--ur-card, #ffffff);
  color: var(--ur-mu, #5e5e57);
  font-size: 14px;
  text-align: center;
}

/* ── Partes opcionais do card (vitrine da home e listagem) ──────────
   Medidas tiradas do protótipo com CDP: foto 96x96 raio 6px, barra de
   14px com raio 99px e a porcentagem dentro, botão 11px/700. As cores
   saem dos tokens do modelo escolhido — no Escuro/Dourado o resultado é
   idêntico à referência. */

.ur-cl__barra {
  position: relative;
  height: 14px;
  margin-top: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--ur-track, #2c2820);
}

/* O <i> é a parte preenchida; o texto fica dentro dela, como na
   referência. `min-width` impede que a porcentagem seja cortada quando a
   campanha mal começou a vender. */
.ur-cl__barra i {
  display: block;
  min-width: 34px;
  height: 100%;
  border-radius: 99px;
  background: var(--ur-progress, var(--ur-accent, #16a34a));
  color: var(--ur-accent-ink, #111111);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 14px;
  text-align: right;
  padding-right: 6px;
  box-sizing: border-box;
}

.ur-cl__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.ur-cl__preco {
  font-size: 12px;
  line-height: 16px;
  color: var(--ur-mu, #5e5e57);
}

.ur-cl__preco b {
  color: var(--ur-tx, #111111);
  font-weight: 700;
}

.ur-cl__cta {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--ur-accent, #16a34a);
  color: var(--ur-accent-ink, #ffffff);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
}