/* ============================================================
   NEUREN — LOGO / MARCA (componente reutilizável)
   ------------------------------------------------------------
   Substitui os logotipos provisórios (letra "n", ícone de folha)
   pela marca oficial: símbolo de fita + wordmark "neuren".

   PRINCÍPIOS
   • Só usa tokens já existentes (paleta sage/clay/cream, Fraunces,
     sombras, radius). Nenhuma cor nova.
   • O símbolo é SVG (escala perfeita, nitidez em qualquer DPI).
   • O wordmark é texto vivo em Fraunces (mesma identidade do
     sistema), garantindo nitidez e herança de tema.
   • Funciona no app principal e nos painéis standalone.
   • Acessível: o link/markup tem aria-label; o SVG é decorativo
     (aria-hidden) porque o texto "neuren" já nomeia a marca.

   ESTRUTURA ESPERADA NO HTML
     <a class="nrn-logo" href="..." aria-label="neuren — início">
       <span class="nrn-logo__tile">…svg símbolo…</span>
       <span class="nrn-logo__word">neur<em>en</em></span>
       <span class="nrn-logo__sub">Painel do Professor</span>  (opcional)
     </a>
   ============================================================ */

.nrn-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink-0);
  text-decoration: none;
  line-height: 1;
  border-radius: var(--r-md);
  /* área de toque/clique confortável sem alterar o layout ao redor */
  padding: 4px;
  margin: -4px;
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.nrn-logo:hover { text-decoration: none; }

/* ── Tile do símbolo (gradiente sage da marca) ── */
.nrn-logo__tile {
  --tile: 38px;
  width: var(--tile);
  height: var(--tile);
  flex: 0 0 auto;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--sage-400), var(--sage-600));
  box-shadow: 0 2px 8px rgba(93, 125, 75, .30),
              inset 0 1px 0 rgba(255, 255, 255, .22);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t-fast) var(--ease),
              transform var(--t-med) var(--ease);
}
.nrn-logo__tile svg {
  width: 64%;
  height: auto;
  display: block;
  color: #fff;               /* símbolo branco sobre o tile */
}

/* brilho sutil no hover — sem mudar a cor da marca */
@media (hover: hover) {
  .nrn-logo:hover .nrn-logo__tile {
    box-shadow: 0 6px 18px rgba(93, 125, 75, .38),
                inset 0 1px 0 rgba(255, 255, 255, .28);
    transform: translateY(-1px);
  }
  .nrn-logo:active .nrn-logo__tile { transform: translateY(0); }
}

/* ── Variante "bare": símbolo sem tile (usa cor da marca direto) ── */
.nrn-logo__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.nrn-logo__mark svg {
  width: 30px;
  height: auto;
  display: block;
  color: var(--brand);       /* adapta ao tema (sage-500 claro / sage-300 escuro) */
}

/* ── Wordmark (Fraunces — identidade do sistema) ── */
.nrn-logo__word {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink-0);
  white-space: nowrap;
}
.nrn-logo__word em {
  font-style: italic;
  font-weight: 500;
  color: var(--brand-strong);
}

/* ── Texto auxiliar (ex.: "Painel do Professor") empilhado sob o wordmark ── */
.nrn-logo--stacked { align-items: center; }
.nrn-logo--stacked .nrn-logo__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.nrn-logo__sub {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-3);
  white-space: nowrap;
  margin-top: 1px;
}

/* ── Tamanhos ── */
.nrn-logo--sm  .nrn-logo__tile { --tile: 30px; }
.nrn-logo--sm  .nrn-logo__word { font-size: 17px; }
.nrn-logo--lg  .nrn-logo__tile { --tile: 48px; border-radius: 14px; }
.nrn-logo--lg  .nrn-logo__word { font-size: 26px; }
.nrn-logo--xl  .nrn-logo__tile { --tile: 60px; border-radius: 17px; }
.nrn-logo--xl  .nrn-logo__word { font-size: 32px; }

/* ── Modo "só símbolo" (sidebar recolhida etc.) ── */
.nrn-logo--symbol-only .nrn-logo__word,
.nrn-logo--symbol-only .nrn-logo__sub,
.nrn-logo--symbol-only .nrn-logo__text { display: none; }

/* ============================================================
   Integração com a SIDEBAR dos painéis (.sb-head)
   Quando a sidebar está .collapsed, o wordmark/sub somem e fica
   só o tile centralizado — comportamento já usado pelo sistema.
   ============================================================ */
.collapsed .nrn-logo__word,
.collapsed .nrn-logo__sub,
.collapsed .nrn-logo__text { display: none; }
.collapsed .sb-head .nrn-logo { justify-content: center; gap: 0; }

/* ============================================================
   Logo em destaque centralizado (login / cadastro / telas-cheia)
   ============================================================ */
.nrn-logo--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  width: 100%;
  margin: 0 auto var(--s-4);
  text-align: center;
}
.nrn-logo--center .nrn-logo__word { font-size: 28px; }
.nrn-logo--center .nrn-logo__tile { --tile: 56px; border-radius: 16px; }

/* Cabeçalho de modal com logo centralizada (login / cadastro):
   alinha eyebrow + título ao centro para um conjunto coeso. */
.modal-head--branded { text-align: center; }
.modal-head--branded .eyebrow { display: block; }

/* ── Responsividade fina ── */
@media (max-width: 560px) {
  .nrn-logo__word { font-size: 18px; }
  .nrn-logo--lg .nrn-logo__word { font-size: 22px; }
}

/* respeita redução de movimento */
@media (prefers-reduced-motion: reduce) {
  .nrn-logo, .nrn-logo__tile { transition: none !important; }
  .nrn-logo:hover .nrn-logo__tile { transform: none !important; }
}
body.reduce-motion .nrn-logo:hover .nrn-logo__tile { transform: none !important; }

/* ── Símbolo dentro de um avatar circular (ex.: copiloto no chat) ── */
.nrn-avatar { display: grid; place-items: center; overflow: hidden; }
.nrn-avatar svg { width: 60%; height: auto; color: #fff; }