/*
  dicode.ai — Extrair páginas (/extrair-paginas-pdf): campo de seleção, atalhos e grade de páginas
  em que cada página é um botão (aria-pressed).
  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-*) é a mesma de Dividir PDF: 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; }

/* ---------- Extrair: páginas que são botões ---------- */
.dividir-grade--interativa .dividir-corpo { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dividir-grade--interativa .dividir-corpo:focus-visible { outline: 2px solid var(--preto); outline-offset: 3px; }
/* Só com mouse de verdade: no celular o :hover fica "grudado" na página depois do toque. */
@media (hover: hover) { .dividir-grade--interativa .dividir-corpo:hover .dividir-moldura { outline: 1px solid var(--preto); outline-offset: -1px; } }
/* A caixinha no canto: vazia (branca, linha preta) ou com a posição da página no PDF novo (laranja). */
.dividir-ordem {
  position: absolute;
  top: 4px;
  left: 4px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border: 1px solid var(--preto);
  background: var(--branco);
  color: var(--preto);
  font-family: var(--fonte-mono);
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dividir-pagina--marcada .dividir-moldura { background: var(--laranja); }
.dividir-pagina--marcada .dividir-ordem { background: var(--laranja); }
.dividir-pagina--marcada .dividir-folha { outline-color: var(--preto); }
.dividir-pagina--marcada .dividir-num { font-weight: 700; }
.dividir-grade--interativa .dividir-folha img { pointer-events: none; }

/* ---------- Opções ---------- */
.extrair-opcoes { display: grid; gap: 24px; min-width: 0; }
.extrair-opcoes[hidden] { display: none; }
.extrair-escolha { display: grid; gap: 12px; }
.extrair-campo { max-width: 460px; }
.extrair-entrada { font-family: var(--fonte-mono); }
.extrair-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.extrair-atalhos .botao { min-height: 44px; }
.extrair-resumo { display: grid; gap: 6px; }
.extrair-resumo:empty { display: none; }
.extrair-resumo p { margin: 0; overflow-wrap: anywhere; }
.extrair-resumo-principal { font-size: 17px; font-weight: 700; }
.extrair-resumo-aviso { font-size: 15px; display: flex; gap: 10px; align-items: baseline; }
.extrair-resumo-aviso::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); }

/* ---------- Vários PDFs (telas/dividir-pdf-lote.js): no lugar da grade, o campo com as páginas
   que entram de cada PDF e os atalhos "primeira" e "última" (botões que ficam pretos quando a
   palavra está no campo). ---------- */
.lote { display: grid; gap: 12px; min-width: 0; }
.lote[hidden] { display: none; }
.extrair-escolha[hidden] { display: none; }
.lote .botao[aria-pressed="true"] { background: var(--preto); color: var(--branco); }
@media (forced-colors: active) {
  .lote .botao[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}

/* "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) {
  .lote .extrair-atalhos .botao { flex: 1 1 140px; justify-content: center; }
  .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 .extrair-opcoes { gap: 12px; }