/*
  dicode.ai — Digitalizar com a câmera (/digitalizar-pdf): o botão da câmera na área de soltar,
  a miniatura e os botões de cada página da lista, o editor de cantos e as opções. Só os tokens do
  design system (dicode.css): cantos retos, sem sombra nem gradiente, linhas de 1px, rótulos em
  Fragment Mono, laranja sempre com preto, alvos de toque de 44 px. O palco do editor e as
  miniaturas têm tamanho fixo desde o começo: nada pula quando a foto abre.
  Tela: assets/js/ferramentas/telas/digitalizar-pdf.js; opções: templates/ferramentas/digitalizar-pdf.html.
*/

/* ---------- A câmera: só em aparelho de toque (pointer: coarse); no computador, o "capture" abre
   o seletor comum, que o "Escolher fotos" já abre. */
.soltar-camera { min-height: 46px; }
@media (max-width: 640px) { .soltar .soltar-camera { width: 100%; justify-content: center; } }
@media not (pointer: coarse) {
  [data-camera="abrir"] { display: none; }
}

.dig { display: grid; gap: 24px; min-width: 0; }
.dig-privacidade { display: flex; gap: 10px; align-items: baseline; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.dig-privacidade::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); }
.dig-mais { display: flex; flex-wrap: wrap; gap: 8px; }
@media not (pointer: coarse) { .dig-mais { display: none; } }
.dig-fotografar { min-height: 46px; }

/* ---------- Cada página da lista: a miniatura (a página pronta) e os botões ---------- */
.dig-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.dig-item[hidden] { display: none; }
.dig-mini {
  flex: none;
  display: grid;
  place-items: center;
  width: 84px;
  height: 118px;
  background: var(--superficie);
  outline: 1px solid var(--linha);
}
.dig-mini-tela { display: block; max-width: 100%; max-height: 100%; outline: 1px solid var(--preto); background: var(--branco); }
.dig-mini:not(.dig-mini--pronta) .dig-mini-tela { display: none; }
.dig-item-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dig-item-acoes .botao--p { min-height: 46px; padding: 10px 16px; }
.dig-item-acoes .botao[disabled] { background: transparent; border-color: var(--linha); color: var(--cinza); }
.dig-girar { display: flex; border: 1px solid var(--preto); background: var(--branco); }
.dig-girar > * + * { border-left: 1px solid var(--preto); }
.dig-tentar { margin-top: 10px; }
.dig-tentar[hidden] { display: none; }

/* ---------- Editor de cantos (dentro da página que está sendo ajustada) ---------- */
.dig-guarda { display: contents; }
.dig-editor { display: grid; gap: 10px; min-width: 0; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linha); }
.dig-editor[hidden] { display: none; }
.dig-editor-titulo { margin: 0; color: var(--preto); }
.dig-editor-titulo:focus { outline: none; }
.dig-editor-titulo:focus-visible { outline: 2px solid var(--preto); outline-offset: 3px; }
.dig-editor .opcoes-dica { margin: 0; }

/* O palco: em pé (folhas costumam ser em pé), no máximo 70% da altura da tela. A foto é
   desenhada no canvas com uma folga de 22 px em volta, para os cantos caberem inteiros. */
.dig-palco {
  position: relative;
  width: min(100%, 560px, calc(70vh * 3 / 4));
  aspect-ratio: 3 / 4;
  border: 1px solid var(--preto);
  background: var(--branco);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.dig-tela, .dig-moldura { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dig-moldura { pointer-events: none; }
.dig-moldura[hidden] { display: none; }
.dig-sombra { fill: rgba(10, 10, 10, 0.5); fill-rule: evenodd; }
.dig-contorno { fill: none; stroke: var(--laranja); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.dig-palco-espera { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--cinza); background: var(--superficie); }
.dig-palco-espera[hidden] { display: none; }

/* Os 4 cantos ficam num grupo (role="application") do tamanho do palco, que não pega o toque. */
.dig-cantos { position: absolute; inset: 0; pointer-events: none; }
.dig-cantos[hidden] { display: none; }
.dig-canto {
  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;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.dig-canto::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 12px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid var(--preto);
  outline: 1px solid var(--branco);
  background: var(--laranja);
}
.dig-canto:focus { outline: none; }
.dig-canto:focus-visible::before, .dig-canto--movendo::before { outline: 3px solid var(--preto); outline-offset: 2px; }
.dig-canto--movendo { cursor: grabbing; }

/* Lupa: a região do canto, 3 vezes maior, no alto do palco, do lado oposto ao canto. */
.dig-lupa {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 104px;
  height: 104px;
  border: 1px solid var(--preto);
  background: var(--branco);
  pointer-events: none;
}
.dig-lupa--direita { left: auto; right: 8px; }
.dig-lupa[hidden] { display: none; }

/* Aviso (cantos juntos demais): sempre 2 linhas de altura. */
.dig-aviso { margin: 0; font-size: 15px; line-height: 1.45; min-height: 2.9em; }
.dig-aviso:not(:empty)::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--laranja); vertical-align: 1px; }
.dig-editor-botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.dig-editor-botoes .botao--p { min-height: 46px; padding: 10px 16px; }
.dig-editor-botoes .botao--contorno[disabled] { background: transparent; border-color: var(--linha); color: var(--cinza); }

/* ---------- Opções ---------- */
.dig-config { display: grid; gap: 24px; min-width: 0; }
@media (max-width: 640px) {
  .dig-config .escolha { flex: 1 1 140px; }
  .dig-config .escolha span { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .dig-canto::before { transition: outline-color .1s; }
}

/* ---------- No app instalado (pwa/foto-tela.js, molde "paginas"; só dentro da tela .ft) ----------
   A foto com os 4 cantos ocupa o meio, sobre o escuro (sobra embaixo o lugar do tamanho do arquivo);
   o resto do editor fica na aba Cantos, com as setas de página no lugar do título e sem o "Pronto"
   (no app o editor não fecha). */
.ft .ft-palco > .dig-palco[data-app-palco] {
  flex: 1 1 auto; width: auto; min-width: 0; aspect-ratio: auto; margin: 0 0 48px; padding: 0;
  border: 0; background: transparent; overflow: hidden;
}
.ft .dig-palco-espera { background: transparent; color: #D6D6D2; }
.ft .dig-editor { margin: 0; padding: 0; border: 0; gap: 8px; }
.ft .dig-editor-titulo, .ft .dig-editor [data-dig="pronto"] { display: none; }
.ft .dig-app-paginas { display: flex; align-items: center; gap: 8px; }
.ft .dig-app-pagina { flex: 1 1 auto; min-width: 0; text-align: center; color: var(--preto); }
.ft .dig-app-paginas .arquivo-botao { border: 1px solid var(--preto); }
.ft .dig-app-paginas .arquivo-botao:disabled { border-color: var(--linha); color: var(--linha); }
.ft .dig-aviso { min-height: 0; }
.ft .dig-editor-botoes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ft .dig-editor-botoes::-webkit-scrollbar { display: none; }
.ft .dig-editor-botoes > * { flex: none; }
.ft .dig-editor-botoes .botao--p { padding: 10px 14px; font-size: 14px; }
.ft .dig-editor .opcoes-dica { margin: 0; }