/* ============================================================================
   Análise de Arbitragem — CSS da página /arbitragem/ (hub). Bloco .br-arb-*
   COPIADO VERBATIM de e:\cartomante_provaveis\style.css (L4600-4641 + @media).
   SEGUE O TEMA da plataforma (claro/escuro): cores re-mapeadas pros tokens do hub
   no bloco final (TEMA-AWARE). Header roxo (#2D2E6E) mantido (bom nos dois temas).
   ============================================================================ */

/* moldura da página + cabeçalho (via tokens → seguem o tema) */
.br-page { max-width: min(96vw, 1080px); margin: 0 auto; padding: 18px 16px 64px; }
.br-page .section__header { text-align: center; max-width: 680px; margin: 0 auto 18px; }
.br-page .section__title { font-size: clamp(22px, 3.2vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; }
.br-page .section__desc { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.confrontos__loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 16px; color: var(--ink-soft); }
.catalogo__spinner { width: 34px; height: 34px; border: 3px solid rgba(77,82,175,.25); border-top-color: #4D52AF; border-radius: 50%; animation: brSpin 1s linear infinite; }
@keyframes brSpin { to { transform: rotate(360deg); } }
.copa-grupo-card__placeholder { padding: 30px 16px; text-align: center; color: var(--ink-soft); font-size: 14px; }

/* ══════ .br-arb-* VERBATIM de style.css L4600-4641 ══════ */
/* ── Análise de Arbitragem (aba BR) ─────────────────────────── */
.br-arb-wrap { background:#F8FAFC; border-radius:10px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; scrollbar-width:thin; scrollbar-color:#C7CBE0 transparent; box-shadow:0 2px 12px rgba(0,0,0,.18); }
.br-arb-wrap::-webkit-scrollbar { height:8px; }
.br-arb-wrap::-webkit-scrollbar-thumb { background:#C7CBE0; border-radius:8px; }
.br-arb { width:100%; border-collapse:collapse; font-size:13px; color:#1E293B; min-width:760px; }
.br-arb thead th {
  background:#2D2E6E; color:#fff; font-weight:700; font-size:11px;
  padding:12px 8px; text-transform:uppercase; letter-spacing:.5px;
  text-align:center; cursor:pointer; user-select:none;
  transition:background .12s;
  white-space:nowrap;
}
.br-arb thead th:hover { background:#3a3b85; }
.br-arb thead th.is-active { background:#F5921A; color:#1E293B; }
.br-arb tbody td { padding:10px 8px; text-align:center; border-bottom:1px solid #EEF2F7; }
.br-arb tbody tr:last-child td { border-bottom:none; }
.br-arb tbody tr:hover { background:rgba(245,146,26,.07); }
.br-arb-conf-cell { text-align:left !important; padding-left:14px !important; min-width:300px; }
/* Grid 5 colunas: nome mandante (1fr, dir) | escudo (auto) | × (auto) | escudo (auto) | nome visitante (1fr, esq).
   Garante escudos verticalmente alinhados entre linhas mesmo com nomes de tamanhos diferentes. */
.br-arb-conf {
  display:grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items:center;
  gap:6px;
}
.br-arb-team-name { font-weight:700; white-space:nowrap; }
.br-arb-team-name:first-child { justify-self:end;   text-align:right; }
.br-arb-team-name:last-child  { justify-self:start; text-align:left;  }
.br-arb-escudo { width:22px; height:22px; object-fit:contain; }
.br-arb-vs { color:#94A3B8; font-weight:700; margin:0 4px; }
.br-arb-arb-cell { text-align:left !important; padding-left:14px !important; min-width:200px; }
.br-arb-sub { font-size:11px; color:#64748B; margin-top:3px; font-weight:400; }
.br-arb-conf-cell .br-arb-sub { text-align:center; }
/* Primeira coluna (Confronto) fixa no scroll horizontal (mobile) */
.br-arb thead th:first-child { position:sticky; left:0; z-index:3; }
.br-arb-conf-cell {
  position:sticky; left:0; z-index:2;
  background:#F8FAFC;
  box-shadow:2px 0 5px rgba(0,0,0,.07);
}
.br-arb tbody tr:hover .br-arb-conf-cell { background:#F8F3EC; }

/* @media verbatim (L5775 + o trecho .br-arb do @media compartilhado L5839-5846) */
@media (max-width:700px) { .br-arb thead th { font-size:10px; padding:10px 4px; } .br-arb tbody td { padding:8px 4px; } }
@media (max-width:700px){
  .br-arb-team-name { display: none; }
  .br-arb-conf { grid-template-columns: auto auto auto; gap: 4px; justify-content: start; }
  .br-arb-escudo { width: 22px; height: 22px; }
  .br-arb-conf-cell { min-width: 100px; padding-left: 8px !important; }
  .br-arb-arb-cell { min-width: auto; padding-left: 6px !important; }
  .br-arb { font-size: 11px; }
  .br-arb thead th { font-size: 9px; padding: 8px 3px; }
  .br-arb tbody td { padding: 8px 3px; }
}

/* ============================================================================
   TEMA-AWARE — cores via tokens do hub (--ink/--ink-soft/--surface/--surface-2/
   --line) pra SEGUIR o tema (claro/escuro). Overrides no FIM (vencem por cascata).
   Em claro: card branco + texto escuro. Em escuro: card #1A1B3A + texto claro.
   ============================================================================ */
.br-arb-wrap { background: var(--surface); box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.br-arb { color: var(--ink); }
.br-arb tbody td { border-bottom-color: var(--line); }
.br-arb thead th.is-active { color: #fff; }   /* laranja = texto BRANCO (regra do ecossistema) */
.br-arb-conf-cell { background: var(--surface); }
.br-arb tbody tr:hover .br-arb-conf-cell { background: var(--surface-2); }
.br-arb-vs, .br-arb-sub { color: var(--ink-soft); }