/* ==========================================================================
   PAINEL DO ASSOCIADO / DASHBOARD (TEACHEIAQUI BACKOFFICE)
   ========================================================================== */

.painel-body {
  background-color: #f1f5f9;
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-sans);
  color: #1e293b;
  overflow-x: hidden;
  overflow-y: auto;
}

.painel-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Sidebar Esquerda */
.painel-sidebar {
  width: 280px;
  min-width: 280px;
  background: #ffffff;
  border-right: 1px solid var(--border-card);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.02);
}

.sidebar-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
}

/* Card do Usuário Logado - Layout Elegante e Sem Truncamento */
.sidebar-user-card {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.profile-pic-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.sidebar-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--color-primary, #3b82f6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: #e2e8f0;
  display: block;
}

.btn-select-pic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 0.70rem;
  font-weight: 600;
  color: var(--color-primary, #2563eb);
  background: rgba(37, 99, 235, 0.08);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-select-pic:hover {
  background: rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sidebar-user-info .greeting {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 500;
}

.sidebar-user-info .user-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-title);
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
  margin: 2px 0;
}

.sidebar-user-info .user-email {
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav-menu {
  list-style: none;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-nav-item {
  width: 100%;
}
.sidebar-nav-item a,
.sidebar-nav-item button.sidebar-nav-btn {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  box-sizing: border-box;
}

.sidebar-nav-btn .nav-btn-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-nav-btn .nav-btn-content i {
  font-size: 1.18rem;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sidebar-nav-btn:hover {
  transform: translateX(4px);
}
.sidebar-nav-btn:hover .nav-btn-content i {
  transform: scale(1.18);
}
.sidebar-nav-item.active .sidebar-nav-btn {
  font-weight: 700;
  transform: translateX(4px);
}
.sidebar-nav-item.active .sidebar-nav-btn .nav-btn-content i {
  transform: scale(1.15);
}
.nav-chevron {
  font-size: 0.75rem;
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.sidebar-nav-btn:hover .nav-chevron {
  opacity: 0.9;
  transform: translateX(2px);
}

/* Painel Main Area */
.painel-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Top Banner Header */
.painel-top-header {
  background: linear-gradient(135deg, #1d4ed8, #2563eb 60%, #3b82f6);
  padding: 16px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);
}
.header-title-breadcrumb-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.painel-top-header h2 {
  font-size: 1.45rem;
  color: #fff;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.painel-breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
}
.painel-breadcrumb-nav .bc-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.painel-breadcrumb-nav .bc-sep {
  font-size: 0.68rem;
  opacity: 0.6;
}
.painel-breadcrumb-nav .bc-active {
  color: #fff;
  font-weight: 600;
}
.top-search-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  width: 320px;
  box-shadow: var(--shadow-sm);
}
.top-search-wrap input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.88rem;
  width: 100%;
  color: var(--text-title);
}

/* ==========================================================================
   PADRONIZAÇÃO DE IMAGENS NOS QUADRADOS / CARDS (CENTRALIZADAS E SEM CORTE)
   ========================================================================== */
.catalog-card-media,
.module-img-wrap,
.quick-tile,
.photo-upload-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.catalog-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.module-img-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  background: #090d16 !important;
}

.module-img-wrap img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: auto !important;
}

