@charset "UTF-8";

/* ── Fontes: carregadas AQUI, e não em cada tela ──────────────────────
 * Causa direta do "a fonte muda de aba para aba". Esta folha pede
 * 'Manrope' nos itens do menu, mas o webfont Manrope só era carregado
 * por admin/login.php. Nas outras 65 telas o navegador caía no
 * fallback 'Sora'. O mesmo vale para 'Inter', exigido pelo
 * _layout-admin.php e carregado por 2 arquivos.
 *
 * Havia DEZ URLs diferentes de Google Fonts no painel, cada tela com
 * seu conjunto de pesos. Com o @import aqui, qualquer tela que carregue
 * esta folha recebe exatamente as mesmas famílias e os mesmos pesos —
 * e as telas podem manter seus <link> antigos sem efeito colateral,
 * porque o navegador reaproveita o que já baixou.
 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ============================================================
 * virtus-admin.css — Normalização do painel administrativo
 * ------------------------------------------------------------
 * O PROBLEMA
 * O admin tem três conjuntos de telas, cada um montando a própria
 * sidebar com medidas próprias:
 *
 *   _header.php        10 telas   sidebar 260px · item 10px/12px · fonte 13px
 *   _layout-admin.php  10 telas   sidebar 236px · item 10px/12px · fonte 13,5px
 *   _sidebar.php + 21  21 telas   sidebar 230px · item  9px/12px · fonte 13px
 *
 * Trocar de aba mudava a largura do menu em até 30px e a logo de
 * lugar. Era isso que dava a sensação de bagunça.
 *
 * A SOLUÇÃO
 * Esta folha carrega DEPOIS do CSS embutido de cada arquivo e
 * impõe um valor único. Não apaga nada: vence por ordem, o que
 * significa que remover este link devolve o comportamento antigo.
 *
 * Uma medida só, num lugar só. Mudar a largura da sidebar do
 * painel inteiro passa a ser editar uma linha aqui.
 * ============================================================ */

:root{
  /* MEDIDO no virtus-ui.css (linhas 53 e 55): o aluno usa
   *     --v-sidebar: 252px   --v-topo: 76px
   * Uso os mesmos números para que as duas metades do sistema tenham a
   * mesma geometria — passar de uma para a outra não deve deslocar nada. */
  --adm-sidebar: 252px;
  --adm-item-h:  42px;       /* altura FIXA: nenhum item muda de tamanho, em nenhum estado */
  /* ALTURA DA FAIXA SUPERIOR — vale para a logo E para o topbar.
     Eram valores diferentes (76 e 66) e por isso a linha embaixo da
     logo não batia com a linha embaixo do cabeçalho. Uma variável
     só: se mudar, as duas mudam juntas e continuam alinhadas. */
  --adm-topo: 76px;
  --adm-raio:    11px;
}

/* ═══════════ 1. Largura única ═══════════ */

.sidebar,
.vadmin-sidebar{
  width: var(--adm-sidebar) !important;
}

/* O conteúdo tem que acompanhar, senão sobra ou falta espaço. */
.app-main,
.vadmin-main,
.vadmin-conteudo,
.vadmin-wrap > main,
[class*="vadmin"][style*="margin-left"]{
  margin-left: var(--adm-sidebar) !important;
}

/* ═══════════ 2. Faixa da logo ═══════════ */

.sb-logo,
.vadmin-sb-header{
  height: var(--adm-topo) !important;
  min-height: var(--adm-topo);
  padding: 0 14px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid var(--line, rgba(148,163,184,.12));
  flex-shrink: 0;
  overflow: hidden;
}

/* A marca tem tamanho fixo. Antes, cada tela renderizava a logo
   numa altura diferente porque o padding do container variava. */
.sb-logo .vlogo,
.vadmin-sb-header .vlogo{ --vlogo-h: 44px; }

.sb-logo img,
.vadmin-sb-header img{
  max-height: 44px;
  width: auto;
  display: block;
}

/* ═══════════ 3. Itens do menu ═══════════ */

/* Altura fixa em TODOS os estados — normal, hover, ativo, com selo.
   Padding variável era o que fazia o menu "pular" entre as abas. */
