/* ==== Responsividade global e otimizações de toque ====
   Aplicado em todas as páginas. Mobile-first; reforça regras existentes.
   Versão 1.0 — auditoria de performance/responsividade. */

/* 1) Zero overflow horizontal — nunca deixa elemento estourar a viewport */
@layer legacy {
html, body { max-width: 100vw; overflow-x: hidden; }
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
/* Logotipos: altura vem de style.css / páginas — evita encolher em flex e reforça teto responsivo */
.auth-logo img,
.navbar-logo img,
.doc-brand-logo img,
.billing-brand-img img,
.nav-logo img,
a.brand img,
.footer-logo img,
.footer-mega img {
  flex-shrink: 0;
}
/* Teto horizontal padrão (fluxos auth, navbar interior, docs, rodapé) */
.auth-logo img,
.navbar-logo img,
.doc-brand-logo img,
.footer-logo img,
.footer-mega img {
  max-width: min(520px, calc(100vw - 32px));
}
/* Topbars “wide”: cobrança, planos, landing — wordmark pode usar mais largura */
.billing-brand-img img,
.nav-logo img,
a.brand img {
  max-width: min(720px, calc(100vw - 40px));
}
table { max-width: 100%; }

/* 2) Touch targets mínimos (Apple HIG / Material) em telas pequenas */
@media (max-width: 768px) {
  button, .btn, .pd-btn-ghost, a.btn, input[type="button"], input[type="submit"],
  select, .pd-nav button, .nav-link, .footer-link {
    min-height: var(--lb-touch-min);
  }
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="search"], textarea {
    min-height: var(--lb-touch-min);
    font-size: 16px; /* impede o iOS de dar zoom em focus */
  }
}



/* 4) Headings & padding mobile — REMOVIDO (código morto, auditado 2026):
   • .pd-content{padding:16px 14px 32px} era sempre vencido por
     premium-dashboard.css:1245 (body.pd-shell .pd-content, @≤820px, !important,
     especificidade maior). As 6 páginas com .pd-content são body.pd-shell.
   • o reset :has(#adm-hierarquia){padding:0} já é garantido por essa mesma 1245
     (zera left/right/top no mobile) — era redundante.
   • .pd-h1/.pd-h-sub têm display:none !important GLOBAL (premium-dashboard.css:374),
     então definir font-size neles não tinha efeito visual.
   Resultado: 6 !important eliminados, zero mudança de render.
   NOTA p/ redesign: se o conceito Light pedir títulos de página visíveis,
   reabilitar .pd-h1/.pd-h-sub é uma decisão de design à parte (hoje ocultos). */

/* 4b) KPI BAR (Light) em mobile — grid 2 colunas internas.
   Sem !important: este arquivo carrega depois de premium-dashboard.css,
   então a igual especificidade já vence na cascata. */
@media (max-width: 640px) {
  .pd-kpi-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .pd-kpi-bar-col {
    padding: 12px 14px;
    border-left: none;
    border-top: none;
  }
  /* Divisor vertical entre as duas colunas */
  .pd-kpi-bar-col:nth-child(2n) {
    border-left: 1px solid var(--lb-line);
  }
  /* Divisor horizontal: border-top em todos exceto os 2 primeiros.
     Funciona para 4, 5, 6, 7+ KPIs (par ou ímpar). */
  .pd-kpi-bar-col:not(:nth-child(-n+2)) {
    border-top: 1px solid var(--lb-line);
  }
  .pd-kpi-bar-num {
    font-size: 22px;
  }
  .pd-kpi-bar-lbl {
    font-size: 10px;
  }
  .pd-kpi-bar-icon {
    width: 20px;
    height: 20px;
  }
  .pd-kpi-bar-delta {
    font-size: 10px;
    padding: 2px 6px;
  }
  /* Mini-stats (Mobilizador) — 3 colunas no mobile (cabe bem) */
  .pd-mini-stats--dark {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .pd-mini-stats--dark > div {
    padding: 12px 10px;
  }
  .pd-mini-stats--dark .v {
    font-size: 18px;
  }
  .pd-mini-stats--dark .l {
    font-size: 9.5px;
  }
}

/* 5) Sidebar do dashboard vira drawer cheio em mobile */
@media (max-width: 820px) {
  .pd-side .pd-nav button {
    padding: 12px 14px;
    font-size: 14px;
  }
  /* Ao abrir a gaveta no mobile (.open), os rótulos ficam visíveis. No touch não
     existe :hover, então sem isto o drawer abre só com ícones (texto opacity:0) —
     era o bug do menu mobile do ADM. Espelha a visibilidade que o desktop (>=821px)
     já garante. Especificidade (body.pd-shell .pd-side.open ...) vence a base
     opacity:0 e o :hover, sem !important. */
  body.pd-shell .pd-side.open .pd-brand-text,
  body.pd-shell .pd-side.open .pd-side-topinfo .pd-crumb,
  body.pd-shell .pd-side.open .pd-side-topinfo .pd-btn-sair,
  body.pd-shell .pd-side.open .pd-nav a span,
  body.pd-shell .pd-side.open .pd-nav button span,
  body.pd-shell .pd-side.open .pd-nav-badge,
  body.pd-shell .pd-side.open .pd-user-meta,
  body.pd-shell .pd-side.open .pd-super-badge {
    opacity: 1;
  }
}

/* 6) Cards em coluna única em mobile.
   Sem !important: regra carrega depois de style.css (especificidade igual →
   vence na cascata). Em .form-linha, designs page-scoped de maior
   especificidade (ex.: body.pg-cadastro) voltam a prevalecer — comportamento
   arquiteturalmente correto (página > override genérico). */
@media (max-width: 640px) {
  .form-linha { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 16px; }
}

/* 7) Headings escalonados em telas estreitas */
@media (max-width: 480px) {
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 17px; }
}

