/* Header — dropdowns do usuário logado no portal PÚBLICO (conta + mensagens).
   Hidratados por header-auth.js a partir do endpoint não-cacheável auth-state.
   Classes semânticas próprias: o tailwind-built.css é purgado e NÃO varre as
   strings montadas no cliente, então o estilo precisa morar aqui. Dark mode
   co-locado (html.dark), na rampa carvão-neutro. Paleta clara = slate, igual ao
   restante do header público. */

/* ===================== Trigger de conta (avatar) ===================== */
.vnv-acct {
  display: inline-flex;
}

.vnv-acct__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #475569; /* slate-600 */
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.vnv-acct__trigger:hover {
  color: #0f172a; /* slate-900 */
}

.vnv-acct__trigger:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.35);
  outline-offset: 2px;
}

.vnv-acct__chevron {
  color: #94a3b8; /* slate-400 */
}

/* ===================== Avatar (foto ou iniciais) ===================== */
.vnv-acct__avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 9999px;
  background: #1e293b; /* slate-800 */
}

.vnv-acct__avatar--lg {
  width: 2.5rem;
  height: 2.5rem;
}

.vnv-acct__avatar-initials {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.vnv-acct__avatar--lg .vnv-acct__avatar-initials {
  font-size: 0.875rem;
}

.vnv-acct__avatar-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vnv-acct__avatar-img.is-shown {
  display: block;
}

.vnv-acct__avatar.has-photo .vnv-acct__avatar-initials {
  display: none;
}

/* ===================== Painel flutuante (compartilhado) ===================== */
.vnv-pop {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  min-width: 15rem;
  padding: 0.5rem 0;
  z-index: 60;
  background: #fff;
  border: 1px solid #e2e8f0; /* slate-200 */
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px -10px rgba(2, 6, 23, 0.25), 0 2px 8px -4px rgba(2, 6, 23, 0.15);
}

.vnv-pop.is-open {
  display: block;
}

.vnv-pop--chat {
  min-width: 19rem;
}

/* Abre no HOVER em desktop — paridade com o dropdown do my.*. A abertura/fecho
   é orquestrada no header-auth.js (mouseenter/mouseleave do wrapper) convergindo
   no MESMO .is-open do clique/teclado — NÃO numa regra CSS de `display` paralela:
   uma regra `.vnv-acct:hover` (especificidade 0,3,0) venceria `.vnv-pop.is-open`
   (0,2,0) e mataria o clique-para-fechar enquanto o ponteiro está sobre o trigger.
   Em touch o JS desliga o hover no primeiro toque (sticky-hover em híbridos). A
   bridge transparente cobre o vão de 0.5rem (margin-top) para o ponteiro ir do
   trigger ao painel sem o mouseleave do wrapper disparar no caminho. */
@media (hover: hover) and (pointer: fine) {
  .vnv-pop::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.5rem;
    height: 0.5rem;
  }
}

.vnv-pop__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
}

.vnv-pop__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
}

/* ===================== Cabeçalho do dropdown de conta ===================== */
.vnv-acct__head {
  margin-bottom: 0.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f1f5f9; /* slate-100 */
}

.vnv-acct__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
}

/* ===================== Itens do menu de conta ===================== */
.vnv-acct__item,
.vnv-acct__logout {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 0;
  background: transparent;
  font-size: 0.875rem;
  color: #334155; /* slate-700 */
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.vnv-acct__item:hover {
  background: #f8fafc; /* slate-50 */
  color: #0f172a;
}

.vnv-acct__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: #94a3b8; /* slate-400 */
}

.vnv-acct__item-icon svg {
  width: 100%;
  height: 100%;
}

.vnv-acct__item-label {
  min-width: 0;
}

.vnv-acct__divider {
  height: 1px;
  margin: 0.25rem 0;
  background: #f1f5f9; /* slate-100 */
}

.vnv-acct__logout {
  font-weight: 700;
  color: #dc2626; /* red-600 */
}

