/* =========================================================================
   Telas NOVAS do acervo: busca em formato de conversa e ficha do registro.
   Nada aqui alcanca as telas antigas - tudo esta escopado em .ac / .fic.
   O legado estiliza button/a/h1-h6/ul globalmente em style.css, por isso os
   resets explicitos dentro dos dois escopos.
   Tokens de marca vem de barra-busca.css.
   ========================================================================= */

:root {
  /* A ficha do ia usa estes tokens, que naquele projeto vêm da barra de busca.
     Nesta página a barra antiga não carrega essa folha, então eles ficam aqui. */
  --brand-ink:  #1E3A5F;
  --brand-base: #0076AD;
  --brand-lift: #5FC0EE;
  --surface-2:  #F4F7FA;
  --accent-soft-2: #D9EBF5;

  --ac-fundo:      #F8F9FA;
  --ac-papel:      #FFFFFF;
  --ac-linha:      #E2E8EF;
  --ac-texto:      #191C1D;
  --ac-suave:      #667A88;
  --ac-rotulo:     #003366;
  --ac-radius:     14px;

  /* Aviso e informacao. Os mesmos valores do catalogo inteligente, para o
     amarelo de uma tela nao ser outro amarelo na tela vizinha. */
  --ac-aviso:       #92400E;
  --ac-aviso-fundo: #FFF8E8;
  --ac-aviso-linha: #F0C36D;
  --ac-info:        #0B5A86;
  --ac-info-fundo:  #E6F4FB;
  --ac-info-linha:  #9ED4F5;
}

/* ------------------------------------------------------------< estrutura */

.ac, .fic { box-sizing: border-box; }
.ac *, .ac *:before, .ac *:after,
.fic *, .fic *:before, .fic *:after { box-sizing: border-box; }

.ac {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 0;
  max-width: 1180px;
  margin: 0 auto 4rem;
  min-height: 70vh;
  background: var(--ac-papel);
  border: 1px solid var(--ac-linha);
  border-radius: 18px;
  overflow: hidden;
  font-family: 'Outfit', 'Signika', Arial, sans-serif;
  color: var(--ac-texto);
  text-align: left;
}

/* -------------------------------------------------------------< lateral */

.ac .ac__lateral {
  /* style.css do legado tem ".home aside { width:33%; float:right }" - como
     item de grid o float e ignorado, mas os 33% viravam 88 px de coluna. */
  width: auto;
  float: none;
  margin: 0;
  border-right: 1px solid var(--ac-linha);
  padding: 18px 16px 28px;
  background: var(--ac-papel);
}

.ac .ac__conversa, .ac .ac__lateral, .fic__corpo > * { float: none; width: auto; }

.ac .ac__nova {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  margin: 0 0 18px;
  border: 1px solid var(--line-strong, #C6D0DA);
  border-radius: 10px;
  background: var(--ac-papel);
  color: var(--ac-texto) !important;
  font-size: 17px;
  font-weight: 500;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  text-decoration: none;
}
.ac .ac__nova:hover { border-color: var(--brand-base); color: var(--brand-ink) !important; }

.ac__historico { margin: 0 0 18px; border-bottom: 1px solid var(--ac-linha); padding-bottom: 14px; }
.ac__historico > summary {
  cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ac-suave);
}
.ac__historico > summary::-webkit-details-marker { display: none; }
.ac__historico > summary:after { content: ' \25BE'; }
.ac__historico[open] > summary:after { content: ' \25B4'; }
.ac .ac__historico ul { list-style: none; margin: 10px 0 0; padding: 0; }
.ac .ac__historico li { margin: 0; }
.ac .ac__historico a {
  display: block; padding: 5px 0; font-size: 16px; line-height: 1.35;
  color: var(--ac-suave) !important; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac .ac__historico a:hover { color: var(--brand-base) !important; }

.ac__refinar-titulo {
  margin: 0 0 6px; font: 700 14.5px/1 'Outfit', Arial, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ac-suave);
}

.ac__grupo { margin: 18px 0 0; }
.ac .ac__grupo h3 {
  margin: 0 0 8px; padding: 0;
  font: 700 14.5px/1.3 'Outfit', Arial, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ac-rotulo);
}
.ac .ac__grupo ul { list-style: none; margin: 0; padding: 0; }
.ac .ac__grupo li { margin: 0; }

