/* ==========================================================================
   Arquivo do Clube — COMPONENTES
   ==========================================================================

   Substitui os 20 blocos <style> que viviam dentro dos templates PHP, cada um
   redeclarando as mesmas regras com valores um pouco diferentes.

   Depende de ac-tokens.css. Nenhuma cor literal aqui — só var(--ac-*).
   ========================================================================== */

/* ==========================================================================
   1. ESTRUTURA
   ========================================================================== */

.ac-wrap {
  max-width: var(--ac-largura);
  margin-inline: auto;
  padding-inline: clamp(var(--ac-e-4), 4vw, var(--ac-e-6));
}

.ac-card,
.ac-panel,
.ac-box {
  background: var(--ac-papel-alto);
  border: 1px solid var(--ac-regua);
  border-radius: var(--ac-raio);
  padding: var(--ac-e-4);
}

.ac-block { margin-block: var(--ac-e-5); }

.ac-grid2,
.ac-grid3 { display: grid; gap: var(--ac-e-4); }
@media (min-width: 48rem) {
  .ac-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A ÚNICA declaração de .ac-header-row.
   Existiam três — aqui, em ac-telas.css e em ac-front.css — com align-items e
   gap diferentes (baseline/center, var/12px/10px). Qual valia dependia de quais
   folhas a tela enfileirava e em que ordem, então o mesmo componente saía
   alinhado de um jeito na ficha de competição e de outro na de clube.
   Fica o `center`, que é o que efetivamente renderizava nas telas onde este
   bloco aparece — assim nada muda de aparência e o conflito desaparece. */
.ac-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-e-3);
  margin-bottom: var(--ac-e-3);
}

.ac-title {
  font-family: var(--ac-fonte-display);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}

/* A etiqueta de seção: versalete condensado com a régua puxando até a margem. */
.ac-eyebrow {
  font-family: var(--ac-fonte-etiq);
  font-weight: 700;
  font-size: var(--ac-t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ac-rubro);
  display: flex;
  align-items: center;
  gap: var(--ac-e-3);
  margin: 0 0 var(--ac-e-2);
}
.ac-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ac-regua);
}

.ac-muted { color: var(--ac-tinta-2); }

/* Números que se comparam entre linhas precisam de largura fixa. */
.ac-dado,
.ac-num {
  font-family: var(--ac-fonte-display);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   2. O PLACAR — a unidade atômica do arquivo
   ==========================================================================
   Todo registro reduz a dois escudos e um número no meio. Um componente, três
   tamanhos. A ordem é sempre a mesma (mandante à esquerda), então quem lê não
   reinterpreta a cada página.
   ========================================================================== */

.ac-placar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ac-e-4);
}

.ac-placar-time {
  display: flex;
  align-items: center;
  gap: var(--ac-e-3);
  min-width: 0;
}
.ac-placar-time--dir {
  flex-direction: row-reverse;
  text-align: right;
}

