/* =============================================================
   CONEXÃO — estado do WhatsApp e QR Code
   ============================================================= */

.conn{
  border-radius:var(--r);
  padding:var(--s5);
  margin-bottom:var(--s4);
  color:var(--sobre-go);
  box-shadow:var(--sh-2);
}
.conn.on {background:var(--go)}
.conn.off{background:var(--danger);color:#fff}

.conn .st{
  display:flex;
  align-items:center;
  gap:var(--s2);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  opacity:.9;
}
.conn h2{font-size:var(--fs-xl);letter-spacing:var(--ls-tight);margin:var(--s2) 0 3px}
.conn p{font-size:var(--fs-sm);opacity:.9}

/* ---------- QR ---------- */
.qrbox{
  background:#fff;              /* o leitor precisa de fundo branco, mesmo no tema escuro */
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:var(--s6);
  text-align:center;
  margin-bottom:var(--s4);
  box-shadow:var(--sh-1);
}
.qrbox svg,
.qrbox img{
  width:196px;
  height:196px;
  max-width:100%;
  border-radius:var(--r-sm);
  display:block;
  margin:0 auto;
}
.qrbox p{
  font-size:var(--fs-xs);
  color:#566470;               /* fixo: a caixa é sempre branca */
  margin-top:var(--s3);
}

/* ---------- passo a passo ---------- */
.passos{counter-reset:p;list-style:none}
.passos li{
  counter-increment:p;
  position:relative;
  padding:0 0 var(--s3) var(--s7);
  font-size:var(--fs-base);
  line-height:1.55;
}
.passos li:last-child{padding-bottom:0}
.passos li::before{
  content:counter(p);
  position:absolute;
  left:0;top:1px;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--slab);
  color:var(--slab-fg);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-tiny);
  font-weight:500;
  display:grid;
  place-items:center;
}
.passos b{font-weight:600}

/* ---------- só no computador ----------
   Não dá pra escanear um QR com o mesmo celular que está mostrando
   ele. No telefone a tela explica isso em vez de mostrar um código
   inútil. */
.so-pc{
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:var(--s6) var(--s5);
  margin-bottom:var(--s4);
  text-align:center;
  box-shadow:var(--sh-1);
}
.so-pc .ic{
  width:40px;height:40px;
  margin:0 auto var(--s4);
  color:var(--fg-3);
}
.so-pc .ic svg{width:100%;height:100%;display:block}
.so-pc b{display:block;font-size:var(--fs-lg);margin-bottom:var(--s2)}
.so-pc p{
  font-size:var(--fs-sm);
  color:var(--fg-2);
  line-height:1.55;
  max-width:36ch;
  margin:0 auto var(--s5);
}
.so-pc em{font-style:normal;font-weight:600;color:var(--fg)}

.so-pc .endereco{
  font-size:var(--fs-xs);
  padding:var(--s3);
  background:var(--bg-sunk);
  border:1px solid var(--edge);
  border-radius:var(--r-sm);
  margin-bottom:var(--s4);
  overflow-wrap:anywhere;
  color:var(--fg);
}

/* contador de expiração do QR */
.qrbox #x-conta{color:#131A20;font-variant-numeric:tabular-nums}

/* No computador o QR é o motivo de a tela existir — pode ser maior.
   Esta regra tem que morar aqui: shell.css carrega antes e perderia
   pra .qrbox svg lá de cima. */
@media (min-width:720px){
  .qrbox svg,
  .qrbox img{width:280px;height:280px}
  .qrbox{padding:var(--s7)}
}