/* Cabeçalho e rodapé da campanha.
 *
 * Cores só por token --ur-* (TOKENS.md): o fundo é a superfície de card e a
 * borda de baixo do cabeçalho é a cor de destaque do modelo escolhido — é o
 * que a referência pede e o que faz a tela acompanhar Temas V2.
 */

/* ── Cabeçalho ────────────────────────────────────────────────────── */

.ur-chd {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--ur-card, #ffffff);
  color: var(--ur-tx, #111111);
  /* A linha de destaque que fecha o cabeçalho. */
  border-bottom: 2px solid var(--ur-accent, #16a34a);
  font-family: var(--ur-font, Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif);
}

.ur-chd__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

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

/* O logo fica centrado: a grade reserva a mesma largura dos dois lados. */
.ur-chd__brand {
  display: grid;
  place-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.ur-chd__brand img {
  max-height: 32px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.ur-chd__nome {
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Bloco superior contínuo ──────────────────────────────────────────
   O corpo da tela é um flex com gap de 8px, mas o herói, a faixa "Meus
   Números" e a barra de progresso formam UM bloco só (ajuste #769): o
   título sai de cima da foto e vira uma faixa que emenda com os dois.
   Sem isto o gap os separa e o bloco aparece quebrado.

   A regra existia mas NUNCA valeu: campanha/topo.css:184 traz
   `.ur-topo-progresso { margin-top: 0 !important }`, e o !important vencia
   esta compensação. A barra ficava 8px solta abaixo do "Meus Números" na
   página da campanha (medido na /campanha/max-premios).

   O escopo é filho direto do `.body` porque é ele o flex com o gap: na
   escolha manual os widgets ficam dentro do `.app-main`, que é block, e a
   compensação sobreporia a barra ao "Meus Números". */

.ur-cpg .body > .ur-topo-bloco + .ur-topo-progresso {
  margin-top: -8px !important;
}

/* O rodapé encosta no fim do conteúdo, sem o gap do corpo. */
.ur-cpg .body > .ur-cft {
  margin-top: 0;
}

/* Filhos do flex da campanha: sem isto, um widget com min-content largo
   (título de prêmio, chip de ganhador) estica a página no iPhone. */
.ur-cpg .body > *,
.ur-cpg .ur-stack > * {
  min-width: 0;
  max-width: 100%;
}

/* "Meus Números" é um <a>, e `.ur-mn a { color: inherit }` (shell.css) tem a
   mesma especificidade que `.ur-topo__mine` e carrega depois — o texto
   herdava #111111 e sumia no fundo preto da faixa. */
.ur-cpg .ur-topo__mine,
.ur-cpg a.ur-topo__mine {
  color: var(--tema-campaign-tab-text, #ffffff);
}

/* Cards do legado que ainda aparecem na tela (o "Quanto mais cotas" e os
   avisos de status). A cor deles vinha de --incrivel-cardBg, emitida por
   set-custom-style.php — que não roda em tela de documento próprio, e o
   card saía sem fundo. As chaves do Personalizar Temas seguem valendo;
   o token do modelo é o padrão. */
.ur-cpg .app-card,
.ur-cpg .app-card.card {
  background-color: var(--tema-mais-cotas-bg, var(--incrivel-cardBg, var(--ur-card, #ffffff)));
  color: var(--tema-mais-cotas-text, var(--incrivel-cardColor, var(--ur-tx, #111111)));
  border: 0;
  border-radius: 8px;
}

/* O card de ganhadores tem cor própria (--ur-ok) e não entra na regra acima. */
.ur-cpg .app-card.ur-gw {
  background: var(--ur-ok, #16a34a);
  color: #ffffff;
}

/* "Quanto mais cotas, mais chances de ganhar!" — o `.hint` da referência:
   caixa compacta, texto centrado, raio maior. O padding vinha do
   `.card-body` do Bootstrap, que esta tela não carrega, e o texto encostava
   nas bordas; o <p> ainda trazia a margem de 16px do user-agent. */
.ur-cpg .app-card.tema-mais-cotas {
  border-radius: 16px;
}

.ur-cpg .app-card.tema-mais-cotas .card-body {
  padding: 8px 12px;
}

.ur-cpg .app-card.tema-mais-cotas p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

/* base.css crava `.custom-image { height: 450px !important }`, do layout
   antigo. A foto segue o aspect-ratio do formato escolhido (1:1, 16:11 ou
   4:5 — ver topo.css), e a diferença virava um vão branco entre a imagem e
   o título. Aqui o slide volta a ter a altura do seu conteúdo. */
.ur-cpg .ur-hero__banner .custom-image,
.ur-cpg .ur-hero__banner .carousel-item {
  height: auto !important;
}

/* ── Rodapé ───────────────────────────────────────────────────────── */

.ur-cft {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 28px 16px 24px;
  background: var(--ur-card, #ffffff);
  color: var(--ur-tx, #111111);
  text-align: center;
  font-family: var(--ur-font, Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif);
}

.ur-cft__logo {
  max-height: 34px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
}

.ur-cft__dir {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  font-weight: 600;
  color: var(--ur-mu, #5e5e57);
}

.ur-cft__tit {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ur-cft__link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ur-tx, #111111);
  font-size: 13px;
  text-decoration: none;
}

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

/* ── Utilitários do Bootstrap que o legado ainda usa ───────────────────
   O ranking por evento (pages/products/manual_choice/ranking_event.php,
   `enable_ranking_cotas`) é markup do numbers.php antigo: monta o cartão
   inteiro com utilitários do Bootstrap. Eles vinham do style.css, que uma
   tela de documento próprio não carrega — medido: `d-flex` saía
   `display: block`, `text-center` saía `start` e o `.card-body` sem padding,
   ou seja, o bloco DESMONTAVA.

   Só o que esse markup usa de fato, escopado em .ur-mn para não vazar para
   as telas que carregam o Bootstrap inteiro. O arquivo não pode ser movido
   nem reescrito: pages/products/numbers.php também o inclui. */

.ur-mn .d-flex { display: flex; }
.ur-mn .flex-column { flex-direction: column; }
.ur-mn .align-items-center { align-items: center; }
.ur-mn .justify-content-between { justify-content: space-between; }
.ur-mn .text-center { text-align: center; }
.ur-mn .text-uppercase { text-transform: uppercase; }
.ur-mn .font-weight-bold { font-weight: 700; }
.ur-mn .font-weight-600 { font-weight: 600; }
.ur-mn .font-xss { font-size: 0.8em; }
.ur-mn .py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.ur-mn .mt-2 { margin-top: 0.5rem; }
.ur-mn .mb-0 { margin-bottom: 0; }
.ur-mn .mb-1 { margin-bottom: 0.25rem; }
.ur-mn .mb-2 { margin-bottom: 0.5rem; }
.ur-mn .mb-3 { margin-bottom: 1rem; }

/* Estes dois ficam no branco fixo de propósito: saem sobre o degradê
   vermelho que o próprio bloco pinta inline, não sobre a cor do tema. */
.ur-mn .text-white { color: #ffffff; }
.ur-mn .text-white-50 { color: rgba(255, 255, 255, 0.5); }
.ur-mn .text-muted { color: var(--ur-mu, #5e5e57); }

.ur-mn .card-body { flex: 1 1 auto; padding: 10px; }
.ur-mn .app-title { font-size: 16px; font-weight: 700; }
.ur-mn .app-title-desc { font-size: 13px; color: var(--ur-mu, #5e5e57); }

/* O TOP 5 é uma <table> do Bootstrap. Sem as regras dele a tabela sai sem
   espaçamento e sem separador. */
.ur-mn .table-responsive { overflow-x: auto; }
.ur-mn .table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.ur-mn .table > :not(caption) > * > * { padding: 0.5rem; }
.ur-mn .table-dark { color: #ffffff; }
.ur-mn .table-dark > :not(caption) > * > * { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

/* O cartão do Maior Comprador tem cor PRÓPRIA (o vermelho de style.css:11770),
   não a do tema: é o que faz o texto branco e o `text-white-50` acima terem
   contraste. A regra `.ur-cpg .app-card` genérica o pintava de cinza. */
.ur-mn .app-card.maior-comprador-card {
  overflow: hidden;
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(220, 53, 69, 0.3);
}

.ur-mn .top-compradores .item-content { display: flex; }