/*
  dicode.ai — CSS só da página Colagem de fotos (/colagem-de-fotos). Reaproveita o palco, as réguas,
  as amostras de cor e a prévia do resultado de _foto-canvas.css (Editor de fotos e Gerador de memes),
  sem mudar nada lá.
  Tela: assets/js/ferramentas/telas/colagem-de-fotos.js; opções: templates/ferramentas/colagem-de-fotos.html.
*/
/*
   Parte de CSS: entra no lugar da linha  @import "_foto-canvas.css";  de editor-de-fotos.css e
   gerador-de-memes.css (o build põe o conteúdo aqui dentro). O comum das duas: o palco da prévia,
   os botões dos textos por cima dele, a barra de desfazer, as abas, as réguas, o painel do texto,
   as letras 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.
   Tela: assets/js/ferramentas/telas/foto-canvas-tela.js.
*/

/* As letras dos textos (OFL, no próprio site): cada uma só baixa quando é usada. Os nomes são os
   de FONTES em assets/js/ferramentas/foto-canvas-desenho.js. A "moderna" é a Archivo do site. */
@font-face { font-family: 'dc-fc-anton'; font-display: swap; src: url(../../fonts/anton-latin-ext.woff2) format('woff2'); font-weight: 400; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'dc-fc-anton'; font-display: swap; src: url(../../fonts/anton-latin.woff2) format('woff2'); font-weight: 400; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'dc-fc-caveat'; font-display: swap; src: url(../../fonts/caveat-latin-ext.woff2) format('woff2'); font-weight: 400 700; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'dc-fc-caveat'; font-display: swap; src: url(../../fonts/caveat-latin.woff2) format('woff2'); font-weight: 400 700; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'dc-fc-dancing'; font-display: swap; src: url(../../fonts/dancing-script-latin-ext.woff2) format('woff2'); font-weight: 400 700; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'dc-fc-dancing'; font-display: swap; src: url(../../fonts/dancing-script-latin.woff2) format('woff2'); font-weight: 400 700; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* O que está escondido (hidden) fica escondido, mesmo com display de grade ou flex nas classes */
#ferramenta [hidden] { display: none !important; }

/* Palco e opções: no celular, o palco vem antes; no computador, fica ao lado e acompanha a rolagem. */
.fc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.fc-coluna-palco { display: grid; gap: 10px; min-width: 0; align-content: start; }
.fc-coluna-opcoes { display: grid; gap: 24px; min-width: 0; align-content: start; }
@media (min-width: 900px) {
  .fc { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .fc-coluna-palco { position: sticky; top: 16px; }
}
/* No celular, a prévia fica presa no alto da tela enquanto a pessoa mexe nas opções embaixo. */
@media (max-width: 899.98px) {
  .fc-coluna-palco { position: sticky; top: 0; z-index: 3; padding: 8px 0; background: var(--superficie); border-bottom: 1px solid var(--linha); }
  /* O campo que recebe o foco não fica escondido atrás da prévia presa no alto. */
  .fc-coluna-opcoes :is(input, textarea, select, button, summary) { scroll-margin-top: calc(42vh + 96px); }
}

.fc-barra { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-barra .botao { min-height: 44px; }
@media (max-width: 640px) {
  .fc-barra { flex-wrap: nowrap; }
  .fc-barra .botao { flex: 1 1 0; min-width: 0; justify-content: center; padding: 6px 8px; font-size: 14px; gap: 6px; }
  .fc-barra .botao svg { flex: none; }
}
.fc-barra .botao[aria-pressed="true"] { background: var(--preto); color: var(--branco); }
.fc-barra .botao:disabled { opacity: .45; cursor: not-allowed; }

/* O palco: tamanho fixo desde o começo (nada pula quando a foto chega), xadrez claro por baixo
   (a parte transparente de um PNG aparece como transparente). */
.fc-palco {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 42vh;
  border: 1px solid var(--preto);
  background-color: var(--superficie);
  background-image: linear-gradient(45deg, var(--linha) 25%, transparent 25%, transparent 75%, var(--linha) 75%),
    linear-gradient(45deg, var(--linha) 25%, transparent 25%, transparent 75%, var(--linha) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media (min-width: 760px) { .fc-palco { aspect-ratio: 4 / 3; max-height: 70vh; } }
.fc-tela { position: absolute; display: block; }
.fc-camada { position: absolute; inset: 0; pointer-events: none; }
.fc-vazio { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; color: var(--cinza); }
.fc-medidas { margin: 0; min-height: 1.5em; color: var(--preto); overflow-wrap: anywhere; }

/* Os textos por cima do palco: um botão do tamanho de cada texto (tocar escolhe; arrastar move). */
.fc-caixa {
  pointer-events: auto;
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  border: 1px dashed rgba(255, 255, 255, 0.85);
  outline: 1px dashed rgba(10, 10, 10, 0.7);
  outline-offset: 0;
  border-radius: 0;
  background: transparent;
  cursor: move;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.fc-caixa--fixa { cursor: pointer; touch-action: manipulation; }
.fc-caixa--escolhida { border: 2px solid var(--laranja); outline: 1px solid var(--preto); }
.fc-caixa:focus { outline: 1px solid var(--preto); }
.fc-caixa:focus-visible { outline: 3px solid var(--preto); outline-offset: 0; }
.fc-palco--movendo, .fc-palco--movendo * { cursor: grabbing; }

/* Abas (Editor de fotos) */
.fc-abas { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--preto); }
.fc-aba {
  min-height: 44px; padding: 8px 12px; margin: 0 0 -1px; border: 1px solid transparent; border-bottom: 0;
  background: transparent; color: var(--preto); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; border-radius: 0;
}
.fc-aba[aria-selected="true"] { border-color: var(--preto); background: var(--branco); box-shadow: inset 0 3px 0 var(--laranja); }
.fc-aba:focus-visible { outline: 2px solid var(--preto); outline-offset: -4px; }
.fc-painel { display: grid; gap: 16px; min-width: 0; }

/* Réguas */
.fc-reguas { display: grid; gap: 14px; }
.fc-regua { max-width: 460px; }
.fc-regua-rotulo { display: flex; justify-content: space-between; gap: 12px; }
.fc-regua-rotulo output { font-family: var(--fonte-mono); color: var(--preto); }
.fc-faixa { width: 100%; min-height: 44px; margin: 0; accent-color: var(--preto); cursor: pointer; }
.fc-faixa:disabled { cursor: not-allowed; opacity: .5; }
.fc-link {
  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;
}
.fc-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-botoes .botao { min-height: 44px; }
@media (max-width: 640px) { .fc-botoes .botao { flex: 1 1 140px; justify-content: center; } }

/* Painel do texto */
.fc-texto { display: grid; gap: 16px; min-width: 0; }
.fc-texto[data-fc-desligado] { opacity: .55; }
.fc-texto-acoes { display: grid; gap: 6px; justify-items: start; }
.fc-texto-acoes .botao { min-height: 44px; }
.fc-texto-acoes .campo-ajuda { margin: 0; }
.fc-texto-entrada { resize: vertical; min-height: 64px; font-family: inherit; }
.fc-estilo { display: flex; flex-wrap: wrap; gap: 0 24px; }
.fc-excluir {
  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;
}
.fc-fonte--impacto { font-family: 'dc-fc-anton', Impact, sans-serif; font-weight: 400; letter-spacing: .02em; }
.fc-fonte--moderna { font-family: 'Archivo', sans-serif; font-weight: 800; }
.fc-fonte--manuscrita { font-family: 'dc-fc-caveat', cursive; font-weight: 700; font-size: 19px; }
.fc-fonte--elegante { font-family: 'dc-fc-dancing', cursive; font-weight: 700; font-size: 18px; }
.fc-amostra { display: inline-block; flex: none; width: 14px; height: 14px; margin-right: 8px; border: 1px solid var(--preto); }
.fc-amostra--branco { background: #ffffff; }
.fc-amostra--preto { background: #000000; }
.fc-amostra--amarelo { background: #ffd400; }
.fc-amostra--vermelho { background: #e0201b; }
.fc-amostra--azul { background: #1f5fd1; }
.fc-cor-campo { max-width: 260px; }
.fc-cor-entrada { width: 96px; height: 44px; padding: 4px; border: 1px solid var(--preto); border-radius: 0; background: var(--branco); cursor: pointer; }
.fc-cor-entrada::-webkit-color-swatch-wrapper { padding: 0; }
.fc-cor-entrada::-webkit-color-swatch { border: 1px solid var(--linha); border-radius: 0; }
.fc-cor-entrada::-moz-color-swatch { border: 1px solid var(--linha); border-radius: 0; }
.fc-cor-entrada:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }

@media (max-width: 640px) {
  .fc-coluna-opcoes .escolhas .escolha { flex: 1 1 130px; }
  .fc-coluna-opcoes .escolhas .escolha span { width: 100%; justify-content: center; }
}

/* Formato e qualidade do arquivo */
.fc-saida { display: grid; gap: 16px; max-width: 460px; padding-top: 16px; border-top: 1px solid var(--linha); }

/* Resultado: a prévia da imagem pronta */
.fc-previa { display: grid; gap: 10px; min-width: 0; }
.fc-previa > .rotulo { margin: 0; }
.fc-previa-quadro { position: relative; width: min(320px, 100%); aspect-ratio: 1; background: var(--superficie); outline: 1px solid var(--linha); overflow: hidden; }
.fc-previa-quadro img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }

/* O palco: um pouco mais alto que o das outras (a colagem pode ser 9:16) */
.cg-palco { aspect-ratio: 1 / 1; }
@media (min-width: 760px) { .cg-palco { aspect-ratio: 1 / 1; max-height: 72vh; } }
@media (max-width: 899.98px) { .cg-palco { max-height: 46vh; } }

/* Os quadros por cima do palco: tocar escolhe, arrastar enquadra (sem rolar a página), a alça troca */
.cg-camada { pointer-events: auto; touch-action: none; }
.cg-quadro {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.cg-quadro:focus { outline: none; }
.cg-quadro:focus-visible { outline: 3px solid var(--preto); outline-offset: -3px; }
.cg-quadro--escolhido { box-shadow: inset 0 0 0 3px var(--laranja), inset 0 0 0 4px var(--preto); }
.cg-quadro--alvo { box-shadow: inset 0 0 0 4px var(--preto); background: rgba(255, 79, 0, 0.28); }
.cg-quadro--movendo { opacity: .6; }
.cg-quadro--lendo { cursor: progress; }
.cg-quadro--lendo::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid var(--preto); border-right-color: transparent; border-radius: 50%; animation: cg-gira 0.9s linear infinite;
}
@keyframes cg-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cg-quadro--lendo::after { animation: none; } }

/* A alça de trocar de lugar: no canto de cima, à direita, com alvo de toque de 44 px */
.cg-alca {
  position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px;
  cursor: move; touch-action: none;
}
.cg-alca svg { padding: 3px; background: var(--branco); color: var(--preto); border: 1px solid var(--preto); }
.cg-quadro--escolhido .cg-alca svg { background: var(--laranja); }
.cg-quadro--lendo .cg-alca { display: none; }

.cg-palco-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cg-palco-rodape .campo-ajuda { margin: 0; flex: 1 1 220px; }
.cg-palco-rodape .botao { min-height: 44px; }

/* Modelos: um desenho de cada, num quadrado de 44 px ou mais */
.cg-modelos { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-modelo { position: relative; display: inline-block; cursor: pointer; }
.cg-modelo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cg-modelo-caixa { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--linha); background: var(--branco); }
.cg-modelo-desenho rect { fill: var(--superficie); stroke: var(--preto); stroke-width: 1; }
.cg-modelo input:checked + .cg-modelo-caixa { border: 2px solid var(--preto); box-shadow: inset 0 -4px 0 var(--laranja); }
.cg-modelo input:checked + .cg-modelo-caixa .cg-modelo-desenho rect { fill: var(--laranja); }
.cg-modelo input:focus-visible + .cg-modelo-caixa { outline: 3px solid var(--preto); outline-offset: 2px; }

/* Formatos: um retângulo com a proporção de cada um */
.cg-formato-icone { display: inline-block; flex: none; margin-right: 8px; border: 1px solid var(--preto); background: var(--superficie); }
.cg-formato-icone--1x1 { width: 14px; height: 14px; }
.cg-formato-icone--4x5 { width: 13px; height: 16px; }
.cg-formato-icone--9x16 { width: 10px; height: 18px; }
.cg-formato-icone--16x9 { width: 18px; height: 10px; }
.cg-formato-icone--a4 { width: 12px; height: 17px; }

.cg-foto, .cg-bordas { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--linha); }
.cg-foto > legend, .cg-bordas > legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; }
.cg-foto .campo-ajuda { margin: 0; }
.cg-foto-botoes .botao:disabled { opacity: .45; cursor: not-allowed; }
.cg-foto .fc-excluir:disabled { opacity: .45; cursor: not-allowed; }

.cg-amostra--branco { background: #ffffff; }
.cg-amostra--preto { background: #000000; }
.cg-amostra--creme { background: #f3ead8; }
.cg-amostra--cinza { background: #d9d9d9; }
.cg-amostra--laranja { background: #ff4f00; }

/* No app instalado (pwa/foto-tela.js; .ft só existe lá): a coluna do palco no meio da tela, com a
   barra de desfazer em cima e o palco do tamanho que sobra (sem a proporção fixa da página). */
.ft .fc-coluna-palco[data-app-palco] {
  position: static; z-index: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 8px 12px 44px; border: 0; overflow: hidden;
}
.ft .fc-coluna-palco[data-app-palco] .fc-palco { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; max-height: none; }
.ft .fc-coluna-palco[data-app-palco] .fc-medidas:empty { display: none; }