/* Tarjar PDF — só o que a base não tem. Nenhuma cor nova: tudo var(--...).
   Motivos:
   - os tipos de dado são caixas de marcar em linha (a .opcao da base é em
     grade de 280 px e seis delas empurrariam a prévia para fora da tela);
   - a prévia é um <canvas> que ocupa a largura da bancada; a altura sai da
     proporção da página (height: auto), sem estilo inline;
   - touch-action: none na folha: arrastar o dedo desenha a tarja em vez de
     rolar a página;
   - com um PDF aberto, a zona encolhe (.compacta), como no Dividir PDF. */

.estado { margin: 16px 0 0; min-height: 1.4em; }
.estado:empty { min-height: 0; margin: 0; }

.zona.compacta { min-height: 0; padding: 16px 18px; gap: 4px; }
.zona.compacta strong { font-size: 22px; }

.aberto { margin-top: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.aberto .numero { margin: 0 0 6px; }
.aberto-nome { margin: 0; font-size: 17px; color: var(--silk); overflow-wrap: anywhere; }
.aberto .mono { margin: 4px 0 0; }

.busca { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
.busca legend { padding: 0; margin-bottom: 6px; }
.ajuda-busca { margin: 0 0 12px; font-size: 15px; color: var(--silk-3); }
.padroes { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 16px; }
.padrao {
  display: inline-flex; align-items: center; gap: 2px; padding: 0 14px 0 2px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 2px; background: var(--bg);
  font-family: var(--f-dado); font-size: 15px; letter-spacing: .06em; color: var(--silk-2);
}
.padrao:hover { border-color: var(--silk-3); }
.padrao:has(input:checked) { border-color: var(--copper); color: var(--silk); }
.parametro { margin: 0; max-width: 520px; }

.previa { margin: 12px 0 0; font-size: 16px; color: var(--silk-2); min-height: 1.5em; }
.previa:empty { min-height: 0; margin: 0; }

.marcar { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.marcar > .rotulo { margin: 0 0 6px; }
.navega { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.navega .mono { min-width: 12ch; text-align: center; }
.folha-moldura { border: 1px solid var(--line-2); border-radius: 2px; background: var(--raise); padding: 8px; }
.folha { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.legenda { margin: 10px 0 0; font-size: 15px; color: var(--silk-3); }

.resultado .numero { margin-bottom: 8px; }
.resultado p { margin: 0 0 6px; }
.resultado .numero:focus { outline: none; }
.resultado .numero:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }