/* ===============================
   USER TOPBAR — GLOBAL
   Estilo premium / elegante
================================ */

.user-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:12px;                     /* 🔥 AIRE ENTRE BLOQUES */
  padding:12px 16px;            /* 🔥 MÁS RESPIRACIÓN */

  width:100%;
  background:transparent;
  border-bottom:1px solid rgba(216,179,74,.35);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  color:#fff;
  font-family:Arial, Helvetica, sans-serif;
  letter-spacing:.06em;

  border-radius:14px 14px 0 0;
  box-sizing:border-box;
}

/* ===============================
   CONTENEDOR IZQUIERDO
================================ */

.user-info{
  display:flex;
  align-items:center;
  gap:12px;                     /* 🔥 SEPARACIÓN REAL */
  min-width:0;
}

/* ===============================
   CÁPSULAS (usuario / saldo)
================================ */

.user-info > span{
  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:8px 16px;             /* 🔥 MÁS PADDING */
  border:1px solid rgba(216,179,74,.55);
  border-radius:999px;
  background:rgba(0,0,0,.4);

  line-height:1.15;             /* 🔥 EVITA CRECIMIENTO RARO */
  white-space:nowrap;
}

/* ===============================
   USUARIO
================================ */

#userUsername{
  color:#f1d27a;
  font-size:17px;
  font-weight:700;

  max-width:130px;              /* 🔥 UN POCO MÁS DE AIRE */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ===============================
   SALDO
================================ */

#userSaldo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;

  padding:8px 16px;
  flex-shrink:0;
}

#userSaldo small{
  font-size:10px;
  letter-spacing:.14em;
  opacity:.65;
  white-space:nowrap;
}

#userSaldo b{
  font-size:17px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
}

/* ===============================
   BOTÓN RECARGAR
================================ */

.btn-recargar{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:38px;              /* 🔥 ALTURA CONSISTENTE */
  padding:8px 18px;

  background:linear-gradient(
    to bottom,
    rgb(0, 234, 255),
    rgba(0, 217, 255, 0.7)
  );

  color:#000;
  border:1px solid rgba(0,0,0,.65);
  border-radius:999px;

  font-weight:700;
  letter-spacing:.08em;
  cursor:pointer;

  box-shadow:
    inset 0 0 0 1px rgba(255,215,128,.12),
    0 0 10px rgba(216,179,74,.18);

  transition:all .25s ease;
  flex-shrink:0;
}

/* ===============================
   RESPONSIVE
================================ */

@media (max-width:420px){
  .user-topbar{
    gap:8px;
    padding:10px 12px;
  }

  #userUsername{ font-size:16px }
  #userSaldo b{ font-size:16px }

  .user-info > span{
    padding:6px 12px;
  }

  .btn-recargar{
    padding:6px 14px;
    min-height:34px;
    font-size:.85rem;
  }
}

/* ===============================
   TRANSICIÓN SUAVE — USER TOPBAR
   (una sola vez, limpia)
================================ */

body.loading .user-topbar{
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
}

body.ready .user-topbar{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .45s ease,
    transform .45s ease;
}

/* ===============================
   GLOW RECARGA SALDO
================================ */
#userSaldo {
  transition: box-shadow 0.35s ease, transform 0.3s ease;
}

#userSaldo.saldo-recargado {
  box-shadow:
    0 0 6px rgba(0, 240, 255, 0.6),
    0 0 14px rgba(0, 200, 255, 0.8),
    0 0 26px rgba(0, 180, 255, 1);
  transform: scale(1.06);
}