/* FICHER TV - QR Code no diálogo "Adicionar servidor" do web player (pairtv.js) */
.pqr { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.pqr-t { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.pqr-img { width: 200px; max-width: 70%; margin: 0 auto 10px; border-radius: 12px; overflow: hidden; background: #fff; aspect-ratio: 1; }
.pqr-img:empty { background: var(--bg); }
.pqr-img svg { display: block; width: 100%; height: 100%; }
.pqr ol { text-align: left; margin: 0 auto 8px; padding-left: 20px; max-width: 290px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pqr-st { margin: 0; min-height: 20px; color: var(--a1); font-size: 13px; font-weight: 700; }
.pqr-st.bad { color: var(--danger); }
.pqr .btn { width: auto; margin: 8px auto 0; }

/* tela larga (TV, computador): formulário à esquerda, QR à direita */
@media (min-width: 820px) {
  .modal-card.has-qr { max-width: 860px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 28px; }
  .modal-card.has-qr > * { grid-column: 1; }
  .modal-card.has-qr > .pqr { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--line); padding-left: 28px; }
  .modal-card.has-qr .pqr-img { width: 240px; max-width: 100%; }
}
/* no celular não faz sentido ler um QR com a própria tela */
@media (max-width: 600px) and (pointer: coarse) {
  .pqr { display: none; }
}