.responsive-hero-banner img {
  width: 100% !important;
  max-height: 280px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Garante imagens perfeitamente centralizadas e ajustadas aos seus contêineres */
.quick-tile img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: auto;
}
.top-search-wrap i {
  color: #94a3b8;
  font-size: 0.95rem;
}
.top-user-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.top-action-btn {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--trans-fast);
  text-decoration: none;
}
.top-action-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Dashboard Views Container */
.painel-view-section {
  display: none;
  animation: fadeInView 0.25s ease;
}
.painel-view-section.active {
  display: block;
}
@keyframes fadeInView {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* LOTE 2: Top KPI Executive Strip */
.dashboard-kpi-summary-strip {
  padding: 24px 36px 0 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.kpi-executive-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg, 16px);
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: var(--trans-fast);
  position: relative;
  overflow: hidden;
}
.kpi-executive-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #cbd5e1;
}
.kpi-executive-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-primary);
}
.kpi-executive-card.balance-highlight::before { background: #059669; }
.kpi-executive-card.points-highlight::before { background: #d97706; }
.kpi-executive-card.network-highlight::before { background: #2563eb; }
.kpi-executive-card.plan-highlight::before { background: #7c3aed; }

.kpi-icon-bubble {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}
.balance-highlight .kpi-icon-bubble { background: #ecfdf5; color: #059669; }
.points-highlight .kpi-icon-bubble { background: #fffbeb; color: #d97706; }
.network-highlight .kpi-icon-bubble { background: #eff6ff; color: #2563eb; }
.plan-highlight .kpi-icon-bubble { background: #f5f3ff; color: #7c3aed; }

.kpi-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.kpi-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.kpi-number {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-title);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-unit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.kpi-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  margin-top: 2px;
}
.kpi-badge.positive { color: #059669; }
.kpi-badge.warning { color: #d97706; }
.kpi-badge.info { color: #2563eb; }
.kpi-badge.success { color: #16a34a; }

/* Dark mode para KPIs executivos */
body.dark-theme .kpi-executive-card {
  background: #1e293b;
  border-color: #334155;
}
body.dark-theme .kpi-number {
  color: #f8fafc;
}
body.dark-theme .kpi-title {
  color: #94a3b8;
}

/* Dashboard Content Grid */
.painel-content-body {
  padding: 24px 36px 36px 36px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
}

.dashboard-tiles-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dashboard-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 4px 4px;
}
.heading-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.heading-title-group i {
  color: var(--color-primary);
  font-size: 1.15rem;
}
.heading-title-group h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-title);
  margin: 0;
}
.heading-meta-pill {
  background: var(--color-primary-light, #eef2ff);
  color: var(--color-primary, #4f46e5);
  padding: 4px 10px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 0.76rem;
  font-weight: 700;
}
body.dark-mode .dashboard-section-heading h3 {
  color: #f8fafc;
}
body.dark-mode .heading-meta-pill {
  background: #1e293b;
  color: #818cf8;
}

/* LOTE 3: Categorização dos Atalhos */
.tiles-category-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.tiles-category-filter-bar::-webkit-scrollbar {
  height: 4px;
}
.tiles-category-filter-bar::-webkit-scrollbar-thumb {
  background: var(--border-card);
  border-radius: var(--radius-pill);
}
.tile-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--trans-fast);
}
.tile-cat-btn:hover {
  background: var(--bg-subtle);
  border-color: #cbd5e1;
  color: var(--text-title);
}
.tile-cat-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px var(--color-primary-glow);
}
.tile-cat-btn .cat-count {
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
}
.tile-cat-btn.active .cat-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

body.dark-mode .tile-cat-btn {
  background: #131d31;
  border-color: #22324e;
  color: #94a3b8;
}
body.dark-mode .tile-cat-btn:hover {
  background: #19253d;
  color: #f8fafc;
}
body.dark-mode .tile-cat-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}
body.dark-mode .tile-cat-btn .cat-count {
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

/* Grid de Atalhos Rápidos (Cards Centrais) */
.quick-action-tiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.quick-tile {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 18px 24px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: var(--shadow-xs);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  box-sizing: border-box;
}
.quick-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--tile-hover-border, #3b82f6);
}
.quick-tile .tile-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-title);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-right: 18px; /* Espaço entre a descrição e o ícone */
  flex: 1;
}
.quick-tile .tile-icon {
  font-size: 1.25rem;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 11px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-left: 16px !important; /* Espaçamento garantido */
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.quick-tile:hover .tile-icon {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Cores Idênticas às da Esquerda nos Ícones dos Atalhos Centrais */
/* 1. Transferência Cashback */
.quick-tile[data-action="cashback"] .tile-icon { color: #06b6d4 !important; background: rgba(6, 182, 212, 0.16) !important; border: 1.5px solid #06b6d4 !important; }
/* 2 e 3. Imóveis */
.quick-tile[data-action="listar-imoveis"] .tile-icon,
.quick-tile[data-action="adicionar-imovel"] .tile-icon { color: #14b8a6 !important; background: rgba(20, 184, 166, 0.16) !important; border: 1.5px solid #14b8a6 !important; }
/* 4. Meus Dados */
.quick-tile[data-action="meus-dados"] .tile-icon { color: #64748b !important; background: rgba(100, 116, 139, 0.16) !important; border: 1.5px solid #64748b !important; }
/* 5. Recibos */
.quick-tile[data-action="recibos"] .tile-icon { color: #a855f7 !important; background: rgba(168, 85, 247, 0.16) !important; border: 1.5px solid #a855f7 !important; }
/* 6. Rede Gráfica */
.quick-tile[data-action="rede-grafica"] .tile-icon { color: #06b6d4 !important; background: rgba(6, 182, 212, 0.16) !important; border: 1.5px solid #06b6d4 !important; }
/* 7. Comissões */
.quick-tile[data-action="comissoes"] .tile-icon { color: #14b8a6 !important; background: rgba(20, 184, 166, 0.16) !important; border: 1.5px solid #14b8a6 !important; }
/* 8. Divulgação */
.quick-tile[data-action="divulgacao"] .tile-icon { color: #6366f1 !important; background: rgba(99, 102, 241, 0.16) !important; border: 1.5px solid #6366f1 !important; }
/* 9. Sacar Dinheiro */
.quick-tile[data-action="sacar"] .tile-icon { color: #14b8a6 !important; background: rgba(20, 184, 166, 0.16) !important; border: 1.5px solid #14b8a6 !important; }
/* 10. Rede Linear */
.quick-tile[data-action="rede-linear"] .tile-icon { color: #06b6d4 !important; background: rgba(6, 182, 212, 0.16) !important; border: 1.5px solid #06b6d4 !important; }
/* 11. Downloads */
.quick-tile[data-action="downloads"] .tile-icon { color: #3b82f6 !important; background: rgba(59, 130, 246, 0.16) !important; border: 1.5px solid #3b82f6 !important; }
/* 12. Mini-site */
.quick-tile[data-action="minisite"] .tile-icon { color: #6366f1 !important; background: rgba(99, 102, 241, 0.16) !important; border: 1.5px solid #6366f1 !important; }
/* 13. Pagamentos */
.quick-tile[data-action="pagamentos"] .tile-icon { color: #059669 !important; background: rgba(5, 150, 105, 0.16) !important; border: 1.5px solid #059669 !important; }
/* 14 e 15. Guia Comercial */
.quick-tile[data-action="anuncios-guia"] .tile-icon,
.quick-tile[data-action="adic-guia"] .tile-icon { color: #f59e0b !important; background: rgba(245, 158, 11, 0.16) !important; border: 1.5px solid #f59e0b !important; }
/* 16 e 17. Autos */
.quick-tile[data-action="listar-autos"] .tile-icon,
.quick-tile[data-action="adicionar-autos"] .tile-icon { color: #ef4444 !important; background: rgba(239, 68, 68, 0.16) !important; border: 1.5px solid #ef4444 !important; }
/* 18 e 19. Classificados */
.quick-tile[data-action="listar-classificados"] .tile-icon,
.quick-tile[data-action="adic-classificados"] .tile-icon { color: #d97706 !important; background: rgba(217, 119, 6, 0.16) !important; border: 1.5px solid #d97706 !important; }
/* 20. Planos */
.quick-tile[data-action="planos"] .tile-icon { color: #eab308 !important; background: rgba(234, 179, 8, 0.16) !important; border: 1.5px solid #eab308 !important; }
/* 21. Contato */
.quick-tile[data-action="contato"] .tile-icon { color: #64748b !important; background: rgba(100, 116, 139, 0.16) !important; border: 1.5px solid #64748b !important; }
/* 22. Foto */
.quick-tile[data-action="foto"] .tile-icon { color: #3b82f6 !important; background: rgba(59, 130, 246, 0.16) !important; border: 1.5px solid #3b82f6 !important; }
/* 23. Preferências */
.quick-tile[data-action="preferencias"] .tile-icon { color: #64748b !important; background: rgba(100, 116, 139, 0.16) !important; border: 1.5px solid #64748b !important; }
/* 24. Cursos */
.quick-tile[data-action="cursos"] .tile-icon { color: #8b5cf6 !important; background: rgba(139, 92, 246, 0.16) !important; border: 1.5px solid #8b5cf6 !important; }
/* 25. Adicionar Produto */
.quick-tile[data-action="adicionar-produto"] .tile-icon { color: #10b981 !important; background: rgba(16, 185, 129, 0.16) !important; border: 1.5px solid #10b981 !important; }
/* 26. Meus Pedidos */
.quick-tile[data-action="meus-pedidos"] .tile-icon { color: #f97316 !important; background: rgba(249, 115, 22, 0.16) !important; border: 1.5px solid #f97316 !important; }
/* 27. Minhas Vendas */
.quick-tile[data-action="minhas-vendas"] .tile-icon { color: #10b981 !important; background: rgba(16, 185, 129, 0.16) !important; border: 1.5px solid #10b981 !important; }
/* 28. Agendamentos */
.quick-tile[data-action="agendamentos"] .tile-icon { color: #0284c7 !important; background: rgba(2, 132, 199, 0.16) !important; border: 1.5px solid #0284c7 !important; }
/* 29. Admin */
.quick-tile[data-action="admin"] .tile-icon { color: #ec4899 !important; background: rgba(236, 72, 153, 0.16) !important; border: 1.5px solid #ec4899 !important; }
/* 30. Recargas */
.quick-tile[data-action="recargas"] .tile-icon { color: #10b981 !important; background: rgba(16, 185, 129, 0.16) !important; border: 1.5px solid #10b981 !important; }
/* 34. Trader & IA */
.quick-tile[data-action="trader"] .tile-icon { color: #f59e0b !important; background: rgba(245, 158, 11, 0.16) !important; border: 1.5px solid #f59e0b !important; }
/* 35. Ajuda */
.quick-tile[data-action="ajuda"] .tile-icon { color: #3b82f6 !important; background: rgba(59, 130, 246, 0.16) !important; border: 1.5px solid #3b82f6 !important; }

/* Dark Mode para Quick Tiles */
body.dark-mode .quick-tile {
  background: #131d31 !important;
  border-color: #22324e !important;
}
body.dark-mode .quick-tile:hover {
  background: #19253d !important;
  border-color: #3b82f6 !important;
}
body.dark-mode .quick-tile .tile-label {
  color: #f8fafc !important;
}

/* Lateral Direita (Widgets Financeiros & Status) */
.painel-widgets-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Card de Saldo Disponível */
.widget-balance-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--border-card);
  border-left: 6px solid #6366f1;
  padding: 26px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.widget-balance-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.balance-wallet-icon {
  width: 52px;
  height: 52px;
  background: #eef2ff;
  color: #4f46e5;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.balance-info .balance-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.balance-info .balance-amount {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-title);
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-top: 2px;
}
.widget-balance-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Card de Pontuação Acumulada */
.widget-points-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--border-card);
  border-left: 6px solid #10b981;
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.widget-points-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.points-trophy-icon {
  width: 52px;
  height: 52px;
  background: #ecfdf5;
  color: #10b981;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.points-info .points-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.points-info .points-val {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-title);
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-top: 2px;
}
.points-info .points-val span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
}
.progress-meta-row {
  margin-top: 14px;
}
.progress-meta-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.progress-meta-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-meta-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  width: 100%;
  border-radius: var(--radius-pill);
}

/* Card Links de Expansão MMN (Fiel à imagem de referência) */
.widget-expansion-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--border-card);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.expansion-header {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.expansion-link-box {
  margin-bottom: 12px;
}
.expansion-link-box label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}
.copy-input-group {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  overflow: hidden;
}
.copy-input-group input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: #334155;
  font-family: monospace;
  outline: none;
}
.copy-input-group button {
  background: #0ea5e9;
  color: #fff;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  transition: var(--trans-fast);
}
.copy-input-group button:hover {
  background: #0284c7;
}

/* Cartão Corporativo Representante (Fiel à imagem de referência) */
.widget-card-holder {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--border-card);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.corporative-card-art {
  background: linear-gradient(135deg, #2d3b25, #445934 60%, #1e2819);
  border-radius: 14px;
  padding: 18px 22px;
  color: #f1f5f9;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 16px;
}
.card-art-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 0.85;
}
.card-chip {
  width: 38px;
  height: 28px;
  background: linear-gradient(135deg, #d4af37, #f7e07c);
  border-radius: 5px;
  margin: 14px 0 10px;
  border: 1px solid #b89628;
  position: relative;
}
.card-number-art {
  font-family: monospace;
  letter-spacing: 0.15em;
  font-size: 1.05rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  margin-bottom: 8px;
}
.card-art-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.card-holder-name {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.card-visa-logo {
  font-weight: 900;
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}
.card-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 0.82rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}
.card-status-grid .stat-item span {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
}
.card-status-grid .stat-item strong {
  font-size: 0.92rem;
  color: var(--text-title);
}

/* Card Central de Avisos & Status da Rede */
.widget-status-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--border-card);
  border-left: 6px solid #f97316;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.status-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.status-header-row i {
  color: #f97316;
  font-size: 1.3rem;
}
.status-header-row h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-title);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-items-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.status-box-sub {
  background: #f8fafc;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  padding: 10px 12px;
}
.status-box-sub .sub-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
}
.status-box-sub .sub-val {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-title);
  margin-top: 2px;
}

/* ==========================================================================
   ESTILOS PARA AS TELAS INTERNAS (VIEWS/ABAS)
   ========================================================================== */
.view-container-box {
  padding: 32px 36px 60px;
}
.view-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.view-header-bar h3 {
  font-size: 1.4rem;
  color: var(--text-title);
  margin: 0;
}
.view-header-bar p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 4px 0 0;
}

/* Tabelas Elegantes */
/* Tabelas Elegantes & Responsivas (LOTE 4) */
.table-responsive-box {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.table-responsive-box::-webkit-scrollbar {
  height: 6px;
}
.table-responsive-box::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: var(--radius-pill);
}
.custom-data-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
}
.custom-data-table th {
  background: #f8fafc;
  padding: 14px 18px;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border-card);
  white-space: nowrap;
}
.custom-data-table td {
  padding: 14px 18px;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-title);
  vertical-align: middle;
}
.custom-data-table tr:hover td {
  background: #f8fafc;
}
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge-status.success { background: #dcfce7; color: #15803d; }
.badge-status.warning { background: #fef3c7; color: #b45309; }
.badge-status.info { background: #e0f2fe; color: #0369a1; }

/* Empty States Globais (LOTE 4) */
.painel-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  background: #ffffff;
  border: 1px dashed var(--border-card);
  border-radius: 16px;
  margin: 16px 0;
}
.empty-state-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.painel-empty-state h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-title);
  margin: 0 0 6px 0;
}
.painel-empty-state p {
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 420px;
  margin: 0 0 18px 0;
  line-height: 1.5;
}
body.dark-mode .painel-empty-state {
  background: #131d31 !important;
  border-color: #283a5c !important;
}
body.dark-mode .empty-state-icon-wrap {
  background: #1e293b !important;
  color: #818cf8 !important;
}
body.dark-mode .painel-empty-state h4 {
  color: #f8fafc !important;
}
body.dark-mode .painel-empty-state p {
  color: #94a3b8 !important;
}

/* Grid de Itens (Imóveis, Carros, Produtos) */
.cards-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.catalog-item-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: var(--trans-fast);
  display: flex;
  flex-direction: column;
}
.catalog-item-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.catalog-card-media {
  height: 180px;
  background: #f1f5f9;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.catalog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.catalog-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
}
.catalog-card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.catalog-card-body h4 {
  font-size: 1.05rem;
  margin: 0 0 6px;
  color: var(--text-title);
}
.catalog-card-body p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 14px;
  flex: 1;
}
.catalog-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
}
.catalog-price-row strong {
  font-size: 1.15rem;
  color: #059669;
}

/* Árvore MMN Visual */
.mmn-tree-wrapper {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.mmn-node {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.mmn-node.root-node {
  background: #eef2ff;
  border-color: #a5b4fc;
}
.mmn-node .node-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mmn-node .node-user img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.mmn-children-list {
  padding-left: 32px;
  border-left: 2px dashed #cbd5e1;
  margin-left: 20px;
}

/* Modais do Painel */
.painel-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.painel-modal-backdrop.active {
  display: flex;
}
.painel-modal-card {
  background: #ffffff;
  width: 100%;
  max-width: 520px;
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: modalPop 0.2s ease;
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.painel-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.painel-modal-header h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text-title);
}
.painel-modal-close {
  background: transparent;
  border: none;
  font-size: 1.3rem;
  color: var(--text-muted);
  cursor: pointer;
}
.painel-modal-body {
  padding: 24px;
}
.painel-form-group {
  margin-bottom: 18px;
}
.painel-form-group label {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 6px;
}
.painel-form-group input,
.painel-form-group select,
.painel-form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  outline: none;
  font-size: 0.9rem;
  background: #f8fafc;
  color: var(--text-title);
}
.painel-form-group input:focus,
.painel-form-group select:focus,
.painel-form-group textarea:focus {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Toast do Painel */
.painel-toast-item {
  background: #1e293b;
  color: #fff;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  animation: slideInToast 0.25s ease;
  transition: all 0.3s ease;
}
@keyframes slideInToast {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Seção de Módulos Rápidos Inferiores */
.painel-bottom-cards-section {
  padding: 10px 36px 40px;
}
.painel-bottom-cards-section h3 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 24px;
  color: var(--text-title);
  display: flex;
  align-items: center;
  gap: 10px;
}
.painel-bottom-cards-section h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 22px;
  background: var(--color-primary);
  border-radius: 4px;
}


@media (max-width: 1200px) {
  .painel-content-body {
    grid-template-columns: 1fr;
  }
  .modules-interactive-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .painel-layout {
    flex-direction: column;
  }
  .painel-sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .quick-action-tiles-grid, .modules-interactive-strip {
    grid-template-columns: 1fr;
  }
  .painel-content-body, .painel-bottom-cards-section, .view-container-box {
    padding: 20px;
  }
  .painel-top-header {
    padding: 16px 20px;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .top-search-wrap {
    width: 100%;
  }
}

/* ==========================================================================
   ACÚSTICA E ESTADOS WCAG 2.1 AA (PADRÃO MULTINACIONAL)
   ========================================================================== */
.sidebar-nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--trans-fast);
  text-align: left;
}
.sidebar-nav-btn .nav-btn-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-nav-btn i {
  font-size: 1.15rem;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-nav-btn:hover {
  background: #f8fafc;
}
.sidebar-nav-item.active .sidebar-nav-btn {
  background: #e0f2fe;
  box-shadow: 0 1px 3px rgba(3, 105, 161, 0.1);
}

/* Focus Visible para Acessibilidade por Teclado */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.quick-tile:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Spinner de Loading */
.spin-icon {
  animation: spinLoader 0.75s linear infinite;
  display: inline-block;
}
@keyframes spinLoader {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Botão de Fechar Acessível */
.modal-close-accessible {
  background: none;
  border: none;
  font-size: 1.35rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--trans-fast);
}
.modal-close-accessible:hover {
  background: #f1f5f9;
  color: var(--text-title);
}

/* Recipient Chips & Member Selector */
.recipient-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.recipient-chip-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.recipient-chip-btn:hover {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0369a1;
  transform: translateY(-1px);
}
.recipient-chip-btn img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

/* Seletor Escalável de Membros (Filtro para centenas/milhares de membros) */
.member-search-container {
  position: relative;
  margin-top: 8px;
}
.member-search-input-wrap {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  padding: 0 12px;
  transition: var(--trans-fast);
}
.member-search-input-wrap:focus-within {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.member-search-input-wrap i {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-right: 8px;
}
.member-search-input-wrap input {
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 0.88rem;
  width: 100%;
  outline: none;
}
.member-scrollable-list {
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  background: #fff;
  margin-top: 6px;
  box-shadow: var(--shadow-sm);
}
.member-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.15s ease;
}
.member-list-item:last-child {
  border-bottom: none;
}
.member-list-item:hover, .member-list-item.selected {
  background: #f0fdf4;
}
.member-item-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.member-item-profile img, .member-item-profile .avatar-placeholder {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.member-item-profile .avatar-placeholder {
  background: #e0f2fe;
  color: #0369a1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
}
.member-item-info .member-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.2;
}
.member-item-info .member-meta {
  font-size: 0.74rem;
  color: var(--text-muted);
}
/* Ajuste de contraste para texto em negrito no modo escuro */
.dark-mode .bold-text {
  font-weight: bold;
  color: #e0e0e0; /* cor clara para legibilidade */
}
.member-select-badge {
  font-size: 0.74rem;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  padding: 4px 10px;
  border-radius: 20px;
}

/* Formulário Completo de Imóveis (Grid de 2 Colunas & Upload de Fotos) */
.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .form-grid-2col {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.form-amenities-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.amenity-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-title);
  cursor: pointer;
  background: #f8fafc;
  padding: 8px 12px;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  transition: var(--trans-fast);
}
.amenity-checkbox-label:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.amenity-checkbox-label input[type="checkbox"] {
  width: auto;
  accent-color: var(--color-primary);
  margin: 0;
}

/* Galeria de Pré-visualização de Fotos de Imóvel */
.photo-upload-container {
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: var(--trans-fast);
  margin-bottom: 12px;
}
.photo-upload-container:hover {
  border-color: var(--color-primary);
  background: #f5f3ff;
}
.photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.photo-preview-thumb {
  width: 100%;
  height: 65px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-card);
}

/* Aspecto Responsivo Profissional para Banners */
.responsive-hero-banner {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-card);
  background: #0f172a;
}
.responsive-hero-banner img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-height: 320px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.responsive-hero-banner .banner-overlay-content {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,23,42,0.88) 0%, rgba(15,23,42,0.5) 65%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 36px;
  color: #fff;
}
@media (max-width: 768px) {
  .responsive-hero-banner .banner-overlay-content {
    position: relative;
    background: #0f172a;
    padding: 20px;
  }
  .responsive-hero-banner img {
    max-height: 200px;
  }
}

/* ==========================================================================
   MÓDULOS PRINCIPAIS DO PAINEL (GRID & IMAGENS PREENCHIDAS CORRETAMENTE)
   ========================================================================== */
.painel-bottom-cards-section {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border-card);
}

.modules-interactive-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

@media (max-width: 1200px) {
  .modules-interactive-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .modules-interactive-strip {
    grid-template-columns: 1fr;
  }
}

.module-banner-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}

.module-banner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.module-banner-card .module-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  background: #090d16 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.4);
}

.module-banner-card .module-img-wrap img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: auto !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-banner-card:hover .module-img-wrap img {
  transform: scale(1.03);
}

.module-banner-card h4 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-title);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}

.module-banner-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 16px 0;
  flex: 1;
}

.module-banner-card .banner-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  transition: gap 0.2s ease, color 0.2s ease;
}

.module-banner-card .banner-link:hover {
  color: var(--color-primary-hover);
  gap: 10px;
}



/* ==========================================================================
   TEACHEIAQUI PAINEL - PADRONIZAÇÃO DE NEGRITO E ALINHAMENTO
   ========================================================================== */
.quick-tile .tile-label {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.sidebar-nav-btn,
.sidebar-user-info .user-name,
.top-action-btn,
.view-header-bar h3,
.catalog-card-body h4,
.module-banner-card h4,
.status-header-row h4 {
  font-weight: 700;
}

/* ==========================================================================
   TEACHEIAQUI PAINEL - MODO NOTURNO COMPLETO (DARK MODE)
   ========================================================================== */
body.dark-mode.painel-body,
body.dark-mode .painel-body {
  background-color: #0b1120 !important;
  color: #cbd5e1 !important;
}

body.dark-mode .painel-layout {
  background-color: #0b1120;
}

/* Sidebar no Modo Escuro */
body.dark-mode .painel-sidebar {
  background: #111a2e !important;
  border-color: #1e2c47 !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.35);
}

body.dark-mode .sidebar-header,
body.dark-mode .sidebar-user-card {
  border-color: #1e2c47 !important;
}

body.dark-mode .sidebar-user-info .greeting,
body.dark-mode .sidebar-user-info .user-email {
  color: #94a3b8 !important;
}

body.dark-mode .sidebar-user-info .user-name {
  color: #f8fafc !important;
}

body.dark-mode .sidebar-nav-btn {
  color: #cbd5e1;
}

body.dark-mode .sidebar-nav-btn:hover {
  background: #19253d;
}

body.dark-mode .sidebar-nav-item.active .sidebar-nav-btn {
  color: #ffffff !important;
}

/* Header Superior do Painel no Modo Escuro */
body.dark-mode .painel-top-header {
  background: linear-gradient(135deg, #0f172a, #1e293b 60%, #1e3a8a) !important;
  border-bottom: 1px solid #22324e !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .top-search-wrap {
  background: #19253d !important;
  border: 1px solid #283a5c !important;
}

body.dark-mode .top-search-wrap input {
  color: #f8fafc !important;
}

body.dark-mode .top-search-wrap input::placeholder {
  color: #64748b !important;
}

body.dark-mode .top-search-wrap i {
  color: #94a3b8 !important;
}

body.dark-mode .top-action-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}

body.dark-mode .top-action-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

/* Quick Tiles (Todos os 33 Atalhos Centrais) */
body.dark-mode .quick-tile {
  background: #131d31 !important;
  border-color: #22324e !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .quick-tile:hover {
  border-color: #3b82f6 !important;
  background: #17233a !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .quick-tile .tile-label {
  color: #f8fafc !important;
}

body.dark-mode .quick-tile .tile-icon {
  color: #94a3b8 !important;
}

body.dark-mode .quick-tile:hover .tile-icon {
  color: #60a5fa !important;
}

/* Widgets da Lateral Direita */
body.dark-mode .widget-balance-card,
body.dark-mode .widget-points-card,
body.dark-mode .widget-expansion-card,
body.dark-mode .widget-card-holder,
body.dark-mode .widget-status-card {
  background: #131d31 !important;
  border-color: #22324e !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .balance-info .balance-amount,
body.dark-mode .points-info .points-val {
  color: #f8fafc !important;
}

body.dark-mode .balance-wallet-icon {
  background: #1e293b !important;
  color: #818cf8 !important;
}

body.dark-mode .points-trophy-icon {
  background: #064e3b !important;
  color: #34d399 !important;
}

body.dark-mode .progress-meta-bar {
  background: #19253d !important;
}

body.dark-mode .copy-input-group {
  background: #0f172a !important;
  border-color: #22324e !important;
}

body.dark-mode .copy-input-group input {
  color: #cbd5e1 !important;
}

body.dark-mode .card-status-grid {
  border-color: #1e2c47 !important;
}

body.dark-mode .card-status-grid .stat-item strong {
  color: #f8fafc !important;
}

body.dark-mode .status-box-sub {
  background: #19253d !important;
  border-color: #22324e !important;
}

body.dark-mode .status-box-sub .sub-val {
  color: #f8fafc !important;
}

/* Telas Internas (Todas as Views, Tabelas, Filtros, Cards) */
body.dark-mode .view-header-bar h3 {
  color: #f8fafc !important;
}

body.dark-mode .view-header-bar p {
  color: #94a3b8 !important;
}

body.dark-mode .table-responsive-box {
  background: #131d31 !important;
  border-color: #22324e !important;
}

body.dark-mode .custom-data-table th {
  background: #19253d !important;
  color: #94a3b8 !important;
  border-color: #22324e !important;
}

body.dark-mode .custom-data-table td {
  color: #e2e8f0 !important;
  border-color: #1e2c47 !important;
}

body.dark-mode .custom-data-table tr:hover td {
  background: #17233a !important;
}

body.dark-mode .catalog-item-card,
body.dark-mode .mmn-tree-wrapper,
body.dark-mode .module-banner-card {
  background: #131d31 !important;
  border-color: #22324e !important;
}

body.dark-mode .catalog-card-body h4,
body.dark-mode .module-banner-card h4 {
  color: #f8fafc !important;
}

body.dark-mode .catalog-card-body p,
body.dark-mode .module-banner-card p {
  color: #94a3b8 !important;
}

body.dark-mode .catalog-price-row {
  border-color: #1e2c47 !important;
}

body.dark-mode .mmn-node {
  background: #19253d !important;
  border-color: #283a5c !important;
  color: #f8fafc !important;
}

body.dark-mode .mmn-node.root-node {
  background: #1e3a8a !important;
  border-color: #3b82f6 !important;
}

/* Modais e Formulários no Modo Escuro */
body.dark-mode .painel-modal-card {
  background: #131d31 !important;
  border: 1px solid #22324e !important;
}

body.dark-mode .painel-modal-header {
  border-color: #1e2c47 !important;
}

body.dark-mode .painel-modal-header h3 {
  color: #f8fafc !important;
}

body.dark-mode .painel-form-group label {
  color: #e2e8f0 !important;
}

body.dark-mode .painel-form-group input,
body.dark-mode .painel-form-group select,
body.dark-mode .painel-form-group textarea {
  background: #19253d !important;
  border-color: #283a5c !important;
  color: #f8fafc !important;
}

body.dark-mode .painel-form-group input:focus,
body.dark-mode .painel-form-group select:focus,
body.dark-mode .painel-form-group textarea:focus {
  border-color: #60a5fa !important;
  background: #17233a !important;
}

body.dark-mode .amenity-checkbox-label {
  background: #19253d !important;
  border-color: #283a5c !important;
  color: #e2e8f0 !important;
}

body.dark-mode .member-search-input-wrap {
  background: #19253d !important;
  border-color: #283a5c !important;
}

body.dark-mode .member-search-input-wrap input {
  color: #f8fafc !important;
}

body.dark-mode .member-scrollable-list {
  background: #131d31 !important;
  border-color: #283a5c !important;
}

body.dark-mode .member-list-item {
  border-color: #1e2c47 !important;
}

body.dark-mode .member-list-item:hover,
body.dark-mode .member-list-item.selected {
  background: #19253d !important;
}

body.dark-mode .member-item-info .member-name {
  color: #f8fafc !important;
}

body.dark-mode .photo-upload-container {
  background: #19253d !important;
  border-color: #283a5c !important;
}

/* ==========================================================================
   LOTE 2: RESPONSIVIDADE E DARK MODE DOS KPIS DO DASHBOARD
   ========================================================================== */
body.dark-mode .kpi-executive-card {
  background: #131d31 !important;
  border-color: #22324e !important;
}
body.dark-mode .kpi-executive-card:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .kpi-title {
  color: #94a3b8 !important;
}
body.dark-mode .kpi-number {
  color: #f8fafc !important;
}
body.dark-mode .kpi-unit {
  color: #64748b !important;
}
body.dark-mode .balance-highlight .kpi-icon-bubble { background: #064e3b !important; color: #34d399 !important; }
body.dark-mode .points-highlight .kpi-icon-bubble { background: #451a03 !important; color: #fbbf24 !important; }
body.dark-mode .network-highlight .kpi-icon-bubble { background: #1e3a8a !important; color: #60a5fa !important; }
body.dark-mode .plan-highlight .kpi-icon-bubble { background: #3b0764 !important; color: #c084fc !important; }

@media (max-width: 1200px) {
  .dashboard-kpi-summary-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 20px 24px 0 24px;
  }
}

@media (max-width: 768px) {
  .dashboard-kpi-summary-strip {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 16px 0 16px;
  }
  .kpi-executive-card {
    padding: 16px;
  }
}

/* ==========================================================================
   LOTE 5: MOBILE DRAWER & POLISH DE ACESSIBILIDADE
   ========================================================================== */
.mobile-sidebar-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm, 8px);
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--trans-fast);
}
.mobile-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
}

.sidebar-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sidebar-mobile-backdrop.active {
  display: block;
  opacity: 1;
}

@media (max-width: 992px) {
  .mobile-sidebar-toggle {
    display: inline-flex;
  }

  .painel-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 290px;
    max-width: 85vw;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
  }

  .painel-sidebar.mobile-open {
    transform: translateX(0);
  }

  .painel-content-body {
    grid-template-columns: 1fr !important;
    padding: 20px 16px 36px 16px !important;
  }

  .painel-top-header {
    padding: 14px 16px !important;
  }

  .top-search-wrap {
    display: none; /* Em mobile, foca no conteúdo sem sobrecarga */
  }

  .quick-action-tiles-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   ENHANCED DARK MODE CONTRAST & ACCESSIBILITY (WCAG 2.1 AA)
   Garante legibilidade cristalina em todos os botões, cards e formulários
   ========================================================================== */

/* 1. Botões no Modo Dark */
body.dark-mode .btn-outline {
  background-color: #19253d !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .btn-outline:hover {
  background-color: #22324e !important;
  color: #60a5fa !important;
  border-color: #3b82f6 !important;
}

body.dark-mode .btn-ghost {
  color: #94a3b8 !important;
}

body.dark-mode .btn-ghost:hover {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

/* 2. Filtros e Categorias de Atalhos (Hub Bubbles) */
body.dark-mode .hub-bubble-btn {
  background: #131d31 !important;
  border: 1px solid #283a5c !important;
  color: #94a3b8 !important;
}

body.dark-mode .hub-bubble-btn:hover {
  background: #19253d !important;
  color: #f8fafc !important;
  border-color: #3b82f6 !important;
}

body.dark-mode .hub-bubble-btn.active {
  background: #2563eb !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* 3. Containers e Cards com fundo branco herdado ou inline */
body.dark-mode .view-container-box {
  background: transparent !important;
}

body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#ffffff"] {
  background-color: #131d31 !important;
  border-color: #22324e !important;
  color: #e2e8f0 !important;
}

body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f8fafc"],
body.dark-mode [style*="background: #f1f5f9"],
body.dark-mode [style*="background:#f1f5f9"] {
  background-color: #19253d !important;
  border-color: #283a5c !important;
  color: #cbd5e1 !important;
}

/* 4. Boxes informativos e avisos em cards */
body.dark-mode [style*="background: #eef2ff"],
body.dark-mode [style*="background:#eef2ff"] {
  background-color: #1e2540 !important;
  border-color: #312e81 !important;
  color: #a5b4fc !important;
}

body.dark-mode [style*="background: #ecfdf5"],
body.dark-mode [style*="background:#ecfdf5"],
body.dark-mode [style*="background: #f0fdf4"],
body.dark-mode [style*="background:#f0fdf4"] {
  background-color: #062f22 !important;
  border-color: #065f46 !important;
  color: #6ee7b7 !important;
}

/* 5. Inputs, selects e textareas em qualquer view ou modal */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #19253d !important;
  border-color: #283a5c !important;
  color: #f8fafc !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #64748b !important;
}

body.dark-mode select option {
  background-color: #131d31 !important;
  color: #f8fafc !important;
}

/* 6. Textos, títulos e elementos gerais em cards no Dark Mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .user-name,
body.dark-mode .tile-label,
body.dark-mode strong,
body.dark-mode b {
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

body.dark-mode p,
body.dark-mode span:not(.badge-status):not(.catalog-tag):not(.cat-count):not(.ir-tooltip):not(.btn-select-pic):not([class*="badge"]),
body.dark-mode label,
body.dark-mode div:not(.catalog-tag):not(.badge-status):not(.tile-icon) {
  color: #cbd5e1;
}

body.dark-mode .text-muted,
body.dark-mode p.text-muted,
body.dark-mode span.text-muted {
  color: #94a3b8 !important;
}

/* Garante que cards e blocos tenham contraste e textos legíveis */
body.dark-mode .module-banner-card {
  background: #131d31 !important;
  border-color: #22324e !important;
}
body.dark-mode .module-banner-card h4 {
  color: #f8fafc !important;
}
body.dark-mode .module-banner-card p {
  color: #94a3b8 !important;
}

body.dark-mode .widget-balance-card,
body.dark-mode .widget-points-card,
body.dark-mode .widget-expansion-card,
body.dark-mode .widget-card-holder,
body.dark-mode .widget-status-card {
  background: #131d31 !important;
  border-color: #22324e !important;
}

body.dark-mode .expansion-header span,
body.dark-mode .balance-info .balance-label,
body.dark-mode .points-info .points-label,
body.dark-mode .expansion-link-box label,
body.dark-mode .card-status-grid .stat-item span,
body.dark-mode .status-box-sub .sub-lbl {
  color: #94a3b8 !important;
}

body.dark-mode .balance-info .balance-amount,
body.dark-mode .points-info .points-val,
body.dark-mode .card-status-grid .stat-item strong,
body.dark-mode .status-box-sub .sub-val {
  color: #f8fafc !important;
}

body.dark-mode .servico-item-row {
  background: #19253d !important;
  border-color: #283a5c !important;
  color: #f8fafc !important;
}
body.dark-mode .servico-item-row strong {
  color: #f8fafc !important;
}

body.dark-mode .painel-modal-card {
  background: #131d31 !important;
  border-color: #283a5c !important;
  color: #e2e8f0 !important;
}

/* 7. Marketplace e Agendamentos Cards no Dark Mode */
body.dark-mode .catalog-item-card {
  background: #131d31 !important;
  border-color: #22324e !important;
}

body.dark-mode .mkt-chip {
  background: #19253d !important;
  border-color: #283a5c !important;
  color: #cbd5e1 !important;
}

body.dark-mode .mkt-chip:hover {
  background: #22324e !important;
  color: #f8fafc !important;
}

body.dark-mode .mkt-chip.active {
  background: #ec4899 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
}

body.dark-mode .recipient-chip-btn {
  background: #19253d !important;
  border-color: #283a5c !important;
  color: #f8fafc !important;
}

body.dark-mode .recipient-chip-btn:hover {
  background: #22324e !important;
  border-color: #3b82f6 !important;
}

/* 8. Estilização dos Links de Expansão e Botão Copiar */
body.dark-mode .copy-input-group .btn-copy {
  background: #2563eb !important;
  color: #ffffff !important;
}

body.dark-mode .copy-input-group .btn-copy:hover {
  background: #1d4ed8 !important;
}

/* 9. Sub-abas de Cursos (Ao Vivo & Gravados) */
.course-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--trans-fast, all 0.2s ease);
}
.course-tab-btn.active {
  background: var(--color-primary, #2563eb) !important;
  color: #ffffff !important;
  border: 1px solid var(--color-primary, #2563eb) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.course-tab-btn:not(.active) {
  background: #f8fafc;
  color: var(--text-title, #1e293b);
  border: 1px solid var(--border-card, #e2e8f0);
}
body.dark-mode .course-tab-btn:not(.active) {
  background: #19253d !important;
  color: #cbd5e1 !important;
  border-color: #283a5c !important;
}
body.dark-mode .course-tab-btn:not(.active):hover {
  background: #22324e !important;
  color: #60a5fa !important;
}

/* 10. Hero Banners Ilustrados em Views */
.responsive-hero-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.08));
}
.responsive-hero-banner img {
  display: block;
  width: 100%;
}
.banner-overlay-content {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.88) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  pointer-events: none;
}

/* ==========================================================================
   SIDEBAR NAV ITEMS MULTINACIONAL — ABAS E ÍCONES COLORIDOS HARMONIOSOS
   ========================================================================== */

/* Definição de Cores Vivas e Específicas por Categoria (Semântico) */
.sidebar-nav-item[data-nav-color="cyan"] { --tab-c: #06b6d4; --tab-bg: rgba(6, 182, 212, 0.10); --tab-bg-hover: rgba(6, 182, 212, 0.20); --tab-badge-bg: rgba(6, 182, 212, 0.16); --tab-glow: rgba(6, 182, 212, 0.4); }
.sidebar-nav-item[data-nav-color="blue"] { --tab-c: #3b82f6; --tab-bg: rgba(59, 130, 246, 0.10); --tab-bg-hover: rgba(59, 130, 246, 0.20); --tab-badge-bg: rgba(59, 130, 246, 0.16); --tab-glow: rgba(59, 130, 246, 0.4); }
.sidebar-nav-item[data-nav-color="pink"] { --tab-c: #ec4899; --tab-bg: rgba(236, 72, 153, 0.10); --tab-bg-hover: rgba(236, 72, 153, 0.20); --tab-badge-bg: rgba(236, 72, 153, 0.16); --tab-glow: rgba(236, 72, 153, 0.4); }
.sidebar-nav-item[data-nav-color="purple"] { --tab-c: #a855f7; --tab-bg: rgba(168, 85, 247, 0.10); --tab-bg-hover: rgba(168, 85, 247, 0.20); --tab-badge-bg: rgba(168, 85, 247, 0.16); --tab-glow: rgba(168, 85, 247, 0.4); }
.sidebar-nav-item[data-nav-color="amber"] { --tab-c: #f59e0b; --tab-bg: rgba(245, 158, 11, 0.10); --tab-bg-hover: rgba(245, 158, 11, 0.20); --tab-badge-bg: rgba(245, 158, 11, 0.16); --tab-glow: rgba(245, 158, 11, 0.4); }
.sidebar-nav-item[data-nav-color="yellow"] { --tab-c: #eab308; --tab-bg: rgba(234, 179, 8, 0.10); --tab-bg-hover: rgba(234, 179, 8, 0.20); --tab-badge-bg: rgba(234, 179, 8, 0.16); --tab-glow: rgba(234, 179, 8, 0.4); }
.sidebar-nav-item[data-nav-color="emerald"] { --tab-c: #10b981; --tab-bg: rgba(16, 185, 129, 0.10); --tab-bg-hover: rgba(16, 185, 129, 0.20); --tab-badge-bg: rgba(16, 185, 129, 0.16); --tab-glow: rgba(16, 185, 129, 0.4); }
.sidebar-nav-item[data-nav-color="sky"] { --tab-c: #0284c7; --tab-bg: rgba(2, 132, 199, 0.10); --tab-bg-hover: rgba(2, 132, 199, 0.20); --tab-badge-bg: rgba(2, 132, 199, 0.16); --tab-glow: rgba(2, 132, 199, 0.4); }
.sidebar-nav-item[data-nav-color="orange"] { --tab-c: #f97316; --tab-bg: rgba(249, 115, 22, 0.10); --tab-bg-hover: rgba(249, 115, 22, 0.20); --tab-badge-bg: rgba(249, 115, 22, 0.16); --tab-glow: rgba(249, 115, 22, 0.4); }
.sidebar-nav-item[data-nav-color="indigo"] { --tab-c: #6366f1; --tab-bg: rgba(99, 102, 241, 0.10); --tab-bg-hover: rgba(99, 102, 241, 0.20); --tab-badge-bg: rgba(99, 102, 241, 0.16); --tab-glow: rgba(99, 102, 241, 0.4); }
.sidebar-nav-item[data-nav-color="forest"] { --tab-c: #059669; --tab-bg: rgba(5, 150, 105, 0.10); --tab-bg-hover: rgba(5, 150, 105, 0.20); --tab-badge-bg: rgba(5, 150, 105, 0.16); --tab-glow: rgba(5, 150, 105, 0.4); }
.sidebar-nav-item[data-nav-color="slate"] { --tab-c: #94a3b8; --tab-bg: rgba(148, 163, 184, 0.10); --tab-bg-hover: rgba(148, 163, 184, 0.20); --tab-badge-bg: rgba(148, 163, 184, 0.16); --tab-glow: rgba(148, 163, 184, 0.4); }
.sidebar-nav-item[data-nav-color="teal"] { --tab-c: #14b8a6; --tab-bg: rgba(20, 184, 166, 0.10); --tab-bg-hover: rgba(20, 184, 166, 0.20); --tab-badge-bg: rgba(20, 184, 166, 0.16); --tab-glow: rgba(20, 184, 166, 0.4); }
.sidebar-nav-item[data-nav-color="red"] { --tab-c: #ef4444; --tab-bg: rgba(239, 68, 68, 0.10); --tab-bg-hover: rgba(239, 68, 68, 0.20); --tab-badge-bg: rgba(239, 68, 68, 0.16); --tab-glow: rgba(239, 68, 68, 0.4); }

/* Formato base do botão/link da aba */
.sidebar-nav-item .sidebar-nav-btn {
  background: var(--tab-bg, rgba(241, 245, 249, 0.6));
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 12px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* Badge individual com cor viva de cada ícone */
.sidebar-nav-item .sidebar-nav-btn .nav-btn-content i {
  color: var(--tab-c, #3b82f6) !important;
  background: var(--tab-badge-bg, rgba(59, 130, 246, 0.16)) !important;
  border: 1.5px solid var(--tab-c) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.2s ease !important;
  box-shadow: 0 2px 10px var(--tab-glow, rgba(0, 0, 0, 0.15)) !important;
}

/* Efeito Hover na aba */
.sidebar-nav-item:hover .sidebar-nav-btn {
  background: var(--tab-bg-hover, #f0f7ff);
  border-color: var(--tab-c, var(--color-primary));
  color: var(--tab-c, var(--color-primary));
  transform: translateX(4px);
  box-shadow: 0 4px 14px var(--tab-glow, rgba(37, 99, 235, 0.18));
}
.sidebar-nav-item:hover .sidebar-nav-btn .nav-btn-content i {
  transform: scale(1.15);
  box-shadow: 0 4px 14px var(--tab-glow, rgba(37, 99, 235, 0.4)) !important;
}

/* Efeito Ativo (Aba selecionada) */
.sidebar-nav-item.active .sidebar-nav-btn {
  background: var(--tab-c, #3b82f6) !important;
  border-color: var(--tab-c, #3b82f6) !important;
  color: #ffffff !important;
  font-weight: 700;
  transform: translateX(4px);
  box-shadow: 0 6px 20px var(--tab-glow, rgba(37, 99, 235, 0.4)) !important;
}
.sidebar-nav-item.active .sidebar-nav-btn .nav-btn-content i {
  color: var(--tab-c, #3b82f6) !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
  transform: scale(1.08);
}
.sidebar-nav-item.active .sidebar-nav-btn .nav-chevron {
  color: #ffffff !important;
  opacity: 0.95;
}

/* Adaptação e Contraste Otimizado para Modo Escuro (Dark Mode) */
body.dark-mode .sidebar-nav-item .sidebar-nav-btn {
  background: rgba(15, 23, 42, 0.65) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}
body.dark-mode .sidebar-nav-item .sidebar-nav-btn .nav-btn-content i {
  background: var(--tab-badge-bg, rgba(59, 130, 246, 0.18)) !important;
  border: 1.5px solid var(--tab-c) !important;
  box-shadow: 0 2px 12px var(--tab-glow, rgba(0, 0, 0, 0.4)) !important;
}
body.dark-mode .sidebar-nav-item:hover .sidebar-nav-btn {
  background: var(--tab-bg-hover, rgba(30, 41, 59, 0.8)) !important;
  border-color: var(--tab-c) !important;
  color: #ffffff !important;
}
body.dark-mode .sidebar-nav-item:hover .sidebar-nav-btn .nav-btn-content i {
  background: var(--tab-badge-bg) !important;
}
body.dark-mode .sidebar-nav-item.active .sidebar-nav-btn {
  background: var(--tab-c) !important;
  border-color: var(--tab-c) !important;
  color: #ffffff !important;
}
body.dark-mode .sidebar-nav-item.active .sidebar-nav-btn .nav-btn-content i {
  color: var(--tab-c) !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* ==========================================================================
   MÓDULOS PRINCIPAIS — Cabeçalho da seção
   ========================================================================== */
.modules-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.modules-section-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modules-section-title-group i {
  font-size: 1.2rem;
  color: var(--color-primary);
}
.modules-section-title-group h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-title);
  margin: 0;
}
.modules-count-pill {
  background: var(--color-primary-light, #eef2ff);
  color: var(--color-primary, #4f46e5);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}
body.dark-mode .modules-count-pill {
  background: #1e293b;
  color: #818cf8;
}
body.dark-mode .modules-section-title-group h3 {
  color: #f8fafc;
}

/* ==========================================================================
   MÓDULOS EXTRAS — Sala Trader & IA em destaque separado
   ========================================================================== */
.modules-extra-section {
  margin-top: 28px;
}
.modules-extra-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  padding-left: 2px;
}
.modules-extra-heading i {
  color: #f59e0b;
  font-size: 1rem;
}
.modules-extra-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.module-extra-card {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg-card, #fff), var(--bg-card, #fff)) padding-box,
    linear-gradient(135deg, #f59e0b 0%, #ec4899 100%) border-box;
}
.module-extra-card:hover {
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.15);
}
body.dark-mode .module-extra-card {
  background:
    linear-gradient(#131d31, #131d31) padding-box,
    linear-gradient(135deg, #f59e0b 0%, #ec4899 100%) border-box;
}
@media (max-width: 760px) {
  .modules-extra-strip {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BARRA DE ÍCONES LATERAL DIREITA (Icon Rail)
   ========================================================================== */
.icon-rail {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

/* Toggle button visible at all times */
.icon-rail-toggle {
  width: 36px;
  height: 64px;
  background: var(--color-primary, #2563eb);
  color: #fff;
  border-radius: 10px 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: -4px 0 16px rgba(37, 99, 235, 0.3);
  transition: background 0.2s ease;
  user-select: none;
  margin-bottom: 4px;
}
.icon-rail-toggle:hover {
  background: #1d4ed8;
}

/* Inner scrollable list of icon buttons */
.icon-rail-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 12px 0 0 12px;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  border: 1px solid #e2e8f0;
  border-right: none;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.icon-rail.open .icon-rail-inner {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Each icon button styled identically to left sidebar with individual colors */
.ir-btn {
  position: relative;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
  margin: 3px 6px;
  padding: 0;
}

.ir-btn i {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Cores idênticas às da esquerda por data-target */
.ir-btn[data-target="view-dashboard"] i { color: #3b82f6 !important; background: rgba(59, 130, 246, 0.16) !important; border: 1.5px solid #3b82f6 !important; }
.ir-btn[data-target="view-marketplace"] i { color: #ec4899 !important; background: rgba(236, 72, 153, 0.16) !important; border: 1.5px solid #ec4899 !important; }
.ir-btn[data-target="view-cursos"] i { color: #a855f7 !important; background: rgba(168, 85, 247, 0.16) !important; border: 1.5px solid #a855f7 !important; }
.ir-btn[data-target="view-guia"] i { color: #f59e0b !important; background: rgba(245, 158, 11, 0.16) !important; border: 1.5px solid #f59e0b !important; }
.ir-btn[data-target="view-planos"] i { color: #eab308 !important; background: rgba(234, 179, 8, 0.16) !important; border: 1.5px solid #eab308 !important; }
.ir-btn[data-target="view-produtos"] i { color: #10b981 !important; background: rgba(16, 185, 129, 0.16) !important; border: 1.5px solid #10b981 !important; }
.ir-btn[data-target="view-agendamentos"] i { color: #0284c7 !important; background: rgba(2, 132, 199, 0.16) !important; border: 1.5px solid #0284c7 !important; }
.ir-btn[data-target="view-pedidos"] i { color: #f97316 !important; background: rgba(249, 115, 22, 0.16) !important; border: 1.5px solid #f97316 !important; }
.ir-btn[data-target="view-vendas"] i { color: #10b981 !important; background: rgba(16, 185, 129, 0.16) !important; border: 1.5px solid #10b981 !important; }
.ir-btn[data-target="view-rede"] i { color: #06b6d4 !important; background: rgba(6, 182, 212, 0.16) !important; border: 1.5px solid #06b6d4 !important; }
.ir-btn[data-target="view-divulgacao"] i { color: #6366f1 !important; background: rgba(99, 102, 241, 0.16) !important; border: 1.5px solid #6366f1 !important; }
.ir-btn[data-target="view-downloads"] i { color: #3b82f6 !important; background: rgba(59, 130, 246, 0.16) !important; border: 1.5px solid #3b82f6 !important; }
.ir-btn[data-target="view-pagamentos"] i { color: #059669 !important; background: rgba(5, 150, 105, 0.16) !important; border: 1.5px solid #059669 !important; }
.ir-btn[data-target="view-dados"] i { color: #64748b !important; background: rgba(100, 116, 139, 0.16) !important; border: 1.5px solid #64748b !important; }
.ir-btn[data-target="view-imoveis"] i { color: #14b8a6 !important; background: rgba(20, 184, 166, 0.16) !important; border: 1.5px solid #14b8a6 !important; }
.ir-btn[data-target="view-autos"] i { color: #ef4444 !important; background: rgba(239, 68, 68, 0.16) !important; border: 1.5px solid #ef4444 !important; }
.ir-btn[data-target="view-classificados"] i { color: #f59e0b !important; background: rgba(245, 158, 11, 0.16) !important; border: 1.5px solid #f59e0b !important; }
.ir-btn[data-target="view-recargas"] i { color: #10b981 !important; background: rgba(16, 185, 129, 0.16) !important; border: 1.5px solid #10b981 !important; }
.ir-btn[data-target="view-trader"] i { color: #f59e0b !important; background: rgba(245, 158, 11, 0.16) !important; border: 1.5px solid #f59e0b !important; }
.ir-btn[data-target="view-comissoes"] i { color: #14b8a6 !important; background: rgba(20, 184, 166, 0.16) !important; border: 1.5px solid #14b8a6 !important; }
.ir-btn[data-target="view-recibos"] i { color: #a855f7 !important; background: rgba(168, 85, 247, 0.16) !important; border: 1.5px solid #a855f7 !important; }
.ir-btn[data-target="view-minisite"] i { color: #6366f1 !important; background: rgba(99, 102, 241, 0.16) !important; border: 1.5px solid #6366f1 !important; }
.ir-btn[data-target="view-admin"] i { color: #ec4899 !important; background: rgba(236, 72, 153, 0.16) !important; border: 1.5px solid #ec4899 !important; }
.ir-btn[data-target="view-ajuda"] i { color: #3b82f6 !important; background: rgba(59, 130, 246, 0.16) !important; border: 1.5px solid #3b82f6 !important; }

.ir-btn:hover {
  transform: scale(1.15) translateX(-4px);
}
.ir-btn:hover i {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
.ir-btn.active-view {
  background: rgba(37, 99, 235, 0.12);
  border-radius: 12px;
}
.ir-btn.active-view i {
  transform: scale(1.12);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.5) !important;
}

/* Tooltip label shown on hover */
.ir-tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #f8fafc;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translateY(-50%) translateX(4px);
  z-index: 10;
}
.ir-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #1e293b;
}
.ir-btn:hover .ir-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Dark mode for icon rail */
body.dark-mode .icon-rail-inner {
  background: #0f172a;
  border-color: #1e293b;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.4);
}
body.dark-mode .ir-tooltip {
  background: #f8fafc;
  color: #0f172a;
}
body.dark-mode .ir-tooltip::after {
  border-left-color: #f8fafc;
}
body.dark-mode .icon-rail-toggle {
  background: #1d4ed8;
}

/* Legibilidade máxima no Dark Mode para textos em negrito */
body.dark-mode strong,
body.dark-mode b,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .tile-label,
body.dark-mode .user-name {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Hide rail on very small screens where sidebar covers everything */
@media (max-width: 640px) {
  .icon-rail {
    display: none;
  }
}


/* ==========================================================================
   ESTILOS DEDICADOS DE IMPRESSÃO (@media print) PARA RECIBOS E RELATÓRIOS
   ========================================================================== */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ocultar elementos irrelevantes para o documento impresso */
  .sidebar,
  .top-header,
  .quick-tiles-nav,
  .icon-rail,
  .clean-floating-hub,
  .btn,
  button,
  .modal-footer,
  .btn-close,
  #btn-recarga-mercado-pago,
  nav,
  header {
    display: none !important;
  }

  /* Se o modal de recibo estiver aberto, exibi-lo perfeitamente na página */
  #modal-recibo-impressao {
    display: block !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  #modal-recibo-impressao .modal-dialog {
    max-width: 100% !important;
    margin: 0 !important;
  }

  #modal-recibo-impressao .modal-content {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    padding: 20px !important;
  }

  #modal-recibo-impressao .modal-header {
    border-bottom: 2px solid #000 !important;
    color: #000 !important;
  }

  #modal-recibo-impressao .modal-title {
    color: #000 !important;
  }

  /* Se estiver na visão geral de recibos */
  #view-recibos {
    display: block !important;
  }

  .table {
    width: 100% !important;
    border-collapse: collapse !important;
    color: #000000 !important;
  }

  .table th, .table td {
    border: 1px solid #cccccc !important;
    padding: 8px 12px !important;
    color: #000000 !important;
    background: #ffffff !important;
  }

  .table th {
    background-color: #f1f5f9 !important;
    font-weight: bold !important;
  }

  .badge {
    border: 1px solid #000 !important;
    color: #000 !important;
    background: transparent !important;
  }
}


/* ==========================================================================
   CORREÇÃO CRÍTICA: ROLAGEM DO MOUSE (SCROLL) EM TODOS OS MODAIS DO PAINEL
   ========================================================================== */
.painel-modal-backdrop {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px !important;
}

.painel-modal-backdrop.active {
  display: flex !important;
}

.painel-modal-card {
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: auto !important;
}

.painel-modal-body {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 1 auto !important;
}

/* Scrollbar customizada moderna para os modais */
.painel-modal-body::-webkit-scrollbar {
  width: 6px;
}
.painel-modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}
.painel-modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.painel-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

body.dark-mode .painel-modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}
body.dark-mode .painel-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   IMPRESSÃO PERFEITA DE RECIBOS E COMPROVANTES EM PDF
   ========================================================================== */
@media print {
  /* Oculta tudo na página */
  body * {
    visibility: hidden !important;
  }

  /* Se o modal de recibo estiver ativo, ele e seus filhos ficam visíveis */
  #modal-recibo-impressao,
  #modal-recibo-impressao * {
    visibility: visible !important;
  }

  #modal-recibo-impressao {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    box-shadow: none !important;
  }

  #modal-recibo-impressao .modal-dialog,
  #modal-recibo-impressao .modal-content,
  #modal-recibo-impressao .painel-modal-card {
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #000000 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 20px !important;
  }

  /* Oculta botões do modal na impressão */
  #modal-recibo-impressao .modal-footer,
  #modal-recibo-impressao button,
  #modal-recibo-impressao .btn-close,
  #modal-recibo-impressao .modal-close-accessible {
    display: none !important;
  }
}


/* ==========================================================================
   CENTRALIZAÇÃO PERFEITA DO CARD E BADGE DE USUÁRIO NA SIDEBAR
   ========================================================================== */
.sidebar-user-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 18px 16px !important;
}

.sidebar-user-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

#sidebar-role-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 6px auto 0 auto !important;
  text-align: center !important;
}