/*
  dicode.ai — RG e CNH frente e verso (/rg-cnh-frente-verso): os dois lados (foto com os 4 cantos),
  as opções e a prévia da folha. 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. Os palcos, a linha de aviso de cada lado e a prévia têm tamanho fixo desde o
  começo: nada pula quando a foto abre.
  Tela: assets/js/ferramentas/telas/rg-cnh-frente-verso.js; opções: templates/ferramentas/rg-cnh-frente-verso.html.
*/

.rgc { display: grid; gap: 24px; min-width: 0; }
.rgc-privacidade { display: flex; gap: 10px; align-items: baseline; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.rgc-privacidade::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); }

/* ---------- Os dois lados ---------- */
.rgc-lados { display: grid; gap: 28px; min-width: 0; }
@media (min-width: 760px) { .rgc-lados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.rgc-lado { display: grid; gap: 10px; min-width: 0; align-content: start; }
.rgc-lado-cab { display: flex; align-items: baseline; gap: 4px 12px; min-width: 0; }
.rgc-lado-titulo { flex: none; margin: 0; color: var(--preto); }
.rgc-lado-titulo:focus { outline: none; }
.rgc-lado-titulo:focus-visible { outline: 2px solid var(--preto); outline-offset: 3px; }
/* Uma linha só (nome do arquivo e tamanho), cortada com reticências: a altura não muda. */
.rgc-lado-info { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; }

/* O palco: quadrado no celular, 4:3 no computador. A foto é desenhada no canvas com uma folga de
   22 px em volta, para os cantos caberem inteiros mesmo nas pontas da foto. */
.rgc-palco {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--preto);
  background: var(--branco);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media (min-width: 760px) { .rgc-palco { aspect-ratio: 4 / 3; } }
.rgc-tela, .rgc-moldura { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rgc-moldura { pointer-events: none; }
.rgc-moldura[hidden] { display: none; }
.rgc-sombra { fill: rgba(10, 10, 10, 0.5); fill-rule: evenodd; }
.rgc-contorno { fill: none; stroke: var(--laranja); stroke-width: 2px; vector-effect: non-scaling-stroke; }

/* Os 4 cantos ficam num grupo (role="application", para o leitor de tela passar as setas) do
   tamanho do palco, que não pega o toque: só os cantos pegam. */
.rgc-cantos { position: absolute; inset: 0; pointer-events: none; }
.rgc-cantos[hidden] { display: none; }

/* Cada canto: alvo de 44 × 44 px, centrado no ponto; o quadradinho laranja (contorno preto e um
   fio branco por fora, para aparecer também em foto escura) fica no meio. */
.rgc-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;
}
.rgc-canto[hidden] { display: none; }
.rgc-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);
}
.rgc-canto:focus { outline: none; }
.rgc-canto:focus-visible::before, .rgc-canto--movendo::before { outline: 3px solid var(--preto); outline-offset: 2px; }
.rgc-canto--movendo { cursor: grabbing; }

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

/* Sem foto: o que falta e os botões, dentro do palco (mesmo tamanho). O corpo fica no meio pela
   margem automática: quando não cabe (320 px com um erro comprido), a margem vira zero, o corpo
   começa no alto e o palco rola. Com justify-content: center, ele vazaria para cima e o começo do
   texto (o nome do arquivo e o que houve) ficaria cortado. */
.rgc-vazio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--superficie);
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rgc-vazio[hidden] { display: none; }
.rgc-vazio-corpo { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
@media (max-width: 400px) {
  .rgc-vazio { padding: 12px; }
  .rgc-vazio-corpo { gap: 10px; }
}
.rgc-vazio-texto { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.rgc-vazio-dica { margin: 0; max-width: 32ch; }
.rgc-vazio-dica[hidden], .rgc-vazio .botao[hidden] { display: none; }
.rgc-vazio--abrindo .rgc-vazio-texto { color: var(--cinza); }
.rgc-vazio--erro .rgc-vazio-texto { display: flex; gap: 10px; align-items: baseline; text-align: left; }
.rgc-vazio--erro .rgc-vazio-texto::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); }

/* Girar (dois botões de 44 px juntos), Foto inteira e Trocar foto */
.rgc-ferramentas { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.rgc-girar { display: flex; border: 1px solid var(--preto); background: var(--branco); }
.rgc-girar > * + * { border-left: 1px solid var(--preto); }
.rgc-ferramentas .botao--p { min-height: 46px; padding: 10px 16px; }
.rgc-ferramentas .botao[disabled] { background: transparent; border-color: var(--linha); }

/* Aviso de cada lado (formato esticado, cantos juntos): sempre 3 linhas de altura (os textos
   cabem em 2 a partir de 246 px de largura, o palco num celular de 320 px; a terceira é folga
   para outras fontes e outros navegadores). */
.rgc-lado-aviso {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  height: 4.35em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.rgc-lado-aviso:not(:empty)::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--laranja); vertical-align: 1px; }