.vnv-acct__logout:hover {
  background: #fef2f2; /* red-50 */
}

.vnv-acct__logout .vnv-acct__item-icon {
  color: #dc2626;
}

.js-acct-logout-form {
  margin: 0;
}

/* ===================== Mensagens / inbox (estático, marcação) ===================== */
.vnv-chat {
  display: inline-flex;
}

.vnv-chat__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #475569; /* slate-600 */
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.vnv-chat__trigger:hover {
  color: #0f172a;
  background: #f8fafc;
}

.vnv-chat__trigger:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.35);
  outline-offset: 2px;
}

.vnv-chat__dot {
  position: absolute;
  right: 0.375rem;
  top: 0.375rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: #38bdf8; /* sky-400 */
}

.vnv-pop--chat .vnv-pop__head {
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
}

.vnv-chat__badge {
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #0284c7; /* sky-600 */
  background: #e0f2fe; /* sky-100 */
}

.vnv-chat__body {
  padding: 0.25rem 0;
}

.vnv-chat__row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  opacity: 0.55; /* dimmed: é marcação, não conteúdo real */
}

.vnv-chat__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: #e2e8f0; /* slate-200 */
  color: #64748b; /* slate-500 */
}

.vnv-chat__row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vnv-chat__row-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
}

.vnv-chat__row-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: #64748b;
}

.vnv-chat__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding: 0.625rem 0.875rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.75rem;
  color: #64748b;
}

.vnv-chat__foot svg {
  flex-shrink: 0;
  color: #94a3b8;
}

/* ===================== Notificações (sino — feed real hidratado) ===================== */
.vnv-notif {
  display: inline-flex;
}

.vnv-notif__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #475569; /* slate-600 */
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.vnv-notif__trigger:hover {
  color: #0f172a;
  background: #f8fafc;
}

.vnv-notif__trigger:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.35);
  outline-offset: 2px;
}

/* Badge de não-lidas — pílula vermelha sobre o sino (paridade com o my.*). O
   estado base é display:inline-flex; como regra de autor vence o UA `[hidden]`,
   é preciso forçar o esconde quando o atributo `hidden` está presente. */
.vnv-notif__badge {
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #dc2626; /* red-600 */
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

.vnv-notif__badge[hidden] {
  display: none;
}

.vnv-pop--notif {
  min-width: 20rem;
}

/* Mobile estreito: o sino e a conta vivem no cluster mobile, ancorados `right:0`
   a um trigger que NÃO fica colado na borda direita (conta + burger ficam à
   direita do sino). Larguras de 15–20rem transbordariam a viewport pela ESQUERDA
   em telas < ~430px (iPhones/Androids comuns). Aqui fixamos os painéis às bordas
   da tela, logo abaixo do header sticky (h-16 = 4rem). O chat é desktop-only, não
   entra. `top:100%` do base viraria 100% da viewport sob position:fixed — por isso
   o `top` é redefinido. A ponte de hover (::before) é @media hover (desktop), some. */
@media (max-width: 30rem) {
  .vnv-pop--notif,
  .vnv-pop--acct {
    position: fixed;
    top: 4.25rem;
    left: 0.75rem;
    right: 0.75rem;
    min-width: 0;
    margin-top: 0;
  }
}

.vnv-notif__head {
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
}

.vnv-notif__all {
  font-size: 0.75rem;
  color: #0284c7; /* sky-600 */
  text-decoration: none;
}

.vnv-notif__all:hover {
  color: #0369a1; /* sky-700 */
  text-decoration: underline;
}

.vnv-notif__list {
  max-height: 20rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.vnv-notif__item {
  display: block;
  padding: 0.625rem 0.875rem;
  border-top: 1px solid #f1f5f9;
}

.vnv-notif__item:first-child {
  border-top: 0;
}

.vnv-notif__item.is-unread {
  background: rgba(2, 132, 199, 0.06); /* leve tom sky p/ não-lidas */
}

.vnv-notif__item-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0f172a;
}

.vnv-notif__item-msg {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: #64748b; /* slate-500 */
}

.vnv-notif__item-time {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: #94a3b8; /* slate-400 */
}

.vnv-notif__empty {
  margin: 0;
  padding: 1.25rem 0.875rem;
  text-align: center;
  font-size: 0.8125rem;
  color: #64748b;
}

/* ===================== Botões de auth (estado deslogado) ===================== */
.vnv-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.vnv-auth-btn:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.35);
  outline-offset: 2px;
}