/* 8) Container responsivo — remove padding excessivo em telas pequenas.
   Sem !important: vence style.css por ordem de carga (especificidade igual). */
@media (max-width: 480px) {
  .container { padding: 0 14px; }
}

/* ====================================================================
   8.5) Topbar desktop — leve aumento de contraste do fundo translúcido
   ==================================================================== */


/* ====================================================================
   9) HEADER MOBILE — refatoração completa (≤ 768px)
   Centraliza correções para todos os dashboards (.pd-topbar)
   ==================================================================== */

@media (max-width: 768px) {


  /* 9.2 — Breadcrumb simplificado: só o último item (a aba/seção atual) */
  .pd-crumb {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    font-size: 14px;
  }
  .pd-crumb > span:not(.last) { display: none; }
  .pd-crumb > .sep { display: none; }
  .pd-crumb > .last {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 15px;
    max-width: 100%;
  }

  /* 9.3 — Wrapper esquerdo (menu + crumb) ocupa espaço com truncamento */
  .pd-topbar > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  /* 9.4 — Hamburguer com touch target sólido */
  .pd-menu-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .pd-menu-btn svg { width: 22px; height: 22px; }

  /* 9.5 — Ações da direita: ícones apenas, alinhadas em uma linha */
  .pd-topbar-actions {
    flex-shrink: 0;
    gap: 4px;
  }
  .pd-topbar-actions button.pd-btn-ghost {
    padding: 0;
    width: 40px;
    height: 40px;
    min-height: 40px;
    justify-content: center;
    border-radius: 10px;
    font-size: 0; /* esconde o texto, mantém só o ícone */
  }
  .pd-topbar-actions button.pd-btn-ghost > span { font-size: 0; }
  .pd-topbar-actions button.pd-btn-ghost svg {
    width: 18px;
    height: 18px;
    margin: 0;
  }
  /* Spans informativos (#criado-por, #lider-info, #badge-codigo, etc.):
     em mobile não temos espaço — escondemos. !important guarda contra
     display inline setado via JS. */
  .pd-topbar-actions span.pd-btn-ghost { display: none !important; }
  /* badge de código (mono) é decorativo: oculta em mobile (guarda JS) */
  .pd-topbar-actions #badge-codigo { display: none !important; }



  /* 9.7 — Trava o scroll do body quando o drawer está aberto */
  body.pd-shell:has(.pd-side.open) { overflow: hidden; }

  /* 9.7b — Backdrop do drawer: aparece junto com a sidebar e fecha ao tocar fora.
     Antes ficava SEMPRE display:none, então não havia como fechar o menu clicando
     fora (só navegando) — dava a sensação de "menu travado" no mobile. */
  .pd-side-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 89; /* logo abaixo da sidebar drawer (--lb-z-sidebar-open: 90) */
    background: rgba(15, 23, 42, 0.45);
    -webkit-tap-highlight-color: transparent;
  }

  /* 9.8 — Nome do usuário no card do drawer não quebra */
  .pd-user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* 9.9 — Telas muito estreitas: padding ainda menor, ícones um pouco menores */
@media (max-width: 380px) {

  .pd-topbar-actions button.pd-btn-ghost { width: 36px; height: 36px; min-height: 36px; }
  .pd-menu-btn { width: 36px; height: 36px; }
  .pd-crumb > .last { font-size: 14px; }
}

/* ====================================================================
   10) PERFIL EM DESTAQUE NO TOPO DA SIDEBAR
       O bloco .pd-user-card agora é o primeiro filho de .pd-side no HTML
       (ver dashboards). Aqui ficam apenas estilos visuais — sem regra de
       posicionamento estrutural.
   ==================================================================== */
.pd-side .pd-user-card {
  margin: auto 0 12px;
  padding: 12px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--lb-line);
  box-shadow: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  cursor: default;
  transition: none;
}

.pd-side .pd-user-card::after { display: none; content: none; }
.pd-side .pd-user-card:hover { background: transparent; }
.pd-side .pd-user-card:hover::after { display: none; }

.pd-side .pd-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--lb-blue), var(--lb-blue-strong));
  color: #fff;
  position: relative;
  box-shadow: none;
  flex-shrink: 0;
  border: none;
}

.pd-side .pd-user-avatar img,
.pd-pulse-item .av img,
.pd-mobile-avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.pd-user-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lb-ink);
  line-height: 1.25;
}

.pd-user-role {
  display: inline-block;
  margin-top: 2px;
  font-size: 9px;
  color: var(--lb-ink-mute);
  background: transparent;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
  padding: 0;
  border-radius: 0;
  opacity: 1;
  line-height: 1.4;
}

.pd-user-comunidade{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--pd-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--pd-text-1);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Avatar redondo nos rankings (Top ativistas) */
.pd-pulse-item .av{
  border-radius: 50%;
  overflow: hidden;
  width: 34px;
  height: 34px;
  font-size: 11.5px;
  letter-spacing: 0;
}

/* Breadcrumb: comunidade em destaque */
.pd-crumb .crumb-com{
  color: var(--pd-text-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ====================================================================
   11) AVATAR NA TOPBAR MOBILE
       Botão circular com a foto do usuário no canto direito da topbar;
       clicar abre o drawer. Visível apenas em telas pequenas.
   ==================================================================== */
.pd-mobile-avatar-btn{
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--pd-border);
  background: linear-gradient(135deg, var(--lb-blue), var(--lb-blue-strong));
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
  box-shadow: 0 2px 6px rgba(15,23,42,0.10);
}
@media (max-width: 768px){
  .pd-mobile-avatar-btn{
    display: inline-flex;
  }
}

