/* Adicione no TOPO do seu arquivo style.css */
/* ADICIONE ESTA NOVA REGRA */
html {
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

/* --- ESTILOS PARA TRANSIÇÃO DE PÁGINA --- */

/* Animação de entrada (fade-in) */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Classe que será adicionada via JavaScript para a animação de saída (fade-out) */
body.fade-out {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

body {
	 opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
  font-family: Arial, sans-serif;
  color: #fff;
  margin: 0;
  padding: 0;
   background-image: url('imagens/background2.jpg'); /* Define a imagem de fundo principal */
  background-size: cover; /* Faz a imagem cobrir toda a tela */
  background-position: center; /* Centraliza a imagem */
  background-attachment: fixed; /* Deixa a imagem de fundo fixa ao rolar a página */

    overflow-x: hidden;
}

body:not(.disable-hover) a {
color: inherit; /* Mantém a cor original do texto, a menos que especificado de outra forma /
text-decoration: none; / Remove o sublinhado padrão /
transition: color 0.3s ease-in-out; / Transição suave para futura mudança de cor */
}

body:not(.disable-hover) a:hover {
text-decoration: underline; /* Adiciona o sublinhado ao passar o mouse */
}

body:not(.disable-hover) .link-artista:hover {
color: #4ffcba; /* Exemplo de mudança de cor para links de artista */
}

body:not(.disable-hover) .ranking-item a:hover h3,
body:not(.disable-hover) .artista-card:hover h3 {
color: #4ffcba; /* Exemplo de mudança de cor para títulos de itens linkados */
}

header {
  background-image: url('imagens/background.jpg');
  background-size: cover;
  background-position: center;
  /* Define um espaçamento apenas no topo, deixando-o mais compacto */
  padding: 15px 0 0 0; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Estilo para a imagem do logo no cabeçalho */
.header-logo {
  max-height: 150px; /* Reduz a altura máxima para o logo ficar menor */
  width: auto;      /* A largura se ajusta para não distorcer */
  margin-bottom: 0px; /* Espaço entre o logo e o menu de navegação */
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; 

}

.header-logo:hover {
  /* Aumenta levemente o tamanho do logo */
  transform: scale(1.05); 
  /* Adiciona um brilho branco semi-transparente ao redor do logo */
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7)); 
}

footer {
  padding: 15px;
  text-align: center;
   background-image: url('imagens/background2.jpg'); /* Define a imagem de fundo do header */
  background-size: cover;
  background-position: center;
  padding: 20px 15px; /* Aumenta um pouco o padding para o logo respirar */
  position: relative; /* Necessário para centralizar o logo */
  display: flex;
  flex-direction: column;
  align-items: center;
}

a {
  color: #1e90ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

main {
  padding: 20px;
}

.album {
  position: relative; /* Adicione esta linha */
  background-color: #333;
  padding: 10px;
  border-radius: 10px;
  width: 200px;
  text-align: center;
  color: #fff;
}

.album img {
  width: 100%;
  border-radius: 10px;
}

.nota-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1.5rem;
  color: #fff;
  margin-top: 5px;
}

.nota-badge-pequena {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;   /* menor que o badge da home */
  height: 40px;  /* menor que o badge da home */
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.2rem;
  color: #fff;
  margin-left: 5px;
}

/* --- Estilos para a Página da Pessoa --- */

#detalhes-pessoa {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.pessoa-container {
  background-color: #333;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 600px; /* Limita a largura máxima para telas grandes */
  box-sizing: border-box;
}

.pessoa-header {
  display: flex;
  justify-content: space-between; /* Coloca a info de um lado e o filtro do outro */
  align-items: center;
  flex-wrap: wrap; /* Permite que os itens quebrem linha em telas menores */
  gap: 20px; /* Espaço entre os itens se quebrarem a linha */
  border-bottom: 1px solid #444; /* Linha separadora */
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.pessoa-info {
  display: flex;
  align-items: center;
  gap: 15px; /* Espaço entre a foto e o nome */
}

.pessoa-info img {
  width: 80px;
  height: 80px;
  border-radius: 50%; /* Deixa a foto redonda, mais moderno */
  object-fit: cover;
}

.pessoa-info h2 {
  margin: 0; /* Remove margem padrão do h2 */
  font-size: 2rem;
}

.filtro-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

#lista-albuns-pessoa {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#lista-albuns-pessoa li {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #444;
}

#lista-albuns-pessoa li:last-child {
  border-bottom: none; /* Remove a borda do último item */
}

/* --- Estilos para a Página do Álbum --- */

#detalhes-album {
  display: flex;
  justify-content: center;
  width: 100%;
}

.album-detail-container {
  background-color: #333;
  border-radius: 10px;
  padding: 25px;
  width: 100%;
  max-width: 920px;
  box-sizing: border-box;
}

.album-header {
  display: flex;
  align-items: center;
  gap: 25px;
  border-bottom: 1px solid #444;
  padding-bottom: 20px;
  margin-bottom: 15px;
}

.album-header img {
  width: 180px;
  height: 180px;
  border-radius: 10px;
  object-fit: cover;
}

/* --- Ajuste para o título do álbum em telas menores --- */
@media (max-width: 600px) {
  .album-info h2 {
    font-size: 1.5rem; /* Diminui um pouco a fonte */
  }
}

.album-info p {
  margin: 0 0 15px 0;
  font-size: 1rem; /* Reduzido de 1.1rem */
  color: #ccc;
}

.avaliacoes-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.avaliacoes-list h3 {
  margin-top: 10px;
  font-size: 1.3rem; /* Reduzido de 1.5rem */
}

.avaliacoes-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 5px;
  border-bottom: 1px solid #444;
}

.avaliacoes-list li:last-child {
  border-bottom: none;
}

.avaliador-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avaliador-info img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}

.avaliador-info a {
  font-weight: bold;
  font-size: 1rem; /* Reduzido de 1.1rem */
}

/* --- Estilos do Menu de Navegação --- */
/* DEIXE A REGRA DEIXE DESTA FORMA */
nav {
  background-color: rgba(20, 20, 20, 0.8); 
  backdrop-filter: blur(5px);
  padding: 10px 0;
  border-bottom: 1px solid #444;
  text-align: center;
  width: 100%; /* Garante que a barra ocupe toda a largura */
  position: relative; /* Adicione esta linha */
  z-index: 200;       /* Adicione esta linha */
}

nav > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 30px;
}

nav a {
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

nav a:hover {
  background-color: #333;
  text-decoration: none;
}

/* Classe para destacar a página ativa */
nav a.active {
  background-color: #1e90ff;
}

/* --- Estilos da Página de Avaliadores --- */
#lista-avaliadores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start; /* CORREÇÃO: Impede que as linhas estiquem verticalmente */
  gap: 20px;
  padding-top: 20px;
}

.avaliador-card {
  background-color: #333;
  padding: 20px;
  border-radius: 10px;
  width: 180px;
  text-align: center;
  color: #fff;
  transition: transform 0.2s, background-color 0.2s;
}

.avaliador-card:hover {
  transform: translateY(-5px);
  background-color: #444;
  text-decoration: none;
}

.avaliador-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #555;
}

.avaliador-card h3 {
  margin-top: 15px;
}

/* --- Estilos da Página de Rankings --- */
.main-full-width {
  display: block;
  max-width: 900px;
  margin: 0 auto;
}

#abas-ano, #abas-ano-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.aba-ano {
  background-color: #333;
  color: #fff;
  border: 2px solid #555;
  padding: 8px 15px; /* Aumenta o espaçamento para alinhar com os filtros */
  border-radius: 20px; /* Borda mais arredondada para combinar */
  cursor: pointer;
  font-size: 0.8rem;   /* Fonte um pouco maior e mais legível */
  font-weight: bold;
  transition: background-color 0.3s, border-color 0.3s;
}

.aba-ano:hover {
  background-color: #444;
  border-color: #777;
}

.aba-ano.active {
  background-color: #1e90ff;
  border-color: #1e90ff;
}

/* Aplica o mesmo estilo de container para ambas as páginas de ranking */
#ranking-do-ano,
#ranking-artistas-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ranking-item {
  display: flex;
  align-items: center;
  background-color: #333;
  padding: 10px;
  border-radius: 8px;
  color: #fff;
  transition: background-color 0.2s;
}

.ranking-item:hover {
  background-color: #444;
  text-decoration: none;
}

.ranking-item img {
  width: 70px;
  height: 70px;
  border-radius: 5px;
  object-fit: cover;
}

.ranking-posicao {
  font-size: 1.5rem;
  font-weight: bold;
  color: #888;
  width: 40px;
  text-align: center;
}

.ranking-info {
  flex-grow: 1;
  margin: 0 15px;
}

.ranking-info h3 {
  margin: 0 0 5px 0;
}

.ranking-info p {
  margin: 0;
  color: #ccc;
}

/* --- Estilos para Status de Avaliação (Aberto/Fechado) --- */

/* Efeito de opacidade para álbuns fechados no index */
.album.fechado {
  opacity: 0.65;
  transition: opacity 0.3s ease-in-out;
}

/* O álbum volta ao normal ao passar o mouse por cima */
.album.fechado:hover {
  opacity: 1;
}

/* O "balãozinho" de status */
.status-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  z-index: 10; /* <-- Adicione esta linha */
}

/* Cor para o status "Aberto" */
.status-aberto {
  background-color: #67cb33; /* Verde */
}

/* Cor para o status "Fechado" */
.status-fechado {
  background-color: #e53935; /* Vermelho */
}

/* Correção para o selo de status na página do álbum */
.album-info .status-badge {
  position: static; /* Cancela o 'position: absolute' e o faz se comportar como um elemento normal */
}

/* --- Estilos para os Contêineres de Filtro --- */
.filtros-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
}

.filtro-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.link-artista {
  color: #fff; /* Mesma cor do texto normal */
  text-decoration: none;
}
.link-artista:hover {
  text-decoration: underline; /* Sublinha apenas ao passar o mouse */
}

/* --- Estilos da Página do Artista --- */

#maiores-fas-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fa-item {
  display: flex;
  align-items: center;
  background-color: #333;
  padding: 10px;
  border-radius: 8px;
}

.fa-info {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 15px;
}

.fa-info img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.fa-info h3 {
  margin: 0;
  font-size: 1.1rem;
}

/* --- Ajustes Visuais para a Página do Artista --- */

/* 1. Faz a lista de álbuns do artista se comportar como uma grade flexível */
#lista-albuns-artista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px; /* Adiciona um espaço abaixo do filtro */
}

/* 2. Garante que o container principal tenha um espaçamento no topo */
.main-full-width {
  padding: 20px;
}

/* 3. Melhora o alinhamento e aparência da lista de fãs */
.fa-item {
  gap: 15px; /* Adiciona um espaço entre a posição, a info e a nota */
  color: #fff;
}

/* 4. Garante que o link com o nome do fã fique branco e sem sublinhado */
.fa-info h3 a {
  color: #fff;
  text-decoration: none;
}

.fa-info h3 a:hover {
  text-decoration: underline;
}

/* Nova regra para a grade de álbuns no index e na página do artista */
#lista-albuns, #lista-albuns-artista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding-top: 20px; /* Adiciona um espaço extra abaixo dos filtros */
}

/* --- Estilos da Página de Artistas --- */

/* Reutiliza o estilo de grade da home */
#lista-artistas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.artista-card {
  background-color: #333;
  padding: 15px;
  border-radius: 10px;
  width: 200px;
  text-align: center;
  color: #fff;
  transition: transform 0.2s;
}

.artista-card:hover {
  transform: translateY(-5px);
  text-decoration: none;
}

.artista-card img {
  width: 170px;
  height: 170px;
  border-radius: 50%; /* Deixa a imagem redonda */
  object-fit: cover;   /* Garante que a imagem preencha o círculo */
  border: 4px solid #444;
  background-color: #222; /* Fundo para imagens que não carregam */
}

