/*
  dicode.ai — CSS só da página Criar favicon (/criar-favicon). Reaproveita as colunas, as réguas, as
  letras e as amostras de cor de _foto-canvas.css (Editor de fotos e Gerador de memes), sem mudar
  nada lá.
  Tela: assets/js/ferramentas/telas/criar-favicon.js; opções: templates/ferramentas/criar-favicon.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; }

/* "Sem imagem? Fazer com texto ou emoji", embaixo da área de soltar (só na etapa de escolher) */
.fv-sem-imagem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fv-sem-imagem .botao { min-height: 44px; }
.fv-sem-imagem-ou { color: var(--cinza); }
.area:not([data-etapa="escolher"]) .fv-sem-imagem { display: none; }

/* Prévias: a grande, a aba do navegador e a tela do celular */
.fv-previas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 520px) and (max-width: 899.98px) { .fv-previas { grid-template-columns: 180px minmax(0, 1fr); align-items: start; } }
@media (max-width: 899.98px) { .fv-coluna-previa { position: static; border-bottom: 0; } }
.fv-grande {
  position: relative; margin: 0; width: min(220px, 100%); aspect-ratio: 1; 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;
}
.fv-grande-tela { position: absolute; inset: 8%; width: 84%; height: 84%; }
.fv-lugares { display: grid; gap: 8px; min-width: 0; align-content: start; }
.fv-lugar-titulo { margin: 8px 0 0; }
.fv-lugar-titulo:first-child { margin-top: 0; }

.fv-aba {
  display: flex; align-items: center; gap: 8px; max-width: 280px; height: 36px; padding: 0 12px;
  border: 1px solid var(--linha); border-bottom: 0; background: #f1f3f4; color: #202124; font-size: 13px;
}
.fv-aba--escura { background: #35363a; color: #e8eaed; border-color: #35363a; }
.fv-aba-icone { flex: none; width: 16px; height: 16px; }
.fv-aba-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fv-aba-fechar { flex: none; opacity: .7; }

.fv-celular {
  display: flex; gap: 18px; max-width: 280px; padding: 18px 16px 14px;
  background: #1c2b3a; color: #ffffff;
}
.fv-app { display: grid; justify-items: center; gap: 6px; width: 60px; }
.fv-app-icone, .fv-app--outro i { display: block; width: 60px; height: 60px; border-radius: 14px; }
.fv-app--outro i { background: rgba(255, 255, 255, 0.22); }
.fv-app-nome { max-width: 72px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; text-align: center; }
.fv-testar { justify-self: start; min-height: 44px; margin-top: 4px; }
.fv-testar[aria-pressed="true"] { background: var(--preto); color: var(--branco); }

/* Opções */
.fv-grupo { display: grid; gap: 14px; }
.fv-texto { max-width: 220px; font-size: 22px; }
.fv-emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.fv-emoji { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 22px; line-height: 1; }
.fv-amostra--transparente {
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #cfcfcf 25%, transparent 25%, transparent 75%, #cfcfcf 75%),
    linear-gradient(45deg, #cfcfcf 25%, transparent 25%, transparent 75%, #cfcfcf 75%);
  background-size: 8px 8px; background-position: 0 0, 4px 4px;
}
.fv-amostra--branco { background: #ffffff; }
.fv-amostra--preto { background: #0a0a0a; }
.fv-amostra--laranja { background: #ff4f00; }
.fv-amostra--azul { background: #1f5fd1; }
.fv-forma-icone { display: inline-block; flex: none; width: 14px; height: 14px; margin-right: 8px; border: 1px solid var(--preto); background: var(--superficie); }
.fv-forma-icone--arredondado { border-radius: 4px; }
.fv-forma-icone--circulo { border-radius: 50%; }

/* Resultado: o trecho de HTML com o botão de copiar */
.fv-codigo { display: grid; gap: 10px; min-width: 0; }
.fv-codigo > .rotulo { margin: 0; }
.fv-codigo pre {
  margin: 0; padding: 12px; overflow-x: auto; border: 1px solid var(--preto); background: var(--superficie);
  font-family: var(--fonte-mono); font-size: 13px; line-height: 1.5; white-space: pre;
}
.fv-codigo .botao { justify-self: start; min-height: 44px; }
.fv-codigo .campo-ajuda { margin: 0; }

/* ---------- No app instalado (pwa/foto-tela.js, molde "paginas"; só dentro da tela .ft) ----------
   As prévias no meio: o ícone grande em cima, no centro, e embaixo a aba do navegador e a tela do
   celular. Sem o "Ver nesta aba" (o app não tem aba de navegador). */
.ft .ft-palco > .fc-coluna-palco[data-app-palco] { position: static; z-index: auto; border: 0; padding: 16px 16px 56px; }
.ft .fv-previas { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
.ft .fv-grande { width: min(168px, 22vh, 100%); }
.ft .fv-lugares { width: 100%; max-width: 280px; }
.ft .fv-testar { display: none; }