/* =====================================================================
   Sub-abas, competições, mídia e equipe.

   ⚠️ Terceiro arquivo de CSS, e não o fim do segundo, pela mesma razão
   de sempre neste projeto: um parêntese aberto engole as regras
   seguintes em silêncio, e achar isso num arquivo de 1.400 linhas custa
   uma hora. Separado por assunto, o estrago fica contido.
   ===================================================================== */

/* ⚠️ A barra de sub-abas é a segunda coisa da tela, logo abaixo da carta
   do atleta: ela navega DENTRO de um contexto e precisa parecer menor
   que a navegação principal — senão o jogador lê duas barras iguais e
   não sabe qual manda. */
.sub-abas {
  display: flex;
  gap: 5px;
  margin: 10px 0 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sub-abas::-webkit-scrollbar { display: none; }
.sub-abas button {
  flex: 1 0 auto;
  min-height: 40px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 20px;
  color: var(--giz-fraco);
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.sub-abas button[aria-pressed="true"] {
  background: var(--giz);
  border-color: var(--giz);
  color: var(--noite);
}
/* o ponto de atenção: contrato vencendo, ação de mídia disponível */
.sub-abas button i {
  position: absolute;
  top: 5px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ambar);
  font-size: 0;
  color: transparent;
}

/* ───────────────────────── mundo ──────────────────────────────────── */

/* ⚠️ GRADE REGULAR, não chips de larguras diferentes.
   Primeiro era rolagem horizontal escondida: das dez ligas, só QUATRO
   apareciam e nada dizia que havia mais. Troquei por quebra de linha, e
   o dono resumiu o resultado: "ta feio". Estava — chips de "MLS" e
   "Liga Colombiana" lado a lado deixam a última linha torta e a grade
   inteira parece desalinhada.
   Colunas iguais resolvem as duas coisas: todas as ligas aparecem E o
   bloco fica reto. É o mesmo motivo de a tabela de classificação ter
   colunas fixas — lista de escolhas se lê de relance, e torto não se lê
   de relance. */
.abas-liga {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 10px 0;
}
.abas-liga button {
  min-height: 42px;
  padding: 8px 10px;
  background: var(--piso);
  border: 1px solid var(--linha);
  border-radius: 11px;
  color: var(--giz-medio);
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  text-align: center;
}
.abas-liga button[aria-pressed="true"] {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--noite);
}

