/* ===== Catálogo público (portal do leitor) e capas ===== */
/* Portal usa os mesmos tokens da área interna (app.css) */
:root { --tinta: var(--texto); --tinta-2: var(--texto-2); --papel: var(--fundo); --papel-2: var(--superficie-2); --linha: var(--borda); }
body.publico { background: var(--papel); }
.publico .conteudo { max-width: 1200px; padding-top: 0; }
.publico .rodape { border-top: 1px solid var(--linha); margin-top: 24px; }
.publico h1, .publico h2 { font-family: var(--serifa); font-weight: 500; letter-spacing: -.015em; }
.sobretitulo { margin: 0 0 4px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acento-escuro); }

.portal-barra { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--linha); }
.portal-barra-in { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 24px; }
.portal-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); min-width: 0; }
.portal-marca span { font-family: var(--serifa); font-weight: 700; font-size: 1.02rem; line-height: 1.15; display: flex; flex-direction: column; min-width: 0; }
.portal-marca small { font-family: system-ui, sans-serif; font-weight: 500; font-size: .74rem; color: var(--sutil); }
.portal-nav { display: flex; gap: 4px; margin-left: auto; }
.portal-nav a { padding: 8px 12px; border-radius: 99px; color: var(--tinta); text-decoration: none; font-weight: 500; white-space: nowrap; }
.portal-nav a { transition: background var(--mov), color var(--mov); }
.portal-nav a:hover { background: var(--papel-2); }
.portal-nav a[aria-current] { background: var(--tinta); color: #fff; }
.portal-entrar { white-space: nowrap; font-size: .88rem; color: var(--sutil); text-decoration: none; border: 1px solid var(--linha); border-radius: 99px; padding: 6px 12px; }
.portal-entrar:hover { color: var(--tinta); border-color: var(--tinta); }

/* Herói: claro e editorial; a vitrine de capas dá a cor */
.portal-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center;
  margin: 18px 0 48px; padding: 56px 52px 60px; border-radius: 28px; color: var(--tinta);
  background: radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--acento) 14%, transparent) 0%, transparent 60%), var(--papel-2); }
