/* Planet Aduana — glossário do comércio exterior (/glossario).
   Usa os tokens e as classes do style.css; aqui ficam só o índice, o filtro e a lista de termos. */

.glossario-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.glossario-secao { padding-top: clamp(40px, 6vw, 72px); }

.glossario {
  display: grid; grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px); align-items: start;
}

/* ---------- Lateral: filtro e índice ---------- */

.glossario__lateral {
  position: sticky; top: calc(var(--cabecalho) + 24px);
  display: grid; gap: 24px;
  max-height: calc(100vh - var(--cabecalho) - 48px); overflow-y: auto; overscroll-behavior: contain;
  padding: 24px; border-radius: var(--raio-g); background: var(--fundo-2);
}

.glossario__filtro[hidden] { display: none; }
.glossario__busca { position: relative; }
.glossario__busca .icone {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--texto-3); pointer-events: none;
}
.campo .glossario__busca input { padding-left: 44px; }
.glossario__busca input::-webkit-search-cancel-button { cursor: pointer; }
.glossario__contagem { font-size: .875rem; color: var(--texto-3); }

.indice__titulo {
  margin-bottom: 12px;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3);
}
.indice__letras {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px;
  margin: 0; padding: 0; list-style: none;
}
.indice__letra {
  display: grid; place-items: center; height: 38px;
  border: 1px solid var(--linha); border-radius: 10px; background: #fff;
  font-weight: 600; line-height: 1; color: var(--indigo); text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
a.indice__letra:hover { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.indice__letra--vazia, .indice__letra[aria-disabled="true"] {
  border-color: transparent; background: transparent; color: #a2a6b9; font-weight: 500; cursor: default;
}
a.indice__letra[aria-disabled="true"]:hover { border-color: transparent; background: transparent; color: #a2a6b9; }

/* ---------- Lista de termos ---------- */

.glossario__termos { max-width: 48rem; }

.letra { scroll-margin-top: 12px; }
/* espaço só entre seções visíveis: com o filtro, a primeira letra que sobra fica rente ao topo da lista */
.letra:not([hidden]) ~ .letra { margin-top: clamp(40px, 5vw, 56px); }
.letra[hidden] { display: none; }
.letra__cabeca {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-bottom: 10px; border-bottom: 2px solid var(--linha);
}
.letra__cabeca::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 2px; background: var(--ciano);
}
.letra__titulo { font-size: 2.5rem; line-height: 1; letter-spacing: -.01em; color: var(--indigo); }
.letra__voltar {
  display: none; align-items: center; gap: 6px; padding: 6px 2px;
  font-size: .875rem; font-weight: 600; color: var(--indigo); text-decoration: none;
}
.letra__voltar .icone { width: 16px; height: 16px; }
.letra__voltar:hover { text-decoration: underline; text-underline-offset: 3px; }

.termos { margin: 0; }
.termo {
  --respiro: 20px; /* quanto o destaque do termo aberto passa das bordas do texto */
  position: relative; scroll-margin-top: 12px;
  padding: 22px 0;
}
/* linha só entre termos visíveis: o primeiro que aparece (com ou sem filtro) não ganha linha extra.
   :where() mantém a especificidade de .termo, para o .termo:target abaixo poder apagar a linha. */
:where(.termo:not([hidden])) ~ .termo { border-top: 1px solid var(--linha); }
.termo[hidden] { display: none; }

.termo__nome dfn {
  font-style: normal; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; color: var(--marinho);
}
.termo__extenso { display: block; margin-top: 2px; font-size: .9375rem; color: var(--texto-3); }
.termo__def { margin: 10px 0 0; color: var(--texto-2); }
.termo__def > p + p, .termo__def > ul + p { margin-top: 10px; }
.termo__def strong { color: var(--texto); }
.termo__lista { margin: 8px 0 0; padding-left: 1.2em; }
.termo__lista li + li { margin-top: 4px; }

.termo__ver { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.termo__ver-rotulo {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3);
}
.termo__ver ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.termo__ver a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 12px;
  border: 1px solid var(--linha); border-radius: 999px; background: #fff;
  font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--indigo); text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.termo__ver a:hover { border-color: var(--indigo); }
.termo__ver .termo__pagina { border-color: transparent; background: color-mix(in srgb, var(--indigo) 9%, white); }
.termo__ver .termo__pagina:hover { border-color: var(--indigo); }
.termo__pagina .icone { width: 15px; height: 15px; }

/* Termo aberto por link (/glossario#afrmm): fundo claro com faixa ciano e um leve destaque ao chegar.
   O fundo passa das bordas do texto com sombras deslocadas, que não criam rolagem horizontal. */
.termo:target {
  --destaque: color-mix(in srgb, var(--ciano) 9%, white);
  border-top-color: transparent; border-radius: 6px;
  background: var(--destaque);
  box-shadow: calc(var(--respiro) * -1) 0 0 var(--destaque), var(--respiro) 0 0 var(--destaque);
  animation: glossario-destaque 1.6s ease-out;
}
.termo:target::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--respiro) * -1); width: 4px;
  border-radius: 6px 0 0 6px; background: var(--ciano);
}
/* o próximo termo visível não encosta a linha no destaque (com o filtro, pode não ser o vizinho direto) */
.termo:target ~ .termo:not([hidden]):not(.termo:target ~ .termo:not([hidden]) ~ .termo) { border-top-color: transparent; }
.termo:target .termo__ver a:not(.termo__pagina) { border-color: color-mix(in srgb, var(--ciano) 30%, white); }

