/* =====================================================================
   VISUAL DO GERADOR DE QR CODE
   Usa as cores do site (variáveis de _nucleo/estilo.css), então
   funciona nos modos claro e escuro. Classes começam com .qr-
   O painel com o QR Code (prévia, baixar, personalizar) é do núcleo:
   _nucleo/qrcode.css (classes .qrc-). Sem animações.
   ===================================================================== */
.qr { display: grid; gap: 1rem; margin-top: .4rem; }
.qr [hidden] { display: none !important; }
.qr-duas { display: grid; gap: 1rem; min-width: 0; }
.qr-pilha { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.qr-cartao { padding: 1.1rem 1rem 1.2rem; min-width: 0; }
.qr-tit { font-size: 1.15rem; margin: 0 0 .9rem; }

/* ---------- Abas (tipos de QR Code): rolam para o lado no celular ---------- */
.qr-abas { position: sticky; top: calc(var(--topo-h) + 6px); z-index: 30; display: flex; gap: 3px; padding: 4px; border-radius: 18px; background: var(--superficie-2); box-shadow: 0 0 0 6px var(--fundo); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.qr-abas::-webkit-scrollbar { display: none; }
.qr-abas button, .qr-aba-fora { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .2rem; border: 0; border-radius: 14px; min-height: 54px; min-width: 66px; padding: .3rem .5rem; flex: 1 0 auto; background: transparent; font: inherit; font-weight: 650; font-size: .74rem; line-height: 1.15; color: var(--texto-2); cursor: pointer; text-decoration: none; white-space: nowrap; }
.qr-abas .ico { width: 20px; height: 20px; flex: none; }
.qr-abas [aria-selected="true"] { background: var(--superficie); color: var(--titulo); box-shadow: inset 0 0 0 1px var(--borda), var(--sombra); }
.qr-abas [aria-selected="true"] .ico { color: var(--destaque-texto); }
.qr-aba-fora .ico { color: #1FA855; }

/* ---------- Campos ---------- */
.qr-campo { display: block; margin: .9rem 0 .35rem; font-size: .9rem; font-weight: 650; color: var(--titulo); }
.qr-tit + .qr-campo { margin-top: 0; }
.qr-campo small, .qr-mini small, .qr-check small { font-size: .78rem; font-weight: 600; color: var(--texto-2); }
.qr-entrada, .qr-area, .qr-codigo, .qr-mini input, .qr-mini select {
  width: 100%; min-width: 0; border: 1.5px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie);
  color: var(--texto); font: inherit; font-size: 1rem; padding: .6rem .75rem;
}
.qr-entrada, .qr-mini input, .qr-mini select { min-height: 46px; }
.qr-area { resize: vertical; line-height: 1.45; }
.qr-codigo { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; word-break: break-all; background: var(--superficie-2); }
.qr-entrada:focus, .qr-area:focus, .qr-codigo:focus, .qr-mini input:focus, .qr-mini select:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-suave); }
.qr-entrada:disabled { opacity: .5; }
.qr-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: .9rem; align-items: end; }
.qr-tit + .qr-linha { margin-top: 0; }
.qr-mini { display: grid; gap: .3rem; align-content: start; font-size: .8rem; font-weight: 700; color: var(--texto-2); min-width: 0; }
.qr-check { display: flex; align-items: flex-start; gap: .55rem; margin-top: .85rem; font-size: .92rem; font-weight: 600; color: var(--texto); cursor: pointer; }
.qr-check input { width: 20px; height: 20px; margin: .05rem 0 0; flex: none; accent-color: var(--primaria); }
.qr-senha { display: flex; gap: .5rem; }
.qr-senha .btn { flex: none; }
.qr-explica { font-size: .88rem; color: var(--texto-2); line-height: 1.5; margin: .7rem 0 0; }
.qr-conta { min-height: 1.2em; margin: .35rem 0 0; font-size: .82rem; font-weight: 650; color: var(--destaque-texto); }
.qr-erro { margin: 0; padding: .7rem .9rem; border-radius: 12px; background: color-mix(in srgb, var(--perigo) 12%, var(--superficie)); color: var(--perigo); font-weight: 650; font-size: .92rem; }
.qr-mais { margin-top: .9rem; padding: .7rem .9rem; border-radius: 12px; background: var(--superficie-2); font-size: .92rem; }
.qr-mais summary { font-weight: 700; color: var(--titulo); cursor: pointer; }
.qr-mais .qr-entrada, .qr-mais .qr-codigo { background: var(--superficie); }

/* ---------- PIX ---------- */
.qr-pix-saida { margin-top: 1rem; padding-top: .2rem; border-top: 1px dashed var(--borda); }
.qr-pix-saida .btn { margin-top: .6rem; }
.qr-lido p { margin: .6rem 0 0; }
.qr-lido dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; margin: .7rem 0 0; }
.qr-lido dt { font-weight: 700; color: var(--texto-2); font-size: .85rem; }
.qr-lido dd { margin: 0; font-weight: 650; color: var(--titulo); overflow-wrap: anywhere; }
.qr-lido-bom { color: var(--sucesso); font-weight: 700; }
.qr-lido-ruim { color: var(--perigo); font-weight: 700; }

/* ---------- Telas maiores ---------- */
@media (min-width: 560px) {
  .qr-abas button, .qr-aba-fora { flex-direction: row; gap: .4rem; font-size: .85rem; min-height: 46px; }
}
@media (min-width: 700px) {
  .qr-cartao, .qrc-painel { padding: 1.3rem 1.3rem 1.4rem; }
}
@media (min-width: 900px) {
  .qr-duas { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .qr-duas .qrc-painel { position: sticky; top: calc(var(--topo-h) + 76px); }
}