/* acervo.css — home/estante (Variante A: clara/colorida, sans).
 *
 * Página branca; cada edição é um CARTÃO com header tingido na cor da edição
 * (acento por edição via --capa-acento/--capa-tint), corpo com distribuição por
 * tema e botão "Abrir sumário". Cores sempre via tokens (tokens.css) — sem hex
 * solto. Fiel a `screenshots/capa-A.png`. */

/* ---------- Trilho largo (a home estoura o max-width do <main>) ---------- */
.acervo {
  margin: calc(-1 * var(--esp-6)) calc(50% - 50vw) var(--esp-7);
  padding: var(--esp-6) max(var(--esp-4), calc(50vw - 560px)) var(--esp-7);
}

/* ---------- Cabeçalho ---------- */
.acervo__cabecalho {
  max-width: 760px;
  margin: 0 auto 46px;
  text-align: center;
}

.acervo__chapeu {
  margin-bottom: 20px;
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--acento);
}

.acervo__titulo {
  /* Título mais longo ("Jurisprudência em Linguagem Simples"): escala reduzida
     em relação ao hero padrão para caber em uma única linha. */
  font-size: clamp(1.5rem, 0.9rem + 2.4vw, 2.75rem);
  white-space: nowrap;
  color: var(--cor-titulo);
}

.acervo__subtitulo {
  margin-top: 16px;
  color: var(--cor-suave);
  font-size: 1rem;
  line-height: 1.5;
}

/* ---------- Barra de ferramentas (modos + busca) ---------- */
.acervo__ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 44px;
  padding: 14px 0;
  border-top: 1px solid var(--cor-fio);
  border-bottom: 1px solid var(--cor-fio);
}

.acervo__grupos-modo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* Alternador segmentado: trilho claro; ativo = pílula branca com sombra. */
.acervo__modos {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--raio-pilula);
  background: var(--cor-realce-claro);
}

.acervo__modo {
  padding: 9px 22px;
  border-radius: var(--raio-pilula);
  font-size: 14px;
  font-weight: 500;
  color: var(--cor-suave);
  text-decoration: none;
  transition: color var(--transicao), background var(--transicao);
}
.acervo__modo:hover {
  color: var(--cor-titulo);
}
.acervo__modo--ativo,
.acervo__modo--ativo:hover {
  background: var(--superficie);
  color: var(--acento);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(30, 25, 15, 0.12);
}

/* Link para o Glossário Cristal (Fase F do Pacto), ao lado dos alternadores. */
.acervo__glossario-link {
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cor-suave);
  text-decoration: none;
  padding: 9px 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}
.acervo__glossario-link:hover {
  color: var(--acento);
  border-color: var(--acento);
}

/* Campo de busca em cápsula clara com lupa. */
.acervo__busca {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 260px;
  max-width: 380px;
  padding: 10px 16px;
  border: 1px solid var(--cor-fio);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  color: var(--cor-label);
  transition: border-color var(--transicao);
}
.acervo__busca:focus-within {
  border-color: var(--acento);
}

.acervo__busca-lupa {
  flex: none;
  color: var(--cor-label);
}

.acervo__busca-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: 15px;
}
.acervo__busca-input::placeholder {
  color: var(--cor-suave);
}
.acervo__busca-input:focus {
  outline: none;
}
.acervo__busca-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.acervo__busca-limpar {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cor-limpar-bg);
  color: var(--cor-suave);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.acervo__busca-limpar:hover {
  background: var(--acento);
  color: var(--cor-branco);
}
.acervo__busca-limpar[hidden] {
  display: none;
}

/* Contagem de resultados (aria-live). Vazia fora de busca -> some. */
.acervo__busca-contagem {
  margin-bottom: var(--esp-4);
  color: var(--cor-suave);
  font-size: var(--escala-pequena);
}
.acervo__busca-contagem:empty {
  display: none;
}

/* ---------- Filtros (chips de ano/tema) ---------- */
.acervo__filtros {
  margin-bottom: var(--esp-6);
}

.acervo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acervo__chip {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--cor-fio);
  border-radius: var(--raio-pilula);
  color: var(--cor-suave);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.acervo__chip:hover {
  color: var(--acento);
  border-color: var(--acento);
}
.acervo__chip--ativo,
.acervo__chip--ativo:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--cor-branco);
  font-weight: 600;
}

/* ---------- Bloco por grupo (ano ou tema) ---------- */
.acervo__grupo {
  margin-bottom: var(--esp-7);
}

.acervo__grupo-titulo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.acervo__grupo-numero {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cor-titulo);
}
.acervo__grupo-numero--tema {
  font-size: 20px;
  font-weight: 700;
}

.acervo__grupo-contagem {
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-label);
}

/* ---------- Modo tema: grade de decisões ---------- */
.acervo__decisoes {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.acervo__decisao-link {
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
  padding: 18px 20px;
  background: var(--superficie);
  border: 1px solid var(--cor-fio-suave);
  border-radius: 13px;
  text-decoration: none;
  color: var(--texto);
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.acervo__decisao-link:hover {
  border-color: var(--cor-fio);
  box-shadow: var(--sombra-card-hover);
  transform: translateY(-1px);
}

.acervo__decisao-assunto {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cor-titulo);
}

.acervo__decisao-meta {
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  color: var(--cor-sub);
}

/* ====================================================================== */
/* Estante — grade de cartões de edição (Variante A "Capas")               */
/* ====================================================================== */
.acervo__estante {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: start;
}

/* O cartão inteiro (header tingido + corpo + botão). */
.acervo__volume {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--cor-fio-card);
  border-radius: var(--raio-card);
  overflow: hidden;
  box-shadow: var(--sombra-card);
}

