/*
  dicode.ai — Desfocar rosto (/desfocar-rosto): o efeito, o palco com a foto e as áreas marcadas
  (cantos para puxar e o botão de tirar na área escolhida), os botões de cima 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.
  Tela: assets/js/ferramentas/telas/desfocar-rosto.js; opções: templates/ferramentas/desfocar-rosto.html.
*/
/* O que está escondido (hidden) fica escondido, mesmo com display de grade ou flex nas classes */
#ferramenta [hidden] { display: none !important; }

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

.dr-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dr-barra .botao { min-height: 48px; }
.dr-limpar {
  min-height: 44px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.dr-limpar[disabled] { color: var(--cinza); text-decoration: none; cursor: default; opacity: 1; }
@media (max-width: 640px) {
  .dr-barra .botao { flex: 1 1 160px; justify-content: center; }
}
.dr-busca { margin: 0; min-height: 1.5em; font-size: 15px; line-height: 1.45; color: var(--preto); }
@media (max-width: 559.98px) { .dr-busca { min-height: 3em; } }

/* O palco: quadrado no celular, 4:3 no computador (tamanho fixo desde o começo: nada pula). Nunca
   mais alto que 3/4 da janela. Na foto, o dedo desenha áreas: a página não rola por cima dela. */
.dr-palco {
  position: relative;
  width: 100%;
  max-width: min(100%, 75vh);
  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) { .dr-palco { aspect-ratio: 4 / 3; max-width: min(100%, 800px, 100vh); } }
.dr-palco--pronto { touch-action: none; cursor: crosshair; }
.dr-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dr-vazio { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; color: var(--cinza); }

/* As áreas ficam num grupo do tamanho do palco, que não pega o toque: só as áreas e as alças pegam
   (o resto do palco é onde o dedo desenha uma área nova). */
.dr-areas { position: absolute; inset: 0; pointer-events: none; }
.dr-area { position: absolute; left: 0; top: 0; }
.dr-area-corpo {
  pointer-events: auto;
  position: absolute;
  inset: 0;
  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;
}
.dr-area-corpo:focus { outline: 1px solid var(--preto); }
.dr-area-corpo:focus-visible { outline: 3px solid var(--preto); outline-offset: 0; }
/* O número da área, no canto de cima (o mesmo da lista que o leitor de tela anuncia) */
.dr-area-num {
  position: absolute;
  left: -1px;
  top: -1px;
  padding: 1px 5px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--preto);
  background: var(--laranja);
  pointer-events: none;
}
.dr-area--escolhida .dr-area-corpo { border-width: 3px; }

/* Cantos e o botão de tirar: só na área escolhida. Alvo de 44 × 44 px centrado no ponto. */
.dr-canto, .dr-tirar {
  pointer-events: auto;
  position: absolute;
  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;
}
.dr-area:not(.dr-area--escolhida) .dr-canto, .dr-area:not(.dr-area--escolhida) .dr-tirar { display: none; }
.dr-canto::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 14px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid var(--preto);
  outline: 1px solid var(--branco);
  background: var(--laranja);
}
.dr-canto--nw { left: 0; top: 0; cursor: nwse-resize; }
.dr-canto--ne { left: 100%; top: 0; cursor: nesw-resize; }
.dr-canto--sw { left: 0; top: 100%; cursor: nesw-resize; }
.dr-canto--se { left: 100%; top: 100%; cursor: nwse-resize; }
.dr-canto:focus { outline: none; }
.dr-canto:focus-visible::before { outline: 3px solid var(--preto); outline-offset: 2px; }
/* Tirar: um quadrado preto com o X branco, no meio da borda de cima */
.dr-tirar { left: 50%; top: 0; cursor: pointer; }
.dr-tirar::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
  background: var(--preto);
  outline: 1px solid var(--branco);
}
.dr-tirar svg { position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; color: var(--branco); }
.dr-tirar:focus { outline: none; }
.dr-tirar:focus-visible::before { outline: 3px solid var(--laranja); outline-offset: 1px; }

/* A área sendo desenhada pelo dedo ou pelo mouse */
.dr-desenho {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed var(--laranja);
  outline: 1px solid var(--preto);
  pointer-events: none;
}

.dr-contagem { margin: 0; min-height: 1.5em; color: var(--preto); }
.dr-aviso { margin: 0; display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.45; }
.dr-aviso::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); }

/* Resultado: prévia da foto coberta */
.dr-previa { display: grid; gap: 10px; min-width: 0; }
.dr-previa > .rotulo { margin: 0; }
.dr-previa-quadro {
  position: relative;
  width: min(360px, 100%);
  aspect-ratio: 4 / 3;
  background: var(--branco);
  outline: 1px solid var(--linha);
  overflow: hidden;
}
.dr-previa-quadro img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }

/* Só no app instalado (pwa/foto-tela.js, molde "paginas"): o palco vai para o meio da tela e ocupa
   o espaço todo, com a foto sobre o escuro (sem a moldura nem o quadrado fixo da página); a folha das
   abas fica embaixo. A margem de baixo deixa o tamanho do arquivo (.ft-medida) fora da foto. A dica
   longa (com o teclado) dá lugar à curta do app (.dr-ajuda-app, data-so-app). */
.ft .ft-palco > .dr-palco {
  width: auto;
  max-width: none;
  aspect-ratio: auto;
  margin: 8px 8px 44px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.ft .dr-vazio { color: #D6D6D2; }
.ft .dr-ajuda { display: none; }
.ft .dr-ajuda-app { margin: 0 0 10px; }