/* ─── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { background: transparent; font-family: 'Segoe UI', Arial, sans-serif; }

/* ─── Variáveis ────────────────────────────────────────────────────────────── */
:root {
  --blue-1:       #e8f0f8;
  --blue-2:       #b8cfe8;
  --blue-3:       #5a8db8;
  --blue-4:       #1e5f8e;
  --blue-5:       #0d3b6e;
  --blue-hover:   #f0a500;
  --label-text:   #1a3a5c;
  --label-bg:     rgba(255,255,255,0.95);
  --label-border: rgba(30,95,142,0.30);
  --pin-color:    #E85454;
  --pin-stroke:   #ffffff;
  --panel-bg:     #ffffff;
  --shadow-sm:    0 1px 4px rgba(13,59,110,0.14);
  --shadow-md:    0 4px 16px rgba(13,59,110,0.20);
  --transition:   0.18s ease;
  --label-radius: 4px;
}

/* ─── Container ─────────────────────────────────────────────────────────────── */
#infographic-container {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

/* ─── SVG principal ─────────────────────────────────────────────────────────── */
#map-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── Overlay de labels (cobre o SVG proporcionalmente) ─────────────────────── */
#labels-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ─── Label individual ──────────────────────────────────────────────────────── */
.label-item {
  position: absolute;
  background: var(--label-bg);
  border: 1px solid var(--label-border);
  border-radius: var(--label-radius);
  padding: 3px 5px 4px;
  text-align: center;
  cursor: pointer;
  pointer-events: all;
  box-shadow: var(--shadow-sm);
  line-height: 1.25;
  overflow: hidden;
  transition: border-color var(--transition),
              background   var(--transition),
              box-shadow   var(--transition);
  z-index: 3;
}

.label-item:hover,
.label-item.hovered {
  background: #fff9e6;
  border-color: var(--blue-hover);
  box-shadow: 0 2px 8px rgba(240,165,0,0.25);
  z-index: 10;
  overflow: visible;
}

.label-title {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--label-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label-complemento {
  font-size: 8px;
  font-style: italic;
  color: #4a6a8a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label-cargos {
  font-size: 8.5px;
  color: #2a5272;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label-item:hover .label-title,
.label-item:hover .label-complemento,
.label-item:hover .label-cargos,
.label-item.hovered .label-title,
.label-item.hovered .label-complemento,
.label-item.hovered .label-cargos {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* ─── Pins PNG ───────────────────────────────────────────────────────────────── */

/* Grupo externo: só translate no atributo SVG — nunca recebe CSS transform */
.pin-group {
  cursor: pointer;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.35));
  transition: filter var(--transition);
}
.pin-group:hover {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.50));
}

/* Grupo interno: escala 1.25× no hover, ancorando na ponta (transform-origin bottom) */
.pin-inner {
  transition: transform var(--transition);
  transform-box: fill-box;
  transform-origin: 50% 100%;  /* bottom-center = tip do pin */
}
.pin-inner.pin-hovered,
.pin-group:hover .pin-inner {
  transform: scale(1.25);
}

/* Hitbox transparente — única fonte de eventos, tamanho fixo sem scale */
.pin-hitbox {
  fill: transparent;
  stroke: none;
}

/* Ícone nacional como img */
.national-icon {
  width: 22px;
  height: auto;
  flex-shrink: 0;
  display: block;
}

/* ─── Bloco Nacional — grade de labels + posicionamento dinâmico ─────────────── */
#national-block {
  position: relative;   /* habilita z-index */
  z-index: 5;           /* pinta sobre #infographic-container (z-index: auto) */
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 12px 12px;
  background: #d6eaf8;  /* mesma cor do oceano do mapa — blenda ao subir */
  transition: margin-top 0.25s ease;
}
#national-block.hidden { display: none; }

/* Cabeçalho com ícone + título */
.national-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.national-icon {
  width: 20px;
  height: 26px;
  color: var(--blue-4);
  flex-shrink: 0;
}

.national-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Grade de labels: flui da esquerda pra direita, quebra linha quando necessário */
.national-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: flex-start;
  align-content: flex-start;
}

/* Labels nacionais: mesmo visual dos labels do mapa, tamanho fixo consistente */
.national-label {
  position: static !important;   /* override do position:absolute do label-item */
  width: auto !important;         /* deixa o flex determinar */
  min-width: 90px;
  max-width: 160px;
  flex-shrink: 0;
  pointer-events: all;
}

@media (max-width: 768px) {
  #national-block { max-width: 100%; }
  .national-label { min-width: 80px; max-width: 130px; }
}

/* ─── Painel expandido ───────────────────────────────────────────────────────── */
.panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.22);
  z-index: 100; cursor: pointer;
}
.panel-overlay.hidden { display: none; }

.expanded-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  background: var(--panel-bg);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  z-index: 200;
  overflow-y: auto;
  padding: 14px 14px 12px;
}
.expanded-panel.hidden  { display: none; }
.expanded-panel.visible { display: block; }

.panel-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none;
  font-size: 13px; color: #8a9ab0; cursor: pointer;
  padding: 2px 5px; border-radius: 50%;
  transition: color var(--transition), background var(--transition);
}
.panel-close:hover { color: var(--blue-5); background: var(--blue-1); }

