/* ==========================================================================
   TOPBAR DO SITE — a mesma peça do admin e do Play (23/09/2026)
   --------------------------------------------------------------------------
   Pedido do Márcio: padronizar a barra do site e os objetos dela com o que
   admin.loomty.com e play.loomty.com já usam. A referência é uma só, porque
   os dois apps já fecharam entre si:

     apps/admin/layouts/admin.vue          (topbar em cartão)
     apps/game/components/play/Navbar.vue  ("Topbar · Jogo" do Figma)

   Medidas copiadas de lá, não estimadas:
     · cartão flutuante a 4px da borda da tela (o `p-1` da moldura do app),
       raio 16, fundo surface/canvas #EAEAEA, sem sombra e sem fio;
     · altura 58 = 8 + 42 + 8, respiro 8 com 20 à esquerda (`p-2 pl-5`);
     · logotipo com 23,262px de altura; abaixo de 640px (o `sm` do app) ele
       dá lugar ao símbolo, no mesmo tamanho;
     · todo controle mede 42 × 42 (ou 42 de altura), raio 8, contorno de 1px
       em border/default #D4D4D8, fundo transparente — o canvas aparece
       através dele — e hover em preto a 5%;
     · ícone de 18px, gap de 8px entre os controles;
     · tipografia de controle do app: Plus Jakarta Sans 13/700, entrelinha
       1,72, entreletra 0, caixa alta;
     · primário (JOGAR) = `LoomtyButton primary`: #0C0C0A, hover #27272A, sem
       o salto de 2px nem o vermelho que o site usava;
     · nome e papel de quem entrou = o bloco do canto do admin: nome 14/600
       #0C0C0C e papel mono 10/700, entreletra .96px, #A3A3A3.

   O estado "transparente sobre o herói escuro, claro depois de rolar" deixa
   de existir: o app tem UMA topbar, e ela é o cartão. Por isso esta folha
   pinta `.nav` e `.nav.scrolled` igual, e desliga a tinta escura que o menu
   de celular passava para a barra (`--menu-fase`).

   Tudo aqui vai prefixado por `#nav.nav` e a folha é a ÚLTIMA de cada
   página: as duas folhas de origem (styles.css e nav-rodape-loomty-com.css),
   as correções por página (sobre.css e instituicoes.css, que pintavam a marca
   de branco sobre a foto) e responsive.css usam só classes, e o id vence
   todas sem `!important`. As regras da gaveta da Iara (`body.site-iara-aberta
   #nav.nav`) continuam mais fortes de propósito — elas mandam na barra
   enquanto a gaveta está aberta no celular.
   ========================================================================== */

#nav.nav {
  --tb-canvas: #eaeaea;
  --tb-surface: #ffffff;
  --tb-surface-hover: #f5f5f5;
  --tb-border: #d4d4d8;
  --tb-border-subtle: #eaeaea;
  --tb-ink: #0c0c0a;
  --tb-text-2: #525252;
  --tb-placeholder: #a3a3a3;
  --tb-hover: rgba(0, 0, 0, .05);
  --tb-primary-hover: #007a40; /* verde do DS — usado só no hover do JOGAR (25/09/2026) */
  --tb-controle: 42px;
  --tb-borda-tela: 4px;
}

/* ---- 1. O CARTÃO --------------------------------------------------------- */

#nav.nav,
#nav.nav.scrolled {
  box-sizing: border-box;
  top: calc(var(--tb-borda-tela) + env(safe-area-inset-top, 0px));
  left: calc(var(--tb-borda-tela) + env(safe-area-inset-left, 0px));
  right: calc(var(--tb-borda-tela) + env(safe-area-inset-right, 0px) + var(--iara-empurrao, 0px));
  height: 58px;
  padding: 8px 8px 8px 20px;
  gap: 16px;
  border-radius: 16px;
  background-color: var(--tb-canvas);
  background-image: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: none;
}

/* ---- 1b. RECOLHER AO ROLAR ------------------------------------------------
   O comportamento do admin e do Play (useAutoHideTopbar, portado em
   assets/js/topbar.js): o cartão sai INTEIRO para cima, rígido, por
   translate — sem mudar de tamanho — em 300ms ease-out, e some por completo,
   inclusive os 4px de borda de tela acima dele. */

