com .pg-title e .subtitle (hero no mesmo padrão da home). Tudo escopado em html[data-pb-base="escuro"] para sobrepor o CSS próprio de cada página e NÃO afetar telas claras. Cores via tokens --pb-* (mobile-fix.css). ============================================================================= */ /* ---- Fundo da página: marrom #24282e + constelação à direita (como na home) ---- */ html[data-pb-base="escuro"] body.pb-has-sidebar{ /* min-height garante que o fundo (gradiente + constelação) cubra TODA a viewport mesmo em páginas curtas. Sem isso, o body fica só do tamanho do conteúdo e abaixo dele aparece o canvas chapado (#24282e), criando um "quadro preto" entre o conteúdo e o rodapé fixo. Referência: home/usuarios. */ min-height: 100vh; background: linear-gradient(90deg, var(--pb-bg) 0%, var(--pb-bg) 40%, rgba(36,40,46,.95) 56%, rgba(36,40,46,.85) 78%, rgba(36,40,46,.80) 100%), url('/home-fundo.webp') center right / cover fixed no-repeat, var(--pb-bg); } @media (max-width:768px){ html[data-pb-base="escuro"] body.pb-has-sidebar{ background-attachment:scroll,scroll,scroll; } } /* ---- Título de página ---- */ html[data-pb-base="escuro"] .pg-title{ color:var(--pb-title); } /* ---- Breadcrumb ---- */ html[data-pb-base="escuro"] .pb-breadcrumb, html[data-pb-base="escuro"] .pb-breadcrumb a, html[data-pb-base="escuro"] .pb-breadcrumb a:hover, html[data-pb-base="escuro"] .pb-breadcrumb .current{ color:var(--pb-bc); } html[data-pb-base="escuro"] .pb-breadcrumb .bc-sep{ color:var(--pb-bc-sep); } html[data-pb-base="escuro"] .pb-breadcrumb{ border-bottom-color:var(--pb-bg); } /* ---- Faixa superior (topbar do shell) ---- */ html[data-pb-base="escuro"] body.pb-has-topbar .pb-topbar{ background:var(--pb-topbar-bg); backdrop-filter:var(--pb-topbar-blur); -webkit-backdrop-filter:var(--pb-topbar-blur); border-bottom:1px solid var(--pb-bg); } html[data-pb-base="escuro"] .pb-topbar .pb-topbar-toggle{ color:rgba(255,255,255,.85); } html[data-pb-base="escuro"] .pb-topbar .pb-topbar-toggle:hover{ background:rgba(255,255,255,.1); } html[data-pb-base="escuro"] .pb-topbar .pb-sidebar-user{ color:rgba(255,255,255,.82); } /* ---- Menu lateral transparente sobre o fundo ---- */ html[data-pb-base="escuro"] body.pb-has-topbar .pb-sidebar{ background:transparent; border-right:1px solid var(--pb-bg); } html[data-pb-base="escuro"] .pb-sidebar-user{ color:rgba(255,255,255,.78); border-top-color:var(--pb-bg); border-bottom-color:var(--pb-bg); } html[data-pb-base="escuro"] .pb-nav-item{ color:var(--pb-nav-item); } html[data-pb-base="escuro"] .pb-nav-item > i:first-child{ color:var(--pb-nav-icon); } html[data-pb-base="escuro"] .pb-nav-item .caret{ color:var(--pb-nav-caret); } html[data-pb-base="escuro"] .pb-nav-item:hover{ background:var(--pb-nav-hover-bg); color:#fff; } html[data-pb-base="escuro"] .pb-nav-item:hover > i:first-child{ color:#fff; } html[data-pb-base="escuro"] .pb-nav-footer{ border-top-color:var(--pb-bg); } html[data-pb-base="escuro"] body.pb-collapsed .pb-nav-item:hover::after{ background:#f0ece6; color:#1a1816; } /* Tooltip do rail recolhido (elemento .pb-rail-tip no ): no tema escuro vira claro p/ contrastar com o menu transparente sobre o fundo escuro. */ html[data-pb-base="escuro"] .pb-rail-tip{ background:#f0ece6; color:#1a1816; } @media (max-width:768px){ html[data-pb-base="escuro"] body.pb-has-topbar .pb-sidebar{ background:var(--pb-sidebar-mobile-bg); border-right:0; } } /* ---- Separador de grupo do menu enxuto do cliente (cliente-sidebar.js) ---- */ html[data-pb-base="escuro"] .pb-nav .pb-nav-sep{ padding:14px 20px 6px; font-size:.66rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--pb-label); } html[data-pb-base="escuro"] body.pb-collapsed .pb-nav .pb-nav-sep{ display:none; } /* ---- Hero genérico de página (mesma cor do card de login) ---- */ html[data-pb-base="escuro"] .pg-hero{ margin-top:12px; padding:20px 22px; border:0; border-radius:var(--pb-hero-radius); background:var(--pb-hero-bg); backdrop-filter:var(--pb-hero-blur); -webkit-backdrop-filter:var(--pb-hero-blur); box-shadow:var(--pb-hero-shadow); } html[data-pb-base="escuro"] .pg-hero .pg-title{ color:var(--pb-hero-title); } html[data-pb-base="escuro"] .pg-hero .subtitle{ color:var(--pb-text); } /* Distância PADRÃO entre heros consecutivos = 18px (referência: /usuarios). Vale para todo hero secundário (.filters-hero) de páginas no padrão novo. Ver diretriz "distância entre heros" no CLAUDE.md. */ html[data-pb-base="escuro"] .filters-hero{ margin-top:18px; } /* Título de hero / rótulo de seção dentro do hero — heros de navegação e KPIs (0.8rem = 1rem −20%, espaçamento 2px, MAIÚSCULAS, negrito 700, branco). Use .hero-h. */ html[data-pb-base="escuro"] .hero-h{ font-size:0.8rem; letter-spacing:2px; text-transform:uppercase; color:var(--pb-hero-title); font-weight:700; margin:0 0 16px; font-family:'Albert Sans',system-ui,sans-serif; } /* ---- Hierarquia do menu pelo FUNDO (degradê quente de 2 graus por nível) — ESCURO ---- O texto fica UNIFORME; quem carrega a profundidade é o FUNDO do submenu, que fica 2 graus mais quente/definido a cada nível (família dourada da marca), substituindo os degraus quase-neutros do shell (#2a2a2c/#242426/#202022). Ícones dourados + trilho dourado fino (2px) constante. Escopo em html[data-pb-tema="escuro"] p/ não vazar no modo claro nativo. */ html[data-pb-tema="escuro"] .pb-nav-sub-wrap{ background:#2d2820; } /* N1 */ html[data-pb-tema="escuro"] .pb-nav-sub-wrap.pb-nav-sub2-wrap{ background:#3d3527; } /* N2 (+2 graus) */ html[data-pb-tema="escuro"] .pb-nav-sub-wrap.pb-nav-sub3-wrap{ background:#4e432e; } /* N3 (+2 graus) */ /* Ícones dourados (N0 + subitens); trilho dourado fino nos subitens */ html[data-pb-tema="escuro"] .pb-nav-item:not(.pb-open):not(.pb-active-leaf) > i:first-child{ color:var(--gold); } html[data-pb-tema="escuro"] .pb-nav-sub:not(.pb-open):not(.pb-active){ box-shadow:inset 2px 0 0 rgba(149,124,70,.85); } html[data-pb-tema="escuro"] .pb-nav-sub:not(.pb-open):not(.pb-active) > i:first-child{ color:var(--gold); opacity:1; }