.artista-card h3 {
  margin: 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Estilos para a Seção Artistas Favoritos --- */
#artistas-favoritos-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.artista-favorito-item {
  display: flex;
  align-items: center;
  background-color: #2c2c2c; /* Um pouco mais claro para diferenciar */
  padding: 10px;
  border-radius: 8px;
}

.artista-favorito-info {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 15px;
}

.artista-favorito-info img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.artista-favorito-info h3 {
  margin: 0;
  font-size: 1.1rem;
}

.artista-favorito-info h3 a {
  color: #fff;
  text-decoration: none;
}

.artista-favorito-info h3 a:hover {
  text-decoration: underline;
}

/* --- Novos Estilos para a Página da Pessoa (Layout de 2 Blocos) --- */

/* O header da pessoa agora é um bloco separado */
.pessoa-header {
  background-color: #333;
  border-radius: 10px;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto 20px auto; /* Centraliza o header e adiciona margem abaixo */
}

/* Estilo para cada um dos blocos/cards */
.coluna-bloco {
  background-color: #333;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
}

.coluna-avaliacoes {
  flex: 3; /* Alterado de 2 para 1.5 para dar mais espaço à coluna direita */
  min-width: 700px; /* Reduzindo um pouco para ajudar na flexibilidade */
}

.coluna-top-artistas {
  flex: 1;
  min-width: 400px;
}

/* Reutiliza o estilo das abas que já temos */
#abas-ano-pessoa {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}

/* Ajusta o título da seção de Top Artists */
.coluna-top-artistas h3 {
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #444;
}

.coluna-avaliacoes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 10px;
}

/* Garante que o card do avaliador possa posicionar o selo */
.avaliador-card {
  position: relative;
  /* ... outros estilos ... */
}

/* Aplica o efeito de opacidade e escala de cinza ao card com status OFF */
.avaliador-card.status-off {
  opacity: 0.6;
  filter: grayscale(80%); /* Efeito extra opcional */
}

/* Cores para os selos */
.status-on {
  background-color: #67cb33; /* Verde */
}

.status-off {
  background-color: #888; /* Cinza */
}

/* --- Estilos para o Perfil do Artista --- */

#artista-profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
  padding: 20px;
  background-color: #333; /* Adiciona um fundo para destacar */
  border-radius: 10px;
}

#artista-profile-header img {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Deixa a imagem redonda */
  object-fit: cover;
  border: 4px solid #444;
}

#artista-profile-header h1 {
  font-size: 2rem;
  margin: 0;
  font-weight: bold;
}

/* Media query para telas menores */
@media (max-width: 600px) {
  #artista-profile-header {
    flex-direction: column;
    text-align: center;
  }

  #artista-profile-header h1 {
    font-size: 2.2rem;
  }
}

/* --- NOVOS ESTILOS PARA OS FILTROS --- */

/* Estiliza o texto "Mostrar:" e "Ordenar por:" */
.filtro-item label {
  font-weight: bold;
  color: #ccc;
}

/* O container de cada filtro, para posicionar a nova seta */
.filtro-item {
  position: relative;
}

/* A estilização principal do menu de seleção (SELETOR CORRIGIDO) */
/* Em style.css, adicione ou modifique esta regra para os selects */
.filtro-item select {
    padding: 6px 12px; /* Reduz o padding para um tamanho base menor */
    border-radius: 18px; /* Combina com os botões */
    border: 2px solid #555;
    background-color: #1e90ff;
    color: #fff;
    font-size: 0.85rem; /* Reduz um pouco a fonte */
    appearance: none; /* Remove a seta padrão do navegador */
    -webkit-appearance: none; /* Para navegadores Webkit (Chrome, Safari) */
    -moz-appearance: none; /* Para navegadores Mozilla (Firefox) */
    cursor: pointer;
    background-size: 10px; /* Ajusta o tamanho da seta SVG */
    padding-right: 30px; /* Garante espaço para a seta personalizada */
}

/* A nova seta personalizada (▼) */
.filtro-item::after {
  content: '▼';
  font-size: 0.8em;
  color: #fff;
  position: absolute;
  right: 15px; /* Posição da seta */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Impede que a seta bloqueie o clique no menu */
}

/* --- Estilos para os Blocos de Ranking --- */

/* Container para os ranks na página do álbum */
.album-ranks {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

/* Estilo individual para cada caixa de rank */
.rank-box {
  background-color: #444;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  flex-grow: 1; /* Faz as caixas dividirem o espaço */
}

/* Estilo para a caixa de rank na página do artista */
.artista-info-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.artist-rank-box {
  background-color: #444;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
}

/* Estilo para o número do rank (ex: #1, #4) */
.rank-value {
 display: block;
  font-size: 1.5rem; /* Reduzido de 1.8rem para caber o texto */
  font-weight: bold;
  color: #fff;
}

/* Estilo para o texto do rank (ex: 2025 Rank) */
.rank-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #ccc;
}

/* --- Estilos para a Média Geral no Header --- */

.header-average-score {
  text-align: center;
}

.header-average-score span {
  display: block;
  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: bold;
  color: #ccc;
  margin-bottom: 5px;
}

/* Garante o alinhamento correto no perfil do artista */
#artista-profile-header {
  justify-content: space-between;
}

/* --- Estilos para o Contador de Álbuns na Página da Pessoa --- */
.header-titulo-contador {
  display: flex;
  align-items: baseline; /* Alinha o texto na base */
  gap: 15px; /* Espaço entre o título e o contador */
}

#contador-albuns {
  font-size: 0.9em;
  color: #ccc;
  font-weight: normal;
}

/* --- Estilo para a Barra de Pesquisa --- */
.search-container {
  text-align: center;
  margin: 0 auto 10px auto;
  max-width: 400px;
}

#search-artista {
  width: 100%;
  padding: 10px 15px;
  border-radius: 20px;
  border: 2px solid #555;
  background-color: #333;
  color: #fff;
  font-size: 1rem;
  box-sizing: border-box;
}

#search-artista:focus {
  outline: none;
  border-color: #1e90ff;
}

/* --- Estilo para a Porcentagem de Participação --- */

.participation-rate {
    font-size: 1.8rem; /* Tamanho grande, igual ao .rank-value */
    font-weight: bold;
    color: #fff;
    line-height: 1.1; /* Ajusta a altura da linha */
}

/* Garante que o header da pessoa alinhe os 3 itens corretamente */
.pessoa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- RESPONSIVIDADE PARA CELULAR --- */

/* Aplica estas regras em telas com largura máxima de 768px */
@media (max-width: 768px) {

.pendentes-container {
      width: calc(98.00% - 30px);
    padding: 10px;
}


  /* 1. CORREÇÃO DA IMAGEM DE FUNDO */
  body {
    /* Altera o anexo do fundo para 'scroll', o que melhora a performance
       e corrige o problema de zoom excessivo em muitos celulares. */
    background-attachment: fixed;
  }

  /* 2. CORREÇÃO DO MENU DE NAVEGAÇÃO */
  header {
    padding-top: 15px; /* Diminui um pouco o espaçamento do topo */
  }
  .header-logo {
    max-height: 80px;
    margin-bottom: 0px;
  }
  nav ul {
    gap: 5px; /* Diminui drasticamente o espaço entre os links */
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
  }
  nav a {
    font-size: 0.8rem; /* Diminui a fonte dos links do menu */
    padding: 8px 3px;
  }

  /* 3. CORREÇÃO DA GRADE DE ÁLBUNS E ARTISTAS (PARA 3 COLUNAS) */
  main {
    padding: 5px; /* Diminui o espaçamento geral */
  }
  #lista-albuns,
  #lista-artistas {
    gap: 5px; /* Diminui o espaço entre os cards */
  }
  .album, .artista-card {
    /* Define a largura para que 3 cards caibam na tela.
       (33.33% da largura - um pouco de espaço para o gap) */
    width: calc(26.33% - 2px);
    padding: 5px;
  }
  .album h3, .artista-card h3 {
      font-size: 0.8rem; /* Diminui a fonte do nome para não quebrar a linha */
  }
 
  
  /* Adicione esta nova regra após a regra '.album' */
.album p {
  font-size: 0.8rem; /* Diminui o tamanho da fonte do artista e ano */
  margin: 8px 0; /* Ajusta a margem para ficar mais proporcional */
}
  .nota-badge {
      width: 40px;
      height: 40px;
      font-size: 1.1rem;
  }

  /* 4. AJUSTES EM OUTRAS PÁGINAS */
  /* Força layout de coluna única nas páginas de detalhe */
  .pessoa-conteudo-wrapper, #artista-profile-header {
    flex-direction: column;
  }
  .coluna-avaliacoes, .coluna-top-artistas {
    min-width: 100%;
  }
  .main-full-width {
    padding: 10px;
  }
  .ranking-item img {
      width: 50px;
      height: 50px;
  }
  .ranking-info h3 {
      font-size: 1rem;
  }


/* 7. AJUSTE FINO NO TAMANHO DOS FILTROS PARA CELULAR */
  .filtro-item select {
    padding: 5px 30px 5px 15px; /* Diminui o espaçamento interno */
    font-size: 0.6rem; /* Diminui um pouco mais a fonte */
  }

  .filtro-item::after {
    right: 12px; /* Aproxima a seta da borda */
  }

  .filtro-item label {
    font-size: 0.6rem; /* Diminui o texto "Mostrar:" e "Ordenar por:" */
  }
  
  /* --- RESPONSIVIDADE PARA CELULAR --- */

  /* 7. AJUSTE FINO NO TAMANHO DOS FILTROS PARA CELULAR */
  .filtro-item select {
    padding: 5px 28px 5px 12px;
    font-size: 0.8rem;
  }
  .filtro-item::after {
    right: 12px;
  }
  .filtro-item label {
    font-size: 0.85rem;
  }

  /* 8. AJUSTE FINO PARA A GRADE DE ARTISTAS NO CELULAR (NOVO) */
  
  
   .artista-card {
    width: calc(23.33% - 10Px); /* Largura para 3 colunas */
    padding: 10px;
  }
  .artista-card h3 {
    font-size: 0.5rem; /* Diminui a fonte do nome para caber */
  }
  .artista-card img {
    width: 60px; /* Diminui o tamanho da foto */
    height: 60px;
  }
  /* 10. AJUSTE FINO NA PÁGINA DO ÁLBUM PARA CELULAR */

  .album-header {
    /* Coloca a imagem em cima e as informações embaixo */
	align-items: center; /* ADICIONE ESTA LINHA para centralizar tudo */
    flex-direction: column;
    text-align: center;
    gap: 0px; /* Diminui o espaçamento */
  
  }

  .album-header img {
    /* Diminui o tamanho da capa do álbum */
    width: 150px;
    height: 150px;
  }

  .album-info h2 {
    font-size: 1.2rem; /* Ajusta o tamanho do título do álbum */
  }
