/* dicode.ai — CSS só da página QR Code Pix (/qr-code-pix). Leva 16, equipe A2.
   Tela: assets/js/ferramentas/telas/qr-code-pix.js; formulário: templates/ferramentas/qr-code-pix-escolher.html.
   Só os tokens do design system (Opção F · Suíço): cantos retos, sem sombra nem gradiente, linhas de
   1px, alvos de toque de 44px. Esta ferramenta não abre arquivo: a área de soltar fica escondida e o
   formulário entra no lugar dela, na etapa "escolher". */

#ferramenta .soltar--ferramenta { display: none; }
.area:not([data-etapa="escolher"]) .px { display: none; }

.px { display: grid; gap: 24px; min-width: 0; }
.px [hidden] { display: none; }
.px-painel { display: grid; gap: 24px; min-width: 0; }
.px-modos { padding-bottom: 20px; border-bottom: 1px solid var(--linha); }

.px .campo { min-width: 0; }
.px .entrada { min-height: 48px; }
.px-entrada-mono { font-family: var(--fonte-mono); font-size: 16px; }
.px-linha { display: grid; gap: 24px; }
@media (min-width: 720px) {
  .px-linha { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .px-valor { max-width: 320px; }
}
.px-erro-campo { display: grid; gap: 4px; justify-items: start; }
.px-erro-campo:has(.campo-erro:empty) .px-trocar { display: none; }
.px-trocar {
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.px-acao { display: grid; gap: 12px; justify-items: start; }
.px-aviso { margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.45; color: var(--cinza); }
@media (max-width: 640px) {
  .px-acao > .botao { width: 100%; justify-content: center; }
}

/* Conferir */
.px-colar { min-height: 120px; font-family: var(--fonte-mono); font-size: 14px; line-height: 1.45; resize: vertical; overflow-wrap: anywhere; }
.px-lido {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--preto);
  background: var(--branco);
}
.px-lido:focus { outline: none; }
.px-lido:focus-visible { outline: 2px solid var(--preto); outline-offset: 3px; }
.px-veredito { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 800; font-stretch: 112%; }
/* Código que não fecha ou que não é Pix: a faixa laranja à esquerda (só preto em cima do laranja) */
.px-lido[data-veredito="crc_errado"], .px-lido[data-veredito="atencao"], .px-lido[data-veredito="nao_e"], .px-lido[data-veredito="nao_pix"], .px-lido[data-veredito="espacos"] { border-left: 8px solid var(--laranja); }
.px-veredito-texto { margin: 0; max-width: 64ch; font-size: 15px; line-height: 1.5; }
.px-notas { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.px-notas li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.px-notas li::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); transform: translateY(-1px); }
.px-golpe { margin: 0; }

/* Dados (no resultado e no conferir) */
.px-dados { margin: 0; display: grid; gap: 0; min-width: 0; border-top: 1px solid var(--linha); }
.px-dados > div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linha); min-width: 0; }
.px-dados dt { margin: 0; }
.px-dados dd { margin: 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.px-mono { font-family: var(--fonte-mono); font-size: 15px; }
@media (min-width: 560px) {
  .px-dados > div { grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 16px; align-items: baseline; }
}

/* Resultado */
.px-res { display: grid; gap: 24px; min-width: 0; }
.px-res-topo { display: grid; gap: 20px; min-width: 0; }
@media (min-width: 720px) { .px-res-topo { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.px-res-qr { margin: 0; width: 240px; max-width: 100%; border: 1px solid var(--linha); background: var(--branco); }
.px-res-qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.px-copia { display: grid; gap: 8px; min-width: 0; max-width: 760px; }
.px-copia-texto { font-family: var(--fonte-mono); font-size: 14px; line-height: 1.45; resize: none; overflow-wrap: anywhere; word-break: break-all; }
.px-copia-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.px-copia-linha .botao { min-height: 44px; }
.px-copia-oculta { position: fixed; top: 0; left: -9999px; opacity: 0; }
.px-outros { display: grid; gap: 8px; }
.px-outros ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.px-outros a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.px-dica { margin: 0; max-width: 64ch; font-size: 15px; line-height: 1.5; color: var(--cinza); }