/* =====================================================================
   SPFCBase — base
   Estilos de documento e componentes de conteúdo. Depende de tokens.css.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* `[hidden]` tem que ganhar de qualquer `display` do componente.
   O navegador aplica `[hidden] { display: none }` na folha DELE, que
   perde para qualquer regra nossa — então um `.componente { display: flex }`
   deixa o atributo sem efeito nenhum, calado. Foi o que aconteceu com a
   faixa de cookies: `hidden` ligava, ela continuava na tela, e clicar em
   "Aceitar" parecia não fazer nada.
   Vale para todo componente que nasce escondido, não só para aquele. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: var(--linha-normal);
}

/* Placar, minuto, público, ano: sempre largura fixa de dígito.
   Sem isso, uma coluna de números "dança" a cada linha. */
table, .numero, .placar, time, .estatistica {
  font-variant-numeric: tabular-nums;
}

/* ---- Tipografia ------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 600;
  line-height: var(--linha-apertada);
  margin: 0 0 var(--e-3);
  letter-spacing: 0.01em;
}
h1 { font-size: var(--texto-3xl); }
h2 {
  font-size: var(--texto-xl);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  border-bottom: 2px solid var(--cor-borda);
  padding-bottom: var(--e-2);
  margin-top: var(--e-6);
}
h3 { font-size: var(--texto-lg); }
p { margin: 0 0 var(--e-4); }

a {
  color: var(--cor-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover { border-bottom-color: currentColor; }
a:visited { color: var(--cor-link-visitado); }

:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

/* ---- Layout ---------------------------------------------------------- */
.conteudo {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--e-5) var(--e-4) var(--e-8);
}

.topo {
  background: var(--cor-topo);
  border-bottom: 4px solid var(--cor-marca);
}
.topo__interno {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--e-3) var(--e-4);
  display: flex;
  align-items: center;
  gap: var(--e-4);
}
.topo__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fonte-display);
  font-size: var(--texto-xl);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-invertido);
}
.topo__marca, .topo__marca:visited { color: var(--cor-texto-invertido); }
.topo__marca:hover { border-bottom-color: transparent; }
.topo__marca img { display: block; }

.rodape {
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-fundo-alt);
  color: var(--cor-texto-fraco);
  font-size: var(--texto-sm);
}
.rodape__interno {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--e-5) var(--e-4);
  /* Duas colunas: o site à esquerda, o crédito de quem levantou os dados à
     direita. `space-between` em vez de largura fixa — a coluna da direita
     tem um bloco só e não deve esticar. */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--e-4) var(--e-5);
}
.rodape__coluna { min-width: 0; }
.rodape__coluna p:first-child { margin-top: 0; }
.rodape__coluna--apoio { flex-shrink: 0; }

/* Uma coluna só quando não cabem lado a lado. O apoio fica embaixo, com um
   fio separando — sem ele os dois blocos empilhados viram um bloco só. */
@media (max-width: 46rem) {
  .rodape__interno { display: block; }
  .rodape__coluna--apoio {
    margin-top: var(--e-4);
    padding-top: var(--e-4);
    border-top: 1px solid var(--cor-borda);
  }
}

/* ---- Trilha de navegação --------------------------------------------- */
.trilha {
  font-size: var(--texto-sm);
  color: var(--cor-texto-fraco);
  margin-bottom: var(--e-4);
}
.trilha ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.trilha li + li::before { content: "›"; margin-right: var(--e-2); color: var(--cor-borda-forte); }

/* ---- Cabeçalho do jogo ----------------------------------------------- */
.jogo-cabecalho {
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-caixa);
  padding: var(--e-5);
  margin-bottom: var(--e-5);
}
.jogo-placar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e-4);
}
.jogo-placar__time { font-family: var(--fonte-display); font-size: var(--texto-xl); }
.jogo-placar__time--visitante { text-align: right; }
.jogo-placar__numeros {
  font-family: var(--fonte-display);
  font-size: var(--texto-3xl);
  font-weight: 700;
  white-space: nowrap;
  padding: 0 var(--e-4);
}
/* Jogo sem placar registrado (ex.: partida anulada). Nunca mostrar 0x0. */
.jogo-placar__numeros--ausente {
  font-size: var(--texto-xl);
  color: var(--cor-ausente);
  font-style: italic;
  font-weight: 400;
}