.ac-placar-nome {
  font-family: var(--ac-fonte-display);
  font-weight: 600;
  font-size: var(--ac-t-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac-placar-escudo {
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: contain;
  background: var(--ac-papel-fundo);
  border: 1px solid var(--ac-regua-forte);
  display: grid;
  place-items: center;
  font-family: var(--ac-fonte-display);
  font-weight: 800;
  font-size: var(--ac-t-xs);
  color: var(--ac-tinta-2);
}

.ac-placar-gols {
  font-family: var(--ac-fonte-display);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.04em;
  display: flex;
  align-items: baseline;
  gap: var(--ac-e-1);
  white-space: nowrap;
}
.ac-placar-gols .ac-x {
  font-weight: 500;
  color: var(--ac-tinta-3);
  font-size: .6em;
}

/* Sem placar cadastrado NÃO é 0×0 e NÃO é empate. Precisa de aparência
   própria, senão volta a contaminar as estatísticas. */
.ac-placar-gols--vazio {
  font-family: var(--ac-fonte-etiq);
  font-weight: 600;
  font-size: var(--ac-t-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ac-tinta-3);
}

.ac-placar--hero .ac-placar-gols   { font-size: clamp(2.6rem, 8vw, 4rem); }
.ac-placar--hero .ac-placar-escudo { width: 4rem; height: 4rem; font-size: var(--ac-t-md); }
.ac-placar--hero .ac-placar-nome   { font-size: clamp(var(--ac-t-md), 2.4vw, var(--ac-t-xl)); }

.ac-placar--linha .ac-placar-gols  { font-size: var(--ac-t-xl); }

.ac-placar--mini .ac-placar-gols   { font-size: var(--ac-t-md); }
.ac-placar--mini .ac-placar-escudo { width: 1.6rem; height: 1.6rem; font-size: .55rem; }
.ac-placar--mini .ac-placar-nome   { font-size: var(--ac-t-sm); }

.ac-meta-jogo {
  font-family: var(--ac-fonte-etiq);
  font-weight: 600;
  font-size: var(--ac-t-xs);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-e-1) var(--ac-e-3);
  justify-content: center;
}
.ac-meta-jogo > * + *::before {
  content: "·";
  color: var(--ac-regua-forte);
  margin-right: var(--ac-e-2);
}

/* ==========================================================================
   3. RESULTADO — cor E letra, nunca só cor
   ========================================================================== */

.ac-res {
  font-family: var(--ac-fonte-display);
  font-weight: 800;
  font-size: var(--ac-t-xs);
  width: 1.45rem;
  height: 1.45rem;
  border-radius: var(--ac-raio-sm);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 1;
}
.ac-res--v { background: var(--ac-vitoria-bg); color: var(--ac-vitoria); box-shadow: inset 0 0 0 1px var(--ac-vitoria); }
.ac-res--e { background: var(--ac-empate-bg);  color: var(--ac-empate);  box-shadow: inset 0 0 0 1px var(--ac-empate); }
.ac-res--d { background: var(--ac-derrota-bg); color: var(--ac-derrota); box-shadow: inset 0 0 0 1px var(--ac-derrota); }
.ac-res--x { background: var(--ac-papel-fundo); color: var(--ac-tinta-3); box-shadow: inset 0 0 0 1px var(--ac-regua-forte); }

/* Compatibilidade: as bolinhas antigas continuam existindo, mas herdam os
   tokens em vez das cores literais que cada template declarava. */
.ac-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.ac-win  { background: var(--ac-vitoria); }
.ac-draw { background: var(--ac-empate); }
.ac-loss { background: var(--ac-derrota); }

/* ==========================================================================
   4. TABELAS
   ==========================================================================
   Sem zebra: linhas alternadas existem para guiar o olho quando não há filete.
   Com filete, elas só sujam.
   ========================================================================== */

.ac-rolar {
  overflow-x: auto;
  border: 1px solid var(--ac-regua);
  border-radius: var(--ac-raio);
  background: var(--ac-papel-alto);
  -webkit-overflow-scrolling: touch;
}

.ac-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ac-fonte-display);
  font-size: var(--ac-t-sm);
}
.ac-table thead th {
  font-family: var(--ac-fonte-etiq);
  font-weight: 700;
  font-size: var(--ac-t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
  text-align: left;
  padding: var(--ac-e-3);
  border-bottom: 1.5px solid var(--ac-regua-forte);
  white-space: nowrap;
  background: var(--ac-papel-alto);
}
.ac-table tbody td {
  padding: var(--ac-e-3);
  border-bottom: 1px solid var(--ac-regua);
  vertical-align: middle;
}
.ac-table tbody tr:last-child td { border-bottom: 0; }
.ac-table tbody tr:hover td { background: var(--ac-papel-fundo); }

.ac-table .ac-col-num  { text-align: right; font-variant-numeric: tabular-nums; }
.ac-table .ac-col-data { color: var(--ac-tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-table .ac-col-sec  { color: var(--ac-tinta-2); font-size: var(--ac-t-sm); }

/* ==========================================================================
   5. FICHAS (jogador, goleiro, técnico)
   ========================================================================== */

.ac-ficha { display: grid; gap: var(--ac-e-4); }
@media (min-width: 34rem) {
  .ac-ficha { grid-template-columns: 8.5rem minmax(0, 1fr); }
}

.ac-retrato {
  aspect-ratio: 3 / 4;
  width: 100%;
  border-radius: var(--ac-raio-sm);
  border: 1px solid var(--ac-regua-forte);
  object-fit: cover;
  background: var(--ac-papel-fundo);
}

/* Foto ausente é um estado desenhado, não um espaço vazio.
 *
 * A versão "retrato" que existia aqui não era usada por marcação nenhuma e,
 * por carregar antes, era derrotada pela de ac-telas.css — deixando o
 * `padding` órfão a inflar a caixa. A definição única vive em ac-telas.css. */

.ac-apelido {
  font-family: var(--ac-fonte-etiq);
  font-weight: 600;
  font-size: var(--ac-t-sm);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ac-rubro);
  margin: 0 0 var(--ac-e-3);
}

.ac-stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--ac-regua);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ac-stat-col {
  padding: var(--ac-e-2) var(--ac-e-4) var(--ac-e-2) 0;
  margin-right: var(--ac-e-4);
  border-right: 1px solid var(--ac-regua);
}
.ac-stat-col:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.ac-stat-col b {
  font-family: var(--ac-fonte-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--ac-t-xl);
  font-weight: 700;
  display: block;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.ac-stat-col span {
  font-family: var(--ac-fonte-etiq);
  font-size: var(--ac-t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
}

/* Posição no ranking. Só aparece quando o número é maior que zero — um jogador
   sem nenhum gol exibido como "Gols: 0 #312" não diz nada. */
.ac-pos {
  font-family: var(--ac-fonte-display);
  font-size: var(--ac-t-md);
  font-weight: 700;
  color: var(--ac-tinta-3);
  margin-left: var(--ac-e-1);
}

.ac-field {
  display: flex;
  gap: var(--ac-e-2);
  font-size: var(--ac-t-sm);
  padding-block: var(--ac-e-1);
}
.ac-field > strong {
  font-family: var(--ac-fonte-etiq);
  font-weight: 600;
  font-size: var(--ac-t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
  flex: 0 0 auto;
}

/* ==========================================================================
   6. GRADES DE CARDS (elenco, adversários, estádios)
   ========================================================================== */

.ac-roster-grid,
.ac-adv-grid,
.ac-local-grid,
.ac-grid {
  display: grid;
  gap: var(--ac-e-3);
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.ac-adv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ac-e-2);
  padding: var(--ac-e-3);
  background: var(--ac-papel-alto);
  border: 1px solid var(--ac-regua);
  border-radius: var(--ac-raio);
  color: inherit;
  text-decoration: none;
  text-align: center;
  transition: border-color .12s ease, transform .12s ease;
}
.ac-adv-card:hover {
  border-color: var(--ac-rubro);
  transform: translateY(-1px);
}
.ac-adv-thumb img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--ac-regua);
}
.ac-adv-card b {
  font-family: var(--ac-fonte-display);
  font-size: var(--ac-t-sm);
  font-weight: 600;
  line-height: 1.25;
}
.ac-adv-card small {
  font-family: var(--ac-fonte-etiq);
  font-size: var(--ac-t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
}

.ac-icon-emoji { font-size: 1.5rem; line-height: 1; }

/* ==========================================================================
   7. LISTAS DE RANKING (artilheiros, mais jogos, goleiros)
   ========================================================================== */

.ac-ranklist,
.ac-toplist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ac-rankitem {
  display: grid;
  grid-template-columns: 2.5rem 2.75rem minmax(0, 1fr) auto;
  gap: var(--ac-e-3);
  align-items: center;
  padding: var(--ac-e-3) 0;
  border-bottom: 1px solid var(--ac-regua);
}
.ac-rankitem:last-child { border-bottom: 0; }
.ac-ranknum {
  font-family: var(--ac-fonte-display);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: var(--ac-t-md);
  color: var(--ac-tinta-3);
  text-align: right;
}
.ac-rankitem img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--ac-regua);
}
.ac-rankvalor {
  font-family: var(--ac-fonte-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--ac-t-lg);
  text-align: right;
}