#nav.nav,
#nav.nav.scrolled {
  transition: transform .3s ease-out;
}

#nav.nav.topbar-oculta {
  transform: translateY(calc(-100% - var(--tb-borda-tela) - env(safe-area-inset-top, 0px)));
}

@media (prefers-reduced-motion: reduce) {
  #nav.nav,
  #nav.nav.scrolled { transition: none; }
}

/* ---- 2. A MARCA ---------------------------------------------------------- */

#nav.nav .nav-logo {
  flex: 0 0 auto;
  width: auto;
  height: var(--tb-controle);
  min-height: var(--tb-controle);
  justify-content: flex-start;
  border-radius: 8px;
}

/* o cartão é sempre claro: só as versões de tinta escura ficam em cena */
#nav.nav .nav-logo img { display: none; filter: none; }

#nav.nav .nav-logo .nav-logo-full-dark {
  display: block;
  width: auto;
  max-width: none;
  height: 23.262px;
  aspect-ratio: 696 / 148;
}

@media (max-width: 639px) {
  #nav.nav .nav-logo .nav-logo-full-dark { display: none; }
  #nav.nav .nav-logo .nav-logo-icon-dark {
    display: block;
    width: 23.262px;
    height: 23.262px;
  }
  /* a versão clara só entra com a gaveta aberta (iara-drawer.css decide
     qual das duas); aqui só se garante que ela tenha o mesmo tamanho */
  #nav.nav .nav-logo .nav-logo-icon-light {
    width: 23.262px;
    height: 23.262px;
  }
}

/* ---- 3. OS LINKS (desktop) ----------------------------------------------- */
/* `.nav-login` também carrega `.nav-link` — por isso o escopo `.nav-links`. */

#nav.nav .nav-links { gap: 4px; }

#nav.nav .nav-links .nav-link {
  display: inline-flex;
  align-items: center;
  height: var(--tb-controle);
  padding: 0 12px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.72;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tb-text-2);
  transition: background-color .15s, color .15s;
}

#nav.nav .nav-links .nav-link:hover {
  background-color: var(--tb-hover);
  color: var(--tb-ink);
}

/* página aberta: a superfície branca sobre o canvas — o mesmo par de tons
   que o app usa para "aba ativa", aqui invertido porque o fundo é o canvas */
#nav.nav .nav-links .nav-link.is-active,
#nav.nav.scrolled .nav-links .nav-link.is-active {
  background-color: var(--tb-surface);
  color: var(--tb-ink);
  font-weight: 700;
}

/* ---- 4. O CANTO DIREITO -------------------------------------------------- */

#nav.nav .nav-actions {
  height: var(--tb-controle);
  gap: 8px;
}

/* tipografia de controle do app, comum aos dois botões de texto */
#nav.nav .nav-login,
#nav.nav .nav-cta {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  height: var(--tb-controle);
  min-height: var(--tb-controle);
  padding: 0 16px;
  gap: 8px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.72;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: none;
  transition: background-color .15s, border-color .15s, color .15s;
}

/* ENTRAR — secundário da topbar: contorno, fundo transparente */
#nav.nav .nav-login,
#nav.nav.scrolled .nav-login {
  border: 1px solid var(--tb-border);
  background: transparent;
  color: var(--tb-ink);
}

#nav.nav .nav-login:hover {
  background-color: var(--tb-hover);
  color: var(--tb-ink);
}

/* Sessão aberta: vira o bloco nome + papel do canto do admin. Sem contorno,
   alinhado à direita; o ponto verde do auth-modal.css sai — o app não tem. */
#nav.nav .nav-login[data-logado] {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  padding: 0 8px;
  border-color: transparent;
  text-align: right;
  text-transform: none;
}

#nav.nav .nav-login[data-logado]::before { display: none; }

#nav.nav .nav-login-name {
  max-width: 16rem;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: #0c0c0c;
}

