/* ============================================================================
   qrcode.css — modal de conexao do WhatsApp (ModalQrCode). Porte do visual do
   `modal-qrcode.js` do D2Whaticket, sem o cronometro em JS.
   O prefixo das classes do overlay e "qr-" (TWzModal.Css).
   ============================================================================ */

.qr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 24, .55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1200;
}

.qr-overlay.is-open { display: flex; }
body.qr-open { overflow: hidden; }

.qr-dialog {
  width: min(28rem, 100%);
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.qr-body { padding: 1.25rem; }
.qr-acoes { display: flex; justify-content: flex-end; gap: .5rem; padding: 0 1.25rem 1.25rem; }

.qr-caixa { text-align: center; }

.qr-imagem img {
  width: 15rem;
  height: 15rem;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius);
  padding: .5rem;
}

.qr-vazio {
  width: 15rem;
  height: 15rem;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 2px dashed var(--card-border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 3rem;
}

.qr-msg { color: var(--text-muted); font-size: .85rem; margin: .75rem 0 .5rem; }

.qr-passos {
  text-align: left;
  margin: 0 auto;
  max-width: 20rem;
  color: var(--text-muted);
  font-size: .8rem;
  padding-left: 1.1rem;
}

.qr-passos li { margin: .2rem 0; }