.mundo-cab { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; }
.mundo-nome { font-family: var(--cond); font-size: 25px; margin: 0; font-weight: 600; }
.mundo-pais { font-size: 11.5px; color: var(--giz-fraco); }
.mundo-temp { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mundo-temp button {
  width: 36px;
  height: 36px;
  background: var(--piso);
  border: 1px solid var(--linha);
  border-radius: 9px;
  color: var(--giz);
  font-size: 17px;
  cursor: pointer;
}
.mundo-temp button:disabled { opacity: 0.35; cursor: default; }
.mundo-temp span { font-family: var(--cond); font-size: 15px; min-width: 30px; text-align: center; }

.abas-mundo { display: flex; gap: 5px; margin: 8px 0; }
.abas-mundo button {
  flex: 1;
  min-height: 40px;
  padding: 8px 6px;
  background: var(--piso-fundo);
  border: 1px solid var(--linha);
  border-radius: 10px;
  color: var(--giz-fraco);
  font-family: var(--cond);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.abas-mundo button[aria-pressed="true"] {
  background: var(--piso-alto);
  color: var(--giz);
  border-color: var(--linha-forte);
}

/* ⚠️ A tabela ROLA na horizontal no celular em vez de encolher a fonte:
   número de classificação abaixo de 11px deixa de ser legível, e uma
   tabela que não se lê não serve para nada. As colunas secundárias
   somem antes disso. */
.rolagem-tabela { overflow-x: auto; margin: 0 -2px; }
.classificacao { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 320px; }
.classificacao th {
  font-family: var(--cond);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--giz-fraco);
  font-weight: 600;
  padding: 6px 4px;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}
.classificacao td { padding: 7px 4px; border-bottom: 1px solid var(--linha); }
.classificacao .num, .classificacao th.num { text-align: right; }
.classificacao .forte { font-family: var(--cond); font-size: 16px; font-weight: 700; }
.classificacao .pos { font-family: var(--cond); color: var(--giz-fraco); }
.classificacao tr.meu { background: var(--ambar-fundo); }
.classificacao tr.meu td { color: var(--giz); font-weight: 600; }
.classificacao tr.campeao .pos { color: var(--ambar); font-weight: 700; }
.classificacao tr.cima .pos { color: var(--relva); }
.classificacao tr.baixo .pos { color: var(--sangue); }
.classificacao .pos-sg { color: var(--relva); }
.classificacao .neg-sg { color: var(--sangue); }
.clube-cel { display: flex; align-items: center; gap: 6px; }
.clube-cel > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

@media (max-width: 420px) {
  .esconde-mini { display: none; }
}

.artilharia { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 3px; }
.artilharia li {
  display: grid;
  grid-template-columns: 26px 1fr auto 36px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 5px 9px;
  background: var(--piso-fundo);
  border: 1px solid transparent;
  border-radius: 9px;
}
.artilharia li.voce { background: var(--ambar-fundo); border-color: var(--ambar); }
.art-pos { font-family: var(--cond); font-size: 15px; color: var(--giz-fraco); text-align: center; }
.art-corpo { min-width: 0; }
.art-corpo b {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.art-clube {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--giz-fraco);
  margin-top: 1px;
}
.art-media { font-family: var(--cond); font-size: 13px; color: var(--giz-fraco); text-align: right; }
.art-media i { display: block; font-style: normal; font-size: 9px; }
.art-gols { font-family: var(--cond); font-size: 21px; font-weight: 700; text-align: right; }
.artilharia li.voce .art-gols { color: var(--ambar); }

.copa-campeao {
  display: flex;
  align-items: center;
  gap: 13px;
  background: linear-gradient(140deg, var(--ambar-fundo), var(--piso));
  border: 1px solid rgba(242, 177, 52, 0.4);
  border-radius: var(--raio);
  padding: 14px;
  margin: 8px 0;
}
.copa-campeao span { font-size: 11px; color: var(--giz-fraco); display: block; }
.copa-campeao b { font-family: var(--cond); font-size: 24px; color: var(--ambar); }
.fase-titulo {
  font-family: var(--cond);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--giz-fraco);
  margin: 16px 0 6px;
  font-weight: 600;
}
.confrontos { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.confrontos li {
  display: grid;
  grid-template-columns: 1fr 46px 1fr;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 5px 8px;
  background: var(--piso-fundo);
  border: 1px solid transparent;
  border-radius: 9px;
  position: relative;
}
.confrontos li.meu { border-color: var(--ambar); background: var(--ambar-fundo); }
.confrontos li.zebra { border-color: rgba(53, 181, 122, 0.35); }
.cf-lado {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--giz-fraco);
}
.cf-lado.dir { justify-content: flex-end; }
.cf-lado span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-lado.venceu { color: var(--giz); font-weight: 600; }
.cf-placar { font-family: var(--cond); font-size: 16px; font-weight: 700; text-align: center; }
.cf-zebra {
  position: absolute;
  top: -7px;
  right: 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--relva);
  color: var(--noite);
  padding: 1px 6px;
  border-radius: 20px;
  font-weight: 700;
}

/* ───────────────────────── mídia ──────────────────────────────────── */

.midia-topo {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(160deg, var(--piso-alto), var(--piso));
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 15px;
  flex-wrap: wrap;
}
.midia-fas b {
  display: block;
  font-family: var(--cond);
  font-size: var(--n-heroi);
  line-height: 0.95;
  color: var(--ambar);
  letter-spacing: -0.02em;
}
.midia-fas > span { font-size: 12px; color: var(--giz-fraco); }
.midia-mov { display: block; font-style: normal; font-size: 12px; font-weight: 600; margin-top: 4px; }
.midia-mov.sobe { color: var(--relva); }
.midia-mov.desce { color: var(--sangue); }
.midia-patamar { flex: 1 1 160px; border-left: 1px solid var(--linha); padding-left: 14px; }
.midia-patamar b { display: block; font-family: var(--cond); font-size: 19px; }
.midia-patamar span {
  display: block;
  font-size: 12px;
  color: var(--giz-medio);
  line-height: 1.4;
  margin-top: 3px;
}

