/**
 * Politapp — Shell Nav  v15
 * Topbar executivo. Dropdown panels em position:fixed (JS-posicionados).
 */

/* ══════════════════════════════════════════════════
   TOKENS
   ══════════════════════════════════════════════════ */
:root {
  --pn-h:        60px;
  --pn-bg:       rgba(7,16,31,0.82);
  --pn-border:   rgba(59,130,246,0.16);
  --pn-text:     #6d89aa;
  --pn-text-hi:  #eaf2fd;
  --pn-accent:   #3b82f6;
  --pn-accent-2: #22d3ee;
  --pn-violet:   #8b5cf6;
  --pn-gold:     #f59e0b;
  --pn-grad:     linear-gradient(120deg,#3b82f6,#22d3ee 55%,#8b5cf6);
  --pn-dur:      140ms;
  --pn-ease:     cubic-bezier(0.16,1,0.3,1);
}
@media (prefers-reduced-motion: reduce) { :root { --pn-dur: 1ms; } }

/* ══════════════════════════════════════════════════
   CONTEÚDO — empurra abaixo do topbar
   ══════════════════════════════════════════════════ */
body.pn-has-topbar > .wrap,
body.pn-has-topbar > .page,
body.pn-has-topbar > main {
  padding-top: calc(var(--pn-h) + 1.25rem);
}

/* ══════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════ */
.pn-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--pn-h);
  z-index: 900;
  /* Sem backdrop-filter no elemento raiz (cria containing-block) */
}

/* Camada de fundo com blur — em ::before para não criar containing-block */
.pn-topbar::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--pn-bg);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 1px 0 var(--pn-border), 0 4px 32px rgba(0,0,0,0.5);
}

/* Linha de acento gradiente vibrante */
.pn-topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139,92,246,0.5) 20%,
    rgba(59,130,246,0.6) 50%,
    rgba(34,211,238,0.5) 80%,
    transparent
  );
}

/* Barra de progresso de leitura (largura via JS) */
.pn-progress {
  position: fixed;
  top: var(--pn-h); left: 0;
  height: 2px;
  width: 0%;
  z-index: 901;
  background: var(--pn-grad);
  box-shadow: 0 0 12px rgba(59,130,246,0.6);
  transition: width 90ms linear;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .pn-topbar {
    animation: _pn-slide .3s var(--pn-ease);
    animation-fill-mode: none !important;
  }
  @keyframes _pn-slide {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
  }
}

/* Sombra mais forte após rolar */
.pn-topbar.pn-scrolled::before {
  box-shadow: 0 1px 0 var(--pn-border), 0 8px 40px rgba(0,0,0,0.65);
}

/* Inner */
.pn-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: 1rem;
  gap: 0;
}

/* ══════════════════════════════════════════════════
   BRAND
   ══════════════════════════════════════════════════ */
.pn-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .25rem .5rem .25rem .25rem;
  border-radius: 9px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: .5rem;
  transition: background var(--pn-dur) ease;
}
.pn-brand:hover { background: rgba(255,255,255,0.05); }

