/* ============================================================
   /css/perfil.css
   Estilos da tela de edição de perfil do usuário.
   Depende das variáveis de global.css.
   ============================================================ */

/* ── SCROLL INTERNO ─────────────────────────────────────────── */
.perfil-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 28px 36px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}
.perfil-scroll::-webkit-scrollbar { width: 4px; }
.perfil-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
  border-radius: 4px;
}

/* ── GRID PRINCIPAL ─────────────────────────────────────────── */
.perfil-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 12px;
}

/* ── CARD BASE ──────────────────────────────────────────────── */
.perfil-card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.perfil-card:last-child { margin-bottom: 0; }

.perfil-card-titulo {
  font-size: 14px;
  font-weight: 600;
  color: #dde6ff;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.perfil-card-titulo svg {
  color: var(--roxo);
  opacity: .8;
  flex-shrink: 0;
}

/* ── AVATAR GRANDE ──────────────────────────────────────────── */
.perfil-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.perfil-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  object-fit: cover;
  background: #11183a;
  box-shadow: 0 0 0 4px rgba(91,106,245,.15);
}
.perfil-avatar-nome {
  font-size: 16px;
  font-weight: 600;
  color: #e8eeff;
  letter-spacing: -.2px;
}
.perfil-avatar-email {
  font-size: 12px;
  color: var(--texto-dim);
  margin-top: -6px;
}
.perfil-avatar-dica {
  font-size: 11px;
  color: rgba(139,151,248,.7);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── GRUPOS DE FORM ─────────────────────────────────────────── */
.perfil-grupo {
  margin-bottom: 16px;
}
.perfil-grupo:last-child { margin-bottom: 0; }

.perfil-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(180,195,240,.7);
  margin-bottom: 7px;
}
.perfil-label-badge {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.perfil-label-badge.bloqueado {
  background: rgba(255,255,255,.06);
  color: rgba(160,175,220,.4);
  border: 1px solid rgba(255,255,255,.07);
}
.perfil-label-badge.pendente {
  background: rgba(255,204,0,.1);
  color: var(--amarelo);
  border: 1px solid rgba(255,204,0,.2);
}

/* Input base */
.perfil-input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #e8eeff;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.perfil-input::placeholder { color: rgba(130,145,190,.4); }
.perfil-input:focus {
  border-color: rgba(91,106,245,.55);
  background: rgba(91,106,245,.05);
  box-shadow: 0 0 0 3px rgba(91,106,245,.1);
}

/* Campo bloqueado */
.perfil-input:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: rgba(255,255,255,.02);
}

