/* ==========================================================================
   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;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}

/* Sidebar Esquerda (Discord Channel List) */
.painel-sidebar {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  background: #131d31;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow-y: hidden;
  z-index: 110;
  box-shadow: none;
}

.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;
  overflow-y: auto;
}

/* Top Banner Header (Discord Clean Topbar) */
.painel-top-header {
  background: #ffffff;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #0f172a;
  border-bottom: 1px solid var(--border-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.dark-mode .painel-top-header {
  background: #131d31;
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.header-title-breadcrumb-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.painel-top-header h2 {
  font-size: 1.45rem;
  color: var(--text-title);
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.painel-breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.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: var(--text-title);
  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(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.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.prepaid-highlight::before { background: #f59e0b; }
.kpi-executive-card.sales-highlight::before { background: #8b5cf6; }
.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; }
.prepaid-highlight .kpi-icon-bubble { background: #fffbeb; color: #f59e0b; }
.sales-highlight .kpi-icon-bubble { background: #f5f3ff; color: #8b5cf6; }
.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;
}
.view-rule-box {
  display: none !important;
}

/* 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: 580px;
  border-collapse: collapse;
  text-align: left;
}
.custom-data-table th {
  background: #f8fafc;
  padding: 12px 14px;
  font-size: 0.74rem;
  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: 12px 14px;
  font-size: 0.85rem;
  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;
  flex-wrap: wrap;
  gap: 10px;
  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;
  visibility: hidden;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.painel-modal-backdrop.active {
  display: flex;
  visibility: visible;
  pointer-events: auto;
}
.painel-modal-card {
  background: #ffffff;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalPop 0.2s ease;
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.painel-modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.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: 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
}
.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) {
  .quick-action-tiles-grid, .modules-interactive-strip {
    grid-template-columns: 1fr;
  }
  .painel-content-body, .painel-bottom-cards-section, .view-container-box {
    padding: 16px;
  }
}

/* ==========================================================================
   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-header .brand-white {
  color: #ffffff !important;
}
body.dark-mode .sidebar-header .brand-slogan {
  color: #94a3b8 !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 .prepaid-highlight .kpi-icon-bubble { background: #451a03 !important; color: #fbbf24 !important; }
body.dark-mode .sales-highlight .kpi-icon-bubble { background: #2e1065 !important; color: #a78bfa !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 {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sidebar-mobile-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@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: 12px 16px !important;
    gap: 10px;
    flex-wrap: wrap;
  }

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

  .quick-action-tiles-grid {
    grid-template-columns: 1fr !important;
  }
  
  .quick-tile .tile-icon,
  .quick-tile i {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 640px) {
  .header-title-breadcrumb-wrap .painel-breadcrumb-nav {
    display: none;
  }
  .painel-top-header h2 {
    font-size: 1.2rem !important;
  }
  .top-user-actions {
    gap: 8px !important;
  }
  .top-user-actions .role-selector-wrap {
    display: none !important;
  }
  .top-action-btn {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
  }
  .view-header-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .view-header-bar > button {
    width: 100% !important;
    justify-content: center !important;
  }
  .widget-balance-actions {
    display: flex !important;
    flex-direction: column !important;
  }
  .widget-balance-actions > button {
    width: 100% !important;
    grid-column: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .widget-balance-actions > button span,
  .widget-balance-actions > button i {
    display: inline-block !important;
    visibility: visible !important;
    font-size: 0.85rem !important;
  }
}

@media (max-width: 380px) {
  .painel-top-header {
    padding: 10px 12px !important;
  }
  .mobile-sidebar-toggle {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }
  .painel-content-body, .view-container-box {
    padding: 12px 10px !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: #ffffff !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.4) !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: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Sidebar ativa: mantém a cor temática de cada item — sem sobrescrita genérica */

/* ==========================================================================
   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;
}

/* ==========================================================================
   VITRINE OFICIAL DE PARCEIROS & PRESTADORES
   ========================================================================== */
.partner-showcase-card:hover {
  transform: translateY(-4px);
  border-color: #38bdf8 !important;
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.25);
}

/* ==========================================================================
   DISCORD 3-PANEL RESPONSIVE ARCHITECTURE (2025–2026)
   - Mantém 100% das cores e variáveis existentes
   - Camadas de superfície harmônicas
   - Ergonomia Discord: Pílulas, Canais #, Hover Suave, Cantos Arredondados
   ========================================================================== */

/* 1. Layout Raiz */
.discord-layout-root {
  display: flex !important;
  flex-direction: row !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 100vw !important;
  overflow: hidden !important;
  background-color: var(--bg-page, #f1f5f9) !important;
}

body.dark-mode .discord-layout-root {
  background-color: #0f172a !important;
}

/* 2. Coluna 1: Discord Guild Rail (Oculta para preservar o leiaute limpo da interface) */
.discord-guild-rail {
  display: none !important;
}

.guild-item-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.guild-pill {
  position: absolute;
  left: 0;
  width: 4px;
  height: 8px;
  border-radius: 0 4px 4px 0;
  background-color: #ffffff;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.guild-item-wrapper:hover .guild-pill {
  opacity: 0.8;
  height: 20px;
}

.guild-item-wrapper.active .guild-pill {
  opacity: 1 !important;
  height: 38px !important;
  background-color: var(--color-primary, #4f46e5) !important;
}

.guild-btn {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background-color: #182235;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Cores padronizadas por módulo na Guild Rail (Coluna 1) */
.guild-item-wrapper[data-guild-target="view-dashboard"] .guild-btn {
  color: #38bdf8;
  background-color: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
}
.guild-item-wrapper[data-guild-target="view-marketplace"] .guild-btn {
  color: #ec4899;
  background-color: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.25);
}
.guild-item-wrapper[data-guild-target="view-cursos"] .guild-btn {
  color: #a855f7;
  background-color: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.25);
}
.guild-item-wrapper[data-guild-target="view-rede"] .guild-btn {
  color: #06b6d4;
  background-color: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.25);
}
.guild-item-wrapper[data-guild-target="view-comissoes"] .guild-btn {
  color: #10b981;
  background-color: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
}
.guild-item-wrapper[data-guild-target="view-produtos"] .guild-btn {
  color: #22c55e;
  background-color: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
}
.guild-item-wrapper[data-guild-target="view-guia"] .guild-btn {
  color: #f59e0b;
  background-color: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
}

.guild-btn:hover,
.guild-item-wrapper.active .guild-btn {
  border-radius: 16px !important;
  transform: translateY(-1px);
}

.guild-item-wrapper[data-guild-target="view-dashboard"]:hover .guild-btn,
.guild-item-wrapper[data-guild-target="view-dashboard"].active .guild-btn {
  background: linear-gradient(135deg, #0284c7, #2563eb) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
}

.guild-item-wrapper[data-guild-target="view-marketplace"]:hover .guild-btn,
.guild-item-wrapper[data-guild-target="view-marketplace"].active .guild-btn {
  background: linear-gradient(135deg, #db2777, #e11d48) !important;
  color: #ffffff !important;
  border-color: #f472b6 !important;
  box-shadow: 0 4px 14px rgba(219, 39, 119, 0.45) !important;
}

.guild-item-wrapper[data-guild-target="view-cursos"]:hover .guild-btn,
.guild-item-wrapper[data-guild-target="view-cursos"].active .guild-btn {
  background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
  color: #ffffff !important;
  border-color: #c084fc !important;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.45) !important;
}

.guild-item-wrapper[data-guild-target="view-rede"]:hover .guild-btn,
.guild-item-wrapper[data-guild-target="view-rede"].active .guild-btn {
  background: linear-gradient(135deg, #0891b2, #0284c7) !important;
  color: #ffffff !important;
  border-color: #22d3ee !important;
  box-shadow: 0 4px 14px rgba(8, 145, 178, 0.45) !important;
}

.guild-item-wrapper[data-guild-target="view-comissoes"]:hover .guild-btn,
.guild-item-wrapper[data-guild-target="view-comissoes"].active .guild-btn {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  color: #ffffff !important;
  border-color: #34d399 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
}

.guild-item-wrapper[data-guild-target="view-produtos"]:hover .guild-btn,
.guild-item-wrapper[data-guild-target="view-produtos"].active .guild-btn {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  color: #ffffff !important;
  border-color: #4ade80 !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.45) !important;
}

.guild-item-wrapper[data-guild-target="view-guia"]:hover .guild-btn,
.guild-item-wrapper[data-guild-target="view-guia"].active .guild-btn {
  background: linear-gradient(135deg, #d97706, #ea580c) !important;
  color: #ffffff !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45) !important;
}

.guild-btn:hover i,
.guild-item-wrapper.active .guild-btn i {
  color: #ffffff !important;
}

.guild-brand-btn {
  background: radial-gradient(circle at 30% 30%, #1e3a8a, #06163a) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

.guild-brand-btn:hover {
  border-radius: 16px;
}

.guild-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guild-separator {
  width: 32px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 1px;
  margin: 4px 0;
}

.guild-footer-item {
  margin-top: auto;
}

.guild-theme-btn {
  color: #fbbf24 !important;
  background-color: rgba(251, 191, 36, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
}
.guild-theme-btn:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border-color: #fcd34d !important;
}

/* Modo claro (Light Mode) para a barra mestre */
body:not(.dark-mode) .discord-guild-rail {
  background-color: #f1f5f9 !important;
  border-right-color: #e2e8f0 !important;
}

body:not(.dark-mode) .guild-btn {
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

body:not(.dark-mode) .guild-item-wrapper[data-guild-target="view-dashboard"] .guild-btn {
  background-color: #e0f2fe !important;
  color: #0284c7 !important;
}
body:not(.dark-mode) .guild-item-wrapper[data-guild-target="view-marketplace"] .guild-btn {
  background-color: #fce7f3 !important;
  color: #db2777 !important;
}
body:not(.dark-mode) .guild-item-wrapper[data-guild-target="view-cursos"] .guild-btn {
  background-color: #f3e8ff !important;
  color: #7c3aed !important;
}
body:not(.dark-mode) .guild-item-wrapper[data-guild-target="view-rede"] .guild-btn {
  background-color: #e0f2fe !important;
  color: #0891b2 !important;
}
body:not(.dark-mode) .guild-item-wrapper[data-guild-target="view-comissoes"] .guild-btn {
  background-color: #d1fae5 !important;
  color: #059669 !important;
}
body:not(.dark-mode) .guild-item-wrapper[data-guild-target="view-produtos"] .guild-btn {
  background-color: #dcfce7 !important;
  color: #16a34a !important;
}
body:not(.dark-mode) .guild-item-wrapper[data-guild-target="view-guia"] .guild-btn {
  background-color: #fef3c7 !important;
  color: #d97706 !important;
}

body:not(.dark-mode) .guild-btn:hover,
body:not(.dark-mode) .guild-item-wrapper.active .guild-btn {
  color: #ffffff !important;
}

body:not(.dark-mode) .guild-separator {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* 3. Coluna 2: Discord Channel Sidebar (~280px) */
.discord-channel-sidebar {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  background-color: #131d31 !important; /* Cor dark secundária nativa */
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  padding: 0 !important;
  box-shadow: none !important;
  z-index: 110 !important;
  flex-shrink: 0 !important;
}

.discord-server-banner {
  padding: 12px 16px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
  background: rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
}

.server-title-meta .server-name {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.server-badge-verified {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #10b981 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.discord-channels-scroller {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 12px 8px 20px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.channel-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.channel-category-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #94a3b8;
  padding: 6px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.channel-category-header:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #f1f5f9;
}

.channel-category-header .category-arrow {
  font-size: 0.65rem;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.channel-group.collapsed .channel-category-header .category-arrow {
  transform: rotate(-90deg);
}

/* ━━━ Títulos de Categoria — Pill Destacado com Cor Temática ━━━ */

/* Base: margin-top para separar grupos */
.channel-group {
  margin-bottom: 6px !important;
}

/* VISÃO GERAL — Sky Blue */
.channel-group[data-nav-group="visao-geral"] .channel-category-header {
  color: #38bdf8 !important;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0.05) 100%) !important;
  border-left: 4px solid #38bdf8 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 7px 10px 7px 9px !important;
  margin-bottom: 4px !important;
  font-size: 0.72rem !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
  letter-spacing: 0.1em !important;
}
.channel-group[data-nav-group="visao-geral"] .channel-category-header .category-arrow {
  color: #38bdf8 !important;
}

/* FINANCEIRO — Emerald */
.channel-group[data-nav-group="financeiro"] .channel-category-header {
  color: #34d399 !important;
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.18) 0%, rgba(52, 211, 153, 0.05) 100%) !important;
  border-left: 4px solid #34d399 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 7px 10px 7px 9px !important;
  margin-bottom: 4px !important;
  font-size: 0.72rem !important;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.5) !important;
  letter-spacing: 0.1em !important;
}
.channel-group[data-nav-group="financeiro"] .channel-category-header .category-arrow {
  color: #34d399 !important;
}

/* NEGÓCIOS — Orange */
.channel-group[data-nav-group="negocios"] .channel-category-header {
  color: #fb923c !important;
  background: linear-gradient(90deg, rgba(251, 146, 60, 0.18) 0%, rgba(251, 146, 60, 0.05) 100%) !important;
  border-left: 4px solid #fb923c !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 7px 10px 7px 9px !important;
  margin-bottom: 4px !important;
  font-size: 0.72rem !important;
  text-shadow: 0 0 10px rgba(251, 146, 60, 0.5) !important;
  letter-spacing: 0.1em !important;
}
.channel-group[data-nav-group="negocios"] .channel-category-header .category-arrow {
  color: #fb923c !important;
}

/* REDE — Cyan */
.channel-group[data-nav-group="rede"] .channel-category-header {
  color: #22d3ee !important;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.18) 0%, rgba(34, 211, 238, 0.05) 100%) !important;
  border-left: 4px solid #22d3ee !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 7px 10px 7px 9px !important;
  margin-bottom: 4px !important;
  font-size: 0.72rem !important;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.5) !important;
  letter-spacing: 0.1em !important;
}
.channel-group[data-nav-group="rede"] .channel-category-header .category-arrow {
  color: #22d3ee !important;
}

/* CRESCIMENTO — Purple */
.channel-group[data-nav-group="crescimento"] .channel-category-header {
  color: #c084fc !important;
  background: linear-gradient(90deg, rgba(192, 132, 252, 0.18) 0%, rgba(192, 132, 252, 0.05) 100%) !important;
  border-left: 4px solid #c084fc !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 7px 10px 7px 9px !important;
  margin-bottom: 4px !important;
  font-size: 0.72rem !important;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.5) !important;
  letter-spacing: 0.1em !important;
}
.channel-group[data-nav-group="crescimento"] .channel-category-header .category-arrow {
  color: #c084fc !important;
}

/* CONTA — Amber/Gold */
.channel-group[data-nav-group="conta"] .channel-category-header {
  color: #facc15 !important;
  background: linear-gradient(90deg, rgba(250, 204, 21, 0.18) 0%, rgba(250, 204, 21, 0.05) 100%) !important;
  border-left: 4px solid #facc15 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 7px 10px 7px 9px !important;
  margin-bottom: 4px !important;
  font-size: 0.72rem !important;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.5) !important;
  letter-spacing: 0.1em !important;
}
.channel-group[data-nav-group="conta"] .channel-category-header .category-arrow {
  color: #facc15 !important;
}

.discord-channel-sidebar .sidebar-nav-menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.discord-channel-sidebar .sidebar-nav-item {
  width: 100% !important;
}

.discord-channel-sidebar .sidebar-nav-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #cbd5e1 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-align: left !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.discord-channel-sidebar .sidebar-nav-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  transform: translateX(3px) !important;
}

.discord-channel-sidebar .sidebar-nav-item.active .sidebar-nav-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Ícone com Moldura Arrumada e Colorida na Barra de Canais */
.discord-channel-sidebar .nav-btn-content {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.discord-channel-sidebar .nav-label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.discord-channel-sidebar .nav-item-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  flex-shrink: 0 !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12) !important;
}

.discord-channel-sidebar .sidebar-nav-btn:hover .nav-item-icon {
  transform: scale(1.1) !important;
}

/* ━━━ Paleta Única por Ícone — Cada item tem sua própria cor ━━━ */

/* ── VISÃO GERAL ── */
/* Dashboard → Sky Blue */
.discord-channel-sidebar [data-target="view-dashboard"] .nav-item-icon,
.discord-channel-sidebar .bi-speedometer2.nav-item-icon {
  color: #38bdf8 !important;
  background-color: rgba(56, 189, 248, 0.22) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.55) !important;
}
/* Página Inicial → Indigo */
.discord-channel-sidebar .sidebar-nav-item:has(a[href="index.html"]) .nav-item-icon,
.discord-channel-sidebar a[href="index.html"] .nav-item-icon,
.discord-channel-sidebar .bi-globe2.nav-item-icon {
  color: #818cf8 !important;
  background-color: rgba(129, 140, 248, 0.22) !important;
  border: 1.5px solid rgba(129, 140, 248, 0.55) !important;
}

/* ── FINANCEIRO ── */
/* Carteira & Saldo → Emerald */
.discord-channel-sidebar [data-target="view-pagamentos"] .nav-item-icon,
.discord-channel-sidebar .bi-wallet2.nav-item-icon {
  color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.22) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.55) !important;
}
/* Transferências P2P → Rose */
.discord-channel-sidebar .sidebar-nav-item:has(button[onclick*="modal-cashback"]) .nav-item-icon,
.discord-channel-sidebar button[onclick*="modal-cashback"] .nav-item-icon,
.discord-channel-sidebar .bi-arrow-left-right.nav-item-icon {
  color: #f43f5e !important;
  background-color: rgba(244, 63, 94, 0.22) !important;
  border: 1.5px solid rgba(244, 63, 94, 0.55) !important;
}
/* Comissões & Saques → Amber */
.discord-channel-sidebar [data-target="view-comissoes"] .nav-item-icon,
.discord-channel-sidebar .bi-cash-stack.nav-item-icon {
  color: #f59e0b !important;
  background-color: rgba(245, 158, 11, 0.22) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.55) !important;
}
/* Pagamentos & Recargas → Violet */
.discord-channel-sidebar [data-target="view-recargas"] .nav-item-icon,
.discord-channel-sidebar .bi-phone.nav-item-icon {
  color: #7c3aed !important;
  background-color: rgba(124, 58, 237, 0.22) !important;
  border: 1.5px solid rgba(124, 58, 237, 0.55) !important;
}
/* Recibos & Faturas → Cyan */
.discord-channel-sidebar [data-target="view-recibos"] .nav-item-icon,
.discord-channel-sidebar .bi-receipt.nav-item-icon {
  color: #06b6d4 !important;
  background-color: rgba(6, 182, 212, 0.22) !important;
  border: 1.5px solid rgba(6, 182, 212, 0.55) !important;
}

/* ── NEGÓCIOS ── */
/* Marketplace → Hot Pink */
.discord-channel-sidebar [data-target="view-marketplace"] .nav-item-icon,
.discord-channel-sidebar .bi-shop-window.nav-item-icon {
  color: #ec4899 !important;
  background-color: rgba(236, 72, 153, 0.22) !important;
  border: 1.5px solid rgba(236, 72, 153, 0.55) !important;
}
/* Minhas Vendas → Yellow */
.discord-channel-sidebar [data-target="view-vendas"] .nav-item-icon,
.discord-channel-sidebar .bi-graph-up-arrow.nav-item-icon {
  color: #eab308 !important;
  background-color: rgba(234, 179, 8, 0.22) !important;
  border: 1.5px solid rgba(234, 179, 8, 0.55) !important;
}
/* Meus Pedidos → Orange */
.discord-channel-sidebar [data-target="view-pedidos"] .nav-item-icon,
.discord-channel-sidebar .bi-bag-check.nav-item-icon {
  color: #f97316 !important;
  background-color: rgba(249, 115, 22, 0.22) !important;
  border: 1.5px solid rgba(249, 115, 22, 0.55) !important;
}
/* Parceiros Locais → Lime */
.discord-channel-sidebar [data-target="view-guia"] .nav-item-icon,
.discord-channel-sidebar .bi-geo-alt.nav-item-icon {
  color: #84cc16 !important;
  background-color: rgba(132, 204, 22, 0.22) !important;
  border: 1.5px solid rgba(132, 204, 22, 0.55) !important;
}
/* Meus Imóveis → Purple */
.discord-channel-sidebar [data-target="view-imoveis"] .nav-item-icon,
.discord-channel-sidebar .bi-building.nav-item-icon {
  color: #a855f7 !important;
  background-color: rgba(168, 85, 247, 0.22) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.55) !important;
}
/* Classificados & Autos → Light Blue */
.discord-channel-sidebar [data-target="view-autos"] .nav-item-icon,
.discord-channel-sidebar .bi-car-front.nav-item-icon {
  color: #3b82f6 !important;
  background-color: rgba(59, 130, 246, 0.22) !important;
  border: 1.5px solid rgba(59, 130, 246, 0.55) !important;
}

/* ── REDE ── */
/* Minha Rede MMN → Teal */
.discord-channel-sidebar [data-target="view-rede"] .nav-item-icon,
.discord-channel-sidebar .bi-diagram-3.nav-item-icon {
  color: #14b8a6 !important;
  background-color: rgba(20, 184, 166, 0.22) !important;
  border: 1.5px solid rgba(20, 184, 166, 0.55) !important;
}
/* Indicações & Links → Fuchsia */
.discord-channel-sidebar [data-target="view-divulgacao"] .nav-item-icon,
.discord-channel-sidebar .bi-share.nav-item-icon {
  color: #d946ef !important;
  background-color: rgba(217, 70, 239, 0.22) !important;
  border: 1.5px solid rgba(217, 70, 239, 0.55) !important;
}

/* ── CRESCIMENTO ── */
/* Minisite → Sky */
.discord-channel-sidebar [data-target="view-minisite"] .nav-item-icon,
.discord-channel-sidebar .bi-window-fullscreen.nav-item-icon {
  color: #0ea5e9 !important;
  background-color: rgba(14, 165, 233, 0.22) !important;
  border: 1.5px solid rgba(14, 165, 233, 0.55) !important;
}
/* Cursos → Violet */
.discord-channel-sidebar [data-target="view-cursos"] .nav-item-icon,
.discord-channel-sidebar .bi-mortarboard.nav-item-icon {
  color: #8b5cf6 !important;
  background-color: rgba(139, 92, 246, 0.22) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.55) !important;
}
/* Agendamentos → Green */
.discord-channel-sidebar [data-target="view-agendamentos"] .nav-item-icon,
.discord-channel-sidebar .bi-calendar-check.nav-item-icon {
  color: #22c55e !important;
  background-color: rgba(34, 197, 94, 0.22) !important;
  border: 1.5px solid rgba(34, 197, 94, 0.55) !important;
}
/* Trader → Lime Green */
.discord-channel-sidebar [data-target="view-trader"] .nav-item-icon,
.discord-channel-sidebar .bi-graph-up.nav-item-icon {
  color: #a3e635 !important;
  background-color: rgba(163, 230, 53, 0.22) !important;
  border: 1.5px solid rgba(163, 230, 53, 0.55) !important;
}
/* Downloads → Indigo */
.discord-channel-sidebar [data-target="view-downloads"] .nav-item-icon,
.discord-channel-sidebar .bi-download.nav-item-icon {
  color: #6366f1 !important;
  background-color: rgba(99, 102, 241, 0.22) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.55) !important;
}

/* ── CONTA & SUPORTE ── */
/* Planos → Gold */
.discord-channel-sidebar [data-target="view-planos"] .nav-item-icon,
.discord-channel-sidebar .bi-award.nav-item-icon {
  color: #facc15 !important;
  background-color: rgba(250, 204, 21, 0.22) !important;
  border: 1.5px solid rgba(250, 204, 21, 0.55) !important;
}
/* Meus Dados → Slate */
.discord-channel-sidebar [data-target="view-dados"] .nav-item-icon,
.discord-channel-sidebar .bi-sliders.nav-item-icon {
  color: #94a3b8 !important;
  background-color: rgba(148, 163, 184, 0.22) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.55) !important;
}
/* Ajuda → Cyan */
.discord-channel-sidebar [data-target="view-ajuda"] .nav-item-icon,
.discord-channel-sidebar .bi-question-circle.nav-item-icon {
  color: #22d3ee !important;
  background-color: rgba(34, 211, 238, 0.22) !important;
  border: 1.5px solid rgba(34, 211, 238, 0.55) !important;
}
/* Admin → Red */
.discord-channel-sidebar [data-target="view-admin"] .nav-item-icon,
.discord-channel-sidebar .bi-shield-lock.nav-item-icon {
  color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.22) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.55) !important;
}