.escada { margin: 11px 0; }
.escada-barra {
  height: 8px;
  background: rgba(234, 241, 238, 0.08);
  border-radius: 20px;
  overflow: hidden;
}
.escada-barra i { display: block; height: 100%; background: var(--ambar); border-radius: 20px; }
.escada-pe { display: block; font-size: 12px; color: var(--giz-medio); margin-top: 6px; }

.acoes-midia { display: grid; gap: 9px; }
.acao-midia {
  background: var(--piso);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 13px;
}
.acao-midia.boa { border-color: rgba(53, 181, 122, 0.4); }
.acao-midia.perigosa { border-color: rgba(224, 96, 85, 0.4); }
.am-cab { display: flex; align-items: center; gap: 8px; }
.am-cab b { font-family: var(--cond); font-size: 18px; }
.am-selo {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--ambar);
  color: var(--noite);
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 700;
}
.acao-midia p { font-size: 12.5px; color: var(--giz-medio); line-height: 1.45; margin: 6px 0; }
.am-nums { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.am-nums span {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(234, 241, 238, 0.06);
}
.am-nums .mais { color: var(--relva); }
.am-nums .menos { color: var(--sangue); }
.am-nota { font-size: 11.5px !important; color: var(--giz-fraco) !important; }

.manchetes { list-style: none; padding: 0; margin: 9px 0; display: grid; gap: 5px; }
.manchete {
  background: var(--piso-fundo);
  border-left: 3px solid var(--giz-fraco);
  border-radius: 0 10px 10px 0;
  padding: 9px 12px;
}
.manchete.otimo { border-left-color: var(--ambar); background: var(--ambar-fundo); }
.manchete.bom { border-left-color: var(--relva); }
.manchete.ruim { border-left-color: var(--sangue); }
.mh-veiculo {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--giz-fraco);
  margin-bottom: 3px;
}
.manchete b { font-size: 13.5px; font-weight: 500; line-height: 1.35; display: block; }
.mh-temp { display: block; font-size: 10px; color: var(--giz-fraco); margin-top: 4px; }

/* ───────────────────────── equipe ─────────────────────────────────── */

.equipe-topo { display: flex; gap: 18px; flex-wrap: wrap; margin: 9px 0; }
.equipe-topo.apertado .eq-n b { color: var(--sangue); }
.eq-n b { display: block; font-family: var(--cond); font-size: var(--n-forte); line-height: 1; }
.eq-n span { display: block; font-size: 11px; color: var(--giz-fraco); margin-top: 3px; }

.profs { display: grid; gap: 9px; margin: 10px 0; }
.prof {
  background: var(--piso);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 13px;
}
.prof.contratado { border-color: var(--ambar); background: var(--ambar-fundo); }
.prof.bloqueado { opacity: 0.6; }
.prof-cab { display: flex; align-items: center; gap: 8px; }
.prof-cab b { font-family: var(--cond); font-size: 18px; }
.prof-selo {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--ambar);
  color: var(--noite);
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 700;
}
.prof-texto { font-size: 12.5px; color: var(--giz-medio); line-height: 1.45; margin: 6px 0; }
.prof-faz { font-size: 12.5px; line-height: 1.45; margin: 6px 0; }
.prof-nums { display: flex; gap: 20px; margin: 9px 0; }
.prof-nums b { display: block; font-family: var(--cond); font-size: 19px; line-height: 1; }
.prof-nums i {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: var(--giz-fraco);
  margin-top: 2px;
}
.prof-nums .caro b { color: var(--sangue); }
.prof-bloqueio { font-size: 11.5px; color: var(--giz-fraco); margin: 8px 0 0; }
.item-botao.soltar {
  background: transparent;
  border: 1px solid var(--linha-forte);
  color: var(--giz-medio);
}

