/*
  dicode.ai — Livreto PDF (/livreto-pdf), Leva 16: as opções, a "Ordem das folhas" (frente e verso de
  cada folha, com a dobra no meio), o "Como imprimir" e a prévia da 1ª face. Só os tokens do design
  system (dicode.css): cantos retos, sem sombra nem gradiente, linhas de 1px, laranja sempre com
  preto por cima, rótulos em Fragment Mono, alvos de toque de 44 px, pensado primeiro para o
  celular (cabe em 320 px sem rolar de lado).
*/

.impor { display: grid; gap: 28px; min-width: 0; }
.impor [hidden] { display: none !important; }

.impor-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 560px; }
@media (max-width: 420px) { .impor-linha { grid-template-columns: minmax(0, 1fr); } }
.impor-linha .campo { min-width: 0; }
.impor .selecao { min-height: 48px; }
.livreto-cadernos { max-width: 360px; }

.livreto-marcar { display: grid; gap: 2px; }
.livreto-marcar-dica { margin: -8px 0 6px 28px; }

/* ---------- Ordem das folhas ---------- */
.livreto-ordem { display: grid; gap: 12px; min-width: 0; }
.livreto-ordem-titulo { margin: 0; }
.livreto-folhas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.livreto-folha { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--linha); background: var(--branco); min-width: 0; }
.livreto-lado { display: flex; align-items: center; gap: 10px; }
.livreto-lado-rotulo { width: 48px; flex: none; font-size: 14px; color: var(--cinza); }
/* A folha deitada, com a dobra (tracejada) no meio */
.livreto-face {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 112px;
  height: 40px;
  border: 1px solid var(--preto);
  background: var(--branco);
}
.livreto-face::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px dashed var(--cinza);
}
.livreto-pag {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-mono);
  font-size: 15px;
}
.livreto-pag--branca { color: var(--cinza); background: var(--superficie); }

/* ---------- Como imprimir (tela "pronto") ---------- */
.livreto-imprimir { display: grid; gap: 8px; padding: 16px 20px; border: 1px solid var(--preto); background: var(--branco); min-width: 0; }
.livreto-imprimir ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; }
.livreto-imprimir li::marker { font-family: var(--fonte-mono); }

/* ---------- Prévia da 1ª face (tela "pronto") ---------- */
.impor-previa { display: grid; gap: 8px; min-width: 0; }
.impor-previa > .rotulo { overflow-wrap: anywhere; }
.impor-previa-quadro {
  display: block;
  width: 100%;
  max-width: 504px;
  padding: 12px;
  border: 1px solid var(--preto);
  background: var(--branco);
}
.impor-previa-imagem { display: block; width: 100%; height: auto; outline: 1px solid var(--linha); background: var(--branco); }