.pn-brand__icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(59,130,246,0.45));
  transition: transform var(--pn-dur) var(--pn-ease), filter var(--pn-dur) ease;
}
.pn-brand:hover .pn-brand__icon {
  transform: rotate(-6deg) scale(1.08);
  filter: drop-shadow(0 0 10px rgba(139,92,246,0.6));
}
.pn-brand__name {
  background: var(--pn-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pn-brand__name {
  font: 700 1rem/1 "DM Sans", system-ui, sans-serif;
  letter-spacing: -.04em;
  color: #eef4fc;
}

/* ══════════════════════════════════════════════════
   DRAWER — desktop: flex row inline; mobile: painel
   ══════════════════════════════════════════════════ */
.pn-drawer {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 100%;
}

/* ══════════════════════════════════════════════════
   NAV LINKS — desktop
   ══════════════════════════════════════════════════ */
nav.site-nav {
  display: flex !important;
  align-items: center;
  gap: 2px;
  height: 100%;
  padding: 0 .25rem;
  margin: 0 !important;
  font-size: inherit !important;
  list-style: none;
  overflow: visible !important; /* nunca clipar dropdowns */
}

/* Link base */
nav.site-nav > a,
nav.site-nav > details.site-nav-dropdown > summary {
  display: inline-flex !important;
  align-items: center;
  gap: .28rem;
  padding: .38rem .65rem !important;
  border-radius: 7px !important;
  font: 500 .8rem/1 "DM Sans", system-ui, sans-serif !important;
  color: var(--pn-text) !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition:
    color var(--pn-dur) ease,
    background var(--pn-dur) ease,
    border-color var(--pn-dur) ease !important;
  user-select: none;
  list-style: none;
}

nav.site-nav > a:hover,
nav.site-nav > details.site-nav-dropdown > summary:hover {
  color: var(--pn-text-hi) !important;
  background: rgba(255,255,255,0.055) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

nav.site-nav > a[aria-current="page"] {
  position: relative;
  color: #fff !important;
  background: rgba(59,130,246,0.18) !important;
  border-color: rgba(59,130,246,0.4) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 16px rgba(59,130,246,0.25) !important;
}
nav.site-nav > a[aria-current="page"]::after {
  content: '';
  position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px;
  background: var(--pn-grad);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(59,130,246,0.6);
}

/* Remove marker do details */
nav.site-nav > details.site-nav-dropdown {
  list-style: none;
  position: static; /* panel usa position:fixed via JS */
}
nav.site-nav > details.site-nav-dropdown > summary {
  list-style: none;
}
nav.site-nav > details.site-nav-dropdown > summary::-webkit-details-marker,
nav.site-nav > details.site-nav-dropdown > summary::marker { display: none; }

/* Chevron */
nav.site-nav > details.site-nav-dropdown > summary::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .5;
  margin-left: .15rem;
  transition: transform var(--pn-dur) ease, opacity var(--pn-dur) ease;
}
nav.site-nav > details.site-nav-dropdown[open] > summary::after {
  transform: rotate(180deg);
  opacity: 1;
}
nav.site-nav > details.site-nav-dropdown[open] > summary {
  color: var(--pn-text-hi) !important;
  background: rgba(59,130,246,0.12) !important;
  border-color: rgba(59,130,246,0.28) !important;
}

/* ══════════════════════════════════════════════════
   DROPDOWN PANEL — position:fixed via JS
   ══════════════════════════════════════════════════ */
.pn-dd-panel,
.site-nav-dropdown__panel,
.site-nav-dropdown-panel {
  display: none; /* escondido quando não é .pn-dd-panel */
}

/* Quando movido para body via JS e aberto */
body > .pn-dd-panel {
  display: block;
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  background: rgba(5,10,24,0.98);
  border: 1px solid rgba(59,130,246,0.22);
  border-radius: 11px;
  padding: .35rem;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.80),
    0 4px 20px rgba(37,99,235,0.18),
    inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.97);
  transition:
    opacity var(--pn-dur) ease,
    transform var(--pn-dur) var(--pn-ease);
}

body > .pn-dd-panel.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* Linha dourada decorativa */
body > .pn-dd-panel::before {
  content: '';
  display: block;
  height: 2px;
  margin: 0 .4rem .4rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pn-gold), var(--pn-accent), var(--pn-gold));
  opacity: .6;
}

body > .pn-dd-panel a {
  position: relative;
  display: flex !important;
  align-items: center;
  padding: .58rem .85rem !important;
  border-radius: 8px !important;
  font: 500 .82rem/1.3 "DM Sans", system-ui, sans-serif !important;
  color: #6a88a8 !important;
  text-decoration: none !important;
  transition: color var(--pn-dur) ease, background var(--pn-dur) ease, padding-left var(--pn-dur) var(--pn-ease) !important;
  white-space: nowrap;
}
body > .pn-dd-panel a::before {
  content: '';
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 60%;
  border-radius: 3px;
  background: var(--pn-grad);
  transition: transform var(--pn-dur) var(--pn-ease);
}
body > .pn-dd-panel a:hover {
  color: var(--pn-text-hi) !important;
  background: rgba(59,130,246,0.12) !important;
  padding-left: 1rem !important;
}
body > .pn-dd-panel a:hover::before { transform: translateY(-50%) scaleY(1); }
body > .pn-dd-panel a[aria-current="page"] {
  color: var(--pn-accent) !important;
  background: rgba(59,130,246,0.12) !important;
}