.album-info .status-badge {
  font-size: 0.5rem; /* Cancela o 'position: absolute' e o faz se comportar como um elemento normal */

}
  .album-ranks {
    justify-content: center; /* Centraliza os cards de rank */
  }

  .avaliacoes-list h3 {
      text-align: center; /* Centraliza o "X Avaliações" */
  }
  /* 9. AJUSTE PARA A GRADE DE AVALIADORES NO CELULAR (3 COLUNAS) */
  .avaliador-card {
    width: calc(23.33% - 15px); /* Largura para 3 colunas */
    padding: 10px;
  }
  .avaliador-card h3 {
    font-size: 0.8rem; /* Diminui a fonte do nome para caber */
  }
  .avaliador-card img {
    width: 60px; /* Diminui o tamanho da foto */
    height: 60px;
  }
  /* 11. CORREÇÃO FINAL DE CENTRALIZAÇÃO NA PÁGINA DO ÁLBUM */

  .album-info {
    /* Garante que o container das infos se alinhe ao centro */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
 
  
  /* 12. Adiciona espaço acima das abas de ano no celular */
  #abas-ano-index {
    margin-top: 10px;
  }
  /* 13. CORREÇÃO PARA NOMES GRANDES DE ÁLBUM NA PÁGINA DA PESSOA */

  #lista-albuns-pessoa li {
    /* Garante que a imagem e a nota tenham tamanhos fixos,
       deixando o nome do álbum com o espaço restante. */
    align-items: flex-start; /* Alinha os itens no topo para melhor visualização */
  }

  #lista-albuns-pessoa li > div {
    /* A div que contém o nome e o artista agora pode encolher se necessário */
    min-width: 0;
  }
  
  #lista-albuns-pessoa li strong {
    /* Permite que o nome do álbum quebre a linha se for muito grande */
    white-space: normal;
    word-break: break-word;
  }
  /* 14. AJUSTE NA LARGURA DA BARRA DE PESQUISA NO CELULAR */

  .search-container {
    /* Define a largura para 95% da tela. 
       O 'margin: 0 auto' herdado da regra geral irá centralizá-lo,
       criando pequenas margens laterais. Ajuste o valor se achar necessário. */
    width: 75%;

    /* Removemos o padding que estava na sua versão anterior,
       pois ele não é mais necessário e simplifica o layout. */
    padding-left: 0;
	padding-top:10px;
    padding-right: 0;
  }
  #search-artista {
  width: 80%;
  padding: 5px 10px;
  border-radius: 15px;
  border: 1px solid #555;
  background-color: #333;
  color: #fff;
  font-size: 0.8rem;
  box-sizing: border-box;
}

#search-artista:focus {
  outline: none;
  border-color: #1e90ff;
}
}

/* --- Estilos para a Seção de Destaques (ADICIONADO) --- */
/* --- Estilos para a Seção de Destaques (VERSÃO CORRIGIDA) --- */
/* --- Estilos para a Seção de Destaques (VERSÃO FINAL) --- */
.destaques-container {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #444;
}

.destaques-container h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 20px;
}

#lista-destaques {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* O container principal do item em destaque */
.destaque-item-wrapper {
  /* Adiciona o fundo escuro e bordas arredondadas ao bloco inteiro */
  background-color: #333;
  border-radius: 10px;
  /* Garante que a largura seja a mesma de um card de álbum */
  width: 200px;
  /* Garante que o item não seja esmagado pelo flexbox */
  flex-shrink: 0;
}

/* O card visível dentro do wrapper */
.destaque-item-wrapper .album {
  /* A largura é 100% para preencher o wrapper, o padding já vem da classe .album */
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

/* Link específico para o título do álbum */
.album-title-link {
  color: #fff !important; /* Garante que a cor seja branca */
  text-decoration: none !important;
}
.album-title-link:hover {
  text-decoration: underline !important;
}

/* Fita de data */
.fita-data {
  position: absolute;
  top: -8px;
  left: -12px;
  background-color: #e53935;
  color: white;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 5px;
  transform: rotate(-8deg);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  z-index: 2;
}

/* A lista expansível */
.faltam-avaliar {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  background-color: #2c2c2c;
  /* A lista agora tem bordas arredondadas apenas na parte de baixo */
  border-radius: 0 0 10px 10px;
  padding: 0 15px;
  /* Largura 100% para se ajustar ao container de 200px */
  width: 100%;
  box-sizing: border-box;
}

.faltam-avaliar.expandido {
  max-height: 400px;
  padding: 15px;
}

.faltam-avaliar h4 {
  margin: 0 0 10px 0;
  text-align: center;
  font-size: 0.9em;
  color: #ccc;
}

.lista-pessoas-faltando {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-pessoas-faltando li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.lista-pessoas-faltando img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  object-fit: cover;
}
/* No final do arquivo style.css */

/* Estilo para o link na lista de pessoas que faltam avaliar */
.link-pessoa-faltando {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff !important;
  text-decoration: none !important;
  width: 100%;
}

.link-pessoa-faltando:hover {
  text-decoration: underline !important;
}

/* No final do arquivo style.css */

/* --- Estilos para o Carrossel de Álbuns Pendentes --- */
.pendentes-container {
    max-width: 1200px;
    margin: 0 auto 30px auto;
    background-color: #333;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}

.pendentes-container h3 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.5rem;
}

.carousel {
    position: relative;
    width: 100%;
    padding: 0 50px; /* Espaço para as setas não ficarem em cima do conteúdo */
    box-sizing: border-box;
}

.carousel-track-container {
    overflow: hidden; /* Esconde o overflow e a barra de rolagem */
    width: 100%;
}

.carousel-track {
    display: flex;
    gap: 15px;
  
}

.carousel-slide {
    flex: 0 0 150px; /* Cada slide tem 150px de largura e não encolhe */
    width: 150px;
    text-decoration: none;
    color: #fff;
    transition: transform 0.2s ease-in-out;
}



.carousel-slide img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    background-color: #222;
}

.slide-info {
    margin-top: 8px;
    text-align: center;
}

.slide-info strong {
    display: block;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slide-info span {
    font-size: 0.8rem;
    color: #ccc;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 10;
}

.carousel-arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-arrow.prev {
    left: 0;
}

.carousel-arrow.next {
    right: 0;
}
/* Em style.css, no final da seção de estilos do carrossel */

/* --- Novos Estilos para Links no Carrossel --- */
.carousel-slide {
    display: flex;
    flex-direction: column;
    flex: 0 0 150px;
    width: 150px;
  
}
.carousel-slide:hover .slide-image-link img {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}

.slide-image-link {
    display: block;
}

.slide-album-link, .slide-artist-link {
    text-decoration: none;
    color: inherit;
}

.slide-album-link:hover, .slide-artist-link:hover {
    text-decoration: underline;
}

.slide-artist-link {
    font-size: 0.8rem;
    color: #ccc;
}

@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	50% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	50% {
		opacity: 1;
	}
}

/* No final do arquivo style.css */

/* Estilo para o link no card de Média Geral */
.header-average-score-link {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease-in-out;
}

.header-average-score-link:hover {
    transform: scale(1.05);
}

/* No final do arquivo style.css */

/* --- Estilos para a Página de Ranking de Avaliadores --- */

/* 1. Adiciona o espaçamento entre os itens do ranking */
/* Em style.css */

/* --- Estilos para a Página de Ranking de Avaliadores (VERSÃO CORRIGIDA) --- */

/* 1. Adiciona o espaçamento entre os itens do ranking */
#ranking-avaliadores-lista {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Define um espaço de 10px entre cada avaliador */
}

/* 2. Estilo para o item do ranking com status OFF */
.ranking-item.status-off {
  opacity: 0.6;
  filter: grayscale(80%);
}

/* SUBSTITUA A REGRA ACIMA POR ESTA: */
#ranking-avaliadores-lista .ranking-item .ranking-info {
  /* Estilo para o container da informação (nome + selo) */
  display: flex;
  align-items: center;
}

/* 4. NOVO ESTILO para o badge com texto longo */
.nota-badge.badge-longo {
    width: auto; /* Largura automática para caber o texto */
    height: auto; /* Altura automática */
    padding: 10px 15px; /* Espaçamento interno */
    font-size: 1.2rem; /* Fonte um pouco menor */
    line-height: 1.2rem; /* Alinhamento vertical */
    border-radius: 8px; /* Bordas um pouco menos arredondadas */
}


/* 5. CORREÇÃO do selo de status (ON/OFF) */
/* Em style.css */

/* SUBSTITUA a regra antiga .ranking-item .status-badge por esta */
.ranking-item h3 .status-badge {
    /* Reseta qualquer posicionamento antigo para garantir */
    position: static;
    transform: none;
    
    /* Estilos corretos */
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    padding: 3px 7px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
}
/* No final do arquivo style.css */

/* --- Estilos para os Filtros de Ano no Ranking de Avaliadores --- */
.filtros-ano-container {
  display: none; /* Começa escondido por padrão */
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

/* Em style.css, dentro da seção de estilos do carrossel */

/* --- Estilos para a funcionalidade de arrastar --- */
.carousel-track-container {
    overflow: hidden;
    width: 100%;
    cursor: grab; /* Mãozinha indicando que pode ser arrastado */
}

.carousel-track-container.active {
    cursor: grabbing; /* Mãozinha fechada enquanto arrasta */
    cursor: -webkit-grabbing;
}

/* Evita que o usuário selecione o texto da imagem enquanto arrasta */
.carousel-track-container .carousel-slide {
    user-select: none;
    -webkit-user-select: none;
}

/* No final do arquivo style.css */

/* --- Estilos para o Menu Suspenso (Dropdown) --- */

/* 1. O container do item de menu (ex: "Artistas", "Avaliadores") */
/* Precisa de position: relative para que o menu suspenso se posicione em relação a ele. */
nav ul li.dropdown-container {
  position: relative;
}

/* 2. O menu suspenso (escondido por padrão) */
.dropdown-menu {
    position: absolute;
  top: 100%; /* Posiciona logo abaixo do item pai */
  left: 0;
  background-color: rgba(20, 20, 20, 0.9); /* Fundo igual ao da barra, um pouco mais opaco */
  backdrop-filter: blur(5px);
  list-style: none;
  padding: 10px 0;
  margin-top: 5px; /* Pequeno espaço entre o menu principal e o dropdown */
  border-radius: 8px;
  min-width: 200px; /* Largura mínima do dropdown */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  z-index: 100; /* <-- ADICIONE ESTA LINHA */

  /* Animação de fade-in */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, margin-top 0.3s ease;
}

/* 3. Mostra o menu quando o mouse passa por cima do container */
nav ul li.dropdown-container:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  margin-top: 10px; /* Desliza um pouco para baixo ao aparecer */
}

/* 4. Estilo dos links dentro do menu suspenso */
.dropdown-menu li a {
  padding: 8px 20px;
  display: block; /* Faz o link ocupar toda a largura do item */
  white-space: nowrap; /* Impede que o texto quebre linha */
  font-size: 0.9rem;
}

.dropdown-menu li a:hover {
  background-color: #333;
}
/* No final do arquivo style.css */

/* --- Estilos para a Fita de Avaliações na seção "Em Reta Final" --- */
.album-content {
    position: relative; /* Garante que as fitas se posicionem em relação a este bloco */
    /* Outros estilos existentes para .album-content... */
}



/* Responsividade para a fita de avaliações em telas menores */
@media (max-width: 768px) {
    .fita-avaliacoes {
        font-size: 0.6rem; /* Diminui ainda mais a fonte */
        padding: 2px 6px; /* Ajusta o padding para telas menores */
    }
}
/* No final do arquivo style.css */

/* --- Correção de Posicionamento da Fita de Avaliações --- */

/* 1. Novo container da capa do álbum */
/* Esta regra é a mais importante: ela define o limite para a fita. */
.album-cover-container {
    position: relative;
    width: 100%; /* Ocupa a largura do card */
}

/* 2. A fita de avaliações (código que você já tem, mas garantindo que está correto) */
/* Agora ela se posicionará em relação ao .album-cover-container */
/* Em style.css */

/* SUBSTITUA a regra antiga .fita-avaliacoes por esta */
.fita-avaliacoes {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: #1e90ff;
    color: #fff;
    padding: 4px 10px; /* Aumentamos um pouco o espaço lateral */
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    z-index: 5;
    white-space: nowrap; /* Impede que o texto quebre a linha */
}

/* No final do arquivo style.css */

/* --- Estilos para Filtros na Página da Pessoa --- */
.filtros-container-pessoa {
    display: flex;
    gap: 15px;
    align-items: center;
}

