/* ============================================================================
A BARRA DE CIMA — uma só, minimalista, em TODAS as telas de quem entrou
(12/09/2026)
O Pedro: *"coloque um menu superior bonito em todos, minimalista"*.
Esta folha vem DEPOIS de todas as outras (o /site/v5-app.js pendura o
, que tem
`overflow-x:auto` para rolar no celular — e overflow RECORTA filho
absoluto. O menu abria invisível. Nunca voltar a posicionar o submenu
com `position:absolute` dentro do nav.
========================================================================== */
body.v5-app-topo { --barra: 62px; --linha-topo: #E4E8F1; }
body.v5-app-topo :is(.app-page, .office-page) .sidebar {
gap: 14px;
background: rgba(255,255,255,.93);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--linha-topo);
box-shadow: none;
padding: 0 clamp(14px, 2.2vw, 26px);
}
/* ------------------------------------------------------------------- MARCA */
body.v5-app-topo :is(.app-page, .office-page) .sidebar .brand {
gap: 9px; font-size: 16.5px; font-weight: 900; letter-spacing: -.04em;
color: var(--ink); padding-right: 15px; position: relative; flex: none;
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar .brand:after {
content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 22px; background: var(--linha-topo);
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar .brand-mark {
width: 27px; height: 27px; border-radius: 9px; background: var(--ink); color: var(--lime);
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar .brand-mark svg { width: 15px; height: 15px; }
/* -------------------------------------------------------------- OS ITENS */
/* o nav ROLA de lado quando não cabe (telas médias e celular). Isso é seguro
agora: o submenu mora no e o menu da conta é irmão do nav — ninguém
mais é recortado por este overflow. */
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav {
/* ⚠️ o `display:flex` é obrigatório: em até 720px o v5.css transforma
`.sidebar nav` em grid de 3 colunas (herança da coluna da esquerda) e a
barra virava três linhas com os rótulos apagados (font-size:0). */
display: flex !important; flex-direction: row !important; align-items: center;
grid-template-columns: none !important; margin: 0 !important;
gap: 1px; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden;
scrollbar-width: none;
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav::-webkit-scrollbar { display: none; }
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a,
body.v5-app-topo :is(.app-page, .office-page) .sidebar .abre-grupo {
padding: 8px 11px; border-radius: 10px; font-size: 13.5px; font-weight: 640;
color: #46626C; background: none; border: 0; gap: 8px; line-height: 1.1;
transition: background .14s ease, color .14s ease;
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a svg,
body.v5-app-topo :is(.app-page, .office-page) .sidebar .abre-grupo svg {
width: 16px; height: 16px; color: #93A0C5; stroke-width: 1.9;
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a:hover,
body.v5-app-topo :is(.app-page, .office-page) .sidebar .abre-grupo:hover {
background: #EFF1F6; color: var(--ink); border-color: transparent;
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a:hover svg,
body.v5-app-topo :is(.app-page, .office-page) .sidebar .abre-grupo:hover svg { color: #46626C; }
/* o item em que você está: a única cor cheia da barra */
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a.active,
body.v5-app-topo :is(.app-page, .office-page) .sidebar .grupo.aqui .abre-grupo,
body.v5-app-topo :is(.app-page, .office-page) .sidebar .grupo.aberto .abre-grupo {
background: var(--ink); color: #fff; font-weight: 740; box-shadow: none; border-color: transparent;
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a.active svg,
body.v5-app-topo :is(.app-page, .office-page) .sidebar .grupo.aqui .abre-grupo svg,
body.v5-app-topo :is(.app-page, .office-page) .sidebar .grupo.aberto .abre-grupo svg { color: var(--lime); }
/* os dois carros-chefe perdem a pílula pintada: dentro da barra eles são
itens como os outros (a ênfase deles está na tela inicial, nos dois
cartões grandes) */
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a.destaque {
background: none; border: 0; margin: 0; font-weight: 640; color: #46626C;
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a.destaque:hover { background: #EFF1F6; color: var(--ink); }
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a.destaque svg { color: #93A0C5; }
/* ⚠️ o dashboard tem UMA classe a mais (.destaque.painel) na folha antiga —
sem repetir a dupla aqui, ele continuava com a pílula lima */
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a.destaque.painel {
background: none; border: 0; color: #46626C;
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a.destaque.painel:hover { background: #EFF1F6; color: var(--ink); }
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a.destaque.painel svg { color: #93A0C5; }
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a.destaque.active,
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a.destaque.painel.active {
background: var(--ink); border-color: transparent; color: #fff; font-weight: 740;
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a.destaque.active svg,
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a.destaque.painel.active svg { color: var(--lime); }
/* a bolinha de "ao vivo" e o cadeado, agora do tamanho da letra */
body.v5-app-topo .sidebar .ponto-vivo { width: 6px; height: 6px; margin-left: 1px; }
body.v5-app-topo .sidebar .destaque.active .ponto-vivo,
body.v5-app-topo .sidebar .destaque.painel.active .ponto-vivo { background: var(--lime); }
body.v5-app-topo .sidebar .cadeado { margin-left: 1px; opacity: .4; }
body.v5-app-topo .sidebar .cadeado svg { width: 13px; height: 13px; }
/* --------------------------------------------------- SUBMENU (fixed!) */
body.v5-app-topo :is(.app-page, .office-page) .sidebar .grupo .seta {
width: 6px; height: 6px; margin-left: 2px; opacity: .5; border-width: 1.8px;
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar .grupo.aberto .seta { opacity: .9; }
/* o submenu vive no (ver v5-app.js): fora da barra nada o recorta */
body .sub.menu-flutuante {
position: fixed; top: var(--barra, 62px); left: 0; min-width: 272px; z-index: 90;
background: #fff; border: 1px solid #E4E8F1; border-radius: 16px; padding: 6px;
box-shadow: 0 22px 48px rgba(9,11,18,.15); display: none; margin: 0;
}
body .sub.menu-flutuante.aberto { display: block; }
body .sub.menu-flutuante a {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 10px 11px; font-size: 13.5px; border-radius: 11px;
color: #385B69; font-weight: 660; text-decoration: none;
}
body .sub.menu-flutuante a svg { width: 16px; height: 16px; color: #93A0C5; flex: none; }
body .sub.menu-flutuante a:hover { background: #F3F4F8; color: var(--ink); }
body .sub.menu-flutuante a:hover svg { color: #46626C; }
body .sub.menu-flutuante a.active { background: var(--ink); color: #fff; }
body .sub.menu-flutuante a.active svg { color: var(--lime); }
/* a barra não rola nem recorta: o menu da conta é absoluto dentro dela */
body.v5-app-topo :is(.app-page, .office-page) .sidebar { overflow: visible; }
/* ------------------------------------------------------------------ CONTA */
body.v5-app-topo :is(.app-page, .office-page) .sidebar .conta-lado { margin-left: auto; }
body.v5-app-topo :is(.app-page, .office-page) .sidebar .conta-lado .perfil {
gap: 8px; padding: 5px 8px 5px 5px; border-radius: 999px; border: 1px solid var(--linha-topo);
background: #fff;
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar .conta-lado .perfil:hover { background: #F3F4F8; }
body.v5-app-topo :is(.app-page, .office-page) .sidebar .conta-lado .ini {
width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--lime);
font-size: 12.5px; font-weight: 900;
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar .conta-lado .quem { display: block; max-width: 130px; }
body.v5-app-topo .sidebar .conta-lado .quem b {
font-size: 12.5px; font-weight: 780; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.v5-app-topo .sidebar .conta-lado .quem small { font-size: 11px; }
body.v5-app-topo .sidebar .coroa-plano { width: 14px; height: 14px; color: #B56412; vertical-align: -2px; margin-right: 4px; }
body.v5-app-topo .sidebar .quem > .coroa-plano { position: absolute; margin-top: -14px; margin-left: 1px; }
body.v5-app-topo .sidebar .quem-menu .coroa-plano { width: 15px; height: 15px; margin: 0 5px 0 0; }
body.v5-app-topo .sidebar .conta-lado .seta { width: 6px; height: 6px; margin-left: 2px; }
body.v5-app-topo :is(.app-page, .office-page) .sidebar .menu-conta {
top: calc(var(--barra) - 8px); bottom: auto; left: auto; right: 0; /* ⚠️ o left:0 da
folha antiga, somado ao right:0, esticava o menu para fora da tela */
min-width: 244px; border-radius: 16px; padding: 6px;
border-color: var(--linha-topo); box-shadow: 0 20px 44px rgba(9,11,18,.14);
}
/* -------------------------------------------------------------- CONTEÚDO */
body.v5-app-topo .app-page .app-content {
padding-top: calc(var(--barra) + 30px) !important;
padding-left: clamp(18px, 3.2vw, 46px) !important;
padding-right: clamp(18px, 3.2vw, 46px) !important;
max-width: 1560px; margin: 0 auto !important;
}
/* ⚠️ a folha antiga ainda tem a GAVETA do tempo da coluna: em até 900px ela
joga a barra para fora da tela com translateX(-102%) e só volta com a classe
.lado-aberto. Como agora é barra, ela precisa ficar onde está. */
@media (max-width: 900px) {
body.v5-app-topo :is(.app-page, .office-page) .sidebar { transform: none !important; }
body.v5-app-topo .app-page .app-content { padding-top: calc(var(--barra) + 22px) !important; }
body.v5-app-topo .abre-lado { display: none !important; }
}
@media (max-width: 1120px) {
body.v5-app-topo :is(.app-page, .office-page) .sidebar .conta-lado .quem { display: none; }
}
@media (max-width: 860px) {
body.v5-app-topo { --barra: 56px; }
body.v5-app-topo :is(.app-page, .office-page) .sidebar { gap: 8px; }
body.v5-app-topo :is(.app-page, .office-page) .sidebar .brand span:last-child { display: none; }
body.v5-app-topo :is(.app-page, .office-page) .sidebar .brand:after { display: none; }
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a,
body.v5-app-topo :is(.app-page, .office-page) .sidebar .abre-grupo {
padding: 8px 9px; font-size: 12.5px !important; justify-content: flex-start;
}
}
/* ================================================================ 14/09/2026
O BLOCO DA CONTA NO TOPO — "tgLUCREI Completo está sem formatação".
MEDIDO NO AR: no Escritório o `.perfil` vinha com `display:inline-block` e
85px de altura (o certo são 43). A causa: as regras de forma do perfil moram
sob `body.v5-app .sidebar ...`, e o Escritório não recebe a classe `v5-app`
— ele recebe `v5-app-escritorio`. Resultado: nome, plano e bolinha caíam um
embaixo do outro, sem alinhamento. Aqui a forma é escrita no seletor do
TOPO, que vale nas duas telas. */
body.v5-app-topo .sidebar .conta-lado .perfil { display: inline-flex; align-items: center; }
body.v5-app-topo .sidebar .conta-lado .ini { display: grid; place-items: center; flex: none; }
body.v5-app-topo .sidebar .conta-lado .quem { display: block; text-align: left; line-height: 1.2; }
body.v5-app-topo .sidebar .conta-lado .quem b,
body.v5-app-topo .sidebar .conta-lado .quem small { display: block; }
body.v5-app-topo .sidebar .conta-lado .quem small { color: #528BA2; }
/* ---------------------------------------------- TROCAR DE LOJA (14/09/2026)
Fica entre o menu e o bloco da conta. Com uma loja só vira etiqueta. */
body.v5-app-topo .sidebar .loja-topo { position: relative; margin-left: auto; }
body.v5-app-topo .sidebar .loja-topo + .conta-lado { margin-left: 10px; }
body.v5-app-topo .sidebar .loja-btn,
body.v5-app-topo .sidebar .loja-topo.so-uma {
display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px;
border: 1px solid var(--linha-topo); border-radius: 999px; background: #fff;
font-size: 12.5px; font-weight: 700; color: var(--ink); max-width: 230px;
}
body.v5-app-topo .sidebar .loja-btn b,
body.v5-app-topo .sidebar .loja-topo.so-uma b {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 780;
}
body.v5-app-topo .sidebar .loja-btn svg,
body.v5-app-topo .sidebar .loja-topo.so-uma svg { width: 15px; height: 15px; color: #528BA2; flex: none; }
body.v5-app-topo .sidebar .loja-btn:hover { background: #F3F4F8; }
body.v5-app-topo .sidebar .loja-btn .seta {
width: 6px; height: 6px; border-right: 2px solid #798AB7; border-bottom: 2px solid #798AB7;
transform: rotate(45deg) translate(-1px, -1px); flex: none;
}
body.v5-app-topo .sidebar .menu-loja {
position: absolute; top: calc(100% + 8px); right: 0; min-width: 250px; z-index: 60;
background: #fff; border: 1px solid var(--linha-topo); border-radius: 16px;
box-shadow: 0 22px 50px rgba(9,11,18,.16); padding: 8px; display: grid; gap: 2px;
}
/* `display:grid` do autor vence o `[hidden]` do navegador. Sem esta regra o
JavaScript mudava o estado para fechado, mas o menu continuava na tela. */
body.v5-app-topo .sidebar .menu-loja[hidden] { display: none; }
body.v5-app-topo .sidebar .menu-loja > small {
font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #798AB7; padding: 6px 10px 2px;
}
body.v5-app-topo .sidebar .menu-loja button {
display: grid; gap: 1px; text-align: left; border: 0; background: none;
padding: 9px 10px; border-radius: 11px; width: 100%;
}
body.v5-app-topo .sidebar .menu-loja button b { font-size: 13px; font-weight: 750; color: var(--ink); }
body.v5-app-topo .sidebar .menu-loja button small { font-size: 11px; color: #6698AC; }
body.v5-app-topo .sidebar .menu-loja button:hover { background: #F3F4F8; }
body.v5-app-topo .sidebar .menu-loja button.atual { background: #E2F4F0; }
body.v5-app-topo .sidebar .menu-loja button.atual b:after { content: " · lendo agora"; color: #1F7D6A; font-weight: 700; }
body.v5-app-topo .sidebar .menu-loja .ver-lojas {
border-top: 1px solid var(--linha-topo); margin-top: 4px; padding: 10px;
font-size: 12px; color: var(--blue, #6EEDD4); font-weight: 700;
}
/* ============================================================== MENU DA CONTA
⚠️ 14/09/2026 — POR QUE ESTE BLOCO EXISTE AQUI E NÃO NO `v5-app.css`.
O Pedro: *"melhore também esse submenu do tg, ali está sem formatação
nenhuma"*. E estava mesmo: os itens saíam em linha, um atrás do outro,
com o ícone colado no texto.
A causa: o `v5-app.js` (linha ~202) põe no `` a classe **`v5-app`**
nas telas comuns e **`v5-app-escritorio`** no Escritório. Toda a formatação
do menu da conta morava em `body.v5-app .menu-conta …` — ou seja, no
Escritório ela simplesmente não existia, e o menu caía no HTML cru. O menu
de LOJAS ao lado ficava perfeito porque as regras dele já moravam aqui,
penduradas em `body.v5-app-topo .sidebar`, que vale nas duas telas.
Regra que fica: **o que a barra de cima desenha se estiliza a partir de
`body.v5-app-topo .sidebar`** — nunca de `body.v5-app`.
============================================================================ */
body.v5-app-topo .sidebar .menu-conta {
position: absolute; top: calc(100% + 8px); right: 0; left: auto; bottom: auto;
min-width: 246px; z-index: 60;
background: #fff; border: 1px solid var(--linha-topo); border-radius: 16px;
box-shadow: 0 22px 50px rgba(9,11,18,.16); padding: 8px;
display: grid; gap: 2px;
}
body.v5-app-topo .sidebar .menu-conta[hidden] { display: none; }
/* quem está logado — na barra o nome fica escondido, então ele aparece aqui */
body.v5-app-topo .sidebar .menu-conta .quem-menu {
display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px;
align-items: center; padding: 8px 10px 10px;
border-bottom: 1px solid var(--linha-topo); margin-bottom: 4px;
}
body.v5-app-topo .sidebar .menu-conta .quem-menu .ini {
width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
background: var(--ink, #0A2029); color: var(--lime, #4EE9CA);
font-size: 13px; font-weight: 900;
}
body.v5-app-topo .sidebar .menu-conta .quem-menu b {
display: block; font-size: 13px; font-weight: 780; color: var(--ink, #0A2029);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.v5-app-topo .sidebar .menu-conta .quem-menu small {
display: block; font-size: 11px; color: #6698AC; font-weight: 650;
}
body.v5-app-topo .sidebar .menu-conta > small.rot {
font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: #798AB7; padding: 6px 10px 2px; font-weight: 800;
}
body.v5-app-topo .sidebar .menu-conta a {
display: flex; align-items: center; gap: 10px; padding: 9px 10px;
border-radius: 11px; color: #345461; font-size: 13px; font-weight: 700;
text-decoration: none; white-space: nowrap;
}
body.v5-app-topo .sidebar .menu-conta a svg {
width: 16px; height: 16px; flex: none; color: #798AB7; stroke-width: 1.9;
}
body.v5-app-topo .sidebar .menu-conta a:hover { background: #F3F4F8; color: var(--ink, #0A2029); }
body.v5-app-topo .sidebar .menu-conta a:hover svg { color: var(--ink, #0A2029); }
body.v5-app-topo .sidebar .menu-conta a:focus-visible {
outline: 2px solid var(--blue, #6EEDD4); outline-offset: -2px;
}
body.v5-app-topo .sidebar .menu-conta .sai {
border-top: 1px solid var(--linha-topo); margin-top: 4px; padding-top: 11px;
border-radius: 0 0 11px 11px; color: #C2670C;
}
body.v5-app-topo .sidebar .menu-conta .sai svg { color: #C2670C; }
body.v5-app-topo .sidebar .menu-conta .sai:hover { background: #FDF0E3; color: #9A5108; }
body.v5-app-topo .sidebar .menu-conta .sai:hover svg { color: #9A5108; }
/* no celular o menu não pode nascer da borda direita e sair da tela */
@media (max-width: 420px) {
body.v5-app-topo .sidebar .menu-conta,
body.v5-app-topo .sidebar .menu-loja {
right: 8px; left: 8px; min-width: 0; width: auto;
}
}
@media (max-width: 900px) {
body.v5-app-topo .sidebar .loja-btn b,
body.v5-app-topo .sidebar .loja-topo.so-uma b { display: none; }
body.v5-app-topo .sidebar .loja-btn,
body.v5-app-topo .sidebar .loja-topo.so-uma { padding: 7px 9px; }
}
/* ============================================================================
14/09/2026 — A BARRA DAS OUTRAS TELAS GANHOU O DESENHO DO DASHBOARD.
Pedido dele: *"quero também que copie esse menu para as outras páginas
também fora do dashboard, o estilo dele."*
O dashboard (index.html) usa uma CÁPSULA FLUTUANTE: a barra não encosta em
nada — fica descolada do topo e das laterais, com `border-radius:999px`,
sombra baixa e o conteúdo passando por baixo. As outras telas (escritório,
área de membros, biblioteca, ferramentas) usavam uma barra colada, de ponta
a ponta, com risco embaixo. São duas linguagens diferentes na mesma conta.
Aqui a cápsula é portada para a barra do v5 — mesma altura útil, mesmo
arredondamento, mesma sombra. O que NÃO foi copiado de propósito: a paleta.
O painel é verde-escuro por dentro; as outras telas são claras. Copiar a cor
junto faria as duas brigarem em vez de combinarem.
⚠️ As sete propriedades de posição da barra estão com `!important` no
v5-app.css (foi assim que pararam de virar coluna em cada página com CSS
próprio). Por isso a cápsula também precisa de `!important` — e esta folha
carrega DEPOIS, então ela ganha o desempate.
⚠️ `--barra` é a ALTURA RESERVADA (o que o conteúdo desce, e o `top` do
painel do escritório e da conversa). Com a cápsula ela passa a ser
folga + altura + folga. Quem mexer numa tem que mexer na outra.
========================================================================== */
body.v5-app-topo {
--folga-topo: 9px; /* o quanto a cápsula descola do topo e dos lados */
--barra-h: 54px; /* a altura da cápsula em si */
--barra: 72px; /* folga + altura + folga: é o que o conteúdo desce */
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar {
top: var(--folga-topo) !important;
left: var(--folga-topo) !important;
right: var(--folga-topo) !important;
width: auto !important;
height: var(--barra-h) !important;
border-radius: 999px;
border: 1px solid var(--linha-topo);
border-bottom: 1px solid var(--linha-topo);
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
box-shadow: 0 1px 2px rgba(9,11,18,.06), 0 14px 34px rgba(9,11,18,.11);
padding: 0 8px 0 16px;
gap: 10px;
}
/* dentro da cápsula tudo encolhe um fio, senão ela engorda */
body.v5-app-topo :is(.app-page, .office-page) .sidebar nav a,
body.v5-app-topo :is(.app-page, .office-page) .sidebar .abre-grupo {
padding: 8px 12px; border-radius: 999px;
}
body.v5-app-topo :is(.app-page, .office-page) .sidebar .brand { padding-right: 13px; }
body.v5-app-topo :is(.app-page, .office-page) .sidebar .brand:after { height: 20px; }
/* os menus que descem da barra saem da borda da cápsula, não da borda da tela */
body .sub.menu-flutuante { border-radius: 18px; }
body.v5-app-topo :is(.app-page, .office-page) .sidebar .menu-conta,
body.v5-app-topo :is(.app-page, .office-page) .sidebar .menu-loja {
top: calc(100% + 10px); border-radius: 18px;
}
/* a cápsula no celular: menos folga, menos altura */
@media (max-width: 720px) {
body.v5-app-topo { --folga-topo: 7px; --barra-h: 46px; --barra: 60px; }
body.v5-app-topo :is(.app-page, .office-page) .sidebar { padding: 0 6px 0 10px; gap: 8px; }
}
/* ⚠️ O ESCRITÓRIO É A TELA ESCURA: a cápsula branca boiando sobre o palco
preto fica com um halo claro em volta. Aqui ela vira a versão escura da
MESMA forma — é o que o painel faz no tema escuro. */
body.v5-escritorio :is(.app-page, .office-page) .sidebar {
background: rgba(17,23,38,.92);
border-color: #223740;
box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 38px rgba(0, 0, 0, .38);
}
body.v5-escritorio :is(.app-page, .office-page) .sidebar .brand { color: #fff; }
body.v5-escritorio :is(.app-page, .office-page) .sidebar .brand:after { background: #28505B; }
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .abre-grupo { color: #A0ACCC; }
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a:hover,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .abre-grupo:hover {
background: #102C36; color: #fff;
}
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.active,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .grupo.aqui .abre-grupo,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .grupo.aberto .abre-grupo {
background: var(--lime); color: #0A2029;
}
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.active svg,
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.destaque.active svg,
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.destaque.painel.active svg,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .grupo.aqui .abre-grupo svg { color: #0A2029; }
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.destaque.active,
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.destaque.painel.active {
background: var(--lime); color: #0A2029; border-color: var(--lime);
}
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.destaque,
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.destaque.painel {
background: none; border-color: transparent; color: #A0ACCC;
}
/* ⚠️ ESPECIFICIDADE: a versão clara destes dois vem de
`body.v5-app-topo :is(.app-page,.office-page) .sidebar .conta-lado .perfil`
(4 classes). Escrever a versão escura com 3 classes não adianta — foi o que
deixou o crachá branco boiando na cápsula escura no primeiro teste. */
body.v5-escritorio :is(.app-page, .office-page) .sidebar .conta-lado .perfil,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .loja-btn,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .loja-topo.so-uma {
background: #102C36; border-color: #28505B; color: #E3EFF0;
}
body.v5-escritorio :is(.app-page, .office-page) .sidebar .conta-lado .perfil:hover,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .loja-btn:hover { background: #163944; }
body.v5-escritorio :is(.app-page, .office-page) .sidebar .conta-lado .ini {
background: var(--lime); color: #0A2029;
}
body.v5-escritorio .sidebar .conta-lado .quem b,
body.v5-escritorio .sidebar .loja-btn b,
body.v5-escritorio .sidebar .loja-topo.so-uma b { color: #EEF1F8; }
body.v5-escritorio .sidebar .conta-lado .quem small { color: #8D9BC1; }