/* ============ MAP CONTAINER ============ */
#map { width: 100%; height: 100%; }

/* ============ MAP CONTROLS (basemap pills + camadas publicas) ============ */
.map-controls {
  position: absolute; top: 16px; left: 16px;
  background: white; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 14px; z-index: 10; min-width: 260px;
}
.map-controls h3 {
  font-size: 12px; color: var(--caixa-blue-darker); margin-bottom: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
}

.layer-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; cursor: pointer; font-size: 13px; color: var(--text);
}
.layer-toggle input { cursor: pointer; }
.layer-toggle .swatch {
  width: 12px; height: 12px; border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.1);
}

.basemap-pills {
  display: flex; gap: 4px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.basemap-pills button {
  flex: 1; padding: 6px; font-size: 11px;
  border: 1px solid var(--border); background: white;
  border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
.basemap-pills button.active { background: var(--caixa-blue); color: white; border-color: var(--caixa-blue); }
.basemap-pills button:hover:not(.active) { background: var(--bg); }

/* ============ LEGEND ============ */
.legend {
  position: absolute; bottom: 30px; left: 16px;
  background: white; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 12px 14px; z-index: 10; max-width: 280px;
}
.legend h4 {
  font-size: 11px; color: var(--caixa-blue-darker); margin-bottom: 8px;
  text-transform: uppercase; font-weight: 700; letter-spacing: 0.4px;
}
.legend .row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0; font-size: 12px; color: var(--text);
}
.legend .marker {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}

/* ============ API ERROR BANNER ============ */
.api-error-banner {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: #FEE2E2; color: #991B1B;
  border-left: 4px solid #DC2626;
  padding: 12px 18px; border-radius: 6px;
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.api-error-banner[hidden] { display: none; }
.api-error-banner strong { display: block; margin-bottom: 2px; }
.api-error-banner button {
  background: #DC2626; color: white;
  border: none; padding: 6px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.api-error-banner button:hover { background: #B91C1C; }