/* ═══════════════════════════════════════════════════════════════
   fita.css — Barra de cores no topo (inspirada na "fita" do site da
   Prefeitura). Usa as cores frias das letras do logotipo "SÃO GONÇALO"
   (tokens --sga-* em tokens.css) mais o roxo da categoria Equipamentos,
   em ordem de espectro. Vermelho, laranja e rosa ficam de fora para não
   competir com o azul predominante do MAPAS. Carregar POR ÚLTIMO no
   index.html, pois desloca o layout fixo de rail_inspector.css.
   Na impressão some sozinha: print.css esconde tudo do body exceto #map.
═══════════════════════════════════════════════════════════════ */

:root {
  --fita-h: 7px;
  --fita-gradient: linear-gradient(90deg,
    var(--sga-amarelo)        0%  16%,
    var(--sga-verde)         21%  37%,
    var(--sga-verde-agua)    42%  58%,
    var(--sga-azul)          63%  79%,
    var(--cat-purple-text)   84% 100%);
}

.mapas-fita {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--fita-h);
  z-index: 1250;          /* acima da rail (1200); overlays ficam por cima */
  pointer-events: none;
  background: var(--fita-gradient);
}

/* Mesma faixa no topo dos painéis "Sobre" e "Visão geral", acompanhando o canto arredondado */
#sobrePanel::before,
.overview-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  border-radius: 16px 16px 0 0;
  background: var(--fita-gradient);
  pointer-events: none;
}

/* ── Desloca o layout fixo para baixo da faixa ── */
.icon-rail,
.sidebar {
  top: var(--fita-h) !important;
}

/* sidebar.css define height: 100vh; com o deslocamento ela passaria 7px
   da base da tela. Sem altura fixa, top + bottom: 0 (rail_inspector.css)
   definem a altura. */
.sidebar {
  height: auto !important;
}

#map {
  top: var(--fita-h);
  height: auto;
}

.right-dock {
  top: calc(14px + var(--fita-h)) !important;
}