/*
  dicode.ai — Recortar PDF (/recortar-pdf): o jeito de recortar, o palco com a página grande (o
  quadro de recorte com cantos e lados para puxar, a caixa das margens brancas ou a linha do meio),
  a troca de página, as medidas, as opções de cada jeito e a prévia do resultado.
  Só os tokens do design system (dicode.css): cantos retos, sem sombra nem gradiente, linhas de
  1px, rótulos e números em Fragment Mono, laranja sempre com texto preto, alvos de toque de 44 px.
  O quadro e as alças seguem o Recortar imagem (recortar-imagem.css).
  Tela: assets/js/ferramentas/telas/recortar-pdf.js; opções: templates/ferramentas/recortar-pdf.html.
*/
/* O que está escondido (hidden) fica escondido, mesmo com display de grade ou flex nas classes */
#ferramenta [hidden] { display: none !important; }

.rp-editor { display: grid; gap: 10px; min-width: 0; }
.rp-ajuda { margin: 0; min-height: 3em; }

/* O palco: em pé no celular (a maioria das páginas é em pé), quadrado no computador. Tamanho fixo
   desde o começo: nada pula quando a página chega. Nunca mais alto que ~3/4 da janela. */
.rp-palco {
  position: relative;
  width: 100%;
  max-width: min(100%, 60vh);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--preto);
  background: var(--superficie);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media (min-width: 760px) { .rp-palco { aspect-ratio: 1 / 1; max-width: min(100%, 720px, 78vh); } }

/* A página: posição e tamanho postos pela tela (cabe no palco, com 22 px de folga em volta). */
.rp-folha {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--branco);
  outline: 1px solid var(--linha);
}
.rp-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.rp-sombra { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.rp-sombra-fora { fill: rgba(10, 10, 10, 0.55); fill-rule: evenodd; }
.rp-vazio {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px;
  text-align: center;
  color: var(--cinza);
}
.rp-vazio p { margin: 0; max-width: 34ch; }

/* Margens brancas: a caixa achada (só para ver; não se arrasta) */
.rp-caixa {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed var(--laranja);
  outline: 1px solid var(--preto);
  pointer-events: none;
}

/* Cortar ao meio: a linha (alvo de 44 px) e o número de cada metade */
.rp-linha {
  position: absolute;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.rp-linha::before { content: ''; position: absolute; background: var(--laranja); outline: 1px solid var(--preto); }
.rp-linha--v { top: 0; bottom: 0; width: 44px; margin-left: -22px; cursor: ew-resize; }
.rp-linha--v::before { top: 0; bottom: 0; left: 21px; width: 2px; }
.rp-linha--h { left: 0; right: 0; height: 44px; margin-top: -22px; cursor: ns-resize; }
.rp-linha--h::before { left: 0; right: 0; top: 21px; height: 2px; }
.rp-linha-alca {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  box-sizing: border-box;
  border: 1px solid var(--preto);
  outline: 1px solid var(--branco);
  background: var(--laranja);
}
.rp-metade {
  position: absolute;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 1px solid var(--preto);
  background: var(--branco);
  color: var(--preto);
  pointer-events: none;
}

/* O quadro e as alças ficam num grupo do tamanho da página, que não pega o toque: só eles pegam. */
.rp-grupo { position: absolute; inset: 0; pointer-events: none; }
.rp-quadro {
  pointer-events: auto;
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 2px solid var(--laranja);
  outline: 1px solid var(--preto);
  border-radius: 0;
  background: transparent;
  cursor: move;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.rp-quadro:focus { outline: 1px solid var(--preto); }
.rp-quadro:focus-visible { outline: 3px solid var(--preto); outline-offset: 0; }
.rp-canto, .rp-lado {
  pointer-events: auto;
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.rp-canto::before, .rp-lado::before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--preto);
  outline: 1px solid var(--branco);
  background: var(--laranja);
}
.rp-canto::before { left: 13px; top: 13px; width: 18px; height: 18px; }
.rp-lado--n::before, .rp-lado--s::before { left: 12px; top: 18px; width: 20px; height: 8px; }
.rp-lado--e::before, .rp-lado--w::before { left: 18px; top: 12px; width: 8px; height: 20px; }
.rp-canto--nw, .rp-canto--se { cursor: nwse-resize; }
.rp-canto--ne, .rp-canto--sw { cursor: nesw-resize; }
.rp-lado--n, .rp-lado--s { cursor: ns-resize; }
.rp-lado--e, .rp-lado--w { cursor: ew-resize; }
.rp-canto:focus { outline: none; }
.rp-canto:focus-visible::before { outline: 3px solid var(--preto); outline-offset: 2px; }

/* Troca de página */
.rp-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: min(100%, 60vh); }
.rp-nav .botao { min-height: 48px; }
.rp-proxima { margin-left: auto; }
.rp-ir { display: flex; align-items: center; gap: 8px; }
.rp-ir .rotulo { margin: 0; }
.rp-pagina { width: 5.5ch; min-height: 48px; text-align: center; font-family: var(--fonte-mono); }
@media (max-width: 420px) {
  .rp-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .rp-ir { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
  .rp-nav .botao { justify-content: center; }
  .rp-proxima { margin-left: 0; }
}

/* Medidas e unidade */
.rp-medidas-linha { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; max-width: min(100%, 60vh); }
@media (min-width: 760px) { .rp-nav, .rp-medidas-linha { max-width: min(100%, 720px, 78vh); } }
.rp-medidas { margin: 0; min-height: 3em; flex: 1 1 220px; color: var(--preto); overflow-wrap: anywhere; }
.rp-unidade { display: flex; align-items: center; gap: 8px; }
.rp-unidade .rotulo { margin: 0; }
.rp-unidade .selecao { width: auto; min-width: 88px; }
.rp-nota { margin: 0; display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.45; }
.rp-nota::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); }