/* ==========================================================================
   8. FILTRO A–Z
   ========================================================================== */

.ac-az {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-e-1);
  margin-bottom: var(--ac-e-4);
}
.ac-az a,
.ac-az button {
  font-family: var(--ac-fonte-display);
  font-size: var(--ac-t-sm);
  font-weight: 600;
  min-width: 2rem;
  padding: var(--ac-e-1) var(--ac-e-2);
  border: 1px solid var(--ac-regua);
  border-radius: var(--ac-raio-sm);
  background: var(--ac-papel-alto);
  color: var(--ac-tinta-2);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.6;
}
.ac-az a:hover,
.ac-az button:hover { border-color: var(--ac-rubro); color: var(--ac-rubro); }
.ac-az .is-ativo,
.ac-az [aria-current="true"] {
  background: var(--ac-rubro);
  border-color: var(--ac-rubro);
  color: var(--ac-sobre-rubro);
}

/* ==========================================================================
   9. A RÉGUA DO TEMPO
   ==========================================================================
   O plugin já guarda o escudo com período de vigência — é o que faz um jogo de
   1975 mostrar o escudo de 1975. Esta é a primeira tela que usa isso.
   ========================================================================== */

/*
 * A linha do tempo mora DENTRO do container que rola, não fora dele: com a
 * linha no wrap e os escudos no elemento rolável, rolar a faixa deslocava os
 * escudos e deixava a linha parada.
 *
 * E nada é posicionado com deslocamento negativo em cima do topo: quando um
 * eixo é `overflow-x: auto`, o outro deixa de ser `visible` por especificação,
 * e transbordo para cima NÃO é alcançável por rolagem — é recortado. Um
 * `top: -1.55rem` num escudo de 2.5rem cortava 62% dele. O espaço vem de
 * padding no container, que é sempre seguro.
 */
