/* ==========================================================================
   FATURAMENTO — "Minha assinatura" e o caixa do backoffice (fatia F31).
   Arquivo próprio, na convenção numerada do design system: nenhuma fatia
   edita 03_componentes.css no meio.
   ========================================================================== */

.assinatura-resumo {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: var(--esp-5);
}

.assinatura-destaque {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-elevado);
}

.assinatura-destaque__rotulo {
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.assinatura-destaque__valor {
  font-size: var(--texto-xl);
  font-weight: var(--peso-semi);
}

.assinatura-destaque--atencao { border-color: var(--sgp-perigo); }
.assinatura-destaque--atencao .assinatura-destaque__valor { color: var(--sgp-perigo); }

/* O bloco de pagar: o PIX copia-e-cola e a linha digitável do boleto. */
.pagamento-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
}

.pagamento-codigo {
  width: 100%;
  min-height: 5.5rem;
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo-elevado);
  font-family: var(--fonte-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--texto-sm);
  word-break: break-all;
  resize: vertical;
}

.pagamento-linha-digitavel {
  font-family: var(--fonte-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--texto-md);
  letter-spacing: 0.02em;
}

.pagamento-aviso {
  min-height: 1.2em;
  font-size: var(--texto-sm);
  color: var(--sgp-sucesso);
}

/* Faixa do gateway simulado: quem olha a tela precisa saber que aquele PIX
   não é dinheiro de verdade. */
.faixa-sandbox {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  margin-bottom: var(--esp-4);
  border: 1px dashed var(--sgp-atencao);
  border-radius: var(--raio-md);
  background: var(--sgp-atencao-suave);
  color: var(--sgp-atencao);
  font-size: var(--texto-sm);
}

/* Cartões de plano na tela de troca. */
.planos-grade {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.plano-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-elevado);
}

.plano-cartao--atual { border-color: var(--cor-acao); box-shadow: 0 0 0 1px var(--cor-acao); }

.plano-cartao__preco {
  font-size: var(--texto-xl);
  font-weight: var(--peso-semi);
}

.plano-cartao__conta {
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.plano-cartao__modulos {
  margin: 0;
  padding-left: var(--esp-4);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}