/* dicode.ai — Recortar imagem (/recortar-imagem): o visual é a parte comum com a Foto 3x4
   (_recortar-imagem.css). Tela: assets/js/ferramentas/telas/recortar-imagem.js; opções:
   templates/ferramentas/recortar-imagem.html. */
/*
  dicode.ai — parte comum de Recortar imagem (/recortar-imagem) e Foto 3x4 (/foto-3x4), importada
  por recortar-imagem.css e foto-3x4.css (expandir_css do build.py): o modelo, o palco com a foto e o quadro de
  recorte (cantos e lados para puxar), os botões de girar, o tamanho, o formato e os KB da imagem
  nova, o recorte exato 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/recortar-imagem.js; opções: templates/ferramentas/recortar-imagem.html.
*/
/* O que está escondido (hidden) fica escondido, mesmo com display de grade ou flex nas classes */
#ferramenta [hidden] { display: none !important; }

.ri-modelo { max-width: 560px; }
.ri-modelo-dica { min-height: 3em; }
.ri-editor { display: grid; gap: 10px; min-width: 0; }
.ri-ajuda { margin: 0; }

/* 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: a foto inteira, com os cantos, cabe na tela sem rolar. */
.ri-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) { .ri-palco { aspect-ratio: 4 / 3; max-width: min(100%, 800px, 100vh); } }
.ri-tela, .ri-sombra { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ri-sombra { pointer-events: none; }
.ri-sombra-fora { fill: rgba(10, 10, 10, 0.55); fill-rule: evenodd; }
.ri-vazio { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; color: var(--cinza); }

/* O quadro e as alças ficam num grupo do tamanho do palco, que não pega o toque: só eles pegam. */
.ri-quadro-grupo { position: absolute; inset: 0; pointer-events: none; }
.ri-quadro {
  pointer-events: auto;
  position: absolute;
  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;
}
.ri-quadro:focus { outline: 1px solid var(--preto); }
.ri-quadro:focus-visible { outline: 3px solid var(--preto); outline-offset: 0; }
/* Linhas dos terços (ajudam a centralizar o rosto), finas e claras */
.ri-tercos { position: absolute; inset: 0; pointer-events: none; }
.ri-tercos::before, .ri-tercos::after { content: ''; position: absolute; border: 0 solid rgba(255, 255, 255, 0.6); }
.ri-tercos::before { top: 0; bottom: 0; left: 33.333%; right: 33.333%; border-left-width: 1px; border-right-width: 1px; }
.ri-tercos::after { left: 0; right: 0; top: 33.333%; bottom: 33.333%; border-top-width: 1px; border-bottom-width: 1px; }

/* Cantos: alvo de 44 × 44 px, centrado no ponto, com o quadradinho laranja (contorno preto e um
   fio branco por fora, para aparecer também em foto escura). */
.ri-canto, .ri-lado {
  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;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.ri-canto::before, .ri-lado::before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--preto);
  outline: 1px solid var(--branco);
  background: var(--laranja);
}
.ri-canto::before { left: 13px; top: 13px; width: 18px; height: 18px; }
.ri-lado--n::before, .ri-lado--s::before { left: 12px; top: 18px; width: 20px; height: 8px; }
.ri-lado--e::before, .ri-lado--w::before { left: 18px; top: 12px; width: 8px; height: 20px; }
.ri-canto--nw, .ri-canto--se { cursor: nwse-resize; }
.ri-canto--ne, .ri-canto--sw { cursor: nesw-resize; }
.ri-lado--n, .ri-lado--s { cursor: ns-resize; }
.ri-lado--e, .ri-lado--w { cursor: ew-resize; }
.ri-canto:focus { outline: none; }
.ri-canto:focus-visible::before { outline: 3px solid var(--preto); outline-offset: 2px; }