.ac-eras-wrap { position: relative; }

.ac-eras {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(5.5rem, 1fr);
  gap: var(--ac-e-2);
  position: relative;
  padding-top: 2.5rem;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* A régua atravessa a faixa na altura do centro dos escudos. */
.ac-eras::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 3.75rem;
  height: 1.5px;
  background: var(--ac-regua-forte);
  z-index: 0;
}

.ac-era {
  text-align: center;
  position: relative;
  z-index: 1;
}

.ac-era-escudo {
  width: 2.5rem;
  height: 2.5rem;
  box-sizing: border-box;
  border-radius: 50%;
  margin: 0 auto var(--ac-e-2);
  border: 1.5px solid var(--ac-regua-forte);
  background: var(--ac-papel-alto);
  display: grid;
  place-items: center;
  object-fit: contain;
  font-family: var(--ac-fonte-display);
  font-weight: 800;
  font-size: .62rem;
  color: var(--ac-tinta-2);
}
.ac-era.is-ativa .ac-era-escudo {
  border-color: var(--ac-rubro);
  color: var(--ac-rubro);
  box-shadow: 0 0 0 3px var(--ac-rubro-fraco);
}
.ac-era b {
  display: block;
  font-family: var(--ac-fonte-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--ac-t-sm);
  font-weight: 700;
}
.ac-era span { font-size: var(--ac-t-xs); color: var(--ac-tinta-2); }

/* ==========================================================================
   10. ESTADOS VAZIOS
   ========================================================================== */

.ac-jog-empty,
.ac-est-empty,
.ac-gol-empty,
.ac-vazio {
  padding: var(--ac-e-5);
  text-align: center;
  color: var(--ac-tinta-2);
  background: var(--ac-papel-fundo);
  border: 1px dashed var(--ac-regua-forte);
  border-radius: var(--ac-raio);
  font-family: var(--ac-fonte-texto);
}

/* ==========================================================================
   11. ACESSIBILIDADE
   ========================================================================== */

.ac-wrap :focus-visible,
.ac-card :focus-visible {
  outline: 2px solid var(--ac-rubro-vivo);
  outline-offset: 2px;
  border-radius: var(--ac-raio-sm);
}

@media (prefers-reduced-motion: reduce) {
  .ac-adv-card { transition: none; }
  .ac-adv-card:hover { transform: none; }
}

/* ==========================================================================
   12. UTILITÁRIOS
   ==========================================================================
   Substituem os 300 atributos style= escritos direto na marcação.

   Só entram aqui os padrões que se REPETIAM. Valor usado uma vez só continua
   inline — inventar `.ac-grid-225-1fr-550` seria pior que a doença.
   ========================================================================== */

.ac-centro     { text-align: center; }
.ac-esquerda   { text-align: left; }
.ac-direita    { text-align: right; }

.ac-m0         { margin: 0; }
.ac-mb-2       { margin: 0 0 var(--ac-e-2); }
.ac-mb-3       { margin: 0 0 var(--ac-e-3); }
.ac-mb-4       { margin: 0 0 var(--ac-e-4); }

.ac-p-3        { padding: var(--ac-e-3); }
.ac-p-4        { padding: var(--ac-e-4); }
.ac-py-4       { padding-block: var(--ac-e-4); }

.ac-flex-linha { display: flex; align-items: center; gap: var(--ac-e-3); }
.ac-sem-sub    { text-decoration: none; }

