/* =========================================
   MOBILE FIRST (Padrão)
   ========================================= */

/* --- Seção de Índice --- */
.indice-section {
  width: 100%;
  max-width: 100%;
  background-color: #181f34;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* border-left: 8px solid #1a6dd9; */
  height: fit-content;
  margin-top: 0px;
  /* Mobile: Padding menor para economizar espaço vertical */
  padding: 20px 0 30px 0;
  margin-bottom: 30px;
  box-sizing: border-box;
}

/* Cabeçalho mais elegante e compacto */
.indice-header {
  /* Mobile: Padding reduzido */
  padding: 15px 20px;
  text-align: center;
  justify-content: center;
  color: #f1f1f1;
}

.indice-header h3, .indice-header h2 {
  margin: 0;
  padding: 5px;
  /* Mobile: Fontes ligeiramente menores */
  font-size: 0.9rem; 
  text-transform: uppercase;
  letter-spacing: 1px;
  color: gold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px #1a6dd970 solid;
  font-weight: 400;
}

.indice-header h2 {
  font-size: 1.2rem; /* Reduzido de 1.5rem */
  color: #ffffff;
  border-top: 0px gold solid;
}

.title-info {
  font-size: 0.65rem; /* Mobile: Um pouco menor */
  font-weight: normal;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
  color: #ffffff;
}

/* Lista de Músicas */
.indice-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

.indice-item {
  display: flex;
  align-items: center;
  /* Mobile: Padding menor nas laterais */
  padding: 5px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #ffffff;
}

/* Hover discreto */
.indice-item:hover {
  transform: translateX(3px);
}

/* Número discreto */
.indice-numero {
  font-size: 0.85rem;
  color: #b3daff;
  width: 30px;
  font-variant-numeric: tabular-nums;
}

/* Título compacto */
.indice-info {
  flex-grow: 1;
  overflow: hidden;
}

.indice-titulo {
  font-size: 0.95rem; /* Mobile: Leve ajuste */
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  border-bottom: 2px #181f34 solid;
  margin-top: 6px;
  padding-bottom: 3px;
}
.indice-titulo:hover {
  border-bottom: 2px gold solid;
}

/* Seta minimalista */
.indice-seta {
  font-size: 0.9rem;
  color: #b3daff;
  margin-left: 10px; /* Mobile: Margem reduzida */
}

.indice-item:hover .indice-seta {
  color: #ffffff;
}

/* Estilo para a faixa que estiver tocando */
.indice-item.active .indice-titulo {
  color: #ffffff;
  font-weight: 600;
  border-bottom: 2px gold solid;
}

/* Scrollbar customizada */
.indice-section::-webkit-scrollbar {
  width: 8px;
}

.indice-section::-webkit-scrollbar-track {
  background: #1a6dd9;
}

.indice-section::-webkit-scrollbar-thumb {
  background: #b3daff;
  border-radius: 4px;
}

.indice-section::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

/* --- Botões Anterior/Próximo (Mobile First) --- */
:root {
--nav-bg: #ffffff90;
--nav-text: #475569;
--nav-accent: #181f34;
--nav-border: #e2e8f0;
--nav-seta-bg: #f1f5f9;
}

.anterior-proximo {
display: flex;
width: 100%;
gap: 8px; /* Mobile: Gap menor */
padding: 20px 0 0 0;
box-sizing: border-box;
}

/* Base dos botões */
.anterior-hino, 
.proximo-hino {
flex: 1;
min-width: 0;
}

.anterior-hino a, 
.proximo-hino a {
display: flex;
align-items: center;
padding: 0px 8px; /* Mobile: Padding menor */
background: rgb(241, 241, 241);
border: 1px solid var(--nav-border);
border-radius: 10px;
color: var(--nav-text);
text-decoration: none;
font-size: 0.9rem; /* Mobile: Fonte um pouco maior que o original mobile */
font-weight: 500;
transition: all 0.2s ease;
height: 48px;
}

/* Efeito Hover no botão inteiro */
.anterior-hino a:hover, 
.proximo-hino a:hover {
border-color: var(--nav-accent);
color: var(--nav-accent);
background: #ffffff;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Estilização da Seta como Botão Interno Destaque */
.proximo-seta {
display: flex;
align-items: center;
justify-content: center;
width: 28px; /* Mobile: Seta menor */
height: 28px;
background: var(--nav-seta-bg);
color: var(--nav-text);
border-radius: 8px;
font-size: 1rem; /* Mobile: Fonte menor */
font-weight: bold;
transition: all 0.2s ease;
flex-shrink: 0;
}

/* Hover na Seta (acionado pelo link pai) */
.anterior-hino a:hover .proximo-seta,
.proximo-hino a:hover .proximo-seta {
background: var(--nav-accent);
color: #ffffff;
transform: scale(1);
}

/* Lógica de Nomes e Truncamento (...) */
.texto-nav {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
padding: 0 4px;
}

/* Estilo do Número (Badge) */
.badge-num {
font-family: monospace;
color: #94a3b8;
font-size: 0.7rem; /* Mobile: Número menor */
flex-shrink: 0;
}

/* Posicionamento ANTERIOR: [Seta] [Número] [Texto] */
.anterior-hino a {
flex-direction: row; 
}
.anterior-hino .proximo-seta {
margin-right: 5px;
}
.anterior-hino .badge-num {
margin-right: 0px;
}

/* Posicionamento PRÓXIMO: [Texto] [Número] [Seta] */
.proximo-hino a {
flex-direction: row;
text-align: right;
}
.proximo-hino .proximo-seta {
margin-left: 5px;
order: 3; 
}
.proximo-hino .badge-num {
margin-left: 0px;
order: 2;
}
.proximo-hino .texto-nav {
  order: 1;
}

/* Cor do número no hover */
.anterior-hino a:hover .badge-num,
.proximo-hino a:hover .badge-num {
color: var(--nav-accent);
}

/* =========================================
 DESKTOP (Media Query - Min Width)
 ========================================= */
@media (min-width: 769px) {
/* Ajuste da Seção Índice para Desktop */
.indice-section {
  display: none;
  padding: 30px 0 50px 0; /* Restaura padding original */
  margin-bottom: 50px;
}

.indice-header {
  padding: 25px 30px;
}

.indice-header h3, .indice-header h2 {
  font-size: 1rem; /* Restaura tamanho original */
}

.indice-header h2 {
  font-size: 1.5rem; /* Restaura tamanho original */
}

.title-info {
  font-size: 0.7rem; /* Restaura tamanho original */
}

.indice-item {
  padding: 5px 40px; /* Restaura padding original */
}

.indice-titulo {
  font-size: 1rem; /* Restaura tamanho original */
}

.indice-seta {
  margin-left: 15px; /* Restaura margem original */
}

/* Ajuste dos Botões para Desktop */
.anterior-proximo { 
display: flex;
justify-content: space-evenly;
padding: 0px;
}

.anterior-hino, .proximo-hino {
  max-width: 180px;
}

.anterior-hino a, .proximo-hino a { 
  padding: 2px 12px; /* Restaura padding original */
  font-size: 0.85rem; /* Restaura fonte original */
}

.proximo-seta {
  width: 32px; /* Restaura tamanho original */
  height: 32px;
  font-size: 1.2rem; /* Restaura tamanho original */
  border: 1px solid #ccc;
  padding-bottom: 5px;
}

.badge-num {
  font-size: 0.8rem; /* Restaura tamanho original */
}
}