/* ============================================================================
   A COLUNA DO APLICATIVO — o que o /site/v5-app.js monta  (11/09/2026)
   Vale para: área de membros, biblioteca, ferramentas, DRE e escritório.

   12/09 — o Pedro: *"o menu da área de membros está muito ruim as cores"*.
   A coluna era preta, com texto cinza-azulado: destoava do resto do site,
   que é claro. Agora ela é branca, com a linha de separação suave, texto
   escuro e os dois carros-chefe (escritório e dashboard) em destaque —
   escritório em roxo, dashboard em lima, as duas cores da identidade.
   ========================================================================== */

/* nas telas de aplicativo existe UMA casca: a coluna. A barra de cima some. */
body.v5-app header.barra,
body.v5-app .faixa-volta,
body.v5-app footer[data-rodape],
body.v5-app .rodape-app { display: none !important; }

body.v5-app { background: var(--paper); }
body.v5-app .app-page { min-height: 100vh; }
body.v5-app .app-content { min-height: 100vh; }

/* ---------------------------------------------------------------- A COLUNA */
body.v5-app-topo .app-page .sidebar {
  top: 0; height: 100vh; overflow-y: auto; gap: 2px;
  background: #fff;
  color: var(--ink);
  border-right: 1px solid rgba(9,11,18,.09);
}

/* marca */
body.v5-app-topo .app-page .sidebar .brand { flex: none; color: var(--ink); }
body.v5-app-topo .app-page .sidebar .brand-mark { background: var(--ink); color: var(--lime); }