/* O sexto vermelho: #CC0000 aparecia 23 vezes, só em atributos style= — por
   isso a contagem inicial de cinco, feita sobre os arquivos CSS, o perdeu. */
.ac-rubro-txt    { color: var(--ac-rubro); }

/* Cor de RESULTADO, não cor de cartão.
 *
 * --ac-amarelo é o objeto "cartão amarelo" (#F6D32D). Usá-lo para marcar
 * "empates" numa lista dava 1,32:1 de contraste sobre o papel — invisível.
 * --ac-empate existe exatamente para isso e dá 5,1:1. */
.ac-vitoria-txt  { color: var(--ac-vitoria); }
.ac-empate-txt   { color: var(--ac-empate); }
.ac-derrota-txt  { color: var(--ac-derrota); }

/* Mantida só para o que é cartão de verdade dentro dos acontecimentos. */
.ac-amarelo-txt  { color: var(--ac-amarelo); }

.ac-rolagem-alta {
  max-height: 21rem;
  overflow: auto;
  border: 1px solid var(--ac-regua);
  border-radius: var(--ac-raio);
}

.ac-rotulo-forte {
  font-family: var(--ac-fonte-etiq);
  font-size: var(--ac-t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--ac-e-1);
  color: var(--ac-tinta-2);
}

/* Larguras de coluna que se repetiam em tabelas de estatística. */
.ac-col-4   { width: 25%; }
.ac-col-6   { width: 17%; }
.ac-icone-16 { height: 16px; width: auto; }

/* Espaçador vertical. Era <div style="height:16px"></div> — um div vazio só
   para empurrar o que vem depois. */
.ac-espaco { height: var(--ac-e-4); }
.ac-icone-48 { height: 48px; width: 48px; }

/* ==========================================================================
   13. CARTÕES
   ==========================================================================
   Havia 35 <i class="fa-solid …"> nas fichas de jogador, goleiro e técnico —
   e o FontAwesome NUNCA foi carregado: nenhum wp_enqueue_style, nenhum <link>,
   nenhum @font-face em todo o projeto. Eram 35 elementos vazios deixando um
   recuo estranho antes de cada item.

   O cartão desenhado em CSS não depende de fonte externa, escala com o texto e
   tem a proporção de um cartão de verdade.
   ========================================================================== */

.ac-cartao {
  display: inline-block;
  width: .7em;
  height: 1em;
  border-radius: 1px;
  vertical-align: -.12em;
  margin-right: .15em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.ac-cartao--amarelo  { background: var(--ac-amarelo); }
.ac-cartao--vermelho { background: var(--ac-vermelho); }

/* Texto só para leitor de tela. Existia em ac-todos-jogos.css e no tema, mas
   não na folha de componentes — e o selo de resultado depende dele para
   carregar "Vitória" sem imprimir a palavra ao lado da letra. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   14. ÍCONES
   ==========================================================================
   SVG inline, herdando currentColor e escalando com o texto. Ver
   includes/icones.php para o porquê de não ser fonte de ícone.
   ========================================================================== */

.ac-icone {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  vertical-align: -.16em;
  color: inherit;
}
.ac-icone--sm { width: .9em;  height: .9em; }
.ac-icone--lg { width: 1.4em; height: 1.4em; }
.ac-icone--xl { width: 2rem;  height: 2rem; stroke-width: 1.5; }

/* O ícone ao lado de um rótulo fica um tom abaixo dele: acompanha sem
   disputar. Onde ele É a informação, use .ac-icone--forte. */
.ac-icone--fraco { color: var(--ac-tinta-3); }
.ac-icone--forte { color: var(--ac-rubro); }

/* Rótulo com ícone: o alinhamento é sempre o mesmo, em qualquer lugar. */
.ac-com-icone {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-e-2);
}

/* Ícone dentro de um círculo, para cabeçalho de seção. */
.ac-icone-disco {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--ac-regua);
  background: var(--ac-papel-fundo);
  color: var(--ac-rubro);
}

/* ==========================================================================
   15. DIAGRAMAÇÃO — réguas e colunas
   ==========================================================================
   O que separa uma coisa da outra neste site é a RÉGUA, não a sombra nem a
   diferença de fundo. É por isso que o tema claro é branco no card e branco
   na página: quem faz a separação é o filete.
   ========================================================================== */

