/* ============================================================================
   mais-escalados.v2.css — Redesign premium da página Mais Escalados
   (2026-06-06, escopo aprovado: itens 1–6 da auditoria)
   ----------------------------------------------------------------------------
   Problema raiz: o <style> inline da página desenha um card ESCURO, mas o
   Bootstrap pinta as linhas de branco (--bs-table-bg) e vence a cascata —
   resultado híbrido (header/rank pretos + linhas brancas). Este arquivo
   carrega DEPOIS do <style> inline e assume o tema CLARO premium de vez,
   alinhado à linguagem nova do site (cards brancos, borda suave, radius 22,
   laranja pra interação, verde só na posse, dourado só no pódio).
   Modo live do Hebert: live.css é injetado dinamicamente DEPOIS deste
   arquivo e segue vencendo quando ativo.
   ============================================================================ */

/* =========================
   A. HERO / TIPOGRAFIA
   ========================= */
.page-mais-escalados .mast-title {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(1.8rem, 1.05rem + 3vw, 3rem);
  letter-spacing: 0.01em;
}
.page-mais-escalados .seo-lead {
  color: var(--color-muted, #5b6472);
}

/* =========================
   C. BARRA DE CONTROLES (filtros + sort) — pílula clara premium
   ========================= */
.page-mais-escalados .rank-controls {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.06),
    0 8px 24px rgba(15, 23, 42, 0.07);
  backdrop-filter: none;
}
.page-mais-escalados .rc-chip {
  height: 30px;
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: #4b5563;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.page-mais-escalados .rc-chip:hover {
  background: rgba(251, 89, 4, 0.07);
  border-color: rgba(251, 89, 4, 0.3);
  color: var(--laranja, #fb5904);
}
.page-mais-escalados .rc-chip.is-on {
  background: linear-gradient(135deg, var(--laranja, #fb5904), #ff9740);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(251, 89, 4, 0.3);
}
.page-mais-escalados .rc-sort {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.14);
  color: #374151;
  font-weight: 700;
}
.page-mais-escalados .rc-sort:hover {
  border-color: rgba(251, 89, 4, 0.35);
  color: var(--laranja, #fb5904);
}
.page-mais-escalados .rc-sort i {
  color: var(--laranja, #fb5904);
}

/* =========================
   D. CARD DA TABELA — tema claro unificado
   ========================= */
.page-mais-escalados .seo-rank-wrap {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
.page-mais-escalados .seo-rank-wrap::before {
  background: none; /* mata o glow verde do tema escuro */
}

/* Bootstrap: neutraliza as variáveis que pintavam as linhas por fora */
.page-mais-escalados .seo-rank-table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: transparent;
  --bs-table-color: inherit;
  color: var(--color-text, #25282e);
}

.page-mais-escalados .seo-rank-table thead th {
  background: #f8fafc;
  color: var(--color-muted, #5b6472);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: none;
}
.page-mais-escalados .seo-rank-table thead th.col-posse::after {
  color: rgba(22, 163, 74, 0.75);
}
.page-mais-escalados .seo-rank-table tbody td {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* Coluna rank sticky — clara (antes: faixa preta) */
.page-mais-escalados .seo-rank-table th.col-rank,
.page-mais-escalados .seo-rank-table td.col-rank {
  background: #fbfcfd;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  backdrop-filter: none;
}

/* Zebra + hover + pódio */
.page-mais-escalados .seo-rank-table tbody tr:nth-child(odd) {
  background: rgba(15, 23, 42, 0.015);
}
.page-mais-escalados .seo-rank-table tbody tr:hover {
  background: rgba(251, 89, 4, 0.05);
}
.page-mais-escalados .seo-rank-table tbody tr.is-top3 {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), transparent 65%);
}
.page-mais-escalados .seo-rank-table tbody tr.is-top3:hover {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.18), rgba(251, 89, 4, 0.04) 70%);
}
.page-mais-escalados .seo-rank-table tbody tr.is-top3 .posse-val {
  color: #15803d;
}

/* =========================
   E. CÉLULAS — jogador / chips / posse / rank
   ========================= */
.page-mais-escalados .rk-kit {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.18));
}
.page-mais-escalados .player-name {
  font-family: var(--font-display, 'Inter Tight', system-ui, sans-serif);
  font-weight: 700;
  color: var(--color-ink, #0a1324);
  opacity: 1;
}
.page-mais-escalados .player-sub {
  color: var(--color-faint, #94a3b8);
  opacity: 1;
}
/* desktop: o sub "FLA • ATA" duplica o chip do clube e o chip de posição */
@media (min-width: 641px) {
  .page-mais-escalados .player-sub {
    display: none;
  }
}

/* Chips de posição — tints claros com texto escuro */
.page-mais-escalados .pill,
.page-mais-escalados .club-pill {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.04);
  color: #334155;
  opacity: 1;
}
.page-mais-escalados .pill.pos-ATA {
  background: rgba(251, 89, 4, 0.1);
  border-color: rgba(251, 89, 4, 0.28);
  color: #c2410c;
}
.page-mais-escalados .pill.pos-MEI {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.24);
  color: #075985;
}
.page-mais-escalados .pill.pos-LAT,
.page-mais-escalados .pill.pos-ZAG {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.24);
  color: #15803d;
}
.page-mais-escalados .pill.pos-GOL {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.14);
  color: #334155;
}
.page-mais-escalados .pill.pos-TEC {
  background: rgba(202, 138, 4, 0.1);
  border-color: rgba(202, 138, 4, 0.28);
  color: #854d0e;
}
.page-mais-escalados .club-pill {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.1);
}
.page-mais-escalados .club-code {
  color: #334155;
  opacity: 1;
}
.page-mais-escalados .pos-mini {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.04);
  color: #334155;
}

