/* Catálogos de perfis. Só o que é desta ferramenta -- o chrome (card, grid,
   fld, in, table.list) vem de base.css. */
#catLinhas tr{cursor:pointer}
#catLinhas tr:hover{background:var(--card2)}
/* A FICHA DE PAGINA -- a peca central desta tela.
   O resultado de uma busca aqui nao e um registro de banco: e uma pagina de um
   livro impresso. Entao ela tem a forma do que e -- a folha em pe, a referencia
   como uma citacao, e a linha impressa onde o termo apareceu.

   Grade e nao lista: a miniatura e o que faz reconhecer a pagina certa de um
   olhar, e lado a lado quatro delas se comparam sem rolar. `auto-fill` com
   minimo de 190px resolve o tablet em pe (duas colunas) sem media query. */
.cat-fichas{display:grid;gap:12px;margin-top:10px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.cat-pgtexto{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;
  background:var(--card2);border:1px solid var(--line);color:var(--tx);
  border-radius:var(--radius-md);font:inherit;cursor:pointer;text-align:left}
.cat-pgtexto:hover{border-color:var(--acc)}
.cat-pgtexto:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* A proporcao de folha A4 em pe (1 : 1,414). A miniatura chega do servidor em
   320px de largura; aqui ela preenche a ficha e o `contain` garante que o
   desenho nao seja cortado -- cortar o desenho seria cortar justamente o que a
   miniatura existe para mostrar. */
.cat-pg-thumb{display:block;width:100%;aspect-ratio:1/1.414;object-fit:contain;
  background:#fff;border-bottom:1px solid var(--line)}
.cat-pg-vazia{background:var(--card);position:relative}
.cat-pg-vazia::after{content:'sem miniatura';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--mut);letter-spacing:.04em}
.cat-pgtexto-txt{display:flex;flex-direction:column;gap:3px;padding:9px 11px 11px;min-width:0}
/* A REFERENCIA, em mono: catalogo e pagina, como se cita uma pagina de livro.
   E o unico lugar da ficha onde a informacao e exata, entao e o unico em mono. */
.cat-pg-ref{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-pg-ref i{color:var(--mut);font-style:normal;margin:0 2px}
/* O servidor escolhe 160 caracteres de janela para o trecho, mas nao mede em
   quantas linhas isso quebra na tela -- quem garante o layout e este clamp. */
/* Duas linhas, nao tres: o trecho so sobrevive na ficha SEM miniatura, e ali
   ele e pista, nao leitura. O servidor manda 160 caracteres de janela; o clamp
   e quem garante que isso nao estica a ficha e quebra a grade. */
.cat-pgtexto-trecho{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;color:var(--mut);font-size:11px;line-height:1.4}
#catPaginasTexto mark{background:color-mix(in srgb,var(--acc) 30%,transparent);
  color:var(--tx);border-radius:var(--radius-sm);padding:0 2px}

/* A LINHA DO PERFIL -- informacao de apoio, nao o resultado principal.
   Era uma tabela de sete colunas de quando esta ferramenta era um cadastro de
   perfis. Virou uma linha porque e o que ela diz: um codigo e seus numeros. */
.cat-perfis td{padding:8px 10px}
.cat-pf{display:flex;gap:10px;align-items:center}
.cat-pf-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.cat-pf-dados{font-family:var(--mono);font-size:11.5px;color:var(--mut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-pf-dados i{color:var(--line);font-style:normal;margin:0 5px}
.cat-thumb{width:52px;height:34px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);display:block;object-fit:contain;flex:0 0 auto}
.cat-cod{font-family:var(--mono);font-size:12.5px;font-weight:600}
.cat-coda{font-family:var(--mono);font-size:11px;color:var(--mut);margin-left:7px}
.cat-tag{flex:0 0 auto;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line);border-radius:5px;padding:2px 7px;font-weight:600}
/* A dica de busca curta: estado vazio da area de resultados. Morava dentro da
   tabela, num colspan de sete -- que deixou de existir. */
.cat-dica{color:var(--mut);margin:14px 0 0}
.cat-dica:empty{display:none}
/* O seletor de catalogo ja enviado, e as acoes que agem sobre ele. */
.cat-admin-existente{align-items:center;gap:8px}
.cat-admin-existente label{margin:0}

/* ---------- visualizador (Tarefa 8) ----------
   Ocupa a TELA TODA, não o espaço de #main: é irmão de #tool-catalogos no
   HTML (fora dele), sobrepondo inclusive a barra lateral (z-index acima do
   .sidebar, que usa 40 -- ver base.css). Mesmo truque de #confCanvas: [hidden]
   TEM de vencer o display:flex cru, senão o visualizador fica sempre visível,
   ignorando o atributo que catAbrirPerfil/catFecharVisualizador alternam. */
#catVisualizador{position:fixed;inset:0;z-index:60;background:var(--bg);
  display:flex;flex-direction:column}
