@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.site-header {
  width: 100%;
  height: 72px;
  flex: 0 0 72px;
  background: rgba(4, 14, 27, .97);
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #eef6ff;
  position: relative;
  z-index: 1000;
}

.site-header-inner {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 8px 22px;
}

.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  color: #4ca5ff;
}

.brand-mark svg {
  width: 43px;
  height: 43px;
}

.brand-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.1;
}

.brand-subtitle {
  margin-top: 4px;
  color: #8ea7c2;
  font-size: 11px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(86,157,224,.24);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}

.site-nav a {
  color: #9ab4ce;
  text-decoration: none;
  padding: 8px 11px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a.active {
  color: #fff;
  background: #3295f5;
}

.user-area {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(86,157,224,.4);
  border-radius: 50%;
  background: #15395b;
  color: #8bc7ff;
  cursor: pointer;
  font-weight: 800;
}

.header-icon-button.info {
  background: #17395d;
  color: #73baff;
  font-size: 17px;
}

.header-icon-button:hover {
  background: #3295f5;
  color: #fff;
}

@media (max-width: 1050px) {
  .site-header-inner {
    grid-template-columns: 1fr auto;
  }

  .site-nav {
    display: none;
  }
}

@media (max-width: 650px) {
  .site-header-inner {
    padding: 8px 12px;
  }

  .brand-subtitle {
    display: none;
  }

  .brand-title {
    font-size: 14px;
  }

  .brand-mark,
  .brand-mark svg {
    width: 36px;
    height: 36px;
  }
}


.mobile-nav-drawer {
  position: fixed;
  inset: 72px 0 0;
  z-index: 2000;
}
.mobile-nav-drawer[hidden] { display: none !important; }
.mobile-nav-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}
.mobile-nav-panel {
  position: absolute; top: 10px; right: 10px;
  width: min(300px, calc(100% - 20px));
  padding: 10px;
  border: 1px solid rgba(86,157,224,.32);
  border-radius: 16px;
  background: rgba(5,20,36,.98);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.mobile-nav-title {
  padding: 8px 10px 10px; color: #78b9f6; font-size: 10px;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.mobile-nav-panel button {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 13px 12px; margin: 3px 0; border: 1px solid transparent;
  border-radius: 10px; background: transparent; color: #d9eaff;
  text-align: left; cursor: pointer; font-size: 13px; font-weight: 700;
}
.mobile-nav-panel button:hover, .mobile-nav-panel button:active {
  background: rgba(50,149,245,.16); border-color: rgba(86,157,224,.3);
}
.mobile-nav-panel button span { flex: 1; }
@media (min-width: 651px) { .mobile-nav-drawer { display: none !important; } }
@media (max-width: 650px) {
  .site-header-inner { grid-template-columns: minmax(0,1fr) auto; }
  .user-area { gap: 5px; }
  .header-icon-button { width: 34px; height: 34px; }
  .header-icon-button.menu { display: inline-grid; place-items: center; }
}

/* Navegação compacta: o menu hambúrguer é exclusivo do mobile. */
.header-icon-button.menu { display: none; }
@media (max-width: 650px) {
  .header-icon-button.menu { display: inline-grid; place-items: center; }
}

/* Menu global: somente em telas pequenas. */
.header-icon-button.menu { display: none !important; }
@media (max-width: 650px) {
  .header-icon-button.menu { display: inline-grid !important; place-items: center; }
}