/* Organizar páginas do PDF — só o que a base não tem. Nenhuma cor nova:
   tudo var(--...). Motivos:
   - modos em cartão (radio), como no Dividir PDF;
   - com um PDF aberto, a zona encolhe (.compacta), como no Dividir e no Girar;
   - a lista de páginas pode ter centenas de linhas: fica numa área com
     rolagem própria (como no Girar PDF), para o botão de gerar não ir parar
     a metros de tela;
   - cada linha tem alça de arrastar, esquema da página (retângulo com o
     tamanho posto pelo app.js via element.style, permitido pela CSP),
     caixa de marcar e setas; a base não tem essa grade;
   - página que vai sair do PDF novo fica apagada e riscada; o alvo de
     soltar é uma linha cobre em cima ou embaixo da página. */

.estado { margin: 16px 0 0; min-height: 1.4em; }
.estado:empty { min-height: 0; margin: 0; }
.aviso p { margin: 0; }
.aviso p + p { margin-top: 8px; }

.zona.compacta { min-height: 0; padding: 16px 18px; gap: 4px; }
.zona.compacta strong { font-size: 22px; }

.aberto { margin-top: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.aberto .numero { margin: 0 0 6px; }
.aberto-nome { margin: 0; font-size: 17px; color: var(--silk); overflow-wrap: anywhere; }
.aberto .mono { margin: 4px 0 0; }

.modos { border: 0; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.modos legend { padding: 0; margin-bottom: 10px; }
.modo {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 2px; background: var(--bg);
}
.modo:hover { border-color: var(--silk-3); }
.modo:has(input:checked) { border-color: var(--copper); }
.modo input { flex: 0 0 auto; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--copper); cursor: pointer; }
.modo strong { display: block; font-weight: 500; color: var(--silk); font-size: 17px; line-height: 1.3; }
.modo-ajuda { display: block; color: var(--silk-3); font-size: 15px; line-height: 1.4; }

/* ---- lista de páginas ---- */
.paginas-sec { margin-top: 22px; }
.paginas-sec > .rotulo { margin: 0 0 6px; }
.ajuda-esquema { margin: 0 0 10px; font-size: 15px; color: var(--silk-3); max-width: 68ch; }
.ferramentas-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.paginas-rolagem {
  max-height: 460px; overflow-y: auto; overflow-x: hidden;
  border: 1px solid var(--line-2); border-radius: 2px; background: var(--bg);
}
.paginas { list-style: none; margin: 0; padding: 0 10px; }
.pg {
  display: grid; grid-template-columns: 44px 3.2ch 48px minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; background: var(--bg); position: relative;
}
.pg:last-child { border-bottom: 0; }
.pg .pos { text-align: right; color: var(--silk-3); }
.pg.movida .pos { color: var(--copper); }
.pg .alca { cursor: grab; touch-action: none; font-size: 20px; line-height: 1; }
.pg.arrastando { z-index: 2; opacity: .92; border: 1px solid var(--copper); }
.pg.arrastando .alca { cursor: grabbing; }
.pg.alvo-acima { box-shadow: inset 0 3px 0 var(--copper); }
.pg.alvo-abaixo { box-shadow: inset 0 -3px 0 var(--copper); }
.pg-texto { display: grid; min-width: 0; line-height: 1.3; }
.pg-nome { color: var(--silk); overflow-wrap: anywhere; }
.pg-nota { color: var(--silk-3); font-family: var(--f-dado); font-size: 15px; }
.pg-marca { display: inline-flex; align-items: center; gap: 4px; }
.pg-marca label { font-family: var(--f-dado); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--silk-2); cursor: pointer; }
.pg-setas { display: inline-flex; gap: 6px; }
.pg.sai .pg-nome { color: var(--silk-3); text-decoration: line-through; }
.pg.sai .folha { opacity: .35; }

.esquema { width: 48px; height: 48px; display: grid; place-items: center; }
.folha { display: block; box-sizing: border-box; border: 1px solid var(--silk-3); background: var(--raise); }
.pg.marcada .folha { border-color: var(--copper); }

.previa { margin: 16px 0 0; font-size: 16px; color: var(--silk-2); min-height: 1.5em; overflow-wrap: anywhere; }
.previa:empty { min-height: 0; margin: 0; }
.previa.problema { color: var(--erro); }
.previa p { margin: 0; }

/* ---- resultado ---- */
.resultado .numero { margin-bottom: 8px; }
.resultado p { margin: 0 0 6px; overflow-wrap: anywhere; }
.resultado .numero:focus { outline: none; }
.resultado .numero:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.resultado a.botao { overflow-wrap: anywhere; text-align: center; }

@media (max-width: 520px) {
  .pg { grid-template-columns: 44px 3ch 40px minmax(0, 1fr); gap: 6px; padding: 8px 0; }
  .esquema { width: 40px; height: 40px; }
  .pg-marca { grid-column: 2 / 4; }
  .pg-setas { grid-column: 4; justify-self: end; }
}