#nav.nav .nav-login-role,
#nav.nav.scrolled .nav-login-role {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: .96px;
  text-transform: uppercase;
  color: var(--tb-placeholder);
}

/* JOGAR — o primário do app */
#nav.nav .nav-cta,
#nav.nav.scrolled .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tb-ink);
  background: var(--tb-ink);
  color: #ffffff;
}

#nav.nav .nav-cta:hover,
#nav.nav.scrolled .nav-cta:hover {
  border-color: var(--tb-primary-hover);
  background: var(--tb-primary-hover);
  color: #ffffff;
  transform: none;
}

/* IARA e MENU — o botão de ícone da topbar do app */
#nav.nav .nav-ai,
#nav.nav .nav-toggle,
#nav.nav.scrolled .nav-ai,
#nav.nav.scrolled .nav-toggle {
  box-sizing: border-box;
  flex: 0 0 var(--tb-controle);
  width: var(--tb-controle);
  min-width: var(--tb-controle);
  height: var(--tb-controle);
  min-height: var(--tb-controle);
  padding: 0;
  border: 1px solid var(--tb-border);
  border-radius: 8px;
  background: transparent;
  color: var(--tb-ink);
  transform: none;
  transition: background-color .15s, border-color .15s, color .15s;
}

#nav.nav .nav-ai:hover,
#nav.nav .nav-toggle:hover,
#nav.nav.scrolled .nav-ai:hover,
#nav.nav.scrolled .nav-toggle:hover {
  border-color: var(--tb-border);
  background: var(--tb-hover);
  color: var(--tb-ink);
}

#nav.nav .nav-ai svg,
#nav.nav .nav-toggle svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* ---- 5. FOCO ------------------------------------------------------------- */
/* o anel do app: 2px de tinta, 2px de afastamento */

#nav.nav a:focus-visible,
#nav.nav button:focus-visible {
  outline: 2px solid var(--tb-ink);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---- 6. O MENU RECOLHIDO (≤1024) -----------------------------------------
   O painel deixa de ser a faixa preta de largura cheia colada na barra: vira
   um cartão branco 4px abaixo dela, com a sombra e o raio de flutuação do
   app (a do modal: 0 12 32 a 12%). As linhas são itens de menu do app —
   44 de altura, raio 8, hover em surface/hover, a página aberta em canvas.
   A barra não escurece mais junto: o relógio `--menu-fase` segue movendo o
   véu do body, e só ele. */

@media (max-width: 1024px) {
  #nav.nav .nav-links {
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--tb-border-subtle);
    border-radius: 16px;
    background: var(--tb-surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #nav.nav.open .nav-links .nav-link,
  #nav.nav.is-fechando .nav-links .nav-link {
    display: flex;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-bottom: 0;
    color: var(--tb-text-2);
  }

  #nav.nav.open .nav-links .nav-link:hover,
  #nav.nav.is-fechando .nav-links .nav-link:hover {
    background-color: var(--tb-surface-hover);
    color: var(--tb-ink);
  }

  #nav.nav.open .nav-links .nav-link.is-active,
  #nav.nav.is-fechando .nav-links .nav-link.is-active {
    background-color: var(--tb-canvas);
    color: var(--tb-ink);
  }

  /* as trocas de "menu aberto" das folhas antigas repintavam marca, JOGAR e
     contornos para a barra escura — que não existe mais */
  #nav.nav.scrolled.open .nav-cta,
  #nav.nav.scrolled.is-fechando .nav-cta {
    border-color: var(--tb-ink);
    background: var(--tb-ink);
    color: #ffffff;
  }
  #nav.nav.scrolled.open .nav-ai,
  #nav.nav.scrolled.is-fechando .nav-ai,
  #nav.nav.scrolled.open .nav-toggle,
  #nav.nav.scrolled.is-fechando .nav-toggle {
    border-color: var(--tb-border);
    color: var(--tb-ink);
  }
  #nav.nav.scrolled.open .nav-login,
  #nav.nav.scrolled.is-fechando .nav-login { color: var(--tb-ink); }

  /* o menu aberto mostra o botão como pressionado */
  #nav.nav.open .nav-toggle { background: var(--tb-hover); }
}

