/* =====================================================================
   BIBLIOTECA — o estilo da tela
   =====================================================================
   Quem desenha é public/biblioteca/tela.js; o conteúdo é dados.js.
   Aqui só tem aparência.

   TODA regra deste arquivo começa com #view-biblioteca, de propósito.
   Ele é baixado em toda visita ao site, inclusive na home. Sem o prefixo,
   um nome genérico (.item, .chip, .tags) pintaria o site inteiro — foi
   exatamente o que aconteceu quando o Banco Técnico entrou, em
   18/08/2026 (STATUS.md 9.2). Ao acrescentar regra aqui, mantenha o
   prefixo mesmo que pareça desnecessário.
   ===================================================================== */

/* ---------- entrada: busca ---------- */
#view-biblioteca .bib-busca{margin:0 0 26px}
#view-biblioteca .bib-busca input{
  width:100%;max-width:560px;font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:12px 20px;transition:border-color .15s, box-shadow .15s;
}
#view-biblioteca .bib-busca input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#view-biblioteca .bib-busca input::placeholder{color:var(--muted)}

/* ---------- entrada: os seis segmentos ---------- */
/* 320px em vez de 250: com 250 cabem quatro colunas e a grade fica apertada
   demais para o texto de cada segmento. Com 320 dá 3 por linha, 3 + 3. */
#view-biblioteca .bib-segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
#view-biblioteca .bib-seg{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:22px;transition:border-color .15s, transform .15s, box-shadow .15s;
}
#view-biblioteca .bib-seg:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
#view-biblioteca .bib-seg-n{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
#view-biblioteca .bib-seg h3{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
#view-biblioteca .bib-seg p{font-size:14px;color:var(--muted);line-height:1.5;flex:1}
#view-biblioteca .bib-seg-ir{font-size:13px;font-weight:600;color:var(--accent);margin-top:14px}

/* ---------- dentro do segmento ---------- */
#view-biblioteca .bib-voltar{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:18px}
#view-biblioteca .bib-voltar:hover{color:var(--ink)}
#view-biblioteca .bib-seg-head{margin-bottom:22px}
#view-biblioteca .bib-seg-head h3{font-family:'Instrument Sans',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.025em}
#view-biblioteca .bib-seg-head p{font-size:15px;color:var(--ink-2);margin-top:8px;max-width:70ch}

/* ---------- contador ----------
   Os chips de filtro sairam em 19/08/2026 junto com o filtro: os segmentos
   viraram o proprio recorte. Se o filtro voltar, as regras dele voltam aqui. */
#view-biblioteca .bib-conta{font-size:13px;color:var(--muted);margin-bottom:16px}

/* ---------- grupos e itens ---------- */
#view-biblioteca .bib-grupo{margin-bottom:34px}
#view-biblioteca .bib-grupo-head{display:flex;align-items:baseline;gap:10px;padding-bottom:8px;border-bottom:2px solid var(--ink);margin-bottom:2px}
#view-biblioteca .bib-grupo-head h4{font-family:'Instrument Sans',sans-serif;font-size:16px;font-weight:700;letter-spacing:-.01em}
#view-biblioteca .bib-grupo-head span{font-size:12px;color:var(--muted)}
#view-biblioteca .bib-nota{font-size:13px;color:var(--ink-2);background:var(--surface-2);border-left:2px solid var(--line);padding:10px 14px;margin:12px 0 4px;line-height:1.5}

#view-biblioteca .bib-item{display:block;padding:16px 2px;border-bottom:1px solid var(--line);transition:background .15s}
#view-biblioteca .bib-item:hover{background:var(--surface-2)}
#view-biblioteca .bib-item-topo{display:flex;align-items:baseline;gap:8px}
#view-biblioteca .bib-t{font-weight:600;font-size:15px;line-height:1.35;color:var(--ink)}
#view-biblioteca .bib-item:hover .bib-t{color:var(--accent-ink)}
#view-biblioteca .bib-ext{font-size:12px;color:var(--muted);flex:none}
#view-biblioteca .bib-meta{font-size:12px;color:var(--muted);margin-top:4px}
#view-biblioteca .bib-onde{font-size:12px;color:var(--accent-ink);font-weight:600;margin-top:4px}
#view-biblioteca .bib-q{font-size:14px;color:var(--ink-2);line-height:1.5;margin-top:7px;max-width:78ch}
#view-biblioteca .bib-s{font-size:12px;color:#92400e;background:#fef3c7;border-radius:6px;padding:4px 9px;margin-top:8px;display:inline-block}

#view-biblioteca .bib-vazio{font-size:15px;color:var(--ink-2);padding:26px 0}


@media(max-width:640px){
  #view-biblioteca .bib-seg-head h3{font-size:22px}
}

/* ---------- rodapé de ligação com o resto do site ----------
   Fica no fim de cada segmento. Usa .free-badge e .paid-badge, que são
   classes do próprio index.html — de propósito, para o selo de grátis e o
   preço lerem igual aqui e no menu. */
#view-biblioteca .bib-lig{margin-top:8px;padding-top:26px;border-top:1px solid var(--line)}
#view-biblioteca .bib-lig h4{font-family:'Instrument Sans',sans-serif;font-size:15px;font-weight:700;margin-bottom:14px}
#view-biblioteca .bib-lig-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
#view-biblioteca .bib-lig-item{
  display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);padding:16px 18px;transition:border-color .15s, background .15s;
}
#view-biblioteca .bib-lig-item:hover{border-color:var(--accent);background:var(--surface)}
#view-biblioteca .bib-lig-t{font-size:14px;font-weight:600;color:var(--ink)}
#view-biblioteca .bib-lig-d{font-size:13px;color:var(--muted);line-height:1.45;flex:1}
#view-biblioteca .bib-lig-ir{font-size:12px;font-weight:600;color:var(--accent);margin-top:2px}