/* Em mobile, o card de perfil fica menor mas ainda no topo do drawer */
@media (max-width: 768px){
  .pd-side .pd-user-card{
    margin-bottom: 14px;
  }
}

/* ====================================================================
   10) Landing pública (frontend/pages/index.html) — hambúrguer mobile
   Por padrão em desktop o botão fica oculto e o drawer também.
   Em ≤768px: mostra hambúrguer, esconde .nav-links e .nav-right,
   e ativa o drawer ao clicar.
   ==================================================================== */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
  padding: 0;
}
.nav-toggle:hover { background: rgba(255,255,255,0.08); }
.nav-mobile-drawer {
  display: none;
  position: fixed;
  top: var(--landing-nav-h, 72px);
  left: 0;
  right: 0;
  bottom: 0;
  background: #0B1220;
  flex-direction: column;
  padding: 24px 22px;
  gap: 6px;
  z-index: 998;
  overflow-y: auto;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.nav-mobile-drawer.open { display: flex; }
.nav-mobile-drawer a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  padding: 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-mobile-drawer a:hover { color: #fff; }
.nav-mobile-drawer a.btn-pill,
.nav-mobile-drawer a.nav-signin {
  margin-top: 12px;
  border: 0;
  justify-content: center;
}

@media (max-width: 768px) {
  .nav-toggle { display: inline-flex !important; }
  .nav .nav-right,
  .nav .nav-links { display: none !important; }
  .nav { grid-template-columns: 1fr auto !important; }
}

/* Dashboard sidebar — glassmorphism adaptável (exceto admin enterprise escuro) */
body.pd-shell .pd-layout {
  background: transparent !important;
}

/* Estado ativo do nav (chrome escuro). MANTÉM !important: compete com o
   bloco override premium-dashboard.css:3057 (.pd-side .pd-nav a {color !important}).
   Desarmar exige de-importantizar também aquele bloco — pass dedicado futuro
   (com QA visual), fora do escopo "limpeza segura". */
body.pd-shell .pd-nav a.ativa,
body.pd-shell .pd-nav button.ativa {
  background: var(--lb-blue-tint) !important;
  color: var(--lb-blue) !important;
}

/* Admin · Visão Geral — composição premium e respiro visual */
body.pd-shell #aba-pagamentos {
  --adm-gutter: clamp(28px, 4vw, 64px);
  --adm-section-gap: clamp(36px, 4.6vw, 72px);
  --adm-card-pad: clamp(26px, 3vw, 38px);
  --adm-card-radius: var(--lb-radius-lg);  /* 16px — brief (era 30px) */
  /* background: var(--lb-app-bg) !important; */
  padding-bottom: clamp(72px, 7vw, 112px) !important;
}

body.pd-shell #aba-pagamentos > *:not(#adm-hierarquia):not(#adm-presenca-rede) {
  width: calc(100% - (var(--adm-gutter) * 2)) !important;
  max-width: 1540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

body.pd-shell #adm-hierarquia {
  margin-bottom: 0 !important;
}

/* Admin · Hero + KPIs — layout desktop (não aplicar no mobile ≤820px) */
@media (min-width: 821px) {
  body.pd-shell #adm-hierarquia .np-card {
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-content: start !important;
    justify-items: stretch !important;
    min-height: min(100vh, 900px) !important;
    padding-bottom: 32px !important;
    box-sizing: border-box !important;
  }

  body.pd-shell #adm-hierarquia .np-oracle-slot {
    grid-row: 1 !important;
    grid-column: 1 !important;
    position: relative !important;
    width: 100% !important;
    min-height: 480px !important;
    height: 100% !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  body.pd-shell #adm-hierarquia .np-row {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  body.pd-shell #adm-hierarquia .np-kpis {
    grid-row: 2 !important;
    grid-column: 1 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: min(100%, 1180px) !important;
    margin: 14px auto 0 !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
    justify-content: center !important;
    justify-items: stretch !important;
    z-index: 5 !important;
  }
}

@media (max-width: 820px) {
  body.pd-shell .pd-content:has(#adm-hierarquia) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }

  body.pd-shell #aba-pagamentos {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .pd-content > #adm-hierarquia,
  #aba-pagamentos > #adm-hierarquia {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    transform: none !important;
  }



  body.pd-shell #adm-hierarquia .np-card {
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    align-items: stretch !important;
    justify-content: start !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    height: auto !important;
    padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body.pd-shell #adm-hierarquia .np-oracle-slot {
    min-height: 200px !important;
    height: 100% !important;
    overflow: visible !important;
  }

  body.pd-shell #adm-hierarquia .np-row {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.pd-shell #adm-hierarquia .np-kpis {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px 12px 18px !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    box-sizing: border-box !important;
  }
}

/* Presença: mesma largura dos cards abaixo (fora do seletor genérico que zera padding) */
body.pd-shell #aba-pagamentos > #adm-presenca-rede {
  width: calc(100% - (var(--adm-gutter) * 2)) !important;
  max-width: 1540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: clamp(40px, 4.5vw, 56px) !important;
  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
}

body.pd-shell #adm-presenca-rede {
  margin-bottom: var(--adm-section-gap) !important;
}



body.pd-shell #aba-pagamentos .lb-section-eyebrow {
  padding: 0 2px 20px !important;
  margin-bottom: 0 !important;
}

