/* ============================================================
   Academia Desinflame — troca a marca "VIVER DE IA" pelo símbolo do Desinflame
   + a palavra "Desinflame", COM a mesma animação da logo original
   (self-drawing: desenha o contorno com stroke-dashoffset e depois preenche).
   Override do espelho offline; o símbolo é injetado como SVG inline pelo
   boot-shim (resiste ao re-render), a partir de logo-desinflame.svg.
   ============================================================ */

/* 1) esconde os logos VIA originais: lockup da sidebar, o splash, o
      monograma VIA do Consultor (.vla-logo-wrapper) e o lockup da tela de LOGIN */
.via-sb-brand > svg,
.vla-logo-wrapper > svg,
.auth-statement > svg,
.via-animated-lockup,
svg[viewBox="0 0 494 58"] {   /* o lockup "VIVER DE IA" onde quer que apareça (login, convite...) */
  display: none !important;
}
/* ⚠ SÍMBOLO vs. WORDMARK — por que as alturas não são mais iguais.
   O X8 era largo e baixo (633×262, quase 2.5:1): a 19px de altura ele
   ocupava ~46px de largura. O símbolo do Desinflame é quase quadrado
   (282×292), então a MESMA altura rendia 18px de largura — um terço da
   presença anterior. As alturas do símbolo subiram ~1.7× pra devolver a
   mancha visual, e o wordmark ficou na altura antiga: símbolo imponente,
   palavra sutil. */

/* o símbolo injetado no lugar de um lockup genérico (ex.: convite/aceite) */
.x8-lockup--lockup494 .x8-lockup__svg { height: 50px; }
.x8-lockup--lockup494 .x8-lockup__labs { height: 29px; }

/* 1b) tela de login: o lockup fica grande e alinhado à esquerda, como o original */
.auth-statement .x8-lockup { justify-content: flex-start; }
.auth-statement .x8-lockup__svg { height: 56px; }
.auth-statement .x8-lockup__labs { height: 32px; }

/* 1c) rodapé da tela de login: o bundle já escreve "Academia Desinflame"
       (rebrand-desinflame.mjs), então NÃO há mais override de texto aqui.
       Antes esta regra zerava o font-size do <span> e injetava a marca no
       ::after — com o nome novo (19 caracteres) isso passaria a estourar a
       linha, e o texto nativo já está correto. */

.via-sb-brand {
  display: inline-flex !important;
  align-items: center;
}

/* 2) o lockup injetado: [símbolo] Desinflame, na cor navy da marca (currentColor) */
.x8-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--via-navy, #0A1F3B);
  line-height: 1;
}
.x8-lockup__svg {
  height: 32px;
  width: auto;
  overflow: visible;
  color: inherit;
  display: block;
}

/* 2a) animação de DESENHO (idêntica à via-logo-draw-in original) */
@keyframes x8-draw-in {
  0%   { stroke-dashoffset: 1; stroke-opacity: 1; fill-opacity: 0; }
  55%  { stroke-dashoffset: 0; stroke-opacity: 1; fill-opacity: 0; }
  80%  { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1; }
  100% { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1; }
}
.x8-lockup__path {
  fill: currentColor;
  fill-opacity: 0;
  stroke: currentColor;
  stroke-width: 6;
  stroke-opacity: 0;
  stroke-dasharray: 1;   /* paths têm pathLength=1 -> unidades normalizadas */
  stroke-dashoffset: 1;
  animation: x8-draw-in 1400ms cubic-bezier(0.32, 0.08, 0.24, 1) both;
}

/* 2b) "Desinflame" DESENHA igual ao símbolo (stroke-draw -> fill), como o
       wordmark original "VIVER DE IA" fazia. É um <svg><text> pra o stroke
       poder animar; a LARGURA do viewBox é medida pelo boot-shim (ajustarLabs)
       porque depende da fonte que carregou. */
