/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Adicione este bloco 👇 */
body {
  background-color: #dee8f7; /* Cor de fundo para a página inteira */
  font-family: Arial, sans-serif; /* Dica: É uma boa prática definir uma fonte base para a página */
}

/* Container central */
.container {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 10px;
}

/* Cabeçalho */
.cabecalho {
  background: linear-gradient(90deg, #0da143, #ffdf00); /* verde e amarelo */
  padding: 10px 1px;
  border-radius: 8px;
  color: #000000;
}

/* Layout do título e imagem */
.logo-titulo {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.logo {
  width: 120px;
  height: auto;
  object-fit: contain;
  margin-right: -15px;
}

.titulo-topo h1 {
  font-size: 1.8em;
  margin-bottom: 5px;
}

.subtitulo {
  font-size: 1em;
  color: #222;
}

/* Menu */
.menu {
  background: linear-gradient(90deg, #0da143, #ffdf00); /* verde e amarelo */
  padding: 10px 0;
  border-radius: 8px;
  margin-top: 1px;
}

.menu ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  list-style: none;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.menu li {
  font-size: 1em;
  font-weight: 500;
  color: #000000;
}

.menu a {
  text-decoration: none;
  color: #333;
  transition: color 0.3s;
}

.menu a:hover {
  color: #ffffff;
}

/* Filtro */
.filtro {
  background: #ffffff;
  display: flex;
  justify-content: space-around; /* espaçamento equilibrado */
  padding: 10px 0; /* padding para espaçamento interno */
  border-radius: 8px;
  margin-top: 1px;
  width: 100%; /* ocupa toda a largura do container */
  max-width: 800px;
}

.aba {
  background: none;
  border: none;
  font-size: 1em;
  font-weight: 500;
  color: #333;
  padding: 4px 10px;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.aba::after {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: transparent;
  position: absolute;
  bottom: -4px;
  left: 0;
  transition: background 0.3s;
}

.aba:hover {
  color: #0da143;
}

.aba.ativa {
  color: #0da143;
}

.aba.ativa::after {
  background: #0da143;
}

/* --- Seção de Partidas --- */

.partidas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Cria duas colunas */
  gap: 15px; /* Espaço entre os cards */
  margin-top: 15px; /* Espaço acima da grade de cards */
  width: 100%;
}

.partida-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Garante que os cantos arredondados funcionem */
  display: flex;
  flex-direction: column;
}

.card-header {
  background-color: #1e3a8a; /* Um azul escuro similar ao da imagem */
  color: #ffffff;
  padding: 12px;
  font-size: 0.9em;
  font-weight: 500;
  text-align: center;
}

.card-body {
  padding: 20px; /* Espaçamento interno do corpo do card */
  flex-grow: 1; 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.matchup {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 120px; /* Largura para ajudar no alinhamento */
}

.team img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.team span {
  font-weight: bold;
  font-size: 1em;
  color: #333;
  text-align: center;
}

/* Estilo para o link do time */
.team-link {
  text-decoration: none; /* Remove o sublinhado */
  color: inherit; /* Faz o texto herdar a cor do elemento pai */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.vs {
  font-size: 1.2em;
  font-weight: bold;
  color: #888;
}

.stadium {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 0.9em;
  color: #555;
  margin-top: auto; /* Empurra para o final do card */
}

/* Estilo para o ícone do estádio */
.stadium .material-symbols-outlined {
  font-size: 1.2em; /* Deixa o ícone um pouco maior que o texto */
  transform: translateY(2px); /* Ajusta a posição vertical do ícone */
}

/* Ajusta o corpo do card para empurrar o estádio para baixo */
.card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Novo container para o conteúdo principal do card */
.match-content {
  flex-grow: 1; /* Faz esta área crescer e ocupar o espaço */
}

/* --- Estilos do Status da Partida (Ajustado) --- */
.match-status {
  margin-top: -10px; /* Espaço entre o conteúdo principal e o status */
  margin-bottom: 1px; /* Espaço entre o status e o confronto */
  padding: 3px 10px;   /* Status menor */
  border-radius: 12px;
  font-size: 0.65em;   /* Fonte menor */
  font-weight: bold;
  text-transform: uppercase;
  /* Centraliza o status */
  display: table;
  margin-left: auto;
  margin-right: auto;
}

/* Cores para cada status */
.status-agendado, .status-timed {
  background-color: #17a2b8; /* Azul info */
  color: white;
}
.status-ao_vivo, .status-em_andamento, .status-live, .status-in_play {
  background-color: #28a745; /* Verde sucesso */
  color: white;
  animation: pulse 1.5s infinite;
}
.status-pausado, .status-paused {
  background-color: #ffc107; /* Amarelo aviso */
  color: #212529;
}
.status-finalizado, .status-finished {
  background-color: #6c757d; /* Cinza secundário */
  color: white;
}
.status-adiado, .status-suspenso, .status-cancelado,
.status-postponed, .status-suspended, .status-canceled {
  background-color: #dc3545; /* Vermelho perigo */
  color: white;
}

/* Animação de pulso para status "Ao Vivo" */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

/* --- Estilos do Placar (Últimos Resultados) --- */
.score {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
}

.score-gols {
  font-size: 2em; /* Tamanho grande para os números */
  color: #333;
}

.score-separator {
  font-size: 1.5em;
  color: #888;
}

/* --- Estilos da Tabela de Classificação --- */
.tabela-classificacao {
  width: 100%;
  border-collapse: collapse; /* Remove o espaço entre as bordas das células */
  background-color: var(--cor-card);  /* Cor de fundo do card */
  border-radius: 8px;
  overflow: hidden; /* Garante que o border-radius funcione */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
  font-size: 14px; /* Tamanho da fonte para a tabela */
}

.tabela-classificacao th,
.tabela-classificacao td {
  padding: 12px 8px;
  text-align: center;
}

/* ADICIONE ESTA NOVA REGRA */
.tabela-classificacao tbody tr {
  border-bottom: 1px solid #e0e0e0;
}

.tabela-classificacao thead th {
  background-color: var(--cor-card); /* Cor de fundo do cabeçalho */
  color: var(--cor-texto);
  font-size: 0.8em;
  text-transform: uppercase;
}

.tabela-classificacao tbody tr:last-child td {
  border-bottom: none; /* Remove a borda da última linha */
}

.tabela-classificacao .time-info {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
}

.escudo-tabela {
  width: 24px;
  height: 24px;
}

.tabela-classificacao .pontos {
  font-weight: bold;
  font-size: 1.1em;
}

/* SUBSTITUA sua regra .posicao por esta */
.tabela-classificacao .posicao {
  position: relative; /* Essencial para posicionar a barrinha */
  padding-left: 15px; /* Cria espaço para a barrinha não ficar sobre o número */
  font-weight: bold;
}

/* ADICIONE esta nova regra */
.tabela-classificacao .posicao::before {
  content: '';
  position: absolute;
  left: 5px; /* Distância da borda esquerda da célula */
  top: 50%; /* Centraliza na vertical */
  transform: translateY(-50%); /* Ajuste fino da centralização vertical */
  width: 4px; /* Largura da barrinha */
  height: calc(100% - 16px); /* Altura da barrinha (um pouco menor que a célula) */
  border-radius: 2px; /* Cantos arredondados */
}

/* Cores das posições */
.pos-libertadores::before { background-color: #007bff; }
.pos-pre-libertadores::before { background-color: #F59E0B; }
.pos-sulamericana::before { background-color: #10B981; }
.pos-rebaixamento::before { background-color: #dc3545; }
.pos-meio-tabela::before { background-color: #e0e0e0; }

/* --- Estilos Responsivos para a Tabela de Classificação --- */
/* 1. Prepara o container para a rolagem horizontal */
.tabela-container {
  overflow-x: auto; /* A MÁGICA ACONTECE AQUI */
  -webkit-overflow-scrolling: touch; /* Melhora a experiência de scroll no iOS */
}

/* --- Estilos da Legenda da Tabela --- */
.legenda-tabela {
  background-color: var(--cor-card); /* Cor de fundo do card */
  padding: 20px;
  margin-top: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.legenda-tabela h3 {
  margin: 0 0 10px 0;
  font-size: 1em;
  font-weight: bold;
}

.legenda-tabela ul {
  list-style: none; /* Remove os marcadores da lista */
  display: flex;
  flex-wrap: wrap;
  gap: 15px 20px;
  padding: 0;
}

.legenda-tabela li {
  display: flex;
  align-items: center;
  font-size: 0.9em;
}

.cor-legenda {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  margin-right: 8px;
}

/* Usando as mesmas cores das posições, mas no background */
.cor-legenda.pos-libertadores { background-color: #007bff; }
.cor-legenda.pos-pre-libertadores { background-color: #F59E0B; }
.cor-legenda.pos-sulamericana { background-color: #10B981; }
.cor-legenda.pos-rebaixamento { background-color: #dc3545; }

/* Estilos para o Seletor Secundário (Tabela/Artilharia) */
.seletor-secundario {
  display: flex;
  justify-content: center;
  gap: 5px; /* Diminui o espaço entre os botões */
  margin: 0 auto -10px auto; /* Centraliza o container e dá margem inferior */
  background-color: #e9ecef; /* Um fundo sutil para o container */
  border-radius: 20px; /* Cantos arredondados no container */
  padding: 5px;
  width: fit-content; /* Faz o container ter a largura do conteúdo */
}

.seletor-secundario button {
  background-color: transparent; /* Botão inativo fica transparente */
  border: none; /* Remove a borda */
  border-radius: 15px;
  padding: 6px 14px; /* Diminui o padding */
  font-size: 0.85em; /* Diminui a fonte */
  font-weight: 600; /* Fonte um pouco mais forte */
  color: #333; /* Cor do texto do botão inativo */
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Estilo do botão ativo (o selecionado) */
.seletor-secundario button.ativo {
  background-color: #ffffff; /* Fundo branco para destacar */
  color: #0da143; /* Cor principal do seu site */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* --- Rodapé --- */
.rodape {
  text-align: center;
  margin-top: 20px; /* Espaço entre os cards e o rodapé */
  padding: 20px 0; /* Espaçamento interno do rodapé */
  border-top: 1px solid #e0e0e0; /* Linha sutil para separar */
  font-size: 0.9em; /* Fonte um pouco menor */
  color: #666666; /* Cor de texto acinzentada */
}

/* --- Ajustes Responsivos para os Cards --- */

@media (max-width: 768px) {
  .partidas-grid {
    grid-template-columns: 1fr; /* Uma coluna em telas menores */
  }
}

/* Responsivo */
@media (max-width: 600px) {
  .titulo-topo h1 {
    font-size: 1.3em;
  }

  .subtitulo {
    font-size: 0.95em;
  }

  .logo {
    width: 100px;
    margin-left: -10px;  /* ajusta a margem para centralizar melhor */
    margin-right: -15px; /* ajusta a margem para centralizar melhor */
  }

  .filtro {
    flex-wrap: nowrap;   /* força uma linha só no mobile */
  }

  .aba {
    font-size: 0.92em;          /* diminui a fonte no mobile */
    padding: 6px 8px;           /* ajusta o padding dos botões */
    white-space: nowrap;        /* impede quebra de texto */
  }

  /* Diminui a fonte e o espaçamento da tabela no mobile */
  .tabela-classificacao {
      font-size: 12px; /* Reduz a fonte base da tabela */
  }

  .tabela-classificacao th,
  .tabela-classificacao td {
      padding: 9px 5px;   /* Espaçamento interno menor */
      white-space: nowrap; /* Impede que o texto quebre linha e force a rolagem */
  }

  .escudo-tabela {
      width: 20px;
      height: 20px;
  }
}