/* ===========================================================================
   DELTA IMPORTS · A CONTA DE QUEM ESTÁ LOGADO

   Duas peças que nascem juntas e não existem uma sem a outra: o menu do canto
   superior direito e a tela de perfil que ele abre.

   Elas ficam neste arquivo, e não em `components.css`, porque respondem a uma
   pergunta que nenhuma outra tela faz — «quem sou eu neste sistema, e como eu
   saio dele». Tudo em `components.css` é sobre a operação: cartão, tabela,
   gaveta, formulário de lançamento.

   Nada aqui inventa cor, medida ou raio: os tokens são os mesmos do resto do
   painel. O menu tem que parecer parte do cabeçalho, não um enxerto.
   =========================================================================== */

/* --------------------------------------------------------- o menu do usuário */

.user-chip-wrap { position: relative; }

/*
   O AVATAR VIROU BOTÃO, e precisa parecer clicável antes do clique.

   `.user-chip` já dá o arranjo (avatar + nome + cargo). O que falta a um
   `<button>` é desfazer a aparência de botão de formulário e ganhar o alvo de
   toque: a área inteira responde, e não só os 28px do avatar.
*/
.user-chip-btn {
  border: 1px solid transparent;
  border-radius: var(--rad-s);
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  height: 34px;
  padding: 0 6px 0 4px;
  gap: 7px;
}

.user-chip-btn:hover { background: var(--paper-2); border-color: var(--line); }
.user-chip-btn:focus-visible { outline: 2px solid var(--steel-2); outline-offset: 1px; }
.user-chip-btn[aria-expanded="true"] { background: var(--paper-3); border-color: var(--line-2); }

.user-chip-btn .user-chip-texto { text-align: left; }
.user-chip-btn .ico { color: var(--ink-mute); flex: none; }

.user-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: var(--z-tooltip);
  min-width: 236px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  box-shadow: var(--sh-2);
}

.user-menu-head { padding: 7px 9px 8px; }
.user-menu-nome { font-size: var(--fs-sm); font-weight: 650; color: var(--ink); line-height: 1.25; }

/* O e-mail é longo e não pode alargar o menu nem estourar a borda. */
.user-menu-email {
  font-size: var(--fs-xs); color: var(--ink-mute); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
}

.user-menu-sep { height: 1px; background: var(--line); margin: 5px 0; }

.user-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 9px;
  border: none; border-radius: var(--rad-s);
  background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); color: var(--ink-2);
}

.user-menu-item:hover { background: var(--paper-2); color: var(--ink); }
.user-menu-item:focus-visible { outline: 2px solid var(--steel-2); outline-offset: -2px; }

/*
   SAIR É A ÚNICA AÇÃO IRREVERSÍVEL DO MENU, e a cor diz isso — sem gritar.
   O vermelho vale para o hover: em repouso, um item vermelho no canto de todo
   dia acabaria virando paisagem.
*/
.user-menu-item.is-sair { color: var(--neg); font-weight: 600; }
.user-menu-item.is-sair:hover { background: var(--neg-bg); color: var(--neg); }

.user-menu-item:disabled { opacity: .6; cursor: default; }

.user-menu-aviso {
  margin: 6px 4px 2px;
  padding: 8px 9px;
  border-radius: var(--rad-s);
  background: var(--neg-bg);
  color: var(--neg);
  font-size: var(--fs-xs); line-height: 1.45;
}

/* ------------------------------------------------------- a tela de perfil */

/*
   O VÉU ESCURECE, ao contrário do véu do pop-up de coluna.

   Aquele existe para se ler uma frase SEM tirar o olho da tabela. Este é uma
   parada: há formulário, há senha, e há uma alteração que pode ser recusada.
   Escurecer o resto diz, sem escrever, que a tela atrás pode esperar.
*/
.perfil-veu {
  position: fixed; inset: 0; z-index: var(--z-tooltip);
  background: rgba(3, 21, 49, .42);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 16px 32px;
  overflow-y: auto;
}

