.cm-tree-container { display:flex; flex-direction:column; align-items:center; margin:20px; font-family:Arial,sans-serif; }
.cm-tree-level { display:flex; justify-content:center; position:relative; margin-top:40px; flex-wrap:wrap; }
.cm-node { display:flex; flex-direction:column; align-items:center; margin:0 10px; position:relative; }
.cm-node-box { padding:10px 15px; background:#be9e44; color:#fff; border-radius:6px; text-align:center; min-width:120px; z-index:1; }
.cm-node-children { display:flex; justify-content:center; position:relative; margin-top:40px; }
.cm-node-child { display:flex; flex-direction:column; align-items:center; position:relative; margin:0 5px; }

.cm-connection-vertical { width:2px; height:20px; background:#41403f; position:absolute; top:-20px; left:50%; transform:translateX(-50%); z-index:0; }
.cm-connection-horizontal { display:flex; justify-content:space-between; position:absolute; top:0; width:100%; height:2px; background:#41403f; }
.cm-connection-point { width:2px; height:20px; background:#41403f; }

.add-user-btn { margin-top:5px; padding:4px 8px; background:#41403f; color:#fff; border:none; border-radius:4px; cursor:pointer; transition: background 0.3s; }
.add-user-btn:hover { background:#5c5c5c; }

.add-user-form { 
    margin-top:6px; 
    padding:6px; 
    background:#fff; 
    border-radius:4px; 
    text-align:left; 
    overflow:hidden; 
    max-height:0; 
    opacity:0; 
    transition: all 0.4s ease; 
}
.add-user-form.show { max-height:300px; opacity:1; }

.add-user-form input { margin-bottom:4px; width:120px; padding:3px; }
.submit-add-user { padding:4px 6px; background:#be9e44; color:#fff; border:none; border-radius:4px; cursor:pointer; transition: background 0.3s; }
.submit-add-user:hover { background:#a8862f; }

.cm-node-child .add-user-btn { transition: transform 0.3s; }
.cm-node-child:hover .add-user-btn { transform: scale(1.2); }

@media(max-width:800px){ 
    .cm-tree-level { flex-direction:column; } 
    .cm-node-children { flex-direction:column; } 
}

/* ============================
   ESTILOS DEL DASHBOARD
   ============================ */

.cm-perfil {
    background: #fdfdf7;
    border: 2px solid #be9e44;
    padding: 35px 45px;
    border-radius: 14px;
    max-width: 1100px; /* más ancho */
    margin: 30px auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    display: grid;
    grid-template-columns: 1fr 1fr; /* divide en dos columnas */
    grid-gap: 25px;
    color: #41403f;
}

.cm-perfil h2 {
    grid-column: span 2;
    text-align: center;
    color: #41403f;
    margin-bottom: 20px;
}

.cm-perfil h3, .cm-perfil h4 {
    grid-column: span 2;
    color: #be9e44;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-top: 15px;
}

.cm-perfil .campo {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}

.cm-perfil .campo strong {
    color: #41403f;
    font-weight: 600;
}

.cm-perfil .campo span {
    color: #333;
    text-align: right;
}

@media(max-width:900px){
    .cm-perfil {
        grid-template-columns: 1fr; /* una sola columna en móviles */
        padding: 20px;
    }
  /* Centrar el signo + dentro de los nodos vacíos (círculos) */
.cm-node.empty {
    /* Asegura que el nodo tenga dimensiones definidas */
    height: 50px; /* Asegúrate de que coincida con el tamaño de tu círculo */
    width: 50px;  /* Asegúrate de que coincida con el tamaño de tu círculo */
    
    /* Usa Flexbox para centrar el contenido */
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

/* Ajusta el estilo del signo + */
.cm-node.empty::before {
    content: "+";
    font-size: 24px;
    line-height: 1;
    /* (Cualquier otro estilo para el +) */
}
}