/*
  dicode.ai — JPG para GIF (/jpg-para-gif): miniatura de cada imagem da lista, a prévia da
  animação, o campo dos segundos, a cor de fundo e o GIF pronto no resultado.
  Só os tokens do design system (dicode.css): cantos retos, sem sombra nem gradiente de enfeite,
  linhas de 1px, rótulos em Fragment Mono, alvos de toque de 44 px. O xadrez cinza atrás das
  imagens é o sinal de "transparente" (sem ele, o transparente pareceria branco).
  Tela: assets/js/ferramentas/telas/jpg-para-gif.js; opções: templates/ferramentas/jpg-para-gif.html.
*/
#ferramenta [hidden] { display: none !important; }

.jgif-xadrez {
  background-color: var(--branco);
  background-image: conic-gradient(var(--linha) 25%, transparent 0 50%, var(--linha) 0 75%, transparent 0);
  background-size: 16px 16px;
}

/* ---------- Cada imagem da lista: a miniatura ---------- */
.jgif-mini {
  flex: none;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  outline: 1px solid var(--linha);
  overflow: hidden;
}
.jgif-mini img { display: block; max-width: 100%; max-height: 100%; }

/* ---------- Animação: prévia, segundos ---------- */
.jgif-animacao { display: grid; gap: 24px; min-width: 0; }
.jgif-previa { display: grid; gap: 10px; min-width: 0; }
.jgif-previa-rotulo { margin: 0; }
.jgif-previa-palco {
  width: min(320px, 100%);
  outline: 1px solid var(--linha);
}
.jgif-previa-tela { display: block; width: 100%; height: auto; }
.jgif-previa-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.jgif-previa-botao { min-height: 44px; min-width: 112px; justify-content: center; }
.jgif-previa-quadro { font-variant-numeric: tabular-nums; }
.jgif-previa .opcoes-dica { margin: 0; }

.jgif-segundos { max-width: 260px; margin-top: 6px; }
.jgif-segundos .entrada { max-width: 160px; }

/* ---------- Cor de fundo ---------- */
.jgif-cor { max-width: 260px; }
.jgif-cor-entrada {
  width: 96px;
  height: 44px;
  padding: 4px;
  border: 1px solid var(--preto);
  border-radius: 0;
  background: var(--branco);
  cursor: pointer;
}
.jgif-cor-entrada::-webkit-color-swatch-wrapper { padding: 0; }
.jgif-cor-entrada::-webkit-color-swatch { border: 1px solid var(--linha); border-radius: 0; }
.jgif-cor-entrada::-moz-color-swatch { border: 1px solid var(--linha); border-radius: 0; }
.jgif-cor-entrada:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }

/* ---------- Resultado: o GIF pronto ---------- */
.jgif-resultado { display: grid; gap: 10px; min-width: 0; }
.jgif-resultado > .rotulo { margin: 0; }
.jgif-resultado-quadro {
  justify-self: start;
  display: grid;
  place-items: center;
  width: min(320px, 100%);
  outline: 1px solid var(--linha);
}
.jgif-resultado-quadro img { display: block; max-width: 100%; height: auto; }
.jgif-resultado .botao { justify-self: start; min-height: 44px; }