/* ============================================================
   css/telas/biblioteca.css — CSS só da área "biblioteca".

   DE ONDE VEM: do LOTE D do mock aprovado
   03-Planejamento/plataforma/mock/MOCK-PLATAFORMA-COMPLETO-66-TELAS-v.A.html
   — as peças com prefixo .ld-, copiadas por medição, valor a
   valor. Aqui elas ganham o prefixo de área que a casa exige:
   todo seletor começa com .area-biblioteca.

   O QUE NÃO ESTÁ AQUI: tudo o que já existe em componentes.css
   (.painel · .kpi · .tab · .selo · .faixa · .abas · .grupobt ·
   .subcartao · .pares · .etq · .acoesl · .notap · .pvazio).
   Nenhum valor cru: cor, raio e folga saem de tokens.css.
   A ESCALA COMPACTA v.A É O APROVADO — nenhum número novo.

   O lugar Celular do mock era a classe body.cel; aqui é o ponto
   de quebra de verdade, 860 px, o mesmo de base.css.
   ============================================================ */

/* --- empilhamento de blocos dentro do corpo ------------------ */
.area-biblioteca .ld-col{flex:1 0 auto;display:flex;flex-direction:column;min-height:0}
.area-biblioteca .ld-bl{flex:0 0 auto;margin-bottom:16px}
.area-biblioteca .ld-bl:last-child{margin-bottom:0}
.area-biblioteca .ld-mt{margin-top:16px}
.area-biblioteca .ld-duas{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:0 0 auto}
.area-biblioteca .ld-duas>.ld-bl{margin-bottom:16px;min-width:0}
.area-biblioteca .ld-pcol{display:flex;flex-direction:column;gap:12px;min-width:0}

/* --- cartões de resumo: os 11 do Resumo da Biblioteca -------- */
.area-biblioteca .ld-kpis{margin-bottom:16px}
.area-biblioteca .ld-kpis .kpi .cima>div:first-child{min-width:0}
.area-biblioteca .ld-kpis .kpi .cont2{flex-wrap:wrap}
.area-biblioteca .kpi .cima{min-height:98px}

/* --- texto corrido de bloco ---------------------------------- */
.area-biblioteca .ld-txt{font-size:12.5px;line-height:1.5;color:var(--txt-padrao);max-width:96ch}
.area-biblioteca .ld-txt b{font-weight:500;color:var(--txt-forte)}
.area-biblioteca .ld-ajuda{display:block;font-size:11.5px;color:var(--txt-apoio);line-height:1.4}
.area-biblioteca .ld-aval{display:inline-block;font-size:10.5px;color:var(--txt-fraco);
  line-height:1.3;margin-left:6px}

/* --- formulário (molde CAD) ---------------------------------- */
.area-biblioteca .ld-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.area-biblioteca .ld-campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.area-biblioteca .ld-c2{grid-column:1/-1}
.area-biblioteca .ld-rot{font-size:12px;font-weight:500;color:var(--txt-forte)}
.area-biblioteca .ld-cx{min-height:29px;border:1px solid var(--borda-controle);border-radius:7px;
  background:var(--fundo-campo);display:flex;align-items:center;gap:8px;
  padding:0 10px;font-size:12.5px;color:var(--txt-forte);width:100%;
  font-family:inherit;line-height:1.3}
.area-biblioteca textarea.ld-cx{min-height:62px;align-items:flex-start;padding:8px 10px;
  line-height:1.45;resize:vertical;display:block}
.area-biblioteca select.ld-cx{appearance:none;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--txt-apoio) 50%),
                   linear-gradient(135deg,var(--txt-apoio) 50%,transparent 50%);
  background-position:calc(100% - 15px) 13px,calc(100% - 10px) 13px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.area-biblioteca .ld-cx:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
.area-biblioteca .ld-cx.ld-fixo{background:var(--sup-sutil);color:var(--txt-apoio)}
.area-biblioteca .ld-pe{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  flex:0 0 auto;padding-top:2px;flex-wrap:wrap}
.area-biblioteca .ld-acr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:11px}
.area-biblioteca .ld-acr .ld-ajuda{flex:1 1 240px;min-width:220px}

