/* ============================================================================
   Mais Escalados — CSS da página /mais-escalados/ (hub). Blocos COPIADOS VERBATIM
   de e:\cartomante_provaveis\style.css: campinho L2383–2692 e
   me-views/br-escalados L4328–4574. SEGUE O TEMA da plataforma (claro/escuro): o
   conteúdo (abas/cards/listas) é re-mapeado pros tokens do hub no bloco final
   (TEMA-AWARE); o gramado verde do campinho fica igual nos dois temas.
   FASE 1: SEM o popup de hover (.pitch-alt-tip) e SEM o modo IA/heatmap.
   ============================================================================ */

/* provaveis usa --radius-md (14px); o app_2026 tem sm/lg/xl/full mas não md. */
:root { --radius-md: 14px; }

/* wrapper + cabeçalho da página (cores via tokens → seguem o tema) */
.me-page { max-width: min(96vw, 1100px); margin: 0 auto; padding: 18px 16px 64px; }
.me-page .section__header { text-align: center; max-width: 660px; margin: 0 auto 18px; }
.me-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; }
.me-page .section__desc { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.me-page__loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 16px; color: var(--ink-soft); }
.me-page__spinner { width: 34px; height: 34px; border: 3px solid rgba(77,82,175,.25); border-top-color: #4D52AF; border-radius: 50%; animation: meSpin 1s linear infinite; }
@keyframes meSpin { to { transform: rotate(360deg); } }
.copa-grupo-card__placeholder { padding: 30px 16px; text-align: center; color: var(--ink-soft); font-size: 14px; }

/* .pitch aqui é o CAMPINHO vertical (aspect-ratio), NÃO o layout de confronto do
   style.css:587 (display:flex). Como este arquivo carrega DEPOIS, neutralizamos os
   display/gap/padding/margin herdados daquele .pitch. */
.pitch { display: block; gap: 0; padding: 0; margin-top: 0; }

/* ══════ CAMPINHO — VERBATIM de style.css L2383-2692 ══════ */
.pitch {
  position: relative;
  aspect-ratio: 68 / 105;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  background: linear-gradient(180deg,
      var(--color-pitch-1) 0%,
      var(--color-pitch-2) 50%,
      var(--color-pitch-1) 100%);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 12px 32px rgba(0,0,0,.35);
}
/* Marca d'água: foto/logo do usuário logado no centro do campinho (toggle no modo "editar").
   isolation:isolate cria um stacking context no .pitch, então o ::after com z-index:-1 fica ATRÁS
   dos jogadores e do SVG das linhas, mas SOBRE o gramado — sem precisar tocar no layout dos filhos. */
body.show-pitch-foto .pitch { isolation: isolate; }
body.show-pitch-foto .pitch::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--pitch-foto, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 33.333%; /* altura = 1/3 do campinho; largura proporcional (mantém o ratio) */
  opacity: .55;                  /* multiply dilui — opacidade um pouco maior compensa */
  mix-blend-mode: multiply;      /* branco da imagem some sobre o gramado; sobra só o logo */
  pointer-events: none;
  border-radius: var(--radius-md);
}
.pitch::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent calc(100% / 12),
      rgba(255,255,255,.04) calc(100% / 12),
      rgba(255,255,255,.04) calc(200% / 12)
    );
  pointer-events: none;
}
.pitch__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pitch__esquema {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  pointer-events: none; /* é só um rótulo; não pode capturar o toque no atacante do canto superior */
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: rgba(0,0,0,.5);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  letter-spacing: .04em;
}
.pitch__rows {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 8px 42px;
  z-index: 1;
}
.pitch__row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 4px;
}

