/*
  dicode.ai — Remover fundo (/remover-fundo): o modo (pessoa ou objeto), o botão de separar com o
  andamento, o palco com a foto, o pincel, o fundo e o formato, 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 em Fragment Mono, laranja sempre com texto preto, alvos de toque de 44 px. O xadrez
  da transparência é desenhado no próprio canvas (telas/remover-fundo.js), não no CSS.
  Tela: assets/js/ferramentas/telas/remover-fundo.js; opções: templates/ferramentas/remover-fundo.html.
*/
#ferramenta [hidden] { display: none !important; }

.rf-modelo .opcoes-dica { min-height: 3em; }

.rf-separar { display: grid; gap: 10px; min-width: 0; }
.rf-separar-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.rf-separar-linha .botao { min-height: 48px; }
.rf-baixar-nota { margin: 0; flex: 1 1 220px; font-size: 15px; line-height: 1.45; color: var(--cinza); }
@media (max-width: 640px) {
  .rf-separar-linha .botao { flex: 1 1 100%; justify-content: center; }
}
.rf-andamento { gap: 8px; }
.rf-cancelar {
  justify-self: start;
  min-height: 44px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.rf-situacao { margin: 0; min-height: 1.5em; font-size: 15px; line-height: 1.45; color: var(--preto); }
@media (max-width: 559.98px) { .rf-situacao { min-height: 3em; } }

/* O palco: quadrado no celular, 4:3 no computador (tamanho fixo desde o começo). Nunca mais alto
   que 3/4 da janela. Com o pincel ligado, o dedo pinta: a página não rola por cima da foto. */
.rf-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) { .rf-palco { aspect-ratio: 4 / 3; max-width: min(100%, 800px, 100vh); } }
.rf-palco--pincel { touch-action: none; cursor: none; }
.rf-tela { position: absolute; display: block; }
.rf-vazio { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; color: var(--cinza); }
/* O círculo do pincel (mouse): laranja por fora, preto por dentro, para aparecer em qualquer foto */
.rf-cursor {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border: 2px solid var(--laranja);
  outline: 1px solid var(--preto);
  outline-offset: -3px;
  border-radius: 50%;
  pointer-events: none;
}

.rf-pincel[disabled] { opacity: 1; }
.rf-pincel[disabled] .escolha span, .rf-pincel[disabled] .rotulo, .rf-pincel[disabled] .opcoes-dica { color: var(--cinza); }
.rf-pincel-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.rf-pincel-linha .botao { min-height: 44px; }
.rf-tamanho { display: grid; gap: 4px; flex: 1 1 200px; min-width: 0; }
.rf-tamanho input { width: 100%; min-height: 44px; accent-color: var(--laranja); }
.rf-limpar {
  min-height: 44px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.rf-limpar[disabled] { color: var(--cinza); text-decoration: none; cursor: default; opacity: 1; }

.rf-cor { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.rf-cor input { width: 64px; height: 44px; padding: 2px; border: 1px solid var(--preto); border-radius: 0; background: var(--branco); }

/* Resultado: prévia da imagem sem fundo (o xadrez vem desenhado num canvas) */
.rf-previa { display: grid; gap: 10px; min-width: 0; }
.rf-previa > .rotulo { margin: 0; }
.rf-previa-quadro {
  position: relative;
  width: min(360px, 100%);
  aspect-ratio: 4 / 3;
  background: var(--branco);
  outline: 1px solid var(--linha);
  overflow: hidden;
}
.rf-previa-quadro canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* 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. */
.ft .ft-palco > .rf-palco {
  width: auto;
  max-width: none;
  aspect-ratio: auto;
  margin: 8px 8px 44px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.ft .rf-vazio { color: #D6D6D2; }
.ft .rf-separar-linha .botao { flex: 1 1 100%; justify-content: center; }