/* Compás Academy · Sidebar user card v29.5
   Corrige la colisión con academy-premium.css.
   La tarjeta debe permanecer azul en reposo, hover, foco y selección. */

.sidebar .sidebar-bottom{
  left:14px!important;
  right:14px!important;
  bottom:18px!important;
}

.sidebar .user-mini{
  position:relative!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) 12px!important;
  align-items:center!important;
  gap:9px!important;
  min-height:72px!important;
  padding:10px 11px!important;
  border-radius:16px!important;
  color:#F7F9FC!important;
  background:linear-gradient(145deg,rgba(18,53,91,.96),rgba(44,83,126,.92))!important;
  border:1px solid rgba(247,249,252,.15)!important;
  box-shadow:0 12px 28px rgba(5,22,43,.22)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  overflow:hidden!important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease!important;
}

.sidebar .user-mini:hover{
  background:linear-gradient(145deg,rgba(22,62,103,.98),rgba(54,94,139,.96))!important;
  border-color:rgba(230,196,0,.42)!important;
  transform:translateY(-1px)!important;
}

.sidebar .user-mini::after{
  content:'›'!important;
  display:grid!important;
  place-items:center!important;
  width:12px!important;
  height:18px!important;
  color:#E6C400!important;
  font-size:1rem!important;
  font-weight:600!important;
  line-height:1!important;
  opacity:.92!important;
}

.sidebar .user-mini > img{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
  background:#12355B!important;
  border:1px solid rgba(247,249,252,.24)!important;
  box-shadow:0 5px 14px rgba(5,22,43,.18)!important;
}

.sidebar .user-mini > img[data-academy-avatar-fallback='true']{
  display:none!important;
}

.sidebar .user-mini-avatar-fallback{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#315F97,#183B70)!important;
  color:#F7F9FC!important;
  border:1px solid rgba(247,249,252,.28)!important;
  box-shadow:0 5px 14px rgba(5,22,43,.18)!important;
  font-family:'IBM Plex Sans','Inter',ui-sans-serif,system-ui,sans-serif!important;
  font-size:.72rem!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
  line-height:1!important;
  text-transform:uppercase!important;
}

.sidebar .user-mini > span:not(.user-mini-avatar-fallback){
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:3px!important;
  min-width:0!important;
  margin:0!important;
  color:inherit!important;
}

.sidebar .user-mini > span:not(.user-mini-avatar-fallback) > strong{
  display:-webkit-box!important;
  margin:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  color:#F7F9FC!important;
  font-family:'IBM Plex Sans','Inter',ui-sans-serif,system-ui,sans-serif!important;
  font-size:.72rem!important;
  font-weight:600!important;
  line-height:1.22!important;
  letter-spacing:-.005em!important;
  white-space:normal!important;
  text-overflow:clip!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

.sidebar .user-mini > span:not(.user-mini-avatar-fallback) > span{
  display:block!important;
  margin:0!important;
  color:rgba(247,249,252,.72)!important;
  font-family:'IBM Plex Sans','Inter',ui-sans-serif,system-ui,sans-serif!important;
  font-size:.59rem!important;
  font-weight:500!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.sidebar .user-mini[data-role='Administrador'] > span:not(.user-mini-avatar-fallback) > span,
.sidebar .user-mini[data-role='Instructor'] > span:not(.user-mini-avatar-fallback) > span{
  color:#F2D31B!important;
  font-weight:600!important;
}

/* La capa premium tiene body.premium-ui-v8 .user-mini con !important.
   Estas reglas tienen mayor especificidad y mantienen el azul permanente. */
body.premium-ui-v8 .sidebar .user-mini,
body.premium-ui-v8 .sidebar .user-mini:link,
body.premium-ui-v8 .sidebar .user-mini:visited{
  background:linear-gradient(145deg,#12355B,#2C537E)!important;
  border:1px solid rgba(247,249,252,.18)!important;
  box-shadow:0 12px 28px rgba(5,22,43,.24)!important;
  color:#F7F9FC!important;
}

body.premium-ui-v8 .sidebar .user-mini:hover,
body.premium-ui-v8 .sidebar .user-mini:focus-visible,
body.premium-ui-v8 .sidebar .user-mini:active{
  background:linear-gradient(145deg,#163E67,#365E8B)!important;
  border-color:rgba(230,196,0,.48)!important;
  color:#F7F9FC!important;
}

body.premium-ui-v8 .sidebar .user-mini > img{
  background:#12355B!important;
  border-color:rgba(247,249,252,.24)!important;
}

@media(max-height:720px) and (min-width:761px){
  .sidebar .sidebar-bottom{bottom:10px!important}
  .sidebar .user-mini{min-height:64px!important;padding:8px 10px!important}
  .sidebar .user-mini > img,
  .sidebar .user-mini-avatar-fallback{width:36px!important;height:36px!important;min-width:36px!important}
}
