/*
  dicode.ai — Melhorar qualidade de imagem (/melhorar-qualidade-imagem): 2x/4x com as medidas, o aviso
  de foto grande (com "reduzir antes"), o tempo que falta embaixo da barra e o antes e depois do
  resultado (duas imagens uma sobre a outra, com a divisória). 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.
  Tela: assets/js/ferramentas/telas/melhorar-qualidade-imagem.js; opções:
  templates/ferramentas/melhorar-qualidade-imagem.html.
*/
#ferramenta [hidden] { display: none !important; }

.mq-fator .opcoes-dica { min-height: 3em; }
.mq-medidas { margin: 4px 0 0; min-height: 1.5em; color: var(--preto); }

.mq-grande {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--preto);
  border-left: 7px solid var(--laranja);
  background: var(--branco);
}
.mq-grande p { margin: 0; }
.mq-grande-titulo { font-weight: 700; }
.mq-reduzir {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-weight: 600;
}
.mq-reduzir input { width: 22px; height: 22px; flex: none; accent-color: var(--preto); margin: 0; }
.mq-download, .mq-ja-grande, .mq-firefox { margin: 0; }

/* O tempo que falta (dentro do bloco de progresso da ui.js) */
.mq-tempo { margin: 8px 0 12px; min-height: 1.5em; color: var(--preto); }

/* Antes e depois: a "depois" embaixo, a "antes" por cima, cortada na posição da divisória. */
.mq-comparar { display: grid; gap: 10px; min-width: 0; margin: 0; }
.mq-comparar > .rotulo { margin: 0; }
.mq-quadro {
  --mq-pos: 50%;
  position: relative;
  width: 100%;
  background: var(--superficie);
  outline: 1px solid var(--preto);
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.mq-quadro img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.mq-antes { clip-path: inset(0 calc(100% - var(--mq-pos)) 0 0); }
.mq-linha {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--mq-pos);
  width: 2px;
  margin-left: -1px;
  background: var(--laranja);
  pointer-events: none;
}
.mq-etiqueta {
  position: absolute;
  top: 8px;
  padding: 2px 8px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--branco);
  color: var(--preto);
  border: 1px solid var(--preto);
  pointer-events: none;
}
.mq-etiqueta--antes { left: 8px; }
.mq-etiqueta--depois { right: 8px; }
.mq-faixa { width: 100%; max-width: 100%; min-height: 44px; margin: 0; accent-color: var(--laranja); }
.mq-comparar figcaption { margin: 0; }

/* Só no app instalado (pwa/foto-tela.js): a frase do tempo, na aba Tamanho (data-so-app) */
.ft .mq-tempo-app { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--preto); }
.ft .mq-tempo-app:empty { display: none; }