/*
  dicode.ai — Dividir PDF (/dividir-pdf): opções e grade de páginas.
  Só os tokens do design system (dicode.css): cantos retos, sem sombra nem gradiente, linhas de 1px,
  rótulos e números em Fragment Mono, laranja sempre com texto preto, alvos de toque de 44 px.
  A grade (.dividir-paginas, .dividir-grade, .dividir-pagina...) é a mesma de Extrair páginas:
  a base comum fica em _paginas.css (o build a põe aqui dentro).
*/

/* ---------- Grade de páginas: a base comum com a outra página fica em _paginas.css ---------- */
/*
  dicode.ai — GRADE DE PÁGINAS de Dividir PDF e Extrair páginas (/dividir-pdf, /extrair-paginas-pdf).
  Parte de CSS: entra no lugar da linha  @import "_paginas.css";  de dividir-pdf.css e
  extrair-paginas-pdf.css na hora do build (web/build.py, expandir_css): cada página continua
  baixando um CSS só. Comportamento em assets/js/ferramentas/telas/dividir-pdf-paginas.js.
*/
/* ---------- Grade de páginas ---------- */
.dividir-paginas { display: grid; gap: 10px; min-width: 0; }
.dividir-paginas[hidden] { display: none; }
.dividir-paginas-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.dividir-paginas-titulo, .dividir-paginas-dica { margin: 0; }
.dividir-paginas-nota { margin: 0; }
.dividir-paginas-nota[hidden] { display: none; }
/* A grade rola por dentro: num PDF longo, o botão principal continua perto. */
.dividir-rolagem {
  max-height: min(64vh, 600px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--preto);
  background: var(--branco);
}
.dividir-rolagem:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }
/* PDF longo: as páginas entram aos poucos e a grade já nasce com a altura de quando estiver cheia
   (min-height, dividir-pdf-paginas.js, reservarAltura); align-content: start não deixa as linhas
   esticarem para encher essa reserva (senão elas encolheriam, pulando, quando a última entrasse). */
.dividir-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  align-content: start;
  gap: 16px 12px;
  margin: 0;
  padding: 12px;
  list-style: none;
}
.dividir-pagina { min-width: 0; }
.dividir-corpo {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
.dividir-moldura {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background: var(--superficie);
}
.dividir-folha {
  display: block;
  max-width: 92%;
  max-height: 92%;
  background: var(--branco);
  outline: 1px solid var(--linha);
  overflow: hidden;
}
.dividir-folha img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Sem miniatura (navegador antigo ou página que não deu para desenhar): só a forma da folha. */
.dividir-pagina--sem-previa .dividir-folha { outline-style: dashed; }
.dividir-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 6px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--cinza);
}
.dividir-num { color: var(--preto); font-variant-numeric: tabular-nums; }
.dividir-tag { overflow-wrap: anywhere; }
.dividir-tag:empty { display: none; }

/* ---------- Dividir: para qual PDF vai cada página ---------- */
.dividir-tag--inicio { padding: 0 4px; background: var(--laranja); color: var(--preto); }
.dividir-pagina--fora .dividir-folha { opacity: .35; }
.dividir-pagina--fora .dividir-num { color: var(--cinza); }

/* ---------- Opções ---------- */
.dividir-opcoes { display: grid; gap: 24px; min-width: 0; }
.dividir-opcoes[hidden] { display: none; }
.dividir-modo { display: grid; gap: 16px; }
.dividir-modo[hidden] { display: none; }
.dividir-modo .campo { max-width: 420px; }
.dividir-numero { max-width: 160px; font-family: var(--fonte-mono); }
.dividir-entrada { font-family: var(--fonte-mono); }
.dividir-opcao { min-height: 44px; }
.dividir-resumo { display: grid; gap: 6px; }
.dividir-resumo:empty { display: none; }
.dividir-resumo p { margin: 0; }
.dividir-resumo-principal { font-size: 17px; font-weight: 700; }
.dividir-resumo-partes { overflow-wrap: anywhere; }
.dividir-resumo-fora { font-size: 15px; display: flex; gap: 10px; align-items: baseline; }
.dividir-resumo-fora::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); }

/* ---------- Por documento: a regra, as opções e a lista das partes para conferir ---------- */
.dividir-documento { display: grid; gap: 16px; min-width: 0; }
.dividir-documento[hidden], .dividir-valor-nome[hidden] { display: none; }
.dividir-valor-nome { display: grid; gap: 2px; max-width: 560px; }
.dividir-documentos { margin: 0; padding: 0 12px; list-style: none; border: 1px solid var(--linha); max-height: min(50vh, 420px); overflow-y: auto; }
.dividir-documentos[hidden] { display: none; }
.dividir-documentos:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }
.dividir-documentos li { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; padding: 10px 0; font-size: 15px; line-height: 1.4; }
.dividir-documentos li + li { border-top: 1px solid var(--linha); }
.dividir-documento-num { flex: none; min-width: 7.5em; }
.dividir-documento-paginas { font-family: var(--fonte-mono); font-size: 14px; }
.dividir-documento-valor { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.dividir-documentos-mais { color: var(--cinza); }

/* Por tamanho: uma página sozinha passou do limite (link para Comprimir PDF, no resultado) */
.dividir-comprimir { margin: 0; }
.dividir-comprimir a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--preto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Vários PDFs (telas/dividir-pdf-lote.js): as mesmas opções, sem a grade ---------- */
.dividir-lote-dica[hidden] { display: none; }

/* "Ficaram de fora" (tela "pronto"): o PDF riscado e o motivo, com o quadrado laranja dos erros. */
.lote-fora { display: grid; gap: 8px; padding: 16px 20px; border: 1px solid var(--preto); background: var(--branco); }
.lote-fora ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.lote-fora li { display: grid; grid-template-columns: 7px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.lote-fora li::before { content: ''; grid-row: 1; width: 7px; height: 7px; background: var(--laranja); }
.lote-fora-nome { font-weight: 600; overflow-wrap: anywhere; text-decoration: line-through; text-decoration-thickness: 1px; }
.lote-fora-motivo { grid-column: 2; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .dividir-grade { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 10px; padding: 10px; }
  .dividir-rolagem { max-height: min(58vh, 520px); }
}
@media (prefers-reduced-motion: no-preference) {
  .dividir-pagina--pronta img { animation: dividir-aparece .2s ease-out; }
  @keyframes dividir-aparece { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Só no app (pwa/foto-tela.js, molde "paginas"): a grade no meio da tela, que rola por
   dentro da moldura (o observador das miniaturas olha para .dividir-rolagem), e as opções na folha
   do pé, mais juntas. ---------- */
.ft .dividir-paginas[data-app-palco]:not([hidden]) { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.ft .dividir-paginas[data-app-palco] .dividir-rolagem { flex: 1 1 auto; min-height: 0; max-height: none; }
.ft .dividir-opcoes { gap: 12px; }