#chart-wrapper {
    position: relative;
    width: 100%;
    height: calc(100vh - 150px);
    overflow: hidden; /* Oculta áreas fora do contêiner */
    border: 1px solid var(--template-border-color); /* Define a borda */
    border-radius: 30px; /* Deve ser maior para acompanhar o border-radius da borda original */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra opcional */
    background-color: var(--panel-background); /* Fundo claro */
}

#chart-container {
    transform: scale(1);
    transform-origin: center;
    width: 100%;
    height: auto;
}

#chart-controls {
    display: flex;
    gap: 8px;
    position: absolute;
    bottom: 15px;
    left: 30px;
    z-index: 10;
    border: 1px solid var(--template-border-color); /* Define a borda */
    border-radius: 8px; /* Deve ser maior para acompanhar o border-radius da borda original */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra opcional */
    background-color: var(--panel-background); /* Fundo claro */
    padding: 8px;
}

.custom-node {
  position: relative;
  width: 435px; /* Largura fixa */
  height: auto; /* Altura fixa */
  border: 2px solid var(--template-border-color); /* Borda azul */
  border-radius: 8px; /* Bordas arredondadas */
  background-color: var(--tab-background); /* Fundo claro */
  text-align: center; /* Centraliza o texto */
  display: flex; /* Habilita flexbox */
  flex-direction: column; /* Organiza elementos em coluna */
  justify-content: center; /* Centraliza verticalmente */
  align-items: top; /* Centraliza horizontalmente */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  transition: all 0.3s ease; /* Suaviza mudanças visuais */
  overflow: hidden;
}

.custom-node:hover {
  border-color: var(--main-color); /* Cor da borda mais escura */
  cursor: pointer; /* Mostra o cursor de clique */
}

.custom-header {
  padding: 10px;
  padding-left: 20px;
  width: 100%;
  height: auto;
  display: flex; /* Ativa o Flexbox */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  border-top-left-radius: 1px !important;
  border-top-right-radius: 1px !important;
}

.custom-header-texto {
  padding-left: 20px;
  width: 100%;
  height: auto;
  display: flex; /* Ativa o Flexbox */
  flex-direction: column;
}

.custom-header-texto strong {
  text-align: left; /* Centraliza o texto */
  font-weight: bold; /* Texto em negrito */
  font-size: 22px; /* Tamanho do texto */
  color: var(--text-color); /* Cor do texto (cinza escuro) */
}

.custom-header-texto em {
  text-align: left; /* Centraliza o texto */
  font-size: 18px; /* Tamanho do texto */
  color: var(--text-color); /* Cor do texto (cinza escuro) */
}

.custom-header-texto p {
  text-align: left; /* Centraliza o texto */
  font-weight: bold; /* Texto em negrito */
  font-size: 12px; /* Tamanho do texto */
  color: var(--text-color); 
  margin-bottom: 0px !important; /* 🔥 Remove a margem inferior */
  margin-top: 0px !important;
}