/* --- réguas --- */
.ac-regua-h {
  border: 0;
  border-top: 1px solid var(--ac-regua);
  margin: var(--ac-e-5) 0;
}
.ac-regua-h--forte { border-top-color: var(--ac-regua-forte); }
.ac-regua-h--dupla {
  border-top: 3px double var(--ac-regua-forte);
}

/* Seção com régua no topo e etiqueta encaixada nela. */
.ac-secao {
  border-top: 2px solid var(--ac-tinta);
  padding-top: var(--ac-e-3);
  margin-top: var(--ac-e-6);
}
.ac-secao > :first-child { margin-top: 0; }

.ac-secao-cab {
  display: flex;
  align-items: center;
  gap: var(--ac-e-3);
  margin-bottom: var(--ac-e-4);
}
.ac-secao-cab h2,
.ac-secao-cab h3 {
  font-family: var(--ac-fonte-display);
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0;
  font-size: var(--ac-t-xl);
}
.ac-secao-cab .ac-secao-extra {
  margin-left: auto;
  font-family: var(--ac-fonte-etiq);
  font-size: var(--ac-t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
}

/* --- colunas --- */
.ac-colunas {
  display: grid;
  gap: var(--ac-e-5);
}
@media (min-width: 52rem) {
  .ac-colunas--2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-colunas--3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-colunas--4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Uma coluna estreita de metadados e o conteúdo ao lado. */
  .ac-colunas--rail{ grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
  /* O inverso: conteúdo primeiro, apoio depois. */
  .ac-colunas--apoio{ grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); }
}

/* Colunas separadas por filete, não por espaço vazio. */
.ac-colunas--reguadas { gap: 0; }
@media (min-width: 52rem) {
  .ac-colunas--reguadas > * + * {
    border-left: 1px solid var(--ac-regua);
    padding-left: var(--ac-e-5);
  }
  .ac-colunas--reguadas > * { padding-right: var(--ac-e-5); }
  .ac-colunas--reguadas > :last-child { padding-right: 0; }
}
@media (max-width: 51.99rem) {
  .ac-colunas--reguadas > * + * {
    border-top: 1px solid var(--ac-regua);
    padding-top: var(--ac-e-4);
    margin-top: var(--ac-e-4);
  }
}

/* --- lista de dados: rótulo à esquerda, valor à direita, régua entre linhas ---
   É o padrão de ficha: "Nascimento … 12/10/1949". Substitui os <p> soltos com
   <strong> que cada template montava do seu jeito. */
.ac-dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
}
.ac-dl > dt,
.ac-dl > dd {
  padding: var(--ac-e-2) 0;
  border-bottom: 1px solid var(--ac-regua);
  margin: 0;
  min-width: 0;
}
.ac-dl > dt {
  font-family: var(--ac-fonte-etiq);
  font-size: var(--ac-t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
  padding-right: var(--ac-e-4);
  display: flex;
  align-items: center;
  gap: var(--ac-e-2);
  white-space: nowrap;
}
.ac-dl > dd {
  font-family: var(--ac-fonte-display);
  /* Sem font-size declarado, o valor caía nos 16px padrão do navegador — o
     único tamanho da ficha que não vinha da escala, e por isso o único que
     destoava do rótulo ao lado. */
  font-size: var(--ac-t-md);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
/* A última LINHA não leva filete — não separa nada, e o cartão já tem borda.
   Contado por posição, e não por :last-of-type: com o selo de ranking numa
   célula própria, a última linha tem TRÊS células, e :last-of-type pegava só o
   último <dd> — o valor da última linha ficava com o filete sozinho, meio
   traço solto sob o número. */
.ac-dl > *:nth-last-child(-n + 2) { border-bottom: 0; }
.ac-dl--extra > *:nth-last-child(-n + 3) { border-bottom: 0; }

/* O selo de ranking em coluna própria: assim os valores ficam retos mesmo
   quando uma linha não tem selo. */
.ac-dl--extra { grid-template-columns: auto 1fr auto; }
.ac-dl > .ac-dl-extra {
  padding-left: var(--ac-e-3);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* --- fileira de números, separada por filete --- */
.ac-numeros {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--ac-regua);
  border-radius: var(--ac-raio);
  overflow: hidden;
}
.ac-numeros > * + * { border-left: 1px solid var(--ac-regua); }
.ac-numero {
  padding: var(--ac-e-3) var(--ac-e-4);
  text-align: center;
  min-width: 0;
}
.ac-numero b {
  display: block;
  font-family: var(--ac-fonte-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--ac-t-2xl);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.ac-numero span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ac-e-1);
  margin-top: var(--ac-e-1);
  font-family: var(--ac-fonte-etiq);
  font-size: var(--ac-t-xs);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
}
.ac-numero--v b { color: var(--ac-vitoria); }
.ac-numero--e b { color: var(--ac-empate); }
.ac-numero--d b { color: var(--ac-derrota); }

@media (max-width: 40rem) {
  .ac-numeros {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
  }
  .ac-numeros > * + * { border-left: 0; }
  .ac-numeros > :nth-child(odd)  { border-right: 1px solid var(--ac-regua); }
  .ac-numeros > :nth-child(n+3)  { border-top: 1px solid var(--ac-regua); }
}

/* --- barra de proporção: vitórias/empates/derrotas numa linha só --- */
.ac-barra {
  display: flex;
  height: .5rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--ac-papel-fundo);
  border: 1px solid var(--ac-regua);
}
.ac-barra > span { display: block; height: 100%; }
.ac-barra .ac-barra--v { background: var(--ac-vitoria); }
.ac-barra .ac-barra--e { background: var(--ac-empate); }
.ac-barra .ac-barra--d { background: var(--ac-derrota); }