.vnv-auth-btn--solid {
  color: #fff;
  background: #030712; /* gray-950 — primária da marca */
}

.vnv-auth-btn--solid:hover {
  background: #1f2937; /* gray-800 */
}

/* ============================ Dark mode (carvão neutro) ============================ */
html.dark .vnv-acct__trigger {
  color: #cbd5e1; /* slate-300 */
}

html.dark .vnv-acct__trigger:hover {
  color: #fff;
}

html.dark .vnv-acct__avatar {
  background: #334155;
}

html.dark .vnv-chat__trigger {
  color: #cbd5e1;
}

html.dark .vnv-chat__trigger:hover {
  color: #fff;
  background: #1f1f1f;
}

/* Anel de foco de teclado precisa de contraste contra o fundo carvão (#0d0d0d):
   o near-black do tema claro some no escuro. Branco-gelo garante >=3:1 (WCAG 2.4.7). */
html.dark .vnv-acct__trigger:focus-visible,
html.dark .vnv-chat__trigger:focus-visible {
  outline-color: rgba(248, 250, 252, 0.65);
}

html.dark .vnv-pop {
  background: #161616;
  border-color: #2a2a2a;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}

html.dark .vnv-pop__title,
html.dark .vnv-acct__name {
  color: #f1f5f9;
}

html.dark .vnv-acct__head,
html.dark .vnv-acct__divider,
html.dark .vnv-chat__foot,
html.dark .vnv-pop--chat .vnv-pop__head {
  border-color: #2a2a2a;
}

html.dark .vnv-acct__divider {
  background: #2a2a2a;
}

html.dark .vnv-acct__item {
  color: #cbd5e1;
}

html.dark .vnv-acct__item:hover {
  background: #1f1f1f;
  color: #fff;
}

html.dark .vnv-acct__item-icon {
  color: #64748b;
}

html.dark .vnv-acct__logout {
  color: #f87171; /* red-400 */
}

html.dark .vnv-acct__logout:hover {
  background: rgba(248, 113, 113, 0.12);
}

html.dark .vnv-acct__logout .vnv-acct__item-icon {
  color: #f87171;
}

html.dark .vnv-chat__badge {
  color: #7dd3fc;
  background: rgba(125, 211, 252, 0.12);
}

html.dark .vnv-chat__avatar {
  background: #2a2a2a;
  color: #94a3b8;
}

html.dark .vnv-chat__row-name {
  color: #cbd5e1;
}

html.dark .vnv-chat__row-snippet,
html.dark .vnv-chat__foot {
  color: #94a3b8;
}

/* --- Notificações no escuro --- */
html.dark .vnv-notif__trigger {
  color: #cbd5e1;
}

html.dark .vnv-notif__trigger:hover {
  color: #fff;
  background: #1f1f1f;
}

html.dark .vnv-notif__trigger:focus-visible {
  outline-color: rgba(248, 250, 252, 0.65);
}

html.dark .vnv-notif__head,
html.dark .vnv-notif__item {
  border-color: #2a2a2a;
}

html.dark .vnv-notif__all {
  color: #7dd3fc; /* sky-300 */
}

html.dark .vnv-notif__all:hover {
  color: #bae6fd;
}

html.dark .vnv-notif__item.is-unread {
  background: rgba(125, 211, 252, 0.08);
}

html.dark .vnv-notif__item-title {
  color: #f1f5f9;
}

html.dark .vnv-notif__item-msg {
  color: #94a3b8;
}

html.dark .vnv-notif__item-time {
  color: #64748b;
}

html.dark .vnv-notif__empty {
  color: #94a3b8;
}

html.dark .vnv-notif__badge {
  background: #ef4444; /* red-500 — sobe meio tom p/ contraste no carvão */
}

/* --- Botões de auth no escuro --- */
html.dark .vnv-auth-btn:focus-visible {
  outline-color: rgba(248, 250, 252, 0.65);
}

html.dark .vnv-auth-btn--solid {
  /* gray-950 some no carvão (#0d0d0d): invertemos p/ pílula clara, texto escuro. */
  color: #0d0d0d;
  background: #f1f5f9; /* slate-100 */
}

html.dark .vnv-auth-btn--solid:hover {
  background: #cbd5e1; /* slate-300 */
}

/* ============ Drawer mobile no escuro ============
   O drawer (mobile-menu) NÃO é branco no escuro: a camada estática
   public/assets/vnv-dark.css (carregada por último) tematiza .mobile-menu-drawer
   em #0d0d0d e os itens em #171717. Logo os elementos .vnv-* que o header-auth.js
   hidrata nos subpainéis logados devem HERDAR as regras `html.dark .vnv-*` acima
   (texto claro), e NÃO ser reafirmados para a paleta clara. As peças .mm-* próprias
   (cards de conta, logout, "Ver todas", divisor, pílula "Em breve") são tematizadas
   no escuro em public/assets/vnv-dark.css §15g, espelhando .mobile-menu-item. */

/* ===================== Barra do header: itens de 1º nível =====================
   Padroniza a ALTURA e o RECUO LATERAL de todos os controles de 1º nível do
   cluster do header desktop (nav, idioma, tema, auth Entrar/Criar, sino, chat,
   conta). Antes cada item tinha altura própria (28–40px) e padding lateral
   diferente, então o ritmo da barra saía irregular — e o botão de checkout
   (44px) dominava.

   • height: 2.125rem (34px) → a MESMA do checkout (header-cart.css --lg). Com o
     padding vertical zerado e align-items:center, o conteúdo (texto, ícone ou
     avatar) fica centrado e todos os itens ficam idênticos em altura.
   • padding lateral único 0.5rem (8px) → o espaçamento óptico entre itens fica
     homogêneo (cada par tem 8px + gap-1/4px + 8px). Net REDUZ a largura do
     cluster (nav 10→8, auth 12→8), sem risco de overflow no breakpoint lg.

   Escopado em .vnv-hdr-cluster (classe só no cluster `hidden lg:flex` do
   header-nav-desktop): NÃO afeta o cluster mobile (<lg), o drawer, nem os
   dropdowns. Especificidade ≥ (0,2,0) > utilidades Tailwind (0,1,0), então vence
   independente da ordem de carga (importa em checkout/gateway, que carregam o
   app.css do Vite depois deste arquivo). O checkout tem geometria própria
   (largura fixa, altura 38px maior, conteúdo centrado) e fica de fora deste
   recuo E desta altura — é o CTA da barra e destaca-se de propósito. */
.vnv-hdr-cluster #vnv-mega-nav > div > button,
.vnv-hdr-cluster #vnv-mega-nav > div > a,
.vnv-hdr-cluster #lang-dropdown-btn,
.vnv-hdr-cluster .vnv-theme-toggle,
.vnv-hdr-cluster .vnv-auth-btn,
.vnv-hdr-cluster .vnv-notif__trigger,
.vnv-hdr-cluster .vnv-chat__trigger,
.vnv-hdr-cluster .vnv-acct__trigger {
  height: 2.125rem;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

/* CTA "Quer morar no exterior?" no cluster: opta por geometria maior que a
   altura normalizada (2.125rem) acima — um pouco mais alto e largo, p/ destaque
   (como o checkout). Vem DEPOIS da normalização → vence por ordem de fonte. */
.vnv-hdr-cluster .vnv-auth-btn {
  height: 2.375rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Respiro extra à direita SÓ no desktop: separa o seletor de idioma, o toggle
   de tema e o botão de checkout do bloco seguinte, além do gap-1 (4px) base do
   cluster. No #lang-dropdown-btn o margin estende o wrapper .relative
   (fit-content); no toggle e na <a> do checkout aplica direto no flex-item.
   Escopado a .vnv-hdr-cluster → mobile/drawer e o cart do mega-menu de
   imigrantes ficam intactos. */
.vnv-hdr-cluster #lang-dropdown-btn,
.vnv-hdr-cluster .vnv-theme-toggle,
.vnv-hdr-cluster .js-cart-toggle-btn--lg {
  margin-right: 0.5rem;
}

/* ===================== Drawer mobile: LINHA de ícones LOGADOS =====================
   No mobile, o bloco logado replica os MESMOS 3 ícones do header desktop
   (Notificações, Mensagens "em breve", Minha conta) EM LINHA — não mais como
   categorias empilhadas. O wrapper .mm-auth-icons vem .hidden no HTML cacheado e
   header-auth.js troca por .flex (reveal) quando auth-state confirma o login:
   por isso NÃO declaramos `display` aqui (vem do .flex); só o layout dos filhos +
   o divisor inferior que separa os ícones dos cards de navegação. Notificações e
   conta abrem subpainéis (data-panel); Mensagens é inerte ("em breve").
   O tema escuro destas peças vive em public/assets/vnv-dark.css §15g. */
.mm-auth-icons {
  align-items: center;
  justify-content: space-around;
  gap: 0.5rem;
  padding: 0 4px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e2e8f0; /* slate-200 — espelha .mm-acct-head */
}

.mm-auth-icon {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  background: #f1f5f9; /* slate-100 — espelha .mobile-menu-category-icon */
  color: #475569; /* slate-600 */
  cursor: pointer;
  transition: all var(--mm-transition-fast) ease;
}
.mm-auth-icon:hover {
  background: #e2e8f0; /* slate-200 */
  color: #0f172a; /* slate-900 */
}
.mm-auth-icon:active {
  transform: scale(0.97);
}
/* Tamanho do ícone garantido por CSS próprio (não depende de h-6/w-6 sobreviver
   ao purge do tailwind-built.css na superfície pública). */
.mm-auth-icon svg {
  width: 24px;
  height: 24px;
}

/* Mensagens — "em breve": sem data-panel (inerte), aspecto apagado e sem realce. */
.mm-auth-icon--soon,
.mm-auth-icon--soon:hover {
  cursor: default;
  background: #f1f5f9; /* slate-100 — mantém base no hover */
  color: #94a3b8; /* slate-400 */
}

/* Contador de não-lidas: badge no canto do sino (espelha .mm-notif-count, mas
   posicionado absoluto sobre o ícone). Oculto em zero ([hidden]). */
.mm-auth-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #dc2626; /* red-600 — igual a .mm-notif-count */
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.mm-auth-badge[hidden] {
  display: none;
}

/* Ponto "em breve" no ícone de Mensagens (coerente com a pílula .mm-soon-pill). */
.mm-auth-icon-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #38bdf8; /* sky-400 */
}

/* ===================== Drawer mobile: "Mais" achatado ao 1º nível =====================
   Os itens institucionais (Nossa Missão, FAQ, Imprensa, …) deixam de viver no
   subpainel "Mais" (removido) e passam ao painel principal, abaixo dos cards de
   navegação — pedido do Pablo. .mobile-menu-items já dá o layout em coluna;
   .mobile-menu-secondary só adiciona o divisor + respiro acima. */
.mobile-menu-secondary {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0; /* slate-200 */
}