.x8-lockup__labs {
  height: 19px;
  width: auto;
  overflow: visible;
  display: block;
  color: inherit;
}
@keyframes x8-labs-draw {
  0%   { stroke-dashoffset: 1150; stroke-opacity: 1; fill-opacity: 0; }
  55%  { stroke-dashoffset: 0;    stroke-opacity: 1; fill-opacity: 0; }
  80%  { stroke-dashoffset: 0;    stroke-opacity: 0; fill-opacity: 1; }
  100% { stroke-dashoffset: 0;    stroke-opacity: 0; fill-opacity: 1; }
}
.x8-lockup__labs-text {
  font-family: Geist, Inter, system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 27px;
  letter-spacing: 3px;     /* mesmo tracking do "LABS" — caixa alta, sutil */
  fill: currentColor;
  fill-opacity: 0;
  stroke: currentColor;
  stroke-width: 0.7;
  stroke-opacity: 0;
  /* > contorno de "DESINFLAME" (10 letras) -> um traço contínuo que desenha
     e segura. Era 400 quando a palavra era "LABS", de 4 letras. */
  stroke-dasharray: 1150;
  stroke-dashoffset: 1150;
  /* começa logo depois do símbolo (stagger), mesma duração/easing */
  animation: x8-labs-draw 1400ms cubic-bezier(0.32, 0.08, 0.24, 1) 260ms both;
}

/* 3) sidebar COLAPSADA (rail ~64px, classe .x8-rail posta pelo boot-shim):
      só o SÍMBOLO, centralizado — esconde a palavra */
.via-sb.x8-rail .via-sb-brand { justify-content: center; width: 100%; }
.via-sb.x8-rail .x8-lockup { gap: 0; }
.via-sb.x8-rail .x8-lockup__labs { display: none; }

/* 3b) Consultor: só o SÍMBOLO (grande), no lugar do monograma VIA */
.vla-logo-wrapper .x8-lockup { justify-content: center; }
.vla-logo-wrapper .x8-lockup__svg { height: 78px; }

/* 4) rodapé da sidebar. Expandida, o bundle já escreve "Academia Desinflame"
      e cabe — nada a fazer. No RAIL (120px, que é o estado padrão do shell
      "canvas") ele escreve só "AD", e o nome inteiro numa linha só mede
      133px e vaza 13px. Então aqui, e SÓ aqui, escrevemos a marca em duas
      linhas. Mesmo escopo de estado-rail que o shell-canvas.css usa. */
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"])
  .via-sb-inner > div:last-child > p {
  font-size: 0 !important;
}
:root[data-shell="canvas"] #via-member-sidebar:has(.via-sb-knob[aria-label="Expandir menu"])
  .via-sb-inner > div:last-child > p::after {
  content: "Academia\A Desinflame";   /* o <p> já é text-transform:uppercase */
  white-space: pre-line;              /* vence o white-space:nowrap inline */
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 1.62px;
}


/* ============================================================
   Academia Desinflame — SWITCH DE TEMA (rodapé da sidebar)
   Cores 100% via tokens --via-*: quando o tema escuro redefine as
   primitivas, o switch inverte sozinho (trilho branco + knob preto,
   que é exatamente o look do Resend). Os blocos [data-theme="dark"]
   no fim são rede de segurança, caso algum token mapeie diferente.
   ============================================================ */

/* --- a linha, entre o <nav> e o rodapé "Academia Desinflame" --- */
.x8-theme-row {
  flex-shrink: 0;
  padding: 6px 12px 10px;          /* alinha com o padding lateral do .via-sb-nav */
}

.x8-theme-switch {
  display: flex;
  align-items: center;
  width: 100%;
  height: 38px;                    /* mesma altura dos .via-nav-item */
  padding: 0 10px 0 6px;           /* mesmo padding dos .via-nav-item */
  border: none;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--via-font, "Geist", system-ui, sans-serif);
  color: var(--via-text-body, #344054);
  -webkit-font-smoothing: antialiased;
  transition: background-color .16s var(--via-ease, cubic-bezier(.32, .08, .24, 1));
}
.x8-theme-switch:hover { background: var(--via-navy-05, rgba(var(--x8n),.05)); }
.x8-theme-switch:active { background: var(--via-navy-08, rgba(var(--x8n),.08)); }
.x8-theme-switch:focus-visible {
  outline: 2px solid var(--via-navy-30, rgba(var(--x8n),.3));
  outline-offset: -2px;
}

