/* ============================================================
   Vantra — estilos compartilhados do app
   Casca comum as 8 paginas logadas: sidebar, navegacao, topbar,
   cards e transicoes. Extraido de forma automatica e verificada:
   o resultado computado de cada pagina e identico ao anterior.

   NAO adicione aqui regra que valha para uma pagina so.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* NAO redeclarar font-family aqui. O corpo e --corpo (Source Serif 4) e o
   titulo e --display (Archivo), definidos em base.css, que e a fonte de
   verdade. Ate 15/09/2026 este bloco pedia 'Inter' -- uma fonte que o site
   parou de carregar no bloco V1 do design. Como app.css carrega DEPOIS de
   base.css, esta linha vencia a cascata e as 11 paginas da area logada
   renderizavam na sans-serif generica do sistema. Medido com navegador de
   verdade: dashboard e conta devolviam "Inter, sans-serif" no computed style,
   enquanto index.html, que nao carrega este arquivo, devolvia
   "Source Serif 4, Georgia, serif". */
body {
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
}

/* 09/10/2026 (roadmap 3.28, pedido dele): era min-height: 100vh, SEM rolagem propria. A barra
   e fixa: numa tela baixa (notebook, ou zoom do Windows no PC do servico dele) o que passava da
   altura ficava cortado -- "sumiram algumas opcoes, nao podendo rolar para baixo". Agora a altura
   e a da tela e, se nao couber, a BARRA rola sozinha (a pagina nao rola junto). */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--linha) transparent;
  background: var(--surface);
  border-right: 1px solid var(--border);
  border-top: 2px solid var(--purple);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
}

/* font-family sai daqui: base.css ja poe .sidebar-logo no grupo do --display. */
.sidebar-logo {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--white);
  text-decoration: none;
  display: block;
  margin-bottom: 2rem;
  padding: 0 0.5rem;
}

.sidebar-logo span { color: var(--purple); }

.user-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-g);   /* era 12px: fora dos dois raios do sistema */
  margin-bottom: 1.75rem;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--purple-lt));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  flex-shrink: 0;
}

/* ── ESPERANDO ────────────────────────────────────────────────────────────
   Antes havia um "?" escrito no HTML das 11 paginas como espaco reservado.
   Ele aparecia na PRIMEIRA pintura e so virava a inicial certa depois --
   medido em 13ms num servidor local, mais na rede real. O Lucas viu e
   incomodou, com razao: mostrar informacao ERRADA por um instante e pior
   que nao mostrar nada.

   Agora o HTML nasce vazio e o assets/js/identidade.js preenche antes de
   pintar. Este estado aqui e so a rede de seguranca para o caso raro de a
   sessao ainda nao estar no navegador: em vez de um buraco, um circulo que
   respira, dizendo "ja vem" sem afirmar nada falso.

   Sem passo de opacidade zero: piscar do nada e o defeito que se esta
   corrigindo. Ele nasce visivel e so pulsa. */
[data-esperando] {
  color: transparent;
  animation: vantra-esperando 1.4s ease-in-out infinite;
}
.user-avatar[data-esperando] {
  background: var(--surface2, #1a1a22);
  border: 1px solid var(--border, rgba(255,255,255,.08));
}
/* A saudacao do dashboard reserva a altura da linha, senao o titulo aparece
   e empurra o resto para baixo -- o "sobe e desce" que ja foi corrigido no
   menu por outro motivo. */
#greeting[data-esperando]::before { content: "\00a0"; }

@keyframes vantra-esperando {
  0%, 100% { opacity: .55; }
  50%      { opacity: .28; }
}
@media (prefers-reduced-motion: reduce) {
  [data-esperando] { animation: none; opacity: .5; }
}

/* 🔴 NAO REINTRODUZIR overflow:hidden NEM text-overflow AQUI.
   Esta regra e a ULTIMA a carregar nas 10 paginas, entao e ela que vale.
   Foi ela que cortou "Lucas" em "Luca" por dias: eu escrevia a correcao no
   base.css e ela perdia para esta, silenciosamente.
   Nome de pessoa nao se corta. Se um dia faltar espaco, aumenta-se o espaco
   ou diminui-se a fonte -- nunca se esconde o fim do nome. */
.user-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--papel);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}

.user-plan { font-size: 0.72rem; color: var(--muted); }

