/* Terra V6 — topbar global, busca progressiva e controles contextuais do mapa. */

:root {
  --top-bar-height: 54px !important;
  --topbar-v6-height: 54px;
  --topbar-v6-pad: 16px;
  --topbar-v6-control: 40px;
  --topbar-v6-radius: 9px;
}

/* A altura visual nao depende do token publicado: o JavaScript mede a barra e
   atualiza --top-bar-height para manter mapa e controles sempre alinhados. */
.top-bar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  height: var(--topbar-v6-height) !important;
  min-height: var(--topbar-v6-height) !important;
  padding: 0 var(--topbar-v6-pad) !important;
  background: var(--v5-chrome-ink, #ffffff) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--v5-hairline, rgba(26, 43, 35, 0.12)) !important;
  box-shadow: 0 2px 9px rgba(26, 43, 35, 0.065) !important;
  z-index: 1200 !important;
}

.top-bar::after {
  display: none !important;
}

.top-bar-left,
.top-bar-right,
.top-bar-buttons,
.top-bar-action-group {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.top-bar-left {
  grid-column: 1 !important;
  justify-self: start !important;
  gap: 18px !important;
}

.top-bar-right {
  grid-column: 3 !important;
  justify-self: end !important;
}

.top-bar-right,
.top-bar-buttons {
  gap: 8px !important;
}

.top-bar-action-group {
  gap: 7px !important;
}

/* Marca sem card, sombra ou moldura concorrendo com a navegacao. */
.top-bar .logo {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.top-bar .logo-mark {
  width: 92px !important;
  height: 34px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.top-bar .logo:hover .logo-mark {
  box-shadow: none !important;
  transform: none !important;
}

.top-bar .logo-mark-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Navegacao textual com estado ativo por sublinhado. */
.top-nav-tabs {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 1px !important;
  min-width: 0 !important;
  height: var(--topbar-v6-control) !important;
  padding: 0 !important;
  overflow: visible !important;
  isolation: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.top-nav-tabs::before,
.top-nav-tabs::after,
.top-nav-tab::before {
  display: none !important;
}

.top-nav-tab,
.top-nav-tabs .top-nav-tab {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 64px !important;
  height: var(--topbar-v6-control) !important;
  min-height: var(--topbar-v6-control) !important;
  padding: 0 11px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--v5-text-soft, rgba(26, 43, 35, 0.68)) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.top-nav-tab:hover:not(.is-active) {
  background: var(--v5-surface-hover, #f2f6f4) !important;
  color: var(--v5-text, #1a2b23) !important;
}

.top-nav-tab.is-active,
.top-nav-tab[aria-selected="true"] {
  background: transparent !important;
  color: var(--v5-accent-on-white, #007d68) !important;
  box-shadow: none !important;
}

.top-nav-tab.is-active::after,
.top-nav-tab[aria-selected="true"]::after {
  content: "" !important;
  position: absolute !important;
  left: 11px !important;
  right: 11px !important;
  bottom: 1px !important;
  display: block !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--v5-accent-on-white, #007d68) !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Busca progressiva: apenas o acionador ocupa a barra ate o usuario pedir. */
.map-search-control {
  position: relative !important;
  inset: auto !important;
  grid-column: 2 !important;
  justify-self: center !important;
  z-index: 1 !important;
  display: block !important;
  width: 40px !important;
  min-width: 0 !important;
  transform: none !important;
  transition: width 180ms ease !important;
}

.map-search-control[data-search-expanded="true"] {
  width: clamp(420px, 38vw, 560px) !important;
}

.top-bar .map-search-control[data-search-expanded="true"] {
  flex: 0 0 clamp(420px, 38vw, 560px) !important;
  width: clamp(420px, 38vw, 560px) !important;
}

body:not([data-app-view="map"]) .map-search-control {
  display: none !important;
}

.search-disclosure-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 40px !important;
  height: var(--topbar-v6-control) !important;
  min-height: var(--topbar-v6-control) !important;
  padding: 0 !important;
  background: var(--v5-accent-on-white, #007d68) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 89, 74, 0.16) !important;
}

.search-disclosure-btn span {
  display: none !important;
}

.search-disclosure-btn:hover,
.search-disclosure-btn:focus-visible {
  background: #006554 !important;
}

.topbar-search-panel {
  width: 100% !important;
}

.search-disclosure-btn[hidden],
.topbar-search-panel[hidden] {
  display: none !important;
}

.map-search-control .search-group {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 2px !important;
  overflow: hidden !important;
  background: var(--v5-surface-solid, #ffffff) !important;
  border: 1px solid var(--v5-hairline-strong, rgba(26, 43, 35, 0.22)) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(26, 43, 35, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.map-search-control .search-group:hover,
.map-search-control .search-group:focus-within {
  border-color: rgba(0, 125, 104, 0.52) !important;
  box-shadow: 0 0 0 3px rgba(0, 125, 104, 0.1), 0 5px 16px rgba(26, 43, 35, 0.11) !important;
}

.map-search-control .search-mode-select {
  width: 100% !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 26px 0 10px !important;
  background-color: var(--v5-surface-hover, #f2f6f4) !important;
  border: 0 !important;
  border-right: 1px solid var(--v5-hairline, rgba(26, 43, 35, 0.12)) !important;
  border-radius: 7px 0 0 7px !important;
  color: var(--v5-text, #1a2b23) !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
}

.map-search-control .search-input,
.map-search-control .search-group input.search-input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--v5-text, #1a2b23) !important;
  font-size: 13.5px !important;
  line-height: 36px !important;
}

.map-search-control .search-input::placeholder {
  color: var(--v5-text-soft, rgba(26, 43, 35, 0.68)) !important;
  opacity: 1 !important;
}

.map-search-control .search-submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 82px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  background: var(--v5-accent-on-white, #007d68) !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

.map-search-control .search-submit-btn:hover {
  background: #006554 !important;
  transform: none !important;
}

.map-search-control .search-icon {
  color: inherit !important;
}

/* O seletor de escopo existe visualmente apenas para admin/master. */
.topbar-scope:not([hidden]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 188px !important;
  min-width: 188px !important;
  height: var(--topbar-v6-control) !important;
  padding: 0 9px !important;
  background: var(--v5-surface-hover, #f2f6f4) !important;
  border: 1px solid var(--v5-hairline, rgba(26, 43, 35, 0.12)) !important;
  border-radius: var(--topbar-v6-radius) !important;
  color: var(--v5-text, #1a2b23) !important;
}

.topbar-scope-icon {
  flex: 0 0 auto !important;
  color: var(--v5-accent-on-white, #007d68) !important;
  font-size: 12px !important;
}

.topbar-scope-copy {
  display: grid !important;
  grid-template-rows: auto auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  gap: 0 !important;
}

.topbar-scope-caption {
  color: rgba(26, 43, 35, 0.64) !important;  /* faint dava 2.2:1, ilegivel */
  font-size: 9px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.topbar-scope .auth-client-select,
.topbar-scope:not([hidden]) .auth-client-select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 21px !important;
  min-height: 21px !important;
  padding: 0 19px 0 0 !important;
  overflow: hidden !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--v5-text, #1a2b23) !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 21px !important;
  text-overflow: ellipsis !important;
}

/* Mini-card da conta: identidade legivel sem competir com o escopo. */
.top-btn-account,
.auth-userbar:not([hidden]) + .top-bar-action-group .top-btn-account {
  display: inline-grid !important;
  grid-template-columns: 30px minmax(0, auto) !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: 8px !important;
  width: auto !important;
  min-width: 124px !important;
  max-width: 190px !important;
  height: var(--topbar-v6-control) !important;
  min-height: var(--topbar-v6-control) !important;
  padding: 4px 10px 4px 4px !important;
  border-radius: var(--topbar-v6-radius) !important;
  background: var(--v5-surface-hover, #f2f6f4) !important;
  border: 1px solid var(--v5-hairline, rgba(26, 43, 35, 0.12)) !important;
  box-shadow: none !important;
  color: var(--v5-text, #1a2b23) !important;
}

.top-btn-account-initials {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: var(--v5-accent-on-white, #007d68) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  letter-spacing: 0.02em !important;
}

.top-btn-account-copy {
  display: grid !important;
  min-width: 0 !important;
  max-width: 134px !important;
  text-align: left !important;
  line-height: 1.1 !important;
}

.top-btn-account-copy strong,
.top-btn-account-copy small {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.top-btn-account-copy strong {
  color: var(--v5-text, #1a2b23) !important;
  font-size: 11.5px !important;
  font-weight: 720 !important;
}

.top-btn-account-copy small {
  color: rgba(26, 43, 35, 0.64) !important;  /* faint dava 2.2:1, ilegivel */
  font-size: 8.5px !important;
  font-weight: 650 !important;
}

.top-btn-account:hover,
.top-btn-account[aria-expanded="true"] {
  background: var(--v5-surface-solid, #ffffff) !important;
  border-color: rgba(0, 125, 104, 0.38) !important;
  color: var(--v5-text, #1a2b23) !important;
}

.account-menu-panel {
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: calc(100vw - 24px) !important;
  padding: 8px !important;
  border-radius: 12px !important;
}

.account-menu-item {
  min-height: 42px !important;
  border-radius: 8px !important;
}

/* Filtros a esquerda; relatorio/detalhes e mapa base a direita. */
.map-filter-control {
  top: calc(var(--top-bar-height) + 14px) !important;
  left: 16px !important;
  right: auto !important;
}

.map-basemap-control {
  top: calc(var(--top-bar-height) + 14px) !important;
  right: 16px !important;
}

.map-context-actions {
  position: fixed !important;
  top: calc(var(--top-bar-height) + 14px) !important;
  left: auto !important;
  right: 76px !important;
  z-index: 1002 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.map-context-actions .map-inspector-eye {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  background: var(--v5-surface-solid, #ffffff) !important;
  border: 1px solid var(--v5-hairline, rgba(26, 43, 35, 0.12)) !important;
  border-radius: var(--topbar-v6-radius) !important;
  box-shadow: 0 2px 10px rgba(26, 43, 35, 0.12) !important;
  color: var(--v5-text, #1a2b23) !important;
  cursor: pointer !important;
}

/* Estava em superficie clara + verde (#007d68) do tema antigo: com `has-details`
   ligado o botao virava uma pilula verde-clara e o rotulo sumia sobre o mapa. */
.map-context-actions .map-inspector-eye:hover,
.map-context-actions .map-inspector-eye[aria-pressed="true"],
.map-context-actions .map-inspector-eye.has-details {
  background: var(--map-glass-bg-hover, rgba(29, 52, 84, 0.90)) !important;
  border-color: var(--map-glass-border-strong, rgba(126, 176, 255, 0.55)) !important;
  color: var(--map-glass-text, #eef4fd) !important;
}

.map-context-actions .map-inspector-eye[aria-pressed="true"] i,
.map-context-actions .map-inspector-eye.has-details i {
  color: var(--map-glass-accent, #8fbaff) !important;
}

.map-context-actions .map-inspector-eye:disabled {
  display: none !important;
}

.map-context-actions .top-btn-report {
  border-radius: var(--topbar-v6-radius) !important;
  box-shadow: 0 2px 10px rgba(26, 43, 35, 0.12) !important;
}

/* REMOVIDO: bloco `html[data-site-theme="night"]` que pintava
   .search-mode-select / .topbar-scope / .top-btn-account / .map-inspector-eye
   com `--v5-surface-hover` (um token CLARO, resto do tema branco).
   Para .search-mode-select, .top-btn-account e .map-inspector-eye ele ja era
   sobrescrito depois; sobrava so o .topbar-scope, que no tema noite virava uma
   barra branca com o <select> filho ainda em texto claro — o seletor de cliente
   ficava invisivel. Sem o bloco, os tres temas usam a mesma superficie navy. */

@media (min-width: 761px) and (max-width: 1280px) {
  .top-bar {
    gap: 8px !important;
  }

  .top-bar-left {
    gap: 8px !important;
  }

  .top-bar .logo-mark {
    width: 78px !important;
  }

  .top-nav-tab,
  .top-nav-tabs .top-nav-tab {
    min-width: 56px !important;
    padding: 0 8px !important;
  }

  .map-search-control[data-search-expanded="true"] {
    width: clamp(320px, 34vw, 430px) !important;
  }

  .topbar-scope:not([hidden]) {
    width: 164px !important;
    min-width: 164px !important;
  }

  .top-btn-account,
  .auth-userbar:not([hidden]) + .top-bar-action-group .top-btn-account {
    grid-template-columns: 30px !important;
    min-width: 40px !important;
    width: 40px !important;
    padding: 4px !important;
  }

  .top-btn-account-copy {
    display: none !important;
  }
}

@media (max-width: 760px) {
  :root {
    --top-bar-height: 54px !important;
    --topbar-v6-pad: 8px;
    --topbar-v6-control: 40px;
  }

  .top-bar {
    grid-template-columns: minmax(0, 1fr) 40px 40px !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    column-gap: 5px !important;
    row-gap: 5px !important;
    height: auto !important;
    min-height: 54px !important;
    padding: 7px var(--topbar-v6-pad) !important;
  }

  .top-bar-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
    gap: 3px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .top-bar-right,
  .top-bar-buttons {
    display: contents !important;
  }

  .top-bar-action-group {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .top-bar .logo-mark {
    width: 54px !important;
    height: 30px !important;
  }

  .top-nav-tabs {
    flex: 1 1 auto !important;
    height: 40px !important;
  }

  .top-nav-tab,
  .top-nav-tabs .top-nav-tab {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 4px !important;
    font-size: 9.5px !important;
  }

  .top-nav-tab.is-active::after,
  .top-nav-tab[aria-selected="true"]::after {
    left: 5px !important;
    right: 5px !important;
  }

  .map-search-control,
  .map-search-control[data-search-expanded="true"] {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 40px !important;
  }

  .top-bar .map-search-control[data-search-expanded="true"] {
    flex-basis: 40px !important;
    width: 40px !important;
  }

  .search-disclosure-btn {
    width: 40px !important;
    padding: 0 !important;
  }

  .search-disclosure-btn span {
    display: none !important;
  }

  .topbar-search-panel {
    position: fixed !important;
    top: calc(var(--top-bar-height) + 8px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    z-index: 1201 !important;
  }

  .map-search-control .search-group {
    grid-template-columns: 78px minmax(0, 1fr) 40px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 3px !important;
    border-radius: 11px !important;
    box-shadow: 0 10px 28px rgba(26, 43, 35, 0.2) !important;
  }

  .map-search-control .search-mode-select,
  .map-search-control .search-input,
  .map-search-control .search-group input.search-input[type="text"],
  .map-search-control .search-submit-btn {
    height: 40px !important;
    min-height: 40px !important;
  }

  .map-search-control .search-mode-select {
    padding-left: 8px !important;
    font-size: 9.5px !important;
  }

  .map-search-control .search-input,
  .map-search-control .search-group input.search-input[type="text"] {
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .map-search-control .search-submit-btn {
    width: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
  }

  .search-submit-label {
    display: none !important;
  }

  .topbar-scope:not([hidden]) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
  }

  .top-btn-account,
  .auth-userbar:not([hidden]) + .top-bar-action-group .top-btn-account {
    grid-template-columns: 30px !important;
    width: 40px !important;
    min-width: 40px !important;
    padding: 4px !important;
  }

  .top-btn-account-copy {
    display: none !important;
  }

  .account-menu-panel {
    position: fixed !important;
    top: calc(var(--top-bar-height) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 360px !important;
    max-height: calc(100dvh - var(--top-bar-height) - 20px) !important;
    margin-left: auto !important;
    overflow: auto !important;
  }

  .map-filter-control,
  .map-basemap-control,
  .map-context-actions {
    top: calc(var(--top-bar-height) + 12px) !important;
  }

  .map-filter-control {
    left: 12px !important;
  }

  .map-basemap-control {
    right: 12px !important;
  }

  .map-context-actions {
    right: 72px !important;
    gap: 6px !important;
  }

  .map-context-actions .top-btn-report {
    max-width: 148px !important;
    padding: 0 11px !important;
  }

  .map-context-actions .top-btn-report .top-btn-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.has-filter-sidebar-open .map-filter-control,
  body.has-filter-sidebar-open .map-context-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.has-search-open .map-filter-control,
  body.has-search-open .map-basemap-control,
  body.has-search-open .map-context-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 480px) {
  .map-context-actions .map-inspector-eye {
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
  }

  .map-context-actions .map-inspector-eye-label {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-nav-tab,
  .map-search-control,
  .map-search-control .search-group,
  .map-search-control .search-submit-btn {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PASSE VISUAL — degrade elegante, botoes glass e tipografia maior.
   ═══════════════════════════════════════════════════════════════════ */
.top-bar {
  /* branco -> nevoa verde da marca, quase imperceptivel mas com vida */
  background:
    linear-gradient(180deg, #ffffff 0%, #f6faf8 62%, #eef6f2 100%) !important;
  border-bottom: 1px solid rgba(20, 62, 52, 0.14) !important;
  box-shadow: 0 4px 18px rgba(18, 45, 37, 0.07) !important;
}

/* Controles da topbar em glass: translucidos, com blur do degrade por baixo */
.search-group,
.tour-launch-btn,
.auth-userbar:not([hidden]) .auth-client-select,
.auth-client-select,
.topbar-scope-select,
.top-bar .map-inspector-eye {
  background: rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(20, 62, 52, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(14px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
}

.search-group:hover,
.search-group:focus-within,
.tour-launch-btn:hover,
.auth-client-select:hover,
.topbar-scope-select:hover {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(0, 125, 104, 0.38) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   AJUSTE FINO — grid 2 colunas (busca migrou p/ direita), logo maior,
   abas em toggle glass e botao de conta legivel.
   ═══════════════════════════════════════════════════════════════════ */

/* Busca saiu da coluna central: agora sao 2 blocos (esquerda | direita). */
.top-bar {
  grid-template-columns: auto 1fr !important;
}
.top-bar-right {
  grid-column: 2 !important;
  /* stretch (nao end): o container ocupa a faixa 1fr inteira e alinha o
     conteudo a direita por dentro. Com "end" ele encolhia abaixo do conteudo
     e o botao de conta vazava para fora da viewport. */
  justify-self: stretch !important;
  justify-content: flex-end !important;
}

/* Logo com mais presenca */
.top-bar .logo-mark {
  width: 122px !important;
  height: 44px !important;
}

/* Abas: pilula de vidro segmentada */
.top-nav-tabs {
  gap: 3px !important;
  height: 40px !important;
  padding: 3px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(20, 62, 52, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
}

.top-nav-tabs .top-nav-tab {
  min-width: 74px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  color: rgba(23, 53, 45, 0.72) !important;
  background: transparent !important;
  transition: background 140ms ease, color 140ms ease !important;
}

.top-nav-tabs .top-nav-tab:hover:not(.is-active) {
  background: rgba(0, 125, 104, 0.08) !important;
  color: #17352d !important;
}

.top-nav-tabs .top-nav-tab.is-active,
.top-nav-tabs .top-nav-tab[aria-selected="true"] {
  color: #ffffff !important;
  background: #007d68 !important;
  box-shadow: 0 2px 8px rgba(0, 125, 104, 0.28) !important;
}

/* O indicador de sublinhado nao faz sentido no toggle segmentado. */
.top-nav-tab.is-active::after,
.top-nav-tab[aria-selected="true"]::after {
  display: none !important;
}

/* Botao de conta: nome e cargo legiveis */
.top-btn-account {
  height: 40px !important;
  padding: 0 12px 0 6px !important;
  gap: 9px !important;
}
.top-btn-account-copy strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}
.top-btn-account-copy small {
  font-size: 11px !important;
  line-height: 1.1 !important;
}

/* O cluster da direita nao deve encolher: ha espaco de sobra na faixa, e o
   encolhimento comprimia os containers abaixo do botao de conta (nowrap),
   empurrando-o para fora da viewport. */
.top-bar-buttons,
.top-bar-action-group,
.account-menu,
.search-container,
.topbar-scope {
  flex: 0 0 auto !important;
}

/* Nome/cargo da conta com teto de largura + reticencias, por seguranca em
   nomes longos ou viewports estreitas. */
.top-btn-account-copy {
  min-width: 0 !important;
  max-width: 150px !important;
}
.top-btn-account-copy strong,
.top-btn-account-copy small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TITANIUM GLASS — topbar translucida, abas com indicador deslizante animado,
   controles arredondados. Passe autoritativo (carrega por ultimo).
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --nav-navy: 113, 118, 126;
  --nav-accent: 210, 215, 221;
  --nav-text: #f8fafc;
  --nav-text-soft: rgba(245, 247, 250, 0.78);
  --nav-active-text: #263039;
  --nav-topbar-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.04) 62%, rgba(0, 0, 0, 0.08) 100%);
  --nav-topbar-border: rgba(255, 255, 255, 0.28);
  --nav-topbar-shadow: 0 5px 18px rgba(31, 37, 45, 0.20);
  --nav-tabs-bg: rgba(255, 255, 255, 0.06);
  --nav-tabs-border: rgba(255, 255, 255, 0.12);
  --nav-tabs-sheen: rgba(255, 255, 255, 0.08);
  --nav-control-bg: rgba(255, 255, 255, 0.08);
  --nav-control-border: rgba(255, 255, 255, 0.14);
  --nav-control-sheen: rgba(255, 255, 255, 0.08);
  --nav-control-hover-bg: rgba(var(--nav-accent), 0.28);
  --nav-control-hover-border: rgba(126, 176, 255, 0.5);
  --nav-control-hover-text: #ffffff;
  --nav-search-panel-bg: rgba(255, 255, 255, 0.10);
  --nav-search-panel-border: rgba(255, 255, 255, 0.16);
  --nav-search-field-bg: rgba(255, 255, 255, 0.08);
  --nav-logo-shadow: 0 2px 10px rgba(4, 12, 26, 0.28);
}

.top-bar {
  /* Cor base vem do token do tema (navy, distinto por tema — o teste de temas
     confere que muda). O gradiente sutil por cima da profundidade glass. */
  background-color: var(--top-bar-bg, #122442) !important;
  background-image: var(--nav-topbar-gradient) !important;
  border-bottom: 1px solid var(--nav-topbar-border) !important;
  box-shadow: var(--nav-topbar-shadow) !important;
}

/* ─── Abas: pilula de vidro + indicador deslizante ─────────────────── */
.top-nav-tabs {
  position: relative !important;
  gap: 0 !important;
  padding: 4px !important;
  border-radius: 13px !important;
  background: var(--nav-tabs-bg) !important;
  border: 1px solid var(--nav-tabs-border) !important;
  box-shadow: inset 0 1px 0 var(--nav-tabs-sheen) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Indicador que desliza para a aba ativa (--app-active-index vem do JS). */
.top-nav-tabs::before {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  left: 4px !important;
  width: calc((100% - 8px) / var(--app-visible-tabs, 3)) !important;
  transform: translateX(calc(var(--app-active-index, 0) * 100%)) !important;
  background: linear-gradient(180deg, rgba(var(--nav-accent), 0.92), rgba(var(--nav-accent), 0.76)) !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 8px rgba(35, 42, 50, 0.22) !important;
  transition: transform 300ms cubic-bezier(0.34, 1.2, 0.5, 1) !important;
  display: block !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.top-nav-tabs .top-nav-tab {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 0 !important;
  min-width: 82px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 18px !important;
  border-radius: 9px !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  color: var(--nav-text-soft) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 200ms ease !important;
}
.top-nav-tabs .top-nav-tab:hover:not(.is-active) { color: var(--nav-text) !important; background: transparent !important; }
.top-nav-tabs .top-nav-tab.is-active,
.top-nav-tabs .top-nav-tab[aria-selected="true"] {
  color: var(--nav-active-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.top-nav-tab.is-active::after,
.top-nav-tab[aria-selected="true"]::after { display: none !important; }

/* ─── Controles glass sobre a navy ─────────────────────────────────── */
.search-container .search-disclosure-btn,
.tour-launch-btn,
.auth-userbar:not([hidden]) .auth-client-select,
.auth-client-select,
.topbar-scope,
.top-btn-account,
.top-bar .map-inspector-eye {
  background: var(--nav-control-bg) !important;
  border: 1px solid var(--nav-control-border) !important;
  color: var(--nav-text) !important;
  box-shadow: inset 0 1px 0 var(--nav-control-sheen) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  border-radius: 999px !important;
}

.search-container .search-disclosure-btn:hover,
.tour-launch-btn:hover,
.auth-client-select:hover,
.topbar-scope:hover,
.top-btn-account:hover {
  background: var(--nav-control-hover-bg) !important;
  border-color: var(--nav-control-hover-border) !important;
  color: var(--nav-control-hover-text) !important;
}

/* "Buscar": pilula arredondada, lupa maior, texto legivel */
.search-container .search-disclosure-btn {
  height: 40px !important;
  width: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  font-weight: 650 !important;
}
.search-container .search-disclosure-btn i { font-size: 15px !important; color: var(--nav-text) !important; }

/* Painel de busca expandido */
.topbar-search-panel .search-group {
  background: var(--nav-search-panel-bg) !important;
  border: 1px solid var(--nav-search-panel-border) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.topbar-search-panel .search-input { color: var(--nav-text) !important; }
.topbar-search-panel .search-input::placeholder { color: var(--nav-text-soft) !important; }
.topbar-search-panel .search-mode-select { color: var(--nav-text) !important; background: var(--nav-search-field-bg) !important; }

/* Escopo e conta: textos claros */
.topbar-scope-caption { color: rgba(214, 227, 247, 0.6) !important; }
.topbar-scope-icon { color: rgba(143, 186, 255, 1) !important; }
.auth-client-select { color: var(--nav-text) !important; }
.auth-client-select option { color: #17324a !important; background: #ffffff !important; }
.top-btn-account-copy strong { color: var(--nav-text) !important; }
.top-btn-account-copy small { color: var(--nav-text-soft) !important; }

/* Circulo das iniciais: acento navy solido */
.top-btn-account-initials {
  color: #ffffff !important;
  background: rgba(var(--nav-accent), 0.9) !important;
  border-radius: 999px !important;
  width: 30px !important; height: 30px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}

/* Reduz movimento: sem deslize */
@media (prefers-reduced-motion: reduce) {
  .top-nav-tabs::before { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   TITANIUM GLASS — correcoes de especificidade (prefixo .top-bar vence as
   regras compostas canonicas) + logo legivel sobre cada tema.
   ═══════════════════════════════════════════════════════════════════ */
.top-bar .search-container .search-disclosure-btn,
.top-bar .tour-launch-btn,
.top-bar .auth-userbar:not([hidden]) .auth-client-select,
.top-bar .auth-client-select,
.top-bar .topbar-scope,
.top-bar .top-bar-action-group .top-btn-account,
.top-bar .top-btn-account {
  background: var(--nav-control-bg) !important;
  border: 1px solid var(--nav-control-border) !important;
  color: var(--nav-text) !important;
  box-shadow: inset 0 1px 0 var(--nav-control-sheen) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
}

.top-bar .search-container .search-disclosure-btn:hover,
.top-bar .tour-launch-btn:hover,
.top-bar .auth-client-select:hover,
.top-bar .topbar-scope:hover,
.top-bar .top-bar-action-group .top-btn-account:hover,
.top-bar .top-btn-account:hover {
  background: var(--nav-control-hover-bg) !important;
  border-color: var(--nav-control-hover-border) !important;
  color: var(--nav-control-hover-text) !important;
}

/* Logo ganha um chip claro para nao sumir sobre o navy. */
.top-bar .logo-mark {
  background: rgba(255, 255, 255, 0.94) !important;
  border-radius: 11px !important;
  padding: 4px 10px !important;
  box-shadow: var(--nav-logo-shadow) !important;
  width: auto !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.top-bar .logo-mark-image { width: auto !important; height: 30px !important; }

/* Conta: ID vence as regras orfas de irmao-adjacente do v5-polish (0,4,0). */
#authAccountMenuBtn {
  background: var(--nav-control-bg) !important;
  border: 1px solid var(--nav-control-border) !important;
  color: var(--nav-text) !important;
}
#authAccountMenuBtn:hover,
#authAccountMenuBtn[aria-expanded="true"] {
  background: var(--nav-control-hover-bg) !important;
  border-color: var(--nav-control-hover-border) !important;
}

/* Iniciais da conta: o azul rgba(90,140,220,.9) dava 3.82:1 com texto branco.
   #3a68b4 sobe para 5.5:1 mantendo a familia navy. */
#authAccountMenuLabel,
.top-btn-account-initials {
  background: #3a68b4 !important;
  color: #ffffff !important;
}

/* Legenda "Escopo" e cargo da conta: eram 3.94:1 e 4.36:1. */
.topbar-scope-caption {
  color: rgba(226, 236, 252, 0.86) !important;
}
.top-btn-account-copy small {
  color: rgba(226, 236, 252, 0.88) !important;
}

/* O bloco visual desktop acima precisa terminar antes do contrato responsivo.
   Assim nenhuma largura minima tardia volta a empurrar a terceira aba para
   fora do cabecalho em telas estreitas. */
@media (max-width: 760px) {
  :root {
    --top-bar-height: 60px !important;
    --topbar-v6-control: 44px !important;
  }

  .top-bar {
    grid-template-columns: minmax(0, 1fr) 44px 44px !important;
    min-height: var(--top-bar-height) !important;
    column-gap: 4px !important;
    padding: 8px !important;
  }

  .top-bar-left {
    min-width: 0 !important;
    gap: 3px !important;
    overflow: visible !important;
  }

  .top-bar .logo {
    flex: 0 0 58px !important;
    width: 58px !important;
    min-width: 58px !important;
    overflow: hidden !important;
  }

  .top-bar .logo-mark {
    width: 58px !important;
    min-width: 58px !important;
    height: 36px !important;
    padding: 3px 6px !important;
  }

  .top-bar .logo-mark-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .top-nav-tabs {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .top-nav-tabs::before {
    top: 2px !important;
    bottom: 2px !important;
    left: 2px !important;
    width: calc((100% - 4px) / var(--app-visible-tabs, 3)) !important;
  }

  .top-nav-tabs .top-nav-tab {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 2px !important;
    font-size: 9.5px !important;
  }

  .map-search-control,
  .map-search-control[data-search-expanded="true"],
  .top-bar .map-search-control[data-search-expanded="true"],
  .search-container .search-disclosure-btn,
  .top-btn-account,
  #authAccountMenuBtn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}