/* ============================================================
   MEU PERFIL — página do usuário logado (abas Perfil · Meus dados ·
   Segurança · Solicitações da equipe). Usa as peças de PÁGINA
   (.rotulo-secao, .campo, cards) — nunca as da gaveta (.painel-secao
   / .linha-info), que são do painel lateral.
   ============================================================ */

/* cada aba empilha suas seções, em largura de leitura confortável */
.perfil-aba {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 720px;
}

.perfil-secao {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* "Ler os termos" (seção Privacidade): do tamanho do texto, à esquerda */
.perfil-ler-termos {
  align-self: flex-start;
}

/* ---------- cartão de identificação (topo da aba Perfil) ---------- */
.perfil-cartao {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 56px;
  padding: 16px;
  border-radius: var(--raio-medio);
  background-color: var(--fundo-suave);
}

.perfil-cartao-pessoa {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.perfil-cartao-grad {
  font-size: 16px;
  color: var(--texto-suave);
}

.perfil-cartao-nome {
  font-size: 22px;
  font-weight: 600;
  color: var(--texto-forte);
}

.perfil-cartao-lotacao {
  font-size: 12px;
  color: var(--texto-suave);
}

/* ---------- grade de dados em leitura (rótulo em cima, valor embaixo) ----------
   O equivalente de PÁGINA da .linha-info da gaveta: sem divisórias, em colunas. */
.perfil-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.perfil-dado {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.perfil-dado-rotulo {
  font-size: 11px;
  color: var(--texto-suave);
}

.perfil-dado-valor {
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-forte);
  overflow-wrap: break-word;
}

/* ---------- formulário (aba Meus dados e Segurança) ----------
   Coluna única, rótulo acima do campo: é o que se preenche mais rápido. */
.perfil-formulario {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}

/* aviso de que a correção depende de aprovação */
.perfil-nota {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border-radius: var(--raio-medio);
  background-color: var(--fundo-suave);
  font-size: 12px;
  color: var(--texto-suave);
}

/* variante: há pedido esperando decisão do administrador */
.perfil-nota--pendente {
  background-color: var(--alerta-fundo);
  color: var(--alerta);
}

.perfil-nota-icone {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--texto-fraco);
}

.perfil-nota--pendente .perfil-nota-icone {
  color: var(--alerta);
}

/* rodapé de ações do formulário */
.perfil-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 400px;
}