/*
  dicode.ai — PDF para JPG (/pdf-para-jpg): campo de senha (um PDF: embaixo da lista; vários: um
  por PDF, embaixo do nome), opções, prévia das imagens prontas e os PDFs que ficaram de fora.
  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, alvos de toque de 44 px, pensado primeiro para o celular.
*/

.pdfjpg-senha, .pdfjpg-opcoes { display: grid; gap: 24px; min-width: 0; }
.pdfjpg-senha[hidden], .pdfjpg-opcoes[hidden], .pdfjpg-campo[hidden], .pdfjpg-previa[hidden] { display: none; }

/* ---------- Senha (só quando o PDF pede) ---------- */
.pdfjpg-senha-aviso { margin: 0; background: var(--branco); }
.pdfjpg-senha .campo { max-width: 480px; }
.pdfjpg-senha-linha { display: flex; gap: 8px; }
.pdfjpg-senha-linha .entrada { flex: 1 1 auto; min-width: 0; }
.pdfjpg-senha-linha .botao { flex: none; padding: 12px 20px; }
.pdfjpg-mostrar { min-height: 44px; }
@media (max-width: 400px) {
  .pdfjpg-senha-linha { flex-direction: column; }
  .pdfjpg-senha-linha .botao { justify-content: center; }
}

/* Vários PDFs: o campo de senha de cada um fica embaixo do nome, na lista (.arquivo-extra) */
.pdfjpg-item-senha { display: grid; gap: 6px; max-width: 480px; min-width: 0; }
.pdfjpg-item-senha[hidden] { display: none; }
.pdfjpg-item-senha .botao { padding: 11px 20px; }

/* ---------- Opções ---------- */
/* "Escolher páginas" (um PDF) e "Só a primeira página de cada" (vários): só uma aparece */
.pdfjpg-opcoes .escolha[hidden] { display: none; }
.pdfjpg-campo { max-width: 360px; padding-top: 4px; }
.pdfjpg-opcoes .opcoes-dica:empty { display: none; }
/* "A página 1 de “nome.pdf” vai sair com...": nome sem espaços (ex.: chave de NF-e) quebra a linha */
.pdfjpg-opcoes .opcoes-dica { overflow-wrap: anywhere; }
.pdfjpg-opcoes .selecao:disabled { border-color: var(--linha); color: var(--cinza); }

/* ---------- Prévia das primeiras imagens (tela "pronto") ---------- */
.pdfjpg-previa { display: grid; gap: 8px; min-width: 0; }
.pdfjpg-previa > .rotulo { overflow-wrap: anywhere; }   /* "Prévia de “nome.pdf”" */
.pdfjpg-previa-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px 12px;
  margin: 0;
  padding: 12px;
  list-style: none;
  border: 1px solid var(--preto);
  background: var(--branco);
}
.pdfjpg-previa-lista li { display: grid; gap: 6px; align-content: start; min-width: 0; }
.pdfjpg-previa-imagem {
  display: block;
  width: 100%;
  height: auto;
  background: var(--branco);
  outline: 1px solid var(--linha);
}

/* ---------- PDFs que ficaram de fora (tela "pronto", com vários PDFs) ---------- */
.pdfjpg-fora { display: grid; gap: 8px; padding: 16px 20px; border: 1px solid var(--preto); background: var(--branco); min-width: 0; }
.pdfjpg-fora[hidden] { display: none; }
.pdfjpg-fora ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.pdfjpg-fora li { display: flex; gap: 10px; align-items: baseline; overflow-wrap: anywhere; }
.pdfjpg-fora li::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); }

/* A lista "um por um" com muitas páginas rola por dentro: regra do design system (dicode.css). */