.selo {
  display: inline-block;
  font-family: var(--fonte-tabela);
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px var(--e-2);
  border: 2px solid transparent;
  border-radius: var(--raio);
}
/* 🚫 Nenhum verde. Ver seção 10 do CLAUDE.md. */
.selo--vitoria {
  background: var(--selo-vitoria-fundo);
  color: var(--selo-vitoria-tinta);
  border-color: var(--selo-vitoria-borda);
}
.selo--empate {
  background: var(--selo-empate-fundo);
  color: var(--selo-empate-tinta);
  border-color: var(--selo-borda-neutra);
}
.selo--derrota {
  background: var(--selo-derrota-fundo);
  color: var(--selo-derrota-tinta);
  border-color: var(--selo-borda-neutra);
}

/* ---- Ficha (pares rótulo/valor) -------------------------------------- */
.ficha { margin: 0; }
.ficha__linha {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--cor-borda);
}
.ficha__linha:last-child { border-bottom: 0; }
.ficha dt {
  font-family: var(--fonte-tabela);
  text-transform: uppercase;
  font-size: var(--texto-xs);
  letter-spacing: 0.06em;
  color: var(--cor-texto-fraco);
  padding-top: 3px;
}
.ficha dd { margin: 0; }

/* ---- Dado ausente ----------------------------------------------------
   Seção 3 do CLAUDE.md: dado ausente nunca vira vazio silencioso, e nunca
   se confunde com zero conhecido. São dois estados visuais distintos. */
.ausente {
  color: var(--cor-ausente);
  font-style: italic;
}
.ausente::after { content: "não registrado"; }

/* Zero conhecido de verdade (ex.: portões fechados) — NÃO é ausência. */
.nulo-real { color: var(--cor-texto-suave); }

/* Texto secundário. Existe para que ninguém use `.ausente` só para obter a
   cor suave — `.ausente` injeta "não registrado" via ::after e mentiria. */
.meta {
  color: var(--cor-texto-fraco);
  font-size: var(--texto-sm);
}
.meta--subtitulo { margin-top: calc(var(--e-2) * -1); }

/* ---- Tabelas --------------------------------------------------------- */
.tabela-rolagem { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fonte-tabela);
  font-size: var(--texto-sm);
}
caption {
  text-align: left;
  font-family: var(--fonte-display);
  font-size: var(--texto-lg);
  padding-bottom: var(--e-2);
}
th, td {
  text-align: left;
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--cor-borda);
}
thead th {
  background: var(--cor-fundo-realce);
  text-transform: uppercase;
  font-size: var(--texto-xs);
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  border-bottom: 2px solid var(--cor-borda-forte);
  white-space: nowrap;
}
tbody tr:hover { background: var(--cor-fundo-alt); }
td.num, th.num { text-align: right; }

/* ---- Aviso de cobertura ---------------------------------------------
   Seção 3, regra 5: estatística parcial sempre declara o denominador. */
.cobertura {
  font-size: var(--texto-sm);
  color: var(--cor-texto-fraco);
  border-left: 3px solid var(--spfc-vermelho-fibra);
  background: var(--cor-fundo-alt);
  padding: var(--e-2) var(--e-3);
  margin: var(--e-3) 0;
}

@media (max-width: 40rem) {
  h1 { font-size: var(--texto-2xl); }
  .ficha__linha { grid-template-columns: 1fr; gap: 0; }
  .jogo-placar { grid-template-columns: 1fr; text-align: center; }
  .jogo-placar__time--visitante { text-align: center; }
}


/* =====================================================================
   ACRÉSCIMOS — página de jogo em duas colunas e home ("Neste dia")
   Nada aqui inventa cor: tudo sai dos tokens de tokens.css.
   🚫 Verde não aparece em nenhum lugar (seção 10 do CLAUDE.md).
   ===================================================================== */

/* ---- 0a. Foco visível: anel de dois tons ----------------------------
   O anel amarelo sozinho rende 1,50:1 contra o fundo branco e não cumpre
   os 3:1 que a WCAG pede para indicador de foco (1.4.11). O amarelo é da
   identidade e fica; ganha uma linha escura de 2px por dentro, que garante
   contraste contra qualquer fundo. No tema escuro o amarelo já rende
   10,36:1 e a linha interna só reforça. Nenhum tom novo. */
:focus-visible {
  box-shadow: 0 0 0 2px var(--cor-texto);
}

