.arvore-viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: var(--fundo);
}

.arvore-viewport.a-arrastar {
  cursor: grabbing;
}

.arvore-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.arvore-canvas.animar {
  transition: transform var(--duracao-recentralizar) var(--easing-recentralizar);
}

.arvore-conectores {
  position: absolute;
  top: 0;
  left: 0;
  /* canvasEl só tem filhos position:absolute, então o navegador enxerga
     largura/altura de conteúdo 0 nele — sem isso, max-width:100% (base.css)
     colapsa o SVG pra 0 e nenhuma linha aparece, mesmo com os paths corretos. */
  max-width: none;
  max-height: none;
  overflow: visible;
  pointer-events: none;
}

.arvore-conectores path {
  fill: none;
  stroke: var(--conector);
  stroke-width: var(--traco-conector);
}

.arvore-conectores path.conector-parente {
  stroke-dasharray: 3 3;
}

.arvore-conectores circle.conector-parente-ancora {
  fill: var(--conector);
  stroke: none;
}

.arvore-conectores path.conector-fantasma {
  stroke-dasharray: 2 4;
}

.arvore-controles {
  position: fixed;
  right: var(--espaco-4);
  bottom: var(--espaco-4);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.arvore-controles .botao-icone {
  background: var(--superficie);
  box-shadow: var(--sombra-card);
}

.estado-carregamento {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-3);
  background: var(--fundo);
  color: var(--texto-fraco);
  text-align: center;
  padding: var(--espaco-4);
}

.estado-carregamento[hidden] {
  display: none;
}

.arvore-contador {
  position: fixed;
  left: var(--espaco-4);
  bottom: var(--espaco-4);
  z-index: 20;
  background: var(--superficie);
  box-shadow: var(--sombra-card);
  border-radius: var(--raio-chip);
  padding: var(--espaco-1) var(--espaco-3);
  font-size: 12px;
  color: var(--texto-fraco);
}