/* navegação */
body.v5-app-topo .app-page .sidebar nav { margin-top: 26px; }
body.v5-app-topo .app-page .sidebar nav a {
  position: relative; color: #C2D7DB; font-weight: 680;
}
body.v5-app-topo .app-page .sidebar nav a svg { width: 18px; height: 18px; flex: none; color: #7384B3; }
body.v5-app-topo .app-page .sidebar nav a:hover { background: #F0F2F7; color: var(--ink); }
body.v5-app-topo .app-page .sidebar nav a:hover svg { color: var(--ink); }
body.v5-app-topo .app-page .sidebar nav a.active {
  background: #EDF0F6; color: var(--ink); font-weight: 780;
  box-shadow: inset 3px 0 0 var(--blue);
}
body.v5-app-topo .app-page .sidebar nav a.active svg { color: var(--blue); stroke-width: 2.2; }

/* os dois carros-chefe: escritório e dashboard.
   Eles não são mais um item de lista qualquer — têm cartão próprio. */
body.v5-app-topo .app-page .sidebar nav a.destaque {
  color: var(--ink); background: #F3FEFC; border: 1px solid #DEFBF5;
  font-weight: 780; margin-bottom: 3px;
}
body.v5-app-topo .app-page .sidebar nav a.destaque svg { color: var(--blue); }
body.v5-app-topo .app-page .sidebar nav a.destaque:hover { background: #E9FCF8; border-color: #CAF9EF; }
body.v5-app-topo .app-page .sidebar nav a.destaque.active {
  background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: none;
}
body.v5-app-topo .app-page .sidebar nav a.destaque.active svg { color: #fff; }

body.v5-app-topo .app-page .sidebar nav a.destaque.painel { background: #E3FCF7; border-color: #A9F4E5; }
body.v5-app-topo .app-page .sidebar nav a.destaque.painel svg { color: #118870; }
body.v5-app-topo .app-page .sidebar nav a.destaque.painel:hover { background: #CDF9F0; border-color: var(--lime); }
body.v5-app-topo .app-page .sidebar nav a.destaque.painel.active {
  background: var(--lime); border-color: var(--lime); color: var(--ink);
}
body.v5-app-topo .app-page .sidebar nav a.destaque.painel.active svg { color: var(--ink); }

/* a bolinha de "ao vivo" */
body.v5-app .ponto-vivo {
  width: 8px; height: 8px; margin-left: auto; border-radius: 50%;
  background: #2AA78E; animation: vivo 1.8s ease-in-out infinite;
}
@keyframes vivo {
  0%,100% { box-shadow: 0 0 0 3px rgba(42,167,142,.18); }
  50%     { box-shadow: 0 0 0 7px rgba(42,167,142,.04); }
}
body.v5-app .destaque.active .ponto-vivo { background: #fff; }
body.v5-app .destaque.painel.active .ponto-vivo { background: var(--ink); }
body.v5-app .cadeado { margin-left: auto; display: grid; place-items: center; opacity: .55; }
body.v5-app .cadeado svg { width: 15px; height: 15px; }

/* submenu das ferramentas grátis */
body.v5-app-topo .app-page .sidebar .grupo .abre-grupo {
  width: 100%; border: 0; background: none; color: #C2D7DB; padding: 12px 13px;
  border-radius: 12px; display: flex; gap: 12px; align-items: center; font-weight: 680; font-size: 13.5px;
  white-space: nowrap;
}
body.v5-app-topo .app-page .sidebar .grupo .abre-grupo:hover { background: #F0F2F7; color: var(--ink); }
body.v5-app-topo .app-page .sidebar .grupo .abre-grupo svg { width: 18px; height: 18px; flex: none; color: #7384B3; }
body.v5-app-topo .app-page .sidebar .grupo .seta {
  margin-left: auto; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s;
  opacity: .6;
}
body.v5-app-topo .app-page .sidebar .grupo.aberto .seta { transform: rotate(225deg); }
body.v5-app-topo .app-page .sidebar .grupo .sub {
  display: none; margin: 2px 0 6px 16px; padding-left: 10px;
  border-left: 1px solid rgba(9,11,18,.1);
}
body.v5-app-topo .app-page .sidebar .grupo.aberto .sub { display: block; }
body.v5-app-topo .app-page .sidebar .grupo .sub a { font-size: 13.5px; padding: 9px 11px; }

/* o rodapé da coluna: perfil e menu da conta */
body.v5-app .conta-lado {
  margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(9,11,18,.09); position: relative;
}
body.v5-app .conta-lado .perfil {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 8px;
  border: 0; background: none; color: var(--ink); border-radius: 12px; text-align: left;
}
body.v5-app .conta-lado .perfil:hover { background: #F0F2F7; }
body.v5-app .conta-lado .ini {
  width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--blue);
  color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 900;
}
body.v5-app .conta-lado .quem { min-width: 0; }
body.v5-app .conta-lado .quem b { display: block; font-size: 12.5px; }
body.v5-app .conta-lado .quem small { display: block; font-size: 11.5px; color: var(--muted); }
body.v5-app .conta-lado .seta {
  margin-left: auto; width: 7px; height: 7px; border-right: 2px solid #8B9AC1;
  border-bottom: 2px solid #8B9AC1; transform: rotate(-135deg);
}
body.v5-app .menu-conta {
  position: absolute; left: 0; right: 0; bottom: 62px; z-index: 5;
  background: #fff; border: 1px solid rgba(9,11,18,.1); border-radius: 14px; padding: 6px;
  box-shadow: 0 18px 44px rgba(9,11,18,.16); display: grid; gap: 2px;
}
body.v5-app .menu-conta a {
  display: flex; align-items: center; gap: 10px; padding: 10px 11px;
  border-radius: 10px; color: #345461; font-size: 13.5px; font-weight: 680;
}
body.v5-app .menu-conta a:hover { background: #F0F2F7; color: var(--ink); }
body.v5-app .menu-conta a svg { width: 16px; height: 16px; color: #7384B3; }
body.v5-app .menu-conta a:hover svg { color: var(--ink); }
body.v5-app .menu-conta .sai { color: #D83A4C; }
body.v5-app .menu-conta .sai svg { color: #D83A4C; }
body.v5-app .menu-conta .sai:hover { background: #FDEBED; color: #B82A3B; }
body.v5-app .conta-lado.sem-conta { display: grid; gap: 8px; text-align: center; }
body.v5-app .conta-lado.sem-conta .entrar { color: var(--muted); font-size: 12.5px; }

/* botão de menu no celular */
.abre-lado { display: none; }
@media (max-width: 900px) {
  body.v5-app-topo .app-page .sidebar {
    position: fixed; z-index: 60; transform: translateX(-102%);
    transition: transform .2s ease; width: 270px; height: 100vh;
  }
  body.v5-app.lado-aberto .app-page .sidebar { transform: none; box-shadow: 0 0 60px rgba(9,11,18,.28); }
  body.v5-app .app-content { margin-left: 0; width: 100%; padding: 66px 16px 40px; }
  .abre-lado {
    display: grid; place-items: center; position: fixed; left: 12px; top: 12px; z-index: 70;
    width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(9,11,18,.12);
    background: #fff; color: var(--ink); box-shadow: 0 6px 18px rgba(9,11,18,.12);
  }
  body.v5-app.lado-aberto .abre-lado { left: 282px; background: var(--ink); color: #fff; border-color: var(--ink); }
}

/* ---- o menuzinho dentro do escritório ----
   este continua claro-sobre-escuro: o escritório é uma sala escura de propósito */
.menu-escritorio { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 14px 0 4px; }
.menu-escritorio a {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 11px;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.8);
  font-size: 12.5px; font-weight: 700;
}
.menu-escritorio a:hover { background: rgba(255,255,255,.14); color: #fff; }
.menu-escritorio a svg { width: 15px; height: 15px; flex: none; }
.menu-escritorio .sair { color: #F5A5AE; }

/* o menu da conta nasce fechado */
body.v5-app .menu-conta[hidden] { display: none; }

/* ---- cartão de ferramenta na área de membros ---- */
body.v5-app .course-card { position: relative; overflow: hidden; }
body.v5-app .course-card .resumo {
  position: absolute; inset: 0; z-index: 3; padding: 18px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  background: linear-gradient(180deg, rgba(11,13,20,.15), rgba(11,13,20,.94) 55%);
  color: #fff; opacity: 0; transition: opacity .18s ease;
}
body.v5-app .course-card:hover .resumo,
body.v5-app .course-card:focus-visible .resumo { opacity: 1; }
body.v5-app .course-card .resumo b { font-size: 15px; letter-spacing: -.02em; }
body.v5-app .course-card .resumo span { font-size: 12.5px; line-height: 1.45; color: #CDD3E4; }
body.v5-app .course-card .resumo em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--lime); }
body.v5-app .course-card.fechado .course-copy small { color: var(--blue); font-weight: 750; }

/* o atributo hidden vale mais que o display das classes do pacote
   (sem isto o cabeçalho e o "continue de onde parou" ficavam na tela
   quando a pessoa abria uma tela de dentro, como o painel da loja) */
body.v5-app [hidden] { display: none !important; }

/* ==========================================================================
   O MENU NO TOPO — a mesma barra em TODAS as telas de quem entrou
   (v75 · 11/09/2026)

   *"Quero que todos os menus do site sejam na parte superior. Quando troca de
   lado parece que está em outra coisa. Cada menu está ficando em um lado e de
   um jeito. Padronize tudo."*

   A marcação continua a mesma (`menu()` em /site/v5-app.js) — só o lugar muda:
   a coluna vira barra. Escritório incluído, para não existirem dois menus com
   dois jeitos. Tudo preso a `body.v5-app-topo`: nenhuma outra tela sente.
   ========================================================================== */
body.v5-app-topo { --barra: 60px; }
/* ⚠️ A GEOMETRIA LEVA !important DE PROPÓSITO: a coluna é desenhada em três
   arquivos — `.app-page .sidebar` (v5-site.css), `body.v5-app-topo .app-page .sidebar`
   (aqui em cima) e `body.v5-membro .sidebar` (v5-membro.css, que carrega DEPOIS
   deste). Sem isso a barra virava coluna de novo em cada página com CSS próprio.
   Só as sete propriedades de posição levam a marca. */
body.v5-app-topo .app-page .sidebar {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  bottom: auto !important; width: 100% !important; height: var(--barra) !important;
  flex-direction: row !important;
  z-index: 60; align-items: center; gap: 16px;
  padding: 0 clamp(12px, 2vw, 22px);
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
  border-bottom: 1px solid #E0E4EF; border-right: 0; box-shadow: none;
}
body.v5-app-topo .app-page .sidebar .brand { margin: 0; font-size: 18px; }
body.v5-app-topo .app-page .sidebar nav {
  flex-direction: row; align-items: center; margin: 0; gap: 2px;
  flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
body.v5-app-topo .app-page .sidebar nav::-webkit-scrollbar { display: none; }
body.v5-app-topo .app-page .sidebar nav a,
body.v5-app-topo .app-page .sidebar .abre-grupo { padding: 9px 12px; white-space: nowrap; font-size: 13.5px; }
body.v5-app-topo .app-page .sidebar .grupo { position: relative; }
body.v5-app-topo .app-page .sidebar .grupo .sub {
  position: absolute; top: calc(100% + 9px); left: 0; min-width: 250px; z-index: 5;
  background: #fff; border: 1px solid #E0E4EF; border-radius: 15px; padding: 7px;
  box-shadow: 0 22px 50px rgba(9,11,18,.16); display: none;
}
body.v5-app-topo .app-page .sidebar .grupo.aberto .sub { display: block; }
body.v5-app-topo .app-page .sidebar .conta-lado {
  margin: 0; border-top: 0; padding: 0; position: relative; flex: none;
}
body.v5-app-topo .app-page .sidebar .conta-lado .quem { display: none; }
body.v5-app-topo .app-page .sidebar .menu-conta {
  position: absolute; right: 0; top: calc(100% + 9px); min-width: 230px; z-index: 5;
  background: #fff; border: 1px solid #E0E4EF; border-radius: 15px; padding: 7px;
  box-shadow: 0 22px 50px rgba(9,11,18,.16);
}
body.v5-app-topo .app-page .sidebar .conta-lado.sem-conta { display: flex; gap: 8px; align-items: center; }
body.v5-app-topo .app-page .sidebar .conta-lado.sem-conta .full-button { width: auto; margin: 0; padding: 9px 14px; }
body.v5-app-topo .app-page .sidebar .conta-lado.sem-conta .entrar { white-space: nowrap; font-size: 13px; }
body.v5-app-topo .app-page .app-content {
  margin-left: 0 !important; width: 100% !important;
  padding-top: calc(var(--barra) + 26px) !important;
}
body.v5-app-topo .abre-lado { display: none !important; }

/* no escritório a barra é a mesma; o que muda é o palco embaixo dela */
body.v5-app-topo.v5-escritorio .office-panel { top: var(--barra); height: calc(100vh - var(--barra)); }
body.v5-app-topo.v5-escritorio .office-chat-panel,
body.v5-app-topo.v5-escritorio .atd-painel { top: var(--barra); }
body.v5-app-topo.v5-escritorio .office-stage { margin-top: var(--barra); min-height: calc(100vh - var(--barra)); }
body.v5-app-topo.v5-escritorio .office-panel > .brand { display: none; }

@media (max-width: 720px) {
  body.v5-app-topo { --barra: 54px; }
  body.v5-app-topo .app-page .sidebar { gap: 10px; }
  body.v5-app-topo .app-page .sidebar .brand span:last-child { display: none; }
  body.v5-app-topo .app-page .sidebar nav a span,
  body.v5-app-topo .app-page .sidebar nav a { font-size: 0; }
  body.v5-app-topo .app-page .sidebar nav a svg { width: 19px; height: 19px; }
  body.v5-app-topo .app-page .sidebar nav a.active { font-size: 13px; }
  body.v5-app-topo.v5-escritorio .office-panel { position: relative; top: 0; height: auto; margin-top: var(--barra); }
  body.v5-app-topo.v5-escritorio .office-stage { margin-top: 0; min-height: 0; }
}