/* ════════════════════════════════════════════════════════ */
/*                     PERFIL USUARIO                       */
/* ════════════════════════════════════════════════════════ */
.user-popup{
  position:fixed;
  left:var(--sidebar);
  bottom:0;
  z-index:400;
  display:none;
  width:240px;
  padding:18px;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:0 14px 0 0;
  box-shadow:8px -8px 40px rgba(0,0,0,.5);
  animation:slideUp .2s ease;}

.user-popup.show{display:block;}

/* ───────────────────────────────────────────── */
/*                 USER PHOTO                    */
/* ───────────────────────────────────────────── */
.up-photo{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto 10px;
  overflow:hidden;
  background:var(--acc);
  border-radius:50%;
  color:#fff;
  font-size:20px;
  font-weight:800;
  cursor:pointer;}

.up-photo-lbl{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.5);
  color:#fff;
  font-size:10px;
  opacity:0;
  transition:.15s;}

.up-photo:hover .up-photo-lbl{opacity:1;}

.up-photo input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;}

/* ───────────────────────────────────────────── */
/*                  USER INFO                    */
/* ───────────────────────────────────────────── */
.up-name{
  margin-bottom:3px;
  text-align:center;
  font-size:14px;
  font-weight:700;}

.up-role{
  margin-bottom:14px;
  text-align:center;
  color:var(--text2);
  font-size:11px;}

.up-sep{
  height:1px;
  margin:10px 0;
  background:var(--border);}

/* ───────────────────────────────────────────── */
/*                 USER STATUS                   */
/* ───────────────────────────────────────────── */
.up-status-title{
  margin-bottom:8px;
  color:var(--text3);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;}

.status-opt{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 9px;
  border-radius:8px;
  font-size:12px;
  cursor:pointer;
  transition:.12s;}

.status-opt:hover{background:var(--bg3);}

.status-opt.active{
  background:var(--bg3);
  font-weight:600;}

.s-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex-shrink:0;}