/* Active State dos Ícones: Preenchimento vibrante e destaque */
.discord-channel-sidebar .sidebar-nav-item.active .nav-item-icon {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Active state com glow temático por seção */
.discord-channel-sidebar .sidebar-nav-item[data-target="view-dashboard"].active .nav-item-icon {
  color: #38bdf8 !important;
  background-color: rgba(56, 189, 248, 0.25) !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4) !important;
}
.discord-channel-sidebar .sidebar-nav-item[data-target="view-dashboard"].active .sidebar-nav-btn {
  background: rgba(56, 189, 248, 0.1) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.2) !important;
}
.discord-channel-sidebar .sidebar-nav-item[data-target="view-pagamentos"].active .nav-item-icon {
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.4) !important;
}
.discord-channel-sidebar .sidebar-nav-item[data-target="view-comissoes"].active .nav-item-icon {
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.4) !important;
}
.discord-channel-sidebar .sidebar-nav-item[data-target="view-marketplace"].active .nav-item-icon {
  box-shadow: 0 0 14px rgba(244, 114, 182, 0.4) !important;
}
.discord-channel-sidebar .sidebar-nav-item[data-target="view-rede"].active .nav-item-icon {
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.4) !important;
}

/* Light mode: manter cores nos ícones dos itens de Visão Geral */
body:not(.dark-mode) .discord-channel-sidebar [data-target="view-dashboard"] .nav-item-icon,
body:not(.dark-mode) .discord-channel-sidebar .bi-speedometer2.nav-item-icon {
  color: #0284c7 !important;
  background-color: rgba(2, 132, 199, 0.12) !important;
  border: 1px solid rgba(2, 132, 199, 0.35) !important;
}
body:not(.dark-mode) .discord-channel-sidebar .sidebar-nav-item:has(a[href="index.html"]) .nav-item-icon,
body:not(.dark-mode) .discord-channel-sidebar a[href="index.html"] .nav-item-icon,
body:not(.dark-mode) .discord-channel-sidebar .bi-globe2.nav-item-icon {
  color: #4f46e5 !important;
  background-color: rgba(79, 70, 229, 0.12) !important;
  border: 1px solid rgba(79, 70, 229, 0.35) !important;
}
/* Light mode: active state de Dashboard */
body:not(.dark-mode) .discord-channel-sidebar .sidebar-nav-item[data-target="view-dashboard"].active .nav-item-icon {
  color: #0284c7 !important;
  background-color: rgba(2, 132, 199, 0.2) !important;
  border: 1px solid rgba(2, 132, 199, 0.5) !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.3) !important;
}
body:not(.dark-mode) .discord-channel-sidebar .sidebar-nav-item[data-target="view-dashboard"].active .sidebar-nav-btn {
  background: rgba(2, 132, 199, 0.08) !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
}