.ac .ac__faceta {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0; font-size: 16px; line-height: 1.35;
  color: var(--brand-base) !important; text-decoration: none;
}
.ac .ac__faceta:hover { text-decoration: underline; }
.ac .ac__faceta-nome {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac .ac__faceta-n { flex: 0 0 auto; color: var(--ac-suave); font-size: 14.5px; }

.ac .ac__faceta--ativa {
  color: var(--brand-ink) !important; font-weight: 600;
}
.ac .ac__faceta--ativa .ac__faceta-nome:before { content: '\2715\00a0'; color: var(--brand-base); }

.ac .ac__vermais {
  padding: 4px 0; font-size: 16px; color: var(--ac-suave) !important;
  background: none; border: 0; cursor: pointer;
  text-transform: none; text-shadow: none; box-shadow: none;
}
.ac .ac__vermais:hover { color: var(--brand-base) !important; }

.ac__faceta-extra[hidden] { display: none; }

/* -------------------------------------------------------------< conversa */

.ac__conversa { display: flex; flex-direction: column; min-width: 0; }

.ac__topo {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 24px 0; font-size: 16px; color: var(--ac-suave);
}
.ac__modos { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2, #F4F7FA); border-radius: 999px; }
.ac .ac__modo {
  min-height: 28px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ac-suave); cursor: pointer;
  font: 500 16px/28px 'Outfit', Arial, sans-serif;
  text-transform: none; text-shadow: none; box-shadow: none;
}
.ac .ac__modo[aria-pressed="true"] { background: var(--ac-papel); color: var(--brand-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(11,26,30,.12); }

.ac__rolo { flex: 1 1 auto; padding: 18px 24px 8px; overflow-x: hidden; }

.ac__bolha-linha { display: flex; justify-content: flex-end; margin: 0 0 18px; }
.ac__bolha {
  max-width: 70%; margin: 0; padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-ink), var(--brand-base));
  color: #fff; font-size: 18px; font-weight: 500;
  overflow-wrap: anywhere;
}

.ac .ac__resposta { margin: 0 0 18px; font-size: 18px; line-height: 1.7; color: var(--ac-texto); }
.ac .ac__resposta strong { color: var(--brand-ink); font-weight: 700; }

/* ------------------------------------------------------------< carrossel */

.ac__carrossel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 16px;
}

.ac__item[hidden] { display: none; }

.ac .ac__cartao { display: block; text-decoration: none; color: inherit !important; }

.ac__capa {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 190px; padding: 12px;
  border-radius: var(--ac-radius);
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ac .ac__cartao:hover .ac__capa { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11,26,30,.18); }

