/* ==========================================================================
   Vista 3D embutida no planejador (seletor 2D / 3D / Lado a lado)
   ========================================================================== */

.view-mode-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-surface-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  backdrop-filter: var(--backdrop-blur);
  box-shadow: var(--shadow-card);
}

.view-mode-switch button {
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font: 600 0.82rem var(--font-main);
  cursor: pointer;
  white-space: nowrap;
}

.view-mode-switch button:hover { color: var(--text-primary); }

.view-mode-switch button.active {
  background: var(--accent-cyan);
  color: #041016;
}

.view3d-pane {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 850;
  background: #080c14;
}

.view3d-pane iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.app-map-container.view-3d .view3d-pane,
.app-map-container.view-split .view3d-pane { display: block; }

/* 3D em tela inteira: o painel de telemetria 2D fica escondido (a vista 3D tem a própria barra) */
.app-map-container.view-3d .map-bottom-hud { display: none; }

/* Lado a lado: mapa à esquerda, 3D à direita */
.app-map-container.view-split #map { width: 50%; }
.app-map-container.view-split .view3d-pane {
  left: 50%;
  border-left: 1px solid var(--border-active);
}
.app-map-container.view-split .map-bottom-hud { right: calc(50% + 20px); }

@media (max-width: 900px) {
  .view-mode-switch button[data-view="split"] { display: none; }
  .view-mode-switch button { padding: 6px 10px; }
}