/* Indique o app (Conta e preferências): QR code do link de indicação, o link, as ações e a contagem. O QR fica sempre
   preto no branco (também no tema escuro), com a margem clara dele, para qualquer câmera ler. */
.indicacao { display: grid; gap: 16px; }
.indicacao-qr {
  justify-self: center; width: min(216px, 100%); aspect-ratio: 1; overflow: hidden;
  background: #ffffff; border: 1px solid var(--borda); border-radius: var(--r2);
}
.indicacao-qr svg { display: block; width: 100%; height: 100%; }
.indicacao-meio { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.indicacao-texto { color: var(--texto-2); font-size: 14px; }
.indicacao-link { font-size: 14px; text-overflow: ellipsis; }
/* no celular, dois por linha com a mesma largura (o terceiro, se houver, ocupa a linha toda) */
.indicacao-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.indicacao-acoes > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.indicacao-contagem { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--texto); }
.indicacao-contagem .ic { color: var(--marca); flex: none; }
@media (min-width: 640px) {
  .indicacao { grid-template-columns: 196px minmax(0, 1fr); align-items: center; gap: 20px; }
  .indicacao-qr { width: 196px; }
  .indicacao-acoes { display: flex; flex-wrap: wrap; }
}