/*
 * Fonte global — Fira Sans
 * Aplicada no body e em elementos de formulário que não herdam.
 */

body,
input,
button,
select,
textarea,
optgroup,
.btn,
.form-control,
.form-select {
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Elementos que ficam monoespaçados por padrão continuam */
code,
pre,
kbd,
samp,
var,
tt {
  font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "Courier New", monospace;
}

/* ============================================================
   BARRAS DE ADESÃO (home)
   ============================================================ */

.barra-adesao {
  position: relative;
  width: 100%;
  height: 36px;
  background: #e5e7eb;      /* cinza da base */
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.barra-adesao-preenchimento {
  height: 100%;
  background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 100%);
  border-radius: 999px 0 0 999px;
  transition: width 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  min-width: 0;
}

.barra-adesao-preenchimento--pos {
  background: linear-gradient(90deg, #059669 0%, #10b981 100%);
}

.barra-adesao-texto {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Em telas pequenas: menos altura, texto menor, padding menor */
@media (max-width: 576px) {
  .barra-adesao {
    height: 30px;
  }

  .barra-adesao-preenchimento {
    padding-right: 8px;
  }

  .barra-adesao-texto {
    font-size: 11px;
  }
}

/* Se o preenchimento for muito pequeno (< 20%), o texto sai */
.barra-adesao-preenchimento[style*="width: 0%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 1%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 2%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 3%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 4%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 5%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 6%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 7%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 8%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 9%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 10%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 11%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 12%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 13%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 14%"] .barra-adesao-texto,
.barra-adesao-preenchimento[style*="width: 15%"] .barra-adesao-texto {
  /* Reduz ainda mais a fonte em barras curtas */
  font-size: 10px;
}

.card-atalho {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-atalho:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================
   MAPA DE EGRESSOS — layout geral
   ============================================================ */

.mapa-egressos { padding: 2rem 1rem; }
.mapa-egressos__header h1 { margin: 0 0 .25rem; font-size: 1.75rem; }
.mapa-egressos__header p  { margin: 0 0 1rem; color: #666; }

.mapa-egressos__filtros {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  align-items: center;
}

.mapa-egressos__botao {
  padding: .5rem 1rem;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: .9rem;
  white-space: nowrap;
}
.mapa-egressos__botao.is-ativo {
  background: #1e3f70;
  color: #fff;
  border-color: #1e3f70;
}

.mapa-egressos__filtros select {
  padding: .5rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  min-width: 220px;
  max-width: 100%;
}

/* Container do mapa — altura fluida entre 320 e 720px,
   acompanhando a viewport. O ResizeObserver do JS cuida
   de redimensionar o canvas do MapLibre quando muda. */
.mapa-egressos__mapa {
  width: 100%;
  height: clamp(320px, 60vh, 720px);
  min-height: 320px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f7fa;
  border: 1px solid #e5e7eb;
  position: relative;
}

.mapa-egressos__legenda {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  font-size: .85rem;
  color: #444;
}
.mapa-egressos__faixa { display: flex; align-items: center; gap: .4rem; }
.mapa-egressos__faixa i {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

/* ============================================================
   MAPA DE EGRESSOS — responsividade
   ============================================================ */

/* Tablet */
@media (max-width: 992px) {
  .mapa-egressos__mapa {
    height: clamp(300px, 55vh, 500px);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .mapa-egressos__filtros {
    flex-direction: column;
    align-items: stretch;
  }
  .mapa-egressos__botao {
    width: 100%;
    text-align: center;
  }
  .mapa-egressos__filtros select {
    width: 100%;
    min-width: 0;
  }
  .mapa-egressos__mapa {
    height: 400px;
    min-height: 320px;
  }
  .mapa-egressos__legenda {
    gap: .5rem;
    font-size: .75rem;
  }
  .mapa-egressos__faixa i {
    width: 14px;
    height: 14px;
  }

  /* Move os controles do MapLibre (zoom +/−) pro canto inferior
     direito pra não cobrir os botões de escala no topo */
  .mapa-egressos__mapa .maplibregl-ctrl-top-right {
    top: auto;
    bottom: 10px;
    right: 10px;
  }
}

/* Mobile pequeno */
@media (max-width: 480px) {
  .mapa-egressos__mapa {
    height: 340px;
  }
  .mapa-egressos__legenda {
    font-size: .7rem;
  }
}

/* Celular em landscape — altura limitada pela viewport */
@media (max-height: 500px) and (orientation: landscape) {
  .mapa-egressos__mapa {
    height: 70vh;
    min-height: 240px;
  }
}