/* Com a gaveta da Iara aberta, a barra recolhe mais cedo (iara-drawer.css,
   1024–1730px) e pintava o mesmo painel preto por regras próprias, mais
   fortes que as de cima. Aqui elas recebem o painel do cartão. */
@media (min-width: 1024px) and (max-width: 1730px) {
  body.site-iara-aberta #nav.nav .nav-links,
  body.site-iara-aberta #nav.nav.scrolled.open .nav-links {
    top: calc(100% + 4px);
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--tb-border-subtle);
    border-radius: 16px;
    background: var(--tb-surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.site-iara-aberta #nav.nav.open .nav-links .nav-link,
  body.site-iara-aberta #nav.nav.scrolled.open .nav-links .nav-link {
    height: 44px;
    padding: 0 12px;
    border-bottom: 0;
    color: var(--tb-text-2);
  }
  body.site-iara-aberta #nav.nav.open .nav-links .nav-link:hover {
    background-color: var(--tb-surface-hover);
    color: var(--tb-ink);
  }
  /* sobre o painel branco, a página aberta é o canvas — como no ≤1024 */
  body.site-iara-aberta #nav.nav.open .nav-links .nav-link.is-active {
    background-color: var(--tb-canvas);
    color: var(--tb-ink);
  }
}

/* ==========================================================================
   7. A GAVETA DA IARA — o mesmo cartão da barra (23/09/2026)
   --------------------------------------------------------------------------
   Pedido do Márcio: o chat recebe o respiro e o raio da topbar. Vira cartão
   a 4px das bordas da tela (topo, direita e base), raio 16, e o empurrão do
   desktop abre o mesmo vão de 4px entre a página e o cartão — a moldura do
   app, onde barra lateral, topbar e conteúdo se separam por 4px (`gap-1`).

   O empurrão continua sendo UMA variável (`--iara-empurrao`, 0→370, movida
   pelo tween do iara-drawer.js, que não foi tocado). As contas daqui só a
   reescalam, para que tudo siga andando junto no meio da animação:

     cartão   370 de largura + 4 de borda de tela = 374 que ele ocupa
     página   374 + 4 de vão                      = 378 que ela cede
     barra    termina 4px antes da página         = 4 + 378·e/370

   Com a variável em 0 as três contas devolvem o site fechado; em 370, o
   cartão está em casa. Nos quadros do meio o vão cresce de 0 a 4 junto com
   o resto — nunca abre fresta. */

body {
  --iara-cartao: calc(var(--iara-empurrao, 0px) * 374 / 370);
  --iara-cede: calc(var(--iara-empurrao, 0px) * 378 / 370);
}

#siteIaraDrawer.site-iara-drawer {
  top: calc(var(--tb-borda-tela, 4px) + env(safe-area-inset-top, 0px));
  right: calc(4px + env(safe-area-inset-right, 0px));
  bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  left: auto;
  height: auto;
  border: 0;
  border-radius: 16px;
}

/* a faixa do topo passa a ter a altura da barra (58) e os dois botões dela
   sentam no mesmo aro de 8px, em 42 × 42 — na mesma linha dos botões da
   topbar, que também ficam a 4 + 8 = 12px do topo da tela */
#siteIaraDrawer .site-iara-drawer__top { height: 58px; }

#siteIaraDrawer .site-iara-drawer__close {
  top: 8px;
  right: 8px;
  width: 42px;
  height: 42px;
}

#siteIaraDrawer .iara-assistant__clear-wrap { top: 8px; left: 8px; }

#siteIaraDrawer .iara-assistant__clear-wrap .iara-assistant__icon-button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
}

/* A marca da Iara acompanha o logotipo novo da barra, pela mesma conta de
   letras que o iara-drawer.css explica: com o logo a 23,262px as letras
   dele dão 23,262 × 105/148 = 16,50px, e para as da Iara chegarem a isso a
   caixa precisa de 16,50 × 75/60 = 20,63px — centrada nos 58 da faixa. */