/* ---- 0. Correção de contraste (AA) -----------------------------------
   O cinza Peres (#8A9297), no papel --cor-texto-fraco / --cor-ausente,
   rende 3,16:1 sobre o fundo branco e 2,94:1 sobre --cor-fundo-alt.
   Reprova em AA para texto corrido (mínimo 4,5:1). O tom é oficial e não
   pode ser alterado — então ele deixa de carregar TEXTO e passa a carregar
   só BORDA, e o texto secundário assume o cinza Valentim (7,89:1 sobre
   branco, 7,33:1 sobre --cor-fundo-alt).
   No tema escuro o Peres já passava (5,87:1); lá --cor-texto-suave rende
   8,93:1 e continua correto.
   Nenhum token foi alterado — mudou só o papel de cada um no componente. */
.meta,
.trilha,
.ficha dt,
.cobertura,
.rodape,
.ausente {
  color: var(--cor-texto-suave);
}

/* ---- 1. Grade de duas colunas ---------------------------------------
   Coluna principal = o fato (ficha do jogo, jogos do dia).
   Coluna lateral   = a navegação (para onde ir a partir daqui).
   A principal vem antes no HTML: é ela que interessa a leitor de tela e a
   buscador, e é ela que fica em cima quando vira coluna única. */
.layout-duas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  margin-top: var(--e-5);
}
@media (min-width: 60rem) {
  .layout-duas {
    grid-template-columns: minmax(0, 1fr) 19rem;
    align-items: start;
  }
}
.coluna-principal { min-width: 0; }
.coluna-lateral { min-width: 0; }
.coluna-lateral > * + * { margin-top: var(--e-4); }

/* ---- 2. Painel (caixa de conteúdo) ----------------------------------- */
.painel {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-caixa);
  background: var(--cor-fundo);
  padding: var(--e-4);
}
.painel--realce { background: var(--cor-fundo-alt); }

.painel__titulo {
  font-family: var(--fonte-display);
  font-size: var(--texto-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cor-texto-suave);
  border-bottom: 2px solid var(--cor-borda);
  padding-bottom: var(--e-2);
  margin: 0 0 var(--e-3);
}
.painel__rodape {
  margin: var(--e-3) 0 0;
  padding-top: var(--e-3);
  border-top: 1px solid var(--cor-borda);
  font-size: var(--texto-sm);
}
.painel > h2:first-child { margin-top: 0; }

.secao + .secao { margin-top: var(--e-6); }

/* ---- 3. Cabeçalho do jogo (placar em destaque) -----------------------
   Estende .jogo-cabecalho / .jogo-placar, que já existiam. */
.jogo-cabecalho__contexto,
.jogo-cabecalho__rodape {
  font-family: var(--fonte-tabela);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  margin: 0;
}
.jogo-cabecalho__contexto {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: var(--e-3);
  margin-bottom: var(--e-4);
  border-bottom: 1px solid var(--cor-borda);
}
.jogo-cabecalho__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  padding-top: var(--e-3);
  margin-top: var(--e-4);
  border-top: 1px solid var(--cor-borda);
}
.jogo-placar__time { line-height: var(--linha-apertada); }
.jogo-placar__mando {
  display: block;
  font-family: var(--fonte-tabela);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cor-texto-suave);
}

/* ---- 4. Navegação jogo anterior / próximo ----------------------------
   Cartão inteiro clicável; 44px é o piso de toque e aqui sobra folga. */
.nav-jogos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}
@media (min-width: 34rem) {
  .nav-jogos { grid-template-columns: 1fr 1fr; }
}
.nav-jogos__item {
  display: block;
  min-height: 44px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-caixa);
  background: var(--cor-fundo);
  color: var(--cor-texto);
}
.nav-jogos__item:visited { color: var(--cor-texto); }
.nav-jogos__item:hover {
  border-color: var(--cor-borda-forte);
  background: var(--cor-fundo-alt);
}
.nav-jogos__item--proximo { text-align: right; }
.nav-jogos__rotulo {
  display: block;
  font-family: var(--fonte-tabela);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cor-texto-suave);
}
/* O cartão inteiro é link, e a borda clara (1,52:1) não pode ser o único
   sinal disso: quem identifica o controle é o título na cor de link
   (7,75:1 no claro, 11,48:1 no escuro). A borda vira decoração. */
.nav-jogos__titulo {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--texto-base);
  line-height: var(--linha-apertada);
  color: var(--cor-link);
}
.nav-jogos__detalhe {
  display: block;
  font-family: var(--fonte-tabela);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}