#search-avaliacoes {
    padding: 8px 15px;
    border-radius: 20px;
    border: 2px solid #555;
    background-color: #333;
    color: #fff;
    font-size: 0.9rem;
    min-width: 250px; /* Largura mínima da barra */
}

#search-avaliacoes:focus {
    outline: none;
    border-color: #1e90ff;
}

/* Ajuste de responsividade para os filtros */
@media (max-width: 768px) {
    .coluna-avaliacoes-header, .filtros-container-pessoa {
        flex-direction: column;
        align-items: stretch;
    }
    #search-avaliacoes {
        min-width: unset;
        width: 100%;
        box-sizing: border-box;
    }
}
.filtro-item.search-box::after {
  content: none;
  display: none;
}
/* No final do arquivo style.css */

/* --- Estilo para o Botão de Toggle da Contagem --- */

/* O botão #toggle-avaliacoes-btn já pega o estilo da classe .aba-ano */
/* Esta regra adicional garante que o texto não fique em maiúsculas se houver outra regra global */
#toggle-avaliacoes-btn {
    text-transform: none;
}

/* Quando o botão estiver ativo, ele terá o mesmo estilo azul dos botões de ano */
#toggle-avaliacoes-btn.active {
    background-color: #1e90ff;
    border-color: #1e90ff;

}
/* No final do arquivo style.css */

/* Remove o triângulo (pseudo-elemento ::after) do container de botões */
.filtro-item-button::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 768px) {
    #lista-destaques {
        gap: 15px; /* Espaço um pouco menor no mobile */
    }

    .destaque-item-wrapper {
        /* Define a largura para que exatamente dois itens caibam na tela */
        width: calc(30% - 7.5px);
    }
	
	.fita-data {
  position: absolute;
  top: -8px;
  left: -12px;
  background-color: #e53935;
  color: white;
  padding: 5px 10px;
  font-size: 0.6rem;
  font-weight: bold;
  border-radius: 5px;
  transform: rotate(-8deg);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  z-index: 2;
}

	.faltam-avaliar {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  background-color: #2c2c2c;
  /* A lista agora tem bordas arredondadas apenas na parte de baixo */
  border-radius: 0 0 10px 10px;
  padding: 0 15px;
  /* Largura 100% para se ajustar ao container de 200px */
  width: 100%;
  box-sizing: border-box;
  font-size:0.6rem;
}

.faltam-avaliar.expandido {
  max-height: 300px;
  padding: 5px;
}
.lista-pessoas-faltando {
  display: flex;
  flex-direction: column;
  gap: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-pessoas-faltando li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
}

.lista-pessoas-faltando img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.fita-avaliacoes {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: #1e90ff;
    color: #fff;
    padding: 4px 7px; /* Aumentamos um pouco o espaço lateral */
    font-size: 0.4rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    z-index: 5;
    white-space: nowrap; /* Impede que o texto quebre a linha */
}

  nav ul li.dropdown-container .dropdown-menu {
    min-width: 160px; /* Reduz a largura mínima para caber melhor */
    left: auto; /* Desativa o alinhamento fixo à esquerda */
    right: 0;   /* Alinha o menu à DIREITA do item pai */
  }

  .dropdown-menu li a {
    white-space: normal; /* Permite que o texto quebre em duas linhas se necessário */
    font-size: 0.85rem;  /* Reduz um pouco a fonte para ajudar */
  }
}


/* No final do arquivo style.css */

/* --- Plano de Fundo Exclusivo para Celular --- */
@media (max-width: 768px) {
  body {
       background: linear-gradient(to right, #2f3798, #1b1b1d); /* Exemplo de gradiente */
	   background-attachment: fixed;
    background-size: cover;
    overflow-x: hidden; /* Mantido para evitar barras de rolagem horizontais */
    position: relative; /* Importante para posicionar o pseudoelemento */
    z-index: 0; /* Garante que o body esteja em uma camada abaixo do grain */
  }
  
  body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* O truque do grain: um radial-gradient muito pequeno e repetitivo */
    background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 2px 2px; /* Tamanho do "grão" - ajuste para maior ou menor granularidade */
    opacity: 0.5; /* Ajuste a opacidade para controlar a intensidade do efeito */
    z-index: 10; /* Coloca o grain acima do gradiente do body */
    pointer-events: none; /* Garante que o grain não interfira com int
}

/* No final do arquivo style.css */

/* --- Estilos para a Lista de Texto de Avaliações (Página do Álbum) --- */

#lista-texto-container {
    max-width: 800px;
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
	 display: none; /* COMEÇA ESCONDIDA */
	 overflow-y: hidden;
}

#btn-gerar-lista {
    padding: 8px 18px;
    font-size: 0.9rem;
    cursor: pointer;
	 display: none; /* COMEÇA ESCONDIDA */
}

/* No final do seu arquivo style.css */

/* SUBSTITUA AS REGRAS DA SUA CAIXA DE TEXTO POR ESTAS: */

/* No final do seu arquivo style.css */

/* SUBSTITUA TODAS AS REGRAS RELACIONADAS A #lista-texto-avaliacoes POR ESTAS: */

#lista-texto-avaliacoes {
    display: none; /* COMEÇA ESCONDIDA */
    width: 100%;
    margin-top: 15px;
    overflow-y: hidden;
    resize: none;
    background-color: #2c2c2c;
    color: #fff;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 15px;
    font-family: monospace;
    font-size: 1rem;
    box-sizing: border-box;
}

#lista-texto-avaliacoes.visivel {
    display: block; /* SÓ APARECE QUANDO O JS ADICIONA ESTA CLASSE */
}
}}

/* --- CORREÇÃO E MELHORIA DO BLOCO DE AFINIDADE NO HEADER --- */

/* 1. Garante que o container se comporte corretamente */
#afinidade-lista-header {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Aumenta um pouco o espaço entre as pessoas */
}

/* 2. Corrige o item de afinidade */
.afinidade-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  transition: background-color 0.2s;
}

.afinidade-item-header:hover {
  background-color: #444;
}

/* 3. Força o tamanho correto da imagem de perfil */
.afinidade-item-header img {
  width: 40px !important;  /* Tamanho correto e !important para evitar conflito */
  height: 40px !important; /* Tamanho correto e !important para evitar conflito */
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0; /* Impede que a imagem encolha */
}

/* 4. Estiliza o container do nome e dos artistas em comum */
.afinidade-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    font-size: 0.9rem;
}

.afinidade-info .nome-avaliador {
    font-weight: bold;
}

/* 5. Estilos para a nova lista de artistas em comum */
.artistas-em-comum {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #ccc;
}

.artistas-em-comum img {
    width: 20px !important; /* Imagens pequenas para os artistas */
    height: 20px !important;
    border-radius: 50%;
    object-fit: cover;
}
/* --- ESTILOS PARA O CABEÇALHO DIVIDIDO (VERSÃO FINAL) --- */

/* --- AJUSTE FINAL DE ALINHAMENTO E TAMANHO DO HEADER --- */


/* 3. O bloco de afinidades agora é um item flexível */
.header-afinidade-bloco {
  background-color: #333; /* Fundo padrão de bloco */
  border-radius: 10px;
  padding: 15px 20px;
  width: 300px; /* Largura fixa */
  flex-shrink: 0; /* Impede que ele encolha */
  display: flex;
  flex-direction: column;
}

.header-afinidade-bloco h3 {
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #444;
  text-align: center;
  font-size: 1rem;
}
/* --- AJUSTE PARA LINKS NOS ARTISTAS EM COMUM --- */

.artistas-em-comum a {
  display: inline-block;
  line-height: 0; /* Remove qualquer espaço extra que o link possa criar */
  border-radius: 50%; /* Garante que o contorno do link seja redondo como a imagem */
}

.artistas-em-comum a:hover img {
  transform: scale(1.1); /* Efeito sutil ao passar o mouse */
  filter: brightness(1.1);
}

/* --- ESTILOS PARA O NOVO LAYOUT DA PÁGINA DE PESSOA --- */

/* 1. Remove a regra antiga que não usamos mais */
.pessoa-header-wrapper {
  /* Esta classe foi removida do HTML, mas é bom limpar o CSS */
  display: none; 
}

/* 2. Garante que o header principal fique bem centralizado */
.pessoa-header {
  max-width: 650px; /* Uma largura máxima confortável para o header */
  margin: 0 auto 20px auto; /* Centraliza horizontalmente e adiciona espaço abaixo */
  flex-grow: 0; /* Impede que ele estique */
}

/* 3. O novo container para "Pendentes" e "Afinidades" */
.meio-wrapper {
  display: flex;
  justify-content: center;
  align-items: stretch; /* Faz os blocos terem a mesma altura */
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto 20px auto;
  flex-wrap: wrap;
}

/* 4. Ajustes nos filhos do meio-wrapper */
.meio-wrapper .pendentes-container {
  flex: 3; /* Faz o carrossel ocupar mais espaço */
  margin-bottom: 0; /* Remove a margem que ele tinha antes */
  max-width: 880px;
}

.meio-wrapper .header-afinidade-bloco {
  flex: 1; /* Faz as afinidades ocuparem o espaço restante */
  width: auto; /* A largura agora é controlada pelo flex */
  max-width: 300px;
}

/* Garante que o container de pendentes apareça corretamente */
#pendentes-container[style*="display: block"] {
    display: flex !important;
    flex-direction: column;
}

/* --- RESPONSIVIDADE PARA TELAS MENORES (CELULAR) - VERSÃO CORRIGIDA E COMPLETA --- */

@media (max-width: 768px) {
    
    /* --- CABEÇALHO DO AVALIADOR --- */
    .pessoa-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .pessoa-header .pessoa-info {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .pessoa-header .pessoa-info h2 {
        margin-top: 10px;
        font-size: 1.5rem;
    }

    /* CORREÇÃO PRINCIPAL: Alinhamento das estatísticas */
    .pessoa-header .header-average-score-link,
    .pessoa-header .header-average-score {
        width: 100%;
        display: flex;
        flex-direction: column; /* Empilha o título e o valor */
        align-items: center;   /* Centraliza horizontalmente */
        gap: 5px;              /* Espaço entre título e valor */
    }

    /* --- BLOCOS DO MEIO (PENDENTES E AFINIDADES) --- */
    .meio-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        max-width: 95%;
    }

    .meio-wrapper .pendentes-container {
        width: 100%;
        max-width: 100%;
        padding: 15px;
        flex: auto;
    }
    
    /* CORREÇÃO PRINCIPAL: Centralização do texto no carrossel */
    .carousel-slide .slide-info {
        text-align: center;
    }

    .meio-wrapper .header-afinidade-bloco {
        width: 100%;
        max-width: 95%;
        padding: 15px;
        margin-left: auto;
        margin-right: auto;
        flex: auto;
    }

    /* --- CONTEÚDO PRINCIPAL (AVALIAÇÕES E TOP ARTISTAS) --- */
    .pessoa-conteudo-wrapper {
        flex-direction: column;
        gap: 15px;
        max-width: 95%;
    }

    .coluna-avaliacoes,
    .coluna-top-artistas {
        width: 100%;
        max-width: 100%;
        padding: 15px;
    }

    /* --- OUTROS AJUSTES DE RESPONSIVIDADE --- */
    .coluna-avaliacoes-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .filtros-container-pessoa {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    #search-avaliacoes,
    #filtro {
        width: 100%;
    }

    #abas-ano-pessoa {
        justify-content: center;
    }
	
	/* --- REORDENAMENTO DAS COLUNAS NO CELULAR --- */
.coluna-top-artistas {
    order: 3;
}

#distribuicao-notas-container.coluna-bloco {
    order: 1;
    width:100%;
}

.coluna-avaliacoes {
    order: 2;
}
	
}

