/*
  dicode.ai — Inserir páginas (/inserir-paginas-pdf): os cartões do que entra (outro PDF, fotos,
  páginas em branco), o "onde" de cada um e a prévia "Como vai ficar".
  Tela: assets/js/ferramentas/telas/inserir-paginas-pdf.js e telas/inserir-paginas-pdf-previa.js;
  opções: templates/ferramentas/inserir-paginas-pdf.html. Só os tokens do design system
  (dicode.css): cantos retos, sem sombra nem gradiente, linhas de 1px, rótulos em Fragment Mono,
  alvos de toque de 44 px, laranja só no que a ferramenta muda (as páginas novas).
*/
.ins { display: grid; gap: 24px; min-width: 0; }
.ins-bloco { display: grid; gap: 12px; min-width: 0; }
.ins-titulo { margin: 0; }
.ins-vazia { margin: 0; padding: 16px 20px; border: 1px dashed var(--cinza); font-size: 15px; color: var(--cinza); }
.ins-mais { display: flex; flex-wrap: wrap; gap: 8px; }
.ins-mais .botao { min-height: 48px; }

/* ---------- Cada inserção ---------- */
.ins-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ins-lista:empty { display: none; }
.ins-item { display: grid; gap: 16px; min-width: 0; padding: 16px 20px 20px; border: 1px solid var(--preto); background: var(--branco); }
.ins-item--erro { border-color: var(--laranja); outline: 1px solid var(--laranja); }
.ins-item-cab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ins-item-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 28px;
  padding: 0 6px;
  background: var(--laranja);
  color: var(--preto);
  font-family: var(--fonte-mono);
  font-size: 13px;
}
.ins-item-titulo { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ins-item-titulo:focus { outline: none; }
.ins-item-titulo:focus-visible { outline: 2px solid var(--preto); outline-offset: 3px; }
.ins-item-tirar { flex: none; min-height: 44px; padding: 0 4px; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ins-item-nome { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ins-item-info { margin: -12px 0 0; }
.ins-item-erro { margin: 0; }
.ins-campo-curto { max-width: 220px; }
.ins-campo-curto[hidden] { display: none; }
.ins-onde { gap: 12px; }
.ins-onde > legend { margin-bottom: 4px; }
.ins-onde-ajuda { color: var(--preto); }
.ins-onde-ajuda:empty { display: none; }

/* Fotos de uma inserção: miniatura, nome, tamanho e o X */
.ins-fotos { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ins-foto { display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.ins-foto-mini { display: grid; place-items: center; width: 56px; height: 56px; background: var(--superficie); outline: 1px solid var(--linha); overflow: hidden; }
.ins-foto-mini img { max-width: 100%; max-height: 100%; }
.ins-foto-mini img[hidden] { display: none; }
.ins-foto-texto { display: grid; min-width: 0; }
.ins-foto-nome { overflow-wrap: anywhere; font-size: 15px; }
.ins-foto-erro:empty { display: none; }
.ins-foto-tirar { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--preto); border-radius: 0; background: var(--branco); color: var(--preto); cursor: pointer; }
@media (hover: hover) { .ins-foto-tirar:hover { background: var(--superficie); } }

/* ---------- Prévia: a ordem do PDF novo ---------- */
.ins-previa { display: grid; gap: 12px; min-width: 0; }
.ins-previa-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ins-previa-resumo { color: var(--preto); }
.ins-previa-aviso { margin: 0; }
/* Altura FIXA desde o começo (como a grade do Organizar): quando as páginas e as miniaturas chegam,
   o que está abaixo (o botão principal, o anúncio) não pula. */
.ins-previa-caixa {
  position: relative;
  height: min(44vh, 420px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--preto);
  background: var(--branco);
  overflow-anchor: none;
}
.ins-previa-caixa--lendo::after {
  content: attr(data-lendo);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: var(--cinza);
}
.ins-previa-grade {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
@media (min-width: 720px) { .ins-previa-grade { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; } }
@media (max-width: 640px) { .ins-previa-caixa { padding: 8px; } }
.ins-folha { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 4px; border: 1px solid var(--linha); background: var(--branco); }
.ins-folha--nova { border-color: var(--preto); }
.ins-folha-quadro { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 6px; background: var(--superficie); overflow: hidden; }
.ins-folha-pag { aspect-ratio: var(--r, .707); max-width: 100%; max-height: 100%; display: grid; place-items: center; background: var(--branco); outline: 1px solid var(--linha); overflow: hidden; }
.ins-folha-pag--empe { height: 100%; width: auto; }
.ins-folha-pag--deitada { width: 100%; height: auto; }
.ins-folha--nova .ins-folha-pag { outline-color: var(--preto); }
.ins-folha-img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.ins-folha-img[hidden] { display: none; }
.ins-folha-marca {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 6px;
  background: var(--laranja);
  color: var(--preto);
  font-family: var(--fonte-mono);
  font-size: 12px;
  line-height: 1.4;
}
.ins-folha-legenda { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 6px; font-family: var(--fonte-mono); font-size: 12px; line-height: 1.5; }
.ins-folha-pos { color: var(--preto); font-variant-numeric: tabular-nums; }
.ins-folha-origem { min-width: 0; color: var(--cinza); overflow-wrap: anywhere; }
.ins-folha-mais { grid-column: 1 / -1; padding: 8px 0; }

.ins-organizar a { color: var(--preto); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* No celular, a dica embaixo do botão passa de 1 linha para 2 ou 3 conforme o que falta: as 3
   linhas ficam reservadas desde o começo (o anúncio abaixo não pula). */
@media (max-width: 640px) { .acao-dica:not(:empty) { min-height: 4.5em; } }