/* Sem par do outro lado (primeiro/último jogo do acervo): a célula fica, com
   o motivo escrito. Sumir com ela desalinha a grade e esconde o fato de que
   ali termina o acervo. */
.nav-jogos__vazio {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--e-3) var(--e-4);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-caixa);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

/* ---- 5. Ficha em blocos ----------------------------------------------
   Rótulo em cima, valor embaixo: valor longo ("Campina Grande, PB, Brasil")
   deixa de disputar largura com o rótulo em coluna estreita. */
.ficha--blocos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0 var(--e-5);
}
.ficha--blocos .ficha__linha {
  display: block;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--cor-borda);
}
.ficha--blocos dt { padding-top: 0; margin-bottom: 2px; }
.ficha--blocos dd { line-height: var(--linha-apertada); }
.ficha__nota {
  display: block;
  font-size: var(--texto-sm);
  line-height: var(--linha-normal);
  color: var(--cor-texto-suave);
}

/* ---- 6. Retrospecto: barra V/E/D -------------------------------------
   🚫 Sem verde. Vermelho, branco e preto — a sequência da bandeira do clube,
   nesta ordem.

   A escolha também resolve acessibilidade sem truque: as luminâncias são
   0,15 / 1,00 / 0,007, três níveis bem separados, então a barra continua
   legível impressa em cinza e para daltônicos. Não precisa de hachura.

   A fatia branca depende do contorno do `.barra-ved` e das divisórias entre
   partes para existir — sem eles, ela some no fundo claro. Não remover.
   Os números vão escritos na legenda: cor nunca é o único portador. */
.barra-ved {
  display: flex;
  height: 1.25rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  overflow: hidden;
  margin: var(--e-2) 0 var(--e-3);
}
.barra-ved__parte { display: block; height: 100%; }
.barra-ved__parte + .barra-ved__parte { border-left: 1px solid var(--cor-borda-forte); }
.barra-ved__parte--vitoria { background: var(--ved-vitoria); }
.barra-ved__parte--empate  { background: var(--ved-empate); }
.barra-ved__parte--derrota { background: var(--ved-derrota); }

.legenda-ved {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--fonte-tabela);
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
}
.legenda-ved li {
  display: grid;
  grid-template-columns: 0.9rem 1fr auto auto;
  align-items: center;
  gap: var(--e-2);
  padding: 1px 0;
}
.legenda-ved__amostra {
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 2px;
}
.legenda-ved__amostra--vitoria { background: var(--ved-vitoria); }
.legenda-ved__amostra--empate { background: var(--ved-empate); }
.legenda-ved__amostra--derrota { background: var(--ved-derrota); }
.legenda-ved__pct { color: var(--cor-texto-suave); }

/* ---- 7. Lista compacta de jogos (coluna lateral) --------------------- */
.lista-jogos {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--fonte-tabela);
  font-variant-numeric: tabular-nums;
}
.lista-jogos li + li { border-top: 1px solid var(--cor-borda); }
.lista-jogos a {
  display: grid;
  grid-template-columns: 2.8rem 1fr auto;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-1);
  color: var(--cor-texto);
}
.lista-jogos a:visited { color: var(--cor-texto); }
.lista-jogos a:hover { background: var(--cor-fundo-alt); border-bottom-color: transparent; }
.lista-jogos__ano { color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.lista-jogos__confronto { line-height: var(--linha-apertada); color: var(--cor-link); }
.lista-jogos__placar { font-weight: 600; white-space: nowrap; }

/* ---- 8. Tabela de jogos ---------------------------------------------- */
.tabela-jogos td { vertical-align: top; }
.tabela-jogos .col-ano { width: 4rem; }
.tabela-jogos .col-placar { width: 4rem; white-space: nowrap; font-weight: 600; }
.tabela-jogos .col-res { width: 5.5rem; }
.tabela-jogos__contexto {
  display: block;
  font-size: var(--texto-xs);
  line-height: var(--linha-apertada);
  color: var(--cor-texto-suave);
}
/* Linha mais alta no toque: alvo de 44px sem inchar o desktop. */
@media (max-width: 48rem) {
  .tabela-jogos td { padding-top: var(--e-3); padding-bottom: var(--e-3); }
}

/* ---- 9. Cadeia de links de contexto ---------------------------------- */
.contexto-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--texto-sm);
}
.contexto-lista li { padding: var(--e-2) 0; border-bottom: 1px solid var(--cor-borda); }
.contexto-lista li:last-child { border-bottom: 0; }
.contexto-lista__rotulo {
  display: block;
  font-family: var(--fonte-tabela);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
}
.contexto-lista__valor {
  font-size: var(--texto-base);
  line-height: var(--linha-apertada);
}
.contexto-lista__detalhe {
  display: block;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}