.pitch-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  max-width: 22%;
  text-align: center;
  cursor: grab;
  user-select: none;
  transition: opacity .18s ease;
}
.pitch-player.is-dragging {
  opacity: 0.25;
  cursor: grabbing;
}
.pitch-player.is-dragging-free {
  cursor: grabbing;
  z-index: 50;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.5));
  transform: scale(1.08);
  transition: transform 0.12s ease;
}
.pitch-player.is-drop-target .pitch-player__photo {
  outline: 2.5px dashed rgba(255,255,255,0.9);
  outline-offset: 3px;
  transform: scale(1.15);
  transition: transform 0.12s ease;
}

/* ── Modo Scouts ─────────────────────────────────────────────── */
.pitch--scouts .pitch__scouts-layer,
.pitch--ia .pitch__ia-layer {
  position: absolute;
  inset: 0;
}
/* Heatmap overlay — conquistado (laranja, campo do jogador em modo IA) OU cedido (roxo, campo do
   adversário, injetado em qualquer modo). Selector sem .pitch--ia pra valer no campo do adversário. */
.pitch__ia-heatmap {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 5;
}
.pitch__ia-heatmap.is-visible { opacity: 1; }
.pitch__ia-heatmap-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.04);
}
.pitch-player--scouts,
.pitch-player--ia {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  max-width: none;
  flex: none;
  z-index: 10;
}
.pitch--scouts .pitch-player__photo {
  width: 48px;
  height: 48px;
}
.pitch--scouts .pitch-player__photo--placeholder {
  font-size: 14px;
}
.pitch--scouts .pitch-player__name {
  font-size: 11px;
  max-width: 64px;
}
/* IA usa os mesmos tamanhos do default (.pitch-player__photo etc.) — sem overrides aqui
   pra mobile reduzir junto com as outras abas via @media. */
.pitch-player__avatar-wrap {
  position: relative;
  display: inline-flex;
  transition: transform .18s ease, filter .18s ease;
}
.pitch-player.is-pinned { z-index: 6; }
.pitch-player.is-pinned .pitch-player__avatar-wrap {
  transform: scale(1.18);
  filter: drop-shadow(0 0 6px rgba(245,146,26,.95)) drop-shadow(0 0 14px rgba(245,146,26,.7));
}
.pitch-player.is-pinned .pitch-player__name {
  color: #F5921A;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(0,0,0,.8);
}
body.is-copa .pitch-player.is-pinned .pitch-player__avatar-wrap {
  filter: drop-shadow(0 0 6px rgba(200,40,52,.95)) drop-shadow(0 0 14px rgba(200,40,52,.7));
}
body.is-copa .pitch-player.is-pinned .pitch-player__name { color: var(--copa-red); }
/* Ao PINAR um jogador (clique/tap pra ver os quadrantes), esconde os OUTROS jogadores do confronto —
   nos DOIS campos (o próprio + o do adversário, onde vai o cedido) — pra o heatmap do selecionado
   ficar bem visível. Hover é só preview (não pina) → não esconde ninguém. Fade suave via transição na
   base. `:has()` já é usado no projeto; se um webview antigo não suportar, degrada pro comportamento atual. */