/* Posse — verde da marca, número em Inter Tight tabular, barra mais presente */
.page-mais-escalados .posse-val {
  font-family: var(--font-display, 'Inter Tight', system-ui, sans-serif);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--verde, #16a34a);
}
.page-mais-escalados .posse-bar {
  height: 10px;
  background: rgba(15, 23, 42, 0.06);
}
.page-mais-escalados .posse-bar > i {
  background: linear-gradient(90deg, #16a34a, #34d399);
  box-shadow: 0 0 8px rgba(22, 163, 74, 0.28);
}

/* Rank: pílulas/medalhas no tema claro */
.page-mais-escalados .rank-pill {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: #334155;
}
.page-mais-escalados .rank-medal {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.12);
  color: #334155;
}
.page-mais-escalados .rank-medal.-g {
  background: rgba(255, 215, 0, 0.18);
  border-color: rgba(202, 138, 4, 0.45);
}
.page-mais-escalados .rank-medal.-s {
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(100, 116, 139, 0.35);
}
.page-mais-escalados .rank-medal.-b {
  background: rgba(205, 127, 50, 0.16);
  border-color: rgba(180, 100, 40, 0.4);
}
.page-mais-escalados .rank-medal .m-num {
  opacity: 1;
}

/* =========================
   F. AD-ROW / DIVIDER — tons claros
   ========================= */
.page-mais-escalados .ad-row-label {
  color: rgba(15, 23, 42, 0.45);
  opacity: 1;
}
.page-mais-escalados .ad-row-divider {
  color: rgba(15, 23, 42, 0.5);
}
.page-mais-escalados .ad-row-divider::before,
.page-mais-escalados .ad-row-divider::after {
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.15), transparent);
}

/* =========================
   G. MOBILE — denso e legível
   ========================= */
@media (max-width: 640px) {
  /* topo mais compacto */
  .page-mais-escalados .mast-title {
    font-size: 1.45rem;
    margin-bottom: 4px;
  }
  .page-mais-escalados .seo-lead {
    font-size: 0.85rem;
    margin-bottom: 10px;
  }
  .page-mais-escalados .view-switch {
    margin: 6px auto 10px;
  }

  /* mais espaço pro nome (antes truncava "M. Pere...") */
  .page-mais-escalados .rk-kit {
    width: 36px;
    height: 36px;
  }
  .page-mais-escalados .player-name {
    font-size: 15px;
    max-width: none;
  }
  .page-mais-escalados .player-cell {
    gap: 8px;
  }

  /* coluna rank mais estreita */
  .page-mais-escalados .seo-rank-table th.col-rank,
  .page-mais-escalados .seo-rank-table td.col-rank {
    width: 50px;
  }
  .page-mais-escalados .rank-pill,
  .page-mais-escalados .rank-medal {
    min-width: 32px;
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
  }
  .page-mais-escalados .rank-medal .m-emoji {
    font-size: 13px;
  }

  /* filtros menores na pílula */
  .page-mais-escalados .rank-controls {
    border-radius: 18px;
    padding: 8px 10px;
  }
  .page-mais-escalados .rc-chip {
    height: 28px;
    font-size: 11px;
    padding: 0 10px;
  }
  .page-mais-escalados .seo-rank-table tbody td {
    padding: 11px 8px;
  }
}