.rgc-trocar-linha { display: flex; }
.rgc-trocar { min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rgc-trocar[disabled] { color: var(--cinza); text-decoration: none; cursor: default; }

/* Ficaram de fora (o mesmo visual das outras ferramentas de vários arquivos) */
.lote-fora { display: grid; gap: 8px; padding: 16px 20px; border: 1px solid var(--preto); background: var(--branco); }
.lote-fora[hidden] { display: none; }
.lote-fora ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.lote-fora li { display: grid; grid-template-columns: 7px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.lote-fora li::before { content: ''; grid-row: 1; width: 7px; height: 7px; background: var(--laranja); }
.lote-fora-nome { font-weight: 600; overflow-wrap: anywhere; text-decoration: line-through; text-decoration-thickness: 1px; }
.lote-fora-motivo { grid-column: 2; overflow-wrap: anywhere; }

/* ---------- Opções e prévia da folha ---------- */
.rgc-config { display: grid; gap: 28px; min-width: 0; }
.rgc-opcoes { display: grid; gap: 24px; min-width: 0; }
@media (min-width: 900px) {
  .rgc-config { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
  .rgc-previa { position: sticky; top: 16px; }
}
.rgc-campo { max-width: 420px; }
.rgc .opcao:has(input:disabled) { color: var(--cinza); cursor: not-allowed; }
.rgc-campo:has(.entrada:disabled) .rotulo { color: var(--cinza); }

.rgc-previa { display: grid; gap: 8px; min-width: 0; justify-items: start; }
.rgc-previa-caixa {
  position: relative;
  width: min(100%, 260px);
  aspect-ratio: 210 / 297;
  border: 1px solid var(--preto);
  background: var(--superficie);
  overflow: hidden;
}
.rgc-previa-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rgc-previa-espera {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 16px; text-align: center; color: var(--cinza);
}
.rgc-previa-espera[hidden] { display: none; }
/* Legenda: altura fixa de 4 linhas desde o começo (a mais comprida, "numa largura menor que a
   de um cartão, para caber (…)", precisa de 4 em 246 px). */
.rgc-previa-legenda {
  margin: 0; max-width: 260px; color: var(--cinza); line-height: 1.5; height: 6em; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
}

/* ---------- Resultado: a prévia da folha pronta ---------- */
.rgc-resultado { display: grid; gap: 12px; justify-items: start; }
.rgc-resultado-previa { margin: 0; width: min(100%, 220px); aspect-ratio: 210 / 297; border: 1px solid var(--preto); background: var(--branco); }
.rgc-resultado-previa img { display: block; width: 100%; height: 100%; }
.rgc-resultado-dica { margin: 0; font-size: 15px; color: var(--cinza); }

@media (max-width: 640px) {
  .rgc-opcoes .escolha { flex: 1 1 140px; }
  .rgc-opcoes .escolha span { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .rgc-canto::before { transition: outline-color .1s; }
}

/* ---------- No app instalado (pwa/foto-tela.js, molde "paginas"; só dentro da tela .ft) ----------
   A frente e o verso no meio, lado a lado, do tamanho do meio (deslizar troca; a beirada do outro
   lado aparece). Na aba Tipo, o documento vem antes do "Trocar frente e verso"; na aba Folha, a
   prévia pequena ao lado da legenda. A aba da lista (Foto) sai: a lista desta página é escondida
   (mostrarLista: false) e cada lado já tem o seu "Escolher" e o "Trocar foto". */
.ft .ft-palco > .rgc-lados[data-app-palco] {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  padding: 12px 12px 52px; scroll-padding-inline: 12px; scrollbar-width: none;
}
.ft .ft-palco > .rgc-lados[data-app-palco]::-webkit-scrollbar { display: none; }
.ft .rgc-lado { flex: 0 0 calc(100% - 28px); display: flex; flex-direction: column; gap: 8px; min-height: 0; scroll-snap-align: start; }
.ft .rgc-palco { flex: 1 1 auto; min-height: 140px; aspect-ratio: auto; }
.ft .rgc-lado-aviso { height: auto; min-height: 0; flex: none; }
.ft .rgc-ferramentas { flex: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ft .rgc-ferramentas::-webkit-scrollbar { display: none; }
.ft .rgc-ferramentas > * { flex: none; }
.ft .rgc-ferramentas .botao--p { padding: 10px 12px; font-size: 14px; }
.ft .ft-abas .ft-aba[data-aba="fotos"] { display: none; }
.ft .rgc-config { order: -1; gap: 12px; }
.ft .rgc-opcoes { gap: 12px; }
.ft .rgc-trocar-linha, .ft .rgc-fora { margin-top: 4px; }
.ft .rgc-fora { padding: 12px 14px; }
.ft .rgc-previa { grid-template-columns: 104px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.ft #rgc-previa-titulo { grid-column: 1 / -1; }
.ft .rgc-previa-caixa { width: 104px; }
.ft .rgc-previa-legenda { height: auto; max-width: none; -webkit-line-clamp: unset; }