/*
  dicode.ai — Redimensionar PDF (/redimensionar-pdf): os campos do tamanho personalizado, as opções
  em linha, o desenho "como fica a página 1", a prévia da página pronta e os PDFs que ficaram de
  fora. 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).
*/

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

/* ---------- Tamanho personalizado: largura × altura ---------- */
.redim-medidas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
.redim-medidas .campo { flex: 1 1 120px; max-width: 200px; min-width: 0; }
.redim-vezes { align-self: center; margin-top: 18px; font-family: var(--fonte-mono); font-size: 15px; }

/* ---------- Orientação e margem, lado a lado quando cabe ---------- */
.redim-linha { display: flex; flex-wrap: wrap; gap: 16px 20px; }
.redim-linha .campo { flex: 1 1 200px; max-width: 320px; min-width: 0; }

/* ---------- Como fica a página 1: a folha nova e o conteúdo dentro dela ---------- */
.redim-como { display: grid; gap: 10px; min-width: 0; }
.redim-como-linha { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; }
.redim-desenho {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 132px;
  height: 132px;
  background: var(--superficie);
}
.redim-folha {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--preto);
  background: var(--branco);
  box-sizing: border-box;
}
/* O conteúdo da página: um quadro laranja com linhas de texto pretas (só desenho; sobre o laranja, só preto) */
.redim-conteudo {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--preto);
  background:
    linear-gradient(var(--preto), var(--preto)) 12% 14% / 46% 8% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 9px, var(--preto) 9px 10px) 12% 70% / 76% 60% no-repeat,
    var(--laranja);
}
.redim-como-texto { flex: 1 1 180px; min-width: 0; margin: 0; font-size: 15px; }
@media (forced-colors: active) {
  .redim-conteudo { forced-color-adjust: none; background: Highlight; border-color: CanvasText; }
}

/* ---------- Prévia da página pronta (no resultado) ---------- */
.redim-previa { display: grid; gap: 10px; margin-top: 24px; }
.redim-previa-quadro {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: var(--superficie);
}
.redim-previa-imagem { display: block; max-width: 100%; height: auto; border: 1px solid var(--preto); background: var(--branco); }

/* ---------- PDFs que ficaram de fora (no resultado, com vários PDFs) ---------- */
.redim-fora { display: grid; gap: 8px; margin-top: 24px; }
.redim-fora ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.redim-fora li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--linha); }
.redim-fora-nome { font-weight: 600; overflow-wrap: anywhere; }
.redim-fora-motivo { color: var(--cinza); font-size: 15px; }