/* --- ESTILOS PARA GRÁFICO DE DISTRIBUIÇÃO DE NOTAS --- */
/* --- ESTILOS PARA GRÁFICO DE DISTRIBUIÇÃO DE NOTAS (11 FAIXAS) --- */

#distribuicao-notas-container.coluna-bloco {
  flex: 1;
  min-width: 280px;
  padding: 20px;
}

#distribuicao-notas-container h3 {
    margin-top: 0; /* Remove o espaço extra no topo do título */
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
    font-size: 1.2em;
    color: #eee;
}

.distribuicao-grafico-completa {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Espaçamento menor entre as barras */
}

.faixa-nota-container-completa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 25px;
}

.faixa-label-completa {
    flex-shrink: 0;
    width: 60px;
    font-size: 0.85rem;
    font-weight: bold;
    text-align: right;
}

.faixa-contagem-completa {
    flex-shrink: 0;
    width: 35px;
    font-size: 0.85rem;
    color: #bbb;
    text-align: center;
}

.faixa-barra-wrapper-completa {
    flex-grow: 1;
    background-color: #2c2c2c;
    border-radius: 3px;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.faixa-barra-completa {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s ease-in-out;
    position: absolute;
    left: 0;
    top: 0;
}

/* --- LAYOUT CONSOLIDADO DE 3 COLUNAS (DESKTOP) --- */

/* O wrapper principal das três colunas */
.pessoa-conteudo-wrapper {
  display: flex;
  flex-wrap: nowrap; /* IMPORTANTE: Impede que as colunas quebrem a linha */
  gap: 20px;
  max-width: 1400px; /* Espaço suficiente para as 3 colunas */
  margin: 0 auto;
  align-items: flex-start; /* Alinha as colunas pelo topo */
}

/* Coluna 1: Avaliações (maior) */
.coluna-avaliacoes {
  flex: 2 1 500px; /* flex-grow, flex-shrink, flex-basis */
}

/* Coluna 2: Top Artists (média) */
.coluna-top-artistas {
  flex: 1.2 1 300px; /* flex-grow, flex-shrink, flex-basis */
}

/* Coluna 3: Gráfico (menor) */
#distribuicao-notas-container.coluna-bloco {
  flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
}

/* --- ESTILOS PARA GRÁFICO INTERATIVO --- */

/* Adiciona o cursor de "mãozinha" para indicar que as barras são clicáveis */
.faixa-nota-container-completa {
    cursor: pointer;
    border-radius: 5px;
    padding: 2px 0;
    transition: background-color 0.2s ease-in-out;
}

/* Adiciona um destaque sutil ao passar o mouse */
.faixa-nota-container-completa:hover {
    background-color: #404040;
}

/* Estilo para a barra que está ATIVA como filtro */
.faixa-nota-container-completa.active-filter {
    background-color: #1e90ff; /* Cor de destaque azul */
}

.faixa-nota-container-completa.active-filter .faixa-label-completa,
.faixa-nota-container-completa.active-filter .faixa-contagem-completa {
    color: #fff; /* Deixa o texto branco para melhor contraste */
    font-weight: bold;
}

/* --- ESTILOS PARA A PÁGINA VERSUS (SELEÇÃO VISUAL - TAMANHO CORRIGIDO) --- */

.versus-selectors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 25px; /* Mais espaço entre as bolinhas no PC */
    margin-bottom: 30px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.avaliador-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Espaço entre a imagem e o nome */
    cursor: pointer;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.avaliador-bubble img {
    width: 100px;  /* Tamanho ideal para PC */
    height: 100px; 
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #444; /* Borda mais grossa para destacar */
    transition: border-color 0.2s, transform 0.2s;
    background-color: #222;
}

.avaliador-bubble span {
    font-size: 0.9rem; /* Fonte legível */
    font-weight: bold;
    color: #ccc;
    text-align: center;
}

/* --- ESTADOS DA SELEÇÃO --- */

.avaliador-bubble:hover img {
    border-color: #aaa;
    transform: scale(1.05);
}

.avaliador-bubble.selected {
    transform: scale(1.1);
}

.avaliador-bubble.selected img {
    border-color: #1e90ff;
    box-shadow: 0 0 15px rgba(30, 144, 255, 0.6);
}

.avaliador-bubble.selected span {
    color: #1e90ff;
}

.avaliador-bubble.disabled {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(100%);
}

/* --- RESPONSIVIDADE (AJUSTE PARA CELULAR) --- */
@media (max-width: 768px) {
    .versus-selectors {
        gap: 15px; /* Menos espaço no celular */
    }

    .avaliador-bubble img {
        width: 65px;  /* Tamanho médio para celular (nem muito pequeno, nem gigante) */
        height: 65px;
        border-width: 2px;
    }

    .avaliador-bubble span {
        font-size: 0.75rem;
    }
}
/* --- ESTILOS PARA OS RESULTADOS DA PÁGINA VERSUS --- */

.versus-summary {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #2c2c2c;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.summary-profile {
    text-align: center;
}

.summary-profile img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #555;
}

.summary-profile h2 {
    margin-top: 10px;
    margin-bottom: 0;
}

.summary-stats {
    text-align: center;
}

.summary-stats h3 {
    font-size: 2.5rem;
    margin: 0;
}

.summary-stats p {
    margin: 0;
    color: #ccc;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.comparison-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #ccc;
    font-size: 0.9rem;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.score-headers {
    display: flex;
    gap: 15px;
    width: 145px; /* Largura para alinhar com as notas abaixo */
    justify-content: space-between;
    text-align: center;
}

.score-headers span {
    width: 40px;
}

.comparison-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comparison-item {
    display: flex;
    align-items: center;
    background-color: #333;
    padding: 10px;
    border-radius: 8px;
    gap: 15px;
}

.comparison-item img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    object-fit: cover;
}

.comparison-info {
    flex-grow: 1;
}

.comparison-info h3 {
    font-size: 1rem;
    margin: 0 0 5px 0;
}

.comparison-info p {
    font-size: 0.8rem;
    color: #ccc;
    margin: 0;
}

.comparison-scores {
    display: flex;
    gap: 15px;
}

.comparison-diff {
    width: 40px;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: #ccc;
}

/* --- ESTILOS PARA BUSCA GLOBAL --- */

#search-trigger-container {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px; /* Bordas arredondadas para um visual de "pílula" */
    padding: 8px 15px; /* Espaçamento interno */
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 201;
    color: #fff;
    font-weight: bold;
    font-size: 0.9rem;
}

#search-trigger-container:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

#search-icon-container img {
    width: 20px;
    height: 20px;
    filter: invert(1);
}

#search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#search-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.search-modal {
    position: relative;
    background-color: #2c2c2c;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    padding: 20px;
}

/* --- AJUSTE PARA O BOTÃO FECHAR DA BUSCA GLOBAL --- */

#close-search {
    position: absolute;
    top: 28px; /* Ajuste a posição vertical */
    right: 28px; /* Ajuste a posição horizontal */
    background-color: #1e90ff; /* Cor de fundo azul */
    border: none;
    border-radius: 5px; /* Bordas levemente arredondadas */
    color: #fff; /* Cor do "X" branco */
    font-size: 1.5rem; /* Tamanho do "X" */
    line-height: 1; /* Garante que o "X" fique centralizado */
    padding: 5px 10px; /* Preenchimento para o botão */
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    display: flex; /* Para centralizar o 'X' */
    justify-content: center;
    align-items: center;
    width: 30px; /* Largura fixa */
    height: 30px; /* Altura fixa */
}

#close-search:hover {
    background-color: #007bff; /* Azul um pouco mais escuro ao passar o mouse */
    color: #fff;
}

#global-search-input {
    width: 100%;
    padding: 15px;
    font-size: 0.8rem;
    background-color: #333;
    border: 2px solid #555;
    border-radius: 8px;
    color: #fff;
    outline: none;
}

#global-search-input:focus {
    border-color: #1e90ff;
}

#global-search-results {
    margin-top: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.search-message {
    text-align: center;
    color: #888;
}

.search-category-header {
    font-size: 0.9rem;
    font-weight: bold;
    color: #ccc;
    text-transform: uppercase;
    padding: 15px 10px 5px;
    border-bottom: 1px solid #444;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: #444;
    text-decoration: none;
}

.search-result-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
}

.search-result-info {
    display: flex;
    flex-direction: column;
}

.search-result-info strong {
    font-size: 1rem;
}

.search-result-info span {
    font-size: 0.8rem;
    color: #aaa;
}
/* --- ESTILOS PARA O HEADER DA PÁGINA DO ÁLBUM --- */

/* Container que agrupa Título, Status e "Aberto Por" */
.album-info-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Permite quebrar a linha em telas pequenas */
  gap: 15px; /* Espaço entre os itens (título, status, aberto por) */
  margin-bottom: 5px; /* Pequeno espaço antes da linha do artista */
}

/* Garante que o H2 não tenha margem extra */
.album-info-header h2 {
    margin: 0;
}

/* --- ESTILOS PARA O "ABERTO POR" --- */

.aberto-por-container {
  display: inline-flex; /* Usa inline-flex para se comportar bem ao lado de outros itens */
  align-items: center;
  gap: 8px;
  background-color: #444; /* Fundo sutil para destacar */
  padding: 4px 10px;
  border-radius: 20px; /* Bordas arredondadas */
  text-decoration: none;
  color: #fff;
  transition: background-color 0.2s;
}

.aberto-por-container:hover {
  background-color: #555;
  text-decoration: none;
}

/* Imagem redonda do avaliador */
.aberto-por-container img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #777;
}

/* Texto "Aberto por:" (só aparece em telas maiores) */
.aberto-por-label {
    font-size: 0.8rem;
    color: #ccc;
    font-weight: normal;
}

/* Nome do avaliador */
.aberto-por-container span:not(.aberto-por-label) {
  font-size: 0.9rem;
  font-weight: bold;
}

/* --- AJUSTES DE RESPONSIVIDADE --- */
@media (max-width: 768px) {
  .album-info-header {
     justify-content: center; /* Centraliza os itens no mobile */
     gap: 10px;
  }

  /* Esconde o texto "Aberto por:" no mobile para economizar espaço */
  .aberto-por-label {
    display: none;
  }

  .aberto-por-container {
    padding: 3px 8px;
    gap: 6px;
  }

  .aberto-por-container img {
    width: 20px;
    height: 20px;
  }

  .aberto-por-container span:not(.aberto-por-label) {
    font-size: 0.8rem;
  }
}
/* --- ESTILO PARA BOTÃO DE FILTRO ESPECIAL (TOPS ABERTOS) --- */

.aba-filtro-especial {
  background-color: #f39c12; /* Cor laranja (mesma do ranking de avaliações) */
  border-color: #f39c12;
}

.aba-filtro-especial:hover {
  background-color: #e67e22; /* Laranja mais escuro no hover */
  border-color: #e67e22;
}

/* Cor quando o filtro "Tops Abertos" está ativo */
.aba-filtro-especial.active {
  background-color: #d35400; /* Laranja bem escuro quando ativo */
  border-color: #d35400;
}
/* --- Estilo para o novo container do filtro de ano "Tops Abertos" --- */

/* Garante que o container se alinhe como os outros filtros */
#filtro-ano-tops-abertos-container {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative; /* Necessário para a seta '▼' */
}

/* Aplica o estilo de "balão" ao novo <select> */
#filtro-ano-tops-abertos-container select {
    padding: 6px 12px;
    border-radius: 18px;
    border: 2px solid #555;
    background-color: #1e90ff; /* Cor azul padrão */
    color: #fff;
    font-size: 0.85rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-size: 10px;
    padding-right: 30px;
}

/* Adiciona a seta '▼' ao novo filtro */
#filtro-ano-tops-abertos-container::after {
  content: '▼';
  font-size: 0.8em;
  color: #fff;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* --- CORREÇÃO FINAL: FORMAS DAS IMAGENS E TÍTULOS --- */