.custom-body {
  padding-top: 16px;
  font-size: 14px;
  color: var(--text-color);
  flex-grow: 1; /* Permite que o conteúdo ocupe o espaço restante */
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-body-infos {
  padding-left: 10px;
  font-size: 14px;
  color: var(--text-color);
  flex-grow: 1; /* Permite que o conteúdo ocupe o espaço restante */
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;
  border-left: 4px solid var(--template-border-color); /* 🔥 Borda adicionada no lado esquerdo */
}

.custom-body p {
  margin: 5px 0; /* Evita espaçamentos desnecessários */
  align-self: left; /* Centraliza o próprio elemento */
  text-align: left; /* Centraliza o texto */
}

.custom-footer {
  display: flex;
  padding-bottom: 10px;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: bottom; /* Centraliza verticalmente */
  text-align: center; /* Centraliza o texto */
  width: calc(100% - 10px);
  margin-top: 10px; /* Espaçamento acima do rodapé */
  font-size: 12px; /* Tamanho do texto */
  color: var(--field-color); /* Cor do texto (cinza claro) */
}

.custom-button {
    background-color: var(--main-color); /* Cor do botão */
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease;
}

.custom-button:hover {
     /* Cor mais escura no hover */
}

.chart-spacer {
    width: 2px; /* Largura da linha */
    background-color: silver; /* Cor da linha */
    height: 35px; /* Altura total do contêiner */
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Define um tamanho fixo para botões de ícones */
    height: 40px;
    padding: 0;
    border-radius: 50%; /* Deixa o botão redondo */
}

.icon-btn i {
    margin: 0 !important; /* Remove qualquer margem padrão */
    padding: 0;
    font-size: 18px; /* Mantém o ícone no tamanho correto */
    line-height: 1;
    text-align: center;
    width: 100%;
}

.config-vaga-btn {
    position: absolute;
    padding: 10px;
    top: 5px;
    right: 5px;
}

.delete-vaga-desativado-btn {
    position: absolute;
    padding: 10px;
    top: 5px;
    right: 5px;
    color: grey;
}

.delete-vaga-btn {
    position: absolute;
    padding: 10px;
    top: 5px;
    right: 5px;
    color: red;
}


.table-scroll {
    max-height: 220px; /* 🔥 Ajuste a altura máxima conforme necessário */
    overflow-y: auto;   /* 🔥 Ativa scroll vertical quando necessário */
    overflow-x: auto;   /* 🔥 Ativa scroll horizontal caso a tabela seja larga */
}

/* Estiliza a barra de rolagem para melhor aparência */
.table-scroll::-webkit-scrollbar {
    width: 8px;
}

.table-scroll::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 4px;
}

.table-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}


/* 🔥 Faixa de cor do setor */
.setor-indicator {
    position: absolute;
    left: 0px;
    top: 0;
    width: 8px; /* Largura da faixa */
    height: 100%;
    background-color: #CCCCCC; /* Cor padrão se não for definida */
    z-index: 5;
}

/* 🔥 Foto do avatar */
.custom-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--template-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.custom-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.truncate-text {
    display: block; /* Permite que o texto respeite a largura do elemento pai */
    width: calc(100% - 35px); /* Ocupa todo o espaço disponível */
    white-space: nowrap; /* Impede que o texto quebre linha */
    overflow: hidden; /* Oculta o texto excedente */
    text-overflow: ellipsis; /* Adiciona "..." ao final do texto que exceder */
}

/* 🔥 Contêiner principal das barras DISC */
.disc-container {
    padding-left: 15px;
    padding-right: 10px;
    width: 100%;
    display: flex;
    gap: 8px;
    text-align: left;
}

/* 🔥 Cada barra do DISC */
.disc-bar {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 5px;
}

/* 🔥 Nome da categoria (D, I, S, C) */
.disc-label {
    font-weight: bold;
    width: 20px;
    text-align: center;
}

/* 🔥 Barra de progresso (estrutura externa) */
.disc-progress {
    flex: 1;
    height: 14px; /* 🔥 Aumentei um pouco a altura para melhor visibilidade */
    border-radius: 7px;
    background-color: #f0f0f0; /* Fundo mais claro para contraste */
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1); /* 🔥 Borda sutil para dar mais definição */
}

/* 🔥 Preenchimento das barras */
.disc-fill {
    height: 100%;
    transition: width 0.3s ease-in-out;
    border-radius: 1px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* 🔥 Sombra interna para dar um efeito mais 3D */
}

/* 🔥 Cores modernas para cada perfil */
.dominancia { 
    background: linear-gradient(90deg, #FF6B6B, #FF3B3B); /* 🔥 Vermelho vibrante com gradiente */
}

.influencia { 
    background: linear-gradient(90deg, #FFD93D, #FFC107); /* 🔥 Dourado moderno */
}

.estabilidade { 
    background: linear-gradient(90deg, #17C3B2, #14A492); /* 🔥 Verde esmeralda sofisticado */
}

.conformidade { 
    background: linear-gradient(90deg, #4D96FF, #2266CC); /* 🔥 Azul oceano refinado */
}

/* 🔥 Valor da porcentagem */
.disc-value {
    font-size: 12px;
    font-weight: bold;
    width: 30px;
    text-align: center;
}