/* Light Mode: Suporte de Contraste Elegante para a Coluna 2 */
body:not(.dark-mode) .discord-channel-sidebar {
  background-color: #f8fafc !important;
  border-right-color: #e2e8f0 !important;
}
body:not(.dark-mode) .discord-server-banner {
  background: #f1f5f9 !important;
  border-bottom-color: #e2e8f0 !important;
}
body:not(.dark-mode) .server-title-meta .server-name {
  color: #0f172a !important;
}
/* Light Mode: Pill destacado por categoria — cores mais escuras para contraste */
body:not(.dark-mode) .channel-category-header {
  color: #64748b !important;
}
/* Manter pill colorido no modo claro */
body:not(.dark-mode) .channel-group[data-nav-group="visao-geral"] .channel-category-header {
  color: #0284c7 !important;
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.12) 0%, rgba(2, 132, 199, 0.04) 100%) !important;
  border-left: 3px solid #0284c7 !important;
}
body:not(.dark-mode) .channel-group[data-nav-group="visao-geral"] .channel-category-header .category-arrow {
  color: #0284c7 !important;
}
body:not(.dark-mode) .channel-group[data-nav-group="financeiro"] .channel-category-header {
  color: #059669 !important;
  background: linear-gradient(90deg, rgba(5, 150, 105, 0.12) 0%, rgba(5, 150, 105, 0.04) 100%) !important;
  border-left: 3px solid #059669 !important;
}
body:not(.dark-mode) .channel-group[data-nav-group="financeiro"] .channel-category-header .category-arrow {
  color: #059669 !important;
}
body:not(.dark-mode) .channel-group[data-nav-group="negocios"] .channel-category-header {
  color: #c2410c !important;
  background: linear-gradient(90deg, rgba(194, 65, 12, 0.12) 0%, rgba(194, 65, 12, 0.04) 100%) !important;
  border-left: 3px solid #c2410c !important;
}
body:not(.dark-mode) .channel-group[data-nav-group="negocios"] .channel-category-header .category-arrow {
  color: #c2410c !important;
}
body:not(.dark-mode) .channel-group[data-nav-group="rede"] .channel-category-header {
  color: #0e7490 !important;
  background: linear-gradient(90deg, rgba(14, 116, 144, 0.12) 0%, rgba(14, 116, 144, 0.04) 100%) !important;
  border-left: 3px solid #0e7490 !important;
}
body:not(.dark-mode) .channel-group[data-nav-group="rede"] .channel-category-header .category-arrow {
  color: #0e7490 !important;
}
body:not(.dark-mode) .channel-group[data-nav-group="crescimento"] .channel-category-header {
  color: #7c3aed !important;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.12) 0%, rgba(124, 58, 237, 0.04) 100%) !important;
  border-left: 3px solid #7c3aed !important;
}
body:not(.dark-mode) .channel-group[data-nav-group="crescimento"] .channel-category-header .category-arrow {
  color: #7c3aed !important;
}
body:not(.dark-mode) .channel-group[data-nav-group="conta"] .channel-category-header {
  color: #b45309 !important;
  background: linear-gradient(90deg, rgba(180, 83, 9, 0.12) 0%, rgba(180, 83, 9, 0.04) 100%) !important;
  border-left: 3px solid #b45309 !important;
}
body:not(.dark-mode) .channel-group[data-nav-group="conta"] .channel-category-header .category-arrow {
  color: #b45309 !important;
}
body:not(.dark-mode) .discord-channel-sidebar .sidebar-nav-btn {
  color: #334155 !important;
}
body:not(.dark-mode) .discord-channel-sidebar .sidebar-nav-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}
body:not(.dark-mode) .discord-channel-sidebar .sidebar-nav-item.active .sidebar-nav-btn {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}
body:not(.dark-mode) .discord-user-footer {
  background-color: #f1f5f9 !important;
  border-top-color: #e2e8f0 !important;
}
body:not(.dark-mode) .user-info-text .user-name {
  color: #0f172a !important;
}
body:not(.dark-mode) .control-btn {
  background: #ef4444 !important;
  color: #ffffff !important;
}
body:not(.dark-mode) .control-btn:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}
body:not(.dark-mode) .control-btn:focus-visible {
  outline: 2px solid #ef4444 !important;
  outline-offset: 2px !important;
}