body.pd-shell #aba-pagamentos .lb-section-eyebrow-lbl {
  display: block;
  margin-bottom: 6px;
}

body.pd-shell #aba-pagamentos .pd-geo-card,
body.pd-shell #adm-presenca-rede {
  background: var(--lb-panel-grad) !important;
  -webkit-backdrop-filter: var(--lb-panel-blur) !important;
  backdrop-filter: var(--lb-panel-blur) !important;
  border: 1px solid var(--lb-panel-border) !important;
  border-radius: var(--adm-card-radius) !important;
  box-shadow: var(--lb-panel-shadow) !important;
}

body.pd-shell #aba-pagamentos .pd-geo-card {
  padding: var(--adm-card-pad) !important;
}

body.pd-shell #aba-pagamentos > #adm-presenca-rede {
  /* Tamanho externo do card — sem padding extra no section (evita “inflar” o card) */
  padding: 0 !important;
  min-height: clamp(310px, 34vw, 460px);
  box-sizing: border-box !important;
  overflow: visible !important;
}

body.pd-shell #aba-pagamentos .pd-chart-head,
body.pd-shell #aba-pagamentos .pd-geo-head {
  margin-bottom: clamp(22px, 2.4vw, 34px) !important;
}

body.pd-shell #aba-pagamentos .pd-chart-title {
  font-size: clamp(15px, 1.15vw, 18px) !important;
  letter-spacing: -0.025em !important;
}

body.pd-shell #aba-pagamentos .pd-chart-sub {
  margin-top: 5px !important;
  line-height: 1.55 !important;
}

body.pd-shell #adm-card-geo-am .pd-geo-body {
  gap: clamp(24px, 3vw, 40px) !important;
}

body.pd-shell #aba-pagamentos .pd-geo-map {
  border-radius: 24px !important;
  min-height: clamp(420px, 46vw, 620px) !important;
  padding: clamp(18px, 2.4vw, 30px) !important;
}

body.pd-shell #aba-pagamentos .pd-chart-body {
  min-height: clamp(300px, 30vw, 430px);
}

body.pd-shell #adm-zone-compass-host {
  min-height: clamp(300px, 32vw, 460px) !important;
}

body.pd-shell #aba-pagamentos .pd-demografica-grid {
  margin-top: clamp(18px, 2.2vw, 34px) !important;
}

body.pd-shell #aba-pagamentos .pd-demografica-grid .pd-chart-card {
  min-height: clamp(360px, 34vw, 500px);
}

@media (max-width: 960px) {
  body.pd-shell #aba-pagamentos {
    --adm-gutter: 20px;
    --adm-section-gap: 38px;
    --adm-card-pad: 22px;
  }


}

/* Presença da Rede — mobile: dois blocos empilhados, alinhados e legíveis */
@media (max-width: 820px) {
  body.pd-shell .pres-wrap {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 14px;
    min-height: 0;
    overflow: visible;
  }

  body.pd-shell .pres-divisor {
    display: none;
  }

  body.pd-shell .pres-col {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius-md);
    background: var(--lb-card-alt);
    padding: 14px 12px 12px;
    margin: 0;
  }

  body.pd-shell .pres-col-ativos {
    border-color: rgba(34, 197, 94, 0.22);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.06) 0%, var(--lb-card-alt) 48px);
    padding-bottom: 12px;
  }

  body.pd-shell .pres-col-inativos {
    border-color: rgba(239, 68, 68, 0.18);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.05) 0%, var(--lb-card-alt) 48px);
    padding-top: 14px;
  }

  body.pd-shell .pres-col-head {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--lb-line);
  }

  /* Ativos: lista completa sem cortar o último item */
  body.pd-shell .pres-col-ativos .pres-list {
    max-height: none;
    overflow: visible;
    overflow-y: visible;
    padding-bottom: 4px;
  }

  /* Inativos: scroll só neste bloco (muitos registros) */
  body.pd-shell .pres-col-inativos .pres-list {
    max-height: min(360px, 52vh);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  body.pd-shell .pres-card {
    padding: 10px 8px;
    gap: 12px;
    align-items: center;
  }

  /* Mesma coluna do avatar nos dois blocos (rank oculto no mobile) */
  body.pd-shell .pres-card-ativo,
  body.pd-shell .pres-card-inativo {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  body.pd-shell .pres-card-inativo .pres-rank {
    display: none;
  }

  body.pd-shell .pres-av-wrap {
    width: 44px;
    flex-shrink: 0;
    justify-self: start;
  }

  body.pd-shell .pres-info {
    overflow: visible;
    min-width: 0;
  }

  body.pd-shell .pres-nome {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.25;
    word-break: break-word;
  }

  body.pd-shell .pres-meta {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.3;
  }

  body.pd-shell .pres-tempo {
    width: auto;
    min-width: 44px;
    padding-left: 6px;
    flex-shrink: 0;
  }
}

/* ═══ Gestor + Embaixador — mesma composição da Visão Geral (admin) ═══ */
body.pd-shell #aba-graficos,
body.pd-shell #aba-overview {
  --adm-gutter: clamp(28px, 4vw, 64px);
  --adm-section-gap: clamp(36px, 4.6vw, 72px);
  --adm-card-pad: clamp(26px, 3vw, 38px);
  --adm-card-radius: var(--lb-radius-lg);  /* 16px — brief (era 30px) */
  background: var(--lb-app-bg) !important;
  padding-bottom: clamp(72px, 7vw, 112px) !important;
}