/* ---- 10. Home: abertura ---------------------------------------------- */
.abertura {
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-left: 5px solid var(--cor-marca);
  border-radius: var(--raio-caixa);
  padding: var(--e-5);
  margin-bottom: var(--e-5);
}
.abertura h1 { margin-bottom: var(--e-2); }
.abertura__linha { margin-bottom: 0; }

.numeros {
  list-style: none;
  margin: var(--e-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--e-3);
}
.numeros__valor {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--texto-xl);
  font-weight: 600;
  line-height: var(--linha-apertada);
  font-variant-numeric: tabular-nums;
}
.numeros__rotulo {
  display: block;
  font-family: var(--fonte-tabela);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
}

/* ---- 11. Home: cartão da última partida ------------------------------ */
.ultima-partida {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-2) var(--e-4);
  align-items: center;
  border: 1px solid var(--cor-borda);
  border-left: 5px solid var(--spfc-vermelho-fibra);
  border-radius: var(--raio-caixa);
  padding: var(--e-4);
  margin-bottom: var(--e-5);
  color: var(--cor-texto);
}
.ultima-partida:visited { color: var(--cor-texto); }
.ultima-partida:hover {
  background: var(--cor-fundo-alt);
  border-color: var(--cor-borda-forte);
  border-left-color: var(--spfc-vermelho-fibra);
}
@media (min-width: 44rem) {
  .ultima-partida { grid-template-columns: 1fr auto; }
}
.ultima-partida__rotulo {
  display: block;
  font-family: var(--fonte-tabela);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cor-texto-suave);
}
.ultima-partida__confronto {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--texto-lg);
  line-height: var(--linha-apertada);
  font-variant-numeric: tabular-nums;
  color: var(--cor-link);
}
.ultima-partida__detalhe {
  display: block;
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}
/* Placar e selo juntos, à direita: o olho procura o resultado num lugar só. */
.ultima-partida__resultado {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.ultima-partida__placar {
  font-family: var(--fonte-display);
  font-size: var(--texto-2xl);
  font-weight: 700;
  line-height: var(--linha-apertada);
  font-variant-numeric: tabular-nums;
}

/* ---- 12. Home: navegação por data ("Neste dia") ----------------------
   Sem JavaScript: dois links de 44px levam ao dia anterior e ao seguinte.
   Um seletor de data exigiria script; navegação sequencial não exige. */
.nav-dia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin: var(--e-4) 0;
}
.nav-dia__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-caixa);
  font-family: var(--fonte-tabela);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-link);
}
.nav-dia__link:visited { color: var(--cor-link); }
.nav-dia__link:hover {
  background: var(--cor-fundo-alt);
  border-color: var(--cor-borda-forte);
}

/* ---- 13. Estado vazio ------------------------------------------------
   Um dos dias do calendário não tem jogo nenhum na história do clube. O
   vazio explica o acervo e oferece saída, em vez de deixar buraco branco. */
.estado-vazio {
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-caixa);
  background: var(--cor-fundo-alt);
  padding: var(--e-5);
  text-align: center;
  color: var(--cor-texto-suave);
}
.estado-vazio p:last-child { margin-bottom: 0; }

/* ---- 14. O que ainda não existe no acervo ----------------------------
   Seção 3 do CLAUDE.md. Gols, escalações, jogadores e títulos não estão na
   base — então não ganham seção fingindo dado. Ganham esta lista, que
   declara a ausência com o denominador do lado. */
.pendencias {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--texto-sm);
}
.pendencias li {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--cor-borda);
}
.pendencias li:last-child { border-bottom: 0; }
.pendencias__estado {
  font-family: var(--fonte-tabela);
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- 15. Ajustes finos ----------------------------------------------- */
.cobertura p:last-child { margin-bottom: 0; }
.selo { white-space: nowrap; }

/* Texto só para leitor de tela: caption de tabela e nome do resultado onde
   o selo mostra só a inicial. Nunca esconder informação que a vista precisa. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 40rem) {
  .abertura { padding: var(--e-4); }
  .jogo-cabecalho { padding: var(--e-4); }
  .nav-jogos__item--proximo { text-align: left; }
}