/*
  dicode.ai — Números de página (/numeros-de-pagina): a folha com os 6 lugares do número, o
  exemplo do texto, os campos do Bates, as opções em linha, 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).
*/

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

/* ---------- Onde vai o número: uma folha com 3 lugares em cima e 3 embaixo ---------- */
.numerar-posicao-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.numerar-folha {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: 44px 120px 44px;   /* a folha fica com a proporção de um A4 */
  column-gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--preto);
  background: var(--branco);
}
.numerar-lugar { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; }
.numerar-lugar input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.numerar-marca { display: block; width: 26px; height: 12px; border: 1px solid var(--cinza); background: var(--branco); }
.numerar-lugar:hover .numerar-marca { border-color: var(--preto); }
.numerar-lugar input:checked + .numerar-marca { border-color: var(--preto); background: var(--laranja); }
.numerar-lugar input:focus-visible + .numerar-marca { outline: 2px solid var(--preto); outline-offset: 4px; }
/* As linhas do texto da página, no meio da folha (só desenho) */
.numerar-linhas {
  position: relative;
  grid-column: 1 / -1;
  align-self: center;
  height: 60px;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.numerar-linhas::before, .numerar-linhas::after { content: ''; position: absolute; left: 0; border-top: 1px solid var(--linha); }
.numerar-linhas::before { right: 0; top: 19px; }
.numerar-linhas::after { right: 28%; top: 39px; }
.numerar-posicao-texto { margin: 0; font-size: 15px; font-weight: 600; }
@media (forced-colors: active) {
  .numerar-lugar input:checked + .numerar-marca { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
}

/* ---------- Formato: o exemplo do texto que vai para o PDF ---------- */
.numerar-exemplo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; }
.numerar-amostra {
  display: inline-block;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--preto);
  background: var(--branco);
  font-family: Helvetica, Arial, sans-serif;   /* a mesma família da letra que vai para o PDF */
  font-size: 15px;
  overflow-wrap: anywhere;
}
.numerar-bates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px); gap: 16px; max-width: 520px; }
@media (max-width: 480px) { .numerar-bates { grid-template-columns: minmax(0, 1fr); } }

.numerar-campo { max-width: 360px; padding-top: 4px; }

/* ---------- Primeiro número, letra e distância da borda, lado a lado ---------- */
.numerar-linha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 720px; }
@media (max-width: 640px) { .numerar-linha { grid-template-columns: minmax(0, 1fr); } }
.numerar-linha .campo { min-width: 0; }
.numerar .selecao { min-height: 48px; }

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

/* ---------- PDFs que ficaram de fora (tela "pronto", com vários PDFs) ---------- */
.numerar-fora { display: grid; gap: 8px; padding: 16px 20px; border: 1px solid var(--preto); background: var(--branco); min-width: 0; }
.numerar-fora ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.numerar-fora li { display: grid; grid-template-columns: 7px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.numerar-fora li::before { content: ''; grid-row: 1; width: 7px; height: 7px; background: var(--laranja); }
.numerar-fora-nome { grid-column: 2; font-weight: 600; overflow-wrap: anywhere; }
.numerar-fora-motivo { grid-column: 2; color: var(--cinza); }

/* ---------- No app (pwa/foto-tela.js, .ft): primeiro número, letra e margem ficam em abas
   diferentes; na aba sem nenhum deles, a linha some (sem um vão vazio na folha). ---------- */
.ft .numerar-linha:not(:has(> .campo:not(.ft-fora))) { display: none; }
/* A folha dos seis lugares, mais baixa (os alvos continuam com 44 px): a aba Posição cabe no pé
   junto com a distância da borda, e sobra lugar para as páginas no meio. */
.ft .numerar { gap: 16px; }
.ft .numerar-folha { grid-template-rows: 44px 28px 44px; }
.ft .numerar-linhas { height: 20px; }
.ft .numerar-linhas::before { top: 9px; }
.ft .numerar-linhas::after { display: none; }