body.pd-shell #aba-graficos > *:not(#hierarquia-potencial):not(#coord-presenca-rede),
body.pd-shell #aba-overview > *:not(#hierarquia-potencial):not(#lider-presenca-rede) {
  width: calc(100% - (var(--adm-gutter) * 2)) !important;
  max-width: 1540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

body.pd-shell #hierarquia-potencial {
  margin-bottom: 0 !important;
}

body.pd-shell #aba-graficos > #coord-presenca-rede,
body.pd-shell #aba-overview > #lider-presenca-rede {
  width: calc(100% - (var(--adm-gutter) * 2)) !important;
  max-width: 1540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: clamp(40px, 4.5vw, 56px) !important;
  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
}

body.pd-shell #coord-presenca-rede,
body.pd-shell #lider-presenca-rede {
  margin-bottom: var(--adm-section-gap) !important;
}



body.pd-shell #aba-graficos .lb-section-eyebrow,
body.pd-shell #aba-overview .lb-section-eyebrow {
  padding: 0 2px 20px !important;
  margin-bottom: 0 !important;
}

body.pd-shell #aba-graficos .pd-geo-card,
body.pd-shell #aba-overview .pd-geo-card,
body.pd-shell #coord-presenca-rede,
body.pd-shell #lider-presenca-rede {
  background: var(--lb-panel-grad) !important;
  -webkit-backdrop-filter: var(--lb-panel-blur) !important;
  backdrop-filter: var(--lb-panel-blur) !important;
  border: 1px solid var(--lb-panel-border) !important;
  border-radius: var(--adm-card-radius) !important;
  box-shadow: var(--lb-panel-shadow) !important;
}

body.pd-shell #aba-graficos .pd-geo-card,
body.pd-shell #aba-overview .pd-geo-card {
  padding: var(--adm-card-pad) !important;
}

body.pd-shell #aba-graficos > #coord-presenca-rede,
body.pd-shell #aba-overview > #lider-presenca-rede {
  padding: 0 !important;
  min-height: clamp(310px, 34vw, 460px);
  box-sizing: border-box !important;
  overflow: visible !important;
}

body.pd-shell:has(#aba-graficos.aba-conteudo.ativa) .pd-main,
body.pd-shell:has(#aba-graficos.aba-conteudo.ativa) .pd-content,
body.pd-shell:has(#aba-overview.aba-conteudo.ativa) .pd-main,
body.pd-shell:has(#aba-overview.aba-conteudo.ativa) .pd-content {
  background: var(--lb-app-bg) !important;
}

/* Respiro no topo da Visão Geral (gestor/embaixador) no desktop — o cabeçalho
   "Visão Geral" ficava colado no topo (Moises: "muito em cima"). */
@media (min-width: 821px) {
  body.pd-shell:has(#aba-graficos.aba-conteudo.ativa) .pd-content,
  body.pd-shell:has(#aba-overview.aba-conteudo.ativa) .pd-content {
    padding-top: clamp(18px, 2.2vw, 34px) !important;
  }
}

@media (min-width: 821px) {
  body.pd-shell #hierarquia-potencial .np-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 32px;
    box-sizing: border-box;
  }

  body.pd-shell #aba-graficos #hierarquia-potencial .np-row,
  body.pd-shell #aba-overview #hierarquia-potencial .np-row {
    display: none !important;
  }

  body.pd-shell #aba-graficos #hierarquia-potencial .np-kpis,
  body.pd-shell #aba-overview #hierarquia-potencial .np-kpis {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 0 48px 32px !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  }

  body.pd-shell #hierarquia-potencial .np-row {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    margin: 0 auto;
    max-width: 280px;
    width: 100%;
    align-self: center;
  }
  body.pd-shell #hierarquia-potencial .np-kpis {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: fit-content;
    max-width: min(100%, 1180px);
    margin: 14px auto 0;
    padding: 0 24px;
    box-sizing: border-box;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    justify-content: center;
    justify-items: stretch;
  }
}

