/* ============================
   🎨 Etiquetas de usuario
   ============================ */
.ulist_label {
  position: relative;
  z-index: 1;
  display: table;
  table-layout: fixed;
  width: 100%;
  font-family: Arial, sans-serif;
  font-weight: bold;
  padding: 6px 20px;
  text-shadow: 0 1px 2px #000;
  transition: all 0.15s ease;
  background: linear-gradient(to right, #f9d423, #ff4e50);
  box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.5);
  clip-path: polygon(10% 10%, 90% 10%, 100% 50%, 90% 90%, 10% 90%, 0 50%);
  color: white;
}

.ulist_label::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../default_images/flor.gif') top/cover;
  border-radius: 30px;
  opacity: 0.5;
}

.ulist_label_icon,
.ulist_label_data {
  display: table-cell;
  vertical-align: middle;
}

.ulist_label_icon {
  width: 30px;
  text-align: center;
}

.ulist_label_data {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  text-align: center;
  padding: 0 8px;
}

/* ============================
   🧑 Roles de usuario
   ============================ */
.ulist_onairdj  { background: linear-gradient(to bottom, #4589FF, #1E4BB8); border: 1px solid #4589FF; box-shadow: 0 2px 3px #0D1F44; color: #fff; }
.ulist_owner    { background: linear-gradient(to bottom, #FFD84D, #F5B800); border: 1px solid #F5B800; box-shadow: 0 2px 3px #664400; color: #fff; }
.ulist_waifu    { background: linear-gradient(to bottom, #FF66D1, #FC30BB); border: 1px solid #FC30BB; box-shadow: 0 2px 3px #B0207F; color: #fff; }
.ulist_sadmin   { background: linear-gradient(to bottom, #00E370, #008C4A); border: 1px solid #00E370; box-shadow: 0 2px 3px #004422; color: #fff; }
.ulist_admin    { background: linear-gradient(to bottom, #FF8F8A, #D94A45); border: 1px solid #FF8F8A; box-shadow: 0 2px 3px #732020; color: #fff; }
.ulist_mod      { background: linear-gradient(to bottom, #829CBD, #4A5E78); border: 1px solid #829CBD; box-shadow: 0 2px 3px #2A3644; color: #fff; }
.ulist_smanger  { background: linear-gradient(to bottom, #FFBC55, #D09832); border: 1px solid #FFE779; box-shadow: 0 2px 3px #44370D; color: #fff; }
.ulist_chamq    { background: linear-gradient(to bottom, #ec8853, #8c3618); border: 1px solid #a56326; box-shadow: 0 2px 3px #5d240d; color: #fff; }
.ulist_bot      { background: linear-gradient(to bottom, #1E90FF, #00AEEF); border: 1px solid #5BB8FF; box-shadow: 0 2px 3px #0A3D73; color: #fff; }
.ulist_vip      { background: linear-gradient(to bottom, #0098D4, #034A70); border: 1px solid #0098D4; box-shadow: 0 2px 3px #002C44; color: #fff; }
.ulist_brcaster { background: linear-gradient(to bottom, #E3147A, #9A0E52); border: 1px solid #E3147A; box-shadow: 0 2px 3px #4A0A26; color: #fff; }
.ulist_user     { background: linear-gradient(to bottom, #DFE9ED, #A8BCC4); border: 1px solid #DFE9ED; box-shadow: 0 2px 3px #6A7A80; color: #fff; }
.ulist_guest    { background: linear-gradient(to bottom, #E9F04A, #C7C846); border: 1px solid #F9FF7B; box-shadow: 0 2px 3px #44410C; color: #fff; }
.ulist_offline  { background: linear-gradient(to bottom, #828282, #4A4A4A); border: 1px solid #828282; box-shadow: 0 2px 3px #1A1A1A; color: #fff; }

/* ============================
   🖱 Scrollbar personalizado
   ============================ */
::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-track {
  border: 1px solid black;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
  background-color: #000;
}

/* ============================
   🔄 Animaciones
   ============================ */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(76, 201, 240, 0.6); }
  50%      { box-shadow: 0 0 24px rgba(76, 201, 240, 0.8); }
}

@keyframes rotate-center {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@keyframes heartbeat {
  from  { transform: scale(1); }
  10%   { transform: scale(.91); }
  17%   { transform: scale(.98); }
  33%   { transform: scale(.87); }
  45%   { transform: scale(1); }
}

.acav, .avatar_private, .avav, .chat_avatar {
  animation: rotate-center .6s ease-in-out both;
}

.orti {
  animation: heartbeat 1.5s ease-in-out infinite both;
}

/* ============================
   📊 Barra de progreso
   ============================ */
.progress_box {
  background-color: #222;
  padding: 2px;
}

.progress_bar {
  border-radius: 10px;
  background: linear-gradient(90deg, #ff6b6b, #ff8e53, #f1c40f, #1abc9c, #3498db, #9b59b6, #e74c3c);
  background-size: 200%;
  position: relative;
  overflow: hidden;
  animation: rainbow 6s linear infinite;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.progress_bar.animate {
  animation: slideIn 1.5s ease-in-out forwards, rainbow 6s linear infinite;
}

@keyframes slideIn {
  from { width: 0; }
  to   { width: var(--progress-width); }
}

@keyframes rainbow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.progress_bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.3) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.3) 75%,
    transparent 75%,
    transparent
  );
  background-size: 40px 40px;
}

/* ============================
   👤 Perfil de usuario
   ============================ */
.profile_avatar{
display: block;
margin: 0 auto;
}
.avatar_spin{
border-radius: 50%;
}
.state_profile{
width: 18px;
height: 18px;
right: 15px;
}
.profile_tinfo{
display: block;
padding: 10px;
}
.pdetails{
text-align: center;
}