/* Header tingido na cor da edição, com lombada de acento à esquerda. */
.acervo__capa {
  position: relative;
  padding: 34px 30px 26px;
  background: var(--capa-tint, var(--cor-realce-claro));
  border-bottom: 1px solid var(--cor-fio-tenue);
}
.acervo__capa::before {
  content: '';
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: var(--capa-acento, var(--acento));
}

.acervo__capa-tribunal {
  display: block;
  margin-bottom: 14px;
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--capa-acento, var(--acento));
}

.acervo__capa-cab {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.acervo__capa-numero {
  display: flex;
  align-items: flex-end;
  gap: 0.15em;
}
.acervo__capa-numero-rotulo {
  padding-bottom: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--capa-acento, var(--acento));
}
.acervo__capa-numero-valor {
  font-size: 64px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--capa-acento, var(--acento));
}

.acervo__capa-data {
  margin-left: auto;
  padding-bottom: 6px;
  text-align: right;
}
.acervo__capa-mes {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--cor-forte);
}
.acervo__capa-ano {
  display: block;
  margin-top: 5px;
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-label);
}

/* Corpo do cartão: contagem + distribuição por tema. */
.acervo__corpo-card {
  flex: 1;
  padding: 22px 30px 12px;
}

.acervo__card-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.acervo__card-cab-ementas {
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--capa-acento, var(--acento));
}
.acervo__card-cab-temas {
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-size: 11px;
  color: var(--cor-label);
}

/* Distribuição por tema (linhas com quadradinho colorido + nome + N). */
.acervo__distrib {
  display: flex;
  flex-direction: column;
}
.acervo__distrib-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid var(--cor-fio-tenue);
  font-size: 13.5px;
  color: var(--texto);
}
.acervo__distrib-ponto {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--tema-cor, var(--acento));
}
.acervo__distrib-nome {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acervo__distrib-n {
  flex: none;
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--cor-sub);
}

/* Ações do cartão: "Abrir sumário" cheio + PDF oficial. */
.acervo__acoes {
  display: flex;
  gap: 10px;
  padding: 14px 30px 30px;
}
.acervo__acao {
  text-align: center;
  border-radius: var(--raio);
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.acervo__acao--sumario {
  flex: 1 1 auto;
  background: var(--capa-acento, var(--acento));
  color: var(--cor-branco);
}
.acervo__acao--sumario:hover {
  background: var(--capa-deep, var(--acento));
  color: var(--cor-branco);
}
.acervo__acao--pdf {
  flex: 0 0 auto;
  border: 1px solid var(--cor-fio);
  color: var(--capa-acento, var(--acento));
}
.acervo__acao--pdf:hover {
  background: var(--capa-tint, var(--cor-realce-claro));
  color: var(--capa-deep, var(--acento));
}

/* ====================================================================== */
/* Variante "Índice" — cartões horizontais com barras de distribuição      */
/* ====================================================================== */
.acervo__indice {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.acervo__indice-item {
  display: grid;
  grid-template-columns: 230px 1fr;
  background: var(--superficie);
  border: 1px solid var(--cor-fio-card);
  border-radius: var(--raio-card);
  overflow: hidden;
  box-shadow: var(--sombra-card);
}

.acervo__indice-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 24px;
  background: var(--capa-tint, var(--cor-realce-claro));
  border-right: 1px solid var(--cor-fio-tenue);
  text-decoration: none;
  color: var(--texto);
}
.acervo__indice-numero {
  display: flex;
  align-items: flex-end;
  gap: 0.15em;
}
.acervo__indice-numero-rotulo {
  padding-bottom: 6px;
  font-size: 13px;
  color: var(--cor-label);
}
.acervo__indice-numero-valor {
  font-size: 52px;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--capa-acento, var(--acento));
}
.acervo__indice-meta {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cor-forte);
}
.acervo__indice-contagem {
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-label);
}

.acervo__barras {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 26px 30px;
}
.acervo__barra {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: baseline;
}
.acervo__barra-rotulo {
  grid-column: 1;
  font-size: 13.5px;
  color: var(--texto);
}
.acervo__barra-valor {
  grid-column: 2;
  text-align: right;
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--cor-sub);
}
.acervo__barra-trilho {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--cor-fio-tenue);
  overflow: hidden;
}
.acervo__barra-preenchida {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 3px;
  background: var(--barra-cor, var(--acento));
}

@media (max-width: 34rem) {
  .acervo__indice-item {
    grid-template-columns: 1fr;
  }
  .acervo__indice-link {
    border-right: none;
    border-bottom: 1px solid var(--cor-fio-tenue);
  }
}

/* ---------- Skeleton de carregamento ---------- */
.acervo__capa--esqueleto {
  min-height: 180px;
  background: var(--cor-fio-tenue);
  animation: acervo-pulsar 1.4s ease-in-out infinite;
}
.acervo__capa--esqueleto::before {
  display: none;
}
@keyframes acervo-pulsar {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .acervo__capa--esqueleto {
    animation: none;
  }
}

/* ---------- Impressão ---------- */
@media print {
  .acervo {
    margin: 0;
    padding: 0;
  }
  .acervo__acoes,
  .acervo__ferramentas,
  .acervo__filtros,
  .acervo__busca-contagem {
    display: none !important;
  }
  .acervo__volume,
  .acervo__indice-item {
    border: 1px solid #000;
    box-shadow: none;
    break-inside: avoid;
  }
}