.vadmin-nav-item,
.sidebar .sl{
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: var(--adm-item-h) !important;
  padding: 0 12px !important;
  margin-bottom: 2px;
  border-radius: var(--adm-raio);
  font-size: 13.5px !important;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vadmin-nav-item i,
.sidebar .sl i{
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  font-size: 16px;
}

/* Rótulo de grupo: mesma altura e mesmo respiro em todo lugar. */
.vadmin-sec-label,
.sidebar .sb-section{
  padding: 16px 12px 6px !important;
  font-size: 9.5px !important;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}

/* ═══════════ 4. Área rolável ═══════════ */

.vadmin-sb-nav,
.sidebar .sb-nav{
  padding: 8px 10px 20px !important;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line2, #2a3a5c) transparent;
}
.vadmin-sb-nav::-webkit-scrollbar,
.sidebar .sb-nav::-webkit-scrollbar{ width: 6px; }
.vadmin-sb-nav::-webkit-scrollbar-thumb,
.sidebar .sb-nav::-webkit-scrollbar-thumb{
  background: var(--line2, #2a3a5c); border-radius: 99px;
}

/* ═══════════ 5. Telas menores ═══════════ */

@media (max-width: 1024px){
  .sidebar,
  .vadmin-sidebar{
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.16,1,.3,1);
  }
  .sidebar.open,
  .vadmin-sidebar.open{ transform: translateX(0); }

  .app-main,
  .vadmin-main,
  .vadmin-conteudo{ margin-left: 0 !important; }
}

/* ═══════════ 6. Faixa de "modo admin" ═══════════ */

/* A faixa de impersonação é position:fixed com z-index 9999 e ficava
   POR CIMA da logo da sidebar. Ela precisa empurrar o layout, não
   cobrir. Só entra em cena quando um admin está vendo como aluno. */
.adm-impersonando{ height: 42px; }

/* Empurrar a PÁGINA INTEIRA de uma vez. Antes eu deslocava a
   sidebar e o conteúdo em regras separadas, e os dois deslocamentos
   se somavam no conteúdo — a linha da logo parava 38px acima da
   linha do cabeçalho. Um empurrão só mantém tudo alinhado. */
html.adm-com-faixa body{ padding-top: 42px; }
html.adm-com-faixa .sidebar,
html.adm-com-faixa .vadmin-sidebar{
  top: 42px !important;
  height: calc(100vh - 42px);
}

/* ═══════════ 7. Cabeçalho (topbar) ═══════════ */

/* Mesma divergência da sidebar, agora no topo:
 *   _header.php        height: var(--topbar-h) = 68px · padding 0 24px
 *   _layout-admin.php  height: 64px            · padding 0 26px
 * Trocar de aba mexia a página inteira 4px para cima ou para baixo. */

.topbar{
  height: var(--adm-topo) !important;
  min-height: var(--adm-topo);
  padding: 0 26px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--bg2, #0a1b33) 88%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line, rgba(148,163,184,.12));
  /* Algumas telas davam margem ao cabeçalho (18px no Funil, 22px
     nos Relatórios). O conteúdo começava numa altura diferente em
     cada aba. O respiro vem do padding do conteúdo, não daqui. */
  margin: 0 !important;
}

/* O primeiro bloco depois do cabeçalho também não pode trazer
   margem própria — somaria ao respiro padrão. */
/* ESTA REGRA FOI NEUTRALIZADA — ver seção 16.
   Ela zerava, com !important, a margem do primeiro bloco depois do
   cabeçalho. Fazia sentido quando cada tela trazia margem inline própria;
   depois que o respiro passou a ser declarado num ponto só, virou o motivo
   de a faixa de ajuda nascer colada na linha do cabeçalho. */
.vadmin-main > .topbar + *,
.app-main > .topbar + *{ margin-top: 0; }

/* "⚡ Virtus Admin". A classe .logo só existia no _layout-admin.php —
   as telas legadas não tinham, então o texto sairia sem estilo. */
.topbar .logo{
  font-family: 'Manrope', 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--cyan, #22d3ee);
  white-space: nowrap;
}

/* O título da página, depois do "›" */
.topbar-title{
  font-family: 'Manrope', 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt, #eaf1ff);
}

/* Botão de menu: aparece só quando a sidebar recolhe */
.ham-btn{
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line2, #24375c);
  border-radius: 10px;
  background: transparent;
  color: var(--txt2, #9fb2d4);
  cursor: pointer;
}
@media (max-width: 1024px){
  .ham-btn{ display: inline-flex; }
}

/* O seletor de negócios fica sempre encostado à direita. */
.topbar > *:last-child{ margin-left: auto; flex-shrink: 0; }

/* Telas como Relatórios BI têm botões de ação no cabeçalho. Com a
   altura travada, eles precisam de tamanho compatível — senão
   estouram a faixa e a linha volta a desalinhar. */
.topbar .btn,
.topbar a.btn-v,
.topbar button:not(.ham-btn){
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Se houver muitos botões, eles rolam na horizontal em vez de
   empurrar a faixa para baixo. */
.topbar > div:first-child{
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar > div:first-child::-webkit-scrollbar{ display: none; }

/* "Virtus Admin" em azul claro — é o estilo que você escolheu.
   Nas telas legadas a classe .logo nem existia. */
.topbar .logo{ color: var(--cyan, #22d3ee) !important; }

/* ═══════════ 8. Um cabeçalho só, apesar de 28 markups ═══════════ */

/* O admin tem 28 variações de markup no cabeçalho, em duas famílias:
 *
 *   A) <span class="logo">⚡ Virtus Admin</span> › <span>Título</span>
 *      — a maioria das telas
 *   B) <h1><span class="lead">⚡</span> Virtus Admin
 *          <span class="crumb">› Título</span></h1>
 *      — assinaturas, auditoria, conteúdo, CRM, funil, relatórios
 *
 * A família B usa <h1>: herda o tamanho e a margem de título do
 * navegador, fica maior que a A e o "›" cola no nome da página.
 *
 * Reescrever 28 blocos de HTML seria arriscado e demorado. Estas
 * regras fazem as duas famílias renderizarem idênticas.
 */

/* Container: mesmo alinhamento e mesmo respiro, vencendo o
   style="gap:10px|12px" que cada arquivo trouxe inline. */
.topbar > div:first-child,
.topbar > h1,
.topbar .topbar-left{
  display: flex !important;
  align-items: center;
  gap: 9px !important;
  margin: 0 !important;
  min-width: 0;
}

/* Família B: o <h1> deixa de parecer título de página. */
.topbar h1{
  font-family: 'Manrope', 'Sora', sans-serif;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.01em;
  color: var(--cyan, #22d3ee) !important;
  padding: 0 !important;
}
.topbar h1 .lead{
  color: var(--cyan, #22d3ee);
  font-size: 15px;
  margin-right: 2px;
}

/* O "›" e o nome da página, iguais nas duas famílias. */
.topbar h1 .crumb{
  /* O "›" e o título vêm num só nó de texto. Não dá para separar
     título ("CRM  de  Leads"). O respiro vem da margem à esquerda. */
  font-family: 'Manrope', 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt, #eaf1ff);
  margin-left: 7px;      /* sem isto o "›" encosta no nome */
  padding-left: 2px;
  white-space: nowrap;
}

/* Família A: o mesmo peso e a mesma cor no nome da página. */
.topbar > div:first-child > span:last-child,
.topbar .topbar-left > span:last-child{
  font-family: 'Manrope', 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt, #eaf1ff);
  white-space: nowrap;
}

/* Texto auxiliar que algumas telas põem ao lado (ex.: "4 leads no
   funil"): fica discreto, sem competir com o caminho. */
.topbar .hint{
  font-size: 12.5px;
  color: var(--txt3, #64789c);
  white-space: nowrap;
}

/* Bloco de ações à direita, quando existe. */
.topbar .actions{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ═══════════ 9. O padding do body ═══════════ */

/* Seis telas — CRM, Funil, Relatórios, Auditoria, Conteúdo e
 * Assinaturas — declaram `body{ padding: 22px }`. A sidebar é
 * position:fixed e NÃO acompanha esse deslocamento, então o
 * cabeçalho descia 22px e a linha da logo ficava desalinhada.
 *
 * Zero o padding do body e devolvo o respiro ao conteúdo, depois
 * do cabeçalho. O resultado visual é o mesmo; o alinhamento, não.
 */
body{ padding: 0 !important; }

/* ── UM ponto de controle para o respiro do conteúdo ──────────
 * O padding de cada tela divergia:
 *     .content  →  28px 32px · 24px · 22px, conforme o arquivo
 *     funil, auditoria e relatórios nem usam .content
 *
 * E a minha regra anterior somava padding por cima do que a tela
 * já tinha — quem usava .content ficava com o dobro. Por isso
 * cada aba começava numa distância diferente do menu.
 *
 * Agora a medida vive numa variável e é aplicada UMA vez: ou no
 * .content, ou no filho direto quando a tela não tem .content.
 */
:root{
  /* MEDIDO no assets/css/virtus-ui.css, linha 156:
   *     .v-conteudo{ padding: var(--ve-6) var(--ve-8) var(--ve-12) }
   *     --ve-6:24px  --ve-8:32px  --ve-12:48px
   * Não é aproximação: é o mesmo valor. */
  --adm-respiro: 24px 32px 48px;
  /* LARGURA — corrigido depois de medir a área do aluno.
   *
   * Eu tinha posto max-width:1500px centralizado, copiando o que o
   * dashboard antigo fazia. Errado: o .v-conteudo do aluno NÃO tem
   * limite nem centralização — ocupa toda a largura entre o menu e a
   * borda, com 32px de recuo.
   *
   * A diferença é grande em tela larga. Em 1920px, com menu de 252px,
   * sobram 1668px: centralizar em 1500 empurra o conteúdo mais 84px, que
   * somados aos 32 do padding dão 116px de distância do menu — contra os
   * 32px do aluno. Era exatamente o afastamento da captura.
   *
   * `none` faz o admin abrir igual ao aluno. Se um dia quiser limitar,
   * mude só aqui. */
  --adm-largura: none;
}

.vadmin-main > .content,
.app-main > .app-content,
.vadmin-main > .board,
.vadmin-main > .kpis{
  padding: var(--adm-respiro) !important;
  max-width: var(--adm-largura);
  /* Sem centralização: o conteúdo encosta no recuo da esquerda, como no
     aluno. Com margin auto e max-width:none o efeito seria o mesmo, mas
     deixo explícito para não reaparecer numa edição futura. */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Telas sem .content: o respiro vai nos filhos diretos.
   O :not() impede a soma dupla que eu tinha criado. */
/* SUBSTITUÍDO pela seção 16. Aplicar padding lateral em CADA filho é o que
   desfigurava as telas: num bloco que é cartão — com fundo e borda —, o
   padding recua só o conteúdo interno; o fundo continua encostando no menu.
   Era por isso que o painel "Leads" e o "Log de Atividades" grudavam na
   barra enquanto os KPIs acima respeitavam o recuo. */
/* ── Respiro superior: uma vez só ────────────────────────────
 * Algumas telas colocam um aviso (.alert) ou um modal escondido
 * ANTES do conteúdo. Se cada bloco trouxesse padding-top, o
 * conteúdo real começava numa altura diferente em cada aba.
 *
 * Regra: o primeiro bloco depois do cabeçalho recebe o respiro;
 * os seguintes se separam por margem, não por padding.
 */
/* Tentei "o primeiro depois do cabeçalho recebe o respiro" com o
   seletor `.topbar + *`. Falhou: algumas telas têm um elemento
   invisível logo após o cabeçalho, e o conteúdo real virava
   `~ *`, ficando com padding-top zero.
   Como CSS não enxerga visibilidade, o caminho seguro é dar o
   MESMO respiro a todos os blocos e esconder os vazios. */
/* A faixa de ajuda fica de fora: ela já tem padding próprio (18px 22px).
   Somando os dois, o bloco ganhava 42px em cima e ficava com quase o dobro
   da altura da faixa equivalente na área do aluno. Era essa a soma. */
.vadmin-main > *:not(.topbar):not(.ajuda-box),
.app-main    > *:not(.topbar):not(.ajuda-box){
  padding-top: 24px !important;
}

/* Blocos de mensagem vazios não podem reservar espaço. */
.vadmin-main > .alert:empty,
.vadmin-main > div:empty,
.app-main    > div:empty{ display: none !important; }

/* O aviso de mensagem da tela legada traz margem inline
   (`style="margin:14px 24px 0"`), que vence qualquer folha.
   Só !important recupera o alinhamento com os demais blocos. */
/* `width:100%` é necessário: sem ele, margens automáticas fazem o
   bloco encolher até o conteúdo e ele some para o meio da tela.
   Aconteceu no teste — o bloco foi de 1500px para 90px. */
.app-main > div[style*="margin"]{
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
}
.vadmin-main > *:last-child,
.app-main   > *:last-child{ padding-bottom: 32px; }

/* .board e .kpis já tinham o padding aplicado acima; o grid
   interno não pode receber de novo. */
.vadmin-main > .board > *,
.vadmin-main > .kpis > *{ padding-left: 0; padding-right: 0; }

@media (max-width: 720px){
  :root{ --adm-respiro: 18px 16px; }
  /* recuo estreito: ver seção 16 */
}

/* ═══════════ 10. O menu, com um padrão só ═══════════ */

/* Auditei os 24 arquivos. O menu tinha:
 *   3 variações do item        13px vs 13,5px · padding 9 vs 10 vs 11px
 *   3 variações do hover       cores e bordas diferentes
 *   3 variações do rótulo      letter-spacing 1px vs 1,4px, cor --txt3 vs --txt4
 *   3 variações do ATIVO       9 telas com degradê e borda,
 *                              14 com apenas `position:relative`
 *
 * A do ativo é a que mais salta: em algumas abas o item selecionado
 * tem fundo azul-violeta e borda; em outras, quase nada. Daqui em
 * diante, uma definição só.
 */

:root{
  --adm-item-fonte: 13.5px;
  --adm-item-cor:   var(--txt2, #a9b4cc);
  --adm-item-icone: 18px;
}

/* ── Item ── */
.vadmin-nav-item,
.sidebar .sl{
  font-family: 'Manrope', 'Sora', sans-serif;
  font-size: var(--adm-item-fonte) !important;
  font-weight: 500 !important;
  color: var(--adm-item-cor) !important;
  border: 1px solid transparent !important;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.vadmin-nav-item i,
.sidebar .sl i{
  font-size: var(--adm-item-icone) !important;
  width: 20px;
  opacity: .85;
  transition: opacity .18s ease;
}

/* ── Hover ── */
.vadmin-nav-item:hover,
.sidebar .sl:hover{
  color: var(--txt, #eef2fb) !important;
  background: rgba(255,255,255,.045) !important;
  border-color: transparent !important;
}
.vadmin-nav-item:hover i,
.sidebar .sl:hover i{ opacity: 1; }

/* ── Ativo ── */
/* Degradê azul→violeta com borda e brilho: o mesmo em toda tela.
   As 14 que só tinham `position:relative` passam a mostrar isto. */
.vadmin-nav-item.ativo,
.vadmin-nav-item.active,
.sidebar .sl.active{
  color: #fff !important;
  font-weight: 600 !important;
  background: linear-gradient(90deg, rgba(0,184,255,.26), rgba(122,0,255,.13)) !important;
  border: 1px solid rgba(0,184,255,.34) !important;
  box-shadow: 0 4px 18px -6px rgba(0,184,255,.40) !important;
}
.vadmin-nav-item.ativo i,
.vadmin-nav-item.active i,
.sidebar .sl.active i{ opacity: 1; color: var(--cyan, #22d3ee); }

/* Barra à esquerda marcando a seleção — reforça sem depender de cor,
   o que ajuda quem tem dificuldade de distinguir tons. */
.vadmin-nav-item.ativo::before,
.vadmin-nav-item.active::before,
.sidebar .sl.active::before{
  content: '';
  position: absolute;
  left: -10px; top: 50%;
  width: 3px; height: 18px;
  transform: translateY(-50%);
  border-radius: 0 3px 3px 0;
  background: var(--cyan, #22d3ee);
}

/* ── Rótulo de seção ── */
.vadmin-sec-label,
.sidebar .sb-section{
  font-family: 'Manrope', 'Sora', sans-serif;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--txt3, #6b82a6) !important;
  /* "COORDENAÇÃO PEDAGÓGICA" quebrava em duas linhas e encostava no
     item seguinte. line-height e altura mínima resolvem sem cortar
     o texto. */
  line-height: 1.35;
  min-height: 0;
  white-space: normal;
  /* Um dos conjuntos dava margem lateral ao rótulo e outro não:
     "PRINCIPAL" começava 10px mais à direita numa família. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* ── Rodapé do menu ── */
.sidebar .sl[href*="logout"],
.vadmin-nav-item[href*="logout"]{ color: var(--txt3, #6b82a6) !important; }
.sidebar .sl[href*="logout"]:hover,
.vadmin-nav-item[href*="logout"]:hover{ color: var(--pink, #ff5c83) !important; }


/* ═══════════ 11. HOMOGENEIZAÇÃO DA BARRA LATERAL ═══════════
 *
 * Auditoria feita nos 66 arquivos de /admin:
 *
 *   fundo da sidebar   15 telas  background: var(--bg2,#0A1B33)   → chapado
 *                       7 telas  background: var(--bg2)           → chapado
 *                       1 tela   linear-gradient(180deg,--bg2,--bg) → degradê
 *
 * O degradê é o _layout-admin.php. Ele escurece de cima para baixo,
 * enquanto as outras 22 telas ficam num tom único. É exatamente o
 * "dependendo da aba fica mais clara, mais escura" — não é ilusão de
 * ótica nem cache: são duas pinturas diferentes do mesmo elemento.
 *
 * Escolhi o tom CHAPADO como padrão: é o que a maioria já usa, é o que
 * aparece nas telas do CRM e do Funil, e degradê em superfície grande
 * briga com o pedido de "não usar excesso de gradientes".
 */

/* A COR fica por conta do virtus-tema-admin.css, que carrega depois.
   Ter os dois arquivos pintando a barra foi o que me fez perder tempo:
   eu ajustava o tema e comparava com um valor quase igual declarado aqui.
   Aqui permanece só o que é estrutura — nunca degradê, e a cor do texto. */
.sidebar,
.vadmin-sidebar{
  background-image: none !important;   /* impede o degradê do layout antigo */
  color: var(--txt2, #a9bbd4);
}

/* Faixa da logo e rodapé: mesma linha divisória, mesma cor de fundo.
   Algumas telas pintavam o rodapé um tom acima e ele "descolava". */
.vadmin-sb-header,
.sidebar .sb-logo,
.vadmin-sb-bot,
.sidebar .sb-bot{
  background: transparent !important;
  border-color: var(--line, rgba(255,255,255,.08)) !important;
}
.vadmin-sb-bot,
.sidebar .sb-bot{
  border-top: 1px solid var(--line, rgba(255,255,255,.08)) !important;
  padding: 10px !important;
  flex-shrink: 0;
}

/* ── Tipografia, agora com a fonte realmente disponível ──────────────
 * A pilha é a mesma que a seção 10 já pedia. A diferença é que agora
 * o @import do topo garante que Manrope exista em todas as telas —
 * antes, esta mesma regra produzia Manrope em uma tela e Sora nas
 * demais, que é o efeito de "muda a fonte".
 */
body{
  font-family: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4,
.page-title, .logo, .topbar h1,
.stat-val, .big-number{
  font-family: 'Sora', 'Manrope', sans-serif !important;
}
.mono, .sidebar .mono, code, pre{
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* O menu tem pilha própria e fixa — não herda do body, para não mudar
   caso alguma tela redefina a fonte do documento. */
.vadmin-nav-item,
.sidebar .sl,
.vadmin-sec-label,
.sidebar .sb-section,
.vadmin-badge{
  font-family: 'Manrope', 'Sora', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Selo numérico ao lado do item (ex.: contadores). Existia em duas
   telas com tamanhos diferentes e empurrava a altura do item. */
.vadmin-badge{
  margin-left: auto;
  font-size: 10px !important;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 50px;
  flex-shrink: 0;
}

/* Rolagem: mesma espessura e mesma cor em todas as abas. Uma família
   mostrava barra larga do sistema, outra a fina estilizada — a largura
   útil do menu mudava alguns pixels ao trocar de tela. */
.vadmin-sidebar,
.sidebar{
  scrollbar-width: thin;
  scrollbar-color: var(--line2, rgba(255,255,255,.14)) transparent;
}
.vadmin-sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar{ width: 6px; }
.vadmin-sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb{
  background: var(--line2, rgba(255,255,255,.14));
  border-radius: 99px;
}
.vadmin-sidebar::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track{ background: transparent; }

/* Estrutura em coluna: garante que o rodapé (Ver Site / Sair) fique
   colado embaixo mesmo quando o menu é curto. Sem isto, em telas com
   menos itens o bloco subia e parecia outro menu. */
.vadmin-sidebar,
.sidebar{
  display: flex !important;
  flex-direction: column !important;
  height: 100vh;
  top: 0; left: 0;
  position: fixed;
  z-index: 300;
}

/* ═══════════ 12. TOM DAS SUPERFÍCIES ═══════════
 * Complementa a sidebar: se o cartão muda de tom entre abas, a barra
 * parece mudar junto por contraste, mesmo estando igual.
 */
.card, .panel, .box{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 14px;
}


/* ═══════════ 13. O MESMO COMEÇO DE TELA DA ÁREA DO ALUNO ═══════════
 *
 * A área do aluno resolveu isto no assets/css/virtus-padrao.css: uma folha
 * carregada por último que fixa onde a tela começa e qual a distância entre
 * os blocos do topo. O admin não tinha equivalente — cada tela escolhia seu
 * próprio recuo, e por isso os cartões começavam a distâncias diferentes do
 * menu conforme a aba.
 *
 * As medidas abaixo são as MESMAS do aluno, não valores novos:
 *     recuo do conteúdo   24px em cima · 32px nas laterais
 *     entre blocos do topo 18px
 * Assim as duas metades do sistema abrem igual, e quem passa de uma para a
 * outra não sente degrau.
 */

:root{
  --adm-gap-topo: 18px;   /* distância entre os blocos iniciais (igual ao aluno) */
}

/* Primeiro bloco não traz margem própria: quem manda no início da tela é o
   padding do contêiner, definido uma única vez na seção 9. */
.vadmin-main > .content > *:first-child,
.app-main > .app-content > *:first-child{ margin-top: 0 !important; }

/* Distância uniforme entre os blocos de abertura, venha qual vier primeiro. */
.ajuda-box,
.vadmin-main .page-sub,
.vadmin-main > .content > .kpis,
.vadmin-main > .content > .alert,
.app-main > .app-content > .alert{
  margin-bottom: var(--adm-gap-topo) !important;
}

/* Cartões: mesma distância entre si em qualquer tela. Vários arquivos
   traziam margin-bottom inline de 12, 16 ou 20px. */
.vadmin-main .card + .card,
.vadmin-main .panel + .panel,
.app-main .card + .card{ margin-top: var(--adm-gap-topo); }


/* ═══════════ 14. FAIXA DE AJUDA DA ABA ═══════════
 *
 * Mesma marcação e mesmas classes do aluno/_ajuda.php, para não haver dois
 * componentes fazendo a mesma coisa com nomes diferentes. A diferença é só
 * a paleta: aqui usa o ciano institucional do painel.
 *
 * PARA MUDAR A COR: só a variável abaixo. Verde, por exemplo:
 *     --adm-ajuda: 16, 217, 160;
 */
:root{
  --adm-ajuda: 0, 184, 255;        /* ciano Virtus — mesmo do menu ativo */
}

.ajuda-box{
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px solid rgba(var(--adm-ajuda), .20);
  background:
    radial-gradient(120% 150% at 6% 18%, rgba(var(--adm-ajuda), .13), transparent 62%),
    rgba(255,255,255,.035);
  position: relative;
  overflow: hidden;
  /* Entra sem saltar: o conteúdo já está no lugar quando a faixa aparece. */
  animation: adm-ajuda-entra .32s cubic-bezier(.16,1,.3,1) both;
}
@keyframes adm-ajuda-entra{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: none; }
}

.ajuda-ic{
  width: 42px; height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 20px;
  color: rgb(var(--adm-ajuda));
  background: rgba(var(--adm-ajuda), .12);
  border: 1px solid rgba(var(--adm-ajuda), .28);
}

.ajuda-corpo{ min-width: 0; }

.ajuda-titulo{
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--txt, #EEF2FB);
  margin-bottom: 5px;
}

.ajuda-texto{
  font-size: 12.8px;
  line-height: 1.62;
  color: var(--txt2, #A9B4CC);
  /* Sem limite, o texto atravessa a tela numa linha só e a leitura quebra —
     foi o motivo de o aluno ter esse mesmo max-width. */
  max-width: 92ch;
}

/* Botão de ocultar. A escolha fica guardada por aba no navegador: quem já
   conhece a tela não vê a explicação de novo, e quem precisar é só limpar
   o armazenamento local do navegador. */
.ajuda-fechar{
  margin-left: auto;
  align-self: flex-start;
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--txt4, #4A5C7A);
  cursor: pointer;
  font-size: 15px;
  transition: color .18s, background .18s, border-color .18s;
}
.ajuda-fechar:hover{
  color: var(--txt, #fff);
  background: rgba(255,255,255,.06);
  border-color: var(--line2, rgba(255,255,255,.14));
}

.ajuda-box.ajuda-saindo{
  opacity: 0;
  height: 0 !important;
  padding-top: 0; padding-bottom: 0;
  margin-bottom: 0 !important;
  transition: all .22s ease;
}

/* A faixa nasce logo depois do cabeçalho, fora do .content em várias telas.
   Sem isto ela encostaria na borda esquerda enquanto os cartões respeitam
   o recuo — o desalinhamento que motivou este bloco. */
/* ALINHAMENTO COM OS CARTÕES — a conta que estava errada.
 *
 * O .content é `max-width:1500px; margin:0 auto; padding:24px 32px`. A borda
 * esquerda de um cartão dentro dele fica em:
 *       (largura da tela - 1500) / 2 + 32
 *
 * A faixa nasce FORA do .content, logo após o cabeçalho. Com
 * `max-width:1500px` ela se centraliza em (largura - 1500) / 2 — ou seja,
 * 32px mais à esquerda que os cartões. Em tela de 1920px o desencontro é
 * visível, e é o que aparece na captura.
 *
 * Descontando as duas laterais do próprio limite, as duas bordas caem na
 * mesma linha vertical, em qualquer largura de tela. */
.vadmin-main > .ajuda-box,
.app-main > .ajuda-box{
  --adm-lado: 32px;
  width: calc(100% - (var(--adm-lado) * 2));
  margin-left: var(--adm-lado);
  margin-right: var(--adm-lado);
  /* Respiro do cabeçalho: o mesmo 24px com que o .content começa. Sem isto
     a faixa encosta na linha da topbar. */
  margin-top: 24px;
  margin-bottom: var(--adm-gap-topo, 18px);
}

/* Quando a faixa é o primeiro filho do .content, quem dá o respiro superior
   é o padding do próprio .content — a margem aqui somaria de novo. */
.content > .ajuda-box:first-child,
.app-content > .ajuda-box:first-child{
  margin-top: 0;
  width: auto;
  max-width: none;
}

@media (max-width: 860px){
  .ajuda-box{ padding: 16px 18px; gap: 12px; }
  .ajuda-texto{ font-size: 12.4px; }
  .vadmin-main > .ajuda-box,
  .app-main > .ajuda-box{
    --adm-lado: 16px;
    margin-left: 16px; margin-right: 16px; margin-top: 18px;
  }
}


/* ═══════════════ 15 · RESPIRO DO TOPO, EM UM LUGAR SÓ ═══════════════
 *
 * O QUE ESTAVA COLADO
 * A topbar é `position:sticky; top:0`, e o primeiro bloco da tela vinha
 * imediatamente abaixo dela, sem folga. Some a isso o fato de a faixa de
 * ajuda ficar FORA do .content em metade das telas, e o resultado é o que
 * a captura mostra: cabeçalho, faixa e conteúdo empilhados sem ar.
 *
 * A ÁREA DO ALUNO
 * Lá o .v-conteudo abre com 24px em cima e 32px nas laterais, e cada bloco
 * do topo guarda 18px do seguinte. É a medida que replico aqui — não é
 * valor novo, é o mesmo do outro lado do sistema.
 */

:root{
  --adm-topo-respiro: 24px;   /* do cabeçalho ao primeiro bloco */
}

/* Linha do cabeçalho: separa sem pesar. */
.topbar{
  box-shadow: 0 1px 0 var(--line, rgba(148,163,184,.10));
}

/* O primeiro bloco depois do cabeçalho, seja ele qual for. Cobre as telas
   que não têm .content nem faixa de ajuda — Funil e Relatórios, entre
   outras, que hoje começam grudadas. */
.vadmin-main > .topbar + *,
.app-main   > .topbar + *{
  margin-top: var(--adm-topo-respiro);
}

/* Exceto quando o bloco seguinte é o .content: nesse caso o respiro já vem
   do padding dele, definido na seção 9. Duas fontes de recuo para a mesma
   distância é exatamente o defeito que esta folha existe para evitar. */
.vadmin-main > .topbar + .content,
.app-main   > .topbar + .app-content{
  margin-top: 0;
}

/* Blocos seguintes se separam por margem, nunca por padding — padding
   dentro de padding foi o que dobrou a altura da faixa de ajuda. */
.vadmin-main > .ajuda-box + *,
.app-main   > .ajuda-box + *{
  padding-top: 0 !important;
}

@media (max-width: 860px){
  :root{ --adm-topo-respiro: 18px; }
}


/* ═══════════════ 16 · O RECUO LATERAL, DE UMA VEZ POR TODAS ═══════════════
 *
 * O DEFEITO QUE AS CAPTURAS MOSTRAM
 * Eu vinha aplicando `padding-left/right: 32px` em cada filho direto do
 * contêiner. Funciona quando o filho é um invólucro transparente. Não
 * funciona quando o filho É um cartão, com fundo e borda: o padding recua
 * apenas o conteúdo interno, e o fundo continua encostando no menu.
 *
 * É exatamente o que se vê no CRM — os KPIs respeitam o recuo e o painel
 * "Leads" logo abaixo cola na barra — e na Auditoria, com o "Log de
 * Atividades". Duas telas, o mesmo bloco vazando.
 *
 * A CORREÇÃO
 * O recuo sai dos filhos e vai para o CONTÊINER. Assim ele vale para
 * qualquer coisa que a tela coloque ali dentro — cartão, tabela, formulário
 * ou div solta —, hoje e nas telas que ainda vão existir.
 *
 * O cabeçalho é a única exceção: ele precisa sangrar de ponta a ponta, e
 * recupera a largura total com margem negativa do mesmo valor.
 */

:root{
  --adm-lado: 32px;    /* = --ve-8 do aluno */
  --adm-fundo: 48px;   /* = --ve-12 do aluno */
}

.vadmin-main,
.app-main{
  padding-left:  var(--adm-lado);
  padding-right: var(--adm-lado);
  padding-bottom: var(--adm-fundo);
  /* box-sizing garantido: sem isto o padding somaria à largura e criaria
     rolagem horizontal em tela cheia. */
  box-sizing: border-box;
}

/* O cabeçalho sangra: desfaz o recuo do pai e volta a ocupar tudo. */
.vadmin-main > .topbar,
.app-main   > .topbar{
  margin-left:  calc(-1 * var(--adm-lado));
  margin-right: calc(-1 * var(--adm-lado));
  width: auto;
}

/* Quem já tinha recuo lateral próprio zera o seu, senão soma com o do pai
   e a tela abre com 64px — o dobro do aluno. */
/* ATENÇÃO AO QUE ENTRA NESTA LISTA.
 *
 * Só cabem aqui INVÓLUCROS — blocos transparentes cujo padding servia para
 * afastar o conteúdo do menu. Nesses, zerar o padding lateral é correto:
 * o recuo agora vem do contêiner.
 *
 * A .ajuda-box NÃO é invólucro: é um cartão, e o `padding: 18px 22px` dela
 * é o espaço interno que separa o ícone e o texto da própria borda. Eu a
 * tinha incluído aqui, e o resultado foi o ícone encostando na margem.
 * Ela sai da lista e perde apenas margem e limite de largura. */
.vadmin-main > .content,
.app-main > .app-content,
.vadmin-main > .board,
.vadmin-main > .kpis{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: none !important;
}

.vadmin-main > .ajuda-box,
.app-main > .ajuda-box{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: none !important;
  /* padding preservado de propósito — ver acima */
}

/* O respiro do topo, agora sem ninguém para anulá-lo. */
.vadmin-main > .topbar + *,
.app-main   > .topbar + *{
  margin-top: var(--adm-topo-respiro) !important;
}

/* Exceto quando o bloco seguinte é o .content, que já abre com 24px de
   padding próprio. Duas fontes para o mesmo respiro dobrariam a distância. */
.vadmin-main > .topbar + .content,
.app-main   > .topbar + .app-content{
  margin-top: 0 !important;
}

/* O .content perde só o recuo lateral; o vertical continua sendo dele. */
.vadmin-main > .content,
.app-main > .app-content{
  padding-top: 24px !important;
  padding-bottom: var(--adm-fundo) !important;
}

@media (max-width: 860px){
  :root{ --adm-lado: 16px; --adm-fundo: 32px; }
}


/* ═══════════════ 17 · RESPIRO INTERNO DOS ÍCONES ═══════════════
 *
 * Mesma classe de erro do bloco acima, generalizada: um ícone dentro de um
 * cartão, botão ou selo precisa de espaço próprio, e regras de layout que
 * zeram padding para resolver alinhamento externo acabam colando o ícone
 * na borda. Aqui os valores são declarados uma vez, com especificidade
 * suficiente para não serem apagados por engano.
 */

/* Cartão de ajuda: ícone, texto e botão de fechar. */
.ajuda-box{ padding: 18px 22px !important; gap: 15px !important; }
.ajuda-ic{ width: 42px !important; height: 42px !important; flex-shrink: 0; }
.ajuda-fechar{ margin-left: 12px; }

/* Selo de ícone dos KPIs e cartões de estatística. O ícone fica centrado
   no quadrado, e o quadrado é que se afasta da borda do cartão. */
.kpi-ic, .aq-kpi .ic, .stat-ic, .card-ic{
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* ── Botões: o erro que esta seção causou, e a correção ──────────────
 *
 * Eu tinha escrito:
 *     .btn:has(> i:only-child){ width:36px; padding:0 }
 * na intenção de deixar quadrado o botão que só tem ícone.
 *
 * `:only-child` considera apenas ELEMENTOS — nós de texto não contam. Em
 *     <a class="btn"><i class="ti ti-plus"></i> Novo lead</a>
 * o <i> é o único elemento filho, então a regra casava mesmo havendo
 * rótulo. Todos os botões com ícone viraram quadrados de 36px e o texto
 * transbordou por cima do vizinho — é o que aparece nas capturas de
 * Relatórios, CRM, Assinaturas, Conteúdo e Auditoria.
 *
 * Não há seletor confiável em CSS para "elemento sem texto". A regra sai.
 * Botão só de ícone deve declarar a própria classe no HTML.
 *
 * O padding volta SEM !important: o cabeçalho já define 0 14px para os
 * botões dele, e sobrepor isso foi o que apertou a barra de filtros.
 */
.btn{ padding-left: 16px; padding-right: 16px; }
.btn-sm{ padding-left: 12px; padding-right: 12px; }
.btn i, .btn-sm i{ flex-shrink: 0; }

/* O rótulo não pode quebrar nem ser espremido pelo vizinho. */
.btn, .btn-sm{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto;
  min-width: 0;
}

/* Grupo de botões no cabeçalho: se não couberem, rolam na horizontal em
   vez de se empilharem uns sobre os outros. */
.topbar .actions{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Nas telas legadas os botões são irmãos diretos do cabeçalho, sem
   invólucro. O cabeçalho já é flex (seção 7); aqui só garanto que eles
   não se sobreponham quando faltar largura. */
.topbar > .btn,
.topbar > a.btn,
.topbar > button{ flex: 0 0 auto; }

/* Barra de filtros dentro de cartão: quebra em linha nova quando falta
   espaço. Sem isto o último botão sai pela borda do cartão, como o
   "Filtrar" da Auditoria. */
/* As classes reais, levantadas nos arquivos: `.filters` em auditoria, CRM,
   financeiro, questões e videoaulas; `.filtros` em alunos, inteligência e
   simulado-montar. Duas grafias para a mesma coisa — miro nas duas em vez
   de padronizar o HTML de oito telas. */
.filters,
.filtros,
.filter-bar,
.aq-filtros{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.filters > *,
.filtros > *,
.filter-bar > *{ min-width: 0; }

/* Campos de filtro não podem esticar sem limite nem encolher até sumir. */
.filters input, .filters select,
.filtros input, .filtros select{
  width: auto;
  min-width: 150px;
  flex: 0 1 auto;
}

.badge i, .badge-v i{ flex-shrink: 0; }

/* Ícone do item de menu: o afastamento vem do padding do item (12px), e o
   ícone não pode encolher quando o rótulo é longo. */
.vadmin-nav-item i,
.sidebar .sl i{ flex-shrink: 0; }

/* Campo com ícone dentro (busca, filtros). Sem isto o cursor de texto
   nasce em cima do ícone. */
.v-busca, .campo-ic{ display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.v-busca > i, .campo-ic > i{ flex-shrink: 0; }