/* Cabeçalho */
.panel-header { margin-bottom: 9px; padding-right: 18px; }

.panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-5);
  line-height: 1.3;
}
.panel-inst-nome {
  font-size: 11px;
  color: #4a6a8a;
  margin-top: 2px;
  line-height: 1.35;
}
.panel-complemento {
  font-size: 10.5px;
  color: #7a8fa8;
  font-style: italic;
  margin-top: 1px;
}

/* Vagas — linha corrida por cargo */
.panel-vagas {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panel-vaga-row {
  font-size: 11px;
  line-height: 1.5;
  color: var(--label-text);
  padding: 3px 0 3px 7px;
  border-left: 2px solid var(--blue-3);
  display: block;
  word-break: break-word;
}

/* Spans inline dentro da linha de cargo */
.pv-cargo {
  font-weight: 700;
  color: var(--blue-5);
}
.pv-espec {
  color: #3a5a7a;
}
.pv-comp {
  color: #6a8aaa;
  font-style: italic;
}
.pv-qtde {
  color: #4a6a8a;
}
.pv-rem {
  font-weight: 600;
  color: var(--blue-4);
}

/* Rodapé: ícone edital à esquerda + datas à direita */
.panel-info {
  margin-top: 8px;
  border-top: 1px solid var(--blue-1);
  padding-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panel-info-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10.5px;
  line-height: 1.4;
}

.pi-label {
  font-weight: 700;
  color: var(--blue-4);
  white-space: nowrap;
  min-width: 52px;
}

.pi-value {
  color: #4a6a8a;
  word-break: break-word;
}

.btn-edital {
  display: inline-block;
  padding: 4px 13px;
  background: var(--blue-4);
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition);
}
.btn-edital:hover { background: var(--blue-5); }

.panel-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
}

/* ─── Mobile ≤ 768px ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #infographic-container { max-width: 100%; }

    .expanded-panel {
    right: 16px;
    width: 440px;
    max-width: calc(100vw - 32px);
  }
}

/* ─── Variante opcaoA: labels maiores ─────────────────────────────────────────── */
.label-item--large .label-title      { font-size: 12.5px; }
.label-item--large .label-complemento { font-size: 10.5px; }
.label-item--large .label-cargos     { font-size: 11px; }

/* ─── Widget de seleção de municípios com tags ───────────────────────────────── */
.mun-widget {
  border: 1px solid #dde4ee;
  border-radius: 5px;
  background: #fff;
  min-width: 200px;
}
.mun-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 8px;
  min-height: 32px;
  background: #f0f4f9;
}
.mun-widget .select-municipio-multi {
  border: none;
  border-top: 1px solid #dde4ee;
  border-radius: 0;
  background: #fff;
  font-size: 12.5px;
  width: 100%;
  padding: 6px 10px;
}
.mun-widget .select-municipio-multi:focus { box-shadow: none; outline: none; }
.tag-mun {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #1e5f8e;
  color: #fff;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
}
.tag-mun button {
  background: none; border: none; color: rgba(255,255,255,.75);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 3px;
}
.tag-mun button:hover { color: #fff; }
.tag-estadual {
  display: inline-flex;
  align-items: center;
  background: #6b8099;
  color: #fff;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-style: italic;
}

/* ─── Barra de filtros — sobre o mapa, sem fundo escuro ─────────────────────── */
#filter-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 8px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none; /* deixa clique passar pro mapa exceto nos botões */
}

#filter-bar:empty { display: none; }

.fb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  pointer-events: none;
}

/* Botão base */
.fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Segoe UI', Arial, sans-serif;
  cursor: pointer;
  border: 1.5px solid rgba(13,59,110,0.35);
  background: rgba(255,255,255,0.82);
  color: #1e5f8e;
  letter-spacing: 0.02em;
  backdrop-filter: blur(3px);
  transition: background 0.14s, color 0.14s, border-color 0.14s, box-shadow 0.14s;
  white-space: nowrap;
  user-select: none;
  line-height: 1.4;
  box-shadow: 0 1px 4px rgba(13,59,110,0.18);
  pointer-events: all;
}

.fb-btn:hover {
  background: rgba(255,255,255,0.96);
  border-color: #1e5f8e;
  color: #0d3b6e;
  box-shadow: 0 2px 8px rgba(13,59,110,0.25);
}

.fb-btn.fb-active {
  background: #f0a500;
  color: #fff;
  border-color: #d49200;
  box-shadow: 0 2px 8px rgba(240,165,0,0.35);
}

.fb-btn.fb-active:hover {
  background: #d49200;
}

/* Botão "◀ Nacional" — menor, sutil */
.fb-nacional {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.65);
  border-color: rgba(13,59,110,0.22);
  color: #5a7a9a;
}
.fb-nacional:hover {
  background: rgba(255,255,255,0.92);
  color: #1e5f8e;
}

/* Pills de estado — quadrados menores */
.fb-estado {
  padding: 4px 10px;
  font-size: 11px;
  min-width: 38px;
  border-radius: 6px;
}

@media (max-width: 520px) {
  .fb-btn   { font-size: 11px; padding: 4px 10px; }
  .fb-estado { font-size: 10px; padding: 3px 8px; min-width: 32px; }
  #filter-bar { padding: 6px 8px 4px; }
}