/* header-logado.css — header da sessão logada (index.html e páginas internas).
   Carregar DEPOIS de index.css / header-full.css.
   1) Logo e nome com o MESMO tamanho do header da home sem login (.landing-header / .landing-brand)
   2) Foto do usuário (avatar) maior, redonda e com fallback
   3) Menu dropdown redesenhado
   Cor verde única do site: #235048. */

:root {
  --verde: #235048;
  --verde-tx: #235048;                    /* verde usado em texto/ícone */
  --verde-tint: rgba(35, 80, 72, .09);    /* fundo suave = o mesmo verde com transparência */
  --verde-tint-forte: rgba(35, 80, 72, .16);
}
:root[data-theme="dark"] {
  --verde-tx: #F5EFE6;                    /* #235048 é escuro demais para texto sobre fundo escuro */
  --verde-tint: rgba(35, 80, 72, .45);
  --verde-tint-forte: rgba(35, 80, 72, .70);
}

/* O cabeçalho normal fica atrás das telas de seção para não cobrir seus botões de voltar/fechar.
   Só sobe acima delas quando o dropdown da conta está aberto. */
html.usuario-logado header { z-index: 50; }
html.usuario-logado header:has(#nav-user.active) { z-index: 10035; }

/* ===== 1) Logo + nome = home sem login (ícone 32px / texto 22px 800; no celular 29px / 19px) ===== */
header .nav-wrap {
  padding: 16px 32px;
  padding-left: max(32px, env(safe-area-inset-left));
  padding-right: max(32px, env(safe-area-inset-right));
}
header .logo { gap: 10px; }
header .logo .logo-icon { width: 32px; height: 32px; object-fit: contain; }
header .logo .logo-text { flex-direction: column; align-items: flex-start; gap: 0; }
header .logo .logo-main {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-size: 22px; font-weight: 800; letter-spacing: .02em; line-height: 1.2;
  color: var(--ink);
}
@media (max-width: 760px) {
  header .nav-wrap {
    padding: 14px 18px;
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  header .logo .logo-icon { width: 29px; height: 29px; }
  header .logo .logo-main { font-size: 19px; letter-spacing: .02em; }
}

/* ===== 2) Foto do usuário ===== */
header .nav-user-btn { gap: 8px; padding: 4px; }
header .nav-user-btn .nav-avatar,
.nav-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--verde);
  background: var(--verde);
  color: #fff;
  font-size: 15px; font-weight: 700; line-height: 1;
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase;
}
.nav-avatar img,
.nav-dropdown-avatar img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
header .nav-user-btn .nav-saldo-pill {
  background: var(--verde-tint) !important;
  color: var(--verde-tx) !important;
  font-size: 11.5px; font-weight: 700; padding: 6px 10px;
}

/* ===== 3) Dropdown ===== */
header .nav-dropdown {
  top: calc(100% + 12px); right: 0;
  width: 280px; min-width: 0; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(46, 31, 23, .22);
}
header .nav-user.active .nav-dropdown { animation: navDropdownIn .16s ease-out; }
@keyframes navDropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { header .nav-user.active .nav-dropdown { animation: none; } }