.nav-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0.5rem;
  margin-bottom: 0.4rem;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 1.5rem;
}

.nav-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sidebar-bottom { margin-top: auto; }

.btn-logout {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--r-p);   /* era 10px: botao usa o raio pequeno */
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: color 0.15s;
}

.btn-logout:hover { color: var(--red); }

.page-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--white);
  letter-spacing: -0.02em;
}

@keyframes pageEnter {
from { opacity: 0; transform: translateY(18px); }

to { opacity: 1; transform: translateY(0); }

  }

@keyframes fadeUp {
from { opacity: 0; transform: translateY(12px); }

to { opacity: 1; transform: translateY(0); }

  }

@keyframes pageExit {
from { opacity: 1; transform: translateY(0); }

to { opacity: 0; transform: translateY(-8px); }

  }
body.saindo { pointer-events: none; }

/* SAIR e sempre mais rapido que ENTRAR: ao clicar, a pessoa ja decidiu.
   Antes era 220ms com ease-in -- ease-in comeca devagar e faz a troca parecer
   travada exatamente no instante em que ela esta olhando. Era a causa do
   "corte seco" que o Lucas apontou. */
body.saindo .main { animation: pageExit 150ms var(--saida) forwards; }

/* A BARRA LATERAL NAO ANIMA, DE PROPOSITO.
   A navegacao recarrega a pagina inteira. Se a sidebar tambem aparecesse com
   animacao, ela piscaria a cada clique. Sem animacao e identica nas 9 paginas,
   ela parece ter FICADO no lugar enquanto so o conteudo trocou. */
.sidebar { animation: none !important; }

/* 10/10/2026 (Lote D, V2): os cartoes entram em cascata em TODAS as telas do app. Antes so 5 paginas
   declaravam isto (cada uma com a sua copia), e as 8 mais novas entravam paradas -- os atrasos abaixo
   ja existiam aqui para todas. Com movimento reduzido o base.css encurta para quase zero. */
.card { animation: fadeUp 0.4s var(--saida) both; }

.card:nth-child(1) { animation-delay: 0.05s; }

.card:nth-child(2) { animation-delay: 0.10s; }

.card:nth-child(3) { animation-delay: 0.15s; }

.card:nth-child(4) { animation-delay: 0.20s; }

.card:nth-child(5) { animation-delay: 0.25s; }

/* A BARRINHA DO ITEM ATIVO.
   🐛 Bug corrigido em 02/08/2026, apontado pelo Lucas num print: ela nascia
   desalinhada com o texto. Causa: usava `animation: fadeUp`, e o fadeUp
   TERMINA em `transform: translateY(0)` -- o que apagava o `translateY(-50%)`
   que centraliza a barra. Ela acabava com o topo no meio do item, nao o centro.
   Licao: keyframe que mexe em `transform` sobrescreve o transform do elemento.
   Quem precisa de centralizacao E animacao tem que carregar as duas no keyframe. */
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 60%;
  background: var(--latao);
  border-radius: 0 var(--r-p) var(--r-p) 0;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  animation: divisaEntra 260ms var(--saida) 60ms forwards;
}
@keyframes divisaEntra {
  to { transform: translateY(-50%) scaleY(1); }
}

/* ── RESSALVA SOBRE AS INDICACOES ─────────────────────────────────────────
   Pedida pelo Lucas em 04/08/2026. Discreta de proposito: e honestidade, nao
   alarme. Se gritasse, pareceria aviso de risco -- e nao e disso que se trata.
   O texto mora em assets/js/plano.js. */
.ressalva-professores {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface2, rgba(255,255,255,.03));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-left: 3px solid var(--latao, var(--latao));
  border-radius: var(--r-g);
}
.ressalva-professores strong {
  display: block;
  font-family: var(--display, inherit);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--latao-c, var(--latao-c));
  margin-bottom: .4rem;
}
.ressalva-professores p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--muted, #8a8a99);
}

/* 09/10/2026 (roadmap 3.28): tela baixa -- aperta o espaco da barra antes de precisar rolar.
   So o respiro muda; o alvo de toque de cada item continua acima de 24 px. */
@media (max-height: 720px) and (min-width: 769px) {
  .sidebar { padding-top: 1rem; padding-bottom: .75rem; }
  .sidebar-logo { margin-bottom: 1rem; }
  .sidebar .nav-link { padding-top: .45rem; padding-bottom: .45rem; }
}