/* --- envio de arquivo ---------------------------------------- */
.area-biblioteca .ld-arq{border:1px dashed var(--borda-forte);border-radius:var(--r-item);
  background:var(--fundo-card);display:flex;align-items:center;gap:12px;padding:12px}
.area-biblioteca .ld-arq p{font-size:11.5px;color:var(--txt-apoio);line-height:1.45;min-width:0}
.area-biblioteca .ld-arq p b{display:block;font-size:12.5px;font-weight:500;color:var(--txt-forte)}
.area-biblioteca .ld-arq .bt{margin-left:auto}

/* --- linha com interruptor ----------------------------------- */
.area-biblioteca .ld-linha{display:flex;align-items:flex-start;gap:12px;margin-top:12px;
  border:1px solid var(--borda-sutil);border-radius:var(--r-item);
  padding:9px 12px;background:var(--fundo-card);flex-wrap:wrap;row-gap:8px}
.area-biblioteca .ld-linha .ld-pt{flex:1 1 240px;min-width:180px}
.area-biblioteca .ld-linha .acoesl,.area-biblioteca .ld-linha .ld-exc-ex{margin-left:auto;flex:0 0 auto}
.area-biblioteca .ld-sw{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:24px;flex:0 0 auto;border:0;background:none;padding:0;margin-top:2px}
.area-biblioteca .ld-chave{width:26px;height:15px;border-radius:var(--r-pilula);
  background:var(--fundo-card);border:1px solid var(--borda-controle);
  position:relative;flex:0 0 auto;display:block}
.area-biblioteca .ld-chave::after{content:"";position:absolute;left:2px;top:2px;width:9px;
  height:9px;border-radius:50%;background:var(--borda-controle)}
.area-biblioteca .ld-sw[aria-checked="true"] .ld-chave{background:var(--acao);border-color:var(--acao-escuro)}
.area-biblioteca .ld-sw[aria-checked="true"] .ld-chave::after{left:13px;background:var(--sobre-acento)}
.area-biblioteca .ld-imp{background:var(--est-critico-bg);border-color:var(--est-critico-tx)}
.area-biblioteca .ld-imp .ld-pt b,.area-biblioteca .ld-imp .ld-pt i{color:var(--est-critico-tx)}

/* --- par de rótulo e texto em lista -------------------------- */
.area-biblioteca .ld-pt{display:flex;flex-direction:column;min-width:0;line-height:1.35;text-align:left}
.area-biblioteca .ld-pt b{font-size:12.5px;font-weight:500;color:var(--txt-forte)}
.area-biblioteca .ld-pt i{font-size:11.5px;color:var(--txt-fraco);margin-top:2px}

/* --- passo a passo ------------------------------------------- */
.area-biblioteca .ld-passos{list-style:none}
.area-biblioteca .ld-passo{display:flex;align-items:flex-start;gap:11px;padding:9px 0;
  border-bottom:1px solid var(--borda-sutil)}
.area-biblioteca .ld-passo:last-child{border-bottom:0}
.area-biblioteca .ld-ord{width:22px;height:22px;border-radius:5px;flex:0 0 auto;
  background:var(--fundo-grupo-botoes);border:1px solid var(--borda-sutil);
  display:grid;place-items:center;font-family:var(--fonte-mono);
  font-size:11px;color:var(--txt-padrao)}

/* --- lista reordenável --------------------------------------- */
.area-biblioteca .ld-reordena{list-style:none;border:1px solid var(--borda-sutil);
  border-radius:var(--r-item);overflow:hidden;background:var(--fundo-card)}
.area-biblioteca .ld-rl{display:flex;align-items:center;gap:11px;padding:8px 12px;
  border-top:1px solid var(--borda-sutil);min-height:44px;flex-wrap:wrap;row-gap:8px}