/* Cabeçalho do perfil: foto + nome + e-mail */
.nav-dropdown-perfil {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.nav-dropdown-avatar {
  width: 46px; height: 46px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid var(--verde); background: var(--verde);
  color: #fff; font-size: 18px; font-weight: 700; text-transform: uppercase;
  overflow: hidden;
}
.nav-dropdown-perfil-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.nav-dropdown-perfil-txt strong {
  font-size: 14.5px; font-weight: 800; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-dropdown-perfil-txt small {
  margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Linhas de coleção / saldo */
header .nav-dropdown-colecao,
header .nav-dropdown-saldo {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px; padding: 10px 12px;
  border: 0; border-radius: 12px;
  background: var(--verde-tint);
  font-size: 12.5px; font-weight: 600; color: var(--ink-mute);
}
header .nav-dropdown-colecao strong,
header .nav-dropdown-saldo strong { color: var(--verde-tx); font-weight: 800; }
header .nav-dropdown-colecao svg,
header .nav-dropdown-saldo svg,
header .nav-dropdown-saldo .nav-saldo-moedas {
  width: 16px; height: 16px; flex: 0 0 16px;
  stroke: var(--verde-tx); stroke-width: 1.9; fill: none;
}
header .nav-dropdown-gratis {
  margin: 0 0 6px; padding: 9px 12px; border-radius: 12px;
  background: var(--verde-tint); color: var(--verde-tx);
}
header .nav-dropdown-gratis svg { stroke: var(--verde-tx); }

/* Itens do menu: mesma altura, ícone alinhado, hover verde suave */
header .nav-dropdown .nav-dropdown-link,
header .nav-dropdown button.nav-dropdown-theme,
header .nav-dropdown button.editar-perfil,
header .nav-dropdown button.sair {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 44px; margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font: 600 14px/1.2 'Inter', sans-serif;
  text-align: left; text-decoration: none;
}
header .nav-dropdown .nav-dropdown-link,
header .nav-dropdown button.nav-dropdown-theme,
header .nav-dropdown button.editar-perfil { color: var(--ink) !important; }
header .nav-dropdown .nav-dropdown-link:hover,
header .nav-dropdown button.nav-dropdown-theme:hover,
header .nav-dropdown button.editar-perfil:hover { background: var(--verde-tint) !important; }
header .nav-dropdown .nav-dropdown-link svg,
header .nav-dropdown button.nav-dropdown-theme svg,
header .nav-dropdown button.editar-perfil svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  stroke: var(--verde-tx) !important; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
header .nav-dropdown .nav-dropdown-link { border: 1px solid transparent; }
header .nav-dropdown hr.nav-dropdown-sep { margin: 6px 4px; border-top: 1px solid var(--line); }

/* Sair */
header .nav-dropdown button.sair { color: var(--danger) !important; }
header .nav-dropdown button.sair:hover { background: color-mix(in srgb, var(--danger) 10%, transparent) !important; }
header .nav-dropdown button.sair svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* Foco por teclado */
header .nav-dropdown :is(a, button):focus-visible,
header .nav-user-btn:focus-visible { outline: 2px solid var(--verde-tx); outline-offset: 2px; }

/* ===== 4) Menu de baixo — Início · Histórico · Conta · Comunidade ===== */
/* Home logada (.hl-nav): fixo embaixo em QUALQUER largura (antes só aparecia até 600px). */
html.usuario-logado .hl-nav {
  position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0;
  display: flex;
}
/* Itens: estilo-base que antes só existia dentro do @media (max-width:600px) do index.css */
html.usuario-logado .hl-nav-item {
  display: flex; flex-direction: column; align-items: center;
  border: 0; background: transparent !important; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.usuario-logado .hl-nav-item svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 601px) {
  html.usuario-logado .hl-nav {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(520px, 100%);
    border: 1px solid var(--line); border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -6px 24px rgba(46, 31, 23, .10);
  }
}

/* Páginas internas (ajuda, contato, marketplace, termos, privacidade): mesmo menu, montado pelo header-full.js */
.nav-baixo {
  position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0;
  display: flex; align-items: stretch; justify-content: space-around;
  height: calc(72px + env(safe-area-inset-bottom, 0px));
  padding: 0 2px env(safe-area-inset-bottom, 0px);
  background: #fff; border-top: 1px solid var(--line);
}
:root[data-theme="dark"] .nav-baixo { background: #2E1F17; }
.nav-baixo a,
.nav-baixo button {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  margin: 0; padding: 0; border: 0; background: transparent !important;
  color: var(--ink-mute) !important;
  font: 700 11px/1 'Manrope', 'Inter', sans-serif; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nav-baixo svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-baixo a:hover, .nav-baixo button:hover,
.nav-baixo .ativo { color: var(--verde-tx) !important; }
body.tem-nav-baixo { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 601px) {
  .nav-baixo {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(520px, 100%);
    border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -6px 24px rgba(46, 31, 23, .10);
  }
}

/* Páginas internas: botão da conta igual ao da home logada (só foto + saldo) */
body.tem-nav-baixo header .nav-name,
body.tem-nav-baixo header .nav-colecao-pill,
body.tem-nav-baixo header .nav-chevron { display: none; }
body.tem-nav-baixo header .nav-user-btn { padding: 4px; border: 0 !important; }

/* Teclado aberto (campo de texto em foco): o menu de baixo some para não subir junto com o teclado (marcado pelo theme.js) */
html.teclado-aberto .hl-nav,
html.teclado-aberto .nav-baixo { display: none !important; }

/* Cabeçalho estilo app: [sino] [foto] [créditos]. Nome, valor da coleção e seta ficam fora do topo (a coleção fica dentro do menu da conta). */
header .nav-user-btn .nav-name,
header .nav-user-btn .nav-colecao-pill,
header .nav-user-btn .nav-chevron { display: none !important; }
header .nav-user-btn { padding: 3px 4px 3px 3px; gap: 6px; border: 0 !important; background: transparent !important; }
header .nav-user-btn .nav-saldo-pill { display: inline-flex !important; align-items: center; }
#header-auth-area { display: flex; align-items: center; gap: 4px; }

/* Sino de notificações (à esquerda da foto) */
header .nav-sino {
  position: relative; flex: 0 0 auto;
  display: grid; place-items: center; width: 38px; height: 38px; min-width: 0; min-height: 0;
  margin: 0; padding: 0; border: 0 !important; border-radius: 50%; box-shadow: none;
  background: transparent !important; color: var(--ink) !important; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-sino svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
header .nav-sino:hover { background: var(--verde-tint) !important; }
.nav-sino:focus-visible { outline: 2px solid var(--verde-tx); outline-offset: 2px; }
.nav-sino-badge {
  position: absolute; top: -1px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-grid; place-items: center; box-sizing: border-box;
  border-radius: 999px; background: var(--danger, #c0392b); color: #fff;
  font: 800 9.5px/1 'Inter', sans-serif; border: 2px solid var(--bg, #fff); box-sizing: content-box;
  pointer-events: none;
}
.nav-sino-badge[hidden] { display: none; }

/* ===== Dropdown menor (v7) ===== */
header .nav-dropdown {
  top: calc(100% + 8px); width: 210px; padding: 5px; border-radius: 14px;
  box-shadow: 0 12px 30px rgba(46, 31, 23, .20);
}
.nav-dropdown-perfil { gap: 9px; padding: 6px 6px 9px; margin-bottom: 4px; }
.nav-dropdown-avatar { width: 34px; height: 34px; font-size: 14px; }
.nav-dropdown-perfil-txt strong { font-size: 13px; }
.nav-dropdown-perfil-txt small { font-size: 11px; margin-top: 1px; }
header .nav-dropdown-colecao,
header .nav-dropdown-saldo { gap: 6px; margin: 0 0 4px; padding: 7px 9px; border-radius: 9px; font-size: 11.5px; }
header .nav-dropdown-saldo { display: none; } /* os créditos já aparecem no topo, ao lado da foto */
header .nav-dropdown-colecao svg { width: 14px; height: 14px; flex-basis: 14px; }
header .nav-dropdown-gratis { margin: 0 0 4px; padding: 7px 9px; border-radius: 9px; font-size: 11px; }
header .nav-dropdown .nav-dropdown-link,
header .nav-dropdown button.nav-dropdown-theme,
header .nav-dropdown button.editar-perfil,
header .nav-dropdown button.sair {
  gap: 9px; min-height: 34px; padding: 7px 9px; border-radius: 9px; font-size: 12.5px;
}
header .nav-dropdown .nav-dropdown-link svg,
header .nav-dropdown button.nav-dropdown-theme svg,
header .nav-dropdown button.editar-perfil svg,
header .nav-dropdown button.sair svg { width: 15px; height: 15px; flex-basis: 15px; }
header .nav-dropdown hr.nav-dropdown-sep { margin: 4px 3px; }

/* Menu de baixo da home: NUNCA aparece para visitante (sem login). O index.css o exibia no celular sem checar o login. */
html:not(.usuario-logado) .hl-nav,
html:not(.usuario-logado) .nav-baixo { display: none !important; }

/* ===== Controles da conta no MOBILE — mesmo visual do desktop (desktop-duostone.css, ≥960px) =====
   Sino em cartão arredondado + pílula branca com borda/sombra, foto, créditos e seta.
   Fica aqui (e não no desktop-duostone.css) porque este arquivo é carregado também nas páginas internas. */
@media (max-width: 959px) {
  #header-auth-area { gap: 8px; }

  #header-auth-area .nav-sino {
    width: 42px; height: 42px;
    border: 1px solid var(--line-strong, rgba(46, 31, 23, .16)) !important;
    border-radius: 14px;
    background: var(--card, #fff) !important;
    box-shadow: 0 2px 8px rgba(46, 31, 23, .06);
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }

  #header-auth-area .nav-user-btn {
    min-height: 46px;
    gap: 8px;
    padding: 4px 12px 4px 4px !important;
    border: 1px solid var(--line-strong, rgba(46, 31, 23, .16)) !important;
    border-radius: 999px;
    background: var(--card, #fff) !important;
    box-shadow: 0 2px 8px rgba(46, 31, 23, .06);
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }

  #header-auth-area .nav-user-btn .nav-saldo-pill {
    padding: 6px 10px;
    border-radius: 999px;
  }

  /* Seta desenhada em CSS (a .nav-chevron em SVG continua escondida) */
  #btn-nav-user-toggle::after {
    width: 7px; height: 7px;
    margin: -4px 1px 0 2px;
    border-right: 1.7px solid var(--ink-mute, #6B5B4E);
    border-bottom: 1.7px solid var(--ink-mute, #6B5B4E);
    content: '';
    transform: rotate(45deg);
    transition: transform .16s ease, margin-top .16s ease;
  }
  #header-auth-area .nav-user.active #btn-nav-user-toggle::after {
    margin-top: 4px;
    transform: rotate(225deg);
  }

  /* Conta aberta: mesmo destaque verde do desktop */
  #header-auth-area .nav-user.active .nav-user-btn {
    border-color: rgba(35, 80, 72, .38) !important;
    background: rgba(35, 80, 72, .045) !important;
    box-shadow: 0 5px 14px rgba(35, 80, 72, .12);
  }

  #header-auth-area .nav-sino:focus-visible,
  #header-auth-area .nav-user-btn:focus-visible {
    outline: 3px solid rgba(35, 80, 72, .38);
    outline-offset: 2px;
  }
  #header-auth-area .nav-sino:active,
  #header-auth-area .nav-user-btn:active {
    transform: scale(.97);
  }
}

/* Hover só onde existe mouse (no toque o hover "gruda" depois do clique) */
@media (max-width: 959px) and (hover: hover) {
  #header-auth-area .nav-sino:hover {
    border-color: rgba(35, 80, 72, .38) !important;
    background: rgba(35, 80, 72, .07) !important;
    box-shadow: 0 5px 14px rgba(35, 80, 72, .12);
  }
  #header-auth-area .nav-user-btn:hover {
    border-color: rgba(35, 80, 72, .38) !important;
    background: rgba(35, 80, 72, .045) !important;
    box-shadow: 0 5px 14px rgba(35, 80, 72, .12);
  }
}

/* Telas bem estreitas: encolhe um pouco pra caber ao lado do logo e do botão de histórico */
@media (max-width: 380px) {
  #header-auth-area { gap: 6px; }
  #header-auth-area .nav-sino { width: 38px; height: 38px; border-radius: 12px; }
  #header-auth-area .nav-user-btn { min-height: 42px; gap: 6px; padding: 3px 10px 3px 3px !important; }
  #header-auth-area .nav-user-btn .nav-saldo-pill { padding: 5px 8px; font-size: 11px; }
}

@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  #header-auth-area .nav-sino,
  #header-auth-area .nav-user-btn,
  #btn-nav-user-toggle::after { transition: none; }
}