/* ==========================================================================
   Peça · selo de prontidão
   Responde uma pergunta só: se chegar mensagem agora, ela tem para onde ir?
   O MESMO componente serve o assistente de criação, a listagem de contas e
   o painel — muda só o tamanho.
   Quatro quadrados, sempre os mesmos quatro marcos, sempre nesta ordem:
   endereço criado · destino cadastrado · destino confirmado · Gmail.
   Vazio quer dizer que o marco não aconteceu.
   ========================================================================== */

.selo { display: flex; align-items: center; gap: 8rem; }

.selo__marcos { display: flex; gap: 3rem; flex: none; }
.selo__marco {
  width: 9rem;
  height: 9rem;
  box-sizing: border-box;
  border: 1rem solid transparent;
}
.selo__marco--feito { background: var(--ok); }
.selo__marco--pendente { background: var(--warn); }
.selo__marco--sem { background: var(--hachura-mini); }
.selo__marco--vazio { border-color: var(--ink-3); }

.selo--medio .selo__marco { width: 10rem; height: 10rem; }
.selo--grande .selo__marco { width: 11rem; height: 11rem; }

.selo__rotulo {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10rem;
  letter-spacing: .08em;
  white-space: nowrap;
}

/* Forma canônica: a lista dos quatro marcos, escrita por extenso.
   Aparece no assistente (A5), na ficha da conta e na área do usuário. */
.marcos { display: flex; flex-direction: column; gap: 10rem; }
.marcos__item { display: flex; align-items: center; gap: 11rem; }
.marcos__glifo { font-family: var(--font-mono); font-size: 13rem; width: 13rem; line-height: 1; flex: none; }
.marcos__texto { font-size: 14rem; }
.marcos--usuario { gap: 12rem; }
.marcos--usuario .marcos__texto { font-size: 15rem; }
.marcos--usuario .marcos__glifo { font-size: 14rem; width: 14rem; }

/* Cartão de estado, usado no kit e na ficha da conta */
.selo-cartao { display: flex; gap: 14rem; }
.selo-cartao__quadro {
  width: 30rem;
  height: 30rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1rem solid;
  font-family: var(--font-mono);
  font-size: 14rem;
}