@media (max-width: 820px) {

  /* ── LAYOUT BASE ── */
  body.pd-shell .pd-main {
    margin-left: 0 !important;
    width: 100% !important;
  }
  body.pd-shell .pd-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── HERO CARD (todos os perfis) ── */
  body.pd-shell #adm-hierarquia .np-card,
  body.pd-shell #hierarquia-potencial .np-card {
    display: grid !important;
    grid-template-rows: 44vh auto !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
  }

  /* ── ORACLE SLOT (esfera) ── */
  body.pd-shell #adm-hierarquia .np-oracle-slot,
  body.pd-shell #hierarquia-potencial .np-oracle-slot {
    grid-row: 1 !important;
    grid-column: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 2 !important;
  }

  body.pd-shell #adm-hierarquia .oracle-bg,
  body.pd-shell #hierarquia-potencial .oracle-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.pd-shell #adm-hierarquia .oracle-bg spline-viewer,
  body.pd-shell #hierarquia-potencial .oracle-bg spline-viewer {
    width: 100% !important;
    height: 100% !important;
    display: none !important;   /* esfera Spline removida (jun/2026) */
    transform: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* ── LABEL DA LILI ── */
  body.pd-shell #adm-hierarquia .oracle-center-label,
  body.pd-shell #hierarquia-potencial .oracle-center-label {
    position: absolute !important;
    top: 50% !important;
    left: 16px !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
    text-align: left !important;
    align-items: flex-start !important;
    z-index: 10 !important;
  }

  body.pd-shell #adm-hierarquia .oracle-ola,
  body.pd-shell #hierarquia-potencial .oracle-ola {
    font-size: clamp(20px, 5.5vw, 26px) !important;
  }

  body.pd-shell #adm-hierarquia .oracle-sub,
  body.pd-shell #adm-hierarquia .oracle-msg-texto,
  body.pd-shell #hierarquia-potencial .oracle-sub,
  body.pd-shell #hierarquia-potencial .oracle-msg-texto {
    font-size: 13px !important;
  }

  /* Esconde número hero — já aparece na Lili */
  body.pd-shell #adm-hierarquia .np-row,
  body.pd-shell #hierarquia-potencial .np-row {
    display: none !important;
  }

  /* ── KPI CARDS ── */
  body.pd-shell #adm-hierarquia .np-kpis,
  body.pd-shell #hierarquia-potencial .np-kpis {
    grid-row: 2 !important;
    grid-column: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    padding: 12px !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    z-index: 5 !important;
    background: transparent !important;
  }

  body.pd-shell #adm-hierarquia .np-kpis .np-kpi,
  body.pd-shell #hierarquia-potencial .np-kpis .np-kpi {
    background: var(--lb-stage-glass) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-top: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: var(--lb-radius-md) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    padding: 14px 12px !important;
  }

  body.pd-shell #adm-hierarquia .np-kpis .np-kpi-num,
  body.pd-shell #hierarquia-potencial .np-kpis .np-kpi-num {
    color: var(--lb-stage-text) !important;
    font-size: clamp(20px, 5.5vw, 26px) !important;
    font-weight: 800 !important;
  }

  body.pd-shell #adm-hierarquia .np-kpis .np-kpi-label,
  body.pd-shell #adm-hierarquia .np-kpis .np-kpi-lbl,
  body.pd-shell #hierarquia-potencial .np-kpis .np-kpi-label,
  body.pd-shell #hierarquia-potencial .np-kpis .np-kpi-lbl {
    color: rgba(255,255,255,0.35) !important;
    font-size: 9px !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
  }

  body.pd-shell #adm-hierarquia .np-kpis .np-kpi svg,
  body.pd-shell #adm-hierarquia .np-kpis .np-kpi i,
  body.pd-shell #hierarquia-potencial .np-kpis .np-kpi svg,
  body.pd-shell #hierarquia-potencial .np-kpis .np-kpi i {
    opacity: 0.18 !important;
    color: #fff !important;
  }

  /* ── CONTEÚDO ABAIXO DO HERO ── */
  body.pd-shell .pd-content:has(#hierarquia-potencial) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }

  body.pd-shell #aba-graficos,
  body.pd-shell #aba-overview {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.pd-shell #aba-graficos > *:not(#hierarquia-potencial),
  body.pd-shell #aba-overview > *:not(#hierarquia-potencial) {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .pd-content > #hierarquia-potencial,
  #aba-graficos > #hierarquia-potencial,
  #aba-overview > #hierarquia-potencial {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

}

/* ═══ Mobilizador — composição Visão geral (modelo admin/gestor) ═══ */
body.pd-shell[data-tour-role="ativista"] .pd-content {
  --adm-gutter: clamp(28px, 4vw, 64px);
  --adm-section-gap: clamp(36px, 4.6vw, 72px);
  --adm-card-pad: clamp(26px, 3vw, 38px);
  --adm-card-radius: var(--lb-radius-lg);  /* 16px — brief (era 30px) */
}

body.pd-shell[data-tour-role="ativista"] .pd-content > *:not(#hierarquia-potencial) {
  width: calc(100% - (var(--adm-gutter) * 2)) !important;
  max-width: 1540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

body.pd-shell[data-tour-role="ativista"] #sec-geo .pd-geo-card {
  background: var(--lb-panel-grad) !important;
  -webkit-backdrop-filter: var(--lb-panel-blur) !important;
  backdrop-filter: var(--lb-panel-blur) !important;
  border: 1px solid var(--lb-panel-border) !important;
  border-radius: var(--adm-card-radius) !important;
  box-shadow: var(--lb-panel-shadow) !important;
  padding: var(--adm-card-pad) !important;
}

/* Mobilizador — hero não ocupa 100vh no desktop (visao-geral-premium aplica 100vh em #hierarquia-potencial) */
@media (min-width: 821px) {
  body.pd-shell[data-tour-role="ativista"] #hierarquia-potencial .np-card {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: minmax(360px, 46vh) auto !important;
    grid-template-columns: 1fr !important;
    padding-bottom: 20px !important;
  }

  body.pd-shell[data-tour-role="ativista"] #hierarquia-potencial .np-oracle-slot {
    position: relative !important;
    inset: auto !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 360px !important;
    overflow: hidden !important;
  }

  body.pd-shell[data-tour-role="ativista"] #hierarquia-potencial .np-oracle-slot .oracle-bg,
  body.pd-shell[data-tour-role="ativista"] #hierarquia-potencial .np-oracle-slot spline-viewer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
  }

  body.pd-shell[data-tour-role="ativista"] #hierarquia-potencial .np-kpis {
    grid-row: 2 !important;
    grid-column: 1 !important;
    position: relative !important;
    inset: auto !important;
  }

  body.pd-shell[data-tour-role="ativista"] .pd-content > #hierarquia-potencial .np-row,
  body.pd-shell[data-tour-role="ativista"] #hierarquia-potencial .np-row {
    display: none !important;
  }

  body.pd-shell[data-tour-role="ativista"] #sec-mini-stats {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 820px) {
  body.pd-shell[data-tour-role="ativista"] .pd-main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  body.pd-shell[data-tour-role="ativista"] .pd-content:has(#hierarquia-potencial) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }

  body.pd-shell[data-tour-role="ativista"] #sec-share,
  body.pd-shell[data-tour-role="ativista"] #sec-charts,
  body.pd-shell[data-tour-role="ativista"] #sec-lista,
  body.pd-shell[data-tour-role="ativista"] #sec-config {
    padding-top: max(18px, env(safe-area-inset-top));
  }
}