.ac-barra-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-e-2) var(--ac-e-4);
  margin-top: var(--ac-e-2);
  font-family: var(--ac-fonte-etiq);
  font-size: var(--ac-t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
}
.ac-barra-legenda > span { display: inline-flex; align-items: center; gap: var(--ac-e-1); }
.ac-barra-legenda i {
  width: .6rem; height: .6rem; border-radius: 2px; display: inline-block;
}

/* --- tabela: coluna de ícone e agrupamento por régua --- */
.ac-table .ac-col-icone { width: 1%; padding-right: 0; color: var(--ac-tinta-3); }
.ac-table tbody tr.ac-grupo td {
  background: var(--ac-papel-fundo);
  font-family: var(--ac-fonte-etiq);
  font-size: var(--ac-t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
  border-top: 1px solid var(--ac-regua-forte);
}

/* Cabeçalho de tabela que gruda ao rolar — a tabela de 3.000 jogos é longa. */
.ac-rolar--alto { max-height: 70vh; overflow: auto; }
.ac-rolar--alto .ac-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* O item de metadado com ícone: o alinhamento é o mesmo em toda parte, e o
   separador "·" some — quem separa agora é o ícone. */
.ac-meta-jogo .ac-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-e-1);
}
.ac-meta-jogo .ac-meta-item .ac-icone { color: var(--ac-tinta-3); }
.ac-meta-jogo > .ac-meta-item + .ac-meta-item::before { content: none; }

/* Lista de estatística com ícone: o ícone alinha numa coluna própria, para os
   rótulos começarem todos no mesmo lugar. Sem isso, "Jogos" e "Pênaltis
   defendidos" começariam em pontos diferentes e a lista pareceria torta. */
.ac-stat-list li,
.ac-toplist li {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  align-items: baseline;
  gap: var(--ac-e-2);
  padding: var(--ac-e-2) 0;
  border-bottom: 1px solid var(--ac-regua);
}
.ac-stat-list li:last-child,
.ac-toplist li:last-child { border-bottom: 0; }
.ac-stat-list li > .ac-icone,
.ac-stat-list li > .ac-cartao,
.ac-toplist li > .ac-icone {
  justify-self: center;
  align-self: center;
}
/* Item sem ícone continua alinhado com os que têm. */
.ac-stat-list li > *:first-child:not(.ac-icone):not(.ac-cartao) { grid-column: 2; }

/* Par rótulo/valor em coluna, para blocos de destaque. */
.ac-dado-rotulo {
  display: flex;
  align-items: center;
  gap: var(--ac-e-1);
  font-family: var(--ac-fonte-etiq);
  font-size: var(--ac-t-xs);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
  margin: 0 0 var(--ac-e-1);
}
.ac-dado-valor {
  font-family: var(--ac-fonte-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--ac-t-xl);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
}
.ac-dado-valor small { font-size: .6em; font-weight: 600; color: var(--ac-tinta-2); }
.ac-dado-valor--link { font-size: var(--ac-t-md); font-weight: 600; }