#catVisualizador[hidden]{display:none}

.cat-vw-top{display:flex;align-items:center;gap:14px;padding:10px 16px;
  border-bottom:1px solid var(--line);background:var(--card);flex:none}
/* flex-wrap:wrap é o que dá a #catVwChips uma linha própria (ver
   .cat-vw-chips): sem ele, flex-basis:100% num item do meio de uma fileira
   sem quebra não move nada -- só alarga o item na mesma linha. */
.cat-vw-id{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;min-width:0}
.cat-vw-cod{font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:-.01em}
.cat-vw-sub{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A navegação de página. Ficava aqui o rótulo "PÁGINA" sozinho -- o antigo
   #catVwPags que ocupava este canto NÃO era um <span> vazio: aberto por
   PERFIL ele recebia os atalhos para as páginas onde aquele perfil aparece,
   e funcionavam; só ficava vazio aberto por PÁGINA avulsa. Por isso os
   atalhos mudaram de lugar para .cat-vw-chips (junto da identidade do
   perfil) em vez de serem apagados, e este canto virou a navegação. */
.cat-vw-pag{margin-left:auto;display:flex;align-items:center;gap:8px}
.cat-rot{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);font-weight:700}
.cat-pagchip{background:var(--card2);border:1px solid var(--line);color:var(--mut);
  border-radius:var(--radius-sm);min-width:44px;min-height:44px;font:inherit;font-size:13px;
  font-family:var(--mono);cursor:pointer}
.cat-pagchip:hover{border-color:var(--acc)}
.cat-pagchip.sel{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}

/* touch-action:none no palco (não só no canvas): a Tarefa 9 liga a máquina
   de gestos aqui, e o navegador não pode competir tratando o toque como
   rolagem/zoom de página antes disso. */
#catPalco{flex:1;position:relative;overflow:hidden;background:#f2f2f0;touch-action:none}
#catCanvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}

/* grupo de controles flutuante, ao alcance do polegar (mock: spec
   2026-08-26-catalogos-mock.html) */
.cat-ctrl{position:absolute;right:16px;bottom:104px;display:flex;flex-direction:column;gap:8px}
.cat-cbtn{width:52px;height:52px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:color-mix(in srgb,var(--card) 92%,transparent);color:var(--tx);
  font:inherit;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.45)}