/* =====================================================================
   SUPERFÍCIE PREMIUM v2.1 — mobile (fundo + respiro + luz residual)
   ===================================================================== */
@media (max-width: 820px) {

  html body.pd-shell #aba-pagamentos.aba-conteudo.ativa {
    background: var(--lb-app-bg) !important;   /* Light — era gradiente preto→claro */
  }



  html body.pd-shell #aba-pagamentos.aba-conteudo.ativa::before {
    height: 400px !important;
    filter: blur(40px) !important;
  }

}

@media (max-width: 820px) {
  /* FIX SCROLL MOBILE v2.7.2 — degradê acompanha scroll do .pd-main */
  body.pd-shell .pd-main::before {
    content: '' !important;
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  body.pd-shell .pd-layout {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.pd-shell .pd-main {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
  }
  body.pd-shell .pd-content {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  /* FIX HERO MOBILE — remover min-height: 100dvh que trava o fluxo */
  body.pd-shell #adm-hierarquia .np-card,
  body.pd-shell #hierarquia-potencial .np-card {
    min-height: 0 !important;
    height: auto !important;
  }
  /* Drawer aberto: trava body; fechado: scroll no .pd-main */
  body.pd-shell:has(.pd-side.open) {
    overflow: hidden !important;
  }

  /* Fundo mobile — Light (era gradiente atmosférico preto→claro) */
  html body.pd-shell .pd-layout {
    background: var(--lb-app-bg) !important;
    min-height: 100% !important;
    height: auto !important;
  }

  /* canvas de partículas — reposicionar para zona de transição mobile */
  html body.pd-shell #adm-hierarquia .np-atmos-canvas,
  html body.pd-shell #hierarquia-potencial .np-atmos-canvas {
    bottom: -60px !important;
    height: 160px !important;
  }

  /* FIX MOBILE v2.6.7 — esfera, KPIs e transição */

  /* 1. Oracle slot menor — reduz espaço vazio ao redor da esfera */
  body.pd-shell #adm-hierarquia .np-oracle-slot,
  body.pd-shell #hierarquia-potencial .np-oracle-slot {
    min-height: 280px !important;
    max-height: 300px !important;
    height: 290px !important;
  }

  /* 2. KPIs menores — seletor exato que vence */
  body.pd-shell #adm-hierarquia .np-kpis .np-kpi,
  body.pd-shell #hierarquia-potencial .np-kpis .np-kpi {
    padding: 8px 10px !important;
    min-height: 0 !important;
  }

  /* 3. Presença — seletor exato que vence */
  body.pd-shell #aba-pagamentos > #adm-presenca-rede,
  body.pd-shell #aba-graficos > #coord-presenca-rede,
  body.pd-shell #aba-overview > #lider-presenca-rede {
    margin-top: 24px !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  /* FIX MOBILE v2.6.9 — esfera, spline e texto */

  /* 1. Spline não pode ter min-height: 100vh no mobile */
  body.pd-shell #adm-hierarquia .np-oracle-slot spline-viewer,
  body.pd-shell #hierarquia-potencial .np-oracle-slot spline-viewer {
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
  }

  body.pd-shell .oracle-sphere-core {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 160px !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 4px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  body.pd-shell .oracle-ola {
    font-size: 11px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
  }

  body.pd-shell .oracle-center-label {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 100% !important;
    text-align: center !important;
  }

  body.pd-shell .oracle-sphere-total {
    font-size: 32px !important;
    line-height: 1 !important;
    display: block !important;
  }

  body.pd-shell .oracle-hero-lbl {
    font-size: 8px !important;
    letter-spacing: 0.06em !important;
    opacity: 0.5 !important;
    display: block !important;
    white-space: nowrap !important;
  }

  /* Esfera menor — 140px */
  body.pd-shell #adm-hierarquia .oracle-sphere-stage,
  body.pd-shell #adm-hierarquia .oracle-sphere-clip,
  body.pd-shell #hierarquia-potencial .oracle-sphere-stage,
  body.pd-shell #hierarquia-potencial .oracle-sphere-clip {
    width: 140px !important;
    height: 140px !important;
  }

  /* Slot compacto — menos vazio entre esfera e KPIs */
  body.pd-shell #adm-hierarquia .np-oracle-slot,
  body.pd-shell #hierarquia-potencial .np-oracle-slot {
    min-height: 240px !important;
    height: 240px !important;
    max-height: 240px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hero ocupa toda a primeira tela no mobile */
  body.pd-shell #adm-hierarquia,
  body.pd-shell #adm-hierarquia .np-card {
    min-height: 100dvh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 62px !important;
  }

  /* Oracle slot flexível dentro do hero — altura fixa vem do bloco 240px acima */
  body.pd-shell #adm-hierarquia .np-oracle-slot {
    flex: 1 !important;
    min-height: 240px !important;
    height: 240px !important;
    max-height: 240px !important;
  }

  /* KPIs ancorados na base do hero */
  body.pd-shell #adm-hierarquia .np-kpis {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Presença começa fora da primeira tela */
  body.pd-shell #aba-pagamentos > #adm-presenca-rede {
    margin-top: 40px !important;
  }

  /* FIX MOBILE v2.7.3 — pd-main transparente; gradiente no #aba-pagamentos */
  body.pd-shell .pd-main {
    background: transparent !important;
  }

  body.pd-shell .oracle-center-label {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }

  body.pd-shell #adm-hierarquia .oracle-center-label,
  body.pd-shell #hierarquia-potencial .oracle-center-label {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* Fix slot negativo — impedir que saia da viewport */
  body.pd-shell #adm-hierarquia .np-oracle-slot,
  body.pd-shell #hierarquia-potencial .np-oracle-slot {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  /* Fix scroll touch */
  body.pd-shell .pd-main {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  body.pd-shell #adm-hierarquia,
  body.pd-shell #adm-hierarquia .np-card {
    touch-action: pan-y !important;
    overflow: visible !important;
  }

  /* Centralizar a stage dentro do slot */
  body.pd-shell #adm-hierarquia .oracle-sphere-stage,
  body.pd-shell #hierarquia-potencial .oracle-sphere-stage {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 200px !important;
    height: 200px !important;
  }

  body.pd-shell #adm-hierarquia .oracle-sphere-clip,
  body.pd-shell #hierarquia-potencial .oracle-sphere-clip {
    width: 200px !important;
    height: 200px !important;
    overflow: hidden !important;
  }

  /* Core centralizado dentro do clip */
  body.pd-shell .oracle-sphere-core {
    width: 180px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Reduzir vazio acima — slot menor */
  body.pd-shell #adm-hierarquia .np-oracle-slot,
  body.pd-shell #hierarquia-potencial .np-oracle-slot {
    min-height: 260px !important;
    height: 260px !important;
    max-height: 260px !important;
  }
}