@media (min-width: 560px) {
  .profs, .acoes-midia { grid-template-columns: 1fr 1fr; }
  .abas-liga { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 760px) {
  .abas-liga { grid-template-columns: repeat(5, 1fr); }
}

/* ⚠️ "No limite" e "melhor escolha agora": os dois avisos que faltavam no
   treino. Sem eles, um atleta treinou o mesmo atributo saturado por
   vinte temporadas e o overall ficou travado em 51 do começo ao fim —
   com a tela prometendo ganho positivo toda semana. */
.treino-card.no-limite { opacity: 0.55; }
.tc-teto {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sangue);
  margin-top: 1px;
}
.treino-card.sugerido { border-color: var(--relva); }
.tc-sugerido {
  display: block;
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--relva);
}

/* ═══════════════════ GALERIA DE TROFÉUS ═════════════════════════════
   ⚠️ A única tela do jogo que não serve para decidir nada: ela existe
   para o jogador OLHAR. Por isso a imagem é grande e o número é pequeno
   — o inverso de todas as outras. */

.vitrine-topo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 10px 0;
}
.vt-n {
  background: var(--piso-fundo);
  border: 1px solid var(--linha);
  border-radius: 11px;
  padding: 10px 6px;
  text-align: center;
}
.vt-n b { display: block; font-family: var(--cond); font-size: 24px; line-height: 1; }
.vt-n span { display: block; font-size: 10px; color: var(--giz-fraco); margin-top: 3px; }

.vitrine {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin: 10px 0;
}
.trofeu-card {
  position: relative;
  background: linear-gradient(170deg, var(--piso-alto), var(--piso));
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 15px 11px 13px;
  text-align: center;
}
/* ⚠️ o âmbar continua reservado: aqui ele marca Copa do Mundo e melhor
   do mundo, as duas conquistas que a maioria das carreiras não tem */
.trofeu-card.maior {
  border-color: var(--ambar);
  background: linear-gradient(170deg, var(--ambar-fundo), var(--piso));
}
.tf-vezes {
  position: absolute;
  top: 9px;
  right: 10px;
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 700;
  color: var(--ambar);
}
.tf-img { min-height: 72px; display: flex; align-items: center; justify-content: center; }
.tf-img .trofeu-img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }
.tf-nome {
  display: block;
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 600;
  margin-top: 9px;
  line-height: 1.15;
}
.tf-com { display: block; font-size: 11.5px; color: var(--giz-medio); margin-top: 2px; }
.tf-idades { display: block; font-size: 10px; color: var(--giz-fraco); margin-top: 5px; }

.faltam { list-style: none; padding: 0; margin: 9px 0; display: grid; gap: 6px; }
.faltam li {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--piso-fundo);
  border: 1px dashed var(--linha-forte);
  border-radius: 11px;
  padding: 10px 12px;
}
.fl-img { opacity: 0.4; flex: 0 0 auto; display: flex; }
.fl-corpo b { display: block; font-family: var(--cond); font-size: 16px; }
.fl-corpo span { display: block; font-size: 11.5px; color: var(--giz-fraco); line-height: 1.4; margin-top: 2px; }

.trilha li i {
  font-style: normal;
  margin-left: auto;
  font-family: var(--cond);
  font-size: 14px;
  color: var(--ambar);
}

@media (min-width: 560px) {
  .vitrine { grid-template-columns: repeat(3, 1fr); }
}

/* ⚠️ O cabeçalho de cada grupo de posição no elenco. Pequeno e discreto:
   ele organiza a lista sem competir com os nomes, que são o conteúdo. */
.grupo-pos {
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--giz-fraco);
  margin: 14px 0 5px;
}

/* ⚠️ A escolha de onde começar é a primeira decisão de peso da carreira,
   e por isso cada divisão aparece com o que ela SIGNIFICA — não só com o
   nome. "Série D" não diz nada a quem nunca jogou. */
.series { display: grid; gap: 7px; }
.serie {
  text-align: left;
  background: var(--piso);
  border: 1px solid var(--linha);
  border-radius: 11px;
  padding: 10px 12px;
  color: var(--giz);
  cursor: pointer;
  min-height: 44px;
}
.serie[aria-pressed="true"] { border-color: var(--ambar); background: var(--ambar-fundo); }
.serie b { display: block; font-family: var(--cond); font-size: 17px; }
.serie span { display: block; font-size: 11.5px; color: var(--giz-medio); line-height: 1.4; margin-top: 2px; }
.serie i {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: var(--giz-fraco);
  margin-top: 4px;
}