[id^="confronto-"]:has(.pitch-player.is-pinned) .pitch-player:not(.is-pinned) {
  opacity: 0;
  pointer-events: none;
}
.pitch-player__escalado {
  position: absolute;
  bottom: -4px;
  left: -4px;
  font-size: 11px;
  line-height: 1;
  z-index: 2;
  cursor: default;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
.player-card__escalado {
  position: static;
  font-size: 13px;
  cursor: default;
  filter: none;
  vertical-align: middle;
}
.pitch-player__medal-wrap {
  position: absolute;
  top: -4px;
  left: -4px;
  cursor: default;
  z-index: 2;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.pitch-player__medal { display: block; }
.player-card__medal-wrap {
  position: static;
  display: inline-flex;
  vertical-align: middle;
  cursor: default;
  margin-left: 2px;
}
.src-tooltip--medal .src-tooltip__badge { color: #1e1e2e; background: var(--medal-color, #FFD700); }
.src-tooltip--medal .src-tooltip__body strong { color: var(--medal-color, #FFD700); }
.pitch-player__valorizar-wrap {
  position: absolute;
  top: -4px;
  right: -4px;
  cursor: default;
  z-index: 2;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.pitch-player__valorizar { display: block; }
.src-tooltip--valorizar .src-tooltip__badge { color: #1e1e2e; background: var(--valorizar-color, #FFD700); }
.src-tooltip--valorizar .src-tooltip__body strong { color: var(--valorizar-color, #FFD700); }
.pitch-player__thermo-wrap {
  position: absolute;
  bottom: -4px;
  right: -4px;
  cursor: default;
  z-index: 2;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
.pitch-player__thermo { display: block; }
.player-card__thermo-wrap {
  position: static;
  display: inline-flex;
  vertical-align: middle;
  cursor: default;
  filter: none;
  margin-left: 2px;
}
.pitch-player__alert {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 17px;
  height: 17px;
  background: #F59E0B;
  border: 2px solid rgba(0,0,0,.45);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 3;
  cursor: default;
}

.pitch-player__photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  border: 2px solid #fff;
  object-fit: cover;
  box-shadow: 0 3px 8px rgba(0,0,0,.3);
}
.pitch-player__photo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary-d);
}
.pitch-player__name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════ ME-VIEWS + BR-ESCALADOS — VERBATIM de style.css L4328-4574 ══════ */
/* 3 abas no topo da aba Mais Escalados: Campinho / Lista / Posição */
.me-views__tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  padding: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  width: fit-content;
  margin-inline: auto;
}
.me-views__tab {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.me-views__tab:hover { color: #fff; }
.me-views__tab--active {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(245,146,26,.35);
}
/* 4 abas (Campinho/Lista/Posição/Capitães) podem estourar a largura no mobile → padding menor + scroll INTERNO
   (nunca deixar rolar a página na horizontal). */
@media (max-width:520px){
  .me-views__tabs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .me-views__tabs::-webkit-scrollbar { display: none; }
  .me-views__tab { padding: 8px 13px; font-size: 12px; }
}
.me-views__pane[hidden] { display: none; }

/* Pane "Posição": cards por posição */
.br-escalados-pos {
  margin-bottom: 18px;
}
.br-escalados-pos h4 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 6px 12px;
  background: rgba(245,146,26,.18);
  border-left: 4px solid var(--color-accent);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.br-escalados-pos h4 span {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.br-escalados-pos__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 700px) { .br-escalados-pos__list { grid-template-columns: 1fr; } }

.br-escalados-pitch {
  margin-bottom: 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}
.br-escalados-pitch__head { padding: 14px 18px 0; }
.br-escalados-pitch__head h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .3px;
}
.br-escalados-pitch__head h3 span { color: var(--color-accent); font-weight: 700; font-size: 14px; }
.br-escalados-pitch__head p {
  margin: 0;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}
.br-escalados-pitch__wrap {
  max-width: 460px;
  margin: 12px auto 18px;
  padding: 0 14px;
  position: relative;
}
.br-escalados-pitch__wrap .pitch { position: relative; }
.br-escalados-pitch__tag {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 9px;
  background: rgba(15,23,42,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.br-escalados-pitch__tec {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.br-escalados-pitch__tec-label {
  font-size: 9px;
  font-weight: 800;
  color: rgba(255,255,255,.65);
  letter-spacing: .5px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.br-escalados-pitch__tec .pitch-player { max-width: none; }
.br-escalados-pitch__tec .pitch-player__photo { width: 38px; height: 38px; }
.br-escalados-pitch__tec .pitch-player__name { font-size: 11px; }

.br-escalados-banco {
  margin: 16px 0 4px;
  padding: 0 14px;
}
.br-escalados-banco h4 {
  margin: 0 0 10px;
  text-align: center;
  color: rgba(255,255,255,.8);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.br-escalados-banco__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 600px) { .br-escalados-banco__list { grid-template-columns: repeat(5, 1fr); gap: 4px; } }
.br-escalados-banco__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.br-escalados-banco__esc {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(255,255,255,.18);
  padding: 2px 7px;
  border-radius: 999px;
}
.br-escalados-banco__avatar { position: relative; }
.br-escalados-banco__foto {
  width: 60px; height: 60px; border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.18);
}
.br-escalados-banco__foto--placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: rgba(255,255,255,.7);
}
.br-escalados-banco__name {
  font-size: 11px; font-weight: 700; color: #fff;
  max-width: 70px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.br-escalados-banco__pos {
  font-size: 9px; font-weight: 800; color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: .5px;
}

.br-escalados-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 700px) { .br-escalados-grid { grid-template-columns: 1fr; } }
.br-escalado-link { text-decoration: none; color: inherit; }
.br-escalado-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  transition: background .15s, border-color .15s, transform .15s;
}
.br-escalado-link:hover .br-escalado-card {
  background: rgba(245,146,26,.1);
  border-color: rgba(245,146,26,.4);
  transform: translateX(2px);
}
.br-escalado-card__rank {
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: 18px;
  color: var(--color-accent);
  min-width: 28px;
  text-align: center;
}
.br-escalado-card__foto {
  width: 60px; height: 60px; border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15);
  flex-shrink: 0;
}
.br-escalado-card__foto--placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: rgba(255,255,255,.7);
}
.br-escalado-card__escudo {
  width: 14px; height: 14px; object-fit: contain;
  vertical-align: middle; margin-right: 4px;
}
.br-escalado-card__info { flex: 1; min-width: 0; }
.br-escalado-card__name { color: #fff; font-weight: 700; font-size: 14px; }
.br-escalado-card__meta {
  display: flex; align-items: center;
  color: rgba(255,255,255,.55); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
}
.br-escalado-card__pts { text-align: right; }
.br-escalado-card__pts strong { display: block; color: var(--color-accent); font-weight: 800; font-size: 16px; }
.br-escalado-card__pts span { display: block; color: rgba(255,255,255,.5); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }

/* ============================================================================
   TEMA-AWARE + POLIMENTO CLARO — o conteúdo usa os tokens do hub
   (--ink/--ink-soft/--surface/--line) pra seguir o tema. Ajustes de contraste no
   claro: campinho SEM caixa branca (transparente, gramado direto no canvas), barra
   de abas suave (--surface-2 em vez de branco), texto do banco reforçado (--ink), e
   o botão ATIVO laranja SEMPRE com texto branco (regra: nunca cinza/preto sobre o
   accent laranja). Overrides no FIM → vencem as regras dark por ordem de cascata.
   ============================================================================ */
.me-views__tabs { background: var(--surface-2); border-color: var(--line); }
.me-views__tab { color: var(--ink-soft); }
.me-views__tab:hover { color: var(--ink); }
.me-views__tab--active { color: #fff; }   /* texto branco no laranja (NUNCA cinza) */

.br-escalados-pos h4 { color: var(--ink); }
.br-escalados-pos h4 span { background: rgba(128,128,128,.2); color: var(--ink); }

/* campinho SEM o "quadradão branco": o gramado verde fica direto sobre o canvas */
.br-escalados-pitch { background: transparent; border: none; }
.br-escalados-pitch__head h3 { color: var(--ink); }
.br-escalados-pitch__head p { color: var(--ink-soft); }

.br-escalados-banco h4 { color: var(--ink); }
.br-escalados-banco__name { color: var(--ink); }
.br-escalados-banco__pos { color: var(--ink); }
.br-escalados-banco__foto--placeholder { color: var(--ink-soft); }
.br-escalados-banco__foto { background: var(--surface); border-color: var(--line); }

.br-escalado-card { background: var(--surface); border-color: var(--line); }
.br-escalado-card__name { color: var(--ink); }
.br-escalado-card__meta,
.br-escalado-card__pts span,
.br-escalado-card__foto--placeholder { color: var(--ink-soft); }
.br-escalado-card__foto { background: var(--surface); border-color: var(--line); }