/* Em 23/09/2026 o Márcio pediu o mesmo "chat" do admin e do Play (não só o
   cartão): a marca com duas alturas, contorno sempre visível nos botões,
   caixa de texto no aro de 8, sem seleção da moldura e sem o anel cinza de
   foco. Os valores são os MESMOS finais de lá — não a conta por letra que
   este arquivo fazia antes (a moldura já é a mesma, então a marca também é):
   parada 34,957px (a base de 24,276 +20% duas vezes) e compacta 25,257px
   (−15% duas vezes sobre a parada) — troca a conta por altura de letra que
   valia antes desta data. */
#siteIaraDrawer .iara-assistant__brand.iara-assistant__brand img { height: 34.957px; }
#siteIaraDrawer .iara-assistant__brand.is-compact { top: 16.372px; }
#siteIaraDrawer .iara-assistant__brand.is-compact.is-compact img { height: 25.257px; }

#siteIaraDrawer .iara-assistant__landing { padding-top: 58px; }

/* Contorno sempre visível (era 0,0,0,.1 — mais escuro que o border-subtle
   do admin/Play) e sem o anel cinza ao focar a caixa de texto. */
#siteIaraDrawer .iara-assistant__icon-button,
#siteIaraDrawer .site-iara-drawer__close {
  border-color: var(--tb-border-subtle, #eaeaea);
}

#siteIaraDrawer .iara-assistant__form {
  padding: 0 8px 8px;
  -webkit-user-select: none;
  user-select: none;
}

#siteIaraDrawer .iara-assistant__composer {
  -webkit-user-select: none;
  user-select: none;
}

#siteIaraDrawer .iara-assistant__composer textarea {
  -webkit-user-select: text;
  user-select: text;
}

#siteIaraDrawer .iara-assistant__composer:focus-within {
  border-color: rgba(15, 23, 42, .12);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}

@media (min-width: 1024px) {
  /* fechado: deslocado a largura que ocupa (374), inteiro fora da tela */
  #siteIaraDrawer.site-iara-drawer,
  #siteIaraDrawer.site-iara-drawer.is-open {
    transform: translateX(calc((var(--site-iara-largura) - var(--iara-empurrao, 0px)) * 374 / 370));
  }

  body main#conteudo,
  html body > footer.footer { width: calc(100% - var(--iara-cede)); }

  #nav.nav,
  #nav.nav.scrolled {
    right: calc(var(--tb-borda-tela) + env(safe-area-inset-right, 0px) + var(--iara-cede));
  }
}

@media (min-width: 1361px) {
  body { --content: min(1280px, calc(100vw - var(--iara-cede) - 2 * var(--gutter))); }
}

@media (min-width: 1024px) {
  body { --vw-util: calc(100vw - var(--iara-cede)); }
}

/* tablet: passa por cima da página, mas com a mesma moldura */
@media (min-width: 641px) and (max-width: 1023px) {
  #siteIaraDrawer.site-iara-drawer { width: min(calc(100vw - 8px), 370px); }
}

/* Celular: a faixa da página à esquerda (72px) continua sendo por onde o
   visitante toca para fechar; o cartão ocupa o resto menos os 4px da borda.
   A faixa do topo deixa os 72 do trilho e passa aos 58 da barra, para os
   botões ficarem na linha do símbolo da Loomty que continua à mostra. */
@media (max-width: 640px) {
  #siteIaraDrawer.site-iara-drawer { width: calc(100vw - var(--site-iara-mobile-rail) - 4px); }
  #siteIaraDrawer .site-iara-drawer__top { height: 58px; }
  #siteIaraDrawer .site-iara-drawer__close { top: 8px; right: 8px; }
  #siteIaraDrawer .iara-assistant__clear-wrap { top: 8px; left: 8px; }
  #siteIaraDrawer .iara-assistant__brand.iara-assistant__brand img { height: 34.957px; }
  #siteIaraDrawer .iara-assistant__brand.is-compact { top: 16.372px; }
  #siteIaraDrawer .iara-assistant__brand.is-compact.is-compact img { height: 25.257px; }
  #siteIaraDrawer .iara-assistant__landing { padding-top: 58px; }
}