.portal-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); font-weight: 460; line-height: .98; letter-spacing: -.03em; margin: 6px 0 16px; }
.portal-hero h1 em { font-style: italic; color: var(--acento-escuro); }
.hero-numeros { margin: 0 0 26px; color: var(--sutil); font-size: 1rem; }
.hero-numeros strong { color: var(--tinta); font-weight: 620; font-variant-numeric: tabular-nums; }
.busca-portal { display: flex; background: var(--superficie); border-radius: 16px; padding: 6px; box-shadow: var(--sombra-flutuante); border: 1px solid var(--borda); transition: box-shadow var(--mov), border-color var(--mov); }
.busca-portal select { border: 0; background: var(--papel); border-radius: 11px; min-height: 50px; font-weight: 560; color: var(--tinta); box-shadow: none; }
.busca-portal input[type=search] { flex: 1; min-width: 0; border: 0; min-height: 50px; font-size: 1.08rem; padding: 0 16px; color: var(--tinta); background: transparent; box-shadow: none; }
.busca-portal input[type=search]::placeholder { color: #9a958b; }
.busca-portal input[type=search]:focus { outline: none; box-shadow: none; }
.busca-portal:focus-within { border-color: var(--borda-forte); box-shadow: var(--sombra-flutuante), 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent); }
.busca-portal .botao { min-height: 50px; border-radius: 11px; padding: 0 24px; }
.atalhos { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 20px; align-items: center; }
.atalhos a { color: var(--tinta-2); text-decoration: none; font-size: .86rem; padding: 5px 12px; border-radius: 8px; background: color-mix(in srgb, var(--superficie) 70%, transparent); border: 1px solid var(--linha); transition: background var(--mov), border-color var(--mov); }
.atalhos a:hover { background: var(--superficie); border-color: var(--borda-forte); color: var(--tinta); }
.atalhos a.mais { background: none; border-color: transparent; color: var(--acento-escuro); font-weight: 560; }
.atalhos.claros a { background: var(--superficie); }
.atalhos small { color: var(--sutil); margin-left: 4px; font-variant-numeric: tabular-nums; }
.hero-pilha { position: relative; height: 320px; }
.hero-pilha .capa { position: absolute; width: 168px; top: 18px; left: 50%; box-shadow: 0 2px 4px rgba(23,34,46,.18), 0 30px 50px -24px rgba(23,34,46,.55); transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.hero-pilha .capa:nth-child(1) { transform: translateX(-118%) rotate(-7deg) translateY(22px); }
.hero-pilha .capa:nth-child(2) { transform: translateX(-50%); z-index: 2; }
.hero-pilha .capa:nth-child(3) { transform: translateX(18%) rotate(6deg) translateY(22px); }
.hero-pilha:hover .capa:nth-child(1) { transform: translateX(-128%) rotate(-10deg) translateY(16px); }
.hero-pilha:hover .capa:nth-child(3) { transform: translateX(28%) rotate(9deg) translateY(16px); }

/* Capas (imagem ou gerada a partir do título) */
.capa { position: relative; aspect-ratio: 2 / 3; width: 100%; border-radius: 3px 7px 7px 3px; overflow: hidden; background: var(--papel-2);
  box-shadow: 0 1px 2px rgba(20,40,59,.18), 0 6px 16px -6px rgba(20,40,59,.35); container-type: inline-size; }
.capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.capa::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.12) 55%, rgba(0,0,0,.08)); }
.capa-gerada { background: linear-gradient(165deg, var(--c1), var(--c2)); color: #fff; }
.capa-gerada::after { content: ""; position: absolute; inset: 3.5% 5% 3.5% 9%; border: 1px solid rgba(255,255,255,.35); border-radius: 2px; pointer-events: none; }
.capa-miolo { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 11cqw 10cqw 9cqw 14cqw; }
.capa-tipo { font-size: 6.5cqw; letter-spacing: .14em; text-transform: uppercase; opacity: .8; min-height: 1em; }
.capa-titulo { font-family: var(--serifa); font-weight: 700; font-size: 11.5cqw; line-height: 1.08; margin-top: 6cqw; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; text-wrap: balance; }
.capa-autor { margin-top: auto; font-size: 7cqw; letter-spacing: .06em; text-transform: uppercase; opacity: .88; }
.capa-c0 { --c1: #455a64; --c2: #263238; } .capa-c1 { --c1: #6a4c93; --c2: #3f2b5b; }
.capa-c2 { --c1: #8d6e63; --c2: #4e342e; } .capa-c3 { --c1: #2a7f78; --c2: #12494a; }
.capa-c4 { --c1: #3a7bbf; --c2: #1d4470; } .capa-c5 { --c1: #4f8a3c; --c2: #24502a; }
.capa-c6 { --c1: #d9822b; --c2: #8a4515; } .capa-c7 { --c1: #b84a7a; --c2: #6b2146; }
.capa-c8 { --c1: #b8413e; --c2: #5e1d22; } .capa-c9 { --c1: #9a7b2f; --c2: #54401a; }
.capa-cx { --c1: #5d6b7a; --c2: #2f3a46; }

/* Livro (capa + título) */
.livro { position: relative; display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--tinta); min-width: 0; }
.livro .capa { margin-bottom: 8px; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease; }
.livro:hover .capa { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20,40,59,.18), 0 14px 26px -8px rgba(20,40,59,.45); }
.livro:focus-visible { outline: none; }
.livro:focus-visible .capa { outline: 3px solid var(--acento); outline-offset: 3px; }
.livro-titulo { font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.livro-autor { font-size: .85rem; color: var(--sutil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.livro-status { font-size: .78rem; font-weight: 600; color: var(--sutil); display: inline-flex; align-items: center; gap: 6px; }
.livro-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.livro-status.ok { color: var(--ok); }
.livro-status.aviso { color: var(--aviso); }
.livro-rank { position: absolute; top: -8px; left: -8px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tinta); color: #fff; font-family: var(--serifa); font-weight: 600; font-size: 1.05rem; box-shadow: 0 3px 8px rgba(0,0,0,.25); border: 2px solid var(--papel); }

/* Prateleiras */
.prateleira { margin: 0 0 56px; }
.prateleira-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--borda-forte); }
.prateleira-cab h2 { font-size: 1.85rem; font-weight: 480; letter-spacing: -.02em; margin: 0; color: var(--tinta); }
.prateleira-cab p { margin: 2px 0 0; color: var(--sutil); font-size: .92rem; }
.ver-tudo { white-space: nowrap; font-weight: 600; text-decoration: none; color: var(--acento-escuro); }
.ver-tudo:hover { text-decoration: underline; }
.prateleira-trilho { display: flex; gap: 22px; overflow-x: auto; padding: 12px 4px 14px 10px; margin: -12px -4px 0 -10px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--linha) transparent; }
.prateleira-trilho > .livro { flex: 0 0 148px; scroll-snap-align: start; }
.prateleira-trilho:focus-visible { outline: 3px solid rgba(217,130,43,.4); border-radius: 8px; }

/* Áreas do conhecimento: amostra de capas da própria estante */
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.area { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 4px; padding: 18px 18px 0; border-radius: var(--raio-g); text-decoration: none; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linha); overflow: hidden; min-height: 196px; transition: border-color var(--mov), box-shadow var(--mov), transform var(--mov); }
.area:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); transform: translateY(-2px); color: var(--tinta); }
.area-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.area-num { font-family: var(--serifa); font-size: 1.05rem; font-style: italic; color: var(--acento-escuro); font-variant-numeric: tabular-nums; }
.area-qtd { font-size: .8rem; color: var(--sutil); font-variant-numeric: tabular-nums; }
.area-nome { font-family: var(--serifa); font-size: 1.25rem; font-weight: 520; line-height: 1.12; letter-spacing: -.01em; max-width: 92%; }
.area-capas { display: flex; align-items: flex-end; height: 78px; margin-top: 10px; padding-left: 2px; }
.area-capas .capa { width: 52px; flex: none; margin-right: -14px; transform: translateY(18px) rotate(-3deg); transition: transform var(--mov); }
.area-capas .capa:nth-child(2) { transform: translateY(12px) rotate(2deg); z-index: 1; }
.area-capas .capa:nth-child(3) { transform: translateY(20px) rotate(5deg); }
.area:hover .area-capas .capa { transform: translateY(6px) rotate(-3deg); }
.area:hover .area-capas .capa:nth-child(2) { transform: translateY(2px) rotate(2deg); }
.area:hover .area-capas .capa:nth-child(3) { transform: translateY(8px) rotate(5deg); }

/* Como emprestar / visite */
.portal-info { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin: 8px 0 12px; }
.portal-info > div { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 26px 28px; }
.portal-info > div:only-child { grid-column: 1 / -1; }
.portal-info h2 { font-size: 1.6rem; }
.passos { margin: 0; padding: 0; list-style: none; counter-reset: passo; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.passos li { counter-increment: passo; position: relative; padding-left: 44px; }
.passos li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--papel-2); color: var(--acento-escuro); font-family: var(--serifa); font-weight: 700; }
.visite p { margin: 0 0 10px; }

/* Páginas internas do portal */
.pagina-cab { margin: 28px 0 24px; }
.pagina-cab h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: 0 0 6px; color: var(--tinta); }
.busca-topo { margin: 22px 0 12px; }
.busca-topo .busca-portal { box-shadow: 0 1px 2px rgba(20,40,59,.08); border: 1px solid var(--linha); }
.filtros-portal { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; padding: 12px 0; }
.filtros-portal label { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; font-weight: 600; color: var(--sutil); text-transform: uppercase; letter-spacing: .04em; }
.filtros-portal label.check { flex-direction: row; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--tinta); font-weight: 500; min-height: 40px; }
.filtros-portal select { border-color: var(--linha); background: #fff; font-size: .92rem; color: var(--tinta); font-weight: 500; }
.resumo-busca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 0 18px; border-top: 1px solid var(--linha); }
.resumo-busca p { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; background: var(--tinta); color: #fff; text-decoration: none; font-size: .85rem; }
.chip:hover { background: var(--tinta-2); }
.chip.claro { background: #fff; color: var(--tinta); border: 1px solid var(--linha); }
.chip.claro:hover { border-color: var(--tinta); }
.grade-livros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 22px; }
.vazio-portal { text-align: center; padding: 48px 16px; background: #fff; border: 1px dashed var(--linha); border-radius: 16px; }
.vazio-portal h2 { margin-bottom: 6px; }

.abas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.abas a { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--linha); background: #fff; text-decoration: none; color: var(--tinta); font-weight: 500; }
.abas a.ativa { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px 24px; }
.ranking a { display: grid; grid-template-columns: 44px 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 12px; text-decoration: none; color: var(--tinta); }
.ranking a:hover { background: #fff; }
.ranking-pos { font-family: var(--serifa); font-size: 2.2rem; font-weight: 400; font-style: italic; text-align: center; color: var(--acento); font-variant-numeric: tabular-nums; }
.ranking li:nth-child(n+4) .ranking-pos { color: var(--sutil); font-size: 1.6rem; }
.ranking-dados { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ranking-meta { font-size: .82rem; color: var(--sutil); }

.letras { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; position: sticky; top: 61px; z-index: 5; background: var(--papel); padding: 6px 0; }
.letras a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #fff; border: 1px solid var(--linha); text-decoration: none; font-weight: 700; color: var(--tinta); }
.letras a:hover { border-color: var(--tinta); }
.indice-assuntos { columns: 3 260px; column-gap: 32px; }
.grupo-letra { break-inside: avoid; margin-bottom: 18px; scroll-margin-top: 120px; }
.grupo-letra h3 { font-family: var(--serifa); font-size: 1.4rem; color: var(--acento-escuro); margin: 0 0 4px; border-bottom: 1px solid var(--linha); }
.grupo-letra ul { list-style: none; margin: 0; padding: 0; }
.grupo-letra li { padding: 3px 0; }
.grupo-letra a { color: var(--tinta); text-decoration: none; }
.grupo-letra a:hover { text-decoration: underline; }
.grupo-letra small { color: var(--sutil); }

/* Página da obra */
.trilha { margin: 20px 0 16px; font-size: .9rem; color: var(--sutil); display: flex; gap: 8px; flex-wrap: wrap; }
.trilha a { color: var(--sutil); }
.obra-detalhe { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; margin-bottom: 44px; }
.obra-capa .capa { box-shadow: 0 2px 4px rgba(20,40,59,.2), 0 24px 40px -16px rgba(20,40,59,.55); }
.obra-info h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.1; margin: 0 0 8px; color: var(--tinta); }
.obra-sub { font-weight: 400; color: var(--sutil); font-size: .7em; }
.obra-autores { font-size: 1.12rem; margin: 0 0 4px; }
.obra-autores a { color: var(--tinta); font-weight: 600; text-decoration-color: var(--linha); text-underline-offset: 3px; }
.obra-meta { color: var(--sutil); margin: 0 0 20px; }
.disponibilidade { margin: 0 0 18px; padding: 12px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); max-width: 720px; }
.disponibilidade strong { display: inline-flex; align-items: center; gap: 8px; font-size: 1.02rem; }
.disponibilidade strong::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sutil); }
.disponibilidade.ok strong::before { background: var(--ok); }
.disponibilidade.aviso strong::before { background: #d99a2b; }
.disponibilidade span { display: block; color: var(--sutil); font-size: .92rem; margin: 2px 0 0 17px; }
.chips.assuntos { margin-bottom: 14px; }
.leituras { font-size: .9rem; }
.ficha-tecnica { border-top: 1px solid var(--linha); padding: 12px 0; max-width: 720px; }
.ficha-tecnica summary { cursor: pointer; font-weight: 600; color: var(--tinta); }
.ficha-tecnica[open] summary { margin-bottom: 12px; }
.ficha-tecnica .tabela { background: #fff; }

/* Capa na ficha interna do acervo */
.obra-interna { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: start; }
.obra-interna-capa { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.obra-interna-capa .capa { width: 180px; margin-bottom: 4px; }
.obra-interna-capa form, .obra-interna-capa .botao { width: 100%; }
.form-capa { margin: 0; }

@media (max-width: 900px) {
  .portal-hero { grid-template-columns: 1fr; padding: 32px 22px 34px; }
  .hero-pilha { display: none; }
  .portal-barra-in { flex-wrap: wrap; gap: 8px 16px; }
  .portal-nav { order: 3; flex-basis: 100%; margin: 0 -16px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .portal-entrar { margin-left: auto; }
  .obra-detalhe { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
  .portal-info { grid-template-columns: 1fr; }
  .letras { top: 104px; }
}
@media (max-width: 560px) {
  .portal-marca span { font-size: .92rem; }
  .portal-hero { margin-top: 12px; border-radius: 16px; padding: 26px 18px 30px; }
  .busca-portal { flex-wrap: wrap; gap: 6px; }
  .busca-portal select, .busca-portal .botao { flex: 1 1 100%; }
  .prateleira-trilho { gap: 14px; }
  .prateleira-trilho > .livro { flex-basis: 118px; }
  .prateleira-cab h2 { font-size: 1.25rem; }
  .grade-livros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .obra-detalhe { grid-template-columns: 1fr; }
  .obra-capa { width: 200px; margin: 0 auto; }
  .ranking { grid-template-columns: 1fr; }
  .ranking a { grid-template-columns: 34px 54px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obra-interna { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .livro .capa, .area { transition: none; } .livro:hover .capa, .area:hover { transform: none; } }
/* variação de tom entre obras da mesma classe, para a estante não ficar monocromática */
.capa-v1 { filter: hue-rotate(28deg) saturate(.9); }
.capa-v2 { filter: hue-rotate(-24deg) brightness(.92); }
.capa-v3 { filter: saturate(.65) brightness(1.06); }