/* Painéis de cada jeito */
.rp-painel { display: grid; gap: 16px; min-width: 0; }
.rp-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rp-link {
  min-height: 44px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.rp-link[disabled] { color: var(--cinza); text-decoration: none; cursor: default; opacity: 1; }
.rp-margens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; max-width: 560px; }
@media (min-width: 640px) { .rp-margens { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rp-numero { font-family: var(--fonte-mono); }
.rp-regua { max-width: 560px; }
.rp-regua-rotulo { display: flex; justify-content: space-between; gap: 12px; }
.rp-regua-rotulo output { font-family: var(--fonte-mono); color: var(--preto); }
.rp-faixa { width: 100%; min-height: 44px; margin: 0; accent-color: var(--preto); cursor: pointer; }
.rp-estado { margin: 0; min-height: 1.5em; color: var(--preto); }
.rp-estado:empty { display: none; }
.rp-campo { max-width: 360px; }
.rp-aviso { margin: 0; }

/* Resultado: as primeiras páginas do PDF recortado */
.rp-previa { display: grid; gap: 10px; min-width: 0; }
.rp-previa > .rotulo { margin: 0; }
.rp-previa-lista { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rp-previa-lista li { width: 120px; height: 150px; display: grid; place-items: center; background: var(--branco); outline: 1px solid var(--linha); }
.rp-previa-lista img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; outline: 1px solid var(--preto); }

/* Só no app instalado (molde_app, pwa/foto-tela.js; .ft é a tela do app): o editor (data-app-palco)
   ocupa o meio inteiro, e a página fica com o espaço que sobra em cima da troca de página e das
   medidas. A explicação de como arrastar continua para o leitor de tela (aria-describedby), mas sai
   da vista; o tamanho do arquivo no canto do meio também (o recorte quase não muda o tamanho). */
.ft .rp-editor[data-app-palco] { display: flex; flex-direction: column; gap: 8px; overflow: hidden; padding: 8px 12px; }
.ft .rp-editor .rp-ajuda { display: none; }
.ft .ft-palco:has(> .rp-editor) > .ft-medida { display: none; }
.ft .rp-editor .rp-palco { flex: 1 1 auto; min-height: 120px; width: 100%; max-width: none; aspect-ratio: auto; }
.ft .rp-editor .rp-nav, .ft .rp-editor .rp-medidas-linha { max-width: none; }
.ft .rp-editor .rp-nav { display: flex; flex-wrap: nowrap; gap: 8px; }
.ft .rp-editor .rp-nav .botao { min-height: 44px; padding: 0 10px; font-size: 14px; }
.ft .rp-editor .rp-ir { grid-column: auto; grid-row: auto; }
.ft .rp-editor .rp-pagina { min-height: 44px; }
.ft .rp-editor .rp-proxima { margin-left: auto; }
.ft .rp-editor .rp-de, .ft .rp-editor .rp-ir .rotulo:first-child { white-space: nowrap; }
.ft .rp-editor .rp-medidas-linha { flex-wrap: nowrap; align-items: center; }
.ft .rp-editor .rp-medidas { min-height: 0; flex: 1 1 auto; font-size: 12px; }
.ft .rp-editor .rp-unidade .selecao { min-height: 40px; }
/* "Medidas em": o nome do campo fica só para o leitor de tela (a lista já mostra cm ou mm) */
.ft .rp-editor .rp-unidade .rotulo {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ft .rp-editor .rp-nota { font-size: 13px; }
.ft .rp-painel { gap: 10px; }
.ft .rp-aviso { font-size: 13px; }