/* painel/whatsapp.css — a aba "Meu WhatsApp" (spec 2026-09-21). Usa os tokens de
   `estilo.css` (--marca, --acento, --ok, --alerta, --perigo, --linha, --suave-texto): a
   mesma paleta do resto do painel, para "verde" querer dizer a mesma coisa em toda tela.
   `.meta`, `.aviso`, `.erro`, `.linha-form`, `button.primario`, `button.mini` e `.rotulo`
   já existem em `estilo.css` — não são redefinidos aqui. */

/* ── a faixa de status, no topo de cada bloco de estado ── */
.faixa { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-radius: 10px; font-weight: 600; margin-bottom: 16px; }
.faixa.bom { background: #ecfdf5; color: var(--ok); }
.faixa.aviso { background: #fffbeb; color: var(--alerta); }
.faixa.ruim { background: #fef2f2; color: var(--perigo); }

.acoes-msg { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ── o QR ── */
.qr { display: block; width: 240px; max-width: 100%; border: 1px solid var(--linha);
  border-radius: 12px; background: #fff; margin: 10px 0; }

/* ── o código de pareamento ── */
.contatos { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.contato { flex: 1 1 240px; border: 1px solid var(--linha); border-radius: 12px; padding: 14px; }
.contato .valor { font-size: 22px; font-weight: 700; margin: 5px 0 0;
  font-variant-numeric: tabular-nums; word-break: break-all; }

/* ── identidade (estado "ativa") ── */
.identidade { display: flex; gap: 16px; align-items: flex-start; margin: 10px 0; }
.foto-perfil { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
dl.campos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
dl.campos dt { color: var(--suave-texto); font-size: 12.5px; }
dl.campos dd { margin: 0; font-size: 14px; word-break: break-word; }

/* ── recriar em dois passos: o formulário de confirmação digitada ── */
.whatsapp-confirmacao { display: flex; flex-direction: column; gap: 10px; margin-top: 16px;
  padding: 14px; border: 1px solid var(--acento); border-radius: var(--raio-controle); background: var(--gelo); }

/* ── "Todas as instâncias" (só admin) ── */
.whatsapp-todas { margin-top: 18px; }
.whatsapp-todas table { width: 100%; margin-top: 10px; }
.whatsapp-todas tr.inativo { opacity: .5; }
.selo-estado { font-weight: 600; }
.selo-estado.bom { color: var(--ok); }
.selo-estado.ruim { color: var(--perigo); }
.selo-estado.neutro { color: var(--suave-texto); font-weight: 400; }