/* ══════════════════════════════════════════════════
   TOGGLE HAMBURGER
   ══════════════════════════════════════════════════ */
.pn-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px; height: 38px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: background var(--pn-dur) ease, border-color var(--pn-dur) ease;
}
.pn-toggle:hover {
  background: rgba(59,130,246,0.12);
  border-color: rgba(59,130,246,0.30);
}
.pn-toggle span {
  display: block;
  width: 100%; height: 2px;
  background: var(--pn-text-hi);
  border-radius: 2px;
  transform-origin: center;
  transition: transform var(--pn-dur) var(--pn-ease), opacity var(--pn-dur) ease;
}
.pn-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pn-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.pn-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════
   BACKDROP
   ══════════════════════════════════════════════════ */
.pn-backdrop {
  display: none;
  position: fixed; inset: 0;
  z-index: 800;
  background: rgba(2,5,14,0.75);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.pn-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════
   MOBILE  ≤ 768px
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pn-toggle   { display: flex; }
  .pn-backdrop { display: block; }

  /* Drawer mobile: painel fullscreen abaixo do topbar */
  .pn-drawer {
    position: fixed !important;
    top: var(--pn-h) !important;
    left: 0 !important; right: 0 !important;
    height: calc(100dvh - var(--pn-h)) !important;
    background: rgba(4,8,20,0.99) !important;
    border-top: 1px solid rgba(59,130,246,0.14) !important;
    display: block !important;
    overflow-y: auto !important;
    z-index: 850 !important;
    /* fechado */
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
    transition: opacity .2s ease, transform .24s var(--pn-ease);
  }
  .pn-drawer.is-open {
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* Nav mobile: lista vertical */
  nav.site-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    padding: 1rem .75rem 2rem !important;
    gap: 3px !important;
    overflow: visible !important;
  }

  nav.site-nav > a,
  nav.site-nav > details.site-nav-dropdown > summary {
    padding: .78rem 1rem !important;
    font-size: .9rem !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.025) !important;
  }
  nav.site-nav > a:hover,
  nav.site-nav > details.site-nav-dropdown > summary:hover {
    background: rgba(59,130,246,0.10) !important;
    border-color: rgba(59,130,246,0.22) !important;
    color: var(--pn-text-hi) !important;
  }
  nav.site-nav > a[aria-current="page"] {
    background: rgba(59,130,246,0.22) !important;
    border-color: rgba(59,130,246,0.40) !important;
    color: #fff !important;
  }

  /* Dropdown no mobile: painel fixed posicionado via JS */
  body > .pn-dd-panel {
    position: fixed !important;
    left: 1rem !important;
    right: 1rem !important;
    width: auto !important;
    min-width: 0 !important;
    top: calc(var(--pn-h) + .5rem) !important;
    z-index: 9999 !important;
  }
}

/* ══════════════════════════════════════════════════
   FALLBACK SEM JS
   ══════════════════════════════════════════════════ */
body:not(.pn-has-topbar) nav.site-nav[aria-label] {
  display: flex !important;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .6rem 1rem;
  background: var(--pn-bg);
  border-bottom: 1px solid var(--pn-border);
  margin: 0 !important;
}
body:not(.pn-has-topbar) nav.site-nav[aria-label] a {
  display: inline-flex !important;
  padding: .35rem .7rem !important;
  border-radius: 7px !important;
  font: 500 .8rem "DM Sans", system-ui, sans-serif !important;
  color: var(--pn-text) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  text-decoration: none !important;
}
body:not(.pn-has-topbar) nav.site-nav[aria-label] a[aria-current="page"] {
  color: #fff !important;
  background: rgba(59,130,246,0.20) !important;
  border-color: rgba(59,130,246,0.40) !important;
}

