/* NexoPlay · navegación transversal de los cuatro centros V1
   Flecha de colapso persistente, retorno al catálogo y badges con datos reales. */
.center-back-catalog{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:36px;padding:0 11px;border:1px solid #30284e;border-radius:11px;
  background:linear-gradient(180deg,#101329,#0a0d1b);color:#dce5ff;
  font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap;
  transition:border-color .16s,background .16s,transform .16s;
}
.center-back-catalog>span{font-size:18px;line-height:1;color:#b5a0ff}
.center-back-catalog:hover{border-color:#8564ff;background:#17122c;transform:translateY(-1px)}
.center-sidebar-mobile-toggle{display:none;flex:0 0 34px;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid #3c3065;border-radius:10px;background:#111028;color:#eee8ff;font-size:19px;cursor:pointer}
.center-sidebar-collapse{display:grid;place-items:center;flex:0 0 28px;width:28px;height:32px;padding:0;margin-left:auto;border:1px solid #3c3065;border-radius:9px;background:#111028;color:#e9e2ff;cursor:pointer;transition:background .16s,border-color .16s}
.center-sidebar-collapse:hover{border-color:#9b7bff;background:#21173f}
.center-sidebar-chevron{display:block;font-size:25px;font-weight:500;line-height:1;transform:translateY(-1px);transition:transform .18s}
body.admin-sidebar-collapsed .admin-toggle-chevron{transform:rotate(180deg) translateY(1px)}
body.affiliate-sidebar-collapsed .center-sidebar-chevron,
body.provider-sidebar-collapsed .center-sidebar-chevron,
body.distributor-sidebar-collapsed .center-sidebar-chevron{transform:rotate(180deg) translateY(1px)}
.center-nav-badge{
  margin-left:auto;min-width:19px;height:19px;padding:0 5px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:999px;background:#6629eb;
  color:#fff;font-size:10px;font-weight:900;line-height:1;box-shadow:0 0 11px rgba(111,60,255,.22);
}
.center-nav-badge.urgent{background:linear-gradient(135deg,#8247ff,#5b25cc)}
.center-nav-badge.red{background:linear-gradient(135deg,#fb4773,#c92050);box-shadow:0 0 10px rgba(251,71,115,.16)}
.center-nav-badge.notification{background:#e33e61}
.admin-sidebar .center-nav-badge{background:linear-gradient(135deg,#8247ff,#5b25cc)}
.provider-sidebar .center-nav-badge{background:linear-gradient(135deg,#1289ff,#1557c8)}
.affiliate-sidebar .center-nav-badge{background:linear-gradient(135deg,#8247ff,#5b25cc)}
.distributor-sidebar .center-nav-badge{background:linear-gradient(135deg,#8b5cf6,#2563eb)}
/* The provider brand now keeps a compact mark visible while collapsed. */
.provider-sidebar .brand.provider-brand{display:flex;align-items:center;gap:9px;min-height:68px;height:auto;padding:12px 10px;margin:0 0 13px;border-bottom:1px solid #202a3e}
.provider-brand-mark{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#8b5cf6,#2563eb);color:white;font-size:23px;font-weight:950;box-shadow:0 0 18px rgba(124,58,237,.22)}
.provider-brand-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.provider-brand-copy b{color:#f8f8ff;font-size:21px;letter-spacing:-.7px;white-space:nowrap}
.provider-brand-copy b span{color:#8db8ff}
.provider-brand-copy small{color:#7fb4ff;font-size:8px;font-weight:900;letter-spacing:.14em}
.provider-sidebar-collapse{border-color:#235077;background:#0b1c2d;color:#aad7ff}
.provider-sidebar .brand small{margin-left:0;padding:0;border:0;background:transparent}
.provider-sidebar .brand{min-width:0}
.provider-sidebar nav a{position:relative}
.provider-sidebar .center-nav-badge{margin-left:auto}

/* Desktop collapse behavior for each non-admin center. */
@media(min-width:901px){
 body.affiliate-sidebar-collapsed:has(.affiliate-sidebar) .affiliate-sidebar{width:76px!important;padding-left:8px!important;padding-right:8px!important}
 body.affiliate-sidebar-collapsed:has(.affiliate-sidebar) .main{margin-left:76px!important;width:calc(100% - 76px)!important}
 body.affiliate-sidebar-collapsed .affiliate-brand-copy,
 body.affiliate-sidebar-collapsed .affiliate-sidebar .nav-caption,
 body.affiliate-sidebar-collapsed .affiliate-sidebar nav a>span:not(.icon),
 body.affiliate-sidebar-collapsed .affiliate-sidebar .center-nav-badge,
 body.affiliate-sidebar-collapsed .affiliate-sidebar .sidebar-bottom .affiliate-help-card span,
 body.affiliate-sidebar-collapsed .affiliate-sidebar .sidebar-bottom .affiliate-help-card>.icon:last-child,
 body.affiliate-sidebar-collapsed .affiliate-sidebar .affiliate-sidebar-account>div,
 body.affiliate-sidebar-collapsed .affiliate-sidebar .affiliate-sidebar-account>a{display:none!important}
 body.affiliate-sidebar-collapsed .affiliate-sidebar .brand.affiliate-brand{justify-content:center;gap:0;padding:0}
 body.affiliate-sidebar-collapsed .affiliate-brand-mark{width:34px;height:34px;flex-basis:34px;font-size:25px}
 body.affiliate-sidebar-collapsed .affiliate-sidebar .affiliate-sidebar-close{position:absolute;right:-1px;top:11px}
 body.affiliate-sidebar-collapsed .affiliate-sidebar nav a{justify-content:center;padding:0;gap:0}
 body.affiliate-sidebar-collapsed .affiliate-sidebar .sidebar-bottom .affiliate-help-card,
 body.affiliate-sidebar-collapsed .affiliate-sidebar .affiliate-sidebar-account{justify-content:center;padding-left:0;padding-right:0}
 body.provider-sidebar-collapsed:has(.provider-sidebar) .provider-sidebar{width:76px!important;padding-left:8px!important;padding-right:8px!important}
 body.provider-sidebar-collapsed:has(.provider-sidebar) .main{margin-left:76px!important;width:calc(100% - 76px)!important}
 body.provider-sidebar-collapsed .provider-brand-copy,
 body.provider-sidebar-collapsed .provider-sidebar .nav-caption,
 body.provider-sidebar-collapsed .provider-sidebar nav a>span:not(.icon),
 body.provider-sidebar-collapsed .provider-sidebar .center-nav-badge,
 body.provider-sidebar-collapsed .provider-sidebar .sidebar-bottom .help-link>span,
 body.provider-sidebar-collapsed .provider-sidebar .provider-mini-status,
 body.provider-sidebar-collapsed .provider-sidebar .logout-sidebar>span{display:none!important}
 body.provider-sidebar-collapsed .provider-sidebar .brand.provider-brand{justify-content:center;gap:0;padding:0;position:relative}
 body.provider-sidebar-collapsed .provider-sidebar-collapse{position:absolute;right:-1px;top:10px}
 body.provider-sidebar-collapsed .provider-sidebar nav a{justify-content:center;padding:0;gap:0}
 body.provider-sidebar-collapsed .provider-sidebar .sidebar-bottom .help-link,
 body.provider-sidebar-collapsed .provider-sidebar .sidebar-bottom .logout-sidebar{justify-content:center;padding-left:0;padding-right:0}
 body.distributor-sidebar-collapsed:has(.distributor-sidebar) .distributor-sidebar{width:76px!important;padding-left:8px!important;padding-right:8px!important}
 body.distributor-sidebar-collapsed:has(.distributor-sidebar) .main{margin-left:76px!important;width:calc(100% - 76px)!important}
 body.distributor-sidebar-collapsed .distributor-brand-copy,
 body.distributor-sidebar-collapsed .distributor-sidebar .nav-caption,
 body.distributor-sidebar-collapsed .distributor-sidebar nav a>span:not(.icon),
 body.distributor-sidebar-collapsed .distributor-sidebar .center-nav-badge,
 body.distributor-sidebar-collapsed .distributor-sidebar .sidebar-bottom .help-link>span,
 body.distributor-sidebar-collapsed .distributor-sidebar .distributor-mini-status,
 body.distributor-sidebar-collapsed .distributor-sidebar .logout-sidebar>span{display:none!important}
 body.distributor-sidebar-collapsed .distributor-sidebar .brand.distributor-brand{justify-content:center;gap:0;padding:0;position:relative}
 body.distributor-sidebar-collapsed .distributor-sidebar-close{position:absolute;right:-1px;top:18px}
 body.distributor-sidebar-collapsed .distributor-sidebar nav a{justify-content:center;padding:0;gap:0}
 body.distributor-sidebar-collapsed .distributor-sidebar .sidebar-bottom .help-link,
 body.distributor-sidebar-collapsed .distributor-sidebar .sidebar-bottom .logout-sidebar{justify-content:center;padding-left:0;padding-right:0}
 body.admin-sidebar-collapsed .admin-sidebar .center-nav-badge{display:none!important}
}
/* Standard layout uses the same fixed sidebar width as the other centers. */
@media(min-width:901px){
 body:has(.provider-sidebar) .provider-sidebar{width:232px}
 body:has(.provider-sidebar) .main{margin-left:232px;width:calc(100% - 232px)}
 body:has(.distributor-sidebar) .distributor-sidebar{position:fixed;top:0;bottom:0;left:0;width:232px;transform:none}
 body:has(.distributor-sidebar) .main{margin-left:232px;width:calc(100% - 232px)}
 body:has(.affiliate-sidebar) .affiliate-sidebar{position:fixed;top:0;bottom:0;left:0;transform:none}
}
/* Mobile drawers: a topbar menu button opens the same navigation panel. */
@media(max-width:900px){
 .center-sidebar-mobile-toggle{display:inline-flex}
 .center-back-catalog{min-height:33px;padding:0 8px;gap:4px;font-size:10px}
 .center-back-catalog b{display:inline}
 body:has(.provider-sidebar) .provider-sidebar{position:fixed;z-index:1600;left:0;top:0;bottom:0;width:min(285px,84vw);transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 25px 80px rgba(0,0,0,.45)}
 body.provider-menu-open:has(.provider-sidebar) .provider-sidebar{transform:translateX(0)}
 body.provider-menu-open:has(.provider-sidebar)::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1500}
 body:has(.provider-sidebar) .main{margin-left:0!important;width:100%!important}
 body.provider-sidebar-collapsed:has(.provider-sidebar) .provider-sidebar{width:min(285px,84vw)!important}
 body.provider-sidebar-collapsed .provider-brand-copy,
 body.provider-sidebar-collapsed .provider-sidebar .nav-caption,
 body.provider-sidebar-collapsed .provider-sidebar nav a>span:not(.icon),
 body.provider-sidebar-collapsed .provider-sidebar .center-nav-badge,
 body.provider-sidebar-collapsed .provider-sidebar .sidebar-bottom .help-link>span,
 body.provider-sidebar-collapsed .provider-sidebar .provider-mini-status,
 body.provider-sidebar-collapsed .provider-sidebar .logout-sidebar>span{display:initial!important}
 body.provider-sidebar-collapsed .provider-sidebar .nav-caption{display:block!important}
 body.provider-sidebar-collapsed .provider-sidebar nav a{justify-content:flex-start;padding:0 15px;gap:14px}
 body.provider-sidebar-collapsed .provider-sidebar .brand.provider-brand{justify-content:flex-start;padding:12px 10px;gap:9px}
 body.provider-sidebar-collapsed .provider-sidebar-collapse{position:static;margin-left:auto}
 body.provider-sidebar-collapsed .provider-sidebar nav a .center-nav-badge{display:inline-flex!important}
 body.provider-sidebar-collapsed .provider-sidebar .sidebar-bottom .help-link,
 body.provider-sidebar-collapsed .provider-sidebar .sidebar-bottom .logout-sidebar{justify-content:flex-start;padding-left:10px;padding-right:10px}
 body:has(.distributor-sidebar) .distributor-sidebar{width:min(285px,84vw)}
 body.distributor-sidebar-collapsed:has(.distributor-sidebar) .distributor-sidebar{width:min(285px,84vw)!important}
 body.distributor-sidebar-collapsed .distributor-brand-copy,
 body.distributor-sidebar-collapsed .distributor-sidebar .nav-caption,
 body.distributor-sidebar-collapsed .distributor-sidebar nav a>span:not(.icon),
 body.distributor-sidebar-collapsed .distributor-sidebar .center-nav-badge,
 body.distributor-sidebar-collapsed .distributor-sidebar .sidebar-bottom .help-link>span,
 body.distributor-sidebar-collapsed .distributor-sidebar .distributor-mini-status,
 body.distributor-sidebar-collapsed .distributor-sidebar .logout-sidebar>span{display:initial!important}
 body.distributor-sidebar-collapsed .distributor-sidebar .nav-caption{display:block!important}
 body.distributor-sidebar-collapsed .distributor-sidebar nav a{justify-content:flex-start;padding:9px 11px;gap:10px}
 body.distributor-sidebar-collapsed .distributor-sidebar .brand.distributor-brand{justify-content:flex-start;padding:14px 16px;gap:10px}
 body.distributor-sidebar-collapsed .distributor-sidebar-close{position:static;margin-left:auto}
 body.distributor-sidebar-collapsed .distributor-sidebar nav a .center-nav-badge{display:inline-flex!important}
 body.distributor-sidebar-collapsed .distributor-sidebar .sidebar-bottom .help-link,
 body.distributor-sidebar-collapsed .distributor-sidebar .sidebar-bottom .logout-sidebar{justify-content:flex-start;padding-left:10px;padding-right:10px}
}
@media(max-width:820px){
 body:has(.admin-sidebar) .admin-sidebar-mobile-toggle{display:inline-flex}
 body:has(.admin-sidebar) .center-back-catalog{min-width:34px;padding:0 8px}
 body:has(.admin-sidebar) .center-back-catalog b{display:none}
}
/* Affiliate center already uses menu-open to control its mobile drawer. */
@media(max-width:780px){
 body:has(.affiliate-sidebar) .affiliate-sidebar .brand.affiliate-brand{position:relative}
 body:has(.affiliate-sidebar) .affiliate-sidebar .affiliate-sidebar-close{display:grid;place-items:center;position:static;margin-left:auto}
 body:has(.affiliate-sidebar) .affiliate-topbar .nx-aff-sidebar-toggle{display:grid}
 body.affiliate-sidebar-collapsed:has(.affiliate-sidebar) .affiliate-sidebar{width:min(265px,86vw)!important}
 body.affiliate-sidebar-collapsed .affiliate-brand-copy,
 body.affiliate-sidebar-collapsed .affiliate-sidebar .nav-caption,
 body.affiliate-sidebar-collapsed .affiliate-sidebar nav a>span:not(.icon),
 body.affiliate-sidebar-collapsed .affiliate-sidebar .center-nav-badge,
 body.affiliate-sidebar-collapsed .affiliate-sidebar .sidebar-bottom .affiliate-help-card span,
 body.affiliate-sidebar-collapsed .affiliate-sidebar .sidebar-bottom .affiliate-help-card>.icon:last-child,
 body.affiliate-sidebar-collapsed .affiliate-sidebar .affiliate-sidebar-account>div,
 body.affiliate-sidebar-collapsed .affiliate-sidebar .affiliate-sidebar-account>a{display:initial!important}
 body.affiliate-sidebar-collapsed .affiliate-sidebar .nav-caption{display:block!important}
 body.affiliate-sidebar-collapsed .affiliate-sidebar nav a{justify-content:flex-start;padding:0 15px;gap:14px}
 body.affiliate-sidebar-collapsed .affiliate-sidebar .brand.affiliate-brand{justify-content:flex-start;gap:9px;padding:0 4px}
 body.affiliate-sidebar-collapsed .affiliate-brand-mark{width:42px;height:42px;flex-basis:42px;font-size:31px}
 body.affiliate-sidebar-collapsed .affiliate-sidebar .affiliate-sidebar-close{position:static;margin-left:auto}
 body.affiliate-sidebar-collapsed .affiliate-sidebar nav a .center-nav-badge{display:inline-flex!important}
 body.affiliate-sidebar-collapsed .affiliate-sidebar .sidebar-bottom .affiliate-help-card,
 body.affiliate-sidebar-collapsed .affiliate-sidebar .affiliate-sidebar-account{justify-content:flex-start;padding-left:10px;padding-right:10px}
 body:has(.affiliate-sidebar) .center-back-catalog b{display:inline}
}
@media(max-width:560px){
 .center-back-catalog{min-width:32px;gap:0}
 .center-back-catalog b{display:none!important}
 .center-sidebar-mobile-toggle{width:31px;height:31px;flex-basis:31px}
 .provider-topbar .top-actions .global-wallet-pill,.provider-topbar .top-actions .provider-wallet-mini{display:none}
}

/* Additional specificity fixes for the affiliate collapse control and compact marks. */
.affiliate-sidebar .affiliate-sidebar-close.center-sidebar-collapse{display:grid!important}
@media(min-width:901px){
 body.affiliate-sidebar-collapsed .affiliate-brand-mark{width:30px;height:30px;flex-basis:30px;font-size:23px}
 body.affiliate-sidebar-collapsed .affiliate-sidebar .affiliate-sidebar-close{width:24px;height:28px}
 body.provider-sidebar-collapsed .provider-brand-mark{width:29px;height:29px;flex-basis:29px;font-size:20px}
 body.provider-sidebar-collapsed .provider-sidebar-collapse{width:24px;height:28px}
 body.distributor-sidebar-collapsed .distributor-brand-mark{width:28px;height:28px;font-size:19px}
 body.distributor-sidebar-collapsed .distributor-sidebar-close{width:24px;height:28px}
 body:has(.admin-sidebar) .admin-sidebar-mobile-toggle{display:none!important}
}
@media(max-width:820px){
 body:has(.admin-sidebar) .admin-sidebar-mobile-toggle{display:inline-flex!important}
}

.admin-sidebar-mobile-toggle{display:none!important}
@media(max-width:820px){.admin-sidebar-mobile-toggle{display:inline-flex!important}}

.affiliate-sidebar .brand.affiliate-brand{position:relative}


/* Centro de Afiliados: cuenta solo informativa; sin accesos a Notificaciones ni Mi perfil. */
.affiliate-topbar .affiliate-static-account{display:flex;align-items:center;gap:9px;min-width:0;padding:4px 8px 4px 5px;border:1px solid #253857;border-radius:13px;background:#0a1323;}
.affiliate-topbar .affiliate-static-account .user-avatar-img,
.affiliate-topbar .affiliate-static-account .avatar-placeholder{width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important;min-height:32px!important;max-height:32px!important;flex:0 0 32px;}
@media(max-width:780px){.affiliate-topbar .affiliate-static-account{padding:4px;border-radius:50%;}.affiliate-topbar .affiliate-static-account .nx-aff-top-user{display:none;}}

/* NexoPlay · Fix visual de marca y avatar V1 (2026-10-30)
   En sidebar colapsada reserva carriles independientes para el logo y la flecha.
   Evita que los controles absolutos invadan la marca en los centros secundarios. */
@media (min-width: 901px) {
  body.affiliate-sidebar-collapsed:has(.affiliate-sidebar) .affiliate-sidebar .brand.affiliate-brand,
  body.provider-sidebar-collapsed:has(.provider-sidebar) .provider-sidebar .brand.provider-brand,
  body.distributor-sidebar-collapsed:has(.distributor-sidebar) .distributor-sidebar .brand.distributor-brand {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    overflow: visible !important;
  }

  body.affiliate-sidebar-collapsed .affiliate-sidebar .affiliate-brand-mark {
    position: relative;
    z-index: 1;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    margin: 0 !important;
  }

  body.provider-sidebar-collapsed .provider-sidebar .provider-brand-mark {
    position: relative;
    z-index: 1;
    width: 29px !important;
    height: 29px !important;
    flex: 0 0 29px !important;
    margin: 0 !important;
  }

  body.distributor-sidebar-collapsed .distributor-sidebar .distributor-brand-mark {
    position: relative;
    z-index: 1;
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    margin: 0 !important;
  }

  body.affiliate-sidebar-collapsed .affiliate-sidebar .affiliate-sidebar-close,
  body.provider-sidebar-collapsed .provider-sidebar .provider-sidebar-collapse,
  body.distributor-sidebar-collapsed .distributor-sidebar .distributor-sidebar-close {
    position: absolute !important;
    top: 50% !important;
    right: 2px !important;
    left: auto !important;
    z-index: 4 !important;
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    flex: 0 0 24px !important;
  }
}

/* El selector genérico .menu-user span también alcanzaba al span del avatar,
   aplicándole margen y tipografía de etiqueta. Restablecer el avatar como una
   pieza circular fija evita que la inicial se desplace fuera del círculo. */
.menu-user > .avatar-placeholder {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  flex: 0 0 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  color: #fff !important;
}

.menu-user > .user-avatar-img {
  display: block !important;
  box-sizing: border-box !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  flex: 0 0 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
}

.profile-btn > .avatar-placeholder,
.profile-btn > .user-avatar-img {
  box-sizing: border-box !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  line-height: 1 !important;
}

.profile-btn > .avatar-placeholder {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 12px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.profile-btn > .user-avatar-img {
  display: block !important;
  padding: 0 !important;
  object-fit: cover !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
}

.affiliate-sidebar-account > .avatar-placeholder,
.affiliate-sidebar-account > .user-avatar-img {
  box-sizing: border-box !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  line-height: 1 !important;
}
.affiliate-sidebar-account > .avatar-placeholder {
  display: grid !important;
  place-items: center !important;
  font-size: 12px !important;
  text-align: center !important;
}
.affiliate-sidebar-account > .user-avatar-img {
  display: block !important;
  object-fit: cover !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
}