/* glossario.css — Glossário Cristal (Fase F do Pacto, Eixo 1).
 * Guia de termos jurídicos: cabeçalho + busca + índice por letra (filtro,
 * não âncora — ver views/glossario.js) + lista de verbetes com retrolinks. */

.glossario-pg {
  max-width: var(--largura-maxima);
  margin: 0 auto;
}

/* ---------- Cabeçalho ---------- */
.glossario-pg__cabecalho {
  margin-bottom: var(--esp-5);
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid var(--cor-fio);
}

.glossario-pg__voltar {
  margin-bottom: var(--esp-3);
  font-size: 14px;
}
.glossario-pg__voltar-link {
  color: var(--cor-suave);
  text-decoration: none;
}
.glossario-pg__voltar-link:hover {
  color: var(--acento);
}

.glossario-pg__chapeu {
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
}

.glossario-pg__titulo {
  margin-top: var(--esp-1);
  color: var(--cor-titulo);
}

.glossario-pg__subtitulo {
  margin-top: var(--esp-2);
  color: var(--cor-suave);
  font-size: var(--escala-pequena);
}

.glossario-pg__carregando {
  color: var(--cor-suave);
}

/* ---------- Busca ---------- */
.glossario-pg__form {
  margin-bottom: var(--esp-3);
}

.glossario-pg__campo {
  display: block;
}

.glossario-pg__input {
  width: 100%;
  padding: var(--esp-3) var(--esp-4);
  font-family: var(--fonte-corpo);
  font-size: var(--escala-base);
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--cor-fio);
  border-radius: var(--raio-pilula);
}
.glossario-pg__input::placeholder {
  color: var(--cor-suave);
}
.glossario-pg__input:focus {
  outline: none;
  border-color: var(--acento);
}

.glossario-pg__contagem {
  margin-bottom: var(--esp-3);
  color: var(--cor-suave);
  font-size: var(--escala-pequena);
}

/* ---------- Índice alfabético (filtro por letra) ---------- */
.glossario-pg__indice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--esp-5);
}

.glossario-pg__letra {
  display: inline-block;
  min-width: 2em;
  padding: 4px 10px;
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: var(--cor-suave);
  background: transparent;
  border: 1px solid var(--cor-fio);
  border-radius: var(--raio-pilula);
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.glossario-pg__letra:hover {
  color: var(--acento);
  border-color: var(--acento);
}
.glossario-pg__letra--ativa,
.glossario-pg__letra--ativa:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--cor-branco);
  font-weight: 600;
}

/* ---------- Lista de verbetes ---------- */
.glossario-pg__dl {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  margin: 0;
}

.glossario-pg__verbete {
  padding: var(--esp-4) var(--esp-5);
  background: var(--superficie);
  border: 1px solid var(--cor-fio-suave);
  border-radius: 14px;
  scroll-margin-top: var(--esp-4);
}
.glossario-pg__verbete--alvo {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento);
}

.glossario-pg__termo {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--cor-titulo);
}

.glossario-pg__definicao {
  margin: var(--esp-2) 0 0 0;
}

.glossario-pg__definicao-texto {
  margin: 0;
  color: var(--texto);
}

.glossario-pg__aparece {
  margin: var(--esp-2) 0 0 0;
  font-size: var(--escala-pequena);
  color: var(--cor-suave);
}

.glossario-pg__aparece-rotulo {
  font-family: var(--fonte-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

.glossario-pg__aparece-link {
  color: var(--acento);
}

/* ---------- Impressão ---------- */
@media print {
  .glossario-pg__form,
  .glossario-pg__indice,
  .glossario-pg__contagem {
    display: none !important;
  }
}