/* Cruzamento de Scouts — CSS /cruzamento/. .br-cz-* VERBATIM style.css L5633-5774.
   Filtros/moldura tema-aware no fim; tabela clara (tints semânticos); gráfico escuro. */

/* 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 L5633-5774 ══════ */

/* ── Cruzamento de Scouts (aba BR) ───────────────────────────── */
.br-cz-filtros { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
/* Versão COMPACT: 3 dropdowns numa linha, ocupam pouco espaço (combo style) */
.br-cz-filtros--compact { gap:10px; align-items:center; justify-content:center; }
.br-cz-cf { position:relative; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:6px 12px; color:#fff; font-size:13px; cursor:pointer; }
.br-cz-cf__lbl { font-weight:700; white-space:nowrap; }
.br-cz-cf__count { display:none; }   /* pedido: não mostrar quantos estão filtrados (ocupava espaço) */
/* Mobile: filtros do cruzamento em NO MÁX 2 linhas — chips menores, pouca margem no topo e usando a
   largura toda (margem inline negativa cancela o padding do .container). */
@media (max-width: 700px) {
  .br-cz-filtros--compact {
    gap: 5px; justify-content: center;
    margin: 2px 0 8px;
    margin-inline: calc(var(--container-px) * -1);   /* estende até a borda da tela (mais largura) */
    padding-inline: 6px;
  }
  .br-cz-cf { padding: 4px 8px; font-size: 11px; gap: 5px; }
  .br-cz-cf__lbl { font-size: 11px; }
  .br-cz-popup { min-width: 180px; max-width: calc(100vw - 16px); }   /* nunca mais largo que a tela */
}
.br-cz-cf__chev { font-size:10px; opacity:.6; transition:transform .15s; }
.br-cz-cf--drop[open] .br-cz-cf__chev { transform:rotate(180deg); }
.br-cz-cf--drop > summary { list-style:none; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.br-cz-cf--drop > summary::-webkit-details-marker { display:none; }
.br-cz-cf__sel { background:rgba(0,0,0,.2); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:6px; padding:4px 8px; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.br-cz-cf__sel option { background:#2a2b5e; color:#fff; }
/* Popup flutuante (não empurra o conteúdo abaixo) */
.br-cz-popup { position:absolute; top:calc(100% + 4px); left:0; z-index:50; background:#2a2b5e; border:1px solid rgba(255,255,255,.22); border-radius:8px; padding:8px; box-shadow:0 8px 24px rgba(0,0,0,.6); min-width:220px; max-width:300px; }
.br-cz-filtro { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:8px 12px; flex:1 1 220px; min-width:200px; color:#fff; }
.br-cz-filtro summary { cursor:pointer; font-weight:700; font-size:13px; display:flex; align-items:center; gap:8px; user-select:none; list-style:none; }
.br-cz-filtro summary::-webkit-details-marker { display:none; }
.br-cz-filtro summary::after { content:'▾'; margin-left:auto; opacity:.5; transition:transform .15s; }
.br-cz-filtro[open] summary::after { transform:rotate(180deg); }
.br-cz-filtro__count { font-size:11px; font-weight:700; color:#F5921A; background:rgba(245,146,26,.16); padding:1px 8px; border-radius:999px; }
.br-cz-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; max-height:160px; overflow-y:auto; }
.br-cz-chip { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.65); font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; cursor:pointer; transition:all .12s; font-family:inherit; white-space:nowrap; }
.br-cz-chip:hover { background:rgba(255,255,255,.12); color:#fff; }
.br-cz-chip.is-active { background:#F5921A; border-color:#F5921A; color:#1e1e2e; }
/* Checkbox list (substitui chips) — sem max-height: deixa crescer com o conteúdo */
.br-cz-chklist { display:flex; flex-direction:column; gap:2px; margin-top:8px; padding:4px; background:rgba(0,0,0,.15); border-radius:6px; }
.br-cz-chk { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:4px; cursor:pointer; font-size:12px; color:rgba(255,255,255,.85); transition:background .12s; font-weight:500; }
.br-cz-chk:hover { background:rgba(255,255,255,.06); }
.br-cz-chk input[type=checkbox] { width:14px; height:14px; accent-color:#F5921A; cursor:pointer; }
.br-cz-chk span { flex:1; }
.br-cz-acts { display:flex; gap:6px; margin-top:6px; }
.br-cz-acts button { background:transparent; border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.6); font-size:11px; font-weight:600; padding:3px 9px; border-radius:6px; cursor:pointer; font-family:inherit; transition:all .12s; }
.br-cz-acts button:hover { background:rgba(255,255,255,.08); color:#fff; }
/* Filtro Rodadas: 3 botões radio (Últimas 8 / Últimas 16 / Todos) */
.br-cz-filtro--radio { display:flex; flex-direction:column; gap:8px; }
.br-cz-filtro__hd { font-weight:700; font-size:13px; color:#fff; display:flex; align-items:center; gap:6px; }
.br-cz-radio { display:flex; gap:0; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:3px; }
.br-cz-rbtn { flex:1; background:transparent; border:none; font-family:inherit; font-size:12px; font-weight:700; color:rgba(255,255,255,.65); padding:7px 8px; border-radius:6px; cursor:pointer; transition:all .12s; }
.br-cz-rbtn:hover { color:#fff; }
.br-cz-rbtn.is-active { background:#F5921A; color:#1e1e2e; box-shadow:0 1px 3px rgba(0,0,0,.25); }

.br-cz-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:980px) { .br-cz-grid { grid-template-columns:1fr; } }
.br-cz-side { background:#F8FAFC; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.18); overflow:hidden; }
.br-cz-h { margin:0; background:#2D2E6E; color:#fff; font-size:14px; font-weight:800; padding:10px 14px; text-align:center; text-transform:uppercase; letter-spacing:.05em; }
.br-cz-tbl { width:100%; border-collapse:collapse; font-size:12px; color:#1E293B; }
.br-cz-tbl thead th { background:#E2E8F0; font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:#475569; padding:6px 4px; text-align:center; }
.br-cz-tbl thead th.br-cz-sortable { cursor:pointer; user-select:none; transition:background .12s, color .12s; }
.br-cz-tbl thead th.br-cz-sortable:hover { background:#CBD5E1; color:#1E293B; }
.br-cz-tbl thead th.br-cz-sortable.is-sorted { background:#F5921A; color:#1E293B; }
.br-cz-tbl tbody td { padding:8px 4px; text-align:center; border-bottom:1px solid #EEF2F7; vertical-align:middle; }
.br-cz-tbl tbody tr:last-child td { border-bottom:none; }
.br-cz-row--click { cursor:pointer; }
.br-cz-row--click:hover { filter:brightness(.96); }
/* Cor NO TR (não no td) → preenche o card inteiro, incl. gaps/padding do grid mobile (sem brancos). */
.br-cz-row--verde    { background:#DCFCE7; }
.br-cz-row--amarelo  { background:#FEF9C3; }
.br-cz-row--vermelho { background:#FEE2E2; }
.br-cz-row--neutro   { background:#fff; }
.br-cz-tbl tbody td  { background:transparent; }
/* TDs continuam como células normais (preenchem altura da linha, bg do TR cobre 100%) */
.br-cz-clube, .br-cz-adv { vertical-align:middle; font-weight:700; font-size:11px; }
/* Layout flex vai num wrapper interno pra não quebrar table-cell */
.br-cz-clube__inner { display:flex; flex-direction:column; align-items:center; gap:3px; }
.br-cz-clube__inner img { width:26px; height:26px; object-fit:contain; }
.br-cz-num { font-weight:700; font-size:13px; color:#2D2E6E; }
.br-cz-x { font-weight:800; color:#94A3B8; font-size:11px; }
.br-cz-heat { padding:4px !important; }

/* Mini-pitch SVG horizontal (1 por clube, Defesa esq + Ataque dir) */
.br-cz-pitchwrap { display:inline-flex; flex-direction:column; align-items:center; gap:3px; }
.br-cz-mini { display:block; width:140px; height:78px; border:1px solid rgba(255,255,255,.25); border-radius:4px; overflow:hidden; }
.br-cz-pitchlbls { display:flex; justify-content:space-between; width:140px; padding:0 8px; box-sizing:border-box; }
.br-cz-pitchlbl { font-size:9px; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:.05em; }
.br-cz-heat { padding:6px !important; }

.br-cz-leg { text-align:center; color:rgba(255,255,255,.7); font-size:12px; margin-top:14px; }

/* ── Mobile: cada confronto vira card de 2 linhas em grid 3 colunas ─────────────
   Linha 1: Clube     · Heatmap próprio · Pontuação
   Linha 2: Cedido    · Heatmap adv    · Adversário                              */
@media (max-width: 700px) {
  .br-cz-grid { grid-template-columns: 1fr; }
  .br-cz-tbl, .br-cz-tbl thead, .br-cz-tbl tbody, .br-cz-tbl tr, .br-cz-tbl td, .br-cz-tbl th { display:block; }
  .br-cz-tbl thead { display:none; }
  .br-cz-tbl tbody tr {
    display:grid;
    grid-template-columns: 70px 1fr 90px;
    grid-template-areas:
      "clube heatMeu pont"
      "cedi  heatAdv adv";
    column-gap:8px;
    row-gap:6px;
    padding:10px;
    border-bottom:1px solid #EEF2F7;
    align-items:center;
  }
  .br-cz-tbl tbody tr:last-child { border-bottom:none; }
  .br-cz-clube       { grid-area:clube;   text-align:center; }
  .br-cz-heat--meu   { grid-area:heatMeu; padding:0 !important; }
  .br-cz-num--pont   { grid-area:pont;    text-align:center; }
  .br-cz-num--cedi   { grid-area:cedi;    text-align:center; }
  .br-cz-heat--adv   { grid-area:heatAdv; padding:0 !important; }
  .br-cz-adv         { grid-area:adv;     text-align:center; }
  .br-cz-x           { display:none; }
  /* Labels acima dos números pra deixar claro o que é cada um */
  .br-cz-num--pont::before { content:"PONTUAÇÃO"; display:block; font-size:9px; font-weight:700; color:#64748B; letter-spacing:.05em; margin-bottom:2px; }
  .br-cz-num--cedi::before { content:"CEDIDO";    display:block; font-size:9px; font-weight:700; color:#64748B; letter-spacing:.05em; margin-bottom:2px; }
  /* Mini-pitches ocupam toda largura da coluna central */
  .br-cz-mini { width:100%; height:60px; }
  .br-cz-pitchwrap { width:100%; }
  .br-cz-pitchlbls { width:100%; }
}
.br-cz-aviso { background:rgba(234,179,8,.14); border:1px solid rgba(234,179,8,.45); color:#FEF3C7; padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:14px; line-height:1.45; }

/* Toggle Campinhos / Gráfico */
.br-cz-vtoggle { display:flex; gap:0; padding:3px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12); border-radius:999px; width:fit-content; margin:0 auto 14px; }
.br-cz-vtbtn { 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:all .15s; white-space:nowrap; }
.br-cz-vtbtn:hover { color:#fff; }
.br-cz-vtbtn.is-active { background:#F5921A; color:#1e1e2e; box-shadow:0 2px 8px rgba(245,146,26,.35); }

/* Gráfico de barras + linha esperado */
.br-cz-grafico { background:#1a1b3a; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:14px; }
.br-cz-grafico svg { width:100%; height:auto; display:block; }
.br-cz-grafico__leg { display:flex; gap:18px; justify-content:center; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); }
.br-cz-grafico__legi { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,.78); font-weight:600; }
.br-cz-grafico__legi i { display:inline-block; width:14px; height:10px; }

/* ============================================================================
   TEMA-AWARE — os FILTROS/moldura seguem o tema (tokens). A TABELA fica clara de
   propósito: os tints verde/amarelo/vermelho por linha são SEMÂNTICOS (o cerne da
   feature) e legíveis nos dois temas. O gráfico SVG segue como painel escuro.
   is-active laranja = texto branco (regra). Overrides no FIM (vencem por cascata).
   ============================================================================ */
/* filtros/dropdowns → cards BRANCOS (var(--surface)), não o lilás que ficava cinza */
.br-cz-cf { background: var(--surface); border-color: var(--line); color: var(--ink); }
.br-cz-cf__sel { background: var(--surface); color: var(--ink); border-color: var(--line); }
.br-cz-cf__sel option { background: var(--surface); color: var(--ink); }
.br-cz-popup { background: var(--surface); border-color: var(--line); }
.br-cz-filtro { background: var(--surface); border-color: var(--line); color: var(--ink); }
.br-cz-filtro__hd { color: var(--ink); }
.br-cz-chklist { background: var(--surface-2); }
.br-cz-chk { color: var(--ink); }
.br-cz-chk:hover { background: var(--surface-2); }
.br-cz-chip { background: var(--surface); border-color: var(--line); color: var(--ink-soft); }
.br-cz-chip:hover { color: var(--ink); }
.br-cz-chip.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.br-cz-acts button { border-color: var(--line); color: var(--ink-soft); }
.br-cz-acts button:hover { background: var(--surface-2); color: var(--ink); }
/* toggles segmentados (Rodadas / Campinhos-Gráfico) → track branco + ativo laranja/texto BRANCO */
.br-cz-radio, .br-cz-vtoggle { background: var(--surface); border-color: var(--line); }
.br-cz-rbtn, .br-cz-vtbtn { color: var(--ink-soft); }
.br-cz-rbtn:hover, .br-cz-vtbtn:hover { color: var(--ink); }
.br-cz-rbtn.is-active, .br-cz-vtbtn.is-active { color: #fff; }
.br-cz-tbl thead th.br-cz-sortable.is-sorted { color: #fff; }
.br-cz-mini { border-color: var(--line); }
.br-cz-leg { color: var(--ink-soft); }