/* ============================================================================
   narrassol-nav (nsol-nav) — barra de navegação flutuante unificada
   FONTE DA VERDADE: /root/shared/narrassol-nav/nav.css
   Não edite as cópias em static/ dos projetos — edite aqui e rode ./sync-nav.sh
   ----------------------------------------------------------------------------
   Pílula escura quente (identidade narrassol). Só a aba ativa expande para
   mostrar o rótulo. A "pílula" branca da aba ativa desliza entre as páginas
   usando a View Transitions API do browser (nativa, suave, sem JS segurando a
   navegação). Onde não há suporte, troca instantânea — sem travada.
   Tematizável via variáveis; cada projeto sobrescreve só o que precisar.
   ========================================================================== */

/* Habilita a transição de página nativa (morph da pílula entre páginas).
   O root troca instantâneo; só a pílula nomeada anima. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(nsol-pill) {
  animation-duration: .26s;
  animation-timing-function: cubic-bezier(.34, .01, .2, 1);
}

.nsol-nav {
  --nsol-bg:        #241712;                /* marrom bem escuro, ~luminância do preto da ref */
  --nsol-pill:      #ffffff;                /* pílula da aba selecionada */
  --nsol-icon:      rgba(245, 244, 235, .5);/* ícone/rótulo inativo, off-white quente */
  --nsol-active-fg: #241712;                /* ícone + rótulo sobre a pílula clara */
  --nsol-badge:     #ff6b35;                /* acento do badge — projeto sobrescreve se quiser */
  --nsol-ease:      cubic-bezier(.34, .01, .2, 1);
  --nsol-dur:       .2s;

  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  margin: 0 auto;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
  background: var(--nsol-bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .30);
  z-index: 100;
}

/* ── Itens ────────────────────────────────────────────────────────────────── */

.nsol-nav-item {
  position: relative;
  z-index: 0;
  flex: 1 1 0;                              /* inativos dividem o espaço igualmente */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--nsol-icon);
  text-decoration: none;
  font-family: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--nsol-dur) var(--nsol-ease);
}

/* a pílula branca é um ::before (não depende de JS p/ existir/posicionar) */
.nsol-nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--nsol-pill);
  opacity: 0;
  transform: scale(.82);
  transition: opacity calc(var(--nsol-dur) * .9) var(--nsol-ease),
              transform var(--nsol-dur) var(--nsol-ease);
}

.nsol-nav-item.is-active {
  flex: 0 0 auto;                           /* ativo ocupa só a largura natural (ícone + rótulo) */
  color: var(--nsol-active-fg);
}

.nsol-nav-item.is-active::before {
  opacity: 1;
  transform: none;
  view-transition-name: nsol-pill;          /* o browser desliza esta pílula entre páginas */
}

.nsol-nav-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  flex: 0 0 auto;
}

.nsol-nav-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 0;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1;
  transition: max-width var(--nsol-dur) var(--nsol-ease),
              opacity calc(var(--nsol-dur) * .8) var(--nsol-ease),
              margin-left var(--nsol-dur) var(--nsol-ease);
}

.nsol-nav-item.is-active .nsol-nav-label {
  max-width: 8rem;
  opacity: 1;
  margin-left: .45rem;
}

/* ── Badge (contadores: favoritos, carrinho…) ─────────────────────────────── */

.nsol-nav-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 1;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--nsol-badge);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nsol-nav-badge[hidden] { display: none; }

/* ── Crédito narrassol (texto inteiro é o link, discreto) ──────────────────── */

.nsol-nav-credit {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 99;
  bottom: calc(5px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: .58rem;
  letter-spacing: .02em;
  color: var(--nsol-credit, rgba(120, 100, 90, .85));
  text-decoration: none;
  opacity: .85;
  transition: opacity .15s;
}

.nsol-nav-credit:hover,
.nsol-nav-credit:focus-visible { opacity: 1; }

/* ── Desktop (≥768px): a pílula vira sidebar vertical à esquerda ────────────
   O projeto adiciona class="nsol-has-sidebar" no <body> para o conteúdo ser
   deslocado. Brand opcional: <div class="sidebar-brand"><img class="sidebar-
   brand-logo" ...></div> como primeiro filho da nav (escondida no mobile).
   Exceções (ex.: página de login sem sidebar) são override do projeto. */

@media (min-width: 768px) {
  :root { --nsol-sidebar-width: 220px; }

  .nsol-nav {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    margin: 0;
    max-width: none;
    width: var(--nsol-sidebar-width);
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    border-radius: 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, .18);
    z-index: 99;
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    padding: 12px 8px 14px;
    margin-bottom: 4px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .sidebar-brand-logo {
    height: 42px;
    width: auto;
    border-radius: 0;
  }

  .nsol-nav-item {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 12px;
    height: auto;
    padding: 12px 14px;
    border-radius: 12px;
    width: 100%;
    text-align: left;
  }

  .nsol-nav-item.is-active { flex: 0 0 auto; }
  .nsol-nav-item.is-active::before { border-radius: 12px; }

  /* no menu lateral o rótulo aparece sempre (gap do item dá o respiro) */
  .nsol-nav-label,
  .nsol-nav-item.is-active .nsol-nav-label {
    max-width: none;
    opacity: 1;
    margin-left: 0;
    font-size: 14px;
  }

  .nsol-nav-ico { font-size: 20px; width: 22px; }

  /* crédito ancorado no rodapé da sidebar */
  .nsol-nav-credit {
    left: 0;
    right: auto;
    width: var(--nsol-sidebar-width);
    bottom: 0;
    padding: 10px 16px;
    text-align: left;
    font-size: .6rem;
    color: rgba(245, 244, 235, .55);
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: var(--nsol-credit-bg, #241712);
  }

  /* deslocamento do conteúdo (opt-in por projeto) */
  body.nsol-has-sidebar { padding-bottom: 24px; }
  body.nsol-has-sidebar main { padding-left: var(--nsol-sidebar-width); }
  body.nsol-has-sidebar .header { margin-left: var(--nsol-sidebar-width); }
}

@media (max-width: 767.98px) {
  .sidebar-brand { display: none; }
}

/* ── Acessibilidade ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .nsol-nav-item,
  .nsol-nav-item::before,
  .nsol-nav-label { transition: none; }
  ::view-transition-group(nsol-pill) { animation: none; }
}