/* 1. Centralizar Títulos (H1) nas páginas de Ranking */
.main-full-width h1 {
    text-align: center;
    margin-bottom: 30px; /* Um espaço extra para ficar bonito */
}

/* 2. Álbuns no Ranking do Ano (Year-End) -> QUADRADOS com cantos leves */
/* Usamos o ID #ranking-do-ano para afetar APENAS esta lista */
#ranking-do-ano .ranking-item img {
    border-radius: 5px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* 3. Avaliadores e Artistas -> REDONDOS (Círculo) */
/* Usamos os IDs específicos dessas listas para garantir que fiquem redondos */
#ranking-avaliadores-lista .ranking-item img,
#ranking-artistas-lista .ranking-item img {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* 4. Fãs na página de perfil (Mantém redondo) */
.fa-item img {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* --- ESTILOS DO MODAL DE CURADORIA --- */
#curadoria-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Fundo bem escuro */
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: none; /* Escondido por padrão */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#curadoria-modal-overlay.visible {
    display: flex;
    opacity: 1;
}

.curadoria-modal-content {
    background-color: #2c2c2c;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh; /* Altura máxima de 80% da tela */
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    border: 1px solid #444;
}

.curadoria-header {
    padding: 20px;
    border-bottom: 1px solid #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    border-radius: 12px 12px 0 0;
}

.curadoria-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
}

.curadoria-close-btn {
    background: none;
    border: none;
    color: #ccc;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.curadoria-close-btn:hover {
    color: #fff;
}

.curadoria-lista-albuns {
    padding: 20px;
    overflow-y: auto; /* Permite rolar se tiver muitos álbuns */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Item da lista dentro do modal */
.curadoria-album-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #383838;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.2s;
    text-decoration: none;
    color: #fff;
}

.curadoria-album-item:hover {
    background-color: #444;
    text-decoration: none;
}

.curadoria-album-item img {
    width: 50px;
    height: 50px;
    border-radius: 5px; /* Capa quadrada com canto leve */
    object-fit: cover;
}

.curadoria-album-info {
    flex-grow: 1;
}

.curadoria-album-info h4 {
    margin: 0;
    font-size: 0.95rem;
}

.curadoria-album-info span {
    font-size: 0.8rem;
    color: #aaa;
}

/* --- CORREÇÃO DE ALINHAMENTO DOS FILTROS (3 NA MESMA LINHA) --- */

/* Força o container a usar um gap menor para caber tudo */
.filtros-container {
  gap: 10px !important; /* Reduz o espaço entre os filtros */
  justify-content: center;
  flex-wrap: wrap; /* Permite quebrar linha se a tela for MUITO pequena (celular) */
}

/* Ajustes finos nos itens de filtro para economizar espaço */
.filtro-item {
  gap: 5px; /* Menos espaço entre o label e o select */
}

.filtro-item label {
  font-size: 0.85rem; /* Fonte levemente menor para o label */
  white-space: nowrap; /* Impede que o label quebre linha */
}

.filtro-item select {
  padding: 6px 25px 6px 10px; /* Reduz padding lateral */
  font-size: 0.85rem;
}

/* Garante que a seta personalizada fique na posição certa com o novo padding */
.filtro-item::after {
  right: 10px;
}

/* Responsividade: No celular, permite empilhar se necessário, mas tenta manter junto */
@media (max-width: 600px) {
  .filtros-container {
    flex-direction: column; /* No celular, empilha para ficar melhor */
    align-items: center;
  }
}

/* =========================================
   ESTILOS DA REPESCAGEM (SISTEMA COMPLETO)
   ========================================= */

/* --- 1. CABEÇALHO DA PÁGINA (REPESCAGEM - ESTILO CRISTAL) --- */
.repescagem-header {
    text-align: center !important;
    margin: 40px auto;
    padding: 30px 20px;
    
    /* MUDANÇA AQUI: Fundo transparente com leve toque branco (Vidro) */
    background: rgba(255, 255, 255, 0.048); 
    backdrop-filter: blur(15px); /* Desfoque forte para ler melhor */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Borda mais brilhante */
    border-radius: 20px;
    
    /* Sombra mais suave, colorida com o tema */
    box-shadow: 0 10px 40px rgba(139, 233, 197, 0.1); 
    
    max-width: 900px;
    width: 95%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.repescagem-header h1 {
    font-family: "Arial Black", "Arial Bold", sans-serif; 
    font-size: 3.5rem; 
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
    margin: 0 0 10px 0;
    line-height: 1.1;

    /* Mantendo o efeito neon no texto que você gostou */
    background: linear-gradient(90deg, #4ffcba, #1e90ff, #ffffff, #4ffcba);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: text-shine 5s linear infinite;
    filter: drop-shadow(0 0 15px rgba(79, 252, 186, 0.4));
}

.repescagem-header p {
    font-size: 1.1rem;
    color: #fff; /* Texto branco puro para melhor contraste */
    margin: 0;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Sombra para ler bem no fundo claro */
    opacity: 0.9;
}

@keyframes text-shine {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

@media (max-width: 768px) {
    .repescagem-header h1 { font-size: 2.2rem; }
    .repescagem-header { padding: 20px 10px; margin-top: 20px; }
}

/* --- 2. TELA DE LOGIN (GRID DE USUÁRIOS) --- */
#user-selection-container {
    text-align: center;
    width: 100%;       /* Libera a largura total */
    max-width: none;   /* Remove o limite de 1000px que estava bloqueando */
    margin: 0 auto;
}

#user-selector-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    
    /* Mantém os ícones de usuário compactos no centro */
    max-width: 1000px; 
    margin-left: auto;
    margin-right: auto;
}

.user-login-card {
    background-color: #2c2c2c;
    border: 2px solid #444;
    border-radius: 15px;
    width: 160px;
    padding: 20px 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ... (O resto do CSS dos cards de usuário continua igual abaixo) ... */

/* Estilo base da Imagem */
.user-img-wrapper {
    position: relative;
    width: 90px;
    height: 90px;
    margin-bottom: 10px;
}

.user-login-card img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 rgba(79, 252, 186, 0);
}

.user-login-card span {
    font-weight: bold;
    color: #fff;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

/* Hover para usuários ativos */
.user-login-card:not(.finished):hover {
    transform: translateY(-5px) scale(1.02);
    border-color: #4ffcba;
    background-color: #333;
    box-shadow: 0 10px 25px rgba(79, 252, 186, 0.2);
}

.user-login-card:not(.finished):hover img {
    border-color: #4ffcba;
    box-shadow: 0 0 15px rgba(79, 252, 186, 0.5);
}

.user-login-card:not(.finished):hover span {
    color: #4ffcba;
}

/* Estilo para usuários CONCLUÍDOS */
.user-login-card.finished {
    opacity: 0.6;
    filter: grayscale(90%);
    border-color: #444;
    transition: all 0.3s ease;
    cursor: not-allowed;
}

.user-login-card.finished img {
    border-color: #333;
    filter: grayscale(100%);
}

.user-login-card.finished:hover {
    opacity: 1;
    filter: grayscale(30%);
    border-color: #777;
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0,0,0,0.7);
    background-color: #2a2a2a;
}

.user-login-card.finished:hover img {
    border-color: #666;
    filter: grayscale(30%);
}

.user-login-card.finished:hover span {
    color: #fff;
}

/* Badge de Concluído */
.finished-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #4ffcba;
    color: #000;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    z-index: 20;
    white-space: nowrap;
    border: 1px solid #000;
    pointer-events: none;
}

/* --- 3. DASHBOARD & HUD --- */
#repescagem-dashboard {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.my-picks-hud {
    position: sticky;
    top: 10px;
    z-index: 1000;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid #444;
    border-radius: 12px;
    padding: 15px 25px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    border-bottom: 3px solid #4ffcba;
}

.hud-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hud-info img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #4ffcba;
    object-fit: cover;
}

.hud-info h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
}

#hud-counter {
    display: block;
    font-size: 0.9rem;
    color: #4ffcba;
    font-weight: bold;
    margin-top: 5px;
}

.picks-slots-container {
    display: flex;
    gap: 15px;
}

.hud-slot {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.05);
    border: 2px dashed #555;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s;
}

.hud-slot:hover {
    border-color: #fff;
}

.hud-slot.filled {
    border-style: solid;
    border-color: #4ffcba;
    box-shadow: 0 0 10px rgba(79, 252, 186, 0.3);
}

.hud-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hud-slot span {
    font-size: 2rem;
    color: #555;
}

.btn-voltar {
    background: none;
    border: 1px solid #555;
    color: #ccc;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 20px;
    transition: all 0.3s;
}

.btn-voltar:hover {
    border-color: #fff;
    color: #fff;
}

/* --- 4. BARRA DE FERRAMENTAS --- */
.repescagem-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    background: #252525;
    padding: 15px;
    border-radius: 10px;
}

#search-repescagem {
    flex-grow: 1;
    max-width: 400px;
    padding: 12px 15px;
    border-radius: 25px;
    border: 1px solid #555;
    background-color: #1b1b1d;
    color: #fff;
    font-size: 1rem;
    outline: none;
}

#search-repescagem:focus {
    border-color: #4ffcba;
}

.legenda-slots {
    display: flex;
    gap: 15px;
    font-size: 0.9rem;
    color: #ccc;
}