.area-biblioteca .ld-rl:first-child{border-top:0}
.area-biblioteca .ld-rl .ld-pt{flex:1 1 220px;min-width:170px}
.area-biblioteca .ld-pega{color:var(--txt-fraco);display:flex;flex:0 0 auto}
.area-biblioteca .ld-pega .i{width:13px;height:13px}
.area-biblioteca .ld-re{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:0 0 auto;
  max-width:280px;justify-content:flex-end}
.area-biblioteca .ld-ra{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.area-biblioteca .ld-ra .bt{height:26px;font-size:11.5px;padding:0 9px}
.area-biblioteca .ld-ra .bt.quad{width:26px;padding:0}
.area-biblioteca .ld-rl .acoesl{flex:0 0 auto}
.area-biblioteca .ld-so-lista .ld-rl{min-height:42px}
.area-biblioteca .ld-vazia{padding:11px 12px;font-size:12.5px;color:var(--txt-apoio)}

/* --- checklist em leitura ------------------------------------ */
.area-biblioteca .ld-chks{list-style:none}
.area-biblioteca .ld-chk{display:flex;align-items:center;gap:11px;min-height:40px;padding:5px 0;
  border-bottom:1px solid var(--borda-sutil);flex-wrap:wrap;row-gap:6px}
.area-biblioteca .ld-chk:last-child{border-bottom:0}
.area-biblioteca .ld-chk .ld-pt{flex:1 1 220px;min-width:170px}
.area-biblioteca .ld-chk .etq{flex:0 0 auto}
.area-biblioteca .ld-cq{width:17px;height:17px;border-radius:5px;flex:0 0 auto;
  border:1px solid var(--borda-controle);background:var(--fundo-card)}

/* --- composição do relatório: lista + pré-visualização ------- */
.area-biblioteca .ld-comp{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}
.area-biblioteca .ld-comp-l,.area-biblioteca .ld-comp-r{min-width:0}
.area-biblioteca .ld-comp-l>.rotp,.area-biblioteca .ld-comp-r>.rotp{margin-bottom:8px}
.area-biblioteca .ld-comp-l .ld-ajuda{margin-top:10px}
.area-biblioteca .ld-doc{border:1px solid var(--borda-padrao);border-radius:var(--r-item);
  background:var(--fundo-card);padding:14px 16px}
.area-biblioteca .ld-doc-cab{border-bottom:1px solid var(--borda-sutil);padding-bottom:9px;
  margin-bottom:10px}
.area-biblioteca .ld-doc-cab b{display:block;font-size:14.5px;font-weight:600;
  color:var(--txt-forte);letter-spacing:-.02em;line-height:1.3}
.area-biblioteca .ld-doc-cab i{display:block;font-size:11.5px;color:var(--txt-apoio);margin-top:3px}
.area-biblioteca .ld-ds{padding:8px 0;border-bottom:1px solid var(--borda-sutil)}
.area-biblioteca .ld-ds:last-child{border-bottom:0}
.area-biblioteca .ld-ds b{display:block;font-size:12.5px;font-weight:500;color:var(--txt-forte)}
.area-biblioteca .ld-ds em{display:block;font-family:var(--fonte-mono);font-size:11px;
  color:var(--txt-apoio);margin-top:2px}
.area-biblioteca .ld-lin{display:block;margin-top:6px}
.area-biblioteca .ld-lin i{display:block;height:3px;border-radius:2px;
  background:var(--grafico-barra);margin-bottom:5px}

/* --- seção da composição do serviço (uma por playbook) ------- */
.area-biblioteca .ld-secao{border:1px solid var(--borda-sutil);border-radius:var(--r-item);
  background:var(--fundo-alt);padding:11px;margin-bottom:11px}
.area-biblioteca .ld-secao:last-child{margin-bottom:0}
.area-biblioteca .ld-secao-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.area-biblioteca .ld-secao-cab b{font-size:12.5px;font-weight:500;color:var(--txt-forte)}
.area-biblioteca .ld-secao-cab .fx{font-size:11px;color:var(--txt-apoio)}
.area-biblioteca .ld-secao-cab .acoesl{margin-left:auto}

/* --- aba de página dentro do painel (molde FICHA) ----------- */
.area-biblioteca .ld-pane{overflow:visible;flex:1 0 auto;padding:12px}

/* --- bloco de playbook na ficha do serviço ------------------- */
.area-biblioteca .ld-play{border:1px solid var(--borda-sutil);border-radius:var(--r-item);
  background:var(--fundo-card);padding:12px}
.area-biblioteca .ld-play-cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.area-biblioteca .ld-play-cab b{font-size:13.5px;font-weight:600;color:var(--txt-forte);
  letter-spacing:-.02em}
.area-biblioteca .ld-play-cab .fx{font-size:11.5px;color:var(--txt-apoio)}
.area-biblioteca .ld-play .rotp2{margin-top:11px}
.area-biblioteca .ld-play .ld-ajuda{margin-top:7px}

/* --- bloco "visão do técnico": o recorte que o outro grupo não
       vê. Neutro com borda forte, nunca cor de estado --------- */
.area-biblioteca .ld-visao{border:1px solid var(--borda-controle);border-radius:var(--r-item);
  background:var(--fundo-alt);overflow:hidden}
.area-biblioteca .ld-visao-cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 14px;border-bottom:1px solid var(--borda-sutil)}
.area-biblioteca .ld-visao-cab .i{width:13px;height:13px;color:var(--txt-apoio)}
.area-biblioteca .ld-visao-cab b{font-size:12.5px;font-weight:500;color:var(--txt-forte)}
.area-biblioteca .ld-visao-cab span{font-size:11.5px;color:var(--txt-apoio);flex:1 1 320px;min-width:260px}
.area-biblioteca .ld-visao .tabwrap{background:var(--fundo-card)}

