/* Probabilidades — CSS /probabilidades/. .prob-tab__* VERBATIM style.css L6488-6565
   + .br-cob-toggle (sub-abas) + .obj-rank__table/.obj-empty. Tema-aware no fim. */

/* moldura da página + cabeçalho (via tokens → seguem o tema) + loading/vazio */
.br-page { max-width: min(96vw, 1080px); margin: 0 auto; padding: 18px 16px 64px; }
.br-page .section__header { text-align: center; max-width: 700px; 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; }

/* ══════ VERBATIM style.css ══════ */
/* Ranking */
/* Aba Probabilidades — tabela ordenável com heatmap nas %s */
.prob-tab__wrap { max-width: 760px; margin: 0 auto; overflow-x: auto; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.prob-tab__table { max-width: none; min-width: 520px; border-collapse: separate; border-spacing: 0; }
.prob-tab__table thead th { background: #fff; padding: 12px 10px; }
.prob-tab__table tbody td { padding: 8px 10px; vertical-align: middle; }
/* Zebra striping + hover */
.prob-tab__table tbody tr:nth-child(odd)  td:not(.prob-tab__pct) { background: #fff; }
.prob-tab__table tbody tr:nth-child(even) td:not(.prob-tab__pct) { background: #F8FAFC; }
.prob-tab__table tbody tr:hover td:not(.prob-tab__pct) { background: #EEF2FF; }
.prob-tab__table tbody tr:hover .prob-tab__pct { filter: brightness(1.1); }
/* Linhas clicáveis (têm data-partida-id) — cursor + leve indicador no hover */
.prob-tab__row--clickable { cursor: pointer; transition: transform .12s; }
.prob-tab__row--clickable:hover { transform: translateX(2px); }
.prob-tab__row--clickable:active { transform: translateX(0); }
.prob-tab__pos { text-align: center; color: #94A3B8; font-weight: 600; width: 36px; font-size: 12px; }
.prob-tab__table th.prob-tab__pct,
.prob-tab__table td.prob-tab__pct { text-align: center; width: 74px; }
.prob-tab__table td.prob-tab__pct { font-weight: 700; transition: filter .15s; }
.prob-tab__table td.prob-tab__pct strong { font-size: 13px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.prob-tab__table th.prob-tab__sortable { cursor: pointer; user-select: none; transition: background .15s, color .15s; }
.prob-tab__table th.prob-tab__sortable:hover { background: #e5e7eb; color: #2D2E6E; }
.prob-tab__clube { min-width: 160px; display: flex; align-items: center; gap: 10px; }
.prob-tab__escudo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.prob-tab__nome { font-size: 13px; color: #1F2937; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prob-tab__confronto { color: #475569; font-size: 12px; white-space: nowrap; }
.prob-tab__mando { display: inline-block; width: 18px; text-align: center; }

/* Linha por confronto (Over 1.5): formato placar TV
   [Mandante] [escudo]   ×   [escudo] [Visitante]
   Os times ficam próximos ao centro, simétricos. */
.prob-tab__confronto-cell {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-width: 280px;
}
.prob-tab__team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prob-tab__team strong { font-size: 13.5px; color: #1F2937; line-height: 1.2; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Mandante: nome → escudo (escudo encosta no ×) */
.prob-tab__team--mand { flex-direction: row-reverse; justify-content: flex-start; }
.prob-tab__team--mand strong { text-align: right; }
/* Visitante: escudo → nome (escudo encosta no ×) */
.prob-tab__team--vis { justify-content: flex-start; }
.prob-tab__x { color: #94A3B8; font-weight: 700; font-size: 16px; padding: 0 6px; }
/* Selo de resultado (jogo encerrado): ✓ verde se a aposta do mercado deu certo, ✗ vermelho se não. */
.prob-tab__result {
  display: inline-block; margin-left: 8px;
  font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.prob-tab__result--hit  { background: #DCFCE7; color: #15803D; }
.prob-tab__result--miss { background: #FEE2E2; color: #B91C1C; }
/* No formato placar (jogo aberto/over15) o selo vai numa linha própria, centralizado. */
.prob-tab__confronto-cell .prob-tab__result { grid-column: 1 / -1; justify-self: center; margin-left: 0; margin-top: 4px; }

@media (max-width: 600px) {
  /* tabelas de odds cabem na largura da tela — sem scroll horizontal no celular */
  .prob-tab__wrap { overflow-x: visible; }
  .prob-tab__table { min-width: 0; width: 100%; font-size: 12px; table-layout: fixed; }
  /* esconde a coluna de posição (#) pra ganhar espaço */
  .prob-tab__table thead th:first-child,
  .prob-tab__pos { display: none; }
  .prob-tab__table thead th { padding: 9px 5px; font-size: 11px; }
  .prob-tab__table tbody td { padding: 7px 5px; }
  .prob-tab__table th.prob-tab__pct,
  .prob-tab__table td.prob-tab__pct { width: 50px; }
  .prob-tab__table td.prob-tab__pct strong { font-size: 12px; }
  .prob-tab__clube { min-width: 0; gap: 6px; }
  .prob-tab__nome { font-size: 12px; }
  .prob-tab__escudo { width: 20px; height: 20px; }
  .prob-tab__confronto { font-size: 11px; }
  /* jogo aberto (over15): confronto com 2 times — compacto, nomes truncam com reticências */
  .prob-tab__confronto-cell { gap: 4px; min-width: 0; }
  .prob-tab__team { min-width: 0; }
  .prob-tab__team strong { font-size: 11.5px; max-width: 72px; }
  .prob-tab__x { padding: 0 3px; font-size: 13px; }
}
.br-cob-toggle { display:inline-flex; gap:0; margin:0 auto 18px; padding:3px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:999px; align-self:center; }
.br-cob-toggle__btn { background:transparent; border:none; font-family:inherit; font-size:13px; font-weight:700; color:rgba(255,255,255,.65); padding:8px 18px; border-radius:999px; cursor:pointer; transition:background .15s,color .15s; white-space:nowrap; }
.br-cob-toggle__btn:hover { color:#fff; }
.br-cob-toggle__btn.is-active { background:#F5921A; color:#fff; box-shadow:0 2px 8px rgba(245,146,26,.35); }
.obj-rank__table { width: 100%; max-width: 720px; margin: 0 auto; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.obj-rank__table th, .obj-rank__table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.obj-rank__table th { background: #f9fafb; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.obj-rank__table tr:last-child td { border-bottom: none; }
.obj-empty { text-align: center; padding: 30px 16px; color: #6b7280; background: #f9fafb; border-radius: 12px; font-size: 13px; max-width: 720px; margin: 0 auto; }

/* ============================================================================
   TEMA-AWARE — cores via tokens do hub (seguem claro/escuro). Overrides no FIM.
   Células de heat (%) mantêm o fundo colorido + texto branco (semânticas).
   ============================================================================ */
.prob-tab__table thead th { background: var(--surface); }
.prob-tab__table tbody tr:nth-child(odd)  td:not(.prob-tab__pct) { background: var(--surface); }
.prob-tab__table tbody tr:nth-child(even) td:not(.prob-tab__pct) { background: var(--surface-2); }
.prob-tab__table tbody tr:hover td:not(.prob-tab__pct) { background: var(--surface-2); }
.prob-tab__pos, .prob-tab__x, .prob-tab__confronto { color: var(--ink-soft); }
.prob-tab__nome, .prob-tab__team strong { color: var(--ink); }
.prob-tab__table th.prob-tab__sortable:hover { background: var(--surface-2); color: var(--ink); }
.obj-rank__table { background: var(--surface); color: var(--ink); }
.obj-rank__table th, .obj-rank__table td { border-bottom-color: var(--line); }
.obj-rank__table th { background: var(--surface-2); color: var(--ink-soft); }
.obj-empty { color: var(--ink-soft); background: var(--surface-2); }

/* sub-abas (toggle .br-cob-toggle) → card branco + ativo laranja/texto branco (seguem o tema) */
.br-cob-toggle { background: var(--surface); border-color: var(--line); }
.br-cob-toggle__btn { color: var(--ink-soft); }
.br-cob-toggle__btn:hover { color: var(--ink); }
.br-cob-toggle__btn.is-active { color: #fff; }

/* 1 CARD SÓ: o .prob-tab__wrap é o card (bg+sombra+raio); a tabela preenche 100%
   sem card próprio (o .obj-rank__table trazia bg/sombra/raio/max-width:720px →
   criava "card sobre card" + faixa cinza à direita). */
.prob-tab__wrap { background: var(--surface); }
.prob-tab__table { width: 100%; max-width: none; margin: 0; background: transparent; box-shadow: none; border-radius: 0; }