/* ============================================================================
   MINHA CONTA

   A tela onde a pessoa resolve o que é dela. Reaproveita a casca de cadastro —
   `wms-cadastro` e os quatro estados — e acrescenta só o que é próprio daqui:
   as abas de seção, o destaque da pendência e a separação entre o que se lê e
   o que se edita.

   Nenhum valor literal: tudo por token do design system.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   PENDÊNCIA DE CADASTRO

   Fica acima das abas porque é a única coisa da tela que pede ação de quem
   chegou. Cor de aviso, e não de erro: não há nada quebrado — falta um dado,
   e quem o informa é a própria pessoa.
   ---------------------------------------------------------------------------- */
.wms-conta__pendencia {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espaco-3) var(--espaco-4);
  align-items: start;
  margin-bottom: var(--espaco-5);
  padding: var(--espaco-4);
  border: var(--borda-largura) solid var(--cor-aviso);
  border-radius: var(--raio-md);
  background: var(--cor-aviso-fundo);
}

.wms-conta__pendencia-icone {
  grid-row: span 2;
  font-size: var(--fonte-tam-2xl);
  color: var(--cor-aviso);
}

.wms-conta__pendencia-titulo {
  margin: 0;
  font-size: var(--fonte-tam-md);
  font-weight: var(--fonte-peso-forte);
  color: var(--cor-texto);
}

.wms-conta__pendencia-apoio {
  margin: var(--espaco-1) 0 0;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

.wms-conta__pendencia-acao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  align-items: flex-end;
  grid-column: 2;
}

/* ----------------------------------------------------------------------------
   ABAS DAS SEÇÕES

   Botões, e não links: trocar de seção não muda de endereço, e um link que não
   navega confunde quem usa leitor de tela e quem abre em nova aba.
   ---------------------------------------------------------------------------- */
.wms-conta__abas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1);
  margin-bottom: var(--espaco-5);
  border-bottom: var(--borda-largura) solid var(--cor-borda);
}

.wms-conta__aba {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: var(--alvo-min);
  padding: var(--espaco-2) var(--espaco-4);
  border: none;
  /* A borda inferior existe sempre, transparente: sem ela o rótulo saltaria um
     pixel ao virar ativo, e o salto aparece como tremor na troca de aba. */
  border-bottom: var(--espaco-1) solid transparent;
  background: transparent;
  color: var(--cor-texto-secundario);
  font-family: inherit;
  font-size: var(--fonte-tam-md);
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao),
    background-color var(--transicao);
}

.wms-conta__aba:hover {
  color: var(--cor-primaria-600);
  background: var(--cor-primaria-050);
}

.wms-conta__aba--ativa {
  border-bottom-color: var(--cor-primaria-600);
  color: var(--cor-primaria-700);
  font-weight: var(--fonte-peso-forte);
}

/* ----------------------------------------------------------------------------
   SEÇÃO
   ---------------------------------------------------------------------------- */
.wms-conta__secao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-5);
  animation: wms-conta-entra var(--transicao-media);
}

@keyframes wms-conta-entra {
  from {
    opacity: 0;
    transform: translateY(var(--espaco-2));
  }
}

.wms-conta__secao-topo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  align-items: center;
  justify-content: space-between;
}

.wms-conta__subtitulo {
  margin: 0;
  font-size: var(--fonte-tam-lg);
  font-weight: var(--fonte-peso-forte);
  color: var(--cor-texto);
}

.wms-conta__apoio {
  margin: 0;
  max-width: 70ch;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

.wms-conta__vazio {
  margin: 0;
  padding: var(--espaco-5);
  border: var(--borda-largura) dashed var(--cor-borda);
  border-radius: var(--raio-md);
  color: var(--cor-texto-secundario);
  text-align: center;
}

/* ----------------------------------------------------------------------------
   LEITURA E EDIÇÃO

   O bloco de leitura tem fundo próprio e o cadeado no topo: é o que separa
   visualmente o que a pessoa não muda do que ela muda, sem depender de ela ler
   o aviso. Campo desabilitado não serve aqui — ele parece editável quebrado.
   ---------------------------------------------------------------------------- */
.wms-conta__leitura {
  padding: var(--espaco-4);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
}

.wms-conta__leitura-aviso {
  display: flex;
  gap: var(--espaco-2);
  align-items: center;
  margin: 0 0 var(--espaco-4);
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

.wms-conta__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--espaco-4);
  margin: 0;
}

.wms-conta__campos dt {
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wms-conta__campos dd {
  margin: var(--espaco-1) 0 0;
  font-size: var(--fonte-tam-md);
  color: var(--cor-texto);
}

.wms-conta__editavel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-4);
  align-items: flex-end;
}

/* ----------------------------------------------------------------------------
   CARTÃO CENTRADO

   Seção de poucos campos — senha e preferências — não ocupa a largura da tela.
   Estirada, o rótulo fica longe do campo e o olho percorre um vão vazio entre os
   dois; a coluna estreita e centrada mantém rótulo, campo e ação no mesmo alcance.
   ---------------------------------------------------------------------------- */
.wms-conta__centro {
  display: flex;
  justify-content: center;
}

.wms-conta__cartao {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  width: 100%;
  max-width: 32rem;
  padding: var(--espaco-5);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
}

.wms-conta__cartao-topo {
  display: flex;
  gap: var(--espaco-3);
  align-items: center;
}

.wms-conta__preferencias {
  gap: var(--espaco-5);
}

.wms-conta__formulario {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

/* Divergência entre a senha e a confirmação. Fica junto do campo, e não no topo da aba: erro de
   digitação se corrige onde ele foi cometido. */
.wms-conta__critica {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-erro);
}

/* O formulário de senha sai do circuito por POST, então o botão é `<button>` nativo
   com a aparência do Radzen — o componente não envia formulário HTML. O tamanho
   acompanha o dos diálogos: ação de fechamento tem alvo generoso. */
.wms-conta__enviar {
  box-sizing: border-box;
  display: inline-flex;
  gap: var(--espaco-2);
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: var(--alvo-min);
  padding: var(--espaco-3) var(--espaco-5);
  font-size: var(--fonte-tam-md);
  cursor: pointer;
}

.wms-conta__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-4);
}

/* ----------------------------------------------------------------------------
   LISTAS DE VÍNCULO, SESSÃO E HISTÓRICO

   Uma forma só para as três: são a mesma leitura — um símbolo, duas linhas de
   texto e um estado à direita. Três estilos diferentes fariam a pessoa reaprender
   a ler a cada aba.
   ---------------------------------------------------------------------------- */
.wms-conta__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wms-conta__item {
  display: flex;
  gap: var(--espaco-3);
  align-items: center;
  min-height: var(--alvo-min);
  padding: var(--espaco-3) var(--espaco-4);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-superficie);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.wms-conta__item:hover {
  border-color: var(--cor-primaria-200);
  box-shadow: var(--sombra-1);
}

.wms-conta__item--inativo {
  opacity: 0.6;
}

/* Tentativa falha e bloqueio: a pessoa precisa reconhecer de relance o acesso que
   não foi dela, sem ler evento por evento. */
.wms-conta__item--alerta {
  border-color: var(--cor-aviso);
  background: var(--cor-aviso-fundo);
}

@media (prefers-reduced-motion: reduce) {
  .wms-conta__secao {
    animation: none;
  }
}