/* registrada para a cor do destaque poder ser animada */
@property --destaque { syntax: "<color>"; inherits: false; initial-value: transparent; }

@keyframes glossario-destaque {
  from { --destaque: color-mix(in srgb, var(--ciano) 26%, white); }
}

.glossario__vazio {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start;
  padding: 24px; border: 1px dashed var(--borda-campo); border-radius: var(--raio);
  background: var(--fundo-2); color: var(--texto-2);
}
.glossario__vazio[hidden] { display: none; }
.glossario__vazio p { overflow-wrap: anywhere; } /* uma busca longa sem espaços quebra dentro da caixa */
.glossario__vazio strong { color: var(--marinho); }
.glossario__vazio a { color: var(--indigo); font-weight: 600; text-underline-offset: 3px; }
.glossario__vazio .botao { margin-top: 8px; min-height: 44px; padding: 10px 20px; }

.glossario__nota {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--linha);
  font-size: .9375rem; color: var(--texto-3);
}

.glossario-secao .chamada { margin-top: clamp(56px, 7vw, 88px); }

/* Até 1180px a coluna de termos chega à margem de 16px do contêiner (no celular, no tablet e em telas
   como a do iPad na horizontal): o destaque do termo aberto passa só 12px das bordas e não sai da tela. */
@media (max-width: 1180px) {
  .termo { --respiro: 12px; }
}

/* ---------- Telas menores: o índice fica acima da lista ---------- */

@media (max-width: 1000px) {
  .glossario { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .glossario__lateral { position: static; max-height: none; overflow: visible; }
  .glossario__termos { max-width: none; }
  .letra__voltar { display: inline-flex; }
  /* com o filtro ativo, o índice sai do caminho para os resultados aparecerem logo abaixo do campo */
  .glossario--filtrando .indice, .glossario--filtrando .letra__voltar { display: none; }
  .glossario--filtrando .glossario__lateral { padding-bottom: 20px; }
}

@media (max-width: 560px) {
  .glossario__lateral { padding: 20px 16px; border-radius: var(--raio); }
  .indice__letras { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
  .indice__letra { height: 40px; }
  .termo { padding: 20px 0; }
  .letra__titulo { font-size: 2.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .termo:target { animation: none; }
}

/* a chamada do fim usa h2 (vem depois das seções de letras); mesmo visual do h3 da página inicial */
.chamada h2 { font-size: 1.5rem; color: #fff; }