/* ====================================================================
   UX — Centralização vertical das telas de LISTA/EMPTY (desktop)
   Conteúdo curto fica centralizado vertical+horizontal (não mais colado no
   topo com vazio embaixo). Conteúdo alto (tabela cheia) volta ao topo via
   `safe center`. Abas hero (full-bleed) e ativista são excluídas.
   ==================================================================== */
@media (min-width: 821px) {
  /* Exclui: hero/VG (pagamentos/graficos/overview) E abas FORA do .pd-content
     (conselheiro/instituto/igreja/contabilidade/gestao-ia/apresentacao são irmãs
     em .pd-main — se a centralização aplicasse, o .pd-content viraria um bloco
     vazio de 100dvh empurrando o conteúdo dessas abas pra baixo).
     Uma lista dentro de um :has() só (encadear :not(:has()) múltiplos dá
     resultado errado no Chromium). */
  body.pd-shell:not([data-tour-role="ativista"]):not(:has(#aba-pagamentos.aba-conteudo.ativa, #aba-graficos.aba-conteudo.ativa, #aba-overview.aba-conteudo.ativa, #aba-visao.aba-conteudo.ativa, #aba-conselheiro.aba-conteudo.ativa, #aba-instituto.aba-conteudo.ativa, #aba-igreja.aba-conteudo.ativa, #aba-contabilidade.aba-conteudo.ativa, #aba-gestao-ia.aba-conteudo.ativa, #aba-apresentacao.aba-conteudo.ativa)) .pd-content {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: min(1320px, 100%);  /* track DEFINIDA (item preenche os 1320, não encolhe ao conteúdo) */
    justify-content: center;                   /* centraliza horizontal */
    align-content: start;                       /* topo: conteúdo curto NÃO centraliza vertical (evitava vão gigante no topo, ex.: fila vazia do auditor) */
  }
  /* anula o margin-inline:auto da base (que encolhe o grid item ao conteúdo);
     a aba preenche a track de 1320 e a centralização vem do grid acima */
  body.pd-shell:not([data-tour-role="ativista"]):not(:has(#aba-pagamentos.aba-conteudo.ativa, #aba-graficos.aba-conteudo.ativa, #aba-overview.aba-conteudo.ativa, #aba-visao.aba-conteudo.ativa, #aba-conselheiro.aba-conteudo.ativa, #aba-instituto.aba-conteudo.ativa, #aba-igreja.aba-conteudo.ativa, #aba-contabilidade.aba-conteudo.ativa, #aba-gestao-ia.aba-conteudo.ativa, #aba-apresentacao.aba-conteudo.ativa)) .pd-content > .aba-conteudo {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}

}

#aba-gestao-direta .rd-shell {
  width: 100%;
  max-width: min(1320px, 100%);
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--lb-line, var(--pd-border));
  border-radius: 16px;
  background: var(--lb-card);
  box-shadow: var(--lb-shadow-md);
  box-sizing: border-box;
}

#aba-gestao-direta .rd-filtros {
  align-items: center;
}

#aba-gestao-direta .rd-table-card {
  border: 1px solid var(--lb-line, var(--pd-border));
  border-radius: 14px;
  background: var(--lb-card);
  overflow: auto;
}

#aba-gestao-direta .rd-empty {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 18px;
  color: var(--lb-ink-mute, var(--pd-text-3));
  font-size: 13px;
  text-align: center;
}

#aba-gestao-direta .rd-empty-error {
  color: var(--lb-danger);
}

@media (max-width: 820px) {
  body.pd-shell #aba-gestao-direta {
    width: 100%;
    box-sizing: border-box;
  }

  #aba-gestao-direta .rd-shell {
    padding: 14px;
    border-radius: 14px;
  }

  #aba-gestao-direta .rd-head {
    margin-bottom: 14px;
  }

  #aba-gestao-direta .rd-filtros {
    gap: 6px;
  }

  #aba-gestao-direta .rd-filtro {
    flex: 1 1 auto;
    min-width: 92px;
    text-align: center;
  }
}