/* Input com ícone (senha) */
.perfil-input-wrap {
  position: relative;
}
.perfil-input-wrap .perfil-input {
  padding-right: 42px;
}
.perfil-toggle-senha {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(160,175,220,.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color .15s;
}
.perfil-toggle-senha:hover { color: #dde6ff; }

/* Dica abaixo do campo */
.perfil-campo-dica {
  font-size: 11px;
  color: rgba(160,175,220,.45);
  margin-top: 5px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.perfil-campo-dica svg { flex-shrink: 0; margin-top: 1px; }

/* ── BARRA DE FORÇA DE SENHA ────────────────────────────────── */
.perfil-senha-forca {
  margin-top: 8px;
  display: none;
}
.perfil-senha-forca.visivel { display: block; }
.perfil-senha-barra-bg {
  height: 3px;
  background: rgba(255,255,255,.07);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 5px;
}
.perfil-senha-barra {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width .35s cubic-bezier(.4,0,.2,1), background .35s;
}
.perfil-senha-barra.nivel-1 { width: 25%;  background: var(--vermelho); }
.perfil-senha-barra.nivel-2 { width: 50%;  background: #ff7b2e; }
.perfil-senha-barra.nivel-3 { width: 75%;  background: var(--amarelo); }
.perfil-senha-barra.nivel-4 { width: 100%; background: var(--verde); }
.perfil-senha-texto {
  font-size: 11px;
  color: var(--texto-dim);
  transition: color .3s;
}
.perfil-senha-texto.nivel-1 { color: var(--vermelho); }
.perfil-senha-texto.nivel-2 { color: #ff7b2e; }
.perfil-senha-texto.nivel-3 { color: var(--amarelo); }
.perfil-senha-texto.nivel-4 { color: var(--verde); }

/* ── CONTAS SOCIAIS VINCULADAS ──────────────────────────────── */
.perfil-social-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.perfil-social-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  transition: background .18s, border-color .18s;
}
.perfil-social-item:hover { background: rgba(255,255,255,.05); }

/* Ícone social 36×36 */
.perfil-social-icone {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.perfil-social-icone.google  { background: rgba(234,67,53,.12);   border: 1px solid rgba(234,67,53,.25);   }
.perfil-social-icone.github  { background: rgba(255,255,255,.06);  border: 1px solid rgba(255,255,255,.12); }
.perfil-social-icone.twitter { background: rgba(0,0,0,.2);         border: 1px solid rgba(255,255,255,.1);  }

/* Info da conta (nome ou status) */
.perfil-social-info { flex: 1; min-width: 0; }
.perfil-social-nome {
  font-size: 13px;
  font-weight: 500;
  color: #dde6ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perfil-social-status {
  font-size: 11.5px;
  color: var(--texto-dim);
  margin-top: 2px;
}
.perfil-social-status.conectado { color: var(--verde); }
.perfil-social-status.desconectado { color: rgba(160,175,220,.4); }

/* Botão de vincular/desvincular */
.perfil-social-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s, color .18s, border-color .18s, transform .15s cubic-bezier(.34,1.56,.64,1);
}
.perfil-social-btn.vincular {
  background: var(--roxo-dim);
  border: 1px solid rgba(91,106,245,.3);
  color: #8b97f8;
}
.perfil-social-btn.vincular:hover {
  background: rgba(91,106,245,.22);
  border-color: rgba(91,106,245,.5);
  transform: scale(1.04);
}
.perfil-social-btn.desvincular {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(160,175,220,.5);
}
.perfil-social-btn.desvincular:hover {
  background: rgba(255,69,58,.1);
  border-color: rgba(255,69,58,.25);
  color: var(--vermelho);
}

/* ── BOTÃO SALVAR ────────────────────────────────────────────── */
.perfil-btn-salvar {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: none;
  background: var(--roxo);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 20px;
  transition: background .2s, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  box-shadow: 0 4px 18px rgba(91,106,245,.3);
}
.perfil-btn-salvar:hover {
  background: #6e7dff;
  transform: translateY(-1px);
  box-shadow: 0 7px 24px rgba(91,106,245,.45);
}
.perfil-btn-salvar:active { transform: scale(.98); }
.perfil-btn-salvar:disabled {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ── ZONA DE PERIGO ─────────────────────────────────────────── */
.perfil-zona-perigo {
  background: rgba(255,69,58,.05);
  border: 1px solid rgba(255,69,58,.18);
  border-radius: 14px;
  padding: 20px 24px;
}
.perfil-zona-perigo-titulo {
  font-size: 13px;
  font-weight: 600;
  color: #ff8a83;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.perfil-zona-perigo-desc {
  font-size: 12.5px;
  color: rgba(255,160,155,.5);
  line-height: 1.55;
  margin-bottom: 16px;
}
.perfil-btn-excluir-conta {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 9px;
  border: 1px solid rgba(255,69,58,.3);
  background: rgba(255,69,58,.08);
  color: var(--vermelho);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .15s cubic-bezier(.34,1.56,.64,1);
}
.perfil-btn-excluir-conta:hover {
  background: rgba(255,69,58,.16);
  border-color: rgba(255,69,58,.5);
  transform: scale(1.02);
}

/* ── MENSAGEM INLINE ─────────────────────────────────────────── */
.perfil-mensagem {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 9px;
  font-size: 12.5px;
  line-height: 1.4;
  margin-top: 12px;
}
.perfil-mensagem.erro    { display:flex; background:rgba(255,69,58,.1);  border:1px solid rgba(255,69,58,.25);  color:#ff8a83; }
.perfil-mensagem.sucesso { display:flex; background:rgba(52,216,99,.1);  border:1px solid rgba(52,216,99,.25);  color:#5de88a; }
.perfil-mensagem.info    { display:flex; background:rgba(91,106,245,.1); border:1px solid rgba(91,106,245,.25); color:#8b97f8; }
.perfil-mensagem svg { flex-shrink: 0; }

/* ── MODAL EXCLUIR CONTA ─────────────────────────────────────── */
.perfil-modal-excluir.modal-overlay { z-index: 300; }

/* ── PERFIL NO SIDEBAR — CURSOR POINTER ─────────────────────── */
.user-profile.clicavel {
  cursor: pointer;
  position: relative;
}
.user-profile.clicavel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: border-color .18s;
}
.user-profile.clicavel:hover::after {
  border-color: rgba(91,106,245,.4);
}
/* Indicador de edição (ícone lápis) que aparece no hover */
.user-profile-edit-hint {
  margin-left: auto;
  color: rgba(160,175,220,.3);
  flex-shrink: 0;
  transition: color .18s;
}
.user-profile.clicavel:hover .user-profile-edit-hint {
  color: rgba(139,151,248,.7);
}

/* ── RESPONSIVIDADE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .perfil-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .perfil-scroll { padding: 14px 16px 28px; }
}