/* --- sol/lua: dois SVGs sobrepostos, crossfade + giro --- */
.x8-theme-switch__ico {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;                     /* mesma calha de ícone dos .via-nav-item */
  height: 38px;
  flex-shrink: 0;
  color: var(--via-text-muted, #5C6677);
  transition: color .16s var(--via-ease, cubic-bezier(.32, .08, .24, 1));
}
.x8-theme-switch:hover .x8-theme-switch__ico { color: var(--via-text-primary, #0A1F3B); }
.x8-theme-switch__ico svg {
  position: absolute;
  width: 16px;
  height: 16px;
  transition:
    opacity .24s var(--via-ease, cubic-bezier(.32, .08, .24, 1)),
    transform .34s var(--via-ease-spring, cubic-bezier(.34, 1.56, .64, 1));
}
.x8-ico--sun  { opacity: 1; transform: rotate(0deg)    scale(1); }
.x8-ico--moon { opacity: 0; transform: rotate(-70deg)  scale(.5); }
.x8-theme-switch[aria-checked="true"] .x8-ico--sun  { opacity: 0; transform: rotate(70deg) scale(.5); }
.x8-theme-switch[aria-checked="true"] .x8-ico--moon { opacity: 1; transform: rotate(0deg)  scale(1); }

/* --- rótulo + badge "auto" (só quando a preferência é 'system') --- */
.x8-theme-switch__label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.006em;
  white-space: nowrap;
}
.x8-theme-switch__auto {
  display: none;
  font-family: var(--via-font-mono, "Geist Mono", monospace);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 1px 4px;
  border: 1px solid var(--via-border-soft, rgba(var(--x8n),.08));
  border-radius: 5px;
  color: var(--via-text-faint, #98A2B3);
}
.x8-theme-switch[data-pref="system"] .x8-theme-switch__auto { display: inline-flex; }

/* --- trilho + knob --- */
.x8-theme-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 18px;
  border-radius: var(--via-radius-pill, 999px);
  background: var(--via-navy-12, rgba(var(--x8n),.12));
  box-shadow: inset 0 0 0 1px var(--via-border-soft, rgba(var(--x8n),.05));
  transition: background-color .22s var(--via-ease, cubic-bezier(.32, .08, .24, 1));
}
.x8-theme-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--via-surface, #fff);
  box-shadow: 0 1px 2px rgba(var(--x8n),.28);
  transition: transform .24s var(--via-ease-snap, cubic-bezier(.2, .7, .2, 1));
}
/* LIGADO (= tema escuro): trilho quase-branco, knob quase-preto */
.x8-theme-switch[aria-checked="true"] .x8-theme-switch__track {
  background: var(--via-text-primary, #0A1F3B);
  box-shadow: none;
}
.x8-theme-switch[aria-checked="true"] .x8-theme-switch__knob { transform: translateX(12px); }

/* --- SIDEBAR COLAPSADA (rail 64px, classe .x8-rail posta pelo boot-shim):
       vira só o ícone, centralizado, sem rótulo e sem trilho --- */
.via-sb.x8-rail .x8-theme-row { padding: 6px 0 10px; }
.via-sb.x8-rail .x8-theme-switch {
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0 auto;
  border-radius: 10px;
  justify-content: center;
}
.via-sb.x8-rail .x8-theme-switch__label,
.via-sb.x8-rail .x8-theme-switch__track { display: none; }
.via-sb.x8-rail .x8-theme-switch__ico { width: 38px; }

/* --- rede de segurança no escuro (Resend: branco no preto) --- */
:root[data-theme="dark"] .x8-theme-switch:hover  { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .x8-theme-switch:active { background: rgba(255, 255, 255, .10); }
:root[data-theme="dark"] .x8-theme-switch:focus-visible { outline-color: rgba(255, 255, 255, .55); } /* pós-revisão P1#7: .30 dava 2.61:1 (< 3:1) */
:root[data-theme="dark"] .x8-theme-switch__track {
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
:root[data-theme="dark"] .x8-theme-switch[aria-checked="true"] .x8-theme-switch__track {
  background: #EDEDED;
  box-shadow: none;
}
:root[data-theme="dark"] .x8-theme-switch__knob {
  background: #0A0A0A;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
:root[data-theme="dark"] .x8-theme-switch__auto {
  border-color: rgba(255, 255, 255, .12);
}

/* --- durante a TROCA de tema (.x8-theme-switching, posta/removida pelo bloco
       [A] em ~220ms): quem controla a "onda" do app é a §26 do dark-tokens.css
       (transição SÓ de cor em `html.x8-theme-switching *`). NÃO redeclaramos
       `* { transition:none }` aqui — pós-revisão P1#8: era conflito de mesma
       especificidade/!important resolvido por ordem de carga (frágil).
       As regras abaixo, específicas do switch, têm especificidade MAIOR e
       (re)garantem transform/opacity — que a lista só-de-cor do dark-tokens
       não cobre — no knob e nos ícones. --- */
html.x8-theme-switching .x8-theme-switch__track {
  transition: background-color .22s var(--via-ease, cubic-bezier(.32, .08, .24, 1)) !important;
}
html.x8-theme-switching .x8-theme-switch__knob {
  transition: transform .24s var(--via-ease-snap, cubic-bezier(.2, .7, .2, 1)) !important;
}
html.x8-theme-switching .x8-theme-switch__ico svg {
  transition:
    opacity .24s var(--via-ease, cubic-bezier(.32, .08, .24, 1)),
    transform .34s var(--via-ease-spring, cubic-bezier(.34, 1.56, .64, 1)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .x8-theme-switch,
  .x8-theme-switch__ico,
  .x8-theme-switch__ico svg,
  .x8-theme-switch__track,
  .x8-theme-switch__knob { transition: none !important; }
}

/* ============================================================
   BARRAS DE ROLAGEM OCULTAS (a pedido) — o scroll continua funcionando,
   só o indicador some. Vale para o rail, o cartão da página e qualquer
   área rolável interna.
   Precisa das DUAS declarações: `scrollbar-width` cobre Firefox e
   `::-webkit-scrollbar` cobre Chrome/Safari/Edge — não há propriedade
   única que sirva aos dois.
   `overflow` NÃO é tocado: esconder a barra sem manter o overflow
   transformaria conteúdo rolável em conteúdo cortado.
   ============================================================ */
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ⚠ O bundle injeta um <style> em runtime com `.via-sb-nav{scrollbar-width:thin}`
   + `::-webkit-scrollbar{width:4px}`. Seletor de classe vence o `*` acima, então
   o rail continuava com 11px de barra. Repetimos o MESMO alvo com !important. */
.via-sb-nav,
.via-shell-content,
.via-shell-content > main {
  scrollbar-width: none !important;
}
.via-sb-nav::-webkit-scrollbar,
.via-shell-content::-webkit-scrollbar,
.via-shell-content > main::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* ---- pill "individual" na aba Minhas Mentorias (do mentor) --------
   Variante nova: o <Pill> monta a classe a partir do nome da variante,
   então basta o estilo. Tom azul p/ ler como CATEGORIA e não competir
   com "ao vivo" (que tem ponto pulsante) nem com "agendada" (neutro). */
.via-pill--individual {
  background: rgba(30, 58, 95, .07);
  border-color: rgba(30, 58, 95, .20);
  color: var(--via-blue, #1E3A5F);
}
:root[data-theme="dark"] .via-pill--individual {
  background: rgba(165, 180, 252, .14);
  border-color: rgba(165, 180, 252, .30);
  color: #c7d2fe;
}