.legenda-slots span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.dot.green { background-color: #4ffcba; box-shadow: 0 0 5px #4ffcba; }
.dot.yellow { background-color: #ffd700; }
.dot.red { background-color: #ff4757; }

.btn-neon {
    background-color: #4ffcba;
    color: #000;
    border: none;
    padding: 12px 30px;
    font-weight: bold;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
}

.btn-neon:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(79, 252, 186, 0.6);
}

.btn-neon:disabled {
    background-color: #555;
    color: #888;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- 5. GRID DE ÁLBUNS E CARDS --- */
#repescagem-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    padding-bottom: 50px;
}

.repescagem-card {
    background-color: #2a2a2a;
    width: 220px;
    border-radius: 12px;
    /* REMOVIDO: overflow: hidden; -> Isso cortava a fita */
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Garante que a imagem respeite a borda redonda no topo */
.repescagem-card > a > img, 
.repescagem-card > img { 
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.repescagem-card:hover {
    transform: translateY(-8px);
    border-color: #666;
}

.repescagem-card.selected {
    border-color: #4ffcba;
    box-shadow: 0 0 20px rgba(79, 252, 186, 0.4);
    transform: scale(1.02);
}

.repescagem-card.owned {
    border-color: #1e90ff;
    opacity: 0.8;
}

.repescagem-card.disabled {
    opacity: 0.4;
    filter: grayscale(100%);
    cursor: not-allowed;
}

.repescagem-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-bottom: 1px solid #444;
}

/* Badges e Status */
.card-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    font-size: 0.7rem;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    background: #333;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}

.card-status.status-livre { background: #4ffcba; color: #000; border-color: #4ffcba; }
.card-status.status-concorrido { background: #ffd700; color: #000; border-color: #ffd700; }
.card-status.status-esgotado { background: #ff4757; color: #fff; border-color: #ff4757; }
.card-status.status-meu { background: #1e90ff; color: #fff; border-color: #1e90ff; }

.repescagem-media-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 5;
}

.card-info {
    padding: 15px;
}

.card-info h4 {
    margin: 0 0 5px 0;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.card-info p {
    margin: 0 0 15px 0;
    font-size: 0.85rem;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-slots {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #222;
    padding: 10px 15px;
    border-top: 1px solid #333;
}

.slots-visual {
    display: flex;
    gap: 6px;
}

.slot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #444;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
    transition: background-color 0.3s;
}

.slot.filled {
    background: #ff4757;
    box-shadow: 0 0 5px #ff4757;
}

.repescagem-card.selected .slot.filled {
    background: #4ffcba;
    box-shadow: 0 0 5px #4ffcba;
}

.card-choosers {
    padding: 10px 15px;
    font-size: 0.75rem;
    color: #888;
    background: #1f1f1f;
    font-style: italic;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- CORREÇÃO: GRID DE RESUMO (LARGURA TOTAL) --- */
#repescagem-summary-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centraliza os itens na tela */
    gap: 25px;
    padding-bottom: 50px;
    margin-top: 30px;
    
    /* AQUI ESTÁ A MÁGICA PARA ESPALHAR */
    width: 100% !important;        /* Ocupa toda a largura disponível */
    max-width: 1600px !important;  /* Permite ficar bem largo em telas grandes */
    margin-left: auto;             /* Centraliza o container em si */
    margin-right: auto;
    padding-left: 20px;            /* Margem de segurança nas laterais */
    padding-right: 20px;
}

.summary-card {
    background-color: #2a2a2a;
    width: 220px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid #444;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-8px);
    border-color: #777;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.summary-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    filter: brightness(0.9);
}

.card-choosers-list {
    background: #1a1a1a;
    padding: 10px;
    border-top: 1px solid #333;
}

.chooser-tag {
    display: inline-block;
    background: #333;
    color: #4ffcba;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin: 2px;
    border: 1px solid #444;
    text-decoration: none;
}

/* --- 7. PÁGINA DE RESULTADOS (GRID E ITENS) --- */
#pagina-resultados-repescagem {
    max-width: 98% !important;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

#resultados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 20px;
    padding: 20px;
    width: 100%;
    margin: 0 auto;
}

.repescagem-card.result-card {
    width: 100% !important;
}

.result-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-bottom: 1px solid #333;
}

.card-results-list {
    background: #1f1f1f;
    padding: 12px;
    border-top: 1px solid #333;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    border-radius: 4px;
}

.result-row.pendente {
    opacity: 0.4;
}

.result-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.result-user-img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 1px solid #555;
    flex-shrink: 0;
}

.result-user-name {
    font-size: 0.8rem;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nota-square {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    flex-shrink: 0;
}

/* --- 8. RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 768px) {
    .repescagem-header h1 { font-size: 1.8rem; }
    
    /* HUD Mobile */
    .my-picks-hud { flex-direction: column; gap: 15px; padding: 10px; }
    .hud-info { flex-direction: column; text-align: center; gap: 5px; }
    .picks-slots-container { gap: 8px; }
    .hud-slot { width: 50px; height: 50px; }

    /* Toolbar Mobile */
    .repescagem-toolbar { flex-direction: column; align-items: stretch; text-align: center; }
    .legenda-slots { justify-content: center; margin: 10px 0; }
    .btn-neon { width: 100%; }

    /* Cards Mobile */
    .repescagem-card { width: calc(50% - 15px); }
    .repescagem-card img { height: 150px; }
    
    /* Resultados Mobile */
    #resultados-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
        padding: 10px;
    }
    
    .result-user-img { width: 20px !important; height: 20px !important; }
    .nota-square { width: 24px; height: 24px; font-size: 0.75rem; }
    
    #pagina-repescagem-principal { max-width: 98% !important; }
}

/* --- CORREÇÃO FINAL: CENTRALIZAÇÃO DA PÁGINA DE RESULTADOS --- */

/* 1. Força o título e subtítulo a ficarem centralizados */
.repescagem-header {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* --- CORREÇÃO FINAL: ALINHAMENTO CENTRALIZADO (FLEXBOX) --- */

/* 1. Container Flexível (Centraliza tudo) */
#resultados-grid {
    display: flex;              /* Muda de Grid para Flex */
    flex-wrap: wrap;            /* Permite quebrar linha quando encher */
    justify-content: center;    /* A MÁGICA: Centraliza os itens na linha */
    gap: 25px;                  /* Espaço entre os cards */
    width: 100%;
    max-width: 1400px;          /* Limite para não ficar largo demais em monitores 4k */
    margin: 30px auto;          /* Centraliza o container na página */
    padding-bottom: 50px;
}

/* 2. Cartões de Resultado */
/* Removemos o width: 100% anterior para o card ter tamanho fixo e centralizar */
.repescagem-card.result-card {
    width: 220px !important;    /* Largura fixa igual aos cards normais */
    flex-grow: 0;               /* Impede que o card estique sozinho */
    flex-shrink: 0;             /* Impede que o card esmague */
    margin: 0;
}

/* 3. Ajuste para Texto de Carregamento/Erro */
#resultados-grid > p {
    width: 100%;                /* Ocupa a linha toda */
    text-align: center;
    font-size: 1.2rem;
    color: #ccc;
    padding: 40px;
}

/* --- AJUSTE MOBILE (MANTÉM 2 POR LINHA) --- */
@media (max-width: 768px) {
    #resultados-grid {
        gap: 15px;
        padding: 0 10px; /* Um pouco de respiro nas laterais */
    }

    .repescagem-card.result-card {
        /* No celular, calcula para caber 2 certinho com o gap */
        width: calc(50% - 10px) !important; 
    }
}

/* --- CORREÇÃO FINAL: FORÇAR LARGURA TOTAL NA TELA DE REPESCAGEM --- */

/* 1. Destrava o limite do MAIN apenas nesta página */
#pagina-repescagem-principal {
    max-width: 100% !important; /* Remove o limite de 1200px */
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden; /* Evita rolagem lateral indesejada */
}

/* 2. Destrava o container intermediário */
#hub-inicial-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o conteúdo verticalmente */
}

/* 3. Ajusta o Grid de Resumo para ocupar quase tudo (com margem de segurança) */
#repescagem-summary-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    
    width: 95% !important;         /* Ocupa 95% da tela */
    max-width: 1800px !important;  /* Limite gigante para telas 4k */
    
    margin-top: 30px;
    padding-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
}

/* 4. Garante que o seletor de usuários continue comportado no centro */
#user-selection-container {
    width: 100%;
    max-width: 1000px !important; /* Mantém os ícones compactos */
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   BOTÃO ESPECIAL DO MENU (REPESCAGEM)
   ========================================= */

