/* ============================================================
   DigiSat · Campanhas — estilos próprios do produto
   Carregar APÓS base.css e components.css (que vêm do Painel e
   devem permanecer idênticos aos de lá, para facilitar o sync).
   Aqui mora só o que o Painel não tem: bilhete, cards de campanha
   e o cabeçalho de coluna ordenável.
   ============================================================ */

/* O dourado sobrevive apenas na premiação (bilhete/pontuação).
   Todo o resto do chrome usa o azul #094d8d do Painel. */
:root {
  --ds-accent:       #f5a623;
  --ds-accent-hover: #d48c10;
}

/* ============================================================
   Bilhete — o número sorteável, elemento de identidade do produto
   ============================================================ */
.bilhete-badge {
  display: inline-block;
  font-size: 1rem;
  font-weight: 800;
  background: var(--ds-accent);
  color: #1a1a1a;
  border-radius: .5rem;
  padding: .18rem .65rem;
  letter-spacing: .1em;
  font-family: 'Poppins', "Courier New", monospace;
  line-height: 1.45;
  box-shadow: 0 2px 6px rgba(245, 166, 35, .35);
}

/* ============================================================
   Cards de campanha (grid de campanhas/lista.html)
   ============================================================ */
.campanha-img {
  height: 250px;
  object-fit: cover;
}

/* Teaser "em breve": a imagem real da campanha NÃO vai para o HTML —
   pelo inspecionar, o brinde ficaria visível. Borra-se um placeholder. */
.campanha-img-teaser {
  height: 250px;
  object-fit: cover;
  filter: blur(14px);
  transform: scale(1.05);
}

.campanha-img-placeholder {
  height: 250px;
  background: var(--sidebar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Avatar do ganhador no card e nas listas de resultado.
   Para 40px/72px use .avatar-sm/.avatar-lg (components.css). */
.avatar-ganhador {
  width: 36px;
  height: 36px;
  object-fit: cover;
  flex: 0 0 auto;
}
.avatar-xs {
  width: 28px;
  height: 28px;
  object-fit: cover;
  font-size: .7rem;
  flex: 0 0 auto;
}

/* Estado inicial da barra de força de senha (o JS assume a partir daqui) */
.w-0 { width: 0 !important; }

/* ============================================================
   Variações do split-screen de autenticação (.auth-* vem do base.css)
   ============================================================ */

/* Uma coluna só — para o cadastro, que é largo demais para o painel direito. */
.auth-wrap-single { grid-template-columns: 1fr; }

.auth-card-wide { max-width: 46rem; }

/* Numeral do passo-a-passo em core/regras.html */
.step-num {
  width: 32px;
  height: 32px;
  font-size: .85rem;
  flex: 0 0 auto;
}

/* ============================================================
   Cabeçalho de coluna ordenável
   Renderizado por {% th_ordem %} — ver core/templatetags/ordenacao.py
   ============================================================ */
.table th a.th-ordem {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}
.table th a.th-ordem:hover,
.table th a.th-ordem.ativo {
  color: #094d8d;
}

/* Seta neutra discreta: só a coluna ordenada tem indicador em destaque. */
.table th a.th-ordem .bi-arrow-down-up { opacity: .35; }
.table th a.th-ordem:hover .bi-arrow-down-up { opacity: .7; }

/* ============================================================
   Páginas de erro — errors/_corpo_erro.html
   O mesmo corpo é renderizado duas vezes: solto na área de conteúdo do
   app-shell (logado) e dentro do .auth-card de 25rem (visitante). Por isso
   o círculo tem variante reduzida e o numeral usa clamp() — precisa caber
   nos dois sem regra responsiva extra.
   O gradiente é o --sidebar-bg do base.css: mesma marca da sidebar e do login.
   ============================================================ */
.erro-marca {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--sidebar-bg);
  color: #fff;
  font-size: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 .75rem 1.5rem rgba(7, 24, 49, .22);
}

/* Dentro do cartão do visitante, onde a altura é mais disputada. */
.erro-marca-sm {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.5rem;
  box-shadow: 0 .5rem 1rem rgba(7, 24, 49, .18);
}

/* Numeral do código HTTP pintado com o gradiente da marca. */
.erro-numero {
  font-size: clamp(3rem, 10vw, 5.5rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.02em;
  background: var(--sidebar-bg);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}