.cat-cbtn:hover{background:var(--card)}
.cat-cbtn.on{background:var(--acc);border-color:var(--acc);color:#fff}
.cat-cbtn small{font-size:9.5px;letter-spacing:.05em;font-weight:700}

/* leitor de medida -- ocupa a borda inteira do rodape. A distancia em si saiu
   daqui (agora e a cota desenhada sobre a propria linha, catDesenharCota) --
   o que fica sao os eixos separados e a escala na tela. */
.cat-leitor{flex:none;background:var(--card);border-top:1px solid var(--line);
  padding:12px 18px;display:flex;align-items:center;gap:26px;min-height:78px;flex-wrap:wrap}
.cat-eixo{display:flex;gap:22px}
.cat-eixo div{display:flex;flex-direction:column;gap:5px}
.cat-eixo b{font-family:var(--mono);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
/* barra de escala -- a assinatura da ferramenta: SEMPRE literalmente
   verdadeira, em qualquer zoom (catAtualizarLeitor calcula a largura a
   partir da MESMA CAT_MM_POR_PONTO que mede a distância, nunca um valor
   solto). `i` preenche a metade esquerda -- alternância clara/escura de
   régua de mapa, não precisa de JS: sempre 50% do que catAtualizarLeitor
   escreve em `style.width` do elemento pai. */
.cat-escala{display:flex;flex-direction:column;gap:5px;pointer-events:none;
  padding-left:22px;border-left:1px solid var(--line)}
.cat-escala-barra{height:9px;border:1.4px solid var(--mut);border-top:none;position:relative}
.cat-escala-barra i{position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--mut)}
.cat-escala-txt{font-family:var(--mono);font-size:11px;color:var(--mut);font-weight:600}
#catLimpar{margin-left:auto}

/* O cursor conta o modo antes de qualquer texto: mao aberta navega, cruz mede.
   E a cruz nao e enfeite -- ela mira no pixel, e o cursor de seta cobre
   justamente o ponto que se quer marcar. O dono apontou a diferenca usando na
   obra. */
#catPalco{cursor:grab}
#catPalco:active{cursor:grabbing}
#catPalco.cat-medindo,
#catPalco.cat-medindo:active{cursor:crosshair}

/* A dica no lugar da lista, enquanto nao ha texto de busca. Centralizada e
   apagada: e um estado de espera, nao um resultado -- nao pode competir com
   as linhas de verdade quando elas chegarem. */
.cat-dica td{padding:28px 12px;text-align:center;color:var(--mut)}

/* A linha do "ver mais": botao centralizado, sem cara de resultado. */
.cat-mais td{padding:14px 12px;text-align:center}

/* Quando nao ha perfil, a lista de paginas E o resultado -- ganha o peso que
   a tabela de perfis teria, em vez de continuar com cara de rodape. */
.cat-paginas-principal{margin-top:4px}
.cat-paginas-principal .sub{font-size:13px;color:var(--tx)}
#catVerMaisPaginas{display:block;margin:12px auto 0}

/* O bloco que ficava aqui -- miniatura de 56x72 ao lado do trecho -- morreu na
   reformulacao de 29/08/2026: a miniatura passou a OCUPAR a ficha, e as regras
   valem la em cima. Estas vinham DEPOIS na cascata e venciam em silencio, o
   que deixava a miniatura do tamanho de um icone dentro de uma ficha desenhada
   para a pagina inteira. Foi assim que o defeito apareceu na primeira captura.

/* A JANELA DE ACRESCENTAR CATALOGO. Primeiro <dialog> do app: antes disto o
   painel de admin ficava aberto no meio da tela de busca, com nome, faixa de
   paginas, envio, seletor, gerar miniaturas e excluir sempre a vista. Sao
   acoes que acontecem uma vez por catalogo -- ocupavam permanentemente a tela
   que se usa todo dia.

   `<dialog>` e nao um div com overlay: o navegador ja entrega foco preso, Esc
   para fechar, fundo inerte e o `::backdrop`. Escrever isso a mao seria mais
   codigo para chegar no mesmo lugar, com acessibilidade pior. */
.dlg{background:var(--card);color:var(--tx);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:20px;width:min(720px,92vw);
  box-shadow:0 8px 24px rgba(0,0,0,.28)}
/* Mesmo escurecimento do fundo de janela que o app ja usa (.modalbg em
   menu-impressao-programacao.css). Inventei .6 na primeira versao e o lint de
   design pegou -- valor novo para um efeito que ja tinha o seu e desvio, nao
   escolha. Agora e o token --scrim, declarado uma vez em base.css. */
.dlg::backdrop{background:var(--scrim)}
.dlg-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.dlg-cab h3{margin:0}
.dlg-x{padding:4px 10px;line-height:1.2}
.dlg-hr{border:0;border-top:1px solid var(--line);margin:18px 0 14px}
.dlg .btnrow{margin-top:12px}

/* A ESTANTE -- o estado inicial da tela. Onde antes havia uma caixa cinza
   vazia, ficam os catalogos que existem: nome, quantas paginas, faixa util.
   Cada um abre para folhear.

   Cartoes largos e baixos, ao contrario das fichas de pagina: uma ficha
   representa uma FOLHA e por isso e retrato; um catalogo e um volume, e o que
   se le dele e o nome. Forma diferente porque a coisa e diferente. */
.cat-estante{display:grid;gap:10px;margin-top:8px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.cat-livro{display:flex;flex-direction:row;gap:12px;align-items:center;
  background:var(--card2);border:1px solid var(--line);color:var(--tx);
  border-radius:var(--radius-md);padding:14px 16px;font:inherit;cursor:pointer;
  text-align:left;width:100%}
.cat-livro:hover{border-color:var(--acc)}
.cat-livro:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.cat-livro-nome{font-size:14px;font-weight:600}
.cat-livro-num{font-family:var(--mono);font-size:11.5px;color:var(--mut)}
.cat-livro-num i{color:var(--line);font-style:normal;margin:0 3px}

.cat-pg-b{padding:4px 12px;font-size:16px;line-height:1}
.cat-pg-conta{font-family:var(--mono);font-size:13px;display:flex;align-items:center;gap:4px}
.cat-pg-conta i{color:var(--mut);font-style:normal}

/* Os atalhos de página do PERFIL aberto, junto da identidade dele -- ver
   catAbrirPerfil. Ficam à esquerda porque qualificam o perfil ("as páginas
   DESTE perfil"), não a navegação de página do catálogo, que é do lado
   direito (.cat-vw-pag).
   flex-basis:100% é o que empurra este item para a PRÓPRIA linha dentro de
   .cat-vw-id (que precisa de flex-wrap:wrap para isso valer) -- cód. e
   subtítulo continuam lado a lado acima, os chips ficam por baixo. Sem a
   quebra, margin-top não tinha efeito nenhum: item no meio de uma fileira
   sem quebra só empurra os vizinhos para o lado, nunca para baixo. */
.cat-vw-chips{display:flex;flex-basis:100%;gap:6px;flex-wrap:wrap;margin-top:4px}

/* O corpo do visualizador em LINHA: o painel à esquerda, o palco ocupando o
   resto. `min-height:0` porque um filho de flex não encolhe abaixo do próprio
   conteúdo sem isso, e o palco tem um <canvas> dentro. */
.cat-vw-corpo{flex:1;display:flex;min-height:0}
.cat-paginas{width:150px;flex:0 0 auto;overflow-y:auto;background:var(--card2);
  border-right:1px solid var(--line);padding:8px}
.cat-paginas[hidden]{display:none}
.cat-pgmini{display:block;width:100%;background:none;border:1px solid transparent;
  border-radius:var(--radius-sm);padding:4px;margin-bottom:6px;cursor:pointer;
  color:var(--mut);font:inherit}
.cat-pgmini img{display:block;width:100%;aspect-ratio:1/1.414;object-fit:contain;
  background:#fff;border-radius:var(--radius-sm)}
.cat-pgmini span{display:block;font-family:var(--mono);font-size:10.5px;margin-top:3px}
.cat-pgmini:hover{border-color:var(--line)}
.cat-pgmini.sel{border-color:var(--acc);color:var(--tx)}
.cat-pgmini:focus-visible{outline:2px solid var(--acc);outline-offset:1px}

/* A capa do catalogo no cartao da estante. Retrato como as fichas de pagina --
   e uma folha --, mas pequena: aqui ela identifica o volume, nao e o conteudo
   que se veio ler. */
.cat-capa{width:46px;aspect-ratio:1/1.414;object-fit:contain;background:#fff;
  border-radius:var(--radius-sm);flex:0 0 auto}
.cat-livro-txt{display:flex;flex-direction:column;gap:4px;min-width:0}