/* Estilo base do botão */
.nav-special-link {
    position: relative;
    background: linear-gradient(90deg, #9532a8, #fffd93, #753275); /* Cores do tema */
    background-size: 200% auto; /* Tamanho maior para permitir animação */
    color: #000 !important; /* Texto preto para contraste com o neon */
    font-weight: 900 !important;
    text-transform: uppercase;
    padding: 3px 15px !important; /* Um pouco mais gordinho que os links normais */
    border-radius: 25px; /* Bordas bem redondas */
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(247, 163, 255, 0.6); /* Brilho externo verde */
    transition: all 0.6s ease;
    animation: shine-flow 1s linear infinite; /* A animação contínua */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Espaço entre o ícone e o texto */
}

/* A Animação de "fluxo" (faz o gradiente se mover lateralmente) */
@keyframes shine-flow {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Efeito Hover (quando passa o mouse) */
.nav-special-link:hover {
    transform: scale(1.1); /* Aumenta um pouco */
    box-shadow: 0 0 20px rgb(61, 15, 99), 0 0 40px rgba(246, 255, 168, 0.6); /* Explode o brilho */
    color: #000 !important;
    text-decoration: none; /* Remove sublinhado se houver */
}

/* Ajuste para telas pequenas (Celular) */
@media (max-width: 768px) {
    .nav-special-link {
        margin-top: 10px; /* Dá um espacinho se o menu quebrar linha */
        display: inline-block;
    }
}

/* --- CORREÇÃO DE ALINHAMENTO DO MENU (VERSÃO SEGURA + SUBMENUS À ESQUERDA) --- */

/* 1. Alinha apenas a lista PRINCIPAL do menu */
nav > ul {
    display: flex !important;
    align-items: center !important; /* Centraliza verticalmente */
    flex-wrap: wrap;
    height: 100%;
}

/* 2. Alinha apenas os itens do TOPO */
nav > ul > li {
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    height: 100%;
}

/* 3. Ajuste para os links do TOPO (Exceto Repescagem) */
nav > ul > li > a:not(.nav-special-link) {
    display: inline-flex !important; /* Garante que o padding funcione bem */
    align-items: center;
    justify-content: center;
    
    height: auto !important;      /* Remove a altura forçada de 100% */
    padding: 10px 16px !important; /* Devolve o espaço generoso para clicar */
    border-radius: 8px;           /* Cantos arredondados suaves ao passar o mouse */
    margin: 0 2px;                /* Um leve respiro lateral entre eles */
    transition: background-color 0.2s ease, transform 0.2s;
}

/* Opcional: Efeito hover para ficar mais tátil */
nav > ul > li > a:not(.nav-special-link):hover {
    background-color: rgba(255, 255, 255, 0.1); /* Fundo sutil ao passar o mouse */
    transform: translateY(-1px); /* Sobe um pouquinho */
}

/* 4. SUB-MENUS (Dropdowns) - Alinhados à Esquerda */
nav ul .dropdown-menu li {
    display: block !important;    /* Volta a ser bloco (um embaixo do outro) */
    text-align: left !important;  /* Força alinhamento à esquerda */
    height: auto !important;
    width: 100%;
    margin: 0;
}

nav ul .dropdown-menu li a {
    display: block;               /* O link ocupa a linha toda */
    text-align: left;             /* Garante que o texto fique na esquerda */
    justify-content: flex-start;  /* Caso tenha flex, joga pro início */
    padding: 10px 15px;
    height: auto;
}

/* --- TÍTULO "ÁLBUNS JÁ RESGATADOS" (CORRIGIDO - ESTILO NEON) --- */
.summary-header h3 {
    /* Garante que sobrescreve a cor padrão */
    color: transparent !important; 
    
    /* Centralização */
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;

    /* Tipografia: Fonte grossa para o efeito aparecer, mas mantendo o tamanho original */
    font-family: "Arial Black", "Arial Bold", sans-serif;
    text-transform: uppercase; /* Caixa Alta */
    font-weight: 900;
    letter-spacing: 1.5px;
    /* Removemos o font-size fixo para respeitar o tamanho que já estava, 
       ou ajustamos levemente se ficar pequeno demais */
    font-size: 1.5rem; 

    /* O EFEITO DEGRADÊ ANIMADO */
    background: linear-gradient(90deg, #4ffcba, #1e90ff, #ffffff, #4ffcba);
    background-size: 300% auto;
    
    /* Recorta o fundo no formato das letras */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Animação */
    animation: text-shine 5s linear infinite;

    /* Sombra suave */
    filter: drop-shadow(0 0 5px rgba(79, 252, 186, 0.3));
}

/* =========================================
   CORREÇÃO DO RODAPÉ (STICKY FOOTER)
   ========================================= */

/* 1. Transforma o corpo da página em uma coluna flexível */
body {

    flex-direction: column;
    min-height: 100vh; /* Garante que o corpo tenha NO MÍNIMO a altura da janela */
}

/* 2. Faz o conteúdo principal (main) crescer para ocupar todo o espaço vazio */
main, .main-full-width {
    flex: 1; 
}

/* 3. Garante que o footer não seja esmagado se o conteúdo for grande */
footer {
    flex-shrink: 0;
    width: 100%; /* Garante largura total */
}


/* =========================================
   DETALHES FINAIS (NEON EXPERIENCE)
   ========================================= */

/* 1. ROLAGEM SUAVE */
html {
    scroll-behavior: smooth;
}

/* 2. BARRA DE ROLAGEM PERSONALIZADA (Webkit: Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 15px; /* Largura da barra vertical */
    height: 10px; /* Altura da barra horizontal */
}

/* O fundo do trilho por onde a barra corre */
::-webkit-scrollbar-track {
    background: #111; 
    border-left: 1px solid #333;
}

/* A "pega" da barra (o que você arrasta) */
::-webkit-scrollbar-thumb {
    background: #444; /* Cor padrão discreta */
    border-radius: 5px;
    border: 2px solid #111; /* Cria um espaço entre a barra e o fundo */
}

/* Quando passa o mouse na barra -> Fica Verde Neon */
::-webkit-scrollbar-thumb:hover {
    background: #4ffcba; 
}

/* 3. SELEÇÃO DE TEXTO (Quando o usuário seleciona algo) */
::selection {
    background: #4ffcba; /* Fundo Verde Neon */
    color: #000;         /* Texto Preto para contraste máximo */
    text-shadow: none;
}

/* Para Firefox */
::-moz-selection {
    background: #4ffcba;
    color: #000;
}

/* =========================================
   POLIMENTO FINAL (MICRO-INTERAÇÕES & DETALHES)
   ========================================= */

/* 1. FOCO NEON (Substitui a borda padrão feia do navegador) */
/* Aplica em inputs, botões e links quando selecionados via teclado ou clique */
:focus-visible {
    outline: 2px solid #4ffcba; /* Borda Verde Neon */
    box-shadow: 0 0 15px rgba(79, 252, 186, 0.5); /* Brilho externo */
    outline-offset: 3px; /* Espaço entre o elemento e a borda */
    border-radius: 4px;
}

/* Remove o outline padrão feio se o nosso carregar */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #4ffcba !important;
    box-shadow: 0 0 10px rgba(79, 252, 186, 0.3);
}

/* 2. FEEDBACK TÁTIL (Sente o clique) */
/* Quando clicar em botões ou cards, eles "afundam" levemente */
button:active, 
.btn-neon:active, 
.repescagem-card:active, 
.nav-special-link:active,
.aba-ano:active,
.avaliador-bubble:active {
    transform: scale(0.96) !important; /* Encolhe para 96% do tamanho */
    transition: transform 0.05s ease; /* Acontece muito rápido */
}

/* 3. IMAGENS VIVAS (Brilho no Hover) */
/* Dá vida às capas de álbuns e fotos de perfil */
.album img, 
.ranking-item img, 
.repescagem-card img, 
.avaliador-card img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.album:hover img, 
.ranking-item:hover img, 
.repescagem-card:hover img, 
.avaliador-card:hover img {
    /* Aumenta levemente o brilho e contraste para "acender" a imagem */
    filter: brightness(1.1) contrast(1.05); 
}

/* =========================================
   ESTILO GLOBAL DOS TÍTULOS (GERAL - EXCETO REPESCAGEM E ARTISTA)
   ========================================= */

@keyframes global-text-shine {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* LISTA DE SELETORES ATUALIZADA E CORRIGIDA */
/* Agora excluímos explicitamente .repescagem-header h1 de TODAS as regras genéricas */

main h1:not(#artista-profile-header h1):not(.repescagem-header h1),        
.main-full-width h1:not(.repescagem-header h1), 
.versus-header h1,          
.section-title,             
.destaques-container h2,      
.pendentes-container h3,      
#user-selection-container h3,
footer p
{
    /* Tipografia Impactante */
    font-family: "Arial Black", "Arial Bold", Impact, sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    
    margin-top: 30px !important;
    margin-bottom: 40px !important;
    line-height: 1.2 !important;

    /* --- CORES DO LOGO (VAGACRITIC) - ESTILO PADRÃO --- */
    background: linear-gradient(
        90deg, 
        #94ffd6, 
        #ffd1f5, 
        #ff88ff, 
        #ff8be6, 
        #fc4fd6 
    ) !important;
    
    background-size: 300% auto !important;

    /* Máscara de Texto */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    
    /* Texto Transparente */
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    /* Animação Rápida */
    animation: global-text-shine 0.5s linear infinite !important;
    
    /* Glow */
    filter: drop-shadow(0 0 10px rgba(79, 252, 186, 0.4)) 
            drop-shadow(0 0 5px rgba(255, 0, 204, 0.3)) !important;
}

/* AJUSTE DO RODAPÉ (MANTÉM IGUAL) */
footer p {
    margin: 0 !important;
    font-size: 1.2rem !important;
    padding: 10px 0;
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    main h1:not(#artista-profile-header h1):not(.repescagem-header h1), 
    .section-title, 
    .destaques-container h2 {
        font-size: 2.2rem !important;
        letter-spacing: 1px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
}

/* =========================================
   ESTILOS DO DETETIVE DE ABERTURAS
   ========================================= */

#enquete-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.enquete-card {
    background-color: #252525;
    border: 1px solid #444;
    border-radius: 15px;
    width: 350px; /* Card mais largo para caber as opções */
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.enquete-card:hover {
    border-color: #777;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* Header do Card (Capa + Info) */
.enquete-album-info {
    display: flex;
    gap: 15px;
    align-items: center;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
}

.enquete-album-info img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
}

.enquete-textos {
    display: flex;
    flex-direction: column;
}

.enquete-textos h4 {
    margin: 0 0 5px 0;
    font-size: 1rem;
    color: #fff;
}

.enquete-textos span {
    font-size: 0.85rem;
    color: #aaa;
}

/* Pergunta */
.enquete-pergunta {
    text-align: center;
    font-weight: bold;
    color: #4ffcba;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* Grid de Suspeitos */
.suspeitos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

.btn-suspeito {
    background: #333;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 10px 5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-suspeito:hover {
    background: #4ffcba;
    border-color: #4ffcba;
}

.btn-suspeito:hover span {
    color: #000;
    font-weight: bold;
}

.btn-suspeito img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.btn-suspeito span {
    font-size: 0.75rem;
    color: #ddd;
    word-break: break-word;
    text-align: center;
}

/* Botão Pular */
.btn-pular {
    background: transparent;
    border: none;
    color: #666;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    align-self: center;
    margin-top: 5px;
}

.btn-pular:hover {
    color: #aaa;
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .enquete-card {
        width: 100%;
    }
}

/* --- ADICIONAR NO FINAL DO STYLE.CSS --- */

/* Wrapper para posicionar a nota sobre a imagem */
.suspeito-img-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
}

/* Garante que a imagem ocupe o wrapper */
.suspeito-img-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* A bolinha da nota */
/* A bolinha da nota (VERSÃO MAIOR) */
.mini-nota-suspeito {
    position: absolute;
    bottom: -4px; /* Ajustado para sair um pouco mais para fora */
    right: -4px;
    
    width: 24px;  /* Aumentado de 18px */
    height: 24px; /* Aumentado de 18px */
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 0.8rem; /* Fonte maior */
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* Sombra mais forte no texto */
    
    border: 2px solid #333; 
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Sombra na bolinha */
}

/* Ajuste no hover para não quebrar layout */
.btn-suspeito:hover .mini-nota-suspeito {
    transform: scale(1.1);
}

/* =========================================
   CORREÇÃO FINAL: FORÇAR TÍTULO DO ARTISTA AO NORMAL
   ========================================= */

#artista-profile-header h1 {
    /* Reseta as cores e remove o degradê */
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #fff !important;
    
    /* Remove animações e sombras */
    animation: none !important;
    filter: none !important;
    
    /* Reseta a fonte para o padrão do site (ou a que você preferir) */
    font-family: Arial, sans-serif !important; 
    text-transform: none !important; /* Remove o CAPS LOCK forçado */
    letter-spacing: normal !important;
    
    /* Garante o alinhamento que definimos no JS */
    text-align: left !important; 
    margin: 0 !important;
    
    /* Remove sombra de texto se houver */
    text-shadow: none !important;
}

/* Ajuste para celular (caso precise centralizar lá) */
@media (max-width: 768px) {
    #artista-profile-header h1 {
        text-align: center !important;
    }
}

/* =========================================
   CORREÇÃO: TÍTULO "ÁLBUNS PENDENTES" (SIMPLES E SEM CAIXA ALTA)
   ========================================= */

.pendentes-container h3 {
    /* Remove o efeito degradê e animação */
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #fff !important; /* Volta para branco simples */
    
    /* Remove brilhos e filtros */
    animation: none !important;
    filter: none !important;
    text-shadow: none !important;

    /* Ajustes de fonte para ficar limpo */
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    letter-spacing: normal !important; /* Remove espaçamento exagerado */
    
    /* AQUI ESTÁ A MUDANÇA: Remove a obrigatoriedade de maiúsculas */
    text-transform: none !important; 
    
    /* Mantém a posição correta */
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* =========================================
   AJUSTE FITA DE DATA NA REPESCAGEM (LADO DIREITO)
   ========================================= */

.repescagem-card .fita-data {
    left: auto !important;       /* Remove a fixação na esquerda */
    right: -12px !important;     /* Fixa na direita */
    transform: rotate(8deg) !important; /* Inverte a rotação para acompanhar o canto */
    box-shadow: -2px 2px 5px rgba(0,0,0,0.3) !important; /* Ajusta a sombra para o outro lado */
}

/* Ajuste específico para mobile para garantir que não quebre */
@media (max-width: 768px) {
    .repescagem-card .fita-data {
        left: auto !important;
        right: -10px !important; /* Um pouco menos para fora no celular */
        transform: rotate(8deg) !important;
    }
}

/* =========================================
   SUBMENU ESPECIAL (REPESCAGEM)
   ========================================= */

/* 1. Ajuste de Posicionamento e Estilo do Container */
.special-dropdown-menu {
    left: 50% !important; /* Começa no meio do item pai */
    transform: translateX(-50%); /* Puxa 50% para esquerda para centralizar exato */
    min-width: 180px; /* Largura mínima */
    text-align: center; /* Texto centralizado */
    
    /* Afastamento do topo para não cobrir o brilho do botão */
    margin-top: 15px !important; 
    
    /* Estilo Neon Glass */
    background-color: rgba(20, 20, 20, 0.95) !important;
    border: 1px solid rgba(79, 252, 186, 0.3); /* Borda Verde Neon sutil */
    box-shadow: 0 5px 20px rgba(0,0,0,0.8), 
                0 0 15px rgba(79, 252, 186, 0.1); /* Glow leve */
}

/* 2. Ajuste dos Links dentro desse submenu */
.special-dropdown-menu li a {
    justify-content: center !important; /* Centraliza o texto flex */
    text-align: center !important;
    font-weight: bold;
    color: #fff !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 15px !important;
}

/* 3. Hover no item do submenu */
.special-dropdown-menu li a:hover {
    background: linear-gradient(90deg, rgba(79, 252, 186, 0.1), rgba(30, 144, 255, 0.1));
    color: #4ffcba !important; /* Texto fica verde neon no hover */
    text-decoration: none !important;
}

/* 4. Seta indicativa (Triângulo no topo do menu) */
/* Isso cria uma pontinha apontando para o botão, fica muito elegante */
.special-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(79, 252, 186, 0.3); /* Cor da borda neon */
}

/* 5. Ajuste Mobile para esse submenu específico */
@media (max-width: 768px) {
    /* No celular, removemos a centralização absoluta para não vazar da tela */
    .special-dropdown-menu {
        left: auto !important;
        transform: none !important;
        right: 0 !important; /* Alinha à direita */
        margin-top: 5px !important;
        width: 200px;
    }
    
    /* Remove a setinha no mobile pois o alinhamento muda */
    .special-dropdown-menu::before {
        display: none;
    }
}

/* Estiliza o pop-up do gráfico */
.chartjs-tooltip {
    background: rgba(27, 27, 29, 0.95) !important;
    border: 1px solid #4ffcba !important;
    border-radius: 8px !important;
    padding: 10px !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

#tab-stats div {
  
    height: 350px !important; /* Aumentamos a altura mínima */
    width: 100% !important;
}

#rankHistoryChart {
    height: 100% !important;
    width: 100% !important;
}