/*
  dicode.ai — CSS só da página /gerador-de-qr-code (Leva 16, equipe A1). Tudo o que é comum às três páginas de
  QR Code está em _qr.css (o build põe o conteúdo dele aqui dentro).
*/
/*
   Parte de CSS: entra no lugar da linha  @import "_qr.css";  de gerador-de-qr-code.css,
   qr-code-wifi.css e qr-code-whatsapp.css (o build põe o conteúdo aqui dentro). Leva 16, equipe A1.
   As três páginas de QR Code não têm arquivo para escolher: o formulário fica na etapa "escolher"
   da área (templates/ferramentas/<slug>-escolher.html) e a área de soltar some (ela continua lá
   só para arrastar ou colar a imagem do logo). Celular primeiro: campos, prévia, opções e o botão,
   um embaixo do outro; no computador, a prévia fica ao lado e acompanha a rolagem.
   Só os tokens do design system (dicode.css): cantos retos, sem sombra nem gradiente, linhas de
   1px, rótulos em Fragment Mono, alvos de toque de 44 px.
*/

/* A área de soltar não aparece (não há arquivo); o formulário só na etapa de escolher. */
#ferramenta [data-ui="soltar"] { display: none; }
.area:not([data-etapa="escolher"]) .qr { display: none; }

.qr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; }
.qr-campos, .qr-opcoes { display: grid; gap: 20px; min-width: 0; align-content: start; }
@media (min-width: 900px) {
  .qr { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "campos previa" "opcoes previa"; column-gap: 40px; }
  .qr-campos { grid-area: campos; }
  .qr-opcoes { grid-area: opcoes; }
  .qr-previa-caixa { grid-area: previa; position: sticky; top: 16px; align-self: start; }
}

/* Tipos (Gerador): os botões de escolha e os atalhos para as páginas do Wi-Fi e do Pix. */
.qr-tipos { align-items: center; }
.qr-atalho {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 4px; font-size: 15px; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.qr-tipo { display: grid; gap: 16px; min-width: 0; }
.qr-area { resize: vertical; min-height: 96px; font-family: inherit; }
.qr-telefone { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
.qr-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 560px) { .qr-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qr-grade-toda { grid-column: 1 / -1; }
.qr-mais { margin-top: 4px; }

/* Senha do Wi-Fi com o botão "Mostrar" ao lado */
.qr-senha { display: flex; gap: 8px; }
.qr-senha .entrada { flex: 1 1 auto; min-width: 0; }
.qr-senha-ver { flex: none; min-height: 44px; }

/* A prévia: quadrado de tamanho fixo desde o começo (nada pula quando o código aparece). */
.qr-previa-caixa { display: grid; gap: 10px; min-width: 0; align-content: start; justify-items: start; }
.qr-previa { position: relative; margin: 0; width: min(240px, 100%); aspect-ratio: 1; border: 1px solid var(--preto); background: var(--branco); }
.qr-previa-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .15s; }
.qr-previa-tela--velha { opacity: .35; }
.qr-previa-vazio {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px;
  text-align: center; font-size: 15px; line-height: 1.4; color: var(--cinza); background: var(--branco);
}
.qr-previa-info { margin: 0; min-height: 1.5em; max-width: 300px; }
.qr-aviso { margin: 0; max-width: 460px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.qr-aviso::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--laranja); vertical-align: 1px; }
.qr-conteudo { max-width: 300px; font-size: 14px; }
.qr-conteudo > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.qr-conteudo-texto {
  margin: 0; max-height: 160px; overflow: auto; padding: 10px; border: 1px solid var(--linha); background: var(--branco);
  font-family: var(--fonte-mono); font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
@media (max-width: 899.98px) {
  .qr-previa-caixa { justify-items: center; }
  .qr-previa-info, .qr-conteudo { text-align: center; }
}

/* Cores, logo e margem */
.qr-cores { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.qr-cor-entrada { width: 96px; height: 44px; padding: 4px; border: 1px solid var(--preto); border-radius: 0; background: var(--branco); cursor: pointer; }
.qr-cor-entrada::-webkit-color-swatch-wrapper { padding: 0; }
.qr-cor-entrada::-webkit-color-swatch { border: 1px solid var(--linha); border-radius: 0; }
.qr-cor-entrada::-moz-color-swatch { border: 1px solid var(--linha); border-radius: 0; }
.qr-cor-entrada:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }
.qr-link { min-height: 44px; }
.qr-logo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.qr-logo-linha .botao { min-height: 44px; }
.qr-logo-info { margin: 0; min-height: 1.5em; }
.qr-regua { max-width: 460px; }
.qr-regua-rotulo { display: flex; justify-content: space-between; gap: 12px; }
.qr-regua-rotulo output { font-family: var(--fonte-mono); color: var(--preto); }
.qr-faixa { width: 100%; min-height: 44px; margin: 0; accent-color: var(--preto); cursor: pointer; }
.qr-niveis .escolha span { min-width: 0; }

/* O arquivo que sai e o botão */
.qr-arquivo { gap: 14px; }
.qr-sub { display: grid; gap: 10px; padding-top: 4px; max-width: 520px; }
.qr-acao { display: grid; gap: 12px; justify-items: start; padding-top: 8px; border-top: 1px solid var(--linha); }
.qr-acao .acao-dica { min-height: 1.5em; }
@media (max-width: 640px) {
  .qr-acao .botao { width: 100%; justify-content: center; }
  .qr-arquivo .escolhas .escolha, .qr-niveis .escolha { flex: 1 1 130px; }
  .qr-arquivo .escolhas .escolha span, .qr-niveis .escolha span { width: 100%; justify-content: center; }
}

/* Resultado: o código pronto (para conferir com a câmera) e os outros formatos */
.qr-resultado { display: grid; gap: 20px; min-width: 0; }
.qr-resultado-figura { display: grid; gap: 8px; margin: 0; justify-items: start; }
.qr-resultado-figura img { display: block; width: 240px; max-width: 100%; height: auto; border: 1px solid var(--linha); }
.qr-resultado-figura figcaption { margin: 0; }
.qr-tambem { display: grid; gap: 6px; }
.qr-tambem ul { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.qr-tambem a {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}