/* --- selo de exceção declarada: fora dos 5 sentidos, neutro com
       borda tracejada (a validar no mock) --------------------- */
.area-biblioteca .selo.ld-exc{background:var(--est-neutro-bg);color:var(--est-neutro-tx);
  border-style:dashed}

/* --- conteúdo de venda -------------------------------------- */
.area-biblioteca .ld-venda{border:1px solid var(--borda-sutil);border-radius:var(--r-item);
  background:var(--fundo-card);padding:12px}
.area-biblioteca .ld-venda .rotp{margin-bottom:5px}

/* --- identificação em subcartão ----------------------------- */
.area-biblioteca .ld-ident{align-items:stretch}
.area-biblioteca .ld-ident .col{min-width:0}
.area-biblioteca .ld-ident .pares .par{min-height:42px}

/* --- atalho entre telas irmãs ------------------------------- */
.area-biblioteca .ld-irmas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;flex:0 0 auto}
.area-biblioteca .ld-irmas .rotp{margin-bottom:0}

/* --- bloco de quem só lê (o nível que não cadastra) --------- */
.area-biblioteca .ld-sem{flex:0 0 auto;border:1px solid var(--borda-padrao);
  border-radius:var(--r-painel);background:var(--fundo-card);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:9px;
  text-align:center;padding:24px;margin-bottom:16px}
.area-biblioteca .ld-sem .caixa{width:44px;height:44px}
.area-biblioteca .ld-sem .caixa .i{width:19px;height:19px}
.area-biblioteca .ld-sem p{font-size:13px;color:var(--txt-apoio);max-width:460px;line-height:1.5}
.area-biblioteca .ld-sem p b{display:block;font-size:14.5px;font-weight:600;
  color:var(--txt-forte);margin-bottom:3px;letter-spacing:-.02em}

