/*
  PORQUE EXISTE: árvore de ficheiros — hierarquia clara, hover suave,
  tipografia alinhada ao tema do wrapper.
*/
.sidebar-cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--borda);
}
.sidebar-titulo {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto);
}
.nome-no {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px;
  color: var(--texto-fraco);
}
.no:hover .nome-no,
.no.selecionada .nome-no { color: var(--texto); }

.seletor-fonte { padding: 10px 12px; border-bottom: 1px solid var(--borda); }
.seletor-fonte select {
  width: 100%; padding: 9px 10px; border-radius: var(--raio-sm);
  background: var(--fundo-editor); color: var(--texto);
  border: 1px solid var(--borda); font-size: 12px;
  transition: border-color var(--trans);
}
.seletor-fonte select:hover { border-color: var(--borda-forte); }

.arvore { flex: 1; overflow-y: auto; padding: 8px 6px; }

.no {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; margin: 1px 0; border-radius: var(--raio-sm);
  cursor: pointer; color: var(--texto);
  transition: background var(--trans);
}
.no:hover { background: var(--fundo-hover); }
.no.selecionada {
  background: var(--fundo-selecao);
  box-shadow: inset 2px 0 0 var(--destaque);
}

.chevron, .icone-arq {
  width: 13px; height: 13px; flex-shrink: 0; color: var(--texto-fraco);
  transition: transform var(--trans);
}
.no.aberta .chevron { transform: rotate(90deg); color: var(--destaque); }

.btn-copiar {
  width: 26px; height: 26px; opacity: 0; flex-shrink: 0;
  transition: opacity var(--trans), color var(--trans);
}
.no:hover .btn-copiar { opacity: 0.7; }
.no:hover .btn-copiar:hover { opacity: 1; }
.btn-copiar.copiado { color: var(--ok); opacity: 1; }