/* dicode.ai — CSS só da página PDF preto e branco (/pdf-preto-e-branco, Leva 16).
   Tela: assets/js/ferramentas/telas/pdf-preto-e-branco.js; opções: templates/ferramentas/pdf-preto-e-branco.html.
   Só os tokens do design system (dicode.css): cantos retos, sem sombra nem gradiente, linhas de
   1px, rótulos em Fragment Mono, laranja sempre com texto preto, alvos de toque de 44px. */

/* O que está escondido (hidden) fica escondido, mesmo com display de grade nas classes */
#ferramenta .cinza-opcoes [hidden] { display: none !important; }
.cinza-opcoes { display: grid; gap: 24px; min-width: 0; }

/* Senha (só aparece quando o PDF pede senha para abrir) */
.cinza-senha { display: grid; gap: 16px; min-width: 0; }
.cinza-senha-aviso { margin: 0; background: var(--branco); }
.cinza-senha .campo { max-width: 480px; }
.cinza-mostrar { min-height: 44px; }

/* Link para Desbloquear PDF (na caixa de erro do PDF com travas) */
.cinza-desbloquear { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-weight: 600; color: var(--preto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Sobrou cor em algumas páginas: o que houve e o botão de refazer como imagem */
.cinza-sobrou { display: grid; gap: 12px; padding: 16px 20px; border: 1px solid var(--preto); background: var(--branco); min-width: 0; }
.cinza-sobrou p { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.cinza-sobrou .botao { justify-self: start; max-width: 100%; white-space: normal; text-align: left; }

/* Resultado: prévia das primeiras páginas do PDF novo. Os quadros têm tamanho fixo desde o começo
   (proporção de folha A4 em pé): as miniaturas chegam depois sem mudar a altura de nada. */
.cinza-previas { display: grid; gap: 10px; min-width: 0; }
.cinza-previas > .rotulo { margin: 0; }
.cinza-previas-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
@media (min-width: 720px) { .cinza-previas-lista { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; } }
.cinza-previa { display: grid; gap: 6px; min-width: 0; }
.cinza-previa-quadro {
  position: relative;
  aspect-ratio: 210 / 297;
  border: 1px solid var(--preto);
  background: var(--branco);
  overflow: hidden;
}
.cinza-previa-quadro img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.cinza-previa-quadro img[hidden] { display: none; }
/* Página que não deu para desenhar: um quadradinho laranja no lugar da miniatura */
.cinza-previa--falhou .cinza-previa-quadro::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  background: var(--laranja);
}
.cinza-previas-mais { margin: 0; }

/* Só no app instalado (pwa/foto-tela.js): os modos têm nomes longos; na folha do pé eles quebram a
   linha em vez de correr de lado. */
.ft .escolhas.cinza-modos { flex-wrap: wrap; overflow-x: visible; }