/* ══════════════════════════════════════════════════
   DESKTOP MÉDIO  769px – 1100px
   ══════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1100px) {
  .pn-inner { padding-inline: .5rem; gap: 0; }
  .pn-brand { margin-right: .25rem; }
  .pn-brand__name { display: none; } /* só ícone em viewport estreito */

  nav.site-nav { gap: 1px; overflow-x: auto; scroll-snap-type: x mandatory; }
  nav.site-nav::-webkit-scrollbar { display: none; }
  nav.site-nav { scrollbar-width: none; }

  nav.site-nav > a,
  nav.site-nav > details.site-nav-dropdown > summary {
    font-size: .72rem !important;
    padding: .32rem .48rem !important;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

/* Botão "Sair" no menu — leve tom de saída */
nav.site-nav > a.pn-logout { color: #f0a8a8 !important; cursor: pointer; }
nav.site-nav > a.pn-logout:hover {
  color: #fff !important;
  background: rgba(239,68,68,0.16) !important;
  border-color: rgba(239,68,68,0.35) !important;
}

/* Compatibilidade com seletores antigos */
.politapp-topbar  { display: none; }
.politapp-nav-drawer { display: none; }
.politapp-nav-backdrop { display: none; }

/* UX refresh: navegação clara, sóbria e organizada por contexto. */
:root {
  --pn-h: 64px;
  --pn-bg: rgba(5, 13, 27, .94);
  --pn-text: #b1bfd0;
  --pn-text-hi: #f8fafc;
}
.pn-topbar::after,
.pn-progress { display: none; }
.pn-topbar::before {
  border-bottom: 1px solid rgba(148, 163, 184, .16);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
}
.pn-inner { max-width: 1440px; margin-inline: auto; width: 100%; }
.pn-brand__icon { filter: none; }
.pn-brand__name {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #f8fafc;
}
nav.site-nav { margin-left: auto !important; justify-content: flex-end; }
nav.site-nav > a,
nav.site-nav > details.site-nav-dropdown > summary {
  min-height: 40px;
  padding: .55rem .7rem !important;
  font-size: .82rem !important;
  color: var(--pn-text) !important;
}
nav.site-nav > a[aria-current="page"],
nav.site-nav > details.site-nav-dropdown > summary[aria-current="page"] {
  color: #fff !important;
  background: rgba(96, 165, 250, .13) !important;
  border-color: rgba(96, 165, 250, .32) !important;
  box-shadow: none !important;
}
nav.site-nav > a[aria-current="page"]::after { content: none; }
nav.site-nav > a.pn-login {
  margin-left: .35rem;
  color: #fff !important;
  border-color: rgba(96,165,250,.45) !important;
  background: rgba(37,99,235,.28) !important;
}
body > .pn-dd-panel {
  background: rgba(5, 13, 27, .985);
  border-color: rgba(148, 163, 184, .2);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
body > .pn-dd-panel::before { content: none; }
body > .pn-dd-panel a { color: #b5c2d3 !important; }
body > .pn-dd-panel a:hover,
body > .pn-dd-panel a[aria-current="page"] {
  color: #fff !important;
  background: rgba(96,165,250,.12) !important;
  padding-left: .85rem !important;
}
@media (max-width: 768px) {
  .pn-brand__name { display: inline; }
  .pn-drawer { background: rgba(5, 13, 27, .995) !important; }
  nav.site-nav { justify-content: flex-start; padding: 1rem !important; }
  nav.site-nav > a,
  nav.site-nav > details.site-nav-dropdown > summary {
    min-height: 48px;
    padding: .85rem 1rem !important;
    font-size: .95rem !important;
  }
  nav.site-nav > a.pn-login { margin: .5rem 0 0; justify-content: center; }
  body > .pn-dd-panel { max-height: min(55vh, 420px); overflow-y: auto; }
}