/*
  dicode.ai — Várias páginas por folha (/varias-paginas-por-folha), Leva 16: o desenho da folha com
  as casas numeradas na ordem, as opções lado a lado e a prévia da 1ª folha. 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; }

/* ---------- O desenho da folha, ao lado do papel e da orientação ---------- */
.impor-folha-linha { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 28px; }
.impor-colunas { display: grid; gap: 20px; flex: 1 1 240px; min-width: 0; }
.impor-desenho {
  position: relative;
  flex: none;
  width: 120px;
  aspect-ratio: 210 / 297;
  border: 1px solid var(--preto);
  background: var(--branco);
}
.impor-desenho--deitada { width: 170px; }
.impor-casa {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie);
}
.impor-desenho--borda .impor-casa { outline: 1px solid var(--cinza); outline-offset: -1px; }
.impor-casa-n {
  font-family: var(--fonte-mono);
  font-size: 13px;
  line-height: 1;
}
.impor-casa:first-child { background: var(--laranja); outline: 1px solid var(--preto); outline-offset: -1px; }
.impor-casa:first-child .impor-casa-n { color: var(--preto); font-weight: 600; }

/* ---------- Margem e espaço, lado a lado ---------- */
.impor-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 520px; }
@media (max-width: 420px) { .impor-linha { grid-template-columns: minmax(0, 1fr); } }
.impor-linha .campo { min-width: 0; }
.impor .selecao { min-height: 48px; }

/* ---------- Prévia da 1ª folha (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); }

@media (forced-colors: active) {
  .impor-casa { forced-color-adjust: none; background: Canvas; outline: 1px solid CanvasText; }
  .impor-casa:first-child { background: Highlight; }
}