.ri-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ri-barra .botao { min-height: 48px; }
.ri-inicial {
  min-height: 44px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ri-inicial[disabled] { color: var(--cinza); text-decoration: none; cursor: default; opacity: 1; }
@media (max-width: 640px) {
  .ri-barra .botao { flex: 1 1 140px; justify-content: center; }
}
/* As medidas do recorte: 2 linhas reservadas no celular (o texto cresce quando há tamanho pedido). */
.ri-medidas { margin: 0; min-height: 1.5em; color: var(--preto); overflow-wrap: anywhere; }
@media (max-width: 559.98px) { .ri-medidas { min-height: 3em; } }
.ri-aviso { margin: 0; display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.45; }
.ri-aviso::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); }

/* Tamanho, formato e KB da imagem nova */
.ri-saida { display: grid; gap: 16px; max-width: 560px; }
.ri-px { display: grid; gap: 10px; }
.ri-px-medidas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 8px 12px;
}
.ri-x { padding-bottom: 13px; font-family: var(--fonte-mono); color: var(--cinza); }
.ri-numero { font-family: var(--fonte-mono); }
.ri-kb { max-width: 260px; }

/* Recorte exato: 2 colunas no celular, 4 no computador */
.ri-exato { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; max-width: 560px; }
@media (min-width: 640px) { .ri-exato { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Resultado: prévia da imagem recortada */
.ri-previa { display: grid; gap: 10px; min-width: 0; }
.ri-previa > .rotulo { margin: 0; }
.ri-previa-quadro {
  position: relative;
  width: min(280px, 100%);
  aspect-ratio: 1;
  background: var(--branco);
  outline: 1px solid var(--linha);
  overflow: hidden;
}
.ri-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_app): o palco com a foto e o quadro (.ri-area,
   data-app-palco) ocupa o meio da tela, sobre o escuro, e os chips de modelo ficam numa linha logo
   acima da folha e da barra das abas. Fora do app, .ft não existe e nada disto vale. */
.ft .ri-area[data-app-palco] {
  display: flex; flex-direction: column; overflow: hidden;
  padding: 0 0 44px; background: #1A1A1A;
}
.ft .ri-palco {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; aspect-ratio: auto;
  border: 0; background: transparent;
}
.ft .ri-vazio { color: #D6D6D2; }
.ft .ri-chips {
  flex: none; display: flex; gap: 8px; padding: 8px 12px 6px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior: contain;
}
.ft .ri-chips::-webkit-scrollbar { display: none; }
.ft .ri-chip {
  flex: none; min-width: 52px; height: 36px; padding: 0 14px; margin: 0;
  border: 1px solid #5A5A5A; border-radius: 0; background: transparent; color: var(--branco);
  font: inherit; font-family: var(--fonte-mono); font-size: 13px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ft .ri-chip[aria-pressed="true"] { background: var(--laranja); border-color: var(--laranja); color: var(--preto); }
.ft .ri-chip:active { background: #2A2A2A; }
.ft .ri-chip[aria-pressed="true"]:active { background: #E64700; }
/* Na folha: os botões de girar numa fileira, pequenos (a foto fica com o espaço) */
.ft .ri-barra { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ft .ri-barra::-webkit-scrollbar { display: none; }
.ft .ri-barra .botao { flex: none; min-height: 44px; padding: 0 12px; font-size: 14px; }
.ft .ri-inicial { flex: none; white-space: nowrap; font-size: 14px; }
.ft .ri-medidas { min-height: 0; font-size: 13px; }
.ft .ri-aviso { font-size: 13px; }
.ft .ri-saida { gap: 12px; }
.ft .ri-modelo-dica { min-height: 0; }
/* As caixas que só agrupam (o editor e a imagem nova) somem no app: o que sobra de cada aba fica
   direto na folha, sem os vãos das caixas vazias. */
.ft .ri-editor, .ft .ri-saida { display: contents; }
.ft [data-ui="opcoes"] { gap: 12px; }