/* User Footer Bar Pinned Bottom */
.discord-user-footer {
  height: 56px !important;
  background-color: #0b1329 !important; /* Tom escuro mais profundo da paleta */
  padding: 0 10px 0 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
}

.user-avatar-wrap {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.user-avatar-wrap .sidebar-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--color-primary, #4f46e5) !important;
  object-fit: cover !important;
  display: block !important;
}

.status-indicator.online {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: #10b981 !important; /* Cor de sucesso original */
  border: 2px solid #0b1329 !important;
}

.user-info-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.user-info-text .user-name {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: 100% !important;
}

.user-info-text .user-subtag {
  font-size: 0.68rem !important;
  color: #10b981 !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.user-quick-controls {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
}

.control-btn {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-size: 0.9rem !important;
  padding: 0 !important;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.control-btn.logout:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

/* 4. Coluna 3: Discord Stage Main */
.discord-stage-main {
  flex: 1 !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background-color: #f1f5f9 !important;
  min-width: 0 !important;
}

body.dark-mode .discord-stage-main {
  background-color: #0f172a !important;
}

.discord-topbar {
  height: 52px !important;
  padding: 0 20px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--border-card, #e2e8f0) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 100 !important;
  overflow: visible !important;
}

body.dark-mode .discord-topbar {
  background: #131d31 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

.discord-channel-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.channel-hash-icon {
  font-size: 1.35rem !important;
  color: #64748b !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.discord-channel-title-wrap h2 {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: inherit !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

.channel-divider {
  color: #cbd5e1 !important;
  font-size: 0.9rem !important;
  opacity: 0.6 !important;
}

body.dark-mode .channel-divider {
  color: #475569 !important;
}

.channel-topic-desc {
  font-size: 0.78rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 320px !important;
}

body.dark-mode .channel-topic-desc {
  color: #94a3b8 !important;
}

.discord-search-wrap {
  background: #f1f5f9 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid var(--border-card, #e2e8f0) !important;
}

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

.discord-search-wrap input {
  background: transparent !important;
  border: none !important;
  font-size: 0.8rem !important;
  color: inherit !important;
  outline: none !important;
  width: 150px !important;
}

.painel-view-section {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 24px 28px 48px 28px !important;
}

/* 5. Coluna 4 Opcional: Discord Details Rail — REMOVIDA A PEDIDO DO USUÁRIO */
.discord-details-rail,
#discord-details-rail,
#toggle-right-rail-btn,
.clean-floating-hub {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.details-rail-header {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

body.dark-mode .details-rail-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.details-rail-header h4 {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.dark-mode .details-rail-header h4 {
  color: #94a3b8 !important;
}

.details-rail-content {
  padding: 16px 12px !important;
  flex: 1 !important;
  overflow-y: auto !important;
}

.member-group-label {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.04em !important;
}

.member-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.member-row:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.dark-mode .member-row:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.member-avatar-box {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
}

.member-avatar-box img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.member-info .member-name {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.2 !important;
}

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

.member-info .member-badge {
  font-size: 0.62rem !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
}

.details-action-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.details-action-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  background: #ffffff !important;
  border: 1px solid var(--border-card, #e2e8f0) !important;
  border-radius: 6px !important;
  color: #334155 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: left !important;
}

body.dark-mode .details-action-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: #cbd5e1 !important;
}

.details-action-btn:hover {
  background: var(--color-primary, #4f46e5) !important;
  color: #ffffff !important;
  border-color: var(--color-primary, #4f46e5) !important;
  transform: translateX(2px) !important;
}

.details-action-btn:hover i {
  color: #ffffff !important;
}

/* ==========================================================================
   RESPONSIVIDADE DISCORD (DESKTOP, TABLET, IPAD & MOBILE)
   ========================================================================== */
@media (max-width: 1200px) {
  .discord-details-rail {
    display: none !important;
  }
}

@media (max-width: 992px) {
  .discord-channel-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1000 !important; /* Above the 998 backdrop */
    transform: translateX(-150%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
  }

  .discord-channel-sidebar.mobile-open { /* Fix class name from .active to .mobile-open */
    transform: translateX(0) !important;
  }

  .channel-topic-desc {
    display: none !important;
  }

  .channel-divider {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .discord-guild-rail {
    display: none !important;
  }

  .discord-channel-sidebar {
    left: 0 !important;
    bottom: 60px !important;
    width: 280px !important;
    max-width: 85vw !important;
  }

  .painel-view-section {
    padding: 16px 14px 80px 14px !important;
  }

  .discord-search-wrap {
    flex: 1 !important;
    max-width: 150px !important;
  }
}

/* ==========================================================================
   SISTEMA VISUAL MULTINACIONAL SAAS FINANCEIRO (TEACHEIAQUI HUB)
   ========================================================================== */

/* 1. Header & Topbar Refinada */
.saas-top-header {
  background: var(--bg-card, #ffffff);
  border-bottom: 1px solid var(--border-card, #e2e8f0);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

body.dark-mode .saas-top-header {
  background: #0f172a;
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.saas-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
  font-weight: 500;
}

.saas-breadcrumb .bc-parent {
  color: var(--text-muted, #64748b);
  transition: color 0.15s ease;
}

.saas-breadcrumb .bc-sep {
  color: #94a3b8;
  font-size: 0.72rem;
}

.saas-breadcrumb .bc-current {
  color: var(--text-title, #0f172a);
  font-weight: 600;
}

body.dark-mode .saas-breadcrumb .bc-current {
  color: #f8fafc;
}

/* Global Search Trigger (⌘K) */
.saas-global-search {
  flex: 1;
  max-width: 440px;
  margin: 0 16px;
}

.search-command-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-input, #f1f5f9);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.84rem;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

body.dark-mode .search-command-btn {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.search-command-btn:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #0f172a;
}

body.dark-mode .search-command-btn:hover {
  background: #27354f;
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.search-placeholder-text {
  flex: 1;
}

.search-kbd-shortcut {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-card, #cbd5e1);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--text-muted, #64748b);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

body.dark-mode .search-kbd-shortcut {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

/* User Profile Trigger & Dropdown */
.topbar-user-menu-wrap {
  position: relative !important;
  z-index: 2000 !important;
}

.topbar-user-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.topbar-user-trigger:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.04));
  border-color: var(--border-subtle, #e2e8f0);
}

body.dark-mode .topbar-user-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.topbar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #4f46e5;
}

.topbar-user-greeting {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-title, #0f172a);
}

body.dark-mode .topbar-user-greeting {
  color: #f8fafc;
}

.dropdown-arrow {
  font-size: 0.7rem;
  color: var(--text-muted, #64748b);
  transition: transform 0.2s ease;
}

/* Floating Profile Dropdown */
.topbar-profile-dropdown {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  width: 240px !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border-card, #e2e8f0) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0,0,0,0.1) !important;
  padding: 8px !important;
  z-index: 99999 !important;
  animation: dropdownFadeIn 0.15s ease-out;
}

body.dark-mode .topbar-profile-dropdown {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6) !important;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-header-info {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
}

.dropdown-header-info strong {
  font-size: 0.88rem;
  color: var(--text-title, #0f172a);
}

body.dark-mode .dropdown-header-info strong {
  color: #f8fafc;
}

.dropdown-divider {
  height: 1px;
  background: var(--border-subtle, #e2e8f0);
  margin: 6px 0;
}

body.dark-mode .dropdown-divider {
  background: rgba(255, 255, 255, 0.08);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-title, #334155);
  border-radius: 8px;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

body.dark-mode .dropdown-item {
  color: #cbd5e1;
}

.dropdown-item:hover {
  background: var(--bg-hover, #f1f5f9);
  color: #0f172a;
}

body.dark-mode .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.dropdown-item.danger-item {
  color: #ef4444;
}

.dropdown-item.danger-item:hover {
  background: #fef2f2;
  color: #dc2626;
}

body.dark-mode .dropdown-item.danger-item:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.notification-dot-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px var(--bg-card, #fff);
}

/* 2. Welcome Banner */
.saas-welcome-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 8px 0;
  flex-wrap: wrap;
  gap: 16px;
}

.welcome-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-title, #0f172a);
  margin: 0 0 4px 0;
  letter-spacing: -0.02em;
}

body.dark-mode .welcome-title {
  color: #f8fafc;
}

.welcome-subtitle {
  font-size: 0.88rem;
  color: var(--text-muted, #64748b);
  margin: 0;
}

.welcome-quick-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #059669;
}

body.dark-mode .welcome-quick-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.status-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator-dot.online {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

/* 3. Executive 3-Cards Grid */
.saas-executive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

@media (max-width: 1100px) {
  .saas-executive-grid {
    grid-template-columns: 1fr;
  }
}

.saas-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-card, #e2e8f0);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body.dark-mode .saas-card {
  background: #131d31;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.saas-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

body.dark-mode .saas-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.card-header-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.card-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.card-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
}

.card-tooltip {
  color: #94a3b8;
  font-size: 0.78rem;
  cursor: help;
}

.card-main-metric {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}

.currency-symbol {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}

.metric-value-huge {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-title, #0f172a);
  line-height: 1.1;
}

body.dark-mode .metric-value-huge {
  color: #f8fafc;
}

.metric-unit {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted, #64748b);
}

/* Card 1: Sub-saldos */
.card-sub-metrics-row {
  display: flex;
  align-items: center;
  background: var(--bg-hover, #f8fafc);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
}

body.dark-mode .card-sub-metrics-row {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.sub-metric-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sub-metric-lbl {
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sub-metric-val {
  font-size: 0.88rem;
  color: var(--text-title, #0f172a);
}

body.dark-mode .sub-metric-val {
  color: #f8fafc;
}

.sub-metric-sep {
  width: 1px;
  height: 28px;
  background: var(--border-subtle, #e2e8f0);
  margin: 0 12px;
}

body.dark-mode .sub-metric-sep {
  background: rgba(255, 255, 255, 0.08);
}

.card-actions-row {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

/* Buttons System (44px min-touch target) */
.saas-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  border: 1px solid transparent;
}

.saas-btn:active {
  transform: scale(0.98);
}

.saas-btn-primary {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28);
}

.saas-btn-primary:hover {
  background: #4338ca;
  border-color: #4338ca;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.36);
}

.saas-btn-secondary {
  background: var(--bg-hover, #f1f5f9);
  color: var(--text-title, #1e293b);
  border-color: var(--border-subtle, #cbd5e1);
}

body.dark-mode .saas-btn-secondary {
  background: #1e293b;
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.12);
}

.saas-btn-secondary:hover {
  background: #e2e8f0;
}

body.dark-mode .saas-btn-secondary:hover {
  background: #27354f;
}

.saas-btn-outline {
  background: transparent;
  color: var(--text-title, #334155);
  border-color: var(--border-card, #cbd5e1);
}

body.dark-mode .saas-btn-outline {
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.14);
}

.saas-btn-outline:hover {
  background: var(--bg-hover, #f8fafc);
  border-color: #94a3b8;
}

body.dark-mode .saas-btn-outline:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
}

.saas-btn-ghost {
  background: transparent;
  color: #4f46e5;
  border-color: transparent;
  font-weight: 600;
}

body.dark-mode .saas-btn-ghost {
  color: #818cf8;
}

.saas-btn-ghost:hover {
  background: rgba(79, 70, 229, 0.08);
}

.saas-btn-sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 0.78rem;
  border-radius: 8px;
}

.saas-btn.full-width {
  width: 100%;
}

/* Card 2: Resultado e Sparkline */
.card-badge-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.card-badge-trend.positive {
  background: #ecfdf5;
  color: #059669;
}

body.dark-mode .card-badge-trend.positive {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.period-sub-text {
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
  margin-bottom: 12px;
  line-height: 1.4;
}

.sparkline-wrapper {
  width: 100%;
  height: 48px;
  margin: 6px 0 12px 0;
}

.saas-sparkline {
  width: 100%;
  height: 100%;
  display: block;
}

.card-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle, #f1f5f9);
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  margin-top: auto;
}

body.dark-mode .card-footer-meta {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.card-text-link {
  color: #4f46e5;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.15s ease;
}

body.dark-mode .card-text-link {
  color: #818cf8;
}

.card-text-link:hover {
  gap: 6px;
}

/* Card 3: Rede e Conta */
.network-meta-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-hover, #f8fafc);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
}

body.dark-mode .network-meta-list {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.network-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.meta-label {
  color: var(--text-muted, #64748b);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.meta-value {
  color: var(--text-title, #0f172a);
}

body.dark-mode .meta-value {
  color: #f8fafc;
}

/* 4. Ações Principais (6 Botões Compactos) */
.saas-section-block {
  margin-bottom: 32px;
}

.saas-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.saas-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-title, #0f172a);
  margin: 0;
  letter-spacing: -0.01em;
}

body.dark-mode .saas-section-title {
  color: #f8fafc;
}

.saas-section-desc {
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
  margin: 2px 0 0 0;
}

.saas-priority-actions-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

@media (max-width: 1200px) {
  .saas-priority-actions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .saas-priority-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.priority-action-btn {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-card, #e2e8f0);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

body.dark-mode .priority-action-btn {
  background: #131d31;
  border-color: rgba(255, 255, 255, 0.07);
}

.priority-action-btn:hover {
  transform: translateY(-2px);
  border-color: #4f46e5;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

body.dark-mode .priority-action-btn:hover {
  border-color: #6366f1;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.action-icon-pill {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.icon-primary { background: rgba(79, 70, 229, 0.12); color: #4f46e5; }
.icon-indigo { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.icon-emerald { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.icon-amber { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.icon-sky { background: rgba(2, 132, 199, 0.12); color: #0284c7; }
.icon-purple { background: rgba(147, 51, 234, 0.12); color: #9333ea; }

body.dark-mode .icon-primary { background: rgba(79, 70, 229, 0.25); color: #818cf8; }
body.dark-mode .icon-indigo { background: rgba(99, 102, 241, 0.25); color: #a5b4fc; }
body.dark-mode .icon-emerald { background: rgba(16, 185, 129, 0.25); color: #34d399; }
body.dark-mode .icon-amber { background: rgba(245, 158, 11, 0.25); color: #fbbf24; }
body.dark-mode .icon-sky { background: rgba(2, 132, 199, 0.25); color: #38bdf8; }
body.dark-mode .icon-purple { background: rgba(147, 51, 234, 0.25); color: #c084fc; }

.action-btn-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.action-btn-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-title, #0f172a);
}

body.dark-mode .action-btn-title {
  color: #f8fafc;
}

.action-btn-sub {
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
  line-height: 1.3;
}

/* 5. Pendências e Avisos (Alerts) */
.saas-alerts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.saas-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.saas-alert-item.alert-info {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

body.dark-mode .saas-alert-item.alert-info {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #86efac;
}

.saas-alert-item.alert-success {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: #075985;
}

body.dark-mode .saas-alert-item.alert-success {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.25);
  color: #7dd3fc;
}

.alert-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-content {
  flex: 1;
}

.alert-heading {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.alert-message {
  font-size: 0.8rem;
  margin: 0;
  opacity: 0.9;
  line-height: 1.4;
}

.alert-dismiss-btn {
  background: none;
  border: none;
  color: currentColor;
  opacity: 0.6;
  cursor: pointer;
  padding: 4px;
  font-size: 0.82rem;
  transition: opacity 0.15s ease;
}

.alert-dismiss-btn:hover {
  opacity: 1;
}

/* 6. Atividade Recente (Data Table) */
.table-card {
  padding: 0;
  overflow: hidden;
}

.table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
  gap: 16px;
  flex-wrap: wrap;
}

body.dark-mode .table-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.table-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-title, #0f172a);
  margin: 0;
}

body.dark-mode .table-card-title {
  color: #f8fafc;
}

.table-card-desc {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  display: block;
  margin-top: 2px;
}

.table-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.saas-table-responsive {
  width: 100%;
  overflow-x: auto;
}

.saas-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.84rem;
}

.saas-data-table th {
  padding: 12px 24px;
  background: var(--bg-hover, #f8fafc);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}

body.dark-mode .saas-data-table th {
  background: rgba(255, 255, 255, 0.02);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.saas-data-table td {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  color: var(--text-title, #334155);
}

body.dark-mode .saas-data-table td {
  border-bottom-color: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
}

.saas-data-table tr:hover td {
  background: var(--bg-hover, #f8fafc);
}

body.dark-mode .saas-data-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.badge-type-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
}

body.dark-mode .badge-type-pill {
  background: #1e293b;
  color: #cbd5e1;
}

.tx-positive {
  color: #10b981;
  font-weight: 700;
}

.tx-neutral {
  color: var(--text-title, #0f172a);
  font-weight: 600;
}

body.dark-mode .tx-neutral {
  color: #f8fafc;
}

/* 7. Métricas Secundárias no Rodapé */
.saas-secondary-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .saas-secondary-metrics-row {
    grid-template-columns: 1fr;
  }
}

.sec-metric-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-card, #e2e8f0);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

body.dark-mode .sec-metric-card {
  background: #131d31;
  border-color: rgba(255, 255, 255, 0.06);
}

.sec-metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-hover, #f1f5f9);
  color: #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

body.dark-mode .sec-metric-icon {
  background: rgba(255, 255, 255, 0.05);
  color: #818cf8;
}

.sec-metric-label {
  font-size: 0.74rem;
  color: var(--text-muted, #64748b);
  display: block;
}

.sec-metric-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-title, #0f172a);
}

body.dark-mode .sec-metric-val {
  color: #f8fafc;
}

.sec-metric-unit {
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
}

.sec-metric-note {
  font-size: 0.7rem;
  color: var(--text-muted, #64748b);
  display: block;
  margin-top: 2px;
}

.sec-metric-link {
  color: #10b981;
  text-decoration: none;
  font-weight: 600;
}

.sec-metric-link:hover {
  text-decoration: underline;
}

/* 8. Modal Todas as Ações (Catálogo Completo) */
.modal.saas-modal {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

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

.modal.saas-modal .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1;
}

.saas-modal-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 860px;
  margin: auto;
  animation: modalPop 0.2s ease;
}

.saas-modal-content {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-card, #cbd5e1);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

body.dark-mode .saas-modal-content {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.1);
}

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

body.dark-mode .saas-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-title, #0f172a);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.dark-mode .modal-title {
  color: #f8fafc;
}

.modal-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
  margin: 4px 0 0 0;
}

.btn-close-modal {
  background: none;
  border: none;
  color: var(--text-muted, #64748b);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.btn-close-modal:hover {
  background: var(--bg-hover, #f1f5f9);
  color: #0f172a;
}

body.dark-mode .btn-close-modal:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.modal-search-box {
  position: relative;
  margin-bottom: 16px;
}

.modal-search-box i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
}

.modal-search-box input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border-radius: 10px;
  border: 1px solid var(--border-card, #cbd5e1);
  background: var(--bg-input, #f8fafc);
  font-size: 0.88rem;
  color: var(--text-title, #0f172a);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.dark-mode .modal-search-box input {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.modal-search-box input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

.saas-modal-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}

body.dark-mode .saas-modal-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.saas-tab-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.saas-tab-btn:hover {
  background: var(--bg-hover, #f1f5f9);
  color: #0f172a;
}

body.dark-mode .saas-tab-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
}

.saas-tab-btn.active {
  background: #4f46e5;
  color: #ffffff;
}

.saas-all-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px;
}

@media (max-width: 768px) {
  .saas-all-actions-grid {
    grid-template-columns: 1fr;
  }
}

.saas-action-tile {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-card, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
}

body.dark-mode .saas-action-tile {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.06);
}

.saas-action-tile:hover {
  border-color: #4f46e5;
  transform: translateY(-1px);
  background: var(--bg-hover, #f8fafc);
}

body.dark-mode .saas-action-tile:hover {
  border-color: #6366f1;
  background: #27354f;
}

.saas-action-tile .tile-icon {
  font-size: 1.25rem;
  color: #4f46e5;
  margin-bottom: 2px;
}

body.dark-mode .saas-action-tile .tile-icon {
  color: #818cf8;
}

.saas-action-tile .tile-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-title, #0f172a);
}

body.dark-mode .saas-action-tile .tile-title {
  color: #f8fafc;
}

.saas-action-tile .tile-desc {
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
  line-height: 1.3;
}

.saas-modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border-subtle, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.dark-mode .saas-modal-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.modal-footer-hint {
  font-size: 0.74rem;
  color: var(--text-muted, #64748b);
}

.modal-footer-hint kbd {
  background: var(--bg-input, #e2e8f0);
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.7rem;
}

body.dark-mode .modal-footer-hint kbd {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

/* 9. Mobile Bottom Bar (5 Destinos Primários) */
.saas-mobile-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--bg-card, #ffffff);
  border-top: 1px solid var(--border-card, #e2e8f0);
  z-index: 1100;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

body.dark-mode .saas-mobile-bottom-bar {
  background: #0f172a;
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
  .saas-mobile-bottom-bar {
    display: flex;
  }
  .painel-content-body {
    padding-bottom: calc(85px + env(safe-area-inset-bottom, 20px)) !important;
  }
  .clean-floating-hub {
    bottom: calc(85px + env(safe-area-inset-bottom, 20px)) !important;
  }
}

.mobile-nav-tab {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.15s ease;
  min-height: 48px;
  min-width: 54px;
}

.mobile-nav-tab i {
  font-size: 1.2rem;
}

.mobile-nav-tab.active {
  color: #4f46e5;
  font-weight: 700;
}

body.dark-mode .mobile-nav-tab.active {
  color: #818cf8;
}

/* ==========================================================================
   CARROSSEL DE PARCEIROS & ESTILOS DE IMPRESSÃO (PDF)
   ========================================================================== */
.parceiros-nav-btn:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  transform: translateY(-50%) scale(1.1) !important;
}

@media print {
  /* Oculta tudo que não for o recibo ou tabela de faturas */
  body * {
    visibility: hidden !important;
  }
  
  /* Se o modal de recibo estiver ativo, imprime somente o cartão do comprovante */
  #modal-recibo-impressao.active,
  #modal-recibo-impressao.active .modal-dialog,
  #modal-recibo-impressao.active .modal-content,
  #modal-recibo-impressao.active #conteudo-recibo-imprimivel,
  #modal-recibo-impressao.active #conteudo-recibo-imprimivel * {
    visibility: visible !important;
  }

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

  #modal-recibo-impressao.active .modal-content {
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    box-shadow: none !important;
  }

  #modal-recibo-impressao.active .modal-header,
  #modal-recibo-impressao.active .modal-footer {
    display: none !important;
  }

  #modal-recibo-impressao.active #conteudo-recibo-imprimivel {
    color: #111827 !important;
    font-size: 11pt !important;
  }

  #modal-recibo-impressao.active #conteudo-recibo-imprimivel * {
    color: #111827 !important;
  }

  /* Caso imprima diretamente a aba view-recibos */
  #view-recibos.active,
  #view-recibos.active #area-tabela-recibos,
  #view-recibos.active #area-tabela-recibos * {
    visibility: visible !important;
  }

  #view-recibos.active {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    background: #fff !important;
    color: #000 !important;
  }
}

/* FIX MOBILE HEADER OVERLAP (DASHBOARD) */
@media (max-width: 768px) {
  .painel-top-header.discord-topbar {
    height: auto !important;
    min-height: 52px !important;
    padding: 10px 12px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .painel-top-header.discord-topbar::-webkit-scrollbar {
    display: none;
  }
  .painel-top-header.discord-topbar .topbar-right {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    width: auto !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
  }
  .painel-top-header.discord-topbar .topbar-left {
    flex-shrink: 0 !important;
  }
  #user-role-badge-header span:nth-of-type(1) {
    display: none !important;
  }
}

body:not(.dark-mode) .control-btn.logout,
body:not(.dark-mode) .control-btn[title="Preferências do Perfil"] {
    background: #ef4444 !important;
    color: #ffffff !important;
}
body:not(.dark-mode) .control-btn.logout:hover,
body:not(.dark-mode) .control-btn[title="Preferências do Perfil"]:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* LOTE VISUAL 1 - RESPONSIVIDADE MOBILE */
@media (max-width: 768px) {
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  .painel-modal-card, .saas-modal-content {
    width: 95vw !important;
    max-width: 100% !important;
    margin: 10px auto !important;
    max-height: calc(100vh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
  }

  .painel-modal-body, .saas-modal-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 120px) !important;
    max-height: calc(100dvh - 120px) !important;
    padding-bottom: 80px !important;
  }

  .painel-main, .view-section, .kpi-cards-grid, .quick-action-tiles-grid {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* LOTE VISUAL 2 - MODAL LOJA PRESTADOR */
  #modal-novo-estabelecimento .painel-modal-card {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 10px auto !important;
  }
  
  #modal-novo-estabelecimento .painel-modal-body {
    overflow-y: auto !important;
    padding-bottom: 80px !important;
  }
  
  #modal-novo-estabelecimento div[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* LOTE VISUAL 3 - BARRA DE NAVEGAÇÃO MOBILE */
  .saas-mobile-bottom-bar {
    height: auto !important;
    min-height: 64px !important;
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    padding-top: 6px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    flex-wrap: nowrap !important;
  }
  
  .saas-mobile-bottom-bar .mobile-nav-tab {
    flex: 1 1 0px !important;
    min-width: 0 !important;
    padding: 6px 2px !important;
  }

  /* LOTE VISUAL 4 - CARDS DE SALDO E KPIS MOBILE */
  .kpi-executive-card, .widget-balance-card, .widget-points-card, .widget-status-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }

  .kpi-title, .kpi-number, .balance-amount, .kpi-sub-text, .balance-label, .kpi-badge {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  .dashboard-kpi-summary-strip {
    grid-template-columns: 1fr !important;
    padding: 16px 12px 0 12px !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .painel-widgets-col {
    padding: 0 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* LOTE VISUAL 5 - MODAIS DE TRANSFERÊNCIA E ATENDIMENTO */
  #modal-cashback .painel-modal-card,
  #modal-cashback-lojista .painel-modal-card,
  #modal-config-servicos .painel-modal-card,
  #modal-novo-agendamento .painel-modal-card {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 10px auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #modal-cashback .painel-modal-body,
  #modal-cashback-lojista .painel-modal-card > div:nth-child(2),
  #modal-config-servicos .painel-modal-body,
  #modal-novo-agendamento .painel-modal-body {
    overflow-y: auto !important;
    padding-bottom: 80px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #modal-config-servicos div[style*="grid-template-columns"],
  #modal-novo-agendamento div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* LOTE VISUAL 6 - CONTRASTE DE TEXTOS E BOTÕES (TEMA CLARO E ESCURO) */
body:not(.dark-mode) .text-muted,
body:not(.dark-mode) .kpi-sub-text,
body:not(.dark-mode) .balance-label,
body:not(.dark-mode) .kpi-title {
  color: #475569 !important;
}

body:not(.dark-mode) .btn-outline,
body:not(.dark-mode) .btn-secondary {
  color: #334155 !important;
  border-color: #94a3b8 !important;
}

body:not(.dark-mode) .btn-primary,
body:not(.dark-mode) .btn-success,
body:not(.dark-mode) .btn-danger {
  color: #ffffff !important;
}

body.dark-mode .text-muted,
body.dark-mode .kpi-sub-text,
body.dark-mode .balance-label,
body.dark-mode .kpi-title {
  color: #94a3b8 !important;
}

body.dark-mode .btn-outline,
body.dark-mode .btn-secondary {
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

body.dark-mode .btn-primary,
body.dark-mode .btn-success,
body.dark-mode .btn-danger {
  color: #ffffff !important;
}

/* LOTE VISUAL 7 - OCULTAR MOCKS E DUPLICATAS COMPROVADAS */
.dashboard-tiles-wrapper,
button[onclick="showToast('Pedido de lote com 10 chips enviado com sucesso!')"] {
  display: none !important;
}

/* Layout MMN Footer - Minha Rede */
.org-summary-footer {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-card, #334155);
    border-radius: 16px;
    padding: 24px;
    margin-top: 30px;
}
.summary-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px;
}
.summary-top-row h5 {
    color: var(--text-title, #f8fafc) !important;
}
.summary-top-row > div > div > div {
    color: var(--text-muted, #94a3b8) !important;
}
.total-box {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 16px 24px;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    min-width: 180px;
}
.total-box div:first-child {
    color: #93c5fd;
    margin-bottom: 4px;
}
.summary-icons-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
}
.summary-icon-item {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-body, #cbd5e1);
    line-height: 1.4;
}
.summary-banner-bottom {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #fff;
    text-align: center;
    padding: 16px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}
.summary-banner-bottom span {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.9;
}

/* =========================================================
   REDESIGN PREMIUM MARKETPLACE (Parceiros)
   ========================================================= */

/* Search Header */
.marketplace-header {
    background: radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    padding: 30px 24px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
}
.marketplace-search-wrap {
    max-width: 600px;
    margin: 0 auto 20px auto;
    position: relative;
}
.marketplace-search-wrap input {
    width: 100%;
    padding: 16px 20px 16px 50px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 1.05rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.marketplace-search-wrap input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}
.marketplace-search-wrap i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.2rem;
}
.category-chips {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.category-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 999px;
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.category-chip:hover, .category-chip.active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
    transform: translateY(-2px);
}

/* Premium Card Grid */
.premium-marketplace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.premium-partner-card {
    background: #1e293b;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}
.premium-partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    border-color: rgba(59, 130, 246, 0.4);
}
.ppc-image-wrap {
    height: 140px;
    position: relative;
    overflow: hidden;
}
.ppc-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.premium-partner-card:hover .ppc-image-wrap img {
    transform: scale(1.05);
}
.ppc-badge-cashback {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #10b981;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}
.ppc-badge-comissao {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f59e0b;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}
.ppc-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ppc-title {
    color: #f8fafc;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ppc-category {
    color: #94a3b8;
    font-size: 0.8rem;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ppc-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #eab308;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.ppc-rating span {
    color: #64748b;
    font-weight: 500;
}
.ppc-btn {
    margin-top: auto;
    width: 100%;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
    padding: 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.premium-partner-card:hover .ppc-btn {
    background: #3b82f6;
    color: #fff;
}
/* Fallback Carousel CSS */
.carousel-item { display: none; animation: fadeIn 0.5s ease-in-out; }
.carousel-item.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Fix contrast for top-action-btn in Light Mode */
body:not(.dark-mode) .top-action-btn {
  color: var(--text-title) !important;
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
}
body:not(.dark-mode) .top-search-wrap {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0;
}
body:not(.dark-mode) .top-action-btn:hover {
  background: var(--bg-hover) !important;
}
body:not(.dark-mode) .top-search-wrap i {
  color: var(--text-muted) !important;
}
body:not(.dark-mode) .top-search-wrap input {
  color: var(--text-title) !important;
}
body:not(.dark-mode) .top-search-wrap input::placeholder {
  color: var(--text-muted) !important;
}

/* Agendamentos UI Fixes for Light/Dark Mode */
.agendamentos-header-box {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.agendamentos-header-title {
  margin: 0 0 6px 0;
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--color-primary), #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.agendamentos-header-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
}
.agendamento-service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.05);
  transition: transform 0.3s, border-color 0.3s;
}
.agendamento-service-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary);
}
.agendamento-service-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-primary);
  box-shadow: 0 0 10px var(--color-primary);
}
.agendamento-service-card-price {
  font-size: 0.9rem;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
}
.agendamento-service-card h4 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  color: var(--text-title);
  font-weight: 700;
}
.agendamento-service-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.agendamento-service-card p strong {
  color: var(--text-title);
}
.agendamento-btn-slot {
  width: 100%;
  border: none;
  font-size: 0.85rem;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.agendamento-btn-slot:hover {
  background: rgba(16, 185, 129, 0.3);
}
.agendamento-btn-slot strong {
  color: var(--text-title);
}

.agendamentos-table-box {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.agendamentos-table-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.agendamentos-table-title {
  font-weight: 700;
  color: var(--text-title);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.agendamentos-table-icon {
  background: rgba(99, 102, 241, 0.1);
  padding: 6px;
  border-radius: 8px;
  color: var(--color-primary);
  font-size: 1.1rem;
}
.agendamentos-table-status-pill {
  font-size: 0.82rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 6px 14px;
  border-radius: 999px;
}
.agendamentos-tbody {
  font-size: 0.9rem;
  color: var(--text-body);
}
.agendamentos-tr {
  background: var(--bg-surface);
  transition: background 0.2s;
}
.agendamentos-tr:hover {
  background: var(--bg-subtle);
}
.agendamentos-td {
  padding: 16px;
}
.agendamentos-td-time {
  padding: 16px;
  border-radius: 12px 0 0 12px;
  color: var(--text-title);
}
.agendamentos-client-name {
  font-weight: 600;
  color: var(--text-title);
}
.agendamentos-client-handle {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.agendamentos-service-name {
  font-weight: 500;
  color: var(--text-title);
}
.agendamentos-duration-pill {
  background: var(--bg-subtle);
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--text-body);
}
.agendamentos-status-concluido {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.agendamentos-status-andamento {
  background: rgba(56, 189, 248, 0.15);
  color: #0284c7;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.agendamentos-status-espera {
  background: rgba(251, 191, 36, 0.15);
  color: #d97706;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
body.dark-mode .agendamentos-status-concluido { color: #34d399; }
body.dark-mode .agendamentos-status-andamento { color: #7dd3fc; }
body.dark-mode .agendamentos-status-espera { color: #fbbf24; }

.agendamentos-td-actions {
  border-radius: 0 12px 12px 0;
}
.agendamentos-action-btn {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
  padding: 6px 12px;
  transition: all 0.2s;
}
body.dark-mode .agendamentos-action-btn { color: #4ade80; }
.agendamentos-action-btn:hover {
  background: rgba(34, 197, 94, 0.2);
}
.agendamentos-action-btn.btn-concluir {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  border: none;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

.agendamentos-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  text-align: left;
}
.agendamentos-table th {
  color: var(--text-light);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 16px;
  border: none;
  text-align: left;
}
.agendamentos-table th.text-center {
  text-align: center;
}
.agendamentos-table th.text-right {
  text-align: right;
}

.agendamento-form-label {
  font-weight: 600;
  color: var(--text-title);
  display: block;
  margin-bottom: 8px;
}
.agendamento-form-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  color: var(--text-title);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.agendamento-form-input:focus {
  border-color: var(--color-primary);
}
.agendamento-previsao-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.agendamento-previsao-box strong {
  color: var(--text-title);
}

.marketplace-filters-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
}

@media (max-width: 768px) {
  .marketplace-filters-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ÁRVORE DE REPRESENTANTES - MODELO UNILEVEL COM FUNDO ROXO
   ========================================================================== */
.reps-tree-node-wrapper {
  border: 1px solid #ddd6fe;
  border-radius: 12px;
  overflow: hidden;
  background: #faf5ff;
  transition: all 0.2s ease;
}

.reps-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  margin: 0;
  background: #faf5ff;
}

.reps-node .node-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ede9fe;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
  font-weight: 800;
  font-size: 1.1rem;
}

.reps-node .node-user-name {
  font-size: 0.95rem;
  color: #581c87;
  font-weight: 700;
}

.reps-children-container {
  display: none;
  padding-left: 20px;
  border-top: 1px dashed #ddd6fe;
  background: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Modo Escuro para Árvore de Representantes (Fundo Roxo Escuro) */
body.dark-mode .reps-tree-node-wrapper {
  background: #1e1035 !important;
  border-color: #6d28d9 !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.08);
}

body.dark-mode .reps-node {
  background: #1e1035 !important;
  color: #f3e8ff !important;
  border-color: #6d28d9 !important;
}

body.dark-mode .reps-node .node-user-avatar {
  background: rgba(139, 92, 246, 0.25) !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(139, 92, 246, 0.4) !important;
}

body.dark-mode .reps-node .node-user-name {
  color: #e9d5ff !important;
}

body.dark-mode .reps-children-container {
  background: #150a26 !important;
  border-color: #6d28d9 !important;
}

body.dark-mode .reps-subnode {
  background: #1e1035 !important;
  border: 1px solid #6d28d9 !important;
  border-left: 3px solid #8b5cf6 !important;
}

@media (max-width: 900px) {
  .grid-lojista-responsive {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   MMN CASHBACK & COMISSÕES PREVIEW BOX (DARK MODE CONTRASTE ELEVADO)
   Garante fundo branco consistente e cores escuras de alto contraste para
   os valores e comissões (N1, N2, Cliente e Taxa) independente do dark mode.
   ========================================================================== */
body.dark-mode #cbs-preview-box,
body.dark-mode #cb-lojista-preview-box,
body.dark-mode #ps-preview-box,
#cbs-preview-box,
#cb-lojista-preview-box,
#ps-preview-box {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

body.dark-mode #cbs-preview-box #cbs-preview-title,
#cbs-preview-box #cbs-preview-title {
  color: #1e293b !important;
  text-shadow: none !important;
}

body.dark-mode #cbs-preview-box #cbs-preview-total,
#cbs-preview-box #cbs-preview-total {
  background: #ffedd5 !important;
  background-color: #ffedd5 !important;
  color: #c2410c !important;
  text-shadow: none !important;
}

/* Card 1: Cashback do Cliente (Verde Escuro) */
body.dark-mode #cbs-preview-box .mmn-prev-n0,
#cbs-preview-box .mmn-prev-n0 {
  background: #ecfdf5 !important;
  background-color: #ecfdf5 !important;
  border: 1.5px solid #a7f3d0 !important;
}
body.dark-mode #cbs-preview-box .mmn-prev-n0 .mmn-prev-label,
#cbs-preview-box .mmn-prev-n0 .mmn-prev-label {
  color: #065f46 !important;
  text-shadow: none !important;
}
body.dark-mode #cbs-preview-box strong#cbs-prev-n1,
body.dark-mode strong#cbs-prev-n1,
#cbs-preview-box strong#cbs-prev-n1 {
  color: #047857 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

/* Card 2: Indicador Direto N1 - Comissão N1 (Azul Escuro Intenso) */
body.dark-mode #cbs-preview-box .mmn-prev-n1,
#cbs-preview-box .mmn-prev-n1 {
  background: #eff6ff !important;
  background-color: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
}
body.dark-mode #cbs-preview-box .mmn-prev-n1 .mmn-prev-label,
#cbs-preview-box .mmn-prev-n1 .mmn-prev-label {
  color: #1e40af !important;
  text-shadow: none !important;
}
body.dark-mode #cbs-preview-box strong#cbs-prev-n2,
body.dark-mode strong#cbs-prev-n2,
#cbs-preview-box strong#cbs-prev-n2 {
  color: #1e3a8a !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

/* Card 3: Ascendente N2 - Comissão N2 (Roxo Escuro Intenso) */
body.dark-mode #cbs-preview-box .mmn-prev-n2,
#cbs-preview-box .mmn-prev-n2 {
  background: #f5f3ff !important;
  background-color: #f5f3ff !important;
  border: 1.5px solid #ddd6fe !important;
}
body.dark-mode #cbs-preview-box .mmn-prev-n2 .mmn-prev-label,
#cbs-preview-box .mmn-prev-n2 .mmn-prev-label {
  color: #5b21b6 !important;
  text-shadow: none !important;
}
body.dark-mode #cbs-preview-box strong#cbs-prev-n3,
body.dark-mode strong#cbs-prev-n3,
#cbs-preview-box strong#cbs-prev-n3 {
  color: #581c87 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

/* Card 4: Taxa TeAcheiAqui (Âmbar / Marrom Escuro) */
body.dark-mode #cbs-preview-box .mmn-prev-taxa,
#cbs-preview-box .mmn-prev-taxa {
  background: #fffbeb !important;
  background-color: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
}
body.dark-mode #cbs-preview-box .mmn-prev-taxa .mmn-prev-label,
#cbs-preview-box .mmn-prev-taxa .mmn-prev-label {
  color: #92400e !important;
  text-shadow: none !important;
}
body.dark-mode #cbs-preview-box strong#cbs-prev-taxa,
body.dark-mode strong#cbs-prev-taxa,
#cbs-preview-box strong#cbs-prev-taxa {
  color: #92400e !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

/* Previews nos outros modais */
body.dark-mode #cb-lojista-preview-box strong,
body.dark-mode #cb-lojista-preview-box [id*="-val"] {
  text-shadow: none !important;
}
body.dark-mode #cb-lojista-preview-box #prev-n0-val { color: #059669 !important; }
body.dark-mode #cb-lojista-preview-box #prev-n1-val { color: #1e3a8a !important; }
body.dark-mode #cb-lojista-preview-box #prev-n2-val { color: #581c87 !important; }
body.dark-mode #cb-lojista-preview-box #prev-n3-val { color: #92400e !important; }

body.dark-mode #ps-preview-box strong,
body.dark-mode #ps-preview-box #ps-prev-cashback-cliente {
  color: #047857 !important;
  text-shadow: none !important;
}