/* --- ações de página que só um nível vê --------------------- */
.area-biblioteca .ld-so-acoes{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* ============================================================
   PEÇAS DE LISTA — busca, filtro e ordenação.
   O material não traz campo de busca com entrada de verdade:
   .buscam, da base, é um rótulo sem campo. Esta é a MESMA medida
   (28 px de altura, raio 7, letra 11,5) com <input> dentro, e o
   título de coluna que ordena é o mesmo <th>, com um botão.
   PEDIDO REGISTRADO para os compartilhados: UI.tabela com
   "ordenavel" e uma peça UI.busca.
   ============================================================ */
.area-biblioteca .ld-busca{height:28px;min-width:152px;border:1px solid var(--borda-controle);
  border-radius:7px;display:inline-flex;align-items:center;gap:7px;padding:0 9px;
  color:var(--txt-fraco);font-size:11.5px;background:var(--fundo-campo)}
.area-biblioteca .ld-busca .i{width:13px;height:13px;flex:0 0 auto}
.area-biblioteca .ld-busca input{border:0;background:none;font:inherit;font-size:11.5px;
  color:var(--txt-forte);min-width:0;width:100%;outline:none;padding:0}
.area-biblioteca .ld-busca:focus-within{border-color:var(--foco);box-shadow:0 0 0 1px var(--foco)}
.area-biblioteca .tab thead th .ld-ord-bt{display:inline-flex;align-items:center;gap:5px;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;padding:0}
.area-biblioteca .tab thead th .ld-ord-bt.on{color:var(--txt-forte)}
.area-biblioteca .tab thead th .ld-ord-bt .i{width:12px;height:12px}

/* --- o atalho de volta no alto da ficha --------------------- */
.area-biblioteca .ld-volta{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex:0 0 auto}
.area-biblioteca .ld-volta .ld-volta-tx{font-size:12px;color:var(--txt-apoio)}
.area-biblioteca .ld-esq{transform:rotate(180deg)}

/* --- a marca de acesso da tela ------------------------------ */
.area-biblioteca .ld-marcas{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:-2px 0 13px;flex:0 0 auto}

/* ============================================================
   LUGAR CELULAR — uma coluna em tudo o que é grade. A ESCALA NÃO
   SOBE: o v.A não tem escada de celular.
   ============================================================ */
@media (max-width:1180px){
  .area-biblioteca .ld-comp{grid-template-columns:1fr}
}
@media (max-width:860px){
  .area-biblioteca .ld-form,.area-biblioteca .ld-duas{grid-template-columns:1fr}
  .area-biblioteca .ld-doc{padding:12px}
  .area-biblioteca .ld-re,.area-biblioteca .ld-ra{max-width:none;justify-content:flex-start}
  .area-biblioteca .ld-pane{padding:10px}
  .area-biblioteca .ld-arq{flex-wrap:wrap;row-gap:10px}
  .area-biblioteca .ld-arq .bt{margin-left:0}
  .area-biblioteca .ld-linha .ld-exc-ex,.area-biblioteca .ld-linha .acoesl{margin-left:0}
  .area-biblioteca .ld-busca{width:100%}
  .area-biblioteca .kpi .cima{min-height:0}
  /* alvo de toque: 44 px é o piso do Estilos v.A §1.2 */
  .area-biblioteca .ld-ra .bt,.area-biblioteca .acoesl .bt{min-height:44px}
  .area-biblioteca .ld-ra .bt.quad{width:44px}
  .area-biblioteca .ld-sw{width:44px;height:44px;margin-top:0}
  .area-biblioteca .ld-busca{min-height:44px}
}

/* --- etiqueta de reúso: nome longo quebra em vez de invadir a
       coluna vizinha (a base trava .etq em nowrap) --- */
.area-biblioteca .etqs2 .etq{white-space:normal;text-align:left}
.area-biblioteca .tab tbody td{overflow-wrap:anywhere}

/* ============================================================
   MEDIDO NO CELULAR (390 px): o subcartão de identificação é uma
   fileira de 4 colunas com divisor; espremido, o valor da direita
   saía da lâmina e o corpo rolava de lado. No celular ele vira
   uma coluna, como todo o resto. E o alvo de toque de 44 px
   alcança também o atalho de voltar e o link da faixa.
   ============================================================ */
@media (max-width:860px){
  .area-biblioteca .subcartao{flex-direction:column;gap:12px}
  .area-biblioteca .subcartao .div{width:auto;height:1px}
  .area-biblioteca .subcartao .col{min-width:0}
  .area-biblioteca .ld-volta-tx{min-height:44px;display:inline-flex;align-items:center}
  .area-biblioteca .faixa a{display:inline-block;padding:12px 0;line-height:20px}
  .area-biblioteca .kpi .baixo{min-height:44px}
}