.perfil-tela {
  width: min(600px, 100%);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--rad-l);
  box-shadow: var(--sh-3);
  overflow: hidden;
}

.perfil-head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.perfil-eyebrow {
  font-size: var(--fs-micro); letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 650;
}

.perfil-title { font-size: var(--fs-lg); font-weight: 660; letter-spacing: -.4px; margin-top: 2px; }
.perfil-close { margin-left: auto; flex: none; }

.perfil-corpo { padding: var(--sp-5); }

.perfil-bloco { margin-bottom: var(--sp-5); }

.perfil-bloco-titulo {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--sp-2);
}

.perfil-linha {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: 9px 0; border-bottom: 1px solid var(--line);
}

.perfil-linha:last-child { border-bottom: none; }
.perfil-linha-rotulo { font-size: var(--fs-sm); color: var(--ink-mute); flex: none; width: 152px; }

.perfil-linha-valor {
  font-size: var(--fs-base); font-weight: 550; color: var(--ink);
  overflow-wrap: anywhere;
}

.perfil-empresas { display: flex; flex-direction: column; gap: 1px; }

.perfil-empresa {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: 8px 0; border-bottom: 1px solid var(--line);
}

.perfil-empresa:last-child { border-bottom: none; }
.perfil-empresa-nome { font-size: var(--fs-base); font-weight: 550; color: var(--ink); }
.perfil-empresa-doc { font-size: var(--fs-xs); color: var(--ink-mute); text-align: right; }

.perfil-nota {
  font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55;
  margin: var(--sp-3) 0 0;
}

.perfil-nota.is-curta { margin-top: var(--sp-2); color: var(--ink-mute); }

.perfil-vazio {
  font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55;
  margin: 0; padding: var(--sp-3); border-radius: var(--rad-s);
  background: var(--warn-bg);
}

.perfil-acoes { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }

/* ------------------------------------------------------------ formulários */

.perfil-form { display: block; }
.perfil-form-head { margin-bottom: var(--sp-4); }
.perfil-form-title { font-size: var(--fs-md); font-weight: 650; color: var(--ink); }

.perfil-campo { display: block; margin-bottom: var(--sp-4); }

.perfil-rotulo {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-soft); margin-bottom: 5px;
}

.perfil-input {
  display: block; width: 100%; height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--rad-s);
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--fs-base);
}

.perfil-input:focus { outline: none; border-color: var(--steel-2); box-shadow: 0 0 0 3px var(--info-bg); }

.perfil-dica { display: block; font-size: var(--fs-xs); color: var(--ink-mute); margin-top: 4px; }

/*
   A RECUSA FICA NO CAMPO, e a borda muda junto.

   Uma mensagem embaixo, sozinha, obriga a ler para descobrir qual campo
   errou. Com a borda marcada, o olho encontra o campo antes de ler a frase —
   e a frase explica o que corrigir.
*/
.perfil-campo.tem-erro .perfil-input { border-color: var(--neg-2); background: #fffbfb; }

.perfil-erro {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  color: var(--neg); margin-top: 5px; line-height: 1.45;
}

.perfil-erro-geral {
  padding: 10px 12px; border-radius: var(--rad-s);
  background: var(--neg-bg); color: var(--neg);
  font-size: var(--fs-sm); line-height: 1.5;
  margin-bottom: var(--sp-4);
}

.perfil-recado {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px 12px; border-radius: var(--rad-s);
  background: var(--pos-bg); color: var(--pos);
  font-size: var(--fs-sm); font-weight: 600;
  margin-bottom: var(--sp-4);
}

/* ------------------------------------------------------------- tela estreita */

@media (max-width: 640px) {
  .perfil-veu { padding: 0; }
  .perfil-tela { width: 100%; min-height: 100vh; border: none; border-radius: 0; }
  .perfil-linha { flex-direction: column; gap: 2px; }
  .perfil-linha-rotulo { width: auto; }
  .user-menu { min-width: 214px; }
}