/* Seis tons estaveis por registro, derivados da marca. */
.ac__capa--0 { background: linear-gradient(150deg, #1E3A5F, #0076AD); }
.ac__capa--1 { background: linear-gradient(150deg, #2B3A73, #5B4B9E); }
.ac__capa--2 { background: linear-gradient(150deg, #4A3A78, #8E4B9E); }
.ac__capa--3 { background: linear-gradient(150deg, #0E4C6B, #2E8FB8); }
.ac__capa--4 { background: linear-gradient(150deg, #3B2F6B, #6D4B9E); }
.ac__capa--5 { background: linear-gradient(150deg, #16405C, #4A7FB5); }

.ac__capa-titulo {
  /* espaco para o numero do cartao, que fica sobreposto no canto */
  padding-right: 22px;
  font-size: 16px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ac__capa-rodape { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13.5px; }
.ac__selo {
  padding: 3px 7px; border-radius: 5px;
  background: rgba(255,255,255,.22); font-weight: 600;
  max-width: 72%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac__capa-n {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--brand-ink);
  font-size: 13.5px; font-weight: 700; line-height: 20px; text-align: center;
}

.ac__item-titulo {
  margin: 10px 0 2px; font-size: 17px; font-weight: 600; line-height: 1.35;
  color: var(--ac-texto);
}
.ac .ac__cartao:hover .ac__item-titulo { color: var(--brand-base); }
.ac__item-autor { margin: 0; font-size: 15px; line-height: 1.4; color: #8A6D3B; }

.ac__mais-linha { display: flex; justify-content: center; margin: 0 0 20px; }
.ac .ac__mais {
  min-height: 40px; padding: 0 20px;
  border: 1px solid var(--line-strong, #C6D0DA); border-radius: 999px;
  background: var(--ac-papel); color: var(--ac-texto);
  font: 500 17px/1 'Outfit', Arial, sans-serif; cursor: pointer;
  text-transform: none; text-shadow: none; box-shadow: none;
}
.ac .ac__mais:hover { border-color: var(--brand-base); color: var(--brand-ink); }

/* ----------------------------------------------------------------< lista */

.ac__lista[hidden] { display: none; }
.ac .ac__lista { list-style: none; margin: 0 0 20px; padding: 0; }
.ac .ac__lista li { margin: 0; border-bottom: 1px solid var(--ac-linha); }
.ac .ac__lista li:last-child { border-bottom: 0; }
.ac__lista-item { display: flex; gap: 12px; padding: 12px 2px; text-decoration: none; color: inherit !important; }
.ac__lista-item:hover .ac__item-titulo { color: var(--brand-base); }
.ac__lista-n { flex: 0 0 26px; font-size: 14.5px; font-weight: 700; color: var(--ac-suave); line-height: 1.5; }
.ac__lista-corpo { min-width: 0; }
.ac__lista-corpo .ac__item-titulo { margin-top: 0; }
.ac__lista-meta { margin: 3px 0 0; font-size: 14.5px; color: var(--ac-suave); }

/* ---------------------------------------------------------------< rodape */

.ac__pe { border-top: 1px solid var(--ac-linha); padding: 14px 24px 18px; }
.ac .ac__nota { margin: 10px 0 0; font-size: 15px; color: var(--ac-suave); text-align: center; }

.ac__vazio { padding: 40px 24px; text-align: center; color: var(--ac-suave); }

/* -------------------------------------------------------------< mobile  */

@media (max-width: 900px) {
  .ac { grid-template-columns: 1fr; }
  /* Resultado antes das facetas: empilhado, a lateral inteira ficaria na
     frente do que a pessoa veio ver. */
  .ac .ac__conversa { order: -1; }
  .ac .ac__lateral { border-right: 0; border-top: 1px solid var(--ac-linha); }
  .ac__carrossel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .ac__carrossel { grid-template-columns: 1fr; }
  .ac__bolha { max-width: 88%; }
}

/* =========================================================================
   Ficha do registro (acervo/registro/<rb>)
   ========================================================================= */

.fic {
  max-width: 1180px; margin: 0rem auto 4rem; padding: 0 0 24px;
  /* O .header-admin tem z-index 999998 e sombra: sem uma camada propria, a
     ficha e pintada POR BAIXO dele e o "Voltar para a busca", que fica na
     primeira linha, some. */
  position: relative; z-index: 1;
  background: var(--ac-papel); border: 1px solid var(--ac-linha);
  border-radius: 18px;
  font-family: 'Outfit', 'Signika', Arial, sans-serif;
  color: var(--ac-texto); text-align: left;
}

/* UMA linha so: voltar, trilha e, na direita, o folhear.
   
   Antes o flex-wrap deixava a trilha cair para baixo, porque ela carrega o
   titulo inteiro - e o "Voltar" ficava orfao numa linha propria. Quem
   encolhe agora e a trilha, com reticencias: ela e contexto, o botao e
   acao, e acao nao se corta. Sem o wrap, a altura do topo e a de uma linha
   e nao muda com o tamanho do titulo. */
.fic__topo {
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  padding: 16px 28px; border-bottom: 1px solid var(--ac-linha);
}
.fic .fic__voltar, .fic__folhear { flex: 0 0 auto; }
.fic__folhear { margin-left: auto; }
.fic .fic__voltar {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 17px; font-weight: 500; color: var(--brand-base) !important;
  text-decoration: none;
}
.fic .fic__voltar:hover { text-decoration: underline; }
.fic__trilha {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 16px; color: var(--ac-suave);
}
.fic__trilha span:after { content: ' \203A '; color: var(--line-strong, #C6D0DA); }
.fic__trilha span:last-child:after { content: ''; }

.fic__corpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; padding: 26px 28px 0; }

/* Exemplares e carrosseis: largura inteira da ficha, abaixo da grade de
   duas colunas. O mesmo recuo lateral do .fic__corpo, para as seções
   alinharem com o texto acima delas. */
.fic__largo { padding: 0 28px; }

.fic__capa img { width: 100%; border-radius: 10px; box-shadow: 0 10px 26px rgba(11,26,30,.22); display: block; }
/* Sem blob no PT_CAPAS: .fic__capa-vazia mostra a capa padrão
   (capa_nao_encontrada.png e variantes por tipo, via pesquisa/pegaCapa).
   29-10-2026: deixou de ser um retângulo com o título em texto. */
.fic__capa-vazia {
  margin: 0; padding: 0; min-height: 0;
  background: none; color: inherit; font: inherit;
}
.fic__ia { margin: 16px 0 0; }
.fic__ia h2 {
  margin: 0 0 8px; font: 700 14.5px/1 'Outfit', Arial, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ac-suave);
}
.fic .fic__ia-btn {
  display: block; width: 100%; margin: 0 0 8px; min-height: 38px; padding: 0 12px;
  border: 0; border-radius: 8px;
  background: linear-gradient(to bottom, rgb(92, 136, 181) 0%, rgb(42, 86, 131) 100%);
  border: 1px solid rgb(42, 86, 131); color: #fff;
  font: 600 15px/38px 'Outfit', Arial, sans-serif; text-align: center;
  cursor: pointer; text-transform: none; text-shadow: none; box-shadow: none;
}
.fic .fic__ia-btn:hover { filter: brightness(1.15); }

.fic__reservar-linha { margin: 0 0 16px; }
.fic .fic__reservar {
  min-height: 40px; padding: 0 18px;
  border: 1px solid var(--brand-base); border-radius: 8px;
  background: var(--brand-base); color: #fff;
  font: 600 16px/40px 'Outfit', Arial, sans-serif;
  cursor: pointer; text-transform: none; text-shadow: none; box-shadow: none;
}
.fic .fic__reservar:hover { filter: brightness(1.08); }
.fic .fic__malote {
  min-height: 32px; padding: 0 12px;
  border: 1px solid var(--brand-base); border-radius: 8px;
  background: #fff; color: var(--brand-base);
  font: 600 14px/32px 'Outfit', Arial, sans-serif;
  cursor: pointer; text-transform: none; text-shadow: none; box-shadow: none;
}
.fic .fic__malote:hover { background: var(--brand-base); color: #fff; }
.fic .fic__reservar-nota {
  margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: var(--ac-suave);
}

.fic__reg {
  display: inline-block; margin: 0; padding: 3px 9px;
  border-radius: 5px; background: var(--surface-2, #F4F7FA);
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: var(--ac-suave);
}

/* REG e os atalhos na mesma linha. A margem de baixo saiu do REG e veio
   para a linha: com dois filhos, margem no primeiro desalinhava o resto. */
.fic__reg-linha {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 10px;
}

.fic__atalho {
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 0 11px;
  border: 1px solid var(--ac-linha); border-radius: 999px;
  background: var(--ac-papel); color: var(--ac-rotulo);
  font-size: 14px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
}
.fic__atalho:hover { border-color: var(--ac-rotulo); background: var(--ac-fundo); }

/* Os dois atalhos de carrossel ganham cor propria: sao os unicos que levam
   para outro acervo alem deste registro, e a cor separa isso dos demais. */
.fic .fic__atalho--aviso {
  border-color: var(--ac-aviso-linha); background: var(--ac-aviso-fundo); color: var(--ac-aviso);
}
.fic .fic__atalho--aviso:hover { border-color: var(--ac-aviso); background: #FDF1D8; }

.fic .fic__atalho--info {
  border-color: var(--ac-info-linha); background: var(--ac-info-fundo); color: var(--ac-info);
}
.fic .fic__atalho--info:hover { border-color: var(--ac-info); background: #D7EDF8; }

/* O alvo não encosta no topo da janela ao receber a rolagem, e o contorno
   de foco não fica colado no texto quando o atalho é usado pelo teclado. */
.fic__secao[id] { scroll-margin-top: 16px; }
.fic__secao[id]:focus { outline: none; }
.fic__secao[id]:focus-visible { outline: 2px solid var(--ac-rotulo); outline-offset: 6px; border-radius: 6px; }
.fic .fic__titulo {
  margin: 0 0 8px; font: 800 29px/1.25 'Outfit', Arial, sans-serif;
  color: var(--brand-base);
}
.fic .fic__resp { margin: 0 0 18px; font-size: 18px; line-height: 1.5; color: #8A6D3B; }

.fic__abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--ac-linha); margin: 0 0 18px; }
.fic .fic__aba {
  min-height: 38px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent;
  background: none; color: var(--ac-suave); cursor: pointer;
  font: 500 17px/38px 'Outfit', Arial, sans-serif;
  text-transform: none; text-shadow: none; box-shadow: none;
}
.fic .fic__aba[aria-selected="true"] { color: var(--brand-base); border-bottom-color: var(--brand-base); font-weight: 600; }

.fic__painel[hidden] { display: none; }

/* Referência ABNT: conteúdo da aba, não rodapé. O <p> herdava o tamanho
   pequeno do style.css legado e sumia ao lado do título e dos campos
   (17,5 px). 19 px / 1.7 lê sem competir com o h1 (29 px); 72 ch evita
   linha interminável em tela larga. */
.fic .fic__refer {
  margin: 0;
  max-width: 72ch;
  font-size: 19px;
  line-height: 1.7;
  color: var(--ac-texto);
  overflow-wrap: anywhere;
}
.fic .fic__refer strong { font-weight: 700; }

.fic__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.fic__campo { min-width: 0; }
.fic__campo--fonte { grid-column: 1 / -1; }
.fic__campo dt {
  margin: 0 0 3px; font: 700 14.5px/1.3 'Outfit', Arial, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ac-rotulo);
}
.fic__campo dd { margin: 0; font-size: 17.5px; line-height: 1.55; overflow-wrap: anywhere; }

/* --- nota longa: 5 linhas e um botao ---------------------------------
   O corte e visual (line-clamp), nao truncamento do texto: o conteudo
   inteiro esta no HTML, entao Ctrl+F, impressao e leitor de tela
   continuam alcancando tudo. Sem JS o botao nasce hidden e a nota
   aparece... cortada - por isso a classe aberta e a regra padrao e o
   corte e que e ligado pelo JS. */
/* CORTADA POR PADRAO, e o JS so DESLIGA o corte quando nao ha o que
   revelar. O contrario - ligar o corte pelo JS - deixava a nota inteira na
   tela sempre que o script chegasse atrasado ou viesse do cache antigo, e
   era esse o defeito. Aqui, se algo falhar, falha para o lado certo: cinco
   linhas. */
.fic__nota {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fic__nota.fic__nota--inteira {
  display: block; -webkit-line-clamp: none; overflow: visible;
}

/* O style.css do legado pinta TODO button com gradiente azul, altura fixa,
   caixa alta e sombra de texto. Um "ver mais" com cara de botao de acao
   pesa mais que a propria nota, entao aqui ele e desmontado peca por peca
   e remontado como link discreto. */
.fic .fic__nota-mais {
  display: inline-block; margin-top: 7px;
  height: auto; min-height: 0; padding: 0;
  border: 0; border-radius: 0;
  background: none; background-image: none; box-shadow: none; text-shadow: none;
  color: var(--ac-rotulo);
  font: 600 15px/1.3 inherit; letter-spacing: 0; text-transform: none;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.fic .fic__nota-mais:hover { color: var(--ac-texto); }
/* Regra de autor vence o [hidden] do navegador: sem isto o botao aparece
   mesmo escondido, inclusive nas notas curtas, que nao tem o que revelar. */
.fic .fic__nota-mais[hidden] { display: none; }

/* A ficha dentro do painel do Catalogo Inteligente ja tem o "Voltar para a
   busca" do painel. O da ficha navega de verdade - e era ele que levava
   para /acervo e limpava a tela. O folhear idem. */
/* O "Voltar" da ficha FICA dentro do painel: ele ja esta na mesma linha da
   trilha, e o JS faz ele fechar o painel em vez de navegar. Assim nao ha
   duas linhas de volta, uma do painel e outra da ficha. Quem sai e o
   folhear, que navega de verdade e levaria a pessoa para fora. */
.ci__ficha-corpo .fic__folhear { display: none; }

.fic__secao { margin: 28px 0 0; }
.fic .fic__secao h2 {
  margin: 0 0 10px; font: 700 14.5px/1.3 'Outfit', Arial, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ac-rotulo);
}
.fic__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fic .fic__chip {
  padding: 5px 11px; border-radius: 999px;
  background: var(--accent-soft-2, #D9EBF5); color: var(--brand-ink) !important;
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.fic .fic__chip:hover { background: var(--brand-base); color: #fff !important; }

.fic__exemplares { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.fic__exemplares th {
  padding: 8px 10px; text-align: left; border-bottom: 2px solid var(--ac-linha);
  font: 700 14px/1.3 'Outfit', Arial, sans-serif;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ac-rotulo);
}
/* 29-10-2026: thead sempre no cinza do hover global (frame_admin.css
   table tr:hover = #E6E6E6). O cabeçalho não muda no hover nem usa
   cursor de clique — isso vale só para as linhas do tbody. */
.fic .fic__exemplares thead,
.fic .fic__exemplares thead tr,
.fic .fic__exemplares thead th {
  background-color: #E6E6E6;
}
.fic .fic__exemplares thead tr:hover,
.fic .fic__exemplares thead th:hover {
  background-color: #E6E6E6;
  cursor: default;
}
.fic__exemplares td { padding: 9px 10px; border-bottom: 1px solid var(--ac-linha); }
.fic__exemplares .ci__item-sit { font-size: 12px; }

/* 29-10-2026: capítulos associados (MARC 773 → RB desta obra).
   30-10-2026: .fic__obra-link é o inverso (capítulo → livro). */
.fic .fic__capitulo-link,
.fic .fic__obra-link {
  font-weight: 600; color: var(--brand-base) !important; text-decoration: none;
}
.fic .fic__capitulo-link:hover,
.fic .fic__obra-link:hover { text-decoration: underline; }

.fic .fic__livro {
  padding: 14px 16px;
  border: 1px solid var(--ac-info-linha);
  border-radius: var(--ac-radius);
  background: var(--ac-info-fundo);
}
.fic .fic__livro-link { font-size: 18px; font-weight: 700; }
.fic .fic__livro-autor { margin: 6px 0 0; color: var(--ac-suave); font-size: 16px; }

/* 29-10-2026: coleção da revista por ano. */
.fic .fic__colecao-ver {
  min-height: 32px; padding: 0 12px;
  border: 1px solid var(--ac-linha); border-radius: 8px;
  background: var(--ac-papel); color: var(--brand-base);
  font: 600 14px/32px 'Outfit', Arial, sans-serif;
  cursor: pointer; text-transform: none; text-shadow: none; box-shadow: none;
}
.fic .fic__colecao-ver:hover { border-color: var(--brand-base); background: var(--ac-info-fundo); }
.fic__fasciculos { margin-top: 8px; }

.fic__marc { overflow-x: auto; font-size: 16px; }
.fic__marc table { width: 100%; }

.fic__painel .fic__cartao {
  position: relative;
  flex: none;
  width: auto;
  max-width: 640px;
  margin: 4px 0 8px;
  padding: 22px 22px 36px;
  background: #fff;
  border: 1px solid var(--ac-linha);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .07);
}
.fic__cartao-texto {
  margin: 0;
  white-space: pre-wrap;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.45;
  color: #0F172A;
}
.fic__cartao-furo {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border: 2px solid #0F172A;
  border-radius: 50%;
  background: #fff;
}

@media (max-width: 900px) {
  .fic__corpo { grid-template-columns: 1fr; gap: 22px; }
  .fic__grade { grid-template-columns: 1fr; }
  .fic__capa { max-width: 240px; }
}

/* Folhear a lista de resultados a partir da ficha. */
.fic__folhear { display: inline-flex; align-items: center; gap: 6px; }
.fic__folhear[hidden] { display: none; }
.fic .fic__folhear-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line-strong, #C6D0DA); border-radius: 8px;
  background: var(--ac-papel); color: var(--ac-texto); cursor: pointer;
  text-transform: none; text-shadow: none; box-shadow: none;
}
.fic .fic__folhear-btn:hover:not([disabled]) { border-color: var(--brand-base); color: var(--brand-base); }
.fic .fic__folhear-btn[disabled] { opacity: .35; cursor: default; }
.fic__folhear-pos { font-size: 15px; color: var(--ac-suave); font-variant-numeric: tabular-nums; }

/* ===================================================< carrossel da ficha

   Faixa rolável com scroll-snap. As setas são do JS; sem ele a faixa
   continua arrastável, que é como o dedo e a roda do mouse já esperam.   */

.fic__carrossel { position: relative; }

.fic__faixa {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* Espaço para a sombra dos cartões não ser cortada pelo overflow. */
  padding: 4px 2px 10px;
  margin: 0; list-style: none;
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: reduce) { .fic__faixa { scroll-behavior: auto; } }

.fic__carrossel { --fic-capa-w: 132px; }

/* O style.css do legado veste li e ul (marcador, margem, borda) e a ficha
   não tem o reset de box-sizing que a tela de busca tem. Sem isto o cartão
   mede mais do que os 132px declarados e as setas saem do centro da capa. */
.fic__carrossel, .fic__carrossel *,
.fic__carrossel *::before, .fic__carrossel *::after { box-sizing: border-box; }
.fic__faixa > li { margin: 0; padding: 0; border: 0; background: none; list-style: none; }

.fic__cartao {
  flex: 0 0 auto; width: var(--fic-capa-w);
  scroll-snap-align: start;
}
.fic__cartao > a {
  display: flex; flex-direction: column; gap: 7px;
  color: inherit; text-decoration: none;
}

/* Miniatura do carrossel. Nome próprio de propósito: .fic__capa já é a
   capa GRANDE da ficha, e reaproveitar o nome fazia as regras daqui
   (proporção 3/4, overflow hidden) recortarem aquela ao meio.

   A capa tipográfica é o fundo PERMANENTE; a imagem do acervo entra por
   cima quando chega. Sem transição de opacidade: com carregamento lazy o
   onload pode não disparar e a capa ficaria invisível. */
.fic__mini-capa {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 3 / 4; width: 100%;
  padding: 8px; border-radius: 8px; overflow: hidden;
  color: #fff;
  box-shadow: 0 2px 7px rgba(11, 26, 30, .16);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Navegador sem aspect-ratio (Safari < 15): altura fixa é melhor que capa
   de 0px de altura. */
@supports not (aspect-ratio: 3 / 4) { .fic__mini-capa { height: 176px; } }

.fic__cartao > a:hover .fic__mini-capa {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(11, 26, 30, .24);
}

.fic__mini-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 8px;
  opacity: 1; transition: none;
}
.fic__mini-pe {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 6px; font-size: 12px;
  /* Sobre a imagem: sem esta sombra o texto some numa capa clara. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.fic__mini-sigla { padding: 2px 5px; border-radius: 4px; background: rgba(255, 255, 255, .22); font-weight: 700; }

.fic__cartao-titulo {
  font-size: 15px; font-weight: 600; line-height: 1.32;
  /* Três linhas e corta: cartão que cresce com o título desalinha a faixa. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fic__cartao-autor {
  font-size: 14px; color: var(--ac-suave); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* As setas flutuam sobre as bordas da faixa, centradas na CAPA - não no
   cartão inteiro, senão caem sobre o título. A capa é 3/4, então metade da
   altura dela é dois terços da largura; o 4px é o respiro do topo da faixa. */
.fic__seta {
  position: absolute; z-index: 2;
  top: calc(4px + var(--fic-capa-w) * 2 / 3);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-top: -16px;
  border: 1px solid var(--ac-linha); border-radius: 50%;
  background: var(--ac-papel); color: var(--ac-rotulo);
  font-size: 23px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(11, 26, 30, .12);
}
.fic__seta--ant  { left: -10px; }
.fic__seta--prox { right: -10px; }
.fic__seta[disabled] { opacity: .32; cursor: default; }
.fic__seta[hidden] { display: none; }

/* ===================================================< paginação da grade */

.fic__paginacao {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 10px;
}
.fic__paginacao[hidden] { display: none; }
.fic__pag-onde { font-size: 14.5px; color: var(--ac-suave); }
.fic__pag-btn {
  min-height: 30px; padding: 0 12px;
  border: 1px solid var(--ac-linha); border-radius: 8px;
  background: var(--ac-papel); color: var(--ac-rotulo);
  font-size: 15px; cursor: pointer; text-transform: none; box-shadow: none;
}
.fic__pag-btn:hover:not([disabled]) { border-color: var(--ac-rotulo); }
.fic__pag-btn[disabled] { opacity: .4; cursor: default; }