button.usm-author-avatar-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  box-shadow:none;
  border-radius:50%;
}

.usm-author-avatar-trigger:focus{
  background:transparent;
}

.usm-inline-level-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.18);
  background:rgba(37,99,235,.08);
  color:var(--vm-brand,#1e293b);
  font-size:12px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:none;
  white-space:nowrap;
}

.usm-inline-level-chip:hover{
  background:rgba(37,99,235,.12);
}

.usm-inline-level-chip:focus{
  background:rgba(37,99,235,.08);
}

.usm-user-card-shell[hidden]{
  display:none !important;
}

.usm-user-card-shell{
  position:absolute;
  width:min(340px, calc(100vw - 24px));
  background:#fff;
  border:1px solid rgba(148,163,184,.45);
  border-radius:18px;
  box-shadow:0 24px 56px rgba(15,23,42,.20);
  z-index:220;
  overflow:hidden;
}

.usm-user-card-shell.vm-dropdown-below::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:var(--vm-arrow-x, 24px);
  transform:translateX(-50%);
  border-width:6px;
  border-style:solid;
  border-color:transparent transparent #fff transparent;
}

.usm-user-card-shell.vm-dropdown-above::before{
  content:"";
  position:absolute;
  top:100%;
  left:var(--vm-arrow-x, 24px);
  transform:translateX(-50%);
  border-width:6px;
  border-style:solid;
  border-color:#fff transparent transparent transparent;
}

.usm-user-card-body{
  padding:18px;
}

.usm-user-card-panel{
  display:grid;
  gap:16px;
}

.usm-user-card-panel__head{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:12px;
  align-items:center;
}

.usm-user-card-panel__avatar-link{
  display:block;
}

.usm-user-card-panel__avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

.usm-user-card-panel__identity{
  min-width:0;
}

.usm-user-card-panel__name{
  display:block;
  color:var(--vm-brand,#1e293b);
  font-size:16px;
  font-weight:700;
  line-height:1.25;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.usm-user-card-panel__name:hover{
  color:var(--vm-link,#045cb4);
  text-decoration:underline;
}

.usm-user-card-panel__handle{
  margin-top:3px;
  color:#64748b;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.usm-user-card-panel__level{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.usm-user-card-panel__level-chip{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(37,99,235,.08);
  color:var(--vm-brand,#1e293b);
  font-size:13px;
  font-weight:700;
}

.usm-user-card-panel__xp{
  color:#64748b;
  font-size:13px;
  font-weight:600;
}

.usm-user-card-panel__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:6px 10px;
  border-radius:12px;
  background:var(--vm-soft,#f8fafc);
  color:var(--vm-brand,#1e293b);
}

.usm-user-card-panel__badge-icon{
  width:18px;
  height:18px;
  color:var(--vm-accent,#2563eb);
  flex:0 0 auto;
}

.usm-user-card-panel__badge-icon svg{
  display:block;
  width:18px;
  height:18px;
}

.usm-user-card-panel__badge-text{
  font-size:13px;
  font-weight:700;
}

/* Badge PNG */

.usm-user-card-panel__badge-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-grid;
    place-items: center;
    overflow: visible;
}

.usm-user-card-panel__badge-icon .usm-gamification-badge-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 5px 8px rgba(15, 23, 42, 0.13));
}

/* Estadísticas */

.usm-user-card-panel__stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}

.usm-user-card-panel__stat{
  display:grid;
  gap:4px;
  padding:12px 10px;
  border-radius:14px;
  background:var(--vm-soft,#f8fafc);
  text-align:center;
}

.usm-user-card-panel__stat strong{
  color:var(--vm-brand,#1e293b);
  font-size:16px;
  line-height:1;
}

.usm-user-card-panel__stat span{
  color:#64748b;
  font-size:12px;
  line-height:1.2;
}

.usm-user-card-panel__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.usm-user-card-panel__action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border-radius:999px;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}

.usm-user-card-panel__action--primary{
  background:var(--vm-brand,#1e293b);
  color:#fff;
}
.usm-user-card-panel__action--primary:focus{
  color: #fff !important;
}
.usm-user-card-panel__action--primary:hover{
  opacity: .94;
  color: #fff !important;
  text-decoration:none !important;
}

.usm-user-card-panel__action--ghost{
  background:#fff;
  border:1px solid var(--vm-border,#e5e7eb);
  color:var(--vm-brand,#1e293b);
}
.usm-user-card-panel__action--ghost:focus{
  border:1px solid var(--vm-border,#e5e7eb) !important;
  color:var(--vm-brand,#1e293b);
}
.usm-user-card-panel__action--ghost:hover{
  background:var(--vm-soft,#f8fafc);
  color:var(--vm-brand,#1e293b);
  text-decoration:none !important;
}

.usm-user-card-skeleton{
  display:grid;
  gap:14px;
}

.usm-user-card-skeleton__head{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:12px;
  align-items:center;
}

.usm-user-card-skeleton__avatar,
.usm-user-card-skeleton__lines span,
.usm-user-card-skeleton__chip,
.usm-user-card-skeleton__stats span{
  background:#e5e7eb;
  animation:usmUserCardPulse 1.2s ease-in-out infinite;
}

.usm-user-card-skeleton__avatar{
  width:56px;
  height:56px;
  border-radius:50%;
}

.usm-user-card-skeleton__lines{
  display:grid;
  gap:8px;
}

.usm-user-card-skeleton__lines span:first-child{
  width:75%;
  height:14px;
  border-radius:8px;
}

.usm-user-card-skeleton__lines span:last-child{
  width:48%;
  height:12px;
  border-radius:8px;
}

.usm-user-card-skeleton__chip{
  width:58%;
  height:30px;
  border-radius:999px;
}

.usm-user-card-skeleton__stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}

.usm-user-card-skeleton__stats span{
  height:58px;
  border-radius:14px;
}

.usm-user-card-error{
  color:#b32d2e;
  font-size:14px;
  line-height:1.5;
}

@keyframes usmUserCardPulse{
  0%{opacity:.65}
  50%{opacity:.35}
  100%{opacity:.65}
}

@media (max-width: 768px){
  .usm-user-card-shell{
    width:min(